/* Design tokens. Figma "Mayfield Design" (93kuA4ZRlxM378LbOxiZ1E). */ /* Menu progress, 0 closed to 1 open; registered so one transition drives the whole menu. */ @property --menu-p { syntax: ""; inherits: true; initial-value: 0; } /* ---- BDO Grotesk: self-hosted, OFL (assets/fonts/OFL.txt); swap avoids blank text on slow loads */ @font-face { font-family: "BDO Grotesk"; src: url("../assets/fonts/bdo-grotesk-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "BDO Grotesk"; src: url("../assets/fonts/bdo-grotesk-extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } :root { /* ---- Colour: accent follows live weather via [data-weather] on ---- */ --c-overcast: #d6ffa2; --c-sunny: #ffb700; --c-rain: #69e3ff; --c-frost: #69ffe1; --c-night: #121e3e; --c-republic: #e5ff00; /* [figma Republic] fixed, not weather-driven */ --c-ink: #000000; --c-paper: #ffffff; --c-field: #efefef; /* [figma Grey] form field fill; tokenised so night can repoint it */ --c-on-media: #ffffff; /* text over video; stays white in night mode */ --c-wash: rgb(255 255 255 / 0.2); /* [figma Secondary colour] alpha so it works on every accent */ --c-accent: var(--c-overcast); /* fallback: overcast (pre-resolve is white) */ /* ---- Type: Medium 500 for UI/body, ExtraBold 800 for headlines ---- */ --f-sans: "BDO Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Adobe kit anw5ghn (republic.html); must use the slug garamond-premier-pro, not the display name */ --f-serif: "garamond-premier-pro", "EB Garamond", Garamond, "Times New Roman", Georgia, serif; --w-medium: 500; --w-xbold: 800; /* Mobile-first sizes. [figma Global/Title/Title 40, Body 18, Caps 15] */ --t-title: 40px; /* section headlines — xbold, lh 1, -4% */ --t-panel: 44px; /* video-panel wordmark + marquee — xbold, lh .8, -4% */ --t-lens: 40px; /* "The lens of Mayfield" */ --t-body: 18px; /* body copy — medium, lh 1.1 */ --t-over: 13px; /* [figma Caps/Overline 13] a form field's label — medium, uppercase */ --t-caps: 15px; /* buttons, nav, labels — medium, lh 1, uppercase */ --t-caps-l: 18px; /* menu links */ --t-ui: 14px; /* temp readout */ --t-mark: 16px; /* MAYFIELD in the 36px nav bar — xbold */ --t-legal: 12px; /* [figma Global/Body/Body 12] the menu foot pair */ --t-foot: 11px; /* copyright — medium, lh 1.4 */ --t-stamp: 54px; /* the rotated ©Mayfield 2026 slab */ /* Figma tracking is a percentage, so em not px. */ --ls-title: -0.04em; --ls-tight: -0.05em; --lh-flat: 1; /* headlines and caps */ --lh-body: 1.1; --lh-crush: 0.8; /* the big display slabs */ --lh-foot: 1.4; /* ---- Space ------------------------------------------------------------ */ --s-1: 2px; /* [figma] the Instagram grid gutter */ --s-2: 4px; --s-3: 10px; --s-4: 12px; --s-5: 16px; --s-6: 20px; --s-7: 24px; --s-8: 30px; /* mobile page gutter */ --s-9: 40px; --s-10: 60px; --s-11: 80px; --gutter: var(--s-8); /* ---- Chrome ----------------------------------------------------------- */ --nav-h: 36px; /* [figma 214:2280] the persistent bar */ --nav-init-h: 48px; /* [figma 214:2433] the landing bar, 12px of it green */ --nav-band: 12px; /* the green strip above the hero video */ /* Window size; shared so the hero shrink keyframes land on the fixed window. */ --win-w: 245px; --win-h: 400px; --radius-btn: 70px; --radius-panel: 0px; --radius-field: 20px; /* [figma 255:4767] the grey field box */ --radius-arrow: 10px; /* [figma 255:4790] the white chevron well inside it */ --border-btn: 2px; /* [figma] buttons are a 2px black stroke, never filled */ /* ---- Motion ----------------------------------------------------------- */ --dur-marquee: 12s; /* Button hover roll, shared by .btn, .dest__icon and the brochure cell. */ --dur-roll: 0.42s; --ease-roll: cubic-bezier(0.5, 0, 0.2, 1); /* Window crossfade; motion.js reads this to know when to pause the outgoing layer. */ --win-fade: 0.45s; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-menu: cubic-bezier(0.76, 0, 0.24, 1); /* slower start so the full-height panel wipes, not snaps */ --dur-menu: 0.86s; /* Closed wordmark scale (nav width / open width); set by motion.js. */ --seat-s: 0.09; /* Wordmark offset above the panel edge: 11px closed (matches the nav mark) to --mark-inset-open. */ --mark-inset-open: 42px; --mark-inset: calc(11px + (var(--mark-inset-open) - 11px) * var(--menu-p)); } :root { --menu-p: 0; transition: --menu-p var(--dur-menu) var(--ease-menu); } :root.menu-open { --menu-p: 1; } /* Desktop scale. [figma Global/Title/Title 58, Body 22] */ @media (min-width: 1024px) { :root { --t-title: 58px; --t-panel: 60px; --t-lens: 58px; --t-body: 22px; --t-stamp: clamp(64px, 7.6vw, 100px); --gutter: var(--s-10); --win-w: 340px; --win-h: 480px; --mark-inset-open: 16px; } } /* Weather states, set by motion.js; force with ?weather=sunny. */ [data-weather="overcast"] { --c-accent: var(--c-overcast); } [data-weather="sunny"] { --c-accent: var(--c-sunny); } [data-weather="rain"] { --c-accent: var(--c-rain); } [data-weather="frost"] { --c-accent: var(--c-frost); } /* Republic fixes the accent to its yellow; outranks [data-weather]. */ html[data-brand="republic"] { --c-accent: var(--c-republic); } /* White until the weather resolves; wx-ready is set on every outcome, and no-JS keeps overcast. */ html.js:not(.wx-ready) { --c-accent: #ffffff; } /* Night overrides weather and inverts the page. */ [data-mode="night"] { --c-ink: #ffffff; --c-paper: var(--c-night); --c-accent: var(--c-night); --c-wash: rgb(255 255 255 / 0.12); --c-field: rgb(255 255 255 / 0.08); } /* Republic ignores night; literal-colour night rules in components.css carry a matching :not(). */ [data-mode="night"][data-brand="republic"] { --c-ink: #000000; --c-paper: #ffffff; --c-wash: rgb(255 255 255 / 0.2); --c-field: #efefef; } @media (prefers-reduced-motion: reduce) { :root { --dur-marquee: 0s; } }