/* ============================================================================= TRIKHOMA — DESIGN TOKENS ============================================================================= Every colour, typeface, spacing step and breakpoint the site uses, in one place. Change a value here and it changes everywhere it is used, because nothing in the site hard-codes these numbers — they all read the variable. This file is loaded BEFORE the main stylesheet, so anything defined here can be overridden further down if a component genuinely needs to. In practice nothing does, and if you find yourself wanting to, that is usually a sign the token is missing rather than wrong. HOW TO USE A TOKEN color: var(--rose); padding: var(--space-6); HOW TO CHANGE THE BRAND COLOUR EVERYWHERE edit --rose below. That is the whole job. DESIGN_TOKENS.md at the root of this project explains what each group is for and where it shows up on screen. ========================================================================== */ :root{ /* --- CORE PALETTE ------------------------------------------------------ Mirage navy is the mother brand. Space is the deepest value on the site and is what the 3D canvas clears to — if you change it, change the renderer clear colour to match or you get a visible seam where the canvas ends. */ --mirage: #1F2038; /* mother-brand navy, section grounds */ --space: #0b0c18; /* deepest value; page background and 3D clear */ --ink: #12131f; /* raised surfaces sitting on --space */ /* --- BRAND ACCENTS ----------------------------------------------------- Rose is the single accent that carries the brand. It is used sparingly on purpose: rules, active states, the trichome mark. Bright is for hover and for text that has to survive on a busy photograph. */ --rose: #C39799; /* primary accent, rules, active state */ --rose-bright: #E6C6C7; /* hover, text over imagery */ --marino: #4064A8; /* deep supporting blue */ --polo: #8FB0D6; /* light supporting blue, data and telemetry */ /* --- TEXT -------------------------------------------------------------- Warm off-white rather than pure #fff. Pure white on a near-black ground vibrates and looks cheap; this reads as printed. */ --text: #F2F0EC; /* body and headings */ --dim: #BCB9C7; /* secondary text, captions, labels */ /* --- LINES ------------------------------------------------------------- Two weights only. Rose-tinted for anything structural or branded, plain white for incidental dividers inside a component. */ --line: rgba(195,151,153,.30); --line-soft: rgba(255,255,255,.12); /* --- V.I.C.E. SUB-BRAND ------------------------------------------------ V.I.C.E. is a scoped palette used only inside its own territory. It is deliberately a different world: black, gold and emerald rather than navy and rose. Do not leak these tokens into the mother brand. */ --v-black: #121110; --v-gold: #C79B46; --v-gold-bright:#E5C87E; --v-em: #31452C; /* emerald base */ --v-em-hi: #4E6A43; /* emerald light */ --v-em-sh: #1C261A; /* emerald shadow */ /* --- TYPEFACES --------------------------------------------------------- The logo wordmark is Futura Light. Futura is a paid licence, so the web build uses Jost 300 — an open metric-compatible substitute that is close enough that the two do not clash when the logo image sits next to live text. If the business licenses Futura PT Light, add it at the front of --font-brand and nothing else has to change. Licences and self-hosting instructions: see FONTS.md. */ --font-brand: "Jost","Futura","Century Gothic","Julius Sans One",sans-serif; --font-sans: "Montserrat","Helvetica Neue",-apple-system,BlinkMacSystemFont, "Segoe UI",Arial,sans-serif; --font-serif: "Cormorant Garamond","Times New Roman",Georgia,serif; /* --- TYPE SCALE -------------------------------------------------------- A 1.25 (major third) ratio. Sizes use clamp() so they scale with the viewport between a sensible floor and ceiling — no breakpoint jumps, and no 90px headline crushed onto a 390px phone. */ --fs-micro: clamp(0.66rem, 0.62rem + 0.18vw, 0.74rem); --fs-small: clamp(0.78rem, 0.74rem + 0.20vw, 0.88rem); --fs-body: clamp(0.94rem, 0.90rem + 0.24vw, 1.06rem); --fs-lead: clamp(1.10rem, 1.02rem + 0.42vw, 1.34rem); --fs-h3: clamp(1.36rem, 1.18rem + 0.90vw, 1.94rem); --fs-h2: clamp(1.80rem, 1.40rem + 1.90vw, 3.10rem); --fs-h1: clamp(2.40rem, 1.60rem + 3.60vw, 5.20rem); /* Letter-spacing carries a lot of the brand's feel. Wide tracking on small caps is the single most recognisable thing about the type system. */ --track-wide: .18em; /* kickers, nav, small caps */ --track-mid: .08em; /* headings */ --track-tight: .01em; /* body */ --lh-tight: 1.06; --lh-head: 1.18; --lh-body: 1.62; /* --- SPACING ----------------------------------------------------------- A 4px base. Use these instead of typing pixel values: it is what keeps rhythm consistent between sections built weeks apart. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 130px; /* standard vertical gap between major sections */ /* --- LAYOUT ------------------------------------------------------------ */ --wrap: 1240px; /* max content width */ --wrap-text: 720px; /* max width for reading copy — longer lines measurably hurt comprehension */ --gutter: clamp(18px, 4vw, 44px); /* --- RADII ------------------------------------------------------------- Small radii only. Large ones read as consumer software; this brand is closer to packaging and print. */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px; /* --- ELEVATION --------------------------------------------------------- On a near-black page a normal drop shadow is invisible. Depth here comes from a dark shadow plus a hairline top highlight, which is how a physical panel catches light. */ --shadow-1: 0 1px 2px rgba(0,0,0,.40); --shadow-2: 0 8px 24px rgba(0,0,0,.45); --shadow-3: 0 24px 60px rgba(0,0,0,.55); --glow-rose: 0 0 32px rgba(195,151,153,.28); /* --- MOTION ------------------------------------------------------------ One easing curve for almost everything. --ease-out is the same shape the 3D camera moves on, so screen transitions and camera moves feel related rather than like two different products. */ --ease-out: cubic-bezier(.16, 1, .30, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-fast: 180ms; --dur-mid: 380ms; --dur-slow: 900ms; /* --- Z-INDEX ----------------------------------------------------------- Named, so nobody ever has to write z-index: 99999 again. */ --z-scene: 0; --z-content: 10; --z-nav: 60; --z-panel: 80; --z-overlay: 90; --z-gate: 100; /* the 21+ gate must sit above everything */ } /* --- BREAKPOINTS --------------------------------------------------------- Custom properties cannot be used inside a media query, so these cannot be tokens. They are listed here so there is still one place that states them. The site is built mobile-first; each of these is a min-width. 480px large phone 760px tablet portrait — the main layout switch 1024px tablet landscape / small laptop 1440px desktop 1920px large desktop — the 3D scene widens its field of view here ------------------------------------------------------------------------ */