/* ============================================================ Reliva Medical Institute — Pain Management — design tokens Palette: Garnet / Institutional Luxury (carried over verbatim) Fonts: Hanken Grotesk throughout, wordmark included Fluid type: Utopia-style clamp(); methodology per WCAG / Utopia / Smashing. - Root font-size is NEVER overridden (browser zoom + user prefs intact). - vw is always paired with rem in the preferred value (zoom-safe). - Absolute floor 15px on phones; body >= 16px (also avoids iOS input auto-zoom). 14px was too small on a handset for the volume of small text this page carries (~120 elements sit on --step--1: FAQ, form labels, fee lines, buttons). ============================================================ */ @import "./fonts.css"; :root { /* ---- Colour ---- Cool neutrals, garnet unchanged. The identity this palette came from sits on a warm cream field; this clinic runs cool so it reads as its own place. What carries over is the signature: garnet and the mark. The neutrals are near-achromatic on purpose — sampled off the clinic photography, they sit at hue 200-260 with chroma 1-6 (the warm set ran chroma 4-10 at hue 90). Low chroma in the light values is what reads as clinical rather than cosy; the blue direction is secondary. */ --paper:#F4F6F7; /* page field */ --surface:#FFFFFF; /* cards, panels, inputs */ --mist:#E9ECEF; /* quiet fills: facts bar, alternating rows. ink 15.0:1, text-soft 7.3:1 */ --ink:#15181D; --muted:#5A626B; --line:#DFE3E7; --garnet:#620D1D; /* fills / primary buttons / header accents (white on it 13.2:1) */ --garnet-hover:#4D0916; /* hover for garnet fills */ --garnet-link:#7E1428; /* inline text links ONLY — garnet is too dark, reads black as text. Cooled from #85162B: on the cool field it holds 9.6:1. */ --garnet-deep:#2E0E19; /* near-black wine for dark sections — deeper than garnet, still wine rather than grey. White on it 17.6:1. */ --graphite:#2A2E35; /* dark neutral sections, white on it 13.6:1 */ --garnet-tint:#F0E2E4; /* icon backings / passive badges / tinted panels. Cool rose (hue ~350) to sit with neutrals at hue 200-260; the old warm rose went muddy against them. Contrast on it: ink 14.2:1, garnet 10.5:1, text-soft 6.9:1. */ --border-strong:#828B94; /* borders of real controls: fields, ghost buttons, plates. 3.2:1 against paper, so it clears WCAG 1.4.11 — the old #C9C1B0 sat at 1.5:1 and failed it. */ --text-soft:#464C54; /* ---- Font families (fallback stacks) ---- Single grotesque system (Hanken Grotesk), modern sans in the CLP spirit. Both vars resolve to the same family so existing references keep working. */ --font-serif:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* ---- Fluid type scale (320px -> 1920px) ---- */ --step--1: clamp(0.9375rem, 0.925rem + 0.0625vw, 1rem); /* 15→16px caption / meta / labels */ --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); /* 16→20px body */ --step-1: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem); /* 18→24px lead / large body */ --step-2: clamp(1.312rem, 1.125rem + 0.9375vw, 2.25rem); /* 21→36px h3 / sub-heading (desktop enlarged) */ --step-3: clamp(1.562rem, 1.225rem + 1.6875vw, 3.25rem); /* 25→52px h2 / section heading (desktop enlarged) */ --step-4: clamp(1.875rem, 1.4rem + 2.375vw, 4.25rem); /* 30→68px h1 / page title (desktop enlarged) */ --step-5: clamp(2.25rem, 1.6rem + 3.25vw, 5.5rem); /* 36→88px hero display (desktop enlarged) */ /* ---- Line heights ---- */ --lh-tight:1.05; /* hero / large display */ --lh-heading:1.08; /* h1-h3 — tighter now that headings are set semibold */ --lh-body:1.65; /* paragraphs */ /* ---- Radius ---- The page carried 3-4px everywhere, which at these surface sizes the eye reads as a right angle. This is the Apple range: enough curvature to be felt without turning a card into a pill. */ --r-xs:8px; --r-sm:12px; /* form fields, small chips */ --r-md:18px; /* photographs, media tiles */ --r-lg:26px; /* large panels */ --r-pill:999px; /* ---- Elevation ---- One soft shadow, used rarely. Depth here is built from space, not from stacking bordered panels on top of one another. */ --shadow-sm:0 1px 2px rgba(21,24,29,.04), 0 8px 24px -16px rgba(21,24,29,.16); --shadow-md:0 2px 6px rgba(21,24,29,.05), 0 28px 64px -36px rgba(21,24,29,.22); /* ---- Measure & container ---- */ --measure:66ch; /* prose line length */ --container:1800px; /* layout max width (desktop) */ --rail:1160px; /* prose-led blocks: running text across 1800px is unreadable, so copy sits on its own rail while photography keeps the full container */ --gutter:clamp(0.9375rem, -0.625rem + 4.167vw, 4.5rem); /* 15px on phones (<=600px); ~50px at 1440 (MacBook), fluid up to 72px on large screens */ } /* ---- Large-display tier: TV / unscaled 4K (CSS width >= 1920px) ---- Most 4K monitors run OS scaling 150-200% (CSS width ~1920-2560) and are covered by the base scale. This tier continues growth 1920->3840 so text stays comfortable on genuinely huge canvases viewed from a distance. */ @media (min-width:1920px) { :root { --step--1: clamp(1rem, 0.75rem + 0.2083vw, 1.25rem); /* 16→20px */ --step-0: clamp(1.25rem, 0.875rem + 0.3125vw, 1.625rem); /* 20→26px */ --step-1: clamp(1.5rem, 1.062rem + 0.3646vw, 1.938rem); /* 24→31px */ --step-2: clamp(2.25rem, 1.75rem + 0.4167vw, 2.75rem); /* 36→44px */ --step-3: clamp(3.25rem, 2.5rem + 0.625vw, 4rem); /* 52→64px */ --step-4: clamp(4.25rem, 3.25rem + 0.8333vw, 5.25rem); /* 68→84px */ --step-5: clamp(5.5rem, 4.25rem + 1.0417vw, 6.75rem); /* 88→108px */ --container:2240px; --measure:72ch; } } /* ---- Base ---- */ html { -webkit-text-size-adjust:100%; text-size-adjust:100%; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans); font-size:var(--step-0); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Headings run sentence case, semibold, tracked tight. Caps with positive tracking is what made five sections in a row read as one template, and it costs reading speed on the longer ones. The tracking goes negative because at 40px and up default spacing looks loose: the larger the type, the tighter it wants to be set. Caps survive in two places only now — the wordmark and the small kicker labels. */ h1,h2,h3 { font-family:var(--font-serif); font-weight:600; line-height:var(--lh-heading); margin:0 0 .5em; letter-spacing:-.02em; text-wrap:balance; } h1 { font-size:var(--step-4); line-height:var(--lh-tight); letter-spacing:-.03em; } h2 { font-size:var(--step-3); letter-spacing:-.025em; } h3 { font-size:var(--step-2); letter-spacing:-.015em; } .display { font-family:var(--font-serif); font-weight:600; font-size:var(--step-5); line-height:var(--lh-tight); letter-spacing:-.03em; text-wrap:balance; } .lead { font-size:var(--step-1); color:var(--text-soft); line-height:1.45; letter-spacing:-.01em; } small, .meta, .caption { font-size:var(--step--1); } /* never below 14px */ p { max-width:var(--measure); text-wrap:pretty; } .prose { max-width:var(--measure); } .container { max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } /* iOS Safari: inputs < 16px trigger focus auto-zoom -> hold at 16px+ */ input, select, textarea { font-size:max(16px, 1rem); font-family:var(--font-sans); } /* inline links: garnet-link (lighter wine) + underline — garnet itself reads as black at text size */ a { color:var(--garnet-link); text-decoration:underline; text-underline-offset:.15em; } a:hover { color:var(--garnet); } @media (prefers-reduced-motion: reduce) { * { animation-duration:.001ms !important; transition-duration:.001ms !important; } }