/* ========================================================================== TIME Orthopedics — Design tokens Colour, type, space, motion. Nothing here paints anything on its own. ========================================================================== */ /* -------------------------------------------------------------------------- Metric-matched fallbacks Without these, the page paints in the system font first and then reflows when the webfont arrives — text visibly jumps size on every navigation. The size-adjust values are measured, not guessed — and measured PER WEIGHT, which is what finally fixed this. A single figure taken at weight 700 and applied to all of them left Archivo 800 about 9% out, because Arial has no 800 face and the browser synthesises it: the hero title was laid out at 599px in the fallback and 666px in Archivo, and that jump was the shift that kept coming back. Only size-adjust is set. Ascent/descent overrides were removed because line-height is declared explicitly throughout, and guessing at vertical metrics threw the baselines off. Paired with font-display:block in fonts.css, so the fallback is never painted either. -------------------------------------------------------------------------- */ @font-face { font-family: "Archivo Fallback"; src: local("Arial"); font-weight: 600; size-adjust: 102.81%; } @font-face { font-family: "Archivo Fallback"; src: local("Arial"); font-weight: 700; size-adjust: 105.98%; } @font-face { font-family: "Archivo Fallback"; src: local("Arial"); font-weight: 800; size-adjust: 110.73%; } @font-face { font-family: "Inter Fallback"; src: local("Arial"); font-weight: 400; size-adjust: 105.25%; } @font-face { font-family: "Inter Fallback"; src: local("Arial"); font-weight: 500; size-adjust: 106.30%; } @font-face { font-family: "Inter Fallback"; src: local("Arial"); font-weight: 600; size-adjust: 107.34%; } @font-face { font-family: "Inter Fallback"; src: local("Arial"); font-weight: 700; size-adjust: 108.39%; } :root { /* ---- Brand ------------------------------------------------------------ Recovered from the clinic's own stylesheet. Indigo is reserved for the masthead, the footer and type/controls — it is not a page background. */ --indigo: #413091; --indigo-deep: #2F2169; --indigo-dark: #241950; --lime: #D7DF23; /* on indigo only — see the contrast note below */ --teal: #7EBEC5; /* ---- Grounds ---------------------------------------------------------- The site is light. Sections alternate white and a faint lavender wash. */ --white: #FFFFFF; --paper: #F7F6FB; --paper-2: #EFEDF7; --paper-3: #E4E1F0; /* ---- Text ------------------------------------------------------------- */ --text: #191233; --text-muted: #574D75; /* Darkened from #7C739A, which measured 4.40:1 on white and 3.80:1 on --paper-2 — below the 4.5:1 AA minimum for text this size. */ --text-faint: #6A6289; --text-on-dark: #FFFFFF; --text-on-dark-mute: #BFB6DE; /* ---- Lines ------------------------------------------------------------ */ --line: #DFDBEC; --line-strong: #C8C2DF; --line-on-dark: rgba(255, 255, 255, 0.20); /* ---- Accent ----------------------------------------------------------- The supplied clinical photography already marks the affected joint in warm amber. Amber here only ever echoes that — it is never the sole carrier of meaning, and never sits under body text. */ --amber: #E8622C; /* ---- Type ------------------------------------------------------------- Display is heavy and tightly tracked; body stays neutral and readable. Fallback stacks are complete so the site holds up with no network. */ --font-display: "Archivo", "Archivo Fallback", "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, sans-serif; --font-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fluid scale — min at 320px, max at ~1440px */ --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.875rem); --step-0: clamp(0.95rem, 0.90rem + 0.22vw, 1.0625rem); --step-1: clamp(1.10rem, 1.02rem + 0.40vw, 1.375rem); --step-2: clamp(1.35rem, 1.18rem + 0.85vw, 1.875rem); --step-3: clamp(1.70rem, 1.36rem + 1.70vw, 2.75rem); --step-4: clamp(2.10rem, 1.52rem + 2.90vw, 4.00rem); --step-5: clamp(2.60rem, 1.55rem + 5.25vw, 5.50rem); --hero: clamp(2.80rem, 1.30rem + 7.60vw, 6.75rem); --tracking-display: -0.035em; --tracking-tight: -0.02em; --tracking-wide: 0.14em; --leading-display: 0.95; --leading-tight: 1.15; --leading-body: 1.65; /* ---- Space — 4px base ------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; --section-y: clamp(4rem, 9vw, 8.5rem); /* ---- Measure & shell --------------------------------------------------- */ --measure: 68ch; --shell-max: 1400px; --gutter: clamp(1.25rem, 4vw, 4rem); --nav-h: 7rem; /* ---- Radius ----------------------------------------------------------- Deliberately near-square. Nothing on this site is a pill or a disc. */ --r-sm: 2px; --r-md: 3px; --r-lg: 4px; --r-xl: 6px; /* ---- Elevation --------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(25, 18, 51, 0.06); --shadow-md: 0 10px 30px -14px rgba(25, 18, 51, 0.22); --shadow-lg: 0 30px 70px -30px rgba(25, 18, 51, 0.30); /* ---- Motion ----------------------------------------------------------- All durations route through these so reduced-motion can zero them in one place. */ --ease-out: cubic-bezier(0.16, 1, 0.30, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur-mid: 420ms; --dur-slow: 760ms; --dur-reveal: 900ms; /* ---- Layering ---------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 50; --z-nav: 100; --z-callbar: 120; --z-skip: 200; } /* --------------------------------------------------------------------------- CONTRAST RULE — do not break this. Lime (#D7DF23) on white is about 1.3:1 and fails WCAG badly. Lime appears ONLY on indigo grounds (about 7.4:1) — the masthead and the footer. On any light section, the accent is --indigo. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-mid: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; } }