/* ============================================================ BASE — reset, typography primitives, layout, the rhythm system, and the reveal primitive. CLIENT: Milo Coffee House — LIGHT-DOMINANT. The rhythm engine below is Milo's: buttermilk `paper` is the dominant field (the default), `teal-wash` is the one utility regrip (cell 6), `espresso` is the one deeper proof seam (cell 5). (Replaces the starter's dark ink/marble/cream/terracotta map.) ============================================================ */ /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; } body { font-family: var(--font-sans); font-size: var(--step-0); line-height: var(--leading-body); color: var(--ink); /* on-light is the DEFAULT (light-dominant) */ background: var(--base); /* buttermilk paper is the dominant canvas */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } ::selection { background: var(--teal-soft); color: var(--ink); } /* ---- Lenis smooth-scroll hooks ---- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ---- Typography primitives ---- */ .display { font-family: var(--font-display); font-weight: 400; font-optical-sizing: auto; line-height: var(--leading-display); letter-spacing: 0.01em; color: var(--ink); } .eyebrow { font-family: var(--font-body); font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-label); font-weight: 700; color: #a5551f; /* deep marigold eyebrow — AA-safe 4.8:1 on paper (bright --support was 3.14:1) */ } .em { font-family: var(--font-display); font-style: italic; color: var(--support); } /* the headline signature: marigold italic */ .measure { max-width: var(--measure); } /* ---- Layout ---- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap--wide { max-width: var(--maxw-wide); } .stack > * + * { margin-top: var(--space-m); } /* ---- The rhythm system: one dominant bright base, one teal regrip, one deep seam ---- Each section declares its family via data-bg. Same-family neighbours share the exact canvas so bright runs read as one continuous surface (seamless). Milo rhythm: paper (dominant) → teal-wash (utility regrip) → espresso (proof seam). Set each section's data-bg per WOW_CONTRACTS §4. */ .section { position: relative; padding-block: var(--section-pad-y); } /* paper — the DOMINANT buttermilk field (the default; cells 1,2,3,4,7). */ .section[data-bg="paper"] { background: var(--base); color: var(--ink); } /* teal-wash — the ONE light teal-tinted utility regrip (cell 6). */ .section[data-bg="teal-wash"] { background: linear-gradient(180deg, var(--teal-soft), rgba(76, 181, 200, 0.06)), #eef7f8; color: var(--ink); } /* espresso — the ONE deeper proof seam (cell 5). Warm dark-teal preferred: it frames the warm, lower-res room photos flatteringly (per the tile). */ .section[data-bg="espresso"] { background: linear-gradient(180deg, var(--espresso-teal) 0%, var(--teal-deep) 100%); color: var(--text-on-dark); } .section[data-bg="espresso"] .eyebrow { color: var(--accent); } /* teal eyebrow on dark */ .section[data-bg="espresso"] .display { color: var(--text-on-dark); } .section[data-bg="espresso"] .em { color: #ffd7bb; } /* warm italic on dark (tile) */ /* ---- Reveal primitive ---- .js is set inline in (no flash). Elements hide, then the motion layer animates them in. No JS / reduced-motion => fully visible. NOTE (Milo law): content is ALIVE AT t0 — reveal is a gentle load-in intro only, NEVER a scroll-gate that hides content until scrolled. */ .js [data-reveal] { opacity: 0; transform: translateY(24px); will-change: opacity, transform; } [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; will-change: auto; } html { scroll-behavior: auto; } }