/* ============================================================================ Sonya Prema — native site stylesheet ============================================================================ Hand-authored replacement for Framer's 146KB generated CSS. Every value here was measured off the live production site with getComputedStyle (see tests/visual/data/styles-*.json), not eyeballed. Where a value matches a design token, the token is used; the tokens file itself was measured the same way, so they agree by construction. Breakpoints match Framer's originals exactly, confirmed by binary-searching viewport widths against the live site: - desktop >= 1200px - tablet 810px - 1199.98px - phone <= 809.98px Using different values would reflow the page at different widths than production, which the pixel-diff gate would (correctly) fail us on. ============================================================================ */ @import url("/design-system/tokens.css"); /* --------------------------------------------------------------------------- FONTS Self-hosted woff2, already present in site/_/f/ from the Framer mirror. Only THREE font files are actually downloaded by the live site — verified by recording every .woff2 network request during a full-page scroll, rather than by reading Framer's CSS (which declares 35 @font-face rules, most of them Inter subsets the page never uses). Shipping only what's really fetched keeps us byte-identical in rendering while dropping the dead declarations. The Roboto request you'll see in devtools comes from the YouTube embed iframe, not from us — out of our control and out of scope. --------------------------------------------------------------------------- */ /* Playfair Display 700 — hero name, all section headings */ @font-face { font-family: "Playfair Display"; src: url("/_/f/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiunDXbtM.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400 900; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Playfair Display italic — pull quotes on the EPK page */ @font-face { font-family: "Playfair Display"; src: url("/_/f/nuFkD-vYSZviVYUb_rj3ij__anPXDTnogkk7.woff2") format("woff2"); font-display: swap; font-style: italic; font-weight: 400 900; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* DM Sans variable — all body copy, nav, labels, buttons. NOTE the filename prefix: DM Sans is the rP2Yp2* file. The nuF* files are Playfair. These are easy to transpose (both are Google-Fonts hashes) and doing so renders the entire nav in italic serif — which is exactly the bug this comment exists to prevent recurring. Verified by mapping each downloaded woff2 back to its @font-face rule on live production. */ @font-face { font-family: "DM Sans"; src: url("/_/f/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 100 1000; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Inter — needed for exactly ONE label ("How Did You Hear About Me?") on the booking form. Production declares Inter there and it genuinely renders in Inter, so matching it requires the real face. Self-hosted rather than pulled from fonts.gstatic.com: every other face here is self-hosted, and adding a third-party font request for one label would be a regression in both privacy and request count. Latin subset only, 23KB. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/_native/assets/fonts/inter-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --------------------------------------------------------------------------- RESET Minimal and deliberate — not a kitchen-sink normalize. Only the rules that Framer's output effectively relied on. --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* Users who ask for less motion get no smooth-scroll hijack and no entry animations (see site.js, which checks the same query). Framer ignores this preference entirely; honoring it is a deliberate improvement Moe approved. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--color-bg-page); color: var(--color-text-primary); font-family: var(--font-body); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, video, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } /* Visible focus for keyboard users. Framer's build shipped no focus styles at all on most interactive elements — a real a11y gap we're not carrying over. */ :focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- ENTRY ANIMATION BASE Elements that animate in start hidden. The exact opacity 0.001 (not 0) is Framer's own value, kept because a true 0 can cause the compositor to skip creating a layer, producing a visible pop on the first frame instead of a smooth fade. site.js clears these once the animation is scheduled. --------------------------------------------------------------------------- */ [data-anim] { opacity: 0.001; will-change: opacity, transform; } [data-anim="rise"] { transform: translateY(30px); } [data-anim="rise-lg"] { transform: translateY(80px); } [data-anim="rise-sm"] { transform: translateY(10px); } [data-anim="slide-left"] { transform: translateX(-80px); } /* If JS never runs (or is blocked), content must still be readable. Framer's build fails this test — blocking its JS leaves 70 elements stuck invisible forever, verified with a real request-interception test. Ours degrades to fully visible instead: the .no-js class is on from the start and removed by site.js, so a JS failure leaves everything shown. */ .no-js [data-anim] { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { [data-anim] { opacity: 1 !important; transform: none !important; } } /* --------------------------------------------------------------------------- LAYOUT PRIMITIVES --------------------------------------------------------------------------- */ .container { width: 100%; max-width: 1000px; margin-inline: auto; padding-inline: 24px; } @media (min-width: 810px) { .container { padding-inline: 40px; } } @media (min-width: 1200px) { .container { padding-inline: 0; } } .section { position: relative; } /* Gold eyebrow label — appears above almost every section heading. */ .eyebrow { font-size: 11px; font-weight: 400; letter-spacing: 0.2em; /* 13.2px on production, not 11px. */ line-height: 13.2px; text-transform: uppercase; color: var(--color-gold); } /* Section heading, Playfair. Sizes measured per breakpoint off live. */ .section-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--color-text-primary); font-size: 36px; } @media (min-width: 810px) { .section-title { font-size: 40px; } } @media (min-width: 1200px) { .section-title { font-size: 56px; } } .section-title.on-light { color: var(--color-text-on-light); }