/* ============================================================================ Dr. Aaron Goldner, PsyD — Web Design Tokens Handoff stylesheet for the staging build. Import once, globally. ---------------------------------------------------------------------------- Family: Source Sans 3 (Google Fonts) Active brand selection (per latest review): Primary blue = #143C72 · Accent purple = #5A3D9E A brighter Signal Blue (#1B5299) is retained for links / interactive states. NOTE: the live prototype currently reuses the primary color for its hover state (no darkening). This token set adds a proper --color-primary-hover so the staging build has a real pressed/hover step. See print values + Pantone in "brand/Color Spec Sheet" (hand that to your print/stitch/video vendor). All foreground/background pairings below meet WCAG AA (most hit AAA). ============================================================================ */ :root { /* --- Brand color -------------------------------------------------------- */ --color-primary: #143C72; /* Deep Blue — CTAs, dark bands, headers */ --color-primary-hover: #0F2C55; /* darker step for hover/active */ --color-blue-bright: #1B5299; /* Signal Blue — links, interactive accent */ --color-accent: #5A3D9E; /* Studio Purple — artist-clinician accent */ --color-accent-hover: #472F80; /* darker purple step */ /* --- Ink & neutrals ----------------------------------------------------- */ --color-ink: #17233D; /* body & headings */ --color-slate: #4A5A73; /* secondary text (AA on white, 7.0:1) */ --color-muted: #6B7A91; /* captions / meta */ /* --- Surfaces ----------------------------------------------------------- */ --color-paper: #F5F7FB; /* page background */ --color-surface: #FFFFFF; /* cards / panels */ --color-blue-mist: #EAF0F9; /* calm tint surface */ --color-lilac-mist: #F0EBFA; /* accent tint surface */ --color-line: #E1E8F2; /* borders / dividers */ --color-line-strong: #D8E0EC; /* heavier borders */ /* --- Type --------------------------------------------------------------- */ --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-display: clamp(36px, 6vw, 58px); /* hero H1 · 900 · lh 1.04 */ --fs-h1: clamp(32px, 5vw, 46px); /* section hero · 900 */ --fs-h2: clamp(26px, 4vw, 40px); /* section head · 800 · lh 1.1 */ --fs-h3: 21px; /* card head · 600/700 */ --fs-body-lg: 19px; /* lead paragraph · 400 · lh 1.6 */ --fs-body: 18px; /* body · 400 · lh 1.6 */ --fs-small: 15px; /* meta / nav */ --fs-eyebrow: 14px; /* 700 · 0.14em · uppercase */ --lh-tight: 1.08; --lh-head: 1.15; --lh-body: 1.6; --tracking-tight: -0.02em; --tracking-eyebrow: 0.14em; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* --- Space (4px base) --------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 22px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 88px; /* Fluid vertical section rhythm */ --section-pad-y: clamp(48px, 6vw, 88px); /* --- Radii -------------------------------------------------------------- */ --radius-sm: 9px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; /* --- Elevation ---------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(20,60,114,0.25); --shadow-md: 0 10px 30px rgba(20,60,114,0.10); --shadow-lg: 0 18px 50px rgba(20,60,114,0.16); --shadow-accent: 0 12px 36px rgba(90,61,158,0.14); /* --- Layout ------------------------------------------------------------- */ --container-max: 1160px; --container-pad: 22px; /* --- Motion ------------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 0.2s; /* --- A11y --------------------------------------------------------------- */ --focus-ring: 3px solid #1B5299; --focus-offset: 2px; --tap-min: 44px; /* minimum interactive target */ } /* ------------------------------------------------------------------------- */ /* Base */ /* ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-ink); background: var(--color-paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--color-blue-bright); } a:hover { color: var(--color-primary); } h1, h2, h3 { letter-spacing: var(--tracking-tight); margin: 0; } /* Visible, high-contrast keyboard focus (accessibility is load-bearing) */ :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 4px; } .eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-blue-bright); } /* ------------------------------------------------------------------------- */ /* Buttons — single-primary hierarchy */ /* Primary CTA ("Book a Free 15-Minute Consult") must dominate every page. */ /* ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 56px; /* comfortably > 44px tap target */ padding: 0 30px; border-radius: var(--radius-md); font: var(--fw-bold) 18px/1 var(--font-sans); text-decoration: none; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn-primary { background: var(--color-primary); color: #fff; border: none; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-primary-hover); } .btn-secondary { /* click-to-call, "message first" — never outshines primary */ background: var(--color-surface); color: var(--color-primary); border: 1.5px solid var(--color-line-strong); } .btn-secondary:hover { border-color: var(--color-primary); background: var(--color-blue-mist); } /* ------------------------------------------------------------------------- */ /* Reduced motion */ /* ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } /* ============================================================================ PRINT / STITCH / INK / VIDEO reference lives in "brand/Color Spec Sheet" (hand that to the vendor). Quick machine reference — approximate, naive sRGB→CMYK; confirm against an ICC profile (GRACoL/SWOP) & swatch book: Deep Blue #143C72 rgb(20,60,114) cmyk 83 47 0 55 ~PMS 288 C Signal Blue #1B5299 rgb(27,82,153) cmyk 82 46 0 40 ~PMS 7686 C Studio Purple#5A3D9E rgb(90,61,158) cmyk 43 61 0 38 ~PMS 2098 C Ink #17233D rgb(23,35,61) cmyk 62 43 0 76 ~PMS 5395 C Slate #4A5A73 rgb(74,90,115) cmyk 36 22 0 55 ~PMS 5405 C ============================================================================ */