/* ========================================================================== Ad Optima - shared design tokens (colours, type, radii, shadows, spacing). Single source of truth. Loaded on every page in before inline styles. Fonts are loaded via on each page, so no @import here. ========================================================================== */ :root { /* ---- BRAND COLORS ---- */ --ao-primary: #7A9E7E; /* Sage green - highlights, badges, positive metrics */ --ao-primary-subtle: #F2F7F3; /* Pale sage wash - highlighted rows, pill bg */ --ao-primary-border: rgba(122, 158, 126, 0.18); --ao-secondary: #D4725C; /* Warm coral - primary CTAs, nav CTA */ --ao-secondary-hover: #C4624C; /* Deeper coral - hover state */ /* ---- NEUTRALS (warm-tinted off-white system) ---- */ --ao-bg: #FAFAF9; /* Page background - warm off-white */ --ao-bg-elevated: #FFFFFF; /* Card / panel surface */ --ao-text-primary: #1A1A19; /* Near-black with warm undertone */ --ao-text-secondary: #6B6B6A; /* Body copy, de-emphasized text */ --ao-text-tertiary: #9B9B9A; /* Captions, metadata, placeholders */ --ao-border: #E8E8E7; /* Default 1px border */ --ao-border-subtle: #F0F0EF; /* Hairline divider inside cards */ /* ---- DARK SURFACE ---- */ --ao-surface-dark: #1A1A19; /* Featured pricing card, dashboard frame, table header */ --ao-surface-dark-text: #FAFAF9; /* ---- SEMANTIC / STATUS ---- */ --ao-success: #7A9E7E; /* Sage primary doubles as success */ --ao-warning: #C8913A; /* Muted amber (dashboard alerts) */ --ao-danger: #E5534B; /* Red - window traffic light */ /* ---- TYPOGRAPHY FAMILIES ---- */ --ao-font-serif-display: 'Newsreader', Georgia, serif; /* Editorial headlines */ --ao-font-serif-brand: 'EB Garamond', Garamond, 'Times New Roman', serif; /* Logo wordmark */ --ao-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* UI + body */ --ao-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---- TYPE SCALE (ratios pulled from live site) ---- */ --ao-fs-hero: clamp(2.4rem, 4.2vw, 3.4rem); /* H1 */ --ao-fs-section: clamp(1.8rem, 3.5vw, 2.4rem); /* H2 */ --ao-fs-subsec: 1.15rem; /* H3 (team/card titles) */ --ao-fs-card: 1rem; /* H3 in dense grids */ --ao-fs-body: 1rem; /* default body */ --ao-fs-body-sm: 0.88rem; /* card body */ --ao-fs-ui: 0.85rem; /* nav, button labels */ --ao-fs-label: 0.75rem; /* section kickers */ --ao-fs-caption: 0.78rem; /* footer, metadata */ /* ---- LINE HEIGHT ---- */ --ao-lh-display: 1.15; --ao-lh-heading: 1.2; --ao-lh-body: 1.6; --ao-lh-tight: 1.45; /* ---- LETTER SPACING ---- */ --ao-ls-display: -0.025em; --ao-ls-heading: -0.02em; --ao-ls-tight: -0.01em; --ao-ls-kicker: 0.08em; /* uppercase section labels */ --ao-ls-kicker-sm: 0.06em; /* ---- RADII ---- */ --ao-radius-sm: 6px; /* nav CTA */ --ao-radius-md: 8px; /* buttons, inputs, small panels */ --ao-radius-lg: 12px; /* cards, tables */ --ao-radius-xl: 14px; /* pricing cards */ --ao-radius-pill: 100px; /* ---- SHADOWS ---- */ --ao-shadow-xs: 0 3px 8px rgba(212, 114, 92, 0.2); /* Coral CTA hover */ --ao-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08); /* Secondary btn hover */ --ao-shadow-md: 0 4px 12px rgba(212, 114, 92, 0.25); /* Primary btn hover */ --ao-shadow-lg: 0 6px 24px rgba(0, 0, 0, 0.06); /* Nav search expanded */ --ao-shadow-xl: 0 8px 28px rgba(0, 0, 0, 0.05); /* Pricing card hover */ --ao-shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.08); /* Search dropdown */ /* ---- SPACING ---- */ --ao-space-1: 0.25rem; --ao-space-2: 0.5rem; --ao-space-3: 0.75rem; --ao-space-4: 1rem; --ao-space-5: 1.25rem; --ao-space-6: 1.5rem; --ao-space-8: 2rem; --ao-space-10: 2.5rem; --ao-space-12: 3rem; --ao-space-16: 4rem; --ao-space-20: 5rem; --ao-space-24: 6rem; /* ---- LAYOUT ---- */ --ao-container-max: 1320px; --ao-gutter: 2rem; --ao-nav-height: 56px; /* ---- MOTION ---- */ --ao-ease-intro: cubic-bezier(0.16, 1, 0.3, 1); /* Hero intro + search expand */ --ao-ease-exit: cubic-bezier(0.4, 0.7, 0.2, 1); /* Button gradient sweeps */ --ao-dur-fast: 0.15s; /* Link color change */ --ao-dur-base: 0.25s; /* Hover states */ --ao-dur-slow: 0.45s; /* Gradient sweep */ --ao-dur-intro: 0.65s; /* Hero fade-rise */ --ao-dur-reveal: 0.7s; /* Scroll-triggered reveal */ /* ---- SEMANTIC ROLES ---- */ --h1-family: var(--ao-font-serif-display); --h1-size: var(--ao-fs-hero); --h1-weight: 400; --h1-line: var(--ao-lh-display); --h1-tracking: var(--ao-ls-display); --h2-family: var(--ao-font-serif-display); --h2-size: var(--ao-fs-section); --h2-weight: 400; --h2-line: var(--ao-lh-heading); --h2-tracking: var(--ao-ls-heading); --h3-family: var(--ao-font-sans); --h3-size: var(--ao-fs-card); --h3-weight: 600; --h3-line: 1.35; --h3-tracking: var(--ao-ls-tight); --p-family: var(--ao-font-sans); --p-size: var(--ao-fs-body); --p-weight: 400; --p-line: var(--ao-lh-body); --p-color: var(--ao-text-secondary); --kicker-family: var(--ao-font-sans); --kicker-size: var(--ao-fs-label); --kicker-weight: 500; --kicker-case: uppercase; --kicker-tracking: var(--ao-ls-kicker); --kicker-color: var(--ao-text-tertiary); /* legacy alias - matches live Website vars so you can drop this file in place */ --primary: var(--ao-primary); --primary-subtle: var(--ao-primary-subtle); --primary-border: var(--ao-primary-border); --secondary: var(--ao-secondary); --secondary-hover: var(--ao-secondary-hover); --bg: var(--ao-bg); --bg-elevated: var(--ao-bg-elevated); --text-primary: var(--ao-text-primary); --text-secondary: var(--ao-text-secondary); --text-tertiary: var(--ao-text-tertiary); --border: var(--ao-border); --border-subtle: var(--ao-border-subtle); --surface-dark: var(--ao-surface-dark); --surface-dark-text: var(--ao-surface-dark-text); } /* Minimal element resets - match pre-consolidation inline styles. Tokens layer only; element defaults (h1/h2/p colours etc.) are left to each page. */ html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--ao-font-sans); background: var(--ao-bg); color: var(--ao-text-primary); line-height: var(--ao-lh-body); } .ao-kicker { font-family: var(--kicker-family); font-size: var(--kicker-size); font-weight: var(--kicker-weight); text-transform: var(--kicker-case); letter-spacing: var(--kicker-tracking); color: var(--kicker-color); }