/* ============================================================================ Dominate Dental — Design Tokens Aesthetic: "Editorial Trust" — light, premium, warm, human, restraint-led. Navy + green, warm off-white canvas, humane grotesk, soft layered depth, S-tier motion. Brand evolved from the live site (navy #222b55 + green #48c760). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap'); :root { /* ---- Brand core (evolved from existing DD brand) ---- */ --navy: #222B55; /* brand ink — headings, dark bands, primary */ --navy-deep: #161E3D; /* deepest navy — max-contrast text, darkest band */ --green: #48C760; /* brand green — action/CTA fill (with navy text), success */ --green-ink: #0E7A4B; /* accessible green — links/icons/text on light (AA) */ --green-deep: #0B6E43; /* green hover / pressed */ /* ---- Warm vibrance accent (coral → amber): personality + energy (Josie / Ignite). ~10% dose. ---- */ --coral: #FF6B5C; /* warm coral — vibrance accent, pills, highlights */ --coral-deep: #DD4A39; /* accessible coral text on light (AA) */ --amber: #FFB020; /* warm amber — gradient tail, accents */ --amber-deep: #B5740A; /* accessible amber text on light */ --warm-grad: linear-gradient(102deg, #FF6B5C 0%, #FF8A45 48%, #FFB020 100%); /* signature gradient */ --warm-grad-text: linear-gradient(100deg, #FF6B5C 0%, #FF8F42 60%, #F59E1B 100%); /* headline highlight */ --warm-grad-soft: linear-gradient(135deg, #FFF1EC 0%, #FFF7E8 100%); /* tint surface */ /* ---- Canvas & surfaces (light, warm — premium off-white, never pure clinical white as the field) ---- */ --canvas: #FBFAF7; /* page background — warm off-white */ --surface: #FFFFFF; /* cards, raised panels */ --surface-warm: #F4F1EA; /* warm sand — human sections (Josie, team, testimonials) */ --surface-navy: #222B55; /* inverted "ink" band background */ --surface-navy-2:#1B2348; /* ink band layered surface */ /* ---- Text tiers ---- */ --text-strong: #161E3D; /* headings, key copy (on light) */ --text-body: #3A4163; /* body copy (on light) */ --text-muted: #6B7191; /* captions, meta, eyebrows */ --text-on-navy: #FFFFFF; /* primary text on navy bands */ --text-on-navy-muted: #B9C0DC; /* secondary text on navy bands */ /* ---- Borders / hairlines (warm) ---- */ --border-hair: #E8E4DA; /* default hairline on light */ --border-soft: #DBD7CC; /* stronger divider */ --border-green:#9FE3B0; /* green hairline accent */ --border-on-navy: rgba(255,255,255,0.14); /* ---- Action ---- */ --cta-bg: var(--green); /* primary CTA fill */ --cta-text: #11203A; /* navy text on green (AA, ~7:1) */ --cta-bg-hover:#3FB957; --cta-ring: rgba(72,199,96,0.45); /* ---- Feedback ---- */ --success: #0E7A4B; --danger: #C2453B; /* warm red, used sparingly (never the brand) */ --star: #E8B53C; /* review stars only */ /* ---- Radius ---- */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px; --r-pill: 999px; --r-cta: 10px; /* CTAs (evolves DD's rounded-lg) */ /* ---- Typography ---- */ --font-display: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Single humane-grotesk family, weight-driven hierarchy = restraint + warmth. Upgrade path: swap --font-display to Satoshi/General Sans (Fontshare) later. */ /* Fluid editorial scale (clamp: min, preferred, max) */ --t-display: clamp(2.6rem, 1.55rem + 4.4vw, 4.75rem); /* hero line */ --t-h1: clamp(2.05rem, 1.45rem + 2.6vw, 3.25rem); --t-h2: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem); --t-h3: clamp(1.25rem, 1.08rem + 0.7vw, 1.55rem); --t-lead: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem); /* sub-hero / intros */ --t-body: 1.0625rem; /* 17px */ --t-small: 0.9375rem; /* 15px */ --t-eyebrow: 0.8125rem; /* 13px uppercase tracked */ --t-stat: clamp(2.4rem, 1.6rem + 3.2vw, 3.75rem); /* big proof numbers */ --tracking-display: -0.022em; /* tight on display */ --tracking-tight: -0.012em; --tracking-eyebrow: 0.16em; /* wide on uppercase eyebrows */ --lh-hero: 1.04; --lh-head: 1.16; --lh-body: 1.65; --measure: 44rem; /* max reading width */ --container: 74rem; /* page container */ --container-narrow: 58rem; /* ---- Spacing (8px base) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-10: 4rem; --sp-12: 6rem; --sp-section: clamp(4rem, 2.5rem + 6vw, 8rem); /* vertical section rhythm */ /* ---- Depth (light: soft layered shadows + hairlines, NOT one generic drop) ---- */ --shadow-xs: 0 1px 2px rgba(20,30,61,0.05); --shadow-card: 0 1px 2px rgba(20,30,61,0.05), 0 6px 16px rgba(20,30,61,0.06), 0 22px 40px -24px rgba(20,30,61,0.10); --shadow-pop: 0 2px 6px rgba(20,30,61,0.07), 0 14px 30px rgba(20,30,61,0.10), 0 40px 70px -30px rgba(20,30,61,0.18); --shadow-cta: 0 8px 24px -8px rgba(72,199,96,0.45); --glow-green-ring: 0 0 0 1px rgba(72,199,96,0.35), 0 8px 30px -12px rgba(72,199,96,0.30); /* ---- Lighting (radial reads as light, not gradient color fill) ---- */ --light-green-top: radial-gradient(80% 60% at 50% -10%, rgba(72,199,96,0.10), transparent 70%); --light-on-navy: radial-gradient(70% 50% at 20% 0%, rgba(72,199,96,0.16), transparent 70%); /* ---- Grain (cheap premium depth; subtle, on warm/navy surfaces) ---- */ --grain-opacity: 0.035; /* ---- Motion (S-tier: spring, transform/opacity only, reduced-motion gated) ---- */ --ease-reveal: linear(0,0.0061 1.2%,0.0237 2.49%,0.0917 5.18%,0.4583 16.4%,0.5743 21.1%,0.6717 26.05%,0.7461 31.12%,0.8011 36.42%,0.8434 42.05%,0.8761 48.34%,0.9008 55.21%,0.9268 66.04%,0.9472 77.83%,0.9756 99.85%); --ease-pop: linear(0,0.0089 1.25%,0.0793 5.18%,0.2987 13.5%,0.5814 23.97%,1.0218 41.16%,1.1379 47.32%,1.1873 51.48%,1.2,55.21%,1.187 60.83%,1.1297 70.21%,1.0668 80.12%,1.0153 92.45%,1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 400ms; --dur-reveal: 680ms; --stagger: 70ms; /* ---- z-index scale ---- */ --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-nav: 100; --z-overlay: 1000; } /* Reduced-motion: opt-in, not opt-out */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; --stagger: 0ms; } }