/* ========================================================================== ROSALYX — DESIGN TOKENS The single source of truth. No component file may introduce a raw hex value, a magic pixel gap, or a one-off duration; if something is missing it gets added here first and used by name everywhere after. ========================================================================== */ :root { /* ---------------------------------------------------------------- COLOUR Bone and Deep Olive are fixed by the brand. Ember / honey / amber / bronze are not invented — they were sampled from the glowing ribbon in assets/hero.mp4 by measuring the colour at 0px, 4px, 6px and 9px out from the centre of the stroke. That is why the scroll string reads as the same light source as the video rather than an approximation of it. Do not "tidy" these values. */ /* Base surfaces — bottom of the z-stack */ --bone: #E5D7C4; /* brand background */ --bone-deep: #D9C8B2; /* rules, edges, pressed base */ /* Elevated surfaces — cards, navigation */ --travertine: #F1E8DB; /* Floating surfaces — inputs, menus, toasts */ --linen: #FAF5ED; /* Brand */ --olive: #354024; /* brand primary */ --olive-deep: #232B18; /* pressed, deepest surface */ --olive-soft: #4A5836; /* hover on olive fills */ /* Ink */ --bark: #1C2115; /* body text — 11.62:1 on bone */ --sage-ink: #59624B; /* secondary text — 4.54:1 on bone */ --sage: #7E8C6A; /* DECORATIVE ONLY — 2.54:1, never for text */ /* The glowing string — sampled from hero.mp4 */ --ember: #FFF2C9; /* 0-2px core */ --honey: #F0C880; /* 4px inner bloom */ --amber: #D9A45F; /* 6px mid bloom */ --bronze: #C19262; /* 9px outer bloom */ /* Alert */ --clay: #8E4E32; /* error text — 4.52:1 on bone */ --clay-bright: #B4623F; /* error accents, non-text only */ /* -- Semantic aliases. Components use these, never the raw names above. -- */ --surface-base: var(--bone); --surface-elevated: var(--travertine); --surface-floating: var(--linen); --surface-inverse: var(--olive); --text-primary: var(--bark); --text-secondary: var(--sage-ink); --text-on-inverse: var(--bone); --text-accent: var(--olive); --text-error: var(--clay); --border-subtle: rgba(53, 64, 36, 0.14); --border-strong: rgba(53, 64, 36, 0.28); --border-inverse: rgba(229, 215, 196, 0.20); /* ------------------------------------------------------------ TYPOGRAPHY Fraunces — display. A variable old-style serif whose SOFT and WONK axes give the headings a hand-cut warmth. Used with restraint. Instrument Sans — body. Humanist grotesque, quiet, highly legible. IBM Plex Mono — utility. Eyebrows and labels only. The mono is the point: coaching is measured, and the type says so. */ --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; /* Fluid scale, 320px → 1440px viewport */ --text-2xs: clamp(0.6875rem, 0.660rem + 0.14vw, 0.7500rem); --text-xs: clamp(0.7500rem, 0.720rem + 0.16vw, 0.8125rem); --text-sm: clamp(0.8750rem, 0.850rem + 0.13vw, 0.9375rem); --text-base: clamp(1.0000rem, 0.960rem + 0.20vw, 1.1250rem); --text-lg: clamp(1.1250rem, 1.060rem + 0.32vw, 1.3125rem); --text-xl: clamp(1.3750rem, 1.240rem + 0.67vw, 1.7500rem); --text-2xl: clamp(1.7500rem, 1.500rem + 1.25vw, 2.5000rem); --text-3xl: clamp(2.2500rem, 1.800rem + 2.25vw, 3.5000rem); --text-4xl: clamp(2.7500rem, 1.900rem + 4.25vw, 5.0000rem); --text-display: clamp(3.5rem, 1.55rem + 9.75vw, 9rem); /* wordmark only */ --leading-tight: 1.06; --leading-snug: 1.22; --leading-normal: 1.6; --leading-relaxed:1.75; --tracking-tight: -0.022em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-widest: 0.18em; /* mono eyebrows */ /* Measure — caps line length at a readable 60–72 characters */ --measure: 62ch; --measure-narrow: 46ch; /* ---------------------------------------------------------------- SPACE 4px rhythm. Density dial set spacious: this is a premium marketing page, not a dashboard, so the steps climb steeply at the top end. */ --space-2xs: 0.25rem; /* 4 */ --space-xs: 0.5rem; /* 8 */ --space-sm: 0.75rem; /* 12 */ --space-md: 1rem; /* 16 */ --space-lg: 1.5rem; /* 24 */ --space-xl: 2.5rem; /* 40 */ --space-2xl: 4rem; /* 64 */ --space-3xl: 6rem; /* 96 */ --section: clamp(5rem, 3rem + 10vw, 11rem); /* vertical section rhythm */ --gutter: clamp(1.25rem, 0.6rem + 3.2vw, 3rem); --container: 78rem; /* 1248px */ --container-narrow: 46rem; /* -------------------------------------------------------------- Z-PLANES Mandated three-tier layering. Nothing may invent a z-index outside this scale — if two things collide, one of them is on the wrong plane. thread the glowing filaments — beneath everything, see below base page background, hero video, section fills elevated cards, navigation, distinct content sections floating FAB, dropdowns, tooltips, toasts The thread is negative on purpose. A positioned element at z-index 0 paints above ordinary non-positioned content regardless of source order, which would have put the filaments over the body copy. At -1 they paint after the page background but before every descendant, so they pass under the video, the cards, the buttons and the text alike. */ --z-thread: -1; --z-base: 0; --z-elevated: 10; --z-sticky: 30; --z-floating: 40; --z-modal: 100; /* --------------------------------------------------------------- DEPTH Shadows are tinted with the olive ink, never neutral grey — a grey shadow on a warm bone background reads as dirt. */ --shadow-elevated: 0 1px 2px -1px rgba(28, 33, 21, 0.10), 0 6px 16px -8px rgba(28, 33, 21, 0.18); --shadow-elevated-hover: 0 2px 4px -2px rgba(28, 33, 21, 0.12), 0 14px 32px -12px rgba(28, 33, 21, 0.24); --shadow-floating: 0 2px 6px -2px rgba(28, 33, 21, 0.14), 0 20px 48px -16px rgba(28, 33, 21, 0.30); --shadow-inset-hairline: inset 0 0 0 1px var(--border-subtle); /* The three-tier bloom, matching the falloff measured off the video */ --glow-thread: drop-shadow(0 0 3px var(--honey)) drop-shadow(0 0 9px rgba(217, 164, 95, 0.72)) drop-shadow(0 0 22px rgba(193, 146, 98, 0.42)); --glow-ember-soft: 0 0 0 1px rgba(255, 242, 201, 0.5), 0 0 24px -4px rgba(217, 164, 95, 0.55); /* --------------------------------------------------------------- SHAPE */ --radius-xs: 0.25rem; --radius-sm: 0.5rem; --radius-md: 0.875rem; --radius-lg: 1.375rem; --radius-xl: 2rem; --radius-pill: 62.5rem; /* Arch — echoes the travertine windows standing behind the coach in the hero footage. Used on card imagery, never on the video itself (it would clip the crown of the glass sphere). */ --radius-arch: 48% 48% var(--radius-lg) var(--radius-lg) / 30% 30% var(--radius-lg) var(--radius-lg); /* --------------------------------------------------------------- MOTION */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --dur-fast: 150ms; --dur-base: 240ms; --dur-slow: 420ms; /* Icons — one stroke weight across the whole platform */ --icon-stroke: 1.6; --icon-sm: 1rem; --icon-md: 1.25rem; --icon-lg: 1.5rem; /* Minimum interactive area */ --tap-target: 2.75rem; /* 44px */ } /* Motion is an enhancement, never a requirement. Everything below either collapses to an instant state change or is switched off entirely. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; } }