/* ========================================================================== Greensnake — design tokens -------------------------------------------------------------------------- The single source of truth for the brand. Every colour, typeface, radius, spacing step, shadow and easing curve on the site resolves back to a value in this file — change one here and it changes everywhere. The colour and type values were recovered 1:1 from the original Framer build and are NOT to be reinterpreted. The scales below them (space, radius, elevation, z-index) were derived from the measurements the original actually used, so adopting them costs no visual change but makes new pages land on the same rhythm instead of on fresh magic numbers. ========================================================================== */ :root { /* ------------------------------------------------------------------ */ /* Surfaces */ /* ------------------------------------------------------------------ */ --cream: #f4f5ee; /* rgb(244,245,238) page background */ --cream-2: #eeeceb; --white: #ffffff; --green-900: #021f11; /* nav / deep brand green */ --green-880: #031f11; /* "Disease of Focus" backdrop */ --olive-panel: #454738; /* rgb(69,71,56) big frame */ --black-ui: #141414; /* footer */ --cyan-panel: #99eeff; /* pre-footer plate */ /* ------------------------------------------------------------------ */ /* Brand */ /* ------------------------------------------------------------------ */ --olive: #788508; /* rgb(120,133,8) primary button */ --olive-deep: #5d750c; /* primary button — white on this is 5.2:1 */ --olive-deeper: #4c5f0a; /* its hover step — 7.1:1 */ --yellow: #f6e304; /* rgb(246,227,4) menu button, arrows */ --lime: #e4fe00; /* rgb(228,254,0) */ --mint: #c9e7c4; /* ------------------------------------------------------------------ */ /* Ink */ /* ------------------------------------------------------------------ */ --navy: #0d0d39; /* rgb(13,13,57) headings */ --blue: #1365c4; /* rgb(19,101,196) */ --blue-assist: #0575d7; /* rgb(5,117,215) caption dot */ --blue-light: #d7dde9; --grey: #474743; /* rgb(71,71,67) captions */ --grey-60: rgba(13, 13, 57, 0.6); /* Ink on dark grounds. The green sections need their own ramp — pure white at body size vibrates against #021f11, so the body step is deliberately pulled back to 78%. */ --on-dark: rgba(255, 255, 255, 0.96); --on-dark-2: rgba(255, 255, 255, 0.78); --on-dark-3: rgba(255, 255, 255, 0.56); --on-dark-line: rgba(255, 255, 255, 0.14); --on-dark-fill: rgba(255, 255, 255, 0.04); /* ------------------------------------------------------------------ */ /* Semantic layer */ /* ------------------------------------------------------------------ */ /* Components reference THESE, never the raw brand colours above. That is the whole trick behind `.on-dark`: one class re-points four variables and every component inside adapts, with no dark-mode copy of any component's rules anywhere on the site. */ --ink: var(--navy); /* headings, primary text */ --ink-2: var(--grey); /* body, captions */ --ink-3: var(--grey-60); /* meta, placeholders */ --hairline: rgba(13, 13, 57, 0.12); --surface: var(--white); --accent: var(--olive-deep); --focus-glow: rgba(5, 117, 215, 0.12); /* ------------------------------------------------------------------ */ /* Type */ /* ------------------------------------------------------------------ */ --font-display: "Syne", "Poppins", sans-serif; --font-ui: "Poppins", system-ui, sans-serif; --font-alt: "Instrument Sans", "Poppins", sans-serif; --font-switzer: "Switzer", "Poppins", sans-serif; --font-inter: "Inter", system-ui, sans-serif; --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", monospace; /* Fluid display steps. clamp() removes the cliff the original had at its 1240px breakpoint, where a 64px headline dropped straight to 34px. */ --step-display: clamp(2.125rem, 1.06rem + 4.45vw, 3.6875rem); /* 34 → 59 */ --step-h2: clamp(1.75rem, 1.09rem + 2.75vw, 3rem); /* 28 → 48 */ --step-h3: clamp(1.375rem, 1.06rem + 1.3vw, 2rem); /* 22 → 32 */ --step-lead: clamp(1.125rem, 0.93rem + 0.8vw, 1.6875rem); /* 18 → 27 */ --step-body: 1rem; --step-small: 0.875rem; --step-micro: 0.75rem; /* ------------------------------------------------------------------ */ /* Space — a 4px base on a roughly modular progression. The odd steps */ /* (13, 21, 34) are the original's own Fibonacci rhythm, kept. */ /* ------------------------------------------------------------------ */ --space-1: 4px; --space-2: 8px; --space-3: 13px; --space-4: 16px; --space-5: 21px; --space-6: 24px; --space-7: 34px; --space-8: 48px; --space-9: 64px; --space-10: 80px; --space-11: 110px; --space-12: 140px; /* Vertical rhythm between full-bleed sections, fluid so phones don't get 140px of dead air between every block. */ --section-y: clamp(4rem, 2rem + 7vw, 8.75rem); --section-y-sm: clamp(2.5rem, 1.5rem + 4vw, 5rem); /* Rhythm INSIDE a section. These three are the whole vocabulary — a page that needs a fourth is usually a page doing something inconsistent. --gap-head section header -> the content beneath it --gap-block between sibling blocks in one section --panel-pad inside any bordered panel or card cluster */ --gap-head: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); /* 24 -> 34 */ --gap-block: clamp(2rem, 1.4rem + 2.4vw, 3rem); /* 32 -> 48 */ --panel-pad: clamp(1.5rem, 0.9rem + 2.6vw, 4rem); /* 24 -> 64 */ /* ------------------------------------------------------------------ */ /* Radius */ /* ------------------------------------------------------------------ */ --radius-xs: 6px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-2xl: 44px; --radius-pill: 999px; /* ------------------------------------------------------------------ */ /* Elevation — low-spread, high-transparency. Nothing on this site */ /* should look like it is floating in a drop-shadow. */ /* ------------------------------------------------------------------ */ --shadow-sm: 0 1px 2px rgba(13, 13, 57, 0.06), 0 2px 8px rgba(13, 13, 57, 0.04); --shadow-md: 0 2px 4px rgba(13, 13, 57, 0.05), 0 8px 24px rgba(13, 13, 57, 0.07); --shadow-lg: 0 4px 8px rgba(13, 13, 57, 0.06), 0 18px 48px rgba(13, 13, 57, 0.10); --shadow-focus: 0 0 0 3px var(--cream), 0 0 0 6px var(--blue-assist); --shadow-focus-dark: 0 0 0 3px var(--green-900), 0 0 0 6px var(--lime); /* ------------------------------------------------------------------ */ /* Layout */ /* ------------------------------------------------------------------ */ --container: 1240px; --container-wide: 1272px; --container-text: 68ch; /* long-form measure */ --gutter: 24px; --nav-h: 76px; /* ------------------------------------------------------------------ */ /* Z-index — named, so no page ever invents a 9999 */ /* ------------------------------------------------------------------ */ --z-base: 1; --z-raised: 10; --z-sticky: 50; --z-nav: 100; --z-menu: 200; --z-skip: 300; /* ------------------------------------------------------------------ */ /* Motion */ /* ------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-expressive: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Buttons use this one: a gentle deceleration that never overshoots. --ease-expressive overshoots by design, which is exactly what made the old buttons feel busy, so it is not used on controls. */ --ease-soft: cubic-bezier(0.32, 0.72, 0.28, 1); --t-fast: 200ms; --t-base: 300ms; --t-slow: 400ms; --t-slower: 600ms; } @media (max-width: 1239.98px) { :root { --gutter: 20px; } }