/** * Mockup Theme — design tokens (:root) * * Authoritative source: ex-WPCode snippet 352 (editorial `.brs-wrap` scope). * Promoted from that component scope to :root so every template and ported * snippet shares one source of truth. * * Colour note: the editorial snippets use --yellow:#F2EC1A. The mockup-core * plugin CSS uses #F2EC19 (one byte off). We standardise on the snippet value * #F2EC1A here; override locally only if a pixel-exact match to a plugin * surface is ever required. */ :root { /* ── Palette ────────────────────────────────────────────── */ --cream: #EDECEA; --black: #0e0e0c; --yellow: #F2EC1A; /* ── Type families (design layer) ───────────────────────── */ --serif: "LGV Anastasia 2025 Geo", serif; --sans: "FiraGo", sans-serif; /* ── Layout ─────────────────────────────────────────────── */ /* Phase 4 reconciliation: the desktop header is in normal flow (top bar * ~28px + sticky 70px bar ≈ 98px), NOT fixed — so content clears it * without a body offset and this token is NOT a global offset. Its sole * consumer is the brand hero's `calc(100vh - --header-h)`; 107px is kept * as a safe full-height approximation (±10px is imperceptible on a hero). * The mobile fixed-header offset is applied to by header.js * (padding-top = mkmHeader.offsetHeight), matching the plugin's behaviour. */ --header-h: 107px; /* ── Content width (site-wide alignment) ─────────────────── * One shared content column so the header, breadcrumbs, product * sections and footer all line up at the same left/right edges. * Two helpers, which resolve to identical edges at every width: * --mk-edge → side padding for FULL-BLEED rows (background stays * edge-to-edge; content is pulled into the 1400 column) * --mk-frame → max-width for CONTAINED blocks (pair with * margin-inline:auto + padding-inline:var(--mk-gutter)) */ --mk-content: 1400px; --mk-gutter: 48px; --mk-frame: calc(var(--mk-content) + 2 * var(--mk-gutter)); --mk-edge: max(var(--mk-gutter), calc((100% - var(--mk-content)) / 2)); } /* Tighten the gutter on smaller viewports (below the 1400 column it is a flat side margin). */ @media (max-width: 900px) { :root { --mk-gutter: 24px; } } @media (max-width: 560px) { :root { --mk-gutter: 16px; } }