/* ========================================================= NDN.LASER · Design System Single source of truth for colors, radii, motion, shadow. Loaded globally before all widget styles. Legacy per-widget tokens are re-mapped at html:root (higher specificity than :root) so existing widget CSS keeps working unchanged. ========================================================= */ /* ─── 1. Canonical tokens (new system) Declared at html:root (specificity 0,0,1,1) — wins over any widget that still declares at :root (0,0,1,0). This single change makes the design system authoritative regardless of CSS load order. ───────────────────────────────────────────────────────── */ html:root { /* Surfaces */ --ndn-bg: #F6F2EC; --ndn-surface: #FFFFFF; --ndn-surface-soft: #FBF7F1; /* Text */ --ndn-text-main: #1A1A1A; --ndn-text-secondary: #6B5E4B; /* Brand accents (warm gold) */ --ndn-accent: #C8A46A; --ndn-accent-dark: #A9834A; --ndn-accent-soft: rgba(200, 164, 106, 0.12); /* CTA (conversion red) */ --ndn-cta: #B91C1C; --ndn-cta-hover: #991B1B; /* State */ --ndn-success: #2E7D32; /* Utility */ --ndn-border: rgba(200, 164, 106, 0.25); --ndn-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); --ndn-shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.05); --ndn-shadow-lg: 0 32px 80px -20px rgba(0, 0, 0, 0.18); /* Typography */ --ndn-font-heading: "Times New Roman", Times, serif; --ndn-font-body: 'DM Sans', 'Jost', system-ui, -apple-system, sans-serif; /* Radii */ --ndn-radius-sm: 8px; --ndn-radius: 14px; --ndn-radius-lg: 22px; --ndn-radius-pill: 999px; /* Motion */ --ndn-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --ndn-transition-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1); } /* ─── 2. Body / global defaults ────────────────────── */ body { background: var(--ndn-bg); color: var(--ndn-text-main); } /* ─── 3. Legacy token re-map html:root has higher specificity (0,0,1,1) than :root (0,0,1,0) so these win over each widget's own :root declarations regardless of load order. This means existing widget CSS now automatically adopts the new palette with no per-widget edits needed. ───────────────────────────────────────────────────── */ html:root { /* ── AHI / Reveria legacy namespace (header, shared helpers) ── */ --ahi-primary: var(--ndn-text-main); --ahi-primary-soft: #2a2620; --ahi-accent: var(--ndn-accent); --ahi-accent-dark: var(--ndn-accent-dark); --ahi-accent-soft: var(--ndn-accent-soft); --ahi-text-dark: var(--ndn-text-main); --ahi-text-muted: var(--ndn-text-secondary); --ahi-white: var(--ndn-surface); --ahi-border: var(--ndn-border); --ahi-radius: var(--ndn-radius); --ahi-radius-lg: var(--ndn-radius-lg); --ahi-shadow-sm: var(--ndn-shadow-sm); --ahi-shadow-md: var(--ndn-shadow); --ahi-shadow-lg: var(--ndn-shadow-lg); --ahi-transition: var(--ndn-transition); /* ── Header Hero widget (reveria-hero-advanced) ── */ --hero-primary: var(--ndn-text-main); --hero-secondary: var(--ndn-accent); --hero-accent: var(--ndn-accent); --hero-text: var(--ndn-surface); --hero-overlay: var(--ndn-text-main); /* ── Blog showcase ── */ --bs-primary-dark: var(--ndn-text-main); --bs-text-gray: var(--ndn-text-secondary); --bs-text-light: var(--ndn-text-secondary); --bs-border-gray: var(--ndn-border); --bs-accent-blue: var(--ndn-accent); --bs-accent-dark: var(--ndn-accent-dark); --bs-white: var(--ndn-surface); --bs-card-bg: var(--ndn-surface-soft); --bs-shadow: var(--ndn-shadow); --bs-transition: var(--ndn-transition); /* ── Creative intro section ── */ --cis-primary: var(--ndn-accent); --cis-primary-dark: var(--ndn-accent-dark); --cis-text-dark: var(--ndn-text-main); --cis-text-muted: var(--ndn-text-secondary); --cis-text-light: var(--ndn-surface-soft); --cis-border: var(--ndn-border); --cis-white: var(--ndn-surface); --cis-card-bg: var(--ndn-text-main); --cis-radius-sm: var(--ndn-radius); --cis-radius-md: var(--ndn-radius-lg); --cis-radius-lg: var(--ndn-radius-lg); --cis-shadow-soft: var(--ndn-shadow-sm); --cis-shadow-heavy: var(--ndn-shadow-lg); /* ── FAQ accordion ── */ --faq-bg: var(--ndn-surface); --faq-item-bg: var(--ndn-surface); --faq-item-bg-active: var(--ndn-accent-soft); --faq-border: var(--ndn-border); --faq-text-primary: var(--ndn-text-main); --faq-text-secondary: var(--ndn-text-secondary); --faq-accent: var(--ndn-accent); --faq-accent-dark: var(--ndn-accent-dark); /* ── Hair reveal (before/after) ── */ --hr-glow-1: var(--ndn-accent); --hr-glow-2: var(--ndn-text-main); --hr-particle: var(--ndn-surface); /* ── Pricing table ── */ --pricing-bg: var(--ndn-surface); --pricing-card-bg: var(--ndn-surface); --pricing-border: var(--ndn-border); --pricing-text-primary: var(--ndn-text-main); --pricing-text-secondary: var(--ndn-text-secondary); --pricing-accent: var(--ndn-accent); --pricing-check: var(--ndn-success); /* ── Process stack (light variant) ── */ --ps-bg: var(--ndn-surface); --ps-card-bg-from: var(--ndn-surface-soft); --ps-card-bg-to: var(--ndn-bg); --ps-card-border: var(--ndn-border); --ps-text-primary: var(--ndn-text-main); --ps-text-secondary: var(--ndn-text-secondary); --ps-text-muted: var(--ndn-text-secondary); --ps-accent: var(--ndn-accent); /* ── Testimonials carousel ── */ --tc-primary: var(--ndn-text-main); --tc-primary-soft: var(--ndn-text-secondary); --tc-accent: var(--ndn-accent); --tc-accent-dark: var(--ndn-accent-dark); --tc-accent-soft: var(--ndn-accent-soft); --tc-surface: var(--ndn-surface); --tc-soft: var(--ndn-surface-soft); --tc-text: var(--ndn-text-secondary); --tc-text-light: var(--ndn-surface-soft); --tc-border: var(--ndn-border); --tc-transition: var(--ndn-transition); --tc-shadow-soft: var(--ndn-shadow-sm); --tc-shadow-heavy: var(--ndn-shadow-lg); /* ── NDN booking widget (ndn-b-*) ── */ --ndn-b-accent: var(--ndn-accent); --ndn-b-accent-soft: var(--ndn-accent-soft); --ndn-b-primary: var(--ndn-text-main); --ndn-b-gold: var(--ndn-accent); --ndn-b-ink: var(--ndn-text-main); --ndn-b-muted: var(--ndn-text-secondary); --ndn-b-bg: var(--ndn-surface); --ndn-b-surface: var(--ndn-surface-soft); --ndn-b-border: var(--ndn-border); --ndn-b-radius: var(--ndn-radius-lg); --ndn-b-shadow: var(--ndn-shadow-lg); --ndn-b-t: var(--ndn-transition); /* ── Header template (theme) legacy ndn-* kept compatible ── */ --ndn-primary: var(--ndn-text-main); --ndn-primary-soft: #2a2620; --ndn-text: var(--ndn-text-main); --ndn-text-muted: var(--ndn-text-secondary); --ndn-white: var(--ndn-surface); --ndn-t: var(--ndn-transition); } /* ─── 4. Dark widget (process-steps) — keep dark bg but swap accents to gold ─── */ html:root { --ps-bg-dark: #161410; /* warm near-black (matches gold family) */ --ps-bg-card: #1f1c18; --ps-text-primary: #f5efe4; /* cream-on-dark — matches --ndn-bg */ --ps-text-secondary: #cbc0af; --ps-border: rgba(200, 164, 106, 0.25); --ps-accent-pink: var(--ndn-accent); /* was pink, now gold */ --ps-accent-green: var(--ndn-success); } /* ─── 5. Universal primary button — warm laser-clinic gold Gold feels premium + warm + coherent with the overall NDN palette. Red was too clinical/alarming for a wellness brand. The red token (--ndn-cta) stays available for destructive actions or high-urgency alerts via --ndn-cta class. ───────────────────────────────────────────────────────────── */ .hero-btn.hero-btn-primary, .ndn-booking__confirm, .dc-cta-btn--primary { background: linear-gradient(135deg, var(--ndn-accent) 0%, var(--ndn-accent-dark) 100%) !important; color: #ffffff !important; border: 1px solid transparent !important; box-shadow: 0 10px 24px -8px rgba(169, 131, 74, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; transition: background var(--ndn-transition), transform var(--ndn-transition), box-shadow var(--ndn-transition) !important; } .hero-btn.hero-btn-primary:hover, .hero-btn.hero-btn-primary:focus-visible, .ndn-booking__confirm:hover, .ndn-booking__confirm:focus-visible, .dc-cta-btn--primary:hover, .dc-cta-btn--primary:focus-visible { background: linear-gradient(135deg, var(--ndn-accent-dark) 0%, #8a6b3a 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 16px 34px -10px rgba(169, 131, 74, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; outline: none !important; } /* Escape hatch: put .ndn-cta on a button for the red CTA (for destructive actions like "Afspraak annuleren"). */ .ndn-cta { background: var(--ndn-cta) !important; color: #ffffff !important; } .ndn-cta:hover { background: var(--ndn-cta-hover) !important; } /* ─── 6. Shared utility classes (opt-in) ─────────────── */ .ndn-u-surface { background: var(--ndn-surface); } .ndn-u-surface-soft { background: var(--ndn-surface-soft); } .ndn-u-bg { background: var(--ndn-bg); } .ndn-u-border { border: 1px solid var(--ndn-border); } .ndn-u-shadow { box-shadow: var(--ndn-shadow); } .ndn-u-text-main { color: var(--ndn-text-main); } .ndn-u-text-secondary{ color: var(--ndn-text-secondary); } .ndn-u-accent { color: var(--ndn-accent); } /* ========================================================= 7. Universal eyebrow treatment All widget eyebrow classes get the same look, and text-only eyebrows (without inline SVG) get the laser-device icon via a ::before pseudo-element. Marked !important so each widget's own CSS doesn't silently drift away from the system. ========================================================= */ .ec-eyebrow, .cis-eyebrow, .bs-eyebrow, .faq-eyebrow, .tc-eyebrow, .ps-eyebrow, .dc-brs__eyebrow, .dc-cta__tag, .dc-ph__tag, .dc-cb__tag, .dc-rv__tag, .hr-eyebrow, .pricing-eyebrow { display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 6px 0 !important; margin: 0 0 18px !important; background: transparent !important; border: none !important; font-family: 'DM Sans', 'Jost', system-ui, sans-serif !important; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--ndn-accent-dark) !important; line-height: 1.4 !important; } /* Laser-device icon in front of every text-only eyebrow (those that don't already render the helper markup — namely the booking, trust-bar & assorted tags). */ .dc-brs__eyebrow::before, .dc-rv__tag::before, .hr-eyebrow::before, .pricing-eyebrow::before { content: ""; display: inline-block; width: 14px; height: 26px; flex-shrink: 0; background-image: url("data:image/svg+xml;utf8,") center/contain no-repeat; animation: ndn-eyebrow-pulse 2.4s ease-in-out infinite; } /* Kill pseudo-element on eyebrows that already ship the real animated SVG inline (dc-eyebrow helper output, hero-eyebrow). */ .dc-eyebrow::before, .hero-eyebrow::before { content: none !important; } @keyframes ndn-eyebrow-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.65; transform: scale(0.92); } } @media (prefers-reduced-motion: reduce) { .dc-brs__eyebrow::before, .dc-rv__tag::before, .hr-eyebrow::before, .pricing-eyebrow::before { animation: none; } } /* ========================================================= 8. Universal title treatment — consistent "hero-title" feel Serif, tight line-height, negative letter-spacing, fluid size. Applies to every widget's main heading. ========================================================= */ .ec-title, .cis-title, .bs-title, .faq-title, .tc-title, .ps-title, .ndn-booking__title, .ndn-booking__step-title, .dc-brs__title, .dc-cta__heading, .dc-ph__title, .dc-cb__title .dc-cb__article h2:first-child, .dc-rv__heading, .pricing-heading, .hr-side-title, .ec-header__title { font-family: "Times New Roman", Times, serif !important; font-size: clamp(28px, 4.2vw, 48px) !important; line-height: 1.12 !important; letter-spacing: -0.015em !important; font-weight: 700 !important; color: var(--ndn-text-main) !important; margin: 0 0 18px !important; } /* Step-subtitles in booking stay smaller but still serif so the widget feels coherent with the rest. */ .ndn-booking__step-title { font-size: clamp(22px, 2.8vw, 30px) !important; margin-bottom: 8px !important; }