/* ========================================================================== MyTribe Travels — Design tokens Authored against the Level99 (--l99-*) token contract so components here can be promoted to the house registry as a palette swap, not a rewrite. Contrast: every text pair below is verified >=4.5:1 (>=3:1 for large display). ========================================================================== */ :root { /* ---- Palette: the Formation system ----------------------------------- Five colours. Deep forest and map cream do the heavy lifting, trail green carries the name, mint is the single point of light, charcoal is the ink. Recipe: cream 38 / forest 27 / white 16 / trail 14 / mint 5. Mint is five percent on purpose -- an accent only pops if it is scarce. Every ratio below is measured against the ground it is used on, not quoted from the spec: the page ground changed from #FAF6EF to cream, so the numbers moved with it. */ --forest: #122B20; /* dark grounds. ON it: cream 13.02, mint 7.34, white 15.08. NEVER charcoal (1.04). */ --trail: #2E8057; /* working green. On white 4.84 body; on cream 4.18 DISPLAY ONLY. White on trail 4.84 -- buttons. */ --mint: #7CC49A; /* accent, dark grounds only. On cream 1.77: never text on light. On forest 7.34. */ --cream: #F3EEE1; /* page ground, and the ink when the brand sits on forest. */ --charcoal: #22241F; /* body ink. On cream 13.53, on white 15.67. Deliberately not black -- warmer against green. */ --white: #FFFFFF; /* raised panels: tinted bands, inputs, polaroids. */ /* ---- Semantic surfaces ------------------------------------------------ Component rules address these, not the palette names above, so a future palette move is one block rather than a sweep. */ --paper: var(--cream); /* The raised band is now LIGHTER than the ground, not darker -- white is 16% of the recipe and cream is the floor. */ --paper-deep: var(--white); --paper-edge: #DDD5C2; /* hairline on cream */ --ink: var(--charcoal); --ink-soft: #55584F; /* secondary text 6.26 on cream, 7.25 on white */ --ink-faint: #6E695E; /* captions, metadata, input borders 4.71/5.46 */ /* Green by job, because one green cannot do all three. */ --green-deep: var(--forest); /* dark ground; text on mint */ --green: #3D6E51; /* body-size green on light 5.11 cream */ --green-display: var(--trail); /* display green on light 4.18 = large */ --green-bright: var(--mint); /* accent on DARK grounds only */ --ochre: #96591F; /* editorial marks and cautions 4.84 on cream */ --polaroid: var(--white); --ink-pen: #3F4A54; /* handwriting on polaroid stock */ /* ---- l99 contract mapping ------------------------------------------- */ --l99-bg: var(--paper); --l99-surface: var(--paper-deep); --l99-fg: var(--ink); --l99-fg-muted: var(--ink-soft); --l99-primary: var(--green); --l99-primary-fg: var(--paper); --l99-accent: var(--ochre); --l99-border: var(--paper-edge); --l99-ring: var(--green-deep); /* ---- Type ------------------------------------------------------------ */ /* No display serif. The system is two voices: printed signage and a human hand. Anything that wanted an editorial serif belongs to one or the other. */ --l99-font-display: var(--l99-font-signage); --l99-font-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; --l99-font-hand: 'Architects Daughter', 'Bradley Hand', cursive; /* The logo is set in Norwester, so the signage layer is too: nav, buttons, eyebrows, figures, labels. Caps and small caps only — 117 glyphs, no true lowercase — so it can never carry body copy or a sentence-case headline. */ --l99-font-signage: 'Norwester', 'Haettenschweiler', 'Arial Narrow', sans-serif; /* Small print that must stay legible regardless of the face around it -- licence attributions and small print. Used by the credits table. */ --l99-font-ui: var(--l99-font-body); --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-md: 1.125rem; /* 18 */ --text-lg: 1.25rem; /* 20 */ --text-xl: 1.5rem; /* 24 */ --text-2xl: 2rem; /* 32 */ /* Handwriting is sized on its own scale, because a hand's nominal size says almost nothing about how big it looks. What you compare is x-height: Instrument Sans 0.510, Architects Daughter 0.429, Caveat 0.400. So the same nominal size renders roughly 16% smaller in the hand than in body copy, and these are solved backwards from the optical size we want rather than picked off a scale. Two moves are baked in below. The face changed from Caveat, whose felt-tip loops read as casual-cute; Architects Daughter's larger x-height buys back legibility at a smaller nominal size. And the whole scale came down 18% from the Caveat values, which overshot -- captions were competing with the headings they sit under. Nothing sets font-weight on these. Architects Daughter ships one weight, so a 700 would be synthesised, and at display size the synthesis closes the counters in a, e and D. Its natural stroke is already heavier than Caveat's bold, which is why the old `font-weight: 700` is gone from all six handwriting rules rather than carried across. */ --text-hand-sm: 1.28rem; /* 20.5 -> ~17.4 equivalent */ --text-hand: clamp(1.4rem, 1.07rem + 0.9vw, 1.76rem); /* 22-28 -> 19-24 */ --text-hand-lg: clamp(1.64rem, 1.23rem + 1.3vw, 2.13rem); /* 26-34 -> 22-29 */ /* Condensed caps read smaller than a serif at the same size, and the poster direction wants hierarchy to come from scale rather than ornament. */ /* Re-derived for the poster direction: solved so 375px lands on 32 and 1440px still lands on 72, because condensed ALL-CAPS at the old 40px floor burned three lines and ~14% of a phone viewport on a single h2. */ --text-3xl: clamp(2rem, 1.12rem + 3.76vw, 4.5rem); --text-4xl: clamp(2.5rem, 0.98rem + 6.5vw, 6rem); /* 40 at 375, 96 from ~1236 up */ --leading-tight: 1.12; --leading-snug: 1.3; --leading-body: 1.62; --measure: 68ch; /* ---- Space (4/8 scale, spacious end — marketing site) ---------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem; /* Solved against two fixed points: 440px -> 36 and 1440px -> 126, so phone seams come down to ~72px while desktop stays exactly where it was. Two adjacent sections each pay this, so every value here lands doubled. The negative intercept is deliberate — it is what lets the slope stay steep enough to hold desktop; the 2rem floor is what catches narrow phones. */ /* Section padding, which is HALF a seam: two adjacent sections each pay it, so every number here lands on the page doubled. That doubling is why this token has been re-solved twice and why it is worth stating the seam, not the padding, when judging it. Pass 1 (2026-08-24): the original -0.225rem + 9vw capped at 8rem gave 126px at 1440 -- a 252px seam, with 44% of the desktop page empty. Pass 2: 1.15rem + 4vw held 36px at 440 and 76px at 1440, a 152px seam. Pass 3 (this one): still too loose on desktop. Every band on the homepage sat exactly 149px from its neighbour at 1400, and after a short left- aligned CTA row that reads as a void rather than a rhythm. Mobile was right at pass 2 and is deliberately held: the curve is pinned through 36px at 440 and only the desktop end moves. 440 -> 1.73rem + 1.88vw = 27.7 + 8.3 = 36px (seam 72px, unchanged) 1400 -> 1.73rem + 1.88vw = 27.7 + 26.3 = 54px (seam 108px, was 149) */ --section: clamp(2rem, 1.73rem + 1.88vw, 3.5rem); --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem); --container: 78rem; /* ---- Shape ----------------------------------------------------------- */ --l99-radius-sm: 2px; --l99-radius-md: 4px; --l99-radius-lg: 8px; /* Poster blocks have hard edges; photographs keep a small radius so they still read as objects laid on the page. */ --radius-block: 0; --rule-hair: 1px; --rule-thick: 4px; /* ---- Motion (mirrors Level99 motion tokens) -------------------------- */ --l99-dur-micro: 150ms; --l99-dur-transition: 300ms; --l99-dur-entrance: 500ms; --l99-ease-standard: cubic-bezier(0.2, 0, 0, 1); --stagger: 60ms; /* ---- Elevation ------------------------------------------------------- */ --shadow-print: 0 1px 2px rgba(26, 26, 23, 0.08), 0 8px 24px rgba(26, 26, 23, 0.12), 0 24px 48px rgba(26, 26, 23, 0.08); --shadow-card: 0 1px 2px rgba(26, 26, 23, 0.05), 0 6px 18px rgba(26, 26, 23, 0.07); /* Hero stage layers. The plane threads BETWEEN the letters, so the letters need real z-index values rather than relying on will-change to create a stacking context — js/hero.js strips will-change after the entrance. */ --z-letter: 1; --z-plane: 2; --z-letter-front: 3; /* the V and the L, raised above the plane */ --z-print-1: 4; --z-print-3: 5; --z-print-2: 6; --z-subline: 7; --z-header: 100; --z-drawer: 200; --z-modal: 300; }