/* ============================================================ VitaNext × Eyeonic — Foundations Colors + type tokens for the design system. Blues, whites and teals communicating medicine + technology. ============================================================ */ /* Google Fonts: loaded via functions.php wp_enqueue_style */ :root { /* ---------- BRAND ---------- Sampled directly from the VitaNext wordmark logo. */ --brand-teal: #2496AA; /* primary brand teal */ --brand-teal-deep: #1B7A8C; /* hover / pressed */ --brand-teal-soft: #E8F4F7; /* tint backgrounds, chips */ --brand-teal-50: #F4FAFB; /* lightest wash */ --brand-red: #E21C34; /* the red dot — alerts / CTA */ --brand-red-soft: #FCE7EA; /* ---------- EXTENDED PALETTE ---------- Blues to lean further into the clinical / technology vibe. */ --blue-900: #0B2A45; --blue-700: #1E5C8F; /* medical secondary */ --blue-500: #2F86CF; --blue-200: #BCD8EF; --blue-50: #EAF2FB; /* ---------- NEUTRALS ---------- Cool greys, calibrated to read clean next to teal. */ --ink-1000: #0F1A24; /* near-black, primary text */ --ink-900: #1A2632; --ink-700: #2A3744; /* logo text equivalent */ --ink-500: #5A6B7B; /* secondary text */ --ink-400: #8997A4; --ink-300: #B5C0CA; --ink-200: #D6DEE4; /* borders */ --ink-100: #E8ECF0; --ink-50: #F4F7F9; /* surface tint */ --ink-0: #FFFFFF; /* ---------- SEMANTIC ---------- */ --success: #2BB673; --success-soft: #E5F6EE; --warning: #E89A2A; --warning-soft: #FCEFD7; --danger: var(--brand-red); --danger-soft: var(--brand-red-soft); --info: var(--blue-500); --info-soft: var(--blue-50); /* ---------- SURFACES ---------- */ --bg: var(--ink-0); --bg-muted: var(--ink-50); --bg-tint: var(--brand-teal-soft); --surface: var(--ink-0); --surface-elevated: var(--ink-0); --border: var(--ink-200); --border-strong: var(--ink-300); --divider: var(--ink-100); /* ---------- TEXT ROLES ---------- */ --fg-1: var(--ink-1000); /* primary */ --fg-2: var(--ink-700); /* body */ --fg-3: var(--ink-500); /* secondary */ --fg-4: var(--ink-400); /* tertiary / hints */ --fg-on-teal: var(--ink-0); --fg-on-dark: var(--ink-0); --fg-link: var(--brand-teal-deep); /* ---------- TYPE FAMILIES ---------- */ --font-display: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* ---------- TYPE SCALE ---------- Tight, modular. 1.250 (major third) at the top, 1.125 lower. */ --fs-display: 72px; --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 28px; --fs-h4: 22px; --fs-h5: 18px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12px; --fs-overline:11px; --lh-tight: 1.1; /* @kind font */ --lh-snug: 1.25; /* @kind font */ --lh-normal: 1.45; /* @kind font */ --lh-loose: 1.6; /* @kind font */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em; /* ---------- SPACING (4px grid) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---------- RADII ---------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; /* ---------- SHADOWS ---------- */ --shadow-xs: 0 1px 2px rgba(15,26,36,.05); --shadow-sm: 0 1px 2px rgba(15,26,36,.06), 0 1px 3px rgba(15,26,36,.06); --shadow-md: 0 4px 12px rgba(15,26,36,.07), 0 2px 4px rgba(15,26,36,.05); --shadow-lg: 0 12px 28px rgba(15,26,36,.10), 0 6px 12px rgba(15,26,36,.06); --shadow-xl: 0 24px 56px rgba(15,26,36,.14), 0 10px 20px rgba(15,26,36,.08); --shadow-focus: 0 0 0 3px rgba(36,150,170,.28); --shadow-focus-danger: 0 0 0 3px rgba(226,28,52,.28); /* ---------- MOTION ---------- */ --ease-standard: cubic-bezier(.2,.7,.2,1); /* @kind other */ --ease-emphasized: cubic-bezier(.2,.0,.0,1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 320ms; /* @kind other */ /* ---------- LAYOUT ---------- */ --container: 1200px; --content: 720px; } /* ============================================================ Semantic type — apply on plain HTML and you get the brand. ============================================================ */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg); } h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--fg-1); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); margin: 0; } h1 { font-size: var(--fs-h1); font-weight: 700; } h2 { font-size: var(--fs-h2); font-weight: 700; } h3 { font-size: var(--fs-h3); font-weight: 600; } h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; } h5 { font-size: var(--fs-h5); font-weight: 600; letter-spacing: 0; } p { margin: 0 0 1em; color: var(--fg-2); } a { color: var(--fg-link); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } small { font-size: var(--fs-sm); color: var(--fg-3); } code, pre { font-family: var(--font-mono); font-size: 0.92em; } /* Utility roles you can apply directly (e.g.

). */ .display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; } .lede { font-size: 20px; line-height: 1.5; color: var(--fg-2); } .overline { font-family: var(--font-body); font-size: var(--fs-overline); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-teal-deep); } .caption { font-size: var(--fs-xs); color: var(--fg-3); } .mono { font-family: var(--font-mono); }