/* ========================================================================== CAREFINITY — DESIGN TOKENS (v2 · "Warm Editorial") -------------------------------------------------------------------------- Single source of truth for colour, type, spacing, radii, shadows, motion. What changed in v2, and why --------------------------- The brand palette is untouched — it is set by the logo and stays teal + lavender. Everything around it moved toward the references the client liked: · a warm cream ground under the cool teal, so the site reads friendly rather than clinical; · a serif display face for headings, which is what gives those sites their premium, un-templated feel (the Carefinity wordmark is a serif, so this finally matches the logo); · much larger corner radii — 28-32px on cards, pills on buttons; · shadows tinted with the brand teal instead of neutral grey; · a richer motion scale, because the client specifically liked how animated the reference sites are. Every variable name from v1 is kept, so nothing downstream breaks. ========================================================================== */ :root { /* ---------- Brand palette (unchanged — matches the logo) ---------- */ --c-teal: #087C80; /* primary brand */ --c-teal-dark: #075E63; /* hover / darker surfaces */ --c-teal-darker: #054C50; /* deepest teal, footer base */ --c-navy: #18383D; /* deep text / navy */ --c-lavender: #C7A4D8; /* accent only — used sparingly */ --c-lavender-deep: #865BA0; /* accessible lavender for text/icons — 4.5:1 on its own tint */ --c-lavender-light: #F3ECF7; /* soft accent background */ --c-teal-light: #EAF7F6; /* light teal background */ --c-teal-tint: #D3EDEC; /* slightly stronger teal tint */ --c-offwhite: #F8FAFA; --c-white: #FFFFFF; /* ---------- Warm grounds (new in v2) ---------- Cream under cool teal is what stops a healthcare palette feeling clinical. --c-cream is the default page ground now. */ --c-cream: #FBF8F3; --c-cream-deep: #F5EFE6; --c-sand: #EDE4D6; --c-clay: #B98F6A; /* rare warm accent, e.g. quote marks */ /* ---------- Text ---------- */ --c-text: #23373B; /* body copy */ --c-heading: #18383D; /* headings */ --c-muted: #607376; /* secondary copy — 4.5:1 on cream, white and teal tint */ --c-muted-light: #647476; /* meta / captions — still 4.5:1, this is real text */ --c-on-teal: #FFFFFF; --c-on-teal-muted: #C6E4E4; /* ---------- Lines & surfaces ---------- */ --c-border: #DDE8E8; --c-border-soft: #EAF1F1; --c-border-strong: #C6D8D8; --c-border-warm: #E7DDCE; /* on cream surfaces */ --c-surface: #FFFFFF; --c-surface-alt: var(--c-cream); /* ---------- Feedback ---------- */ --c-error: #B3261E; --c-error-bg: #FDECEA; --c-success: #0F7A54; --c-success-bg: #E7F6EF; /* ---------- Focus ---------- */ --c-focus: #0A6E9E; --focus-ring: 0 0 0 3px var(--c-white), 0 0 0 6px var(--c-focus); --focus-ring-flat: 0 0 0 3px rgba(10, 110, 158, .45); /* ---------- Typography ---------- Fraunces is a warm variable serif that carries headings the way the reference sites' display face does. Plus Jakarta Sans handles body and UI. Both are open licence and served from Google Fonts. */ --font-display: "Fraunces", "Georgia", "Times New Roman", serif; --font-heading: "Plus Jakarta Sans", "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-extra: 800; /* Fluid type scale — never drops below 16px for body on mobile. Display sizes run a little larger than v1: the serif can carry it. */ --fs-display: clamp(2.6rem, 1.6rem + 4.1vw, 4.6rem); --fs-h1: clamp(2.2rem, 1.55rem + 2.8vw, 3.5rem); --fs-h2: clamp(1.8rem, 1.36rem + 1.9vw, 2.75rem); --fs-h3: clamp(1.25rem, 1.13rem + 0.55vw, 1.5rem); --fs-h4: 1.0625rem; --fs-lead: clamp(1.0625rem, 1.0rem + 0.34vw, 1.25rem); --fs-body: 1rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --fs-eyebrow: 0.78125rem; --fs-stat: clamp(2.6rem, 1.8rem + 3.2vw, 4rem); --lh-tight: 1.08; --lh-heading: 1.16; --lh-snug: 1.4; --lh-body: 1.72; --lh-loose: 1.8; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.02em; --ls-eyebrow: 0.1em; /* ---------- Spacing scale (4px base) ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 1.75rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-14: 3.5rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* Vertical rhythm for full-bleed sections */ --section-y: clamp(4.5rem, 2.8rem + 6vw, 8.5rem); --section-y-tight: clamp(3rem, 2.2rem + 3.2vw, 5rem); --gap-grid: clamp(1.25rem, 0.9rem + 1.3vw, 2.25rem); --gap-split: clamp(2.5rem, 1.4rem + 4.6vw, 5.5rem); /* ---------- Layout ---------- */ --container: 1200px; --container-wide: 1360px; --container-text: 760px; /* legal / long-form reading measure */ --gutter: clamp(1.25rem, 0.85rem + 1.6vw, 2.5rem); --header-h: 84px; --header-h-sm: 66px; --logo-h: 48px; --logo-h-sm: 40px; /* ---------- Radii (v2 — much rounder) ---------- */ --r-xs: 10px; --r-sm: 14px; --r-btn: 999px; /* buttons are pills now */ --r-md: 20px; --r-card: 28px; --r-lg: 32px; --r-xl: 40px; --r-blob: 56px; --r-pill: 999px; /* ---------- Shadows (teal-tinted, as on the references) ---------- */ --sh-xs: 0 1px 2px rgba(8, 124, 128, .06); --sh-sm: 0 2px 10px rgba(8, 124, 128, .07); --sh-card: 0 2px 4px rgba(24, 56, 61, .03), 0 14px 34px -16px rgba(8, 124, 128, .22); --sh-lift: 0 8px 16px rgba(24, 56, 61, .05), 0 28px 56px -20px rgba(8, 124, 128, .34); --sh-header:0 1px 0 rgba(221, 232, 232, .8), 0 8px 30px -18px rgba(8, 124, 128, .4); --sh-media: 0 32px 72px -32px rgba(8, 124, 128, .42); --sh-btn: 0 2px 8px rgba(8, 124, 128, .24); --sh-btn-h: 0 12px 26px -8px rgba(8, 124, 128, .5); --sh-panel: 0 24px 64px -28px rgba(24, 56, 61, .3); /* ---------- Motion ---------- The client liked how animated the references are, so v2 has a fuller scale: --ease-spring for interface feedback, --ease-out for reveals. */ --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, .84, .44, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --t-fast: 140ms; --t-base: 240ms; --t-slow: 460ms; --t-reveal: 2300ms; /* unhurried — the arrival should be watchable */ --t-drift: 900ms; --stagger: 240ms; /* gap between siblings in a .reveal-group */ /* ---------- Z-index ---------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-modal: 400; --z-skip: 500; } /* -------------------------------------------------------------------------- Responsive header sizing. --header-h is what the layout reserves (body padding, hero offset, scroll-padding, sticky sidebars) and never changes on scroll, so the header can shrink without shifting the page. --header-h-sm is only the header's own visual height once .is-scrolled is set. -------------------------------------------------------------------------- */ @media (max-width: 900px) { :root { --header-h: 70px; --header-h-sm: 58px; --logo-h: 42px; --logo-h-sm: 34px; } } @media (max-width: 480px) { :root { --header-h: 64px; --header-h-sm: 56px; --logo-h: 38px; --logo-h-sm: 32px; } } @media (max-width: 360px) { :root { --header-h: 58px; --header-h-sm: 52px; --logo-h: 34px; --logo-h-sm: 30px; } }