/* ========================================================================== SIMORGH ROBOTIC REHABILITATION INSTITUTE variables.css — design tokens. Single source of truth. Rules for this file: 1. Components never use a PRIMITIVE token directly. They use a SEMANTIC one. Change the brand, change the semantic mapping, components stay untouched. 2. Nothing here is a magic number. Every value is on the scale. 3. Colour pairings are contrast-checked. Notes below where it matters. ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. BRAND PRIMITIVES Three brand colours from the identity, each with a working ramp. The ramps exist so we never reach for an off-brand tint mid-build. ------------------------------------------------------------------ */ /* Deep Simorgh Teal — the dominant colour of the site */ --sg-teal-900: #00302E; /* footer floor, deepest surfaces */ --sg-teal-800: #00403D; /* dark section backgrounds */ --sg-teal-700: #005955; /* BRAND PRIMARY — 8.3:1 on white (AAA) */ --sg-teal-600: #0A6F6A; /* hover state on primary fills */ --sg-teal-500: #2B8A85; /* icons, illustration strokes */ --sg-teal-300: #7FB3AF; /* dividers on dark, disabled on dark */ --sg-teal-100: #EAF4F3; /* very light teal — tinted section bg */ --sg-teal-050: #F7FAF9; /* page background */ /* Medical Burgundy — RESTRICTED. See usage rule in section 3. */ --sg-burg-700: #9D120A; /* BRAND SECONDARY — 8.3:1 on white (AAA) */ --sg-burg-600: #B8231A; /* hover on burgundy fills */ --sg-burg-100: #F7E6E5; /* error field background */ /* Premium Gold — decoration and iconography only. NEVER carries text on white or on teal-700: both pairings measure under 3:1. */ --sg-gold-600: #A67B28; /* gold text ONLY on white at 18px+ (3.6:1) */ --sg-gold-500: #C09235; /* BRAND ACCENT — rules, icons, borders */ --sg-gold-300: #DCBB7C; /* accent lines on dark surfaces */ --sg-gold-200: #E8D3A6; /* eyebrow TEXT on teal-700+ (5.6:1) ✓ */ --sg-gold-100: #F6ECD9; /* highlight wash */ /* Neutrals — warmed toward the brand, never pure grey */ --sg-ink-900: #172321; /* body text */ --sg-ink-700: #2C3D3A; /* secondary headings */ --sg-ink-500: #5C6F6C; /* muted copy, captions */ --sg-ink-300: #8FA3A0; /* placeholders, disabled */ --sg-line-200: #DBE6E4; /* hairlines, card borders */ --sg-gray-100: #F3F5F4; /* soft grey surface */ --sg-white: #FFFFFF; /* ------------------------------------------------------------------ 2. SEMANTIC COLOUR What components actually reference. ------------------------------------------------------------------ */ --sg-bg: var(--sg-teal-050); --sg-bg-alt: var(--sg-teal-100); --sg-bg-soft: var(--sg-gray-100); --sg-bg-invert: var(--sg-teal-700); --sg-bg-invert-deep:var(--sg-teal-900); --sg-surface: var(--sg-white); --sg-text: var(--sg-ink-900); --sg-text-soft: var(--sg-ink-700); --sg-text-muted: var(--sg-ink-500); --sg-text-invert: var(--sg-white); --sg-text-invert-muted: #B7D0CD; /* 7.4:1 on teal-700 ✓ */ --sg-text-brand: var(--sg-teal-700); --sg-border: var(--sg-line-200); --sg-border-strong: #C3D5D2; --sg-border-invert: rgba(255,255,255,.16); --sg-accent: var(--sg-gold-500); --sg-accent-invert: var(--sg-gold-300); --sg-accent-text: var(--sg-gold-200); /* on dark surfaces only */ --sg-danger: var(--sg-burg-700); --sg-danger-bg: var(--sg-burg-100); --sg-focus: var(--sg-teal-700); /* 8.3:1 — never gold */ --sg-focus-invert: var(--sg-gold-200); /* ------------------------------------------------------------------ 3. COLOUR USAGE RULES (enforced by review, not by CSS) TEAL Dominant. Backgrounds, primary buttons, headings, icons. Roughly 70% of coloured surface area. GOLD Lines, underlines, icon strokes, small marks, active indicators, the eyebrow rule. Decoration only. Never a fill larger than a button. Never body text. BURGUNDY Appears in the identity as ONE solid bar under the wordmark. It behaves the same way here: a solid block device (the institute bar, the medical disclaimer strip) plus form error states. It is never a scattered text accent and never a section background. ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ 4. TYPOGRAPHY One family: Open Sans, at five weights. Headings carry weight rather than width — 800 for display sizes, 700 for section headings — because Open Sans has no width axis and its regular weight is too even-toned to hold a headline on its own. Tracking is tighter than the previous setting: Open Sans is a humanist face with generous default sidebearings, so display sizes need -0.025em to stop the letters drifting apart. Labels and eyebrows use the same family at 600 with wide tracking, which is what gives them their instrument-panel register now that there is no separate mono face. --sg-font-mono is kept as an alias so any rule still referencing it resolves correctly. ------------------------------------------------------------------ */ --sg-font-display: "Open Sans", sans-serif; --sg-font-body: "Open Sans", sans-serif; --sg-font-label: "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --sg-font-mono: var(--sg-font-label); /* alias kept so older rules still resolve */ --sg-fw-extra: 800; /* display weight — Open Sans needs the extra mass at size */ /* Fluid type scale. Ratio 1.22 mobile → 1.28 desktop. */ --sg-fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 5rem); /* hero */ --sg-fs-h1: clamp(2.125rem, 1.4rem + 3.2vw, 3.5rem); --sg-fs-h2: clamp(1.625rem, 1.2rem + 1.9vw, 2.5rem); --sg-fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); --sg-fs-h4: 1.125rem; --sg-fs-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); --sg-fs-body: 16px; --sg-fs-sm: 14px; --sg-fs-xs: 13px; --sg-fs-eyebrow: 0.75rem; --sg-lh-display: 1.02; --sg-lh-head: 1.12; --sg-lh-lede: 1.5; --sg-lh-body: 1.65; /* generous — long clinical copy */ --sg-lh-tight: 1.3; --sg-ls-display: -0.025em; --sg-ls-head: -0.015em; --sg-ls-body: 0; --sg-ls-eyebrow: 0.14em; --sg-fw-regular: 400; --sg-fw-medium: 500; --sg-fw-semi: 600; --sg-fw-bold: 700; /* ------------------------------------------------------------------ 5. SPACING — 4px base ------------------------------------------------------------------ */ --sg-s-1: 4px; --sg-s-2: 8px; --sg-s-3: 12px; --sg-s-4: 16px; --sg-s-5: 24px; --sg-s-6: 32px; --sg-s-7: 48px; --sg-s-8: 64px; --sg-s-9: 80px; --sg-s-10:120px; --sg-s-11:160px; /* Section rhythm — every section uses one of these three, nothing else */ /* ONE section rhythm. Previously three tiers, which meant adjacent sections could differ by 60px of padding — that reads as inconsistency, not as emphasis. The sm/lg tokens are kept as aliases so any rule still referencing them resolves to the same value. */ --sg-section: clamp(72px, 8vw, 112px); --sg-section-sm: var(--sg-section); --sg-section-lg: var(--sg-section); /* ------------------------------------------------------------------ 6. LAYOUT ------------------------------------------------------------------ */ --sg-container: 1240px; --sg-container-wide: 1440px; --sg-container-text: 68ch; /* readable measure for clinical copy */ --sg-gutter: clamp(20px, 4vw, 40px); --sg-nav-h: 88px; --sg-nav-h-scrolled: 68px; /* ------------------------------------------------------------------ 7. RADIUS Small and deliberate. The brief rules out the rounded-card look, so nothing above 6px except pills, which are pills because they are chips — the shape carries meaning. ------------------------------------------------------------------ */ --sg-r-sm: 3px; --sg-r-md: 6px; --sg-r-lg: 10px; --sg-r-pill: 999px; /* ------------------------------------------------------------------ 8. ELEVATION Shadows are tinted with teal, never neutral black — black shadows on a teal-tinted page read as dirt. ------------------------------------------------------------------ */ --sg-sh-1: 0 1px 2px rgba(0,64,61,.06); --sg-sh-2: 0 2px 8px rgba(0,64,61,.07), 0 1px 2px rgba(0,64,61,.05); --sg-sh-3: 0 8px 28px rgba(0,64,61,.10), 0 2px 6px rgba(0,64,61,.05); --sg-sh-4: 0 20px 56px rgba(0,64,61,.14); --sg-sh-nav: 0 1px 0 rgba(0,89,85,.08), 0 6px 24px rgba(0,64,61,.07); /* ------------------------------------------------------------------ 9. MOTION — matches the Step 1 animation registry ------------------------------------------------------------------ */ --sg-dur-fast: 0.4s; --sg-dur-base: 0.8s; --sg-dur-slow: 1.2s; --sg-ease-out: cubic-bezier(.16,1,.3,1); /* ≈ power3.out */ --sg-ease-mask: cubic-bezier(.19,1,.22,1); /* ≈ expo.out */ --sg-ease-io: cubic-bezier(.65,0,.35,1); /* ------------------------------------------------------------------ SCROLL RATIOS Every pinned section declares its scroll distance as a multiple of the viewport height, from this one place. 250% means the hero takes two and a half screens of scrolling to play — about four seconds at a normal wheel speed. ------------------------------------------------------------------ */ --sg-scroll-hero: 160; /* percent of viewport height */ /* 160% means the hero plays over roughly 1.6 screens — about 2.5 seconds at a normal wheel speed, down from 250%. The frame sequence is subtle (average change between frames measures 3.7 of 255), so a longer pin reads as the page having stopped responding rather than as cinema. There is no second pin any more: the assistive-technology rail is an auto-scrolling marquee, not a pinned horizontal scroll. The hero is the only pinned element on the entire site. */ --sg-z-base: 1; --sg-z-sticky: 100; --sg-z-nav: 200; --sg-z-offcanvas: 300; --sg-z-modal: 400; } /* ========================================================================== REDUCED MOTION Collapses every duration to near-zero. Components do not need their own media queries — they inherit these. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --sg-dur-fast: 0.01s; --sg-dur-base: 0.01s; --sg-dur-slow: 0.01s; } }