/* litespeed-cache-dummy */ /* To be replaced in `head` to control optm data location */ /* ndn-design-system */ /* ========================================================= 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: #836436; --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%, #6e5330 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; } /* rank-math-related-posts-style */ .wp-block-rank-math-related-posts{--rm-related-gap: 1rem;--rm-related-border-radius: 6px;--rm-related-card-padding: 16px;--rm-related-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);--rm-related-transition: 0.2s ease}.wp-block-rank-math-related-posts.rank-math-related-posts{display:block}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-wrap{display:grid;gap:var(--rm-related-gap)}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-grid-vertical .rank-math-related-wrap,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-grid-vertical .rank-math-related-wrap{grid-template-columns:repeat(auto-fill, minmax(220px, 1fr))}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-grid-horizontal .rank-math-related-wrap,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-grid-horizontal .rank-math-related-wrap{grid-template-columns:repeat(auto-fill, minmax(400px, 1fr))}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-grid-horizontal .rank-math-related-item,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-grid-horizontal .rank-math-related-item{display:flex;gap:16px;align-items:flex-start}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-grid-horizontal .rank-math-related-thumb,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-grid-horizontal .rank-math-related-thumb{flex:0 0 140px;overflow:hidden}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-grid-horizontal .rank-math-related-thumb img,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-grid-horizontal .rank-math-related-thumb img{width:140px;height:140px;-o-object-fit:cover;object-fit:cover}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-grid-horizontal .rank-math-related-content,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-grid-horizontal .rank-math-related-content{flex:1;min-width:0;display:flex;flex-direction:column}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-grid-horizontal .rank-math-related-title,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-grid-horizontal .rank-math-related-title{margin-top:0}@media (max-width: 640px){.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-grid-horizontal .rank-math-related-wrap,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-grid-horizontal .rank-math-related-wrap{grid-template-columns:1fr}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-grid-horizontal .rank-math-related-thumb,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-grid-horizontal .rank-math-related-thumb{flex:0 0 100px}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-grid-horizontal .rank-math-related-thumb img,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-grid-horizontal .rank-math-related-thumb img{width:100px;height:100px}}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-list-vertical .rank-math-related-wrap,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-list-vertical .rank-math-related-wrap{grid-template-columns:1fr}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-list-horizontal .rank-math-related-wrap,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-list-horizontal .rank-math-related-wrap{grid-template-columns:1fr}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-list-horizontal .rank-math-related-item,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-list-horizontal .rank-math-related-item{display:flex;gap:20px;align-items:flex-start}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-list-horizontal .rank-math-related-thumb,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-list-horizontal .rank-math-related-thumb{flex:0 0 180px;overflow:hidden}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-list-horizontal .rank-math-related-thumb img,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-list-horizontal .rank-math-related-thumb img{width:180px;height:180px;-o-object-fit:cover;object-fit:cover}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-list-horizontal .rank-math-related-content,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-list-horizontal .rank-math-related-content{flex:1;min-width:0;display:flex;flex-direction:column}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-list-horizontal .rank-math-related-title,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-list-horizontal .rank-math-related-title{margin-top:0}@media (max-width: 640px){.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-list-horizontal .rank-math-related-item,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-list-horizontal .rank-math-related-item{gap:16px}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-list-horizontal .rank-math-related-thumb,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-list-horizontal .rank-math-related-thumb{flex:0 0 120px}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-list-horizontal .rank-math-related-thumb img,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-list-horizontal .rank-math-related-thumb img{width:120px;height:120px}}@media (max-width: 480px){.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-list-horizontal .rank-math-related-item,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-list-horizontal .rank-math-related-item{flex-direction:column}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-list-horizontal .rank-math-related-thumb,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-list-horizontal .rank-math-related-thumb{flex:0 0 auto;width:100%}.wp-block-rank-math-related-posts.rank-math-related-posts.is-style-list-horizontal .rank-math-related-thumb img,.wp-block-rank-math-related-posts.rank-math-related-posts.rank-math-related-list-horizontal .rank-math-related-thumb img{width:100%;height:auto;max-height:200px}}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-item{border-radius:var(--rm-related-border-radius);padding:var(--rm-related-card-padding);background:inherit;transition:transform var(--rm-related-transition),box-shadow var(--rm-related-transition)}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-item:hover{transform:translateY(-2px);box-shadow:var(--rm-related-hover-shadow)}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-title{margin:0.5rem 0;font-size:inherit;line-height:inherit}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-title a{color:inherit;text-decoration:none;transition:color 0.2s ease}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-title a:hover{color:#2563eb;text-decoration:underline}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-title:not(:has(a)){cursor:default}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-thumb{position:relative;overflow:hidden;border-radius:4px;display:block}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-thumb img{display:block;width:100%;height:auto;border-radius:4px;transition:transform 0.3s ease}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-thumb:hover img{transform:scale(1.05)}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-thumb:not(a){cursor:default}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-thumb:not(a):hover img{transform:none}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-date{margin-top:0.25rem;font-size:0.85em;opacity:0.7}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-terms{margin-top:0.5rem}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-chip{display:inline-block;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:999px;padding:0.15rem 0.5rem;margin-right:0.35rem;font-size:0.8em}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-excerpt{margin-top:0.5rem;color:inherit;opacity:0.8;font-size:0.9em;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-more{margin-top:1rem}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-button{display:inline-block;background:#111827;color:#fff;border-radius:6px;padding:0.625rem 1.25rem;text-decoration:none;font-weight:500;transition:background 0.2s ease, transform 0.2s ease}.wp-block-rank-math-related-posts.rank-math-related-posts .rank-math-related-button:hover{background:#1f2937;transform:translateY(-1px)}.wp-block-rank-math-related-posts.has-border-color .rank-math-related-item{border-color:inherit}.wp-block-rank-math-related-posts.has-border-width .rank-math-related-item{border-width:inherit}.wp-block-rank-math-related-posts.has-border-style .rank-math-related-item{border-style:inherit}.wp-block-rank-math-related-posts.has-border-radius .rank-math-related-item{border-radius:inherit}.wp-block-rank-math-related-posts:not(.has-border-color):not(.has-border-width):not(.has-border-style) .rank-math-related-item{border:1px solid #e5e7eb} /* contact-form-7 */ .wpcf7 .screen-reader-response { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; word-wrap: normal !important; word-break: normal !important; } .wpcf7 .hidden-fields-container { display: none; } .wpcf7 form .wpcf7-response-output { margin: 2em 0.5em 1em; padding: 0.2em 1em; border: 2px solid #00a0d2; /* Blue */ } .wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; } .wpcf7 form.sent .wpcf7-response-output { border-color: #46b450; /* Green */ } .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output { border-color: #dc3232; /* Red */ } .wpcf7 form.spam .wpcf7-response-output { border-color: #f56e28; /* Orange */ } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border-color: #ffb900; /* Yellow */ } .wpcf7-form-control-wrap { position: relative; } .wpcf7-not-valid-tip { color: #dc3232; /* Red */ font-size: 1em; font-weight: normal; display: block; } .use-floating-validation-tip .wpcf7-not-valid-tip { position: relative; top: -2ex; left: 1em; z-index: 100; border: 1px solid #dc3232; background: #fff; padding: .2em .8em; width: 24em; } .wpcf7-list-item { display: inline-block; margin: 0 0 0 1em; } .wpcf7-list-item-label::before, .wpcf7-list-item-label::after { content: " "; } .wpcf7-spinner { visibility: hidden; display: inline-block; background-color: #23282d; /* Dark Gray 800 */ opacity: 0.75; width: 24px; height: 24px; border: none; border-radius: 100%; padding: 0; margin: 0 24px; position: relative; } form.submitting .wpcf7-spinner { visibility: visible; } .wpcf7-spinner::before { content: ''; position: absolute; background-color: #fbfbfc; /* Light Gray 100 */ top: 4px; left: 4px; width: 6px; height: 6px; border: none; border-radius: 100%; transform-origin: 8px 8px; animation-name: spin; animation-duration: 1000ms; animation-timing-function: linear; animation-iteration-count: infinite; } @media (prefers-reduced-motion: reduce) { .wpcf7-spinner::before { animation-name: blink; animation-duration: 2000ms; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes blink { from { opacity: 0; } 50% { opacity: 1; } to { opacity: 0; } } .wpcf7 [inert] { opacity: 0.5; } .wpcf7 input[type="file"] { cursor: pointer; } .wpcf7 input[type="file"]:disabled { cursor: default; } .wpcf7 .wpcf7-submit:disabled { cursor: not-allowed; } .wpcf7 input[type="url"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"] { direction: ltr; } .wpcf7-reflection > output { display: list-item; list-style: none; } .wpcf7-reflection > output[hidden] { display: none; } /* developercode-fonts */ /* Self-hosted Google Fonts (DM Sans + SUSE), variable weights. */ /* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 100 1000; font-display: swap; src: url(/wp-content/themes/developercode/assets/fonts/dm-sans-italic-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 100 1000; font-display: swap; src: url(/wp-content/themes/developercode/assets/fonts/dm-sans-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(/wp-content/themes/developercode/assets/fonts/dm-sans-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(/wp-content/themes/developercode/assets/fonts/dm-sans-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'SUSE'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/wp-content/themes/developercode/assets/fonts/suse-normal-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'SUSE'; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/wp-content/themes/developercode/assets/fonts/suse-normal-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* developercode-style */ :root { --font-lora: "SUSE", sans-serif; --font-dmsans: "DM Sans", sans-serif; --font-suse: "SUSE", sans-serif; --white-color: #FFFFFF; --dark-white-color: #fff; --dark-black-color: #1C1A1E; --black-color: #1C1A1E; --black-color-opc: 28, 26, 30; --title-color: #092041; --dark-title-color: #1C1A1E; --title-color-opc: 28, 26, 30; --title-color2: #003C30; --dark-title-color2: #003C30; --dark-text-color: #FFFFFF; --text-color: #092041; --global-text-color: #545454; --text-color-opc: 84, 84, 84; --primary-color1: #836436; --primary-color1-opc: 0, 122, 94; --primary-color2: #836436; --primary-color2-opc: 120, 235, 84; --secondary-color: #836436; --primary-color3: #836436; --primary-color3-opc: 89, 86, 233; --primary-color4: #836436; --primary-color4-opc: 96, 229, 157; --borders-color: #eee } * { margin: 0; padding: 0; scroll-behavior: smooth } html { font-size: 100%; scroll-behavior: smooth } body { margin: 0; padding: 0; font-family: var(--font-lora); font-size: 16px; font-weight: 400; line-height: 1.6 } h1, h2, h3, h4, h5, h6 { font-family: var(--font-lora); font-weight: 600; line-height: 1.2; } input { border: none; outline: none } button { outline: none; border: none; line-height: 1 } i.bx { vertical-align: middle } img { max-width: 100%; height: auto } a { text-decoration: none; color: var(--primary-color1) } input[type="checkbox"] { width: 24px; height: 24px; border: 2px solid #d1d5db; border-radius: 50%; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #fff; position: relative; vertical-align: middle } input[type="checkbox"]:checked { background-color: var(--primary-color1); border-color: var(--primary-color1) } input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background-color: #FFF; border-radius: 50% } input[type="checkbox"]:hover { border-color: var(--primary-color1) } input[type="checkbox"]+label, label { cursor: pointer; vertical-align: middle } p { font-family: var(--font-dmsans); font-size: 16px; font-weight: 400; line-height: 1.6 } /* ========================================== Spacing Utilities ========================================== */ .pt-120 { padding-top: 120px } .pb-120 { padding-bottom: 120px } .pt-90 { padding-top: 90px } .mb-110 { margin-bottom: 110px } .mt-130 { margin-top: 130px } .mb-130 { margin-bottom: 130px } .sec-mar { margin: 130px 0 } .mb-15 { margin-bottom: 15px } .mb-60 { margin-bottom: 60px } .mb-70 { margin-bottom: 70px } .mb-20 { margin-bottom: 20px } .mb-40 { margin-bottom: 40px } .mb-30 { margin-bottom: 30px } .mt-70 { margin-top: 70px } /* ========================================== NDN.LASER — homepage widgets ========================================== */ :root { --ahi-accent: #836436; --ahi-accent-dark: #0f3270; --ahi-text: #1A1A1A; --ahi-muted: #475569; --ahi-surface: #ffffff; --ahi-soft: #f8fafb; --ahi-border: #e2e8f0; } .hero-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; border-radius: 999px; font-family: var(--font-dmsans); font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; } .hero-btn .btn-text { display: inline-flex; align-items: center; gap: 8px; position: relative; z-index: 1; } .hero-btn .btn-bg, .hero-btn .btn-shine { display: none; } .hero-btn-primary { background: #1A1A1A; color: #fff; border: 2px solid transparent; box-shadow: 0 14px 30px -10px rgba(26, 26, 26, .45); } .hero-btn-primary:hover { background: #836436; color: #fff; transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(200, 164, 106, .7); } .hero-btn-secondary { background: transparent; color: #1A1A1A; border: 2px solid #1A1A1A; } .hero-btn-secondary:hover { background: #836436; color: #fff; border-color: #836436; } /* Hero */ .reveria-hero-advanced { position: relative; background: #f6f8fb; overflow: hidden; } .reveria-hero-advanced .hero-bg-canvas { display: none; } .reveria-hero-advanced .hero-section { padding: 90px 24px; } .reveria-hero-advanced .hero-container { max-width: 1240px; margin: 0 auto; } .reveria-hero-advanced .hero-content-wrapper { display: grid; gap: 60px; align-items: center; } .reveria-hero-advanced .hero-content-wrapper.layout-split { grid-template-columns: 1fr 1fr; } .reveria-hero-advanced .hero-content-wrapper.layout-asymmetric { grid-template-columns: 6fr 4fr; } .reveria-hero-advanced .hero-content-wrapper.layout-centered, .reveria-hero-advanced .hero-content-wrapper.layout-fullwidth { grid-template-columns: 1fr; text-align: center; } .reveria-hero-advanced .hero-eyebrow { display: inline-flex; align-items: center; margin-bottom: 20px; color: var(--ahi-accent); font-family: var(--font-dmsans); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .reveria-hero-advanced .hero-eyebrow .eyebrow-inner { display: inline-flex; align-items: center; gap: 8px; } .reveria-hero-advanced .hero-title { font-family: var(--font-lora); font-size: clamp(32px, 5vw, 54px); font-weight: 700; color: var(--ahi-text); margin: 0 0 20px; line-height: 1.12; letter-spacing: -.01em; } .reveria-hero-advanced .hero-title .title-highlight { color: var(--ahi-accent); font-style: italic; } .reveria-hero-advanced .hero-description { font-family: var(--font-dmsans); font-size: 17px; color: var(--ahi-muted); line-height: 1.6; margin-bottom: 28px; max-width: 560px; } .reveria-hero-advanced .hero-cta-buttons { display: flex; flex-wrap: wrap; gap: 14px; } .reveria-hero-advanced .hero-media-panel .media-container { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(15,23,42,.25); aspect-ratio: 4/5; } .reveria-hero-advanced .hero-media-panel img.hero-media, .reveria-hero-advanced .hero-media-panel video.hero-media { width: 100%; height: 100%; object-fit: cover; display: block; } .reveria-hero-advanced .booking-form-section, .reveria-hero-advanced .scroll-indicator { display: none; } @media (max-width: 900px) { .reveria-hero-advanced .hero-content-wrapper.layout-split, .reveria-hero-advanced .hero-content-wrapper.layout-asymmetric { grid-template-columns: 1fr; } .reveria-hero-advanced .hero-section { padding: 60px 20px; } } /* Content block (intro) */ .dc-cb { padding: 80px 24px; background: var(--ahi-surface); } .dc-cb__wrap { max-width: 880px; margin: 0 auto; display: block; } .dc-cb--has-toc .dc-cb__toc, .dc-cb__toc-fab, .dc-cb__toc-mobile-sheet, .dc-cb__toc-mobile-backdrop { display: none; } .dc-cb__article { font-family: var(--font-dmsans); color: var(--ahi-muted); font-size: 17px; line-height: 1.75; } .dc-cb__article h2 { font-family: var(--font-lora); font-size: clamp(26px, 3.5vw, 36px); color: var(--ahi-text); margin: 0 0 16px; } .dc-cb__article h3 { font-family: var(--font-lora); font-size: 22px; color: var(--ahi-text); margin: 28px 0 10px; } .dc-cb__article p { margin: 0 0 18px; } .dc-cb__article blockquote { margin: 28px 0; padding: 18px 24px; border-left: 4px solid var(--ahi-accent); background: var(--ahi-soft); color: var(--ahi-text); font-style: italic; border-radius: 0 10px 10px 0; } /* Treatment cards grid */ .ec-section { padding: 90px 24px; background: var(--ahi-surface); } .ec-wrap { max-width: 1200px; margin: 0 auto; } .ec-header { text-align: center; margin-bottom: 50px; } .ec-tag { display: inline-block; padding: 6px 14px; font-family: var(--font-dmsans); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ahi-accent); background: rgba(23,70,138,.08); border-radius: 999px; margin-bottom: 14px; } .ec-title { font-family: var(--font-lora); font-size: clamp(28px, 4vw, 42px); color: var(--ahi-text); margin: 0 0 14px; line-height: 1.15; } .ec-description { font-family: var(--font-dmsans); color: var(--ahi-muted); max-width: 640px; margin: 0 auto; font-size: 16px; line-height: 1.6; } .ec-grid { display: grid; gap: 24px; list-style: none; padding: 0; margin: 0; } .ec-grid--2 { grid-template-columns: repeat(2, 1fr); } .ec-grid--3 { grid-template-columns: repeat(3, 1fr); } .ec-grid--4 { grid-template-columns: repeat(4, 1fr); } .ec-card { list-style: none; } .ec-card__link { display: block; background: var(--ahi-surface); border: 1px solid var(--ahi-border); border-radius: 20px; overflow: hidden; color: inherit; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; height: 100%; } .ec-card__link:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -16px rgba(15,23,42,.18); border-color: rgba(23,70,138,.25); } .ec-card__media { margin: 0; aspect-ratio: 4/5; background: var(--ahi-soft); overflow: hidden; } .ec-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .ec-card__link:hover .ec-card__media img { transform: scale(1.04); } .ec-card__body { padding: 22px 22px 26px; } .ec-card__title { font-family: var(--font-lora); font-size: 20px; color: var(--ahi-text); margin: 0 0 6px; } .ec-card__subtitle { font-family: var(--font-dmsans); font-size: 14.5px; color: var(--ahi-muted); margin: 0; line-height: 1.5; } .ec-cta { text-align: center; margin-top: 40px; } @media (max-width: 900px) { .ec-grid--4 { grid-template-columns: repeat(2, 1fr); } .ec-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .ec-grid--4, .ec-grid--3, .ec-grid--2 { grid-template-columns: 1fr; } } /* USP grid */ .dc-ug { padding: 90px 24px; background: var(--ahi-soft); } .dc-ug__wrap { max-width: 1200px; margin: 0 auto; } .dc-ug__header { text-align: center; margin-bottom: 50px; } .dc-ug__header .hero-eyebrow { color: var(--ahi-accent); font-family: var(--font-dmsans); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; } .dc-ug__title { font-family: var(--font-lora); font-size: clamp(28px, 4vw, 42px); color: var(--ahi-text); margin: 0 0 14px; line-height: 1.15; } .dc-ug__desc { font-family: var(--font-dmsans); color: var(--ahi-muted); max-width: 640px; margin: 0 auto; font-size: 16px; line-height: 1.6; } .dc-ug__grid { display: grid; gap: 20px; margin-top: 40px; } .dc-ug__grid--2 { grid-template-columns: repeat(2, 1fr); } .dc-ug__grid--3 { grid-template-columns: repeat(3, 1fr); } .dc-ug__grid--4 { grid-template-columns: repeat(4, 1fr); } .dc-ug__card { position: relative; background: #fff; border: 1px solid var(--ahi-border); border-radius: 20px; padding: 28px 26px; transition: transform .25s ease, box-shadow .25s ease; } .dc-ug__card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(15,23,42,.16); } .dc-ug__card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .dc-ug__card-icon { width: 56px; height: 56px; border-radius: 14px; background: rgba(23,70,138,.08); color: var(--ahi-accent); display: inline-flex; align-items: center; justify-content: center; } .dc-ug__card-icon svg { width: 30px; height: 30px; } .dc-ug__card-num { font-family: var(--font-dmsans); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ahi-accent); opacity: .5; } .dc-ug__card-title { font-family: var(--font-lora); font-size: 19px; color: var(--ahi-text); margin: 0 0 8px; } .dc-ug__card-text { font-family: var(--font-dmsans); font-size: 15px; color: #FFFFFF; margin: 0; line-height: 1.55; } .dc-ug__cta { text-align: center; margin-top: 44px; } @media (max-width: 960px) { .dc-ug__grid--3, .dc-ug__grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .dc-ug__grid--2, .dc-ug__grid--3, .dc-ug__grid--4 { grid-template-columns: 1fr; } } /* Testimonials carousel / results */ .tc-section { padding: 90px 24px; background: var(--ahi-surface); } .tc-container { max-width: 1280px; margin: 0 auto; } .tc-header { text-align: center; margin-bottom: 50px; } .tc-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; font-family: var(--font-dmsans); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ahi-accent); background: rgba(23,70,138,.08); border-radius: 999px; margin-bottom: 14px; } .tc-title { font-family: var(--font-lora); font-size: clamp(28px, 4vw, 42px); color: var(--ahi-text); margin: 0 0 14px; line-height: 1.15; } .tc-description { font-family: var(--font-dmsans); color: var(--ahi-muted); max-width: 640px; margin: 0 auto; font-size: 16px; line-height: 1.6; } .tc-cta-wrapper { margin-top: 20px; } .tc-cta-button { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--ahi-soft); color: var(--ahi-text); font-family: var(--font-dmsans); font-weight: 600; font-size: 14px; text-decoration: none; } .tc-carousel-wrapper { margin-top: 40px; } .tc-carousel-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .tc-card { background: var(--ahi-surface); border: 1px solid var(--ahi-border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; } .tc-video-container { position: relative; aspect-ratio: 9/12; background: #1A1A1A; overflow: hidden; } .tc-video-wrapper { position: absolute; inset: 0; } .tc-video-wrapper video, .tc-video-wrapper img.tc-poster { width: 100%; height: 100%; object-fit: cover; display: block; } .tc-profile { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; background: rgba(255,255,255,.9); backdrop-filter: blur(6px); border-radius: 999px; font-family: var(--font-dmsans); font-size: 13px; font-weight: 600; color: var(--ahi-text); } .tc-profile-image { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: #e2e8f0; flex: 0 0 28px; } .tc-profile-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .tc-stats { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 14px 16px; } .tc-stat-badge { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--ahi-soft); color: var(--ahi-text); font-family: var(--font-dmsans); font-size: 12px; font-weight: 600; } .tc-pagination, .tc-nav-arrows { display: none; } /* CTA Appointment */ .dc-cta { --cta-bg: #0a1628; --cta-accent: #836436; position: relative; padding: 90px 24px; background: var(--cta-bg); color: #fff; overflow: hidden; } .dc-cta__glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(120px); opacity: .35; pointer-events: none; z-index: 0; } .dc-cta__glow--1 { background: #836436; top: -100px; left: -160px; } .dc-cta__glow--2 { background: #2b62b7; bottom: -160px; right: -140px; } .dc-cta__wrap { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .dc-cta__body .hero-eyebrow { color: #fff; margin-bottom: 18px; } .dc-cta__heading { font-family: var(--font-lora); font-size: clamp(30px, 4.5vw, 46px); margin: 0 0 16px; line-height: 1.15; color: #fff; } .dc-cta__desc { font-family: var(--font-dmsans); font-size: 17px; color: rgba(255,255,255,.8); margin: 0 0 24px; line-height: 1.6; } .dc-cta__usps { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; } .dc-cta__usp { display: flex; align-items: center; gap: 12px; font-family: var(--font-dmsans); font-size: 15px; color: rgba(255,255,255,.92); } .dc-cta__usp-check { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; } .dc-cta__usp-check svg { width: 14px; height: 14px; } .dc-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; } .dc-cta__quick { display: inline-flex; gap: 10px; flex-wrap: wrap; } .dc-cta__pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; font-family: var(--font-dmsans); font-size: 14px; font-weight: 500; border: 1px solid rgba(255,255,255,.15); transition: background-color .2s ease; } .dc-cta__pill:hover { background: rgba(255,255,255,.16); color: #fff; } .dc-cta__pill svg { width: 16px; height: 16px; } .dc-cta__visual { position: relative; } .dc-cta__img { border-radius: 24px; overflow: hidden; background: #1A1A1A; } .dc-cta__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .dc-cta__img--main { position: relative; aspect-ratio: 4/5; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); } .dc-cta__img--f1, .dc-cta__img--f2 { position: absolute; width: 150px; aspect-ratio: 1; border: 4px solid #fff; box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); } .dc-cta__img--f1 { top: -24px; right: -22px; } .dc-cta__img--f2 { bottom: -28px; left: 20px; } .dc-cta__trust { position: absolute; left: -24px; bottom: 30px; background: #fff; color: var(--ahi-text); padding: 12px 16px; border-radius: 16px; box-shadow: 0 20px 40px -12px rgba(0,0,0,.35); font-family: var(--font-dmsans); display: inline-flex; gap: 10px; align-items: center; } .dc-cta__trust-star { width: 28px; height: 28px; border-radius: 50%; background: #f59e0b; color: #fff; display: inline-flex; align-items: center; justify-content: center; } .dc-cta__trust-star svg { width: 16px; height: 16px; } .dc-cta__trust-body strong { font-family: var(--font-lora); font-size: 18px; color: var(--ahi-text); margin-right: 4px; } .dc-cta__trust-body span { color: var(--ahi-muted); font-size: 13px; } .dc-cta__float { display: none; } /* hide scrolling overlay on homepage */ .dc-cta .hero-btn-primary { background: #1A1A1A; color: #fff; box-shadow: 0 14px 30px -10px rgba(26, 26, 26, .45); } .dc-cta .hero-btn-primary:hover { background: #836436; color: #fff; box-shadow: 0 18px 40px -10px rgba(200, 164, 106, .7); } @media (max-width: 900px) { .dc-cta__wrap { grid-template-columns: 1fr; } .dc-cta__trust { left: 12px; } .dc-cta__img--f1 { right: 12px; top: -16px; width: 110px; } .dc-cta__img--f2 { left: 12px; bottom: -16px; width: 110px; } } /* ═══════════════════════════════════════════════════════════════════════════ Global section padding cascade — keeps themes consistent at tablet/mobile. Plugin widgets override with more specific selectors where needed. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .reveria-hero-advanced .hero-section, .dc-cb, .ec-section, .dc-ug, .tc-section, .dc-cta { padding: 70px 24px; } } @media (max-width: 768px) { .reveria-hero-advanced .hero-section, .dc-cb, .ec-section, .dc-ug, .tc-section, .dc-cta { padding: 56px 18px; } .hero-btn { padding: 13px 22px; font-size: 14px; } } @media (max-width: 480px) { .reveria-hero-advanced .hero-section, .dc-cb, .ec-section, .dc-ug, .tc-section, .dc-cta { padding: 44px 16px; } .hero-btn { padding: 12px 20px; font-size: 13.5px; gap: 8px; } } /* ndn-header */ /* * Design tokens (--ndn-*) are declared in the central design-system CSS * (developercode-core plugin → assets/css/ndn-design-system.css) at * html:root level, so they are authoritative everywhere. This header * only consumes them via var(), nothing more. */ /* ========================================================= HEADER SHELL Non-sticky. On body.home the header is an absolute transparent overlay over the reveria-hero-advanced widget; on other pages it sits normally in document flow. Either way the header scrolls away with the page. ========================================================= */ .ndn-header { position: relative; z-index: 900; background: var(--ndn-surface); box-shadow: var(--ndn-shadow-sm); } .ndn-header__main { padding: 14px 0; } .ndn-header__container { max-width: 1400px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 24px; } /* ── Transparent overlay header for any page that starts with a hero (home + all pages with body.ndn-has-hero auto-added in functions) ── */ body.home .ndn-header, body.ndn-has-hero .ndn-header { position: absolute; top: 0; left: 0; right: 0; background: transparent; box-shadow: none; } body.home .ndn-header .ndn-header__logo-text, body.home .ndn-header .ndn-header__nav-link, body.home .ndn-header .ndn-header__mobile-toggle span, body.ndn-has-hero .ndn-header .ndn-header__logo-text, body.ndn-has-hero .ndn-header .ndn-header__nav-link, body.ndn-has-hero .ndn-header .ndn-header__mobile-toggle span { color: #ffffff; } body.home .ndn-header .ndn-header__logo-img, body.ndn-has-hero .ndn-header .ndn-header__logo-img { filter: brightness(0) invert(1); } body.home .ndn-header .ndn-header__mobile-toggle, body.ndn-has-hero .ndn-header .ndn-header__mobile-toggle { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.4); box-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body.home .ndn-header .ndn-header__mobile-toggle:hover, body.ndn-has-hero .ndn-header .ndn-header__mobile-toggle:hover { background: rgba(255, 255, 255, 0.18); border-color: #ffffff; } body.home .ndn-header .ndn-header__mobile-toggle span, body.ndn-has-hero .ndn-header .ndn-header__mobile-toggle span { background: #ffffff; } body.home .ndn-header .ndn-header__nav-link:hover, body.home .ndn-header .ndn-header__nav-link:focus-visible, body.ndn-has-hero .ndn-header .ndn-header__nav-link:hover, body.ndn-has-hero .ndn-header .ndn-header__nav-link:focus-visible { background: rgba(255, 255, 255, 0.12); color: #ffffff; } body.home .ndn-header .ndn-header__nav-link.is-active, body.ndn-has-hero .ndn-header .ndn-header__nav-link.is-active { color: #ffffff; } body.home .ndn-header .ndn-header__nav-link.is-active::after, body.ndn-has-hero .ndn-header .ndn-header__nav-link.is-active::after { background: var(--ndn-accent); } /* ========================================================= TOP BAR ========================================================= */ .ndn-topbar { color: var(--ndn-white); font-size: 13px; transition: background-color var(--ndn-t); } /* Transparent on home hero — keeps white text readable on dark hero bg */ body.home .ndn-header:not(.is-scrolled) .ndn-topbar { background: transparent; } body.home .ndn-header:not(.is-scrolled) .ndn-topbar__divider { background: rgba(255, 255, 255, 0.28); } .ndn-topbar__container { max-width: 1400px; margin: 0 auto; padding: 8px 32px; display: flex; align-items: center; justify-content: flex-end; gap: 24px; flex-wrap: wrap; } .ndn-topbar__group { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; } .ndn-topbar__item { display: inline-flex; align-items: center; gap: 7px; color: var(--ndn-white); text-decoration: none; font-weight: 500; letter-spacing: 0.01em; transition: opacity var(--ndn-t); } .ndn-topbar__item--link:hover { opacity: 0.82; } .ndn-topbar__item svg { width: 14px; height: 14px; color: var(--ndn-accent); flex-shrink: 0; } .ndn-topbar__divider { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.22); } .ndn-topbar__google { gap: 6px; } .ndn-topbar__stars { color: #fbbc04; display: inline-flex; gap: 1px; } .ndn-topbar__stars svg { width: 11px; height: 11px; fill: currentColor; color: #fbbc04; } .ndn-topbar__rating { font-weight: 700; } .ndn-topbar__label { color: rgba(255, 255, 255, 0.82); } @media (max-width: 900px) { .ndn-topbar { display: none; } } /* ========================================================= LOGO ========================================================= */ .ndn-header__logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ndn-primary); flex-shrink: 0; } .ndn-header__logo-img { display: block; height: 52px; width: auto; transition: height var(--ndn-t); } .ndn-header__logo-text { font-family: "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; } .ndn-header__logo-text em { display: block; font-size: 11px; font-weight: 500; font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ndn-accent); margin-top: 2px; } /* ========================================================= PRIMARY NAV ========================================================= */ .ndn-header__nav { display: flex; align-items: center; gap: 2px; margin-left: auto; } .ndn-header__nav-list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } .ndn-header__nav-item { position: relative; list-style: none; } .ndn-header__nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 11px 14px; font-family: 'Jost', 'DM Sans', sans-serif; font-size: 14.5px; font-weight: 600; color: var(--ndn-primary); text-decoration: none; border-radius: 10px; white-space: nowrap; transition: color var(--ndn-t), background-color var(--ndn-t); } .ndn-header__nav-link:hover, .ndn-header__nav-link:focus-visible { color: var(--ndn-accent-dark); background: var(--ndn-accent-soft); outline: none; } .ndn-header__nav-link.is-active { color: var(--ndn-accent-dark); } .ndn-header__nav-link.is-active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--ndn-accent); } .ndn-caret { width: 11px; height: 11px; transition: transform var(--ndn-t); } .ndn-header__nav-item.has-children:hover .ndn-caret, .ndn-header__nav-item.has-children:focus-within .ndn-caret { transform: rotate(180deg); } /* ========================================================= ACTIONS (CTA + mobile toggle) ========================================================= */ .ndn-header__actions { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; } .ndn-header__cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; background: var(--ndn-accent-dark); color: #ffffff !important; font-family: 'DM Sans', 'Jost', sans-serif; font-size: 14.5px; font-weight: 700; text-decoration: none; letter-spacing: 0.01em; box-shadow: 0 10px 24px -8px rgba(200, 164, 106, 0.55); transition: background-color var(--ndn-t), transform var(--ndn-t), box-shadow var(--ndn-t); } .ndn-header__cta:hover, .ndn-header__cta:focus-visible { background: var(--ndn-primary); transform: translateY(-2px); box-shadow: 0 14px 30px -8px rgba(26, 26, 26, 0.6); outline: none; } .ndn-header__cta svg { width: 15px; height: 15px; } /* ── Unique mobile toggle — branded pill with gold dot indicator + premium hamburger→X morph. Accent border matches NDN palette. ── */ .ndn-header__mobile-toggle { display: none; position: relative; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1.5px solid var(--ndn-accent); background: var(--ndn-white); cursor: pointer; padding: 0; border-radius: 14px; box-shadow: 0 6px 16px -8px rgba(169, 131, 74, 0.45); transition: background-color var(--ndn-t), border-color var(--ndn-t), box-shadow var(--ndn-t), transform var(--ndn-t); -webkit-tap-highlight-color: transparent; } .ndn-header__mobile-toggle::after { /* tiny gold status dot — "online" feel, disappears when open */ content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ndn-accent); box-shadow: 0 0 0 2px var(--ndn-white), 0 0 10px rgba(200, 164, 106, 0.8); transition: opacity 0.25s ease, transform 0.25s ease; } .ndn-header__mobile-toggle:hover, .ndn-header__mobile-toggle:focus-visible { background: var(--ndn-accent-soft); border-color: var(--ndn-accent-dark); box-shadow: 0 10px 22px -8px rgba(169, 131, 74, 0.65); outline: none; } .ndn-header__mobile-toggle:active { transform: scale(0.96); } /* Hamburger bars sit in a fixed 22x16 box, centered */ .ndn-header__mobile-toggle span { display: block; position: absolute; left: 50%; width: 22px; height: 2px; background: var(--ndn-primary); border-radius: 2px; transform-origin: center; transition: transform 0.35s cubic-bezier(0.68, -0.4, 0.27, 1.5), top 0.25s ease 0.1s, opacity 0.2s ease, background-color var(--ndn-t), width 0.25s ease; margin-left: -11px; } .ndn-header__mobile-toggle span:nth-child(1) { top: 16px; } .ndn-header__mobile-toggle span:nth-child(2) { top: 23px; width: 16px; } .ndn-header__mobile-toggle span:nth-child(3) { top: 30px; } .ndn-header__mobile-toggle.is-active { background: var(--ndn-accent); border-color: var(--ndn-accent-dark); } .ndn-header__mobile-toggle.is-active::after { opacity: 0; transform: scale(0); } .ndn-header__mobile-toggle.is-active span { background: #ffffff; transition-delay: 0s, 0s, 0s, 0s, 0s; } .ndn-header__mobile-toggle.is-active span:nth-child(1) { top: 23px; transform: rotate(45deg); } .ndn-header__mobile-toggle.is-active span:nth-child(2) { opacity: 0; width: 22px; } .ndn-header__mobile-toggle.is-active span:nth-child(3) { top: 23px; transform: rotate(-45deg); } /* ========================================================= MEGAMENU — premium, icon-rich, image CTA ========================================================= */ .ndn-megamenu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(10px); width: min(1220px, 96vw); background: var(--ndn-surface); border-radius: 22px; box-shadow: 0 40px 90px -30px rgba(26, 26, 26, 0.35), 0 18px 40px -20px rgba(169, 131, 74, 0.18); border: 1px solid var(--ndn-border); padding: 0; opacity: 0; visibility: hidden; transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.35s cubic-bezier(0.22, 1, 0.36, 1); z-index: 50; overflow: hidden; } /* Gold top accent line on the panel */ .ndn-megamenu::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--ndn-accent) 30%, var(--ndn-accent-dark) 70%, transparent 100%); z-index: 2; } .ndn-header__nav-item.has-children:hover .ndn-megamenu, .ndn-header__nav-item.has-children:focus-within .ndn-megamenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .ndn-megamenu__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 1.25fr; gap: 0; } @media (max-width: 1180px) { .ndn-megamenu__grid { grid-template-columns: repeat(2, 1fr); } .ndn-megamenu__column--cta { grid-column: 1 / -1; } } .ndn-megamenu__column { padding: 28px 24px 26px; position: relative; } .ndn-megamenu__column + .ndn-megamenu__column { border-left: 1px solid var(--ndn-border); } .ndn-megamenu__group-title { font-family: var(--ndn-font-heading); font-size: 11px; font-weight: 700; color: var(--ndn-accent-dark); letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 18px; display: flex; align-items: center; gap: 10px; } .ndn-megamenu__group-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--ndn-border), transparent); } .ndn-megamenu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .ndn-megamenu__item { list-style: none; } .ndn-megamenu__link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--ndn-text-main); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: background-color var(--ndn-transition), color var(--ndn-transition), transform var(--ndn-transition); } .ndn-megamenu__link:hover, .ndn-megamenu__link:focus-visible { background: var(--ndn-surface-soft); color: var(--ndn-accent-dark); transform: translateX(3px); outline: none; } .ndn-megamenu__icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--ndn-surface-soft); color: var(--ndn-accent-dark); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ndn-border); transition: background-color var(--ndn-transition), color var(--ndn-transition), border-color var(--ndn-transition), transform var(--ndn-transition); } .ndn-megamenu__icon svg { width: 18px; height: 18px; stroke-width: 1.6; } .ndn-megamenu__link:hover .ndn-megamenu__icon, .ndn-megamenu__link:focus-visible .ndn-megamenu__icon { background: var(--ndn-accent-dark); color: #ffffff; border-color: var(--ndn-accent-dark); transform: rotate(-3deg) scale(1.05); } .ndn-megamenu__title { line-height: 1.3; } /* ── CTA column with image ── */ .ndn-megamenu__column--cta { padding: 0; border-left: 1px solid var(--ndn-border); position: relative; min-height: 420px; background: var(--ndn-text-main); color: var(--ndn-surface); overflow: hidden; display: flex; flex-direction: column; } .ndn-megamenu__cta-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .ndn-megamenu__column--cta:hover .ndn-megamenu__cta-image { transform: scale(1.05); } .ndn-megamenu__cta-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 26, 26, 0.1) 0%, rgba(26, 26, 26, 0.75) 55%, rgba(26, 26, 26, 0.94) 100%), radial-gradient(ellipse at 85% 15%, rgba(200, 164, 106, 0.25) 0%, transparent 60%); z-index: 1; } .ndn-megamenu__cta-body { position: relative; z-index: 2; margin-top: auto; padding: 28px 26px; } .ndn-megamenu__cta-eyebrow { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: rgba(200, 164, 106, 0.2); color: #e9d5b6; font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .ndn-megamenu__cta-eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ndn-accent); box-shadow: 0 0 0 3px rgba(200, 164, 106, 0.25); } .ndn-megamenu__cta-title { font-family: var(--ndn-font-heading); font-size: 22px; font-weight: 700; line-height: 1.2; color: #ffffff; margin: 0 0 10px; letter-spacing: -0.01em; } .ndn-megamenu__cta-desc { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); margin: 0 0 18px; } .ndn-megamenu__cta-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .ndn-megamenu__cta-link { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; color: #ffffff; text-decoration: none; font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.1); transition: all var(--ndn-transition); } .ndn-megamenu__cta-link:hover, .ndn-megamenu__cta-link:focus-visible { background: rgba(200, 164, 106, 0.95); border-color: transparent; color: #1A1A1A; transform: translateX(4px); outline: none; } .ndn-megamenu__cta-link svg { width: 16px; height: 16px; margin-left: auto; transition: transform var(--ndn-transition); } .ndn-megamenu__cta-link:hover svg { transform: translateX(3px); } .ndn-megamenu__cta-link--primary { background: var(--ndn-accent-dark); border-color: transparent; } .ndn-megamenu__cta-link--primary:hover { background: #ffffff; color: var(--ndn-text-main); } /* ========================================================= MOBILE DRAWER ========================================================= */ .ndn-mobile__overlay { position: fixed; inset: 0; background: rgba(26, 26, 26, 0.55); opacity: 0; visibility: hidden; transition: opacity var(--ndn-t), visibility var(--ndn-t); z-index: 9998; } .ndn-mobile__overlay.is-active { opacity: 1; visibility: visible; } .ndn-mobile { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); background: var(--ndn-white); z-index: 9999; transform: translateX(100%); transition: transform var(--ndn-t); display: flex; flex-direction: column; box-shadow: -20px 0 60px -10px rgba(0, 0, 0, 0.25); } .ndn-mobile.is-active { transform: translateX(0); } .ndn-mobile__header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--ndn-border); } .ndn-mobile__logo { font-family: "Times New Roman", Times, serif; font-size: 18px; font-weight: 700; color: var(--ndn-primary); text-decoration: none; } .ndn-mobile__close { width: 36px; height: 36px; border: none; background: transparent; border-radius: 10px; cursor: pointer; color: var(--ndn-primary); } .ndn-mobile__close svg { width: 20px; height: 20px; } /* ── Quick-actions bar pinned to bottom of drawer — prominent go-to CTAs Three 56px-tall pills: Bel / WhatsApp / Boek. The drawer uses a flex column layout; .ndn-mobile__nav has flex:1 so this block is pushed against the bottom edge regardless of nav length. ── */ .ndn-mobile__quick-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(0deg, var(--ndn-accent-soft) 0%, rgba(246, 242, 236, 0) 100%); border-top: 1px solid var(--ndn-border); flex-shrink: 0; } .ndn-mobile__quick-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 56px; padding: 8px 6px; border-radius: 12px; background: var(--ndn-white); border: 1px solid var(--ndn-border); color: var(--ndn-primary); font-family: 'DM Sans', 'Jost', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; text-align: center; transition: transform var(--ndn-t), box-shadow var(--ndn-t), background-color var(--ndn-t), border-color var(--ndn-t), color var(--ndn-t); -webkit-tap-highlight-color: transparent; } .ndn-mobile__quick-btn svg { width: 18px; height: 18px; color: var(--ndn-accent-dark); transition: color var(--ndn-t); } .ndn-mobile__quick-btn:hover, .ndn-mobile__quick-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(169, 131, 74, 0.5); border-color: var(--ndn-accent); outline: none; } .ndn-mobile__quick-btn:active { transform: translateY(0) scale(0.97); } /* "Boek" stands out as the primary action — filled gold */ .ndn-mobile__quick-btn--book { background: var(--ndn-accent); border-color: var(--ndn-accent-dark); color: #ffffff; box-shadow: 0 8px 18px -8px rgba(200, 164, 106, 0.55); } .ndn-mobile__quick-btn--book svg { color: #ffffff; } .ndn-mobile__quick-btn--book:hover, .ndn-mobile__quick-btn--book:focus-visible { background: var(--ndn-primary); border-color: var(--ndn-primary); color: #ffffff; } .ndn-mobile__quick-btn--book:hover svg { color: #ffffff; } .ndn-mobile__nav { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; } .ndn-mobile__list { list-style: none; margin: 0; padding: 0; } .ndn-mobile__item { border-bottom: 1px solid var(--ndn-border); } .ndn-mobile__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 10px; font-family: 'DM Sans', 'Jost', sans-serif; font-size: 16px; font-weight: 600; color: var(--ndn-primary); text-decoration: none; } .ndn-mobile__link--cta { color: var(--ndn-accent-dark); } .ndn-mobile__toggle { border: none; background: transparent; cursor: pointer; padding: 14px 10px; width: 100%; text-align: left; } .ndn-mobile__chevron { width: 16px; height: 16px; transition: transform var(--ndn-t); color: var(--ndn-accent); } .ndn-mobile__item.is-open .ndn-mobile__chevron { transform: rotate(180deg); } .ndn-mobile__sub { display: none; list-style: none; margin: 0 0 12px; padding: 0 0 0 4px; } .ndn-mobile__item.is-open .ndn-mobile__sub { display: block; } .ndn-mobile__sub-group { padding: 6px 0 10px; } .ndn-mobile__sub-title { display: block; padding: 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ndn-accent-dark); } .ndn-mobile__sub-link { display: block; padding: 9px 10px; font-size: 14.5px; font-weight: 500; color: var(--ndn-text-muted); text-decoration: none; border-radius: var(--ndn-radius); } .ndn-mobile__sub-link:hover, .ndn-mobile__sub-link:focus-visible { background: var(--ndn-accent-soft); color: var(--ndn-accent-dark); outline: none; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1200px) { .ndn-header__nav-link { padding: 10px 11px; font-size: 14px; } } @media (max-width: 1024px) { .ndn-header__nav { display: none; } .ndn-header__mobile-toggle { display: inline-flex; } /* Push actions (toggle + CTA) all the way to the right once the nav is hidden — without this they'd sit flush against the logo. */ .ndn-header__actions { gap: 8px; margin-left: auto; } .ndn-header__cta { padding: 10px 16px; font-size: 13.5px; } } /* ≤720px — CTA is redundant (drawer exposes a prominent Boek button). Keep header lean: logo on left, hamburger pinned right. */ @media (max-width: 720px) { .ndn-header__cta { display: none; } .ndn-header__actions { gap: 0; margin-left: auto; } } @media (max-width: 560px) { .ndn-header__container { padding: 0 18px; } .ndn-header__logo-img { height: 44px; } .ndn-header__mobile-toggle { width: 44px; height: 44px; border-radius: 12px; } .ndn-header__mobile-toggle::after { top: 6px; right: 6px; } } /* Drawer quick-action buttons — shrink labels on tiny phones */ @media (max-width: 360px) { .ndn-mobile__quick-actions { padding: 12px 14px; gap: 6px; } .ndn-mobile__quick-btn { font-size: 11px; min-height: 52px; } } /* ndn-footer */ .ndn-footer { background: var(--ndn-surface); color: var(--ndn-text-secondary); font-family: var(--ndn-font-body); position: relative; border-top: 1px solid var(--ndn-border); } .ndn-footer__accent { height: 3px; background: linear-gradient(90deg, transparent 0%, var(--ndn-accent) 30%, var(--ndn-accent-dark) 70%, transparent 100%); } .ndn-footer__wrap { max-width: 1400px; margin: 0 auto; padding: clamp(56px, 6vw, 96px) 32px 40px; } /* ═══ Columns grid ═══════════════════════════════════════ */ .ndn-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 56px; } @media (max-width: 960px) { .ndn-footer__grid { grid-template-columns: 1fr; gap: 40px; } } .ndn-footer__col-title { font-family: var(--ndn-font-heading); font-size: 20px; font-weight: 700; color: var(--ndn-text-main); margin: 0 0 20px; letter-spacing: 0.01em; position: relative; padding-bottom: 12px; } .ndn-footer__col-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--ndn-accent-dark); } /* ═══ Column 1: Bezoek ons ═══════════════════════════════ */ .ndn-footer__brand { font-family: var(--ndn-font-heading); font-size: 22px; font-weight: 700; color: var(--ndn-text-main); margin: 0 0 10px; letter-spacing: 0.02em; } .ndn-footer__address { font-style: normal; line-height: 1.75; color: var(--ndn-text-secondary); margin: 0 0 18px; font-size: 15px; } .ndn-footer__address a { color: var(--ndn-text-main); text-decoration: none; font-weight: 600; transition: color var(--ndn-transition); } .ndn-footer__address a:hover, .ndn-footer__address a:focus-visible { color: var(--ndn-accent-dark); outline: none; } .ndn-footer__maps-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ndn-accent-dark); text-decoration: none; margin-bottom: 22px; transition: color var(--ndn-transition), transform var(--ndn-transition); } .ndn-footer__maps-link:hover, .ndn-footer__maps-link:focus-visible { color: var(--ndn-text-main); transform: translateX(2px); outline: none; } .ndn-footer__maps-link svg { width: 16px; height: 16px; } .ndn-footer__map { border-radius: var(--ndn-radius); overflow: hidden; border: 1px solid var(--ndn-border); margin-bottom: 20px; background: var(--ndn-surface-soft); } .ndn-footer__map iframe { display: block; width: 100%; height: 180px; border: 0; } .ndn-footer__socials { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; } .ndn-footer__socials a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ndn-surface-soft); border: 1px solid var(--ndn-border); color: var(--ndn-text-main); text-decoration: none; transition: all var(--ndn-transition); } .ndn-footer__socials a:hover, .ndn-footer__socials a:focus-visible { background: var(--ndn-accent-dark); color: #ffffff; border-color: var(--ndn-accent-dark); transform: translateY(-2px); outline: none; } .ndn-footer__socials svg { width: 17px; height: 17px; } /* ═══ Column 2: Werktijden ═══════════════════════════════ */ .ndn-footer__hours { list-style: none; margin: 0; padding: 0; } .ndn-footer__hours li { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--ndn-border); font-size: 14.5px; } .ndn-footer__hours li:last-child { border-bottom: none; } .ndn-footer__hours-day { color: var(--ndn-text-main); font-weight: 500; } .ndn-footer__hours-time { color: var(--ndn-text-secondary); font-variant-numeric: tabular-nums; } .ndn-footer__hours li.is-closed .ndn-footer__hours-day { color: var(--ndn-text-secondary); } .ndn-footer__hours li.is-closed .ndn-footer__hours-time { color: var(--ndn-accent-dark); font-style: italic; } /* ═══ Column 3: Quick Links ══════════════════════════════ */ .ndn-footer__links { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 20px; } .ndn-footer__links li { margin: 0 0 10px; break-inside: avoid; } .ndn-footer__links a { display: inline-flex; align-items: center; gap: 6px; color: var(--ndn-text-secondary); text-decoration: none; font-size: 14.5px; transition: color var(--ndn-transition), transform var(--ndn-transition); } .ndn-footer__links a::before { content: "›"; color: var(--ndn-accent-dark); font-weight: 700; transition: transform var(--ndn-transition); } .ndn-footer__links a:hover, .ndn-footer__links a:focus-visible { color: var(--ndn-accent-dark); transform: translateX(2px); outline: none; } @media (max-width: 560px) { .ndn-footer__links { columns: 1; } } /* ═══ Bottom bar ═════════════════════════════════════════ */ .ndn-footer__bottom { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--ndn-border); } .ndn-footer__nav { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0 0 20px; padding: 0; justify-content: center; } .ndn-footer__nav li { position: relative; padding: 0 14px; } .ndn-footer__nav li + li::before { content: ""; position: absolute; left: -1px; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background: var(--ndn-accent-dark); opacity: 0.55; } .ndn-footer__nav a { font-size: 13.5px; font-weight: 500; color: var(--ndn-text-main); text-decoration: none; transition: color var(--ndn-transition); } .ndn-footer__nav a:hover, .ndn-footer__nav a:focus-visible { color: var(--ndn-accent-dark); outline: none; } .ndn-footer__meta { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 14px 24px; font-size: 13px; color: var(--ndn-text-secondary); } /* Left group: copyright + legal links — pinned to the left edge */ .ndn-footer__meta-left { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; } .ndn-footer__meta-links { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; } .ndn-footer__meta-links a { color: var(--ndn-text-secondary); text-decoration: none; transition: color var(--ndn-transition); } .ndn-footer__meta-links a:hover { color: var(--ndn-accent-dark); } .ndn-footer__credit { color: var(--ndn-text-secondary); font-size: 12px; } .ndn-footer__credit a { color: var(--ndn-accent-dark); text-decoration: none; font-weight: 600; transition: color var(--ndn-transition); } .ndn-footer__credit a:hover { color: var(--ndn-accent); } /* ndn-stickbar */ /* ================================================================= NDN.LASER — Global Sticky Contact Bar Expandable bottom bar (logo · phone · Boek afspraak · WhatsApp). Collapsed = floating gold pill bottom-right. Expanded = full bar across the viewport with all actions. No inline styles. ================================================================= */ .ndn-stickbar { position: fixed; z-index: 9000; bottom: 22px; right: 22px; font-family: 'DM Sans', system-ui, sans-serif; pointer-events: none; } .ndn-stickbar *, .ndn-stickbar *::before, .ndn-stickbar *::after { box-sizing: border-box; } /* ─── TRIGGER (collapsed state: floating pill) ─────────── */ .ndn-stickbar__trigger { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px 14px 18px; background: linear-gradient(135deg, var(--ndn-accent, #C8A46A) 0%, var(--ndn-accent-dark, #836436) 100%); color: #fff; border: none; border-radius: 999px; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; box-shadow: 0 18px 38px -12px rgba(169, 131, 74, 0.55), 0 6px 16px -8px rgba(26, 26, 26, 0.28); transform: translateY(120%); opacity: 0; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; } .ndn-stickbar.is-visible .ndn-stickbar__trigger { transform: translateY(0); opacity: 1; } .ndn-stickbar[data-open="true"] .ndn-stickbar__trigger { transform: translateY(120%); opacity: 0; pointer-events: none; } .ndn-stickbar__trigger:hover { box-shadow: 0 24px 46px -12px rgba(169, 131, 74, 0.7), 0 8px 20px -8px rgba(26, 26, 26, 0.3); } .ndn-stickbar__trigger-icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; } .ndn-stickbar__trigger-icon svg { width: 18px; height: 18px; } .ndn-stickbar__trigger-pulse { position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8); animation: ndn-stickbar-pulse 2s cubic-bezier(0.22, 1, 0.36, 1) infinite; } @keyframes ndn-stickbar-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8); } 70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } /* ─── EXPANDED PANEL (full bottom bar) ─────────────────── */ .ndn-stickbar__panel { pointer-events: auto; position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(120%); width: min(980px, calc(100vw - 24px)); display: flex; align-items: center; gap: 20px; padding: 14px 18px 14px 22px; background: linear-gradient(135deg, var(--ndn-text-main, #1A1A1A) 0%, #2a2620 100%); color: #fff; border-radius: 22px; box-shadow: 0 40px 80px -28px rgba(26, 26, 26, 0.55), 0 16px 36px -20px rgba(169, 131, 74, 0.28); opacity: 0; visibility: hidden; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease, visibility 0.35s ease; isolation: isolate; } /* Gold top accent line across the panel */ .ndn-stickbar__panel::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 2px; background: linear-gradient(90deg, transparent, var(--ndn-accent, #C8A46A), transparent); border-radius: 2px; pointer-events: none; } .ndn-stickbar[data-open="true"] .ndn-stickbar__panel { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; } /* Brand block (logo card + tagline) */ .ndn-stickbar__brand { display: inline-flex; align-items: center; gap: 14px; padding-right: 20px; border-right: 1px solid rgba(200, 164, 106, 0.25); color: #fff; text-decoration: none; flex-shrink: 0; transition: opacity 0.25s ease; } .ndn-stickbar__brand:hover { opacity: 0.85; } /* Logo sits in its own crème card so brand integrity is preserved (no forced colour filter, no circle-crop on a landscape mark). */ .ndn-stickbar__logo { display: block; height: 28px; width: auto; max-width: 120px; object-fit: contain; object-position: center; padding: 6px 10px; background: var(--ndn-surface, #ffffff); border-radius: 10px; border: 1px solid rgba(200, 164, 106, 0.25); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.35); box-sizing: content-box; } .ndn-stickbar__logo-text { font-family: "Times New Roman", Times, serif; font-size: 17px; font-weight: 700; letter-spacing: 0.02em; color: #fff; } .ndn-stickbar__tagline { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ndn-accent, #C8A46A); white-space: nowrap; } /* Actions nav */ .ndn-stickbar__actions { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; justify-content: flex-end; } .ndn-stickbar__action { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; transition: all 0.25s ease; white-space: nowrap; } .ndn-stickbar__action svg { width: 16px; height: 16px; flex-shrink: 0; } .ndn-stickbar__action-label { display: inline-flex; flex-direction: column; line-height: 1.2; } .ndn-stickbar__action-hint { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.65; } .ndn-stickbar__action-value { font-size: 14px; font-weight: 700; } /* Phone + WhatsApp (translucent pills) */ .ndn-stickbar__action--phone, .ndn-stickbar__action--whatsapp { color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); } .ndn-stickbar__action--phone:hover, .ndn-stickbar__action--whatsapp:hover { background: rgba(200, 164, 106, 0.2); border-color: rgba(200, 164, 106, 0.45); transform: translateY(-2px); } /* Primary CTA (Boek afspraak) — filled gold gradient */ .ndn-stickbar__action--primary { background: linear-gradient(135deg, var(--ndn-accent, #C8A46A), var(--ndn-accent-dark, #836436)); color: #fff; box-shadow: 0 10px 24px -8px rgba(200, 164, 106, 0.5); padding-right: 14px; } .ndn-stickbar__action--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -8px rgba(200, 164, 106, 0.7); } .ndn-stickbar__action-arrow { transition: transform 0.25s ease; } .ndn-stickbar__action--primary:hover .ndn-stickbar__action-arrow { transform: translateX(3px); } /* Close button */ .ndn-stickbar__close { flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); border-radius: 50%; color: rgba(255, 255, 255, 0.7); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.25s ease; } .ndn-stickbar__close svg { width: 14px; height: 14px; } .ndn-stickbar__close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; transform: rotate(90deg); } /* ─── RESPONSIVE ───────────────────────────────────────── */ @media (max-width: 960px) { .ndn-stickbar__action-hint { display: none; } .ndn-stickbar__action { padding: 11px 14px; } } @media (max-width: 720px) { .ndn-stickbar { bottom: 12px; right: 12px; } .ndn-stickbar__panel { width: calc(100vw - 16px); bottom: 12px; padding: 12px 14px; gap: 12px; border-radius: 18px; } .ndn-stickbar__brand { display: none; } .ndn-stickbar__actions { gap: 8px; justify-content: space-between; } .ndn-stickbar__action { flex: 1; justify-content: center; padding: 12px 10px; font-size: 13px; } .ndn-stickbar__action-label, .ndn-stickbar__action-value { font-size: 13px; } .ndn-stickbar__action--phone .ndn-stickbar__action-value, .ndn-stickbar__action--whatsapp .ndn-stickbar__action-value { display: none; } .ndn-stickbar__close { width: 32px; height: 32px; } .ndn-stickbar__trigger-text { display: none; } .ndn-stickbar__trigger { padding: 14px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .ndn-stickbar__trigger-pulse { animation: none; } .ndn-stickbar__trigger, .ndn-stickbar__panel { transition: opacity 0.2s ease; } } /* ndn-blog */ /* ================================================================= NDN.LASER — Blog templates home.php (index) + single.php (single post) No inline styles. Uses central NDN design tokens where available. ================================================================= */ /* ═══════════════════════════════════════════════════════════════ Shared shell ═══════════════════════════════════════════════════════════════ */ .ndn-blog { background: var(--ndn-bg, #F6F2EC); color: var(--ndn-text-main, #1A1A1A); font-family: 'DM Sans', system-ui, sans-serif; } .ndn-blog *, .ndn-blog *::before, .ndn-blog *::after { box-sizing: border-box; } /* ═══════════════════════════════════════════════════════════════ Hero — shared between index & single ═══════════════════════════════════════════════════════════════ */ .ndn-blog__hero { position: relative; min-height: 56vh; padding: clamp(120px, 16vw, 180px) 20px clamp(60px, 8vw, 100px); color: #fff; overflow: hidden; isolation: isolate; } .ndn-blog__hero-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; } .ndn-blog__hero-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(26, 26, 26, 0.55) 0%, rgba(26, 26, 26, 0.82) 100%), radial-gradient(ellipse at 85% 15%, rgba(200, 164, 106, 0.35) 0%, transparent 60%); } .ndn-blog__hero-wrap { max-width: 1400px; margin: 0 auto; } .ndn-blog__crumbs { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.7); flex-wrap: wrap; } .ndn-blog__crumbs a { color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color .25s ease; } .ndn-blog__crumbs a:hover { color: var(--ndn-accent, #C8A46A); } .ndn-blog__crumbs li + li::before { content: "›"; margin-right: 10px; color: var(--ndn-accent, #C8A46A); } .ndn-blog__crumbs [aria-current="page"] { color: #fff; font-weight: 600; } .ndn-blog__eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 0; margin: 0 0 20px; background: transparent; border: none; color: var(--ndn-accent, #C8A46A); font-family: 'DM Sans', 'Jost', system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; line-height: 1.4; } .ndn-blog__eyebrow-text { color: inherit; } /* Laser-device SVG — identical geometry + animations as hero-eyebrow__seed */ .ndn-blog__eyebrow-seed { width: 22px; height: 42px; flex-shrink: 0; color: var(--ndn-accent, #C8A46A); overflow: visible; } .ndn-blog__eyebrow-seed-device { /* static */ } .ndn-blog__eyebrow-seed-dot { transform-origin: 30px 22px; transform-box: fill-box; animation: ndn-blog-laser-blink 1.8s ease-in-out infinite; } .ndn-blog__eyebrow-seed-beam { transform-origin: 30px 38px; transform-box: fill-box; animation: ndn-blog-laser-fire 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .ndn-blog__eyebrow-seed-ripple { transform-origin: 30px 100px; transform-box: fill-box; animation: ndn-blog-laser-ripple 1.6s cubic-bezier(0.22, 1, 0.36, 1) infinite; } .ndn-blog__eyebrow-seed-ripple--2 { animation-delay: 0.25s; } .ndn-blog__eyebrow-seed-ripple--3 { animation-delay: 0.5s; } @keyframes ndn-blog-laser-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.82); } } @keyframes ndn-blog-laser-fire { 0% { transform: scaleY(0.15); opacity: 0; } 15% { transform: scaleY(1); opacity: 1; } 75% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } @keyframes ndn-blog-laser-ripple { 0% { transform: scale(0.2); opacity: 0.9; } 70% { opacity: 0.4; } 100% { transform: scale(1.3); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ndn-blog__eyebrow-seed-dot, .ndn-blog__eyebrow-seed-beam, .ndn-blog__eyebrow-seed-ripple { animation: none; } } /* Hero title — identical to .hero-title from header-hero widget */ .ndn-blog__hero-title { font-family: "Times New Roman", Times, serif; font-size: clamp(36px, 5.5vw, 62px); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; color: #ffffff; margin: 0 0 20px; max-width: 900px; } .ndn-blog__hero-intro { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65; color: rgba(255, 255, 255, 0.85); margin: 0; max-width: 720px; } .ndn-blog__hero-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; font-size: 13.5px; color: rgba(255, 255, 255, 0.82); } .ndn-blog__hero-meta-item { display: inline-flex; align-items: center; gap: 8px; } .ndn-blog__hero-meta-item svg { width: 14px; height: 14px; color: var(--ndn-accent, #C8A46A); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ Reading progress bar (single post) ═══════════════════════════════════════════════════════════════ */ .ndn-blog__progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--ndn-accent, #C8A46A), var(--ndn-accent-dark, #836436)); z-index: 9999; transition: width 0.1s linear; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════ INDEX — Filter bar ═══════════════════════════════════════════════════════════════ */ .ndn-blog__filters { max-width: 1240px; margin: -30px auto 0; padding: 22px 28px; position: relative; z-index: 2; background: #fff; border-radius: 18px; box-shadow: 0 20px 50px -20px rgba(26, 26, 26, 0.18); display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .ndn-blog__filter-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ndn-accent-dark, #836436); margin-right: 8px; } .ndn-blog__filter { padding: 8px 16px; border-radius: 999px; background: var(--ndn-surface-soft, #FBF7F1); border: 1px solid var(--ndn-border, rgba(200, 164, 106, 0.25)); color: var(--ndn-text-secondary, #6B5E4B); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: all 0.25s ease; } .ndn-blog__filter:hover, .ndn-blog__filter:focus-visible { background: var(--ndn-accent-dark, #836436); color: #fff; border-color: var(--ndn-accent-dark, #836436); outline: none; } .ndn-blog__filter.is-active { background: var(--ndn-text-main, #1A1A1A); color: #fff; border-color: var(--ndn-text-main, #1A1A1A); } /* ═══════════════════════════════════════════════════════════════ INDEX — Grid of post cards ═══════════════════════════════════════════════════════════════ */ .ndn-blog__list { max-width: 1400px; margin: 0 auto; padding: clamp(40px, 5vw, 70px) 20px clamp(60px, 8vw, 100px); } .ndn-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media (max-width: 960px) { .ndn-blog__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } @media (max-width: 620px) { .ndn-blog__grid { grid-template-columns: 1fr; } } .ndn-blog__card { position: relative; background: #fff; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; border: 1px solid var(--ndn-border, rgba(200, 164, 106, 0.22)); } .ndn-blog__card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -22px rgba(26, 26, 26, 0.22), 0 12px 30px -14px rgba(169, 131, 74, 0.18); } .ndn-blog__card--featured { grid-column: span 2; } @media (max-width: 620px) { .ndn-blog__card--featured { grid-column: span 1; } } .ndn-blog__card--featured .ndn-blog__card-media { aspect-ratio: 16/9; } .ndn-blog__card--featured .ndn-blog__card-title { font-size: clamp(22px, 2.6vw, 30px); } .ndn-blog__card-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; } .ndn-blog__card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--ndn-surface-soft, #FBF7F1); } .ndn-blog__card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .ndn-blog__card:hover .ndn-blog__card-media img { transform: scale(1.06); } .ndn-blog__card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(26, 26, 26, 0.12) 100%); pointer-events: none; } .ndn-blog__card-category { position: absolute; top: 16px; left: 16px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); color: var(--ndn-accent-dark, #836436); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; z-index: 2; } .ndn-blog__card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; } .ndn-blog__card-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--ndn-text-secondary, #6B5E4B); margin-bottom: 12px; } .ndn-blog__card-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ndn-accent-dark, #836436); opacity: 0.6; } .ndn-blog__card-title { font-family: "Times New Roman", Times, serif; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--ndn-text-main, #1A1A1A); margin: 0 0 10px; letter-spacing: -0.01em; transition: color 0.25s ease; } .ndn-blog__card:hover .ndn-blog__card-title { color: var(--ndn-accent-dark, #836436); } .ndn-blog__card-excerpt { font-size: 14.5px; line-height: 1.6; color: var(--ndn-text-secondary, #6B5E4B); margin: 0 0 20px; flex: 1; } .ndn-blog__card-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--ndn-accent-dark, #836436); margin-top: auto; letter-spacing: 0.02em; } .ndn-blog__card-cta svg { width: 14px; height: 14px; transition: transform 0.25s ease; } .ndn-blog__card:hover .ndn-blog__card-cta svg { transform: translateX(4px); } /* Pagination */ .ndn-blog__pagination { margin: 50px 0 0; display: flex; justify-content: center; gap: 8px; } .ndn-blog__pagination a, .ndn-blog__pagination .current { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--ndn-text-main, #1A1A1A); text-decoration: none; font-weight: 600; font-size: 14px; border: 1px solid var(--ndn-border, rgba(200, 164, 106, 0.22)); transition: all 0.25s ease; } .ndn-blog__pagination a:hover { background: var(--ndn-accent-dark, #836436); color: #fff; border-color: var(--ndn-accent-dark, #836436); } .ndn-blog__pagination .current { background: var(--ndn-text-main, #1A1A1A); color: #fff; border-color: var(--ndn-text-main, #1A1A1A); } /* Empty state */ .ndn-blog__empty { grid-column: 1 / -1; padding: 80px 20px; text-align: center; color: var(--ndn-text-secondary, #6B5E4B); font-size: 16px; } /* ═══════════════════════════════════════════════════════════════ SINGLE — Article layout ═══════════════════════════════════════════════════════════════ */ .ndn-blog__article { max-width: 1400px; margin: -40px auto 0; padding: 0 0px clamp(60px, 8vw, 100px); position: relative; } .ndn-blog__article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; align-items: start; } @media (max-width: 960px) { .ndn-blog__article-grid { grid-template-columns: 1fr; gap: 40px; } } /* Main column */ .ndn-blog__body-wrap { background: #fff; border-radius: 22px; padding: clamp(32px, 4vw, 56px); box-shadow: 0 30px 70px -30px rgba(26, 26, 26, 0.22), 0 10px 24px -16px rgba(169, 131, 74, 0.1); position: relative; z-index: 1; } .ndn-blog__body { font-size: 17px; line-height: 1.8; color: var(--ndn-text-main, #1A1A1A); font-family: 'DM Sans', system-ui, sans-serif; } .ndn-blog__body > * + * { margin-top: 1.2em; } .ndn-blog__body > :first-child { margin-top: 0; } .ndn-blog__body p { margin: 0 0 1.1em; color: var(--ndn-text-secondary, #6B5E4B); } .ndn-blog__body p:first-of-type { font-size: 1.1em; color: var(--ndn-text-main, #1A1A1A); } .ndn-blog__body p strong { color: var(--ndn-text-main, #1A1A1A); } .ndn-blog__body h2 { font-family: "Times New Roman", Times, serif; font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--ndn-text-main, #1A1A1A); margin: 48px 0 18px; padding-top: 28px; position: relative; scroll-margin-top: 80px; } .ndn-blog__body h2::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--ndn-accent-dark, #836436), transparent); } .ndn-blog__body h3 { font-family: "Times New Roman", Times, serif; font-size: clamp(19px, 2vw, 22px); font-weight: 700; color: var(--ndn-text-main, #1A1A1A); margin: 34px 0 12px; display: flex; align-items: baseline; gap: 10px; scroll-margin-top: 80px; } .ndn-blog__body h3::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--ndn-accent, #C8A46A); transform: translateY(-2px); } .ndn-blog__body a { color: var(--ndn-accent-dark, #836436); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color 0.25s ease; } .ndn-blog__body a:hover { color: var(--ndn-text-main, #1A1A1A); } .ndn-blog__body ul, .ndn-blog__body ol { margin: 0 0 1.4em; padding-left: 0; list-style: none; } .ndn-blog__body ul li, .ndn-blog__body ol li { position: relative; padding-left: 28px; margin: 0 0 10px; color: var(--ndn-text-secondary, #6B5E4B); } .ndn-blog__body ul li::before { content: ""; position: absolute; left: 4px; top: 0.8em; width: 10px; height: 2px; background: var(--ndn-accent-dark, #836436); border-radius: 2px; } .ndn-blog__body ol { counter-reset: ndn-li; } .ndn-blog__body ol li { counter-increment: ndn-li; } .ndn-blog__body ol li::before { content: counter(ndn-li, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: "Times New Roman", Times, serif; font-size: 13.5px; font-weight: 700; color: var(--ndn-accent-dark, #836436); } .ndn-blog__body blockquote { margin: 28px 0; padding: 22px 26px; border-left: 3px solid var(--ndn-accent-dark, #836436); background: rgba(200, 164, 106, 0.08); font-family: "Times New Roman", Times, serif; font-size: 1.1em; font-style: italic; color: var(--ndn-text-main, #1A1A1A); border-radius: 0 12px 12px 0; } .ndn-blog__body img, .ndn-blog__body figure img { max-width: 100%; height: auto; border-radius: 14px; margin: 22px 0; box-shadow: var(--ndn-shadow, 0 12px 30px rgba(0, 0, 0, 0.08)); } /* Share bar */ .ndn-blog__share { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--ndn-border, rgba(200, 164, 106, 0.22)); display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } .ndn-blog__share-label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ndn-accent-dark, #836436); } .ndn-blog__share-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ndn-surface-soft, #FBF7F1); color: var(--ndn-text-main, #1A1A1A); text-decoration: none; border: 1px solid var(--ndn-border, rgba(200, 164, 106, 0.25)); transition: all 0.25s ease; } .ndn-blog__share-btn:hover { background: var(--ndn-accent-dark, #836436); color: #fff; border-color: var(--ndn-accent-dark, #836436); transform: translateY(-2px); } .ndn-blog__share-btn svg { width: 16px; height: 16px; } /* Sidebar (TOC + author + related) */ .ndn-blog__sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 22px; } @media (max-width: 960px) { .ndn-blog__sidebar { position: static; } } .ndn-blog__toc { background: #fff; border: 1px solid var(--ndn-border, rgba(200, 164, 106, 0.22)); border-radius: 16px; padding: 22px 20px; } .ndn-blog__toc-title { font-family: "Times New Roman", Times, serif; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ndn-accent-dark, #836436); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ndn-border, rgba(200, 164, 106, 0.22)); } .ndn-blog__toc-list { list-style: none; margin: 0; padding: 0; } .ndn-blog__toc-item { margin: 0 0 4px; } .ndn-blog__toc-item a { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; color: var(--ndn-text-secondary, #6B5E4B); text-decoration: none; transition: all 0.2s ease; border-left: 2px solid transparent; } .ndn-blog__toc-item a:hover, .ndn-blog__toc-item.is-active a { background: rgba(200, 164, 106, 0.1); color: var(--ndn-accent-dark, #836436); border-left-color: var(--ndn-accent-dark, #836436); } .ndn-blog__toc-num { font-family: "Times New Roman", Times, serif; font-size: 12px; font-weight: 700; color: var(--ndn-accent-dark, #836436); flex-shrink: 0; padding-top: 1px; } .ndn-blog__toc-item--l3 a { padding-left: 22px; opacity: 0.85; } .ndn-blog__toc-item--l3 .ndn-blog__toc-num { display: none; } /* CTA card in sidebar */ .ndn-blog__sidebar-cta { background: linear-gradient(135deg, var(--ndn-text-main, #1A1A1A), #2a2620); color: #fff; border-radius: 16px; padding: 26px 22px; position: relative; overflow: hidden; } .ndn-blog__sidebar-cta::before { content: ""; position: absolute; top: -50%; right: -40%; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 164, 106, 0.3), transparent 65%); pointer-events: none; } .ndn-blog__sidebar-cta-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ndn-accent, #C8A46A); margin: 0 0 10px; position: relative; } .ndn-blog__sidebar-cta-title { font-family: "Times New Roman", Times, serif; font-size: 19px; font-weight: 700; line-height: 1.25; margin: 0 0 10px; position: relative; } .ndn-blog__sidebar-cta-text { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.8); margin: 0 0 18px; position: relative; } .ndn-blog__sidebar-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: linear-gradient(135deg, var(--ndn-accent, #C8A46A), var(--ndn-accent-dark, #836436)); color: #fff; font-weight: 700; font-size: 13.5px; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; } .ndn-blog__sidebar-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(200, 164, 106, 0.55); } .ndn-blog__sidebar-cta-btn svg { width: 14px; height: 14px; } /* Related posts (bottom of single) */ .ndn-blog__related { max-width: 1240px; margin: 0 auto; padding: clamp(40px, 5vw, 70px) 20px; } .ndn-blog__related-title { font-family: "Times New Roman", Times, serif; font-size: clamp(24px, 3vw, 34px); font-weight: 700; color: var(--ndn-text-main, #1A1A1A); margin: 0 0 30px; text-align: center; position: relative; padding-bottom: 16px; } .ndn-blog__related-title::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; border-radius: 3px; background: var(--ndn-accent-dark, #836436); } /* Closing CTA strip */ .ndn-blog__closing-cta { margin: 48px 0 0; padding: 38px 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(135deg, var(--ndn-text-main, #1A1A1A), #2a2620); color: #fff; border-radius: 20px; position: relative; overflow: hidden; } .ndn-blog__closing-cta::before { content: ""; position: absolute; top: -50%; right: -20%; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 164, 106, 0.3), transparent 70%); pointer-events: none; } .ndn-blog__closing-cta-copy { position: relative; z-index: 1; } .ndn-blog__closing-cta-title { font-family: "Times New Roman", Times, serif; font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; margin: 0 0 6px; line-height: 1.25; } .ndn-blog__closing-cta-text { font-size: 14px; color: rgba(255, 255, 255, 0.82); margin: 0; } .ndn-blog__closing-cta-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; background: linear-gradient(135deg, var(--ndn-accent, #C8A46A), var(--ndn-accent-dark, #836436)); color: #fff; font-weight: 700; font-size: 14.5px; text-decoration: none; border-radius: 999px; box-shadow: 0 14px 30px -10px rgba(200, 164, 106, 0.6); transition: transform 0.25s ease, box-shadow 0.25s ease; flex-shrink: 0; } .ndn-blog__closing-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 38px -10px rgba(200, 164, 106, 0.75); } .ndn-blog__closing-cta-btn svg { width: 16px; height: 16px; } @media (max-width: 720px) { .ndn-blog__closing-cta { flex-direction: column; text-align: center; padding: 32px 24px; } .ndn-blog__closing-cta-btn { width: 100%; justify-content: center; } } /* dc-cta-button */ .dc-cta-btn{ display:inline-flex;align-items:center;gap:10px; padding:16px 28px;border-radius:999px; background:#1A1A1A;color:#fff !important; border:2px solid transparent; font-family:'DM Sans',system-ui,sans-serif;font-size:15px;font-weight:600;line-height:1; text-decoration:none;letter-spacing:.01em;cursor:pointer; box-shadow:0 14px 30px -10px rgba(26, 26, 26, .45); transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease; } .dc-cta-btn:hover{background:#836436;color:#fff !important;transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(200, 164, 106, .7);} .dc-cta-btn__arrow{transition:transform .2s ease;} .dc-cta-btn:hover .dc-cta-btn__arrow{transform:translateX(3px);} /* dc-eyebrow */ .dc-eyebrow{ display:inline-flex;align-items:center;gap:10px; padding:0;margin:0 0 16px;background:transparent;border:none; font-family:'DM Sans',system-ui,sans-serif; font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#765830; } /* Shared text treatment — applies to both the helper-output eyebrow (.dc-eyebrow__text) and the hero-style eyebrow (.eyebrow-text). */ .dc-eyebrow__text, .eyebrow-text{ font-family:'DM Sans',system-ui,sans-serif; font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:#765830; line-height:1.4; } .dc-eyebrow__seed{width:18px;height:34px;flex-shrink:0;color:#765830;overflow:visible;} .dc-eyebrow__seed-dot{transform-origin:30px 22px;transform-box:fill-box;animation:ndn-laser-blink 1.8s ease-in-out infinite;} .dc-eyebrow__seed-beam{transform-origin:30px 38px;transform-box:fill-box;animation:ndn-laser-fire 1.6s cubic-bezier(.4,0,.2,1) infinite;} .dc-eyebrow__seed-ripple{transform-origin:30px 100px;transform-box:fill-box;animation:ndn-laser-ripple 1.6s cubic-bezier(.22,1,.36,1) infinite;} .dc-eyebrow__seed-ripple--2{animation-delay:.25s;} .dc-eyebrow__seed-ripple--3{animation-delay:.5s;} @keyframes ndn-laser-blink{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.82);}} @keyframes ndn-laser-fire{0%{transform:scaleY(.15);opacity:0;}15%{transform:scaleY(1);opacity:1;}75%{transform:scaleY(1);opacity:1;}100%{transform:scaleY(1);opacity:0;}} @keyframes ndn-laser-ripple{0%{transform:scale(.2);opacity:.9;}70%{opacity:.4;}100%{transform:scale(1.3);opacity:0;}} @media (prefers-reduced-motion:reduce){ .dc-eyebrow__seed-dot,.dc-eyebrow__seed-beam,.dc-eyebrow__seed-ripple{animation:none;} }