/** * VIVA Design Tokens + Typography + Components * ============================================ * Source of truth: project/design-system/DESIGN.md * Visual ref: project/design-system/design-reference.html * * Loaded by child.php at priority 25 after div-base. * All rules scoped to .div-site (added to by master mu-plugin). */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..700,0..100&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ───────────────────────────────────────────── VIVA TOKENS — extend the framework :root with brand semantics ───────────────────────────────────────────── */ :root { --teal-50: oklch(0.97 0.015 170); --teal-100: oklch(0.93 0.030 170); --teal-200: oklch(0.86 0.050 170); --teal-300: oklch(0.78 0.065 170); --teal-400: oklch(0.69 0.072 170); --teal-500: oklch(0.61 0.072 170); --teal-600: oklch(0.52 0.065 170); --teal-700: oklch(0.42 0.055 170); --teal-800: oklch(0.30 0.040 170); --teal-900: oklch(0.20 0.025 170); --coral-300: oklch(0.85 0.10 40); --coral-400: oklch(0.78 0.13 38); --coral-500: oklch(0.71 0.15 36); --coral-600: oklch(0.62 0.16 34); --gold-400: oklch(0.82 0.11 75); --canvas: oklch(0.985 0.006 80); --canvas-alt: oklch(0.965 0.008 80); --surface: oklch(1.000 0.000 0); --surface-alt: oklch(0.955 0.010 75); --hairline: oklch(0.88 0.012 80); --border: oklch(0.82 0.012 75); --muted: oklch(0.55 0.010 75); --ink-soft: oklch(0.34 0.012 60); --ink: oklch(0.22 0.014 55); --ink-strong: oklch(0.14 0.012 50); --night: oklch(0.16 0.020 220); --night-alt: oklch(0.22 0.025 220); --night-fg: oklch(0.92 0.010 80); --success: oklch(0.62 0.13 155); --warning: oklch(0.78 0.13 75); --danger: oklch(0.58 0.18 25); --bg: var(--canvas); --bg-elevated: var(--surface); --fg: var(--ink); --fg-muted: var(--muted); --fg-on-teal: var(--canvas); --fg-on-coral: var(--ink-strong); --brand: var(--teal-500); --brand-hover: var(--teal-600); --brand-press: var(--teal-700); --accent: var(--coral-500); --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(20,30,40,.04), 0 1px 1px rgba(20,30,40,.03); --shadow-2: 0 4px 14px rgba(20,30,40,.06), 0 2px 4px rgba(20,30,40,.04); --shadow-3: 0 18px 40px -12px rgba(20,30,40,.18), 0 6px 14px -6px rgba(20,30,40,.10); --shadow-cinema: 0 30px 80px -20px rgba(15,30,40,.45); --viva-serif: 'Fraunces', 'Cooper', ui-serif, Georgia, serif; --viva-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --viva-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --t-display-2xl: clamp(48px, 8vw, 112px); --t-display-xl: clamp(40px, 6vw, 80px); --t-display-lg: clamp(34px, 4.4vw, 60px); --t-h1: clamp(30px, 3.2vw, 44px); --t-h2: clamp(24px, 2.4vw, 32px); --t-h3: 22px; --t-h4: 18px; --t-body-lg: 18px; --t-body: 16px; --t-body-sm: 14px; --t-caption: 12px; --t-eyebrow: 12px; --viva-gutter: clamp(20px, 4vw, 48px); --viva-max: 1280px; } /* ───────────────────────────────────────────── GLOBAL SET-UP — body bg + default font Scoped to .div-site so we don't fight Flatsome inside admin. ───────────────────────────────────────────── */ .div-site body, .div-site .page-wrapper { background: var(--bg); } .div-site, .div-site body { font-family: var(--viva-sans); color: var(--fg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ───────────────────────────────────────────── TYPOGRAPHY ROLES ───────────────────────────────────────────── */ .div-site .t-display-2xl, .div-site .t-display-xl, .div-site .t-display-lg, .div-site .t-h1, .div-site .t-h2, .div-site .t-h3, .div-site .t-h4 { font-family: var(--viva-serif); font-weight: 400; color: var(--ink-strong); text-wrap: balance; margin: 0; } .div-site .t-display-2xl { font-size: var(--t-display-2xl); font-variation-settings: 'opsz' 144; line-height: 0.95; letter-spacing: -0.035em; } .div-site .t-display-xl { font-size: var(--t-display-xl); font-variation-settings: 'opsz' 120; line-height: 0.98; letter-spacing: -0.03em; } .div-site .t-display-lg { font-size: var(--t-display-lg); font-variation-settings: 'opsz' 96; line-height: 1.02; letter-spacing: -0.025em; } .div-site .t-h1 { font-size: var(--t-h1); font-variation-settings: 'opsz' 72; line-height: 1.05; letter-spacing: -0.02em; } .div-site .t-h2 { font-size: var(--t-h2); font-variation-settings: 'opsz' 48; line-height: 1.1; letter-spacing: -0.02em; } .div-site .t-h3 { font-size: var(--t-h3); font-variation-settings: 'opsz' 36; line-height: 1.2; font-weight: 500; } .div-site .t-h4 { font-size: var(--t-h4); font-variation-settings: 'opsz' 24; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; } .div-site .t-lede { font-family: var(--viva-sans); font-size: var(--t-body-lg); line-height: 1.55; color: var(--ink-soft); font-weight: 400; max-width: 60ch; text-wrap: pretty; margin: 0; } .div-site .t-body { font-family: var(--viva-sans); font-size: var(--t-body); line-height: 1.6; color: var(--ink); margin: 0; } .div-site .t-body-sm { font-family: var(--viva-sans); font-size: var(--t-body-sm); line-height: 1.55; color: var(--ink-soft); margin: 0; } .div-site .t-caption { font-family: var(--viva-sans); font-size: var(--t-caption); line-height: 1.4; color: var(--muted); margin: 0; } .div-site .t-eyebrow { font-family: var(--viva-sans); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); margin: 0; } /* Italic-em accent — the brand voltage moment. Inline inside any display heading or h1 picks up Fraunces italic in teal. The SOFT axis +100 softens the optical curves to feel hand-set, not generic italic. */ .div-site .t-display-2xl em, .div-site .t-display-xl em, .div-site .t-display-lg em, .div-site .t-h1 em { font-style: italic; font-variation-settings: 'opsz' 144, 'SOFT' 100; color: var(--brand); } /* ───────────────────────────────────────────── BUTTONS ───────────────────────────────────────────── */ .div-site .btn, .div-site a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--viva-sans); font-weight: 500; font-size: 15px; line-height: 1; letter-spacing: -0.005em; border-radius: var(--r-md); padding: 14px 22px; border: 1px solid transparent; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 150ms ease, background 200ms, color 200ms, border-color 200ms, box-shadow 200ms; } .div-site .btn:active { transform: translateY(1px); } .div-site .btn--primary, .div-site a.btn--primary { background: var(--brand); color: var(--fg-on-teal); box-shadow: 0 1px 0 rgba(255,255,255,.10) inset, 0 6px 18px -6px color-mix(in oklab, var(--brand) 60%, black); } .div-site .btn--primary:hover { background: var(--brand-hover); color: var(--fg-on-teal); } .div-site .btn--primary:active { background: var(--brand-press); } .div-site .btn--secondary, .div-site a.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--border); } .div-site .btn--secondary:hover { border-color: var(--ink); color: var(--ink); } .div-site .btn--ghost-on-dark, .div-site a.btn--ghost-on-dark { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.20); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .div-site .btn--ghost-on-dark:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.40); color: #fff; } .div-site .btn--lg { padding: 18px 30px; font-size: 16px; } .div-site .btn--sm { padding: 10px 16px; font-size: 13px; } .div-site .btn--pill { border-radius: var(--r-pill); padding: 14px 26px; } .div-site .btn .arr { transition: transform 200ms; display: inline-block; } .div-site .btn:hover .arr { transform: translateX(3px); } /* ───────────────────────────────────────────── FOCUS RING — accessibility ───────────────────────────────────────────── */ .div-site :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }