/* ========================================================================== STILLMIND MENTAL HEALTH ยท DESIGN TOKENS Vibe archetype: Editorial Luxury (warm cream, sage, forest, film grain) Brand source: Stillmind Logo Concepts, final board ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. COLOUR Nine brand tokens. One action colour. One crisis colour. #276446 comes from the logo board and lives on every primary action, so the mark never reads as imported from another brand. ------------------------------------------------------------------ */ /* Brand */ --c-brand: #276446; /* primary action, links, the mark */ --c-brand-hover: #1F5239; /* pressed / hover state */ --c-brand-soft: #E7F0EB; /* tinted fills behind brand content */ /* Forest range, carried over from the original build */ --c-forest: #16302B; /* dark sections */ --c-ink: #0F231F; /* deepest surface, footer */ --c-sage: #476E64; /* eyebrows, secondary accents */ --c-sage-tint: #D6E4E0; /* hairlines on dark surfaces */ /* Paper range */ --c-paper: #FAF8F5; /* page background */ --c-paper-raised: #FFFFFF; /* card interiors */ --c-paper-sunk: #F3EFEA; /* recessed wells, outer bezel shells */ --c-stone: #E6E1D7; /* hairlines on light surfaces */ /* Text */ --c-text: #16211E; /* primary */ --c-text-2: #485450; /* secondary body */ /* Was #6C7A75, which measured 4.23:1 on paper. Every use of this token is real text at small sizes, including the crisis line in the menu, and 4.5:1 is the floor for that. This clears it at 6.38 on paper and still at 4.72 over the photographic ground in Section 3, while staying visibly quieter than --c-text-2. */ --c-text-3: #525E5A; /* tertiary, captions, metadata */ --c-text-invert: #F5F7F6; /* on dark */ --c-text-invert-2: #C3D2CD; /* secondary on dark */ /* Crisis. Used only for 988 and emergency content. Never decorative. */ --c-crisis: #962D24; --c-crisis-bg: #F9ECE9; --c-crisis-border: #E8C1BB; /* Focus. Deliberately not the brand green, so it always reads as a system affordance rather than as decoration. */ --c-focus: #1F5239; /* ------------------------------------------------------------------ 2. TYPEFACES Locked. Manrope is mandated by the logo board and carries every piece of interface and body text. Literata carries headlines and display. Both are variable, self-hosted, and SIL OFL. See assets/fonts. Fallbacks are chosen for metric closeness, so the swap when the web font arrives shifts the layout as little as possible. ------------------------------------------------------------------ */ --font-ui: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Literata', Georgia, 'Iowan Old Style', 'Times New Roman', serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* ------------------------------------------------------------------ 3. TYPE SCALE Fluid, clamped. Display sizes are deliberately large. Body sits at a comfortable 17px floor because a large share of this audience is reading while anxious or distracted. ------------------------------------------------------------------ */ --t-display: clamp(3rem, 7.2vw, 6.25rem); /* hero only */ --t-h1: clamp(2.5rem, 5.2vw, 4.25rem); --t-h2: clamp(2rem, 3.8vw, 3.25rem); --t-h3: clamp(1.375rem, 2vw, 1.875rem); --t-h4: clamp(1.125rem, 1.3vw, 1.3125rem); --t-lead: clamp(1.125rem, 1.5vw, 1.375rem); --t-body: 1.0625rem; /* 17px floor */ --t-sm: 0.9375rem; --t-xs: 0.8125rem; --t-eyebrow: 0.6875rem; --lh-display: 0.98; --lh-tight: 1.1; --lh-heading: 1.18; --lh-body: 1.65; --lh-relaxed: 1.75; --ls-display: -0.03em; --ls-heading: -0.018em; --ls-body: -0.006em; --ls-eyebrow: 0.2em; /* Reading measure. Nothing that carries prose exceeds this. */ --measure: 66ch; --measure-tight: 52ch; /* ------------------------------------------------------------------ 4. SPACE Base 4px. Section padding is intentionally doubled from the usual. ------------------------------------------------------------------ */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem; --s-9: 4rem; --s-10: 5rem; --s-11: 6.5rem; --s-12: 8rem; --s-13: 10rem; /* Vertical rhythm between major sections */ --section-y: clamp(5rem, 11vw, 10rem); --section-y-tight: clamp(2rem, 4.5vw, 3.75rem); /* Horizontal gutter. 16px minimum on phones, never less. */ --gutter: clamp(1rem, 4.5vw, 2.5rem); --container: 1220px; --container-narrow: 820px; --container-wide: 1440px; /* ------------------------------------------------------------------ 5. RADII Concentric pairs for the nested bezel architecture. The inner radius is always the outer minus the shell padding, so curves stay true. ------------------------------------------------------------------ */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-2xl: 40px; --r-pill: 999px; /* Bezel shell padding, and the matching inner radius for each */ --bezel-pad: 6px; --r-inner-lg: calc(var(--r-lg) - var(--bezel-pad)); --r-inner-xl: calc(var(--r-xl) - var(--bezel-pad)); --r-inner-2xl: calc(var(--r-2xl) - var(--bezel-pad)); /* THE SEAM Expanded curve and lift that blend the dark-to-light and light-to-dark boundaries with architectural grace rather than a tight card cut. */ --seam-lift: clamp(2rem, 4.5vw, 3.25rem); --seam-radius: clamp(2.5rem, 6vw, 4.5rem); /* ------------------------------------------------------------------ 6. ELEVATION Diffused ambient shadows tinted with the forest hue. No pure black, no harsh drop shadows. Light surfaces also carry a hairline ring rather than a 1px grey border. ------------------------------------------------------------------ */ --ring-hairline: inset 0 0 0 1px rgba(22, 48, 43, 0.07); --ring-inner-lit: inset 0 1px 0 rgba(255, 255, 255, 0.85); --ring-on-dark: inset 0 0 0 1px rgba(214, 228, 224, 0.13); --e-1: 0 1px 2px rgba(22, 48, 43, 0.04), 0 4px 12px -4px rgba(22, 48, 43, 0.05); --e-2: 0 2px 4px rgba(22, 48, 43, 0.03), 0 12px 28px -10px rgba(22, 48, 43, 0.09); --e-3: 0 4px 8px rgba(22, 48, 43, 0.03), 0 28px 56px -18px rgba(22, 48, 43, 0.14); --e-4: 0 8px 16px rgba(22, 48, 43, 0.04), 0 48px 96px -24px rgba(22, 48, 43, 0.18); /* ------------------------------------------------------------------ 7. MOTION Custom curves only. No linear, no ease-in-out. --ease-out-expo is the house curve: fast departure, long settle. ------------------------------------------------------------------ */ /* No overshoot anywhere. A bouncing button on a psychiatry site reads as playful, which is the wrong register entirely. Real objects decelerate, they do not spring back. */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-drift: cubic-bezier(0.32, 0.72, 0, 1); --d-fast: 160ms; --d-base: 280ms; --d-slow: 520ms; --d-reveal: 800ms; --d-cine: 1200ms; /* ------------------------------------------------------------------ 8. LAYERS Systemic only. No arbitrary z-index anywhere else in the codebase. ------------------------------------------------------------------ */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; /* The header sits ABOVE overlays on purpose. The control that closes the menu is the same button that opened it, so if an overlay covered the header there would be no way out by touch, only by the Escape key, which a phone does not have. Nothing may ever cover the header. */ --z-nav: 400; --z-skip: 600; /* skip-to-content link */ /* ------------------------------------------------------------------ 9. ATMOSPHERE The background system that runs beneath the whole site: a warm paper base, two very soft colour fields that drift with scroll, and a fixed film grain. Values are consumed by atmosphere.css. ------------------------------------------------------------------ */ --atm-grain-opacity: 0.035; --atm-field-1: rgba(71, 110, 100, 0.10); /* sage bloom */ --atm-field-2: rgba(39, 100, 70, 0.07); /* brand bloom */ --atm-field-blur: 120px; --atm-vignette: rgba(22, 48, 43, 0.05); } /* -------------------------------------------------------------------- DARK SECTIONS Applied per-section rather than per-site. The practice reads best on paper, with forest used as punctuation. -------------------------------------------------------------------- */ .on-dark { --c-text: var(--c-text-invert); --c-text-2: var(--c-text-invert-2); --c-text-3: rgba(195, 210, 205, 0.72); --c-stone: rgba(214, 228, 224, 0.16); --ring-hairline: var(--ring-on-dark); --ring-inner-lit: inset 0 1px 0 rgba(255, 255, 255, 0.09); color: var(--c-text); } /* -------------------------------------------------------------------- REDUCED MOTION A real static fallback, not a degraded one. Durations collapse, the atmosphere stops drifting, and every reveal resolves to its end state. -------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --d-fast: 1ms; --d-base: 1ms; --d-slow: 1ms; --d-reveal: 1ms; --d-cine: 1ms; } }