/* 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; } } /* elementor-frontend */ :root{--direction-multiplier:1}body.rtl,html[dir=rtl]{--direction-multiplier:-1}.elementor-hidden{display:none}.elementor-visibility-hidden{visibility:hidden}.elementor-screen-only,.screen-reader-text,.screen-reader-text span,.ui-helper-hidden-accessible{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;top:-10000em;width:1px;clip:rect(0,0,0,0);border:0}.elementor-clearfix:after{clear:both;content:"";display:block;height:0;width:0}.e-logo-wrapper{display:inline-block;line-height:1}.e-logo-wrapper i{color:var(--e-a-color-circle-logo);font-size:2.5em}.elementor *,.elementor :after,.elementor :before{box-sizing:border-box}.elementor a{box-shadow:none;text-decoration:none}.elementor hr{background-color:transparent;margin:0}.elementor img{border:none;border-radius:0;box-shadow:none;height:auto;max-width:100%}.elementor .elementor-widget:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) figure{margin:0}.elementor embed,.elementor iframe,.elementor object,.elementor video{border:none;line-height:1;margin:0;max-width:100%;width:100%}.elementor .elementor-background,.elementor .elementor-background-holder,.elementor .elementor-background-video-container{direction:ltr;inset:0;overflow:hidden;position:absolute;z-index:0}.elementor .elementor-background-video-container{pointer-events:none;transition:opacity 1s}.elementor .elementor-background-video-container.elementor-loading{opacity:0}.elementor .elementor-background-video,.elementor .elementor-background-video-embed{max-width:none}.elementor .elementor-background-video,.elementor .elementor-background-video-embed,.elementor .elementor-background-video-hosted{inset-block-start:50%;inset-inline-start:50%;position:absolute;transform:translate(-50%,-50%)}.elementor .elementor-background-video-hosted{-o-object-fit:cover;object-fit:cover}.elementor .elementor-background-overlay{inset:0;position:absolute}.elementor .elementor-background-slideshow{inset:0;position:absolute;z-index:0}.elementor .elementor-background-slideshow__slide__image{background-position:50%;background-size:cover;height:100%;width:100%}.e-con-inner>.elementor-element.elementor-absolute,.e-con>.elementor-element.elementor-absolute,.elementor-widget-wrap>.elementor-element.elementor-absolute{position:absolute}.e-con-inner>.elementor-element.elementor-fixed,.e-con>.elementor-element.elementor-fixed,.elementor-widget-wrap>.elementor-element.elementor-fixed{position:fixed}.elementor-widget-wrap .elementor-element.elementor-widget__width-auto,.elementor-widget-wrap .elementor-element.elementor-widget__width-initial{max-width:100%}@media (max-width:1024px){.elementor-widget-wrap .elementor-element.elementor-widget-tablet__width-auto,.elementor-widget-wrap .elementor-element.elementor-widget-tablet__width-initial{max-width:100%}}@media (max-width:767px){.elementor-widget-wrap .elementor-element.elementor-widget-mobile__width-auto,.elementor-widget-wrap .elementor-element.elementor-widget-mobile__width-initial{max-width:100%}}.elementor-element.elementor-absolute,.elementor-element.elementor-fixed{z-index:1}.elementor-element{--flex-direction:initial;--flex-wrap:initial;--justify-content:initial;--align-items:initial;--align-content:initial;--gap:initial;--flex-basis:initial;--flex-grow:initial;--flex-shrink:initial;--order:initial;--align-self:initial;align-self:var(--align-self);flex-basis:var(--flex-basis);flex-grow:var(--flex-grow);flex-shrink:var(--flex-shrink);order:var(--order)}.elementor-element:where(.e-con-full,.elementor-widget){align-content:var(--align-content);align-items:var(--align-items);flex-direction:var(--flex-direction);flex-wrap:var(--flex-wrap);gap:var(--row-gap) var(--column-gap);justify-content:var(--justify-content)}.elementor-invisible{visibility:hidden}.elementor-custom-embed-play{inset-block-start:50%;inset-inline-start:50%;position:absolute;transform:translate(calc(-50% * var(--direction-multiplier)),-50%)}.elementor-custom-embed-play i{color:#fff;font-size:100px;text-shadow:1px 0 6px rgba(0,0,0,.3)}.elementor-custom-embed-play svg{fill:#fff;filter:drop-shadow(1px 0 6px rgba(0,0,0,.3));height:100px;width:100px}.elementor-custom-embed-play i,.elementor-custom-embed-play svg{opacity:.8;transition:all .5s}.elementor-custom-embed-play.elementor-playing i{font-family:eicons}.elementor-custom-embed-play.elementor-playing i:before{content:"\e8fb"}.elementor-custom-embed-play.elementor-playing i,.elementor-custom-embed-play.elementor-playing svg{animation:eicon-spin 2s linear infinite}.elementor-tag{display:inline-flex}.elementor-ken-burns{transition-duration:10s;transition-property:transform;transition-timing-function:linear}.elementor-ken-burns--out{transform:scale(1.3)}.elementor-ken-burns--active{transition-duration:20s}.elementor-ken-burns--active.elementor-ken-burns--out{transform:scale(1)}.elementor-ken-burns--active.elementor-ken-burns--in{transform:scale(1.3)}.elementor-align-center{text-align:center}.elementor-align-right{text-align:right}.elementor-align-left{text-align:left}.elementor-align-center .elementor-button,.elementor-align-left .elementor-button,.elementor-align-right .elementor-button{width:auto}.elementor-align-justify .elementor-button{width:100%}@media (min-width:-1){.elementor-widescreen-align-center{text-align:center}.elementor-widescreen-align-right{text-align:right}.elementor-widescreen-align-left{text-align:left}.elementor-widescreen-align-center .elementor-button,.elementor-widescreen-align-left .elementor-button,.elementor-widescreen-align-right .elementor-button{width:auto}.elementor-widescreen-align-justify .elementor-button{width:100%}}@media (max-width:-1){.elementor-laptop-align-center{text-align:center}.elementor-laptop-align-right{text-align:right}.elementor-laptop-align-left{text-align:left}.elementor-laptop-align-center .elementor-button,.elementor-laptop-align-left .elementor-button,.elementor-laptop-align-right .elementor-button{width:auto}.elementor-laptop-align-justify .elementor-button{width:100%}.elementor-tablet_extra-align-center{text-align:center}.elementor-tablet_extra-align-right{text-align:right}.elementor-tablet_extra-align-left{text-align:left}.elementor-tablet_extra-align-center .elementor-button,.elementor-tablet_extra-align-left .elementor-button,.elementor-tablet_extra-align-right .elementor-button{width:auto}.elementor-tablet_extra-align-justify .elementor-button{width:100%}}@media (max-width:1024px){.elementor-tablet-align-center{text-align:center}.elementor-tablet-align-right{text-align:right}.elementor-tablet-align-left{text-align:left}.elementor-tablet-align-center .elementor-button,.elementor-tablet-align-left .elementor-button,.elementor-tablet-align-right .elementor-button{width:auto}.elementor-tablet-align-justify .elementor-button{width:100%}}@media (max-width:-1){.elementor-mobile_extra-align-center{text-align:center}.elementor-mobile_extra-align-right{text-align:right}.elementor-mobile_extra-align-left{text-align:left}.elementor-mobile_extra-align-center .elementor-button,.elementor-mobile_extra-align-left .elementor-button,.elementor-mobile_extra-align-right .elementor-button{width:auto}.elementor-mobile_extra-align-justify .elementor-button{width:100%}}@media (max-width:767px){.elementor-mobile-align-center{text-align:center}.elementor-mobile-align-right{text-align:right}.elementor-mobile-align-left{text-align:left}.elementor-mobile-align-center .elementor-button,.elementor-mobile-align-left .elementor-button,.elementor-mobile-align-right .elementor-button{width:auto}.elementor-mobile-align-justify .elementor-button{width:100%}}:root{--page-title-display:block}.elementor-page-title,h1.entry-title{display:var(--page-title-display)}@keyframes eicon-spin{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.eicon-animation-spin{animation:eicon-spin 2s linear infinite}.elementor-section{position:relative}.elementor-section .elementor-container{display:flex;margin-inline:auto;position:relative}@media (max-width:1024px){.elementor-section .elementor-container{flex-wrap:wrap}}.elementor-section.elementor-section-boxed>.elementor-container{max-width:1140px}.elementor-section.elementor-section-stretched{position:relative;width:100%}.elementor-section.elementor-section-items-top>.elementor-container{align-items:flex-start}.elementor-section.elementor-section-items-middle>.elementor-container{align-items:center}.elementor-section.elementor-section-items-bottom>.elementor-container{align-items:flex-end}@media (min-width:768px){.elementor-section.elementor-section-height-full{height:100vh}.elementor-section.elementor-section-height-full>.elementor-container{height:100%}}.elementor-bc-flex-widget .elementor-section-content-top>.elementor-container>.elementor-column>.elementor-widget-wrap{align-items:flex-start}.elementor-bc-flex-widget .elementor-section-content-middle>.elementor-container>.elementor-column>.elementor-widget-wrap{align-items:center}.elementor-bc-flex-widget .elementor-section-content-bottom>.elementor-container>.elementor-column>.elementor-widget-wrap{align-items:flex-end}.elementor-widget-wrap{align-content:flex-start;flex-wrap:wrap;position:relative;width:100%}.elementor:not(.elementor-bc-flex-widget) .elementor-widget-wrap{display:flex}.elementor-widget-wrap>.elementor-element{width:100%}.elementor-widget-wrap.e-swiper-container{width:calc(100% - (var(--e-column-margin-left, 0px) + var(--e-column-margin-right, 0px)))}.elementor-widget{position:relative}.elementor-widget:not(:last-child){margin-block-end:var(--kit-widget-spacing,20px)}.elementor-widget:not(:last-child).elementor-absolute,.elementor-widget:not(:last-child).elementor-widget__width-auto,.elementor-widget:not(:last-child).elementor-widget__width-initial{margin-block-end:0}.elementor-column{display:flex;min-height:1px;position:relative}.elementor-column-gap-narrow>.elementor-column>.elementor-element-populated{padding:5px}.elementor-column-gap-default>.elementor-column>.elementor-element-populated{padding:10px}.elementor-column-gap-extended>.elementor-column>.elementor-element-populated{padding:15px}.elementor-column-gap-wide>.elementor-column>.elementor-element-populated{padding:20px}.elementor-column-gap-wider>.elementor-column>.elementor-element-populated{padding:30px}.elementor-inner-section .elementor-column-gap-no .elementor-element-populated{padding:0}@media (min-width:768px){.elementor-column.elementor-col-10,.elementor-column[data-col="10"]{width:10%}.elementor-column.elementor-col-11,.elementor-column[data-col="11"]{width:11.111%}.elementor-column.elementor-col-12,.elementor-column[data-col="12"]{width:12.5%}.elementor-column.elementor-col-14,.elementor-column[data-col="14"]{width:14.285%}.elementor-column.elementor-col-16,.elementor-column[data-col="16"]{width:16.666%}.elementor-column.elementor-col-20,.elementor-column[data-col="20"]{width:20%}.elementor-column.elementor-col-25,.elementor-column[data-col="25"]{width:25%}.elementor-column.elementor-col-30,.elementor-column[data-col="30"]{width:30%}.elementor-column.elementor-col-33,.elementor-column[data-col="33"]{width:33.333%}.elementor-column.elementor-col-40,.elementor-column[data-col="40"]{width:40%}.elementor-column.elementor-col-50,.elementor-column[data-col="50"]{width:50%}.elementor-column.elementor-col-60,.elementor-column[data-col="60"]{width:60%}.elementor-column.elementor-col-66,.elementor-column[data-col="66"]{width:66.666%}.elementor-column.elementor-col-70,.elementor-column[data-col="70"]{width:70%}.elementor-column.elementor-col-75,.elementor-column[data-col="75"]{width:75%}.elementor-column.elementor-col-80,.elementor-column[data-col="80"]{width:80%}.elementor-column.elementor-col-83,.elementor-column[data-col="83"]{width:83.333%}.elementor-column.elementor-col-90,.elementor-column[data-col="90"]{width:90%}.elementor-column.elementor-col-100,.elementor-column[data-col="100"]{width:100%}}@media (max-width:479px){.elementor-column.elementor-xs-10{width:10%}.elementor-column.elementor-xs-11{width:11.111%}.elementor-column.elementor-xs-12{width:12.5%}.elementor-column.elementor-xs-14{width:14.285%}.elementor-column.elementor-xs-16{width:16.666%}.elementor-column.elementor-xs-20{width:20%}.elementor-column.elementor-xs-25{width:25%}.elementor-column.elementor-xs-30{width:30%}.elementor-column.elementor-xs-33{width:33.333%}.elementor-column.elementor-xs-40{width:40%}.elementor-column.elementor-xs-50{width:50%}.elementor-column.elementor-xs-60{width:60%}.elementor-column.elementor-xs-66{width:66.666%}.elementor-column.elementor-xs-70{width:70%}.elementor-column.elementor-xs-75{width:75%}.elementor-column.elementor-xs-80{width:80%}.elementor-column.elementor-xs-83{width:83.333%}.elementor-column.elementor-xs-90{width:90%}.elementor-column.elementor-xs-100{width:100%}}@media (max-width:767px){.elementor-column.elementor-sm-10{width:10%}.elementor-column.elementor-sm-11{width:11.111%}.elementor-column.elementor-sm-12{width:12.5%}.elementor-column.elementor-sm-14{width:14.285%}.elementor-column.elementor-sm-16{width:16.666%}.elementor-column.elementor-sm-20{width:20%}.elementor-column.elementor-sm-25{width:25%}.elementor-column.elementor-sm-30{width:30%}.elementor-column.elementor-sm-33{width:33.333%}.elementor-column.elementor-sm-40{width:40%}.elementor-column.elementor-sm-50{width:50%}.elementor-column.elementor-sm-60{width:60%}.elementor-column.elementor-sm-66{width:66.666%}.elementor-column.elementor-sm-70{width:70%}.elementor-column.elementor-sm-75{width:75%}.elementor-column.elementor-sm-80{width:80%}.elementor-column.elementor-sm-83{width:83.333%}.elementor-column.elementor-sm-90{width:90%}.elementor-column.elementor-sm-100{width:100%}}@media (min-width:768px) and (max-width:1024px){.elementor-column.elementor-md-10{width:10%}.elementor-column.elementor-md-11{width:11.111%}.elementor-column.elementor-md-12{width:12.5%}.elementor-column.elementor-md-14{width:14.285%}.elementor-column.elementor-md-16{width:16.666%}.elementor-column.elementor-md-20{width:20%}.elementor-column.elementor-md-25{width:25%}.elementor-column.elementor-md-30{width:30%}.elementor-column.elementor-md-33{width:33.333%}.elementor-column.elementor-md-40{width:40%}.elementor-column.elementor-md-50{width:50%}.elementor-column.elementor-md-60{width:60%}.elementor-column.elementor-md-66{width:66.666%}.elementor-column.elementor-md-70{width:70%}.elementor-column.elementor-md-75{width:75%}.elementor-column.elementor-md-80{width:80%}.elementor-column.elementor-md-83{width:83.333%}.elementor-column.elementor-md-90{width:90%}.elementor-column.elementor-md-100{width:100%}}@media (min-width:-1){.elementor-reverse-widescreen>.elementor-container>:first-child{order:10}.elementor-reverse-widescreen>.elementor-container>:nth-child(2){order:9}.elementor-reverse-widescreen>.elementor-container>:nth-child(3){order:8}.elementor-reverse-widescreen>.elementor-container>:nth-child(4){order:7}.elementor-reverse-widescreen>.elementor-container>:nth-child(5){order:6}.elementor-reverse-widescreen>.elementor-container>:nth-child(6){order:5}.elementor-reverse-widescreen>.elementor-container>:nth-child(7){order:4}.elementor-reverse-widescreen>.elementor-container>:nth-child(8){order:3}.elementor-reverse-widescreen>.elementor-container>:nth-child(9){order:2}.elementor-reverse-widescreen>.elementor-container>:nth-child(10){order:1}}@media (min-width:1025px) and (max-width:-1){.elementor-reverse-laptop>.elementor-container>:first-child{order:10}.elementor-reverse-laptop>.elementor-container>:nth-child(2){order:9}.elementor-reverse-laptop>.elementor-container>:nth-child(3){order:8}.elementor-reverse-laptop>.elementor-container>:nth-child(4){order:7}.elementor-reverse-laptop>.elementor-container>:nth-child(5){order:6}.elementor-reverse-laptop>.elementor-container>:nth-child(6){order:5}.elementor-reverse-laptop>.elementor-container>:nth-child(7){order:4}.elementor-reverse-laptop>.elementor-container>:nth-child(8){order:3}.elementor-reverse-laptop>.elementor-container>:nth-child(9){order:2}.elementor-reverse-laptop>.elementor-container>:nth-child(10){order:1}}@media (min-width:-1) and (max-width:-1){.elementor-reverse-laptop>.elementor-container>:first-child{order:10}.elementor-reverse-laptop>.elementor-container>:nth-child(2){order:9}.elementor-reverse-laptop>.elementor-container>:nth-child(3){order:8}.elementor-reverse-laptop>.elementor-container>:nth-child(4){order:7}.elementor-reverse-laptop>.elementor-container>:nth-child(5){order:6}.elementor-reverse-laptop>.elementor-container>:nth-child(6){order:5}.elementor-reverse-laptop>.elementor-container>:nth-child(7){order:4}.elementor-reverse-laptop>.elementor-container>:nth-child(8){order:3}.elementor-reverse-laptop>.elementor-container>:nth-child(9){order:2}.elementor-reverse-laptop>.elementor-container>:nth-child(10){order:1}}@media (min-width:1025px) and (max-width:-1){.elementor-reverse-laptop>.elementor-container>:first-child,.elementor-reverse-laptop>.elementor-container>:nth-child(10),.elementor-reverse-laptop>.elementor-container>:nth-child(2),.elementor-reverse-laptop>.elementor-container>:nth-child(3),.elementor-reverse-laptop>.elementor-container>:nth-child(4),.elementor-reverse-laptop>.elementor-container>:nth-child(5),.elementor-reverse-laptop>.elementor-container>:nth-child(6),.elementor-reverse-laptop>.elementor-container>:nth-child(7),.elementor-reverse-laptop>.elementor-container>:nth-child(8),.elementor-reverse-laptop>.elementor-container>:nth-child(9){order:0}.elementor-reverse-tablet_extra>.elementor-container>:first-child{order:10}.elementor-reverse-tablet_extra>.elementor-container>:nth-child(2){order:9}.elementor-reverse-tablet_extra>.elementor-container>:nth-child(3){order:8}.elementor-reverse-tablet_extra>.elementor-container>:nth-child(4){order:7}.elementor-reverse-tablet_extra>.elementor-container>:nth-child(5){order:6}.elementor-reverse-tablet_extra>.elementor-container>:nth-child(6){order:5}.elementor-reverse-tablet_extra>.elementor-container>:nth-child(7){order:4}.elementor-reverse-tablet_extra>.elementor-container>:nth-child(8){order:3}.elementor-reverse-tablet_extra>.elementor-container>:nth-child(9){order:2}.elementor-reverse-tablet_extra>.elementor-container>:nth-child(10){order:1}}@media (min-width:768px) and (max-width:1024px){.elementor-reverse-tablet>.elementor-container>:first-child{order:10}.elementor-reverse-tablet>.elementor-container>:nth-child(2){order:9}.elementor-reverse-tablet>.elementor-container>:nth-child(3){order:8}.elementor-reverse-tablet>.elementor-container>:nth-child(4){order:7}.elementor-reverse-tablet>.elementor-container>:nth-child(5){order:6}.elementor-reverse-tablet>.elementor-container>:nth-child(6){order:5}.elementor-reverse-tablet>.elementor-container>:nth-child(7){order:4}.elementor-reverse-tablet>.elementor-container>:nth-child(8){order:3}.elementor-reverse-tablet>.elementor-container>:nth-child(9){order:2}.elementor-reverse-tablet>.elementor-container>:nth-child(10){order:1}}@media (min-width:-1) and (max-width:1024px){.elementor-reverse-tablet>.elementor-container>:first-child{order:10}.elementor-reverse-tablet>.elementor-container>:nth-child(2){order:9}.elementor-reverse-tablet>.elementor-container>:nth-child(3){order:8}.elementor-reverse-tablet>.elementor-container>:nth-child(4){order:7}.elementor-reverse-tablet>.elementor-container>:nth-child(5){order:6}.elementor-reverse-tablet>.elementor-container>:nth-child(6){order:5}.elementor-reverse-tablet>.elementor-container>:nth-child(7){order:4}.elementor-reverse-tablet>.elementor-container>:nth-child(8){order:3}.elementor-reverse-tablet>.elementor-container>:nth-child(9){order:2}.elementor-reverse-tablet>.elementor-container>:nth-child(10){order:1}}@media (min-width:768px) and (max-width:-1){.elementor-reverse-tablet>.elementor-container>:first-child,.elementor-reverse-tablet>.elementor-container>:nth-child(10),.elementor-reverse-tablet>.elementor-container>:nth-child(2),.elementor-reverse-tablet>.elementor-container>:nth-child(3),.elementor-reverse-tablet>.elementor-container>:nth-child(4),.elementor-reverse-tablet>.elementor-container>:nth-child(5),.elementor-reverse-tablet>.elementor-container>:nth-child(6),.elementor-reverse-tablet>.elementor-container>:nth-child(7),.elementor-reverse-tablet>.elementor-container>:nth-child(8),.elementor-reverse-tablet>.elementor-container>:nth-child(9){order:0}.elementor-reverse-mobile_extra>.elementor-container>:first-child{order:10}.elementor-reverse-mobile_extra>.elementor-container>:nth-child(2){order:9}.elementor-reverse-mobile_extra>.elementor-container>:nth-child(3){order:8}.elementor-reverse-mobile_extra>.elementor-container>:nth-child(4){order:7}.elementor-reverse-mobile_extra>.elementor-container>:nth-child(5){order:6}.elementor-reverse-mobile_extra>.elementor-container>:nth-child(6){order:5}.elementor-reverse-mobile_extra>.elementor-container>:nth-child(7){order:4}.elementor-reverse-mobile_extra>.elementor-container>:nth-child(8){order:3}.elementor-reverse-mobile_extra>.elementor-container>:nth-child(9){order:2}.elementor-reverse-mobile_extra>.elementor-container>:nth-child(10){order:1}}@media (max-width:767px){.elementor-reverse-mobile>.elementor-container>:first-child{order:10}.elementor-reverse-mobile>.elementor-container>:nth-child(2){order:9}.elementor-reverse-mobile>.elementor-container>:nth-child(3){order:8}.elementor-reverse-mobile>.elementor-container>:nth-child(4){order:7}.elementor-reverse-mobile>.elementor-container>:nth-child(5){order:6}.elementor-reverse-mobile>.elementor-container>:nth-child(6){order:5}.elementor-reverse-mobile>.elementor-container>:nth-child(7){order:4}.elementor-reverse-mobile>.elementor-container>:nth-child(8){order:3}.elementor-reverse-mobile>.elementor-container>:nth-child(9){order:2}.elementor-reverse-mobile>.elementor-container>:nth-child(10){order:1}.elementor-column{width:100%}}.elementor-grid{display:grid;grid-column-gap:var(--grid-column-gap);grid-row-gap:var(--grid-row-gap)}.elementor-grid .elementor-grid-item{min-width:0}.elementor-grid-0 .elementor-grid{display:inline-block;margin-block-end:calc(-1 * var(--grid-row-gap));width:100%;word-spacing:var(--grid-column-gap)}.elementor-grid-0 .elementor-grid .elementor-grid-item{display:inline-block;margin-block-end:var(--grid-row-gap);word-break:break-word}.elementor-grid-1 .elementor-grid{grid-template-columns:repeat(1,1fr)}.elementor-grid-2 .elementor-grid{grid-template-columns:repeat(2,1fr)}.elementor-grid-3 .elementor-grid{grid-template-columns:repeat(3,1fr)}.elementor-grid-4 .elementor-grid{grid-template-columns:repeat(4,1fr)}.elementor-grid-5 .elementor-grid{grid-template-columns:repeat(5,1fr)}.elementor-grid-6 .elementor-grid{grid-template-columns:repeat(6,1fr)}.elementor-grid-7 .elementor-grid{grid-template-columns:repeat(7,1fr)}.elementor-grid-8 .elementor-grid{grid-template-columns:repeat(8,1fr)}.elementor-grid-9 .elementor-grid{grid-template-columns:repeat(9,1fr)}.elementor-grid-10 .elementor-grid{grid-template-columns:repeat(10,1fr)}.elementor-grid-11 .elementor-grid{grid-template-columns:repeat(11,1fr)}.elementor-grid-12 .elementor-grid{grid-template-columns:repeat(12,1fr)}@media (min-width:-1){.elementor-grid-widescreen-0 .elementor-grid{display:inline-block;margin-block-end:calc(-1 * var(--grid-row-gap));width:100%;word-spacing:var(--grid-column-gap)}.elementor-grid-widescreen-0 .elementor-grid .elementor-grid-item{display:inline-block;margin-block-end:var(--grid-row-gap);word-break:break-word}.elementor-grid-widescreen-1 .elementor-grid{grid-template-columns:repeat(1,1fr)}.elementor-grid-widescreen-2 .elementor-grid{grid-template-columns:repeat(2,1fr)}.elementor-grid-widescreen-3 .elementor-grid{grid-template-columns:repeat(3,1fr)}.elementor-grid-widescreen-4 .elementor-grid{grid-template-columns:repeat(4,1fr)}.elementor-grid-widescreen-5 .elementor-grid{grid-template-columns:repeat(5,1fr)}.elementor-grid-widescreen-6 .elementor-grid{grid-template-columns:repeat(6,1fr)}.elementor-grid-widescreen-7 .elementor-grid{grid-template-columns:repeat(7,1fr)}.elementor-grid-widescreen-8 .elementor-grid{grid-template-columns:repeat(8,1fr)}.elementor-grid-widescreen-9 .elementor-grid{grid-template-columns:repeat(9,1fr)}.elementor-grid-widescreen-10 .elementor-grid{grid-template-columns:repeat(10,1fr)}.elementor-grid-widescreen-11 .elementor-grid{grid-template-columns:repeat(11,1fr)}.elementor-grid-widescreen-12 .elementor-grid{grid-template-columns:repeat(12,1fr)}}@media (max-width:-1){.elementor-grid-laptop-0 .elementor-grid{display:inline-block;margin-block-end:calc(-1 * var(--grid-row-gap));width:100%;word-spacing:var(--grid-column-gap)}.elementor-grid-laptop-0 .elementor-grid .elementor-grid-item{display:inline-block;margin-block-end:var(--grid-row-gap);word-break:break-word}.elementor-grid-laptop-1 .elementor-grid{grid-template-columns:repeat(1,1fr)}.elementor-grid-laptop-2 .elementor-grid{grid-template-columns:repeat(2,1fr)}.elementor-grid-laptop-3 .elementor-grid{grid-template-columns:repeat(3,1fr)}.elementor-grid-laptop-4 .elementor-grid{grid-template-columns:repeat(4,1fr)}.elementor-grid-laptop-5 .elementor-grid{grid-template-columns:repeat(5,1fr)}.elementor-grid-laptop-6 .elementor-grid{grid-template-columns:repeat(6,1fr)}.elementor-grid-laptop-7 .elementor-grid{grid-template-columns:repeat(7,1fr)}.elementor-grid-laptop-8 .elementor-grid{grid-template-columns:repeat(8,1fr)}.elementor-grid-laptop-9 .elementor-grid{grid-template-columns:repeat(9,1fr)}.elementor-grid-laptop-10 .elementor-grid{grid-template-columns:repeat(10,1fr)}.elementor-grid-laptop-11 .elementor-grid{grid-template-columns:repeat(11,1fr)}.elementor-grid-laptop-12 .elementor-grid{grid-template-columns:repeat(12,1fr)}.elementor-grid-tablet_extra-0 .elementor-grid{display:inline-block;margin-block-end:calc(-1 * var(--grid-row-gap));width:100%;word-spacing:var(--grid-column-gap)}.elementor-grid-tablet_extra-0 .elementor-grid .elementor-grid-item{display:inline-block;margin-block-end:var(--grid-row-gap);word-break:break-word}.elementor-grid-tablet_extra-1 .elementor-grid{grid-template-columns:repeat(1,1fr)}.elementor-grid-tablet_extra-2 .elementor-grid{grid-template-columns:repeat(2,1fr)}.elementor-grid-tablet_extra-3 .elementor-grid{grid-template-columns:repeat(3,1fr)}.elementor-grid-tablet_extra-4 .elementor-grid{grid-template-columns:repeat(4,1fr)}.elementor-grid-tablet_extra-5 .elementor-grid{grid-template-columns:repeat(5,1fr)}.elementor-grid-tablet_extra-6 .elementor-grid{grid-template-columns:repeat(6,1fr)}.elementor-grid-tablet_extra-7 .elementor-grid{grid-template-columns:repeat(7,1fr)}.elementor-grid-tablet_extra-8 .elementor-grid{grid-template-columns:repeat(8,1fr)}.elementor-grid-tablet_extra-9 .elementor-grid{grid-template-columns:repeat(9,1fr)}.elementor-grid-tablet_extra-10 .elementor-grid{grid-template-columns:repeat(10,1fr)}.elementor-grid-tablet_extra-11 .elementor-grid{grid-template-columns:repeat(11,1fr)}.elementor-grid-tablet_extra-12 .elementor-grid{grid-template-columns:repeat(12,1fr)}}@media (max-width:1024px){.elementor-grid-tablet-0 .elementor-grid{display:inline-block;margin-block-end:calc(-1 * var(--grid-row-gap));width:100%;word-spacing:var(--grid-column-gap)}.elementor-grid-tablet-0 .elementor-grid .elementor-grid-item{display:inline-block;margin-block-end:var(--grid-row-gap);word-break:break-word}.elementor-grid-tablet-1 .elementor-grid{grid-template-columns:repeat(1,1fr)}.elementor-grid-tablet-2 .elementor-grid{grid-template-columns:repeat(2,1fr)}.elementor-grid-tablet-3 .elementor-grid{grid-template-columns:repeat(3,1fr)}.elementor-grid-tablet-4 .elementor-grid{grid-template-columns:repeat(4,1fr)}.elementor-grid-tablet-5 .elementor-grid{grid-template-columns:repeat(5,1fr)}.elementor-grid-tablet-6 .elementor-grid{grid-template-columns:repeat(6,1fr)}.elementor-grid-tablet-7 .elementor-grid{grid-template-columns:repeat(7,1fr)}.elementor-grid-tablet-8 .elementor-grid{grid-template-columns:repeat(8,1fr)}.elementor-grid-tablet-9 .elementor-grid{grid-template-columns:repeat(9,1fr)}.elementor-grid-tablet-10 .elementor-grid{grid-template-columns:repeat(10,1fr)}.elementor-grid-tablet-11 .elementor-grid{grid-template-columns:repeat(11,1fr)}.elementor-grid-tablet-12 .elementor-grid{grid-template-columns:repeat(12,1fr)}}@media (max-width:-1){.elementor-grid-mobile_extra-0 .elementor-grid{display:inline-block;margin-block-end:calc(-1 * var(--grid-row-gap));width:100%;word-spacing:var(--grid-column-gap)}.elementor-grid-mobile_extra-0 .elementor-grid .elementor-grid-item{display:inline-block;margin-block-end:var(--grid-row-gap);word-break:break-word}.elementor-grid-mobile_extra-1 .elementor-grid{grid-template-columns:repeat(1,1fr)}.elementor-grid-mobile_extra-2 .elementor-grid{grid-template-columns:repeat(2,1fr)}.elementor-grid-mobile_extra-3 .elementor-grid{grid-template-columns:repeat(3,1fr)}.elementor-grid-mobile_extra-4 .elementor-grid{grid-template-columns:repeat(4,1fr)}.elementor-grid-mobile_extra-5 .elementor-grid{grid-template-columns:repeat(5,1fr)}.elementor-grid-mobile_extra-6 .elementor-grid{grid-template-columns:repeat(6,1fr)}.elementor-grid-mobile_extra-7 .elementor-grid{grid-template-columns:repeat(7,1fr)}.elementor-grid-mobile_extra-8 .elementor-grid{grid-template-columns:repeat(8,1fr)}.elementor-grid-mobile_extra-9 .elementor-grid{grid-template-columns:repeat(9,1fr)}.elementor-grid-mobile_extra-10 .elementor-grid{grid-template-columns:repeat(10,1fr)}.elementor-grid-mobile_extra-11 .elementor-grid{grid-template-columns:repeat(11,1fr)}.elementor-grid-mobile_extra-12 .elementor-grid{grid-template-columns:repeat(12,1fr)}}@media (max-width:767px){.elementor-grid-mobile-0 .elementor-grid{display:inline-block;margin-block-end:calc(-1 * var(--grid-row-gap));width:100%;word-spacing:var(--grid-column-gap)}.elementor-grid-mobile-0 .elementor-grid .elementor-grid-item{display:inline-block;margin-block-end:var(--grid-row-gap);word-break:break-word}.elementor-grid-mobile-1 .elementor-grid{grid-template-columns:repeat(1,1fr)}.elementor-grid-mobile-2 .elementor-grid{grid-template-columns:repeat(2,1fr)}.elementor-grid-mobile-3 .elementor-grid{grid-template-columns:repeat(3,1fr)}.elementor-grid-mobile-4 .elementor-grid{grid-template-columns:repeat(4,1fr)}.elementor-grid-mobile-5 .elementor-grid{grid-template-columns:repeat(5,1fr)}.elementor-grid-mobile-6 .elementor-grid{grid-template-columns:repeat(6,1fr)}.elementor-grid-mobile-7 .elementor-grid{grid-template-columns:repeat(7,1fr)}.elementor-grid-mobile-8 .elementor-grid{grid-template-columns:repeat(8,1fr)}.elementor-grid-mobile-9 .elementor-grid{grid-template-columns:repeat(9,1fr)}.elementor-grid-mobile-10 .elementor-grid{grid-template-columns:repeat(10,1fr)}.elementor-grid-mobile-11 .elementor-grid{grid-template-columns:repeat(11,1fr)}.elementor-grid-mobile-12 .elementor-grid{grid-template-columns:repeat(12,1fr)}}@media (min-width:1025px){#elementor-device-mode:after{content:"desktop"}}@media (min-width:-1){#elementor-device-mode:after{content:"widescreen"}}@media (max-width:-1){#elementor-device-mode:after{content:"laptop";content:"tablet_extra"}}@media (max-width:1024px){#elementor-device-mode:after{content:"tablet"}}@media (max-width:-1){#elementor-device-mode:after{content:"mobile_extra"}}@media (max-width:767px){#elementor-device-mode:after{content:"mobile"}}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}.e-con{--border-radius:0;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--border-style:initial;--border-color:initial;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--content-width:min(100%,var(--container-max-width,1140px));--width:100%;--min-height:initial;--height:auto;--text-align:initial;--margin-top:0px;--margin-right:0px;--margin-bottom:0px;--margin-left:0px;--padding-top:var(--container-default-padding-top,10px);--padding-right:var(--container-default-padding-right,10px);--padding-bottom:var(--container-default-padding-bottom,10px);--padding-left:var(--container-default-padding-left,10px);--position:relative;--z-index:revert;--overflow:visible;--gap:var(--widgets-spacing,20px);--row-gap:var(--widgets-spacing-row,20px);--column-gap:var(--widgets-spacing-column,20px);--overlay-mix-blend-mode:initial;--overlay-opacity:1;--overlay-transition:0.3s;--e-con-grid-template-columns:repeat(3,1fr);--e-con-grid-template-rows:repeat(2,1fr);border-radius:var(--border-radius);height:var(--height);min-height:var(--min-height);min-width:0;overflow:var(--overflow);position:var(--position);width:var(--width);z-index:var(--z-index);--flex-wrap-mobile:wrap}.e-con:where(:not(.e-div-block-base)){transition:background var(--background-transition,.3s),border var(--border-transition,.3s),box-shadow var(--border-transition,.3s),transform var(--e-con-transform-transition-duration,.4s)}.e-con{--margin-block-start:var(--margin-top);--margin-block-end:var(--margin-bottom);--margin-inline-start:var(--margin-left);--margin-inline-end:var(--margin-right);--padding-inline-start:var(--padding-left);--padding-inline-end:var(--padding-right);--padding-block-start:var(--padding-top);--padding-block-end:var(--padding-bottom);--border-block-start-width:var(--border-top-width);--border-block-end-width:var(--border-bottom-width);--border-inline-start-width:var(--border-left-width);--border-inline-end-width:var(--border-right-width)}body.rtl .e-con{--padding-inline-start:var(--padding-right);--padding-inline-end:var(--padding-left);--margin-inline-start:var(--margin-right);--margin-inline-end:var(--margin-left);--border-inline-start-width:var(--border-right-width);--border-inline-end-width:var(--border-left-width)}.e-con{margin-block-end:var(--margin-block-end);margin-block-start:var(--margin-block-start);margin-inline-end:var(--margin-inline-end);margin-inline-start:var(--margin-inline-start);padding-inline-end:var(--padding-inline-end);padding-inline-start:var(--padding-inline-start)}.e-con.e-flex{--flex-direction:column;--flex-basis:auto;--flex-grow:0;--flex-shrink:1;flex:var(--flex-grow) var(--flex-shrink) var(--flex-basis)}.e-con-full,.e-con>.e-con-inner{padding-block-end:var(--padding-block-end);padding-block-start:var(--padding-block-start);text-align:var(--text-align)}.e-con-full.e-flex,.e-con.e-flex>.e-con-inner{flex-direction:var(--flex-direction)}.e-con,.e-con>.e-con-inner{display:var(--display)}.e-con.e-grid{--grid-justify-content:start;--grid-align-content:start;--grid-auto-flow:row}.e-con.e-grid,.e-con.e-grid>.e-con-inner{align-content:var(--grid-align-content);align-items:var(--align-items);grid-auto-flow:var(--grid-auto-flow);grid-template-columns:var(--e-con-grid-template-columns);grid-template-rows:var(--e-con-grid-template-rows);justify-content:var(--grid-justify-content);justify-items:var(--justify-items)}.e-con-boxed.e-flex{align-content:normal;align-items:normal;flex-direction:column;flex-wrap:nowrap;justify-content:normal}.e-con-boxed.e-grid{grid-template-columns:1fr;grid-template-rows:1fr;justify-items:legacy}.e-con-boxed{gap:initial;text-align:initial}.e-con.e-flex>.e-con-inner{align-content:var(--align-content);align-items:var(--align-items);align-self:auto;flex-basis:auto;flex-grow:1;flex-shrink:1;flex-wrap:var(--flex-wrap);justify-content:var(--justify-content)}.e-con.e-grid>.e-con-inner{align-items:var(--align-items);justify-items:var(--justify-items)}.e-con>.e-con-inner{gap:var(--row-gap) var(--column-gap);height:100%;margin:0 auto;max-width:var(--content-width);padding-inline-end:0;padding-inline-start:0;width:100%}:is(.elementor-section-wrap,[data-elementor-id])>.e-con{--margin-left:auto;--margin-right:auto;max-width:min(100%,var(--width))}:is([data-widget_type="e-component.default"],[data-widget_type="e-component.default"]>.elementor-section-wrap)>.e-con{--margin-right:0px;--margin-left:0px}.e-con .elementor-widget.elementor-widget{margin-block-end:0}.e-con:before,.e-con>.elementor-background-slideshow:before,.e-con>.elementor-motion-effects-container>.elementor-motion-effects-layer:before,:is(.e-con,.e-con>.e-con-inner)>.elementor-background-video-container:before{border-block-end-width:var(--border-block-end-width);border-block-start-width:var(--border-block-start-width);border-color:var(--border-color);border-inline-end-width:var(--border-inline-end-width);border-inline-start-width:var(--border-inline-start-width);border-radius:var(--border-radius);border-style:var(--border-style);content:var(--background-overlay);display:block;height:max(100% + var(--border-top-width) + var(--border-bottom-width),100%);left:calc(0px - var(--border-left-width));mix-blend-mode:var(--overlay-mix-blend-mode);opacity:var(--overlay-opacity);position:absolute;top:calc(0px - var(--border-top-width));transition:var(--overlay-transition,.3s);width:max(100% + var(--border-left-width) + var(--border-right-width),100%)}.e-con:before{transition:background var(--overlay-transition,.3s),border-radius var(--border-transition,.3s),opacity var(--overlay-transition,.3s)}.e-con>.elementor-background-slideshow,:is(.e-con,.e-con>.e-con-inner)>.elementor-background-video-container{border-block-end-width:var(--border-block-end-width);border-block-start-width:var(--border-block-start-width);border-color:var(--border-color);border-inline-end-width:var(--border-inline-end-width);border-inline-start-width:var(--border-inline-start-width);border-radius:var(--border-radius);border-style:var(--border-style);height:max(100% + var(--border-top-width) + var(--border-bottom-width),100%);left:calc(0px - var(--border-left-width));top:calc(0px - var(--border-top-width));width:max(100% + var(--border-left-width) + var(--border-right-width),100%)}@media (max-width:767px){:is(.e-con,.e-con>.e-con-inner)>.elementor-background-video-container.elementor-hidden-mobile{display:none}}:is(.e-con,.e-con>.e-con-inner)>.elementor-background-video-container:before{z-index:1}:is(.e-con,.e-con>.e-con-inner)>.elementor-background-slideshow:before{z-index:2}.e-con .elementor-widget{min-width:0}.e-con .elementor-widget-empty,.e-con .elementor-widget-google_maps,.e-con .elementor-widget-video,.e-con .elementor-widget.e-widget-swiper{width:100%}.e-con>.e-con-inner>.elementor-widget>.elementor-widget-container,.e-con>.elementor-widget>.elementor-widget-container{height:100%}.e-con.e-con>.e-con-inner>.elementor-widget,.elementor.elementor .e-con>.elementor-widget{max-width:100%}.e-con .elementor-widget:not(:last-child){--kit-widget-spacing:0px}@media (max-width:767px){.e-con.e-flex{--width:100%;--flex-wrap:var(--flex-wrap-mobile)}.e-con.e-flex .elementor-widget-archive-posts{width:100%}}.elementor-form-fields-wrapper{display:flex;flex-wrap:wrap}.elementor-form-fields-wrapper.elementor-labels-above .elementor-field-group .elementor-field-subgroup,.elementor-form-fields-wrapper.elementor-labels-above .elementor-field-group>.elementor-select-wrapper,.elementor-form-fields-wrapper.elementor-labels-above .elementor-field-group>input,.elementor-form-fields-wrapper.elementor-labels-above .elementor-field-group>textarea{flex-basis:100%;max-width:100%}.elementor-form-fields-wrapper.elementor-labels-inline>.elementor-field-group .elementor-select-wrapper,.elementor-form-fields-wrapper.elementor-labels-inline>.elementor-field-group>input{flex-grow:1}.elementor-field-group{align-items:center;flex-wrap:wrap}.elementor-field-group.elementor-field-type-submit{align-items:flex-end}.elementor-field-group .elementor-field-textual{background-color:transparent;border:1px solid #69727d;color:#1f2124;flex-grow:1;max-width:100%;vertical-align:middle;width:100%}.elementor-field-group .elementor-field-textual:focus{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);outline:0}.elementor-field-group .elementor-field-textual::-moz-placeholder{color:inherit;font-family:inherit;opacity:.6}.elementor-field-group .elementor-field-textual::placeholder{color:inherit;font-family:inherit;opacity:.6}.elementor-field-group .elementor-select-wrapper{display:flex;position:relative;width:100%}.elementor-field-group .elementor-select-wrapper select{-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;flex-basis:100%;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;padding-inline-end:20px;text-transform:inherit}.elementor-field-group .elementor-select-wrapper:before{content:"\e92a";font-family:eicons;font-size:15px;inset-block-start:50%;inset-inline-end:10px;pointer-events:none;position:absolute;text-shadow:0 0 3px rgba(0,0,0,.3);transform:translateY(-50%)}.elementor-field-group.elementor-field-type-select-multiple .elementor-select-wrapper:before{content:""}.elementor-field-subgroup{display:flex;flex-wrap:wrap}.elementor-field-subgroup .elementor-field-option label{display:inline-block}.elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option{padding-inline-end:10px}.elementor-field-subgroup:not(.elementor-subgroup-inline) .elementor-field-option{flex-basis:100%}.elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option input,.elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option label,.elementor-field-type-checkbox .elementor-field-subgroup .elementor-field-option input,.elementor-field-type-checkbox .elementor-field-subgroup .elementor-field-option label,.elementor-field-type-radio .elementor-field-subgroup .elementor-field-option input,.elementor-field-type-radio .elementor-field-subgroup .elementor-field-option label{display:inline}.elementor-field-label{cursor:pointer}.elementor-mark-required .elementor-field-label:after{color:red;content:"*";padding-inline-start:.2em}.elementor-field-textual{border-radius:3px;font-size:15px;line-height:1.4;min-height:40px;padding:5px 14px}.elementor-field-textual.elementor-size-xs{border-radius:2px;font-size:13px;min-height:33px;padding:4px 12px}.elementor-field-textual.elementor-size-md{border-radius:4px;font-size:16px;min-height:47px;padding:6px 16px}.elementor-field-textual.elementor-size-lg{border-radius:5px;font-size:18px;min-height:59px;padding:7px 20px}.elementor-field-textual.elementor-size-xl{border-radius:6px;font-size:20px;min-height:72px;padding:8px 24px}.elementor-button-align-stretch .elementor-field-type-submit:not(.e-form__buttons__wrapper) .elementor-button{flex-basis:100%}.elementor-button-align-stretch .e-form__buttons__wrapper{flex-basis:50%;flex-grow:1}.elementor-button-align-stretch .e-form__buttons__wrapper__button{flex-basis:100%}.elementor-button-align-center .e-form__buttons,.elementor-button-align-center .elementor-field-type-submit{justify-content:center}.elementor-button-align-start .e-form__buttons,.elementor-button-align-start .elementor-field-type-submit{justify-content:flex-start}.elementor-button-align-end .e-form__buttons,.elementor-button-align-end .elementor-field-type-submit,[dir=rtl] .elementor-button-align-start .e-form__buttons,[dir=rtl] .elementor-button-align-start .elementor-field-type-submit{justify-content:flex-end}[dir=rtl] .elementor-button-align-end .e-form__buttons,[dir=rtl] .elementor-button-align-end .elementor-field-type-submit{justify-content:flex-start}.elementor-button-align-center .elementor-field-type-submit:not(.e-form__buttons__wrapper) .elementor-button,.elementor-button-align-end .elementor-field-type-submit:not(.e-form__buttons__wrapper) .elementor-button,.elementor-button-align-start .elementor-field-type-submit:not(.e-form__buttons__wrapper) .elementor-button{flex-basis:auto}.elementor-button-align-center .e-form__buttons__wrapper,.elementor-button-align-end .e-form__buttons__wrapper,.elementor-button-align-start .e-form__buttons__wrapper{flex-grow:0}.elementor-button-align-center .e-form__buttons__wrapper,.elementor-button-align-center .e-form__buttons__wrapper__button,.elementor-button-align-end .e-form__buttons__wrapper,.elementor-button-align-end .e-form__buttons__wrapper__button,.elementor-button-align-start .e-form__buttons__wrapper,.elementor-button-align-start .e-form__buttons__wrapper__button{flex-basis:auto}@media screen and (max-width:1024px){.elementor-tablet-button-align-stretch .elementor-field-type-submit:not(.e-form__buttons__wrapper) .elementor-button{flex-basis:100%}.elementor-tablet-button-align-stretch .e-form__buttons__wrapper{flex-basis:50%;flex-grow:1}.elementor-tablet-button-align-stretch .e-form__buttons__wrapper__button{flex-basis:100%}.elementor-tablet-button-align-center .e-form__buttons,.elementor-tablet-button-align-center .elementor-field-type-submit{justify-content:center}.elementor-tablet-button-align-start .e-form__buttons,.elementor-tablet-button-align-start .elementor-field-type-submit{justify-content:flex-start}.elementor-tablet-button-align-end .e-form__buttons,.elementor-tablet-button-align-end .elementor-field-type-submit,[dir=rtl] .elementor-tablet-button-align-start .e-form__buttons,[dir=rtl] .elementor-tablet-button-align-start .elementor-field-type-submit{justify-content:flex-end}[dir=rtl] .elementor-tablet-button-align-end .e-form__buttons,[dir=rtl] .elementor-tablet-button-align-end .elementor-field-type-submit{justify-content:flex-start}.elementor-tablet-button-align-center .elementor-field-type-submit:not(.e-form__buttons__wrapper) .elementor-button,.elementor-tablet-button-align-end .elementor-field-type-submit:not(.e-form__buttons__wrapper) .elementor-button,.elementor-tablet-button-align-start .elementor-field-type-submit:not(.e-form__buttons__wrapper) .elementor-button{flex-basis:auto}.elementor-tablet-button-align-center .e-form__buttons__wrapper,.elementor-tablet-button-align-end .e-form__buttons__wrapper,.elementor-tablet-button-align-start .e-form__buttons__wrapper{flex-grow:0}.elementor-tablet-button-align-center .e-form__buttons__wrapper,.elementor-tablet-button-align-center .e-form__buttons__wrapper__button,.elementor-tablet-button-align-end .e-form__buttons__wrapper,.elementor-tablet-button-align-end .e-form__buttons__wrapper__button,.elementor-tablet-button-align-start .e-form__buttons__wrapper,.elementor-tablet-button-align-start .e-form__buttons__wrapper__button{flex-basis:auto}}@media screen and (max-width:767px){.elementor-mobile-button-align-stretch .elementor-field-type-submit:not(.e-form__buttons__wrapper) .elementor-button{flex-basis:100%}.elementor-mobile-button-align-stretch .e-form__buttons__wrapper{flex-basis:50%;flex-grow:1}.elementor-mobile-button-align-stretch .e-form__buttons__wrapper__button{flex-basis:100%}.elementor-mobile-button-align-center .e-form__buttons,.elementor-mobile-button-align-center .elementor-field-type-submit{justify-content:center}.elementor-mobile-button-align-start .e-form__buttons,.elementor-mobile-button-align-start .elementor-field-type-submit{justify-content:flex-start}.elementor-mobile-button-align-end .e-form__buttons,.elementor-mobile-button-align-end .elementor-field-type-submit,[dir=rtl] .elementor-mobile-button-align-start .e-form__buttons,[dir=rtl] .elementor-mobile-button-align-start .elementor-field-type-submit{justify-content:flex-end}[dir=rtl] .elementor-mobile-button-align-end .e-form__buttons,[dir=rtl] .elementor-mobile-button-align-end .elementor-field-type-submit{justify-content:flex-start}.elementor-mobile-button-align-center .elementor-field-type-submit:not(.e-form__buttons__wrapper) .elementor-button,.elementor-mobile-button-align-end .elementor-field-type-submit:not(.e-form__buttons__wrapper) .elementor-button,.elementor-mobile-button-align-start .elementor-field-type-submit:not(.e-form__buttons__wrapper) .elementor-button{flex-basis:auto}.elementor-mobile-button-align-center .e-form__buttons__wrapper,.elementor-mobile-button-align-end .e-form__buttons__wrapper,.elementor-mobile-button-align-start .e-form__buttons__wrapper{flex-grow:0}.elementor-mobile-button-align-center .e-form__buttons__wrapper,.elementor-mobile-button-align-center .e-form__buttons__wrapper__button,.elementor-mobile-button-align-end .e-form__buttons__wrapper,.elementor-mobile-button-align-end .e-form__buttons__wrapper__button,.elementor-mobile-button-align-start .e-form__buttons__wrapper,.elementor-mobile-button-align-start .e-form__buttons__wrapper__button{flex-basis:auto}}.elementor-error .elementor-field{border-color:#d9534f}.elementor-error .help-inline{color:#d9534f;font-size:.9em}.elementor-message{font-size:1em;line-height:1;margin:10px 0}.elementor-message:before{content:"\e90e";display:inline-block;font-family:eicons;font-style:normal;font-weight:400;margin-inline-end:5px;vertical-align:middle}.elementor-message.elementor-message-danger{color:#d9534f}.elementor-message.elementor-message-danger:before{content:"\e87f"}.elementor-message.form-message-success{color:#5cb85c}.elementor-form .elementor-button{border:none;padding-block-end:0;padding-block-start:0}.elementor-form .elementor-button-content-wrapper,.elementor-form .elementor-button>span{display:flex;flex-direction:row;gap:5px;justify-content:center}.elementor-form .elementor-button.elementor-size-xs{min-height:33px}.elementor-form .elementor-button.elementor-size-sm{min-height:40px}.elementor-form .elementor-button.elementor-size-md{min-height:47px}.elementor-form .elementor-button.elementor-size-lg{min-height:59px}.elementor-form .elementor-button.elementor-size-xl{min-height:72px}.elementor-element:where(:not(.e-con)):where(:not(.e-div-block-base)) .elementor-widget-container,.elementor-element:where(:not(.e-con)):where(:not(.e-div-block-base)):not(:has(.elementor-widget-container)){transition:background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--e-transform-transition-duration,.4s)}.elementor-heading-title{line-height:1;margin:0;padding:0}.elementor-button{background-color:#69727d;border-radius:3px;color:#fff;display:inline-block;fill:#fff;font-size:15px;line-height:1;padding:12px 24px;text-align:center;transition:all .3s}.elementor-button:focus,.elementor-button:hover,.elementor-button:visited{color:#fff}.elementor-button-content-wrapper{display:flex;flex-direction:row;gap:5px;justify-content:center}.elementor-button-icon{align-items:center;display:flex}.elementor-button-icon svg{height:auto;width:1em}.elementor-button-icon .e-font-icon-svg{height:1em}.elementor-button-text{display:inline-block}.elementor-button.elementor-size-xs{border-radius:2px;font-size:13px;padding:10px 20px}.elementor-button.elementor-size-md{border-radius:4px;font-size:16px;padding:15px 30px}.elementor-button.elementor-size-lg{border-radius:5px;font-size:18px;padding:20px 40px}.elementor-button.elementor-size-xl{border-radius:6px;font-size:20px;padding:25px 50px}.elementor-button span{text-decoration:inherit}.elementor-element.elementor-button-info .elementor-button{background-color:#5bc0de}.elementor-element.elementor-button-success .elementor-button{background-color:#5cb85c}.elementor-element.elementor-button-warning .elementor-button{background-color:#f0ad4e}.elementor-element.elementor-button-danger .elementor-button{background-color:#d9534f}.elementor-widget-button .elementor-button .elementor-button-info{background-color:#5bc0de}.elementor-widget-button .elementor-button .elementor-button-success{background-color:#5cb85c}.elementor-widget-button .elementor-button .elementor-button-warning{background-color:#f0ad4e}.elementor-widget-button .elementor-button .elementor-button-danger{background-color:#d9534f}.elementor-view-stacked .elementor-icon{background-color:#69727d;color:#fff;fill:#fff;padding:.5em}.elementor-view-framed .elementor-icon{background-color:transparent;border:3px solid #69727d;color:#69727d;padding:.5em}.elementor-icon{color:#69727d;display:inline-block;font-size:50px;line-height:1;text-align:center;transition:all .3s}.elementor-icon:hover{color:#69727d}.elementor-icon i,.elementor-icon svg{display:block;height:1em;position:relative;width:1em}.elementor-icon i:before,.elementor-icon svg:before{left:50%;position:absolute;transform:translateX(-50%)}.elementor-icon i.fad{width:auto}.elementor-shape-square .elementor-icon{border-radius:0}.elementor-shape-rounded .elementor-icon{border-radius:10%}.elementor-shape-circle .elementor-icon{border-radius:50%}.e-transform .elementor-widget-container,.e-transform:not(:has(.elementor-widget-container)){transform:perspective(var(--e-transform-perspective,0)) rotate(var(--e-transform-rotateZ,0)) rotateX(var(--e-transform-rotateX,0)) rotateY(var(--e-transform-rotateY,0)) translate(var(--e-transform-translate,0)) translateX(var(--e-transform-translateX,0)) translateY(var(--e-transform-translateY,0)) scaleX(calc(var(--e-transform-flipX, 1) * var(--e-transform-scaleX, var(--e-transform-scale, 1)))) scaleY(calc(var(--e-transform-flipY, 1) * var(--e-transform-scaleY, var(--e-transform-scale, 1)))) skewX(var(--e-transform-skewX,0)) skewY(var(--e-transform-skewY,0));transform-origin:var(--e-transform-origin-y) var(--e-transform-origin-x)}.e-con.e-transform{transform:perspective(var(--e-con-transform-perspective,0)) rotate(var(--e-con-transform-rotateZ,0)) rotateX(var(--e-con-transform-rotateX,0)) rotateY(var(--e-con-transform-rotateY,0)) translate(var(--e-con-transform-translate,0)) translateX(var(--e-con-transform-translateX,0)) translateY(var(--e-con-transform-translateY,0)) scaleX(calc(var(--e-con-transform-flipX, 1) * var(--e-con-transform-scaleX, var(--e-con-transform-scale, 1)))) scaleY(calc(var(--e-con-transform-flipY, 1) * var(--e-con-transform-scaleY, var(--e-con-transform-scale, 1)))) skewX(var(--e-con-transform-skewX,0)) skewY(var(--e-con-transform-skewY,0));transform-origin:var(--e-con-transform-origin-y) var(--e-con-transform-origin-x)}.animated{animation-duration:1.25s}.animated.animated-slow{animation-duration:2s}.animated.animated-fast{animation-duration:.75s}.animated.infinite{animation-iteration-count:infinite}.animated.reverse{animation-direction:reverse;animation-fill-mode:forwards}@media (prefers-reduced-motion:reduce){.animated{animation:none!important}html *{transition-delay:0s!important;transition-duration:0s!important}}@media (max-width:767px){.elementor .elementor-hidden-mobile,.elementor .elementor-hidden-phone{display:none}}@media (min-width:-1) and (max-width:-1){.elementor .elementor-hidden-mobile_extra{display:none}}@media (min-width:768px) and (max-width:1024px){.elementor .elementor-hidden-tablet{display:none}}@media (min-width:-1) and (max-width:-1){.elementor .elementor-hidden-laptop,.elementor .elementor-hidden-tablet_extra{display:none}}@media (min-width:1025px) and (max-width:99999px){.elementor .elementor-hidden-desktop{display:none}}@media (min-width:-1){.elementor .elementor-hidden-widescreen{display:none}} /* dc-header-hero */ /** * Advanced Hero Widget — NDN.LASER palette. * Full-bleed background behind header + subheader, right-column YouTube video, * floating feature cards. Colors: #1A1A1A + #836436. */ .reveria-hero-advanced { --hero-primary: #1A1A1A; --hero-secondary: #836436; --hero-secondary-dark: #6e5330; --hero-accent: #C8A46A; --hero-text: #ffffff; --hero-overlay: #1A1A1A; position: relative; width: 100%; overflow: hidden; isolation: isolate; color: var(--hero-text); background: var(--hero-primary); font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .reveria-hero-advanced *, .reveria-hero-advanced *::before, .reveria-hero-advanced *::after { box-sizing: border-box; } /* ========================================== Full-bleed background image + overlay ========================================== */ .reveria-hero-advanced .hero-bg-image { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; transform: scale(1.02); /* avoid hairline edge on zoom */ } .reveria-hero-advanced .hero-bg-overlay { position: absolute; inset: 0; z-index: 1; opacity: 0.72; pointer-events: none; } .reveria-hero-advanced .hero-bg-overlay--flat { background: var(--hero-overlay); } .reveria-hero-advanced .hero-bg-overlay--gradient { background: linear-gradient(90deg, var(--hero-overlay) 0%, color-mix(in srgb, var(--hero-overlay) 85%, transparent) 55%, color-mix(in srgb, var(--hero-overlay) 35%, transparent) 100%); } .reveria-hero-advanced .hero-bg-overlay--radial { background: radial-gradient(ellipse at 25% 40%, color-mix(in srgb, var(--hero-overlay) 40%, transparent) 0%, var(--hero-overlay) 70%); } /* Decorative teal glow accent (right side only) */ .reveria-hero-advanced::after { content: ""; position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 1; width: 600px; height: 600px; bottom: -220px; right: -200px; background: rgba(200, 164, 106, 0.18); } /* ========================================== Section layout ========================================== */ .reveria-hero-advanced .hero-section { position: relative; z-index: 5; padding: 110px 0 120px; } .reveria-hero-advanced .hero-container { max-width: 1400px; margin: 0 auto; padding: 50px 0px; width: 100%; } .reveria-hero-advanced .hero-content-wrapper { display: grid; align-items: center; gap: 70px; } .reveria-hero-advanced .layout-split { grid-template-columns: 1fr 1fr; } .reveria-hero-advanced .layout-asymmetric { grid-template-columns: 6fr 5fr; } .reveria-hero-advanced .layout-centered { grid-template-columns: 1fr; text-align: center; max-width: 880px; margin: 0 auto; } /* ========================================== Content panel ========================================== */ .reveria-hero-advanced .hero-content-panel { position: relative; z-index: 2; max-width: 600px; } .reveria-hero-advanced .layout-centered .hero-content-panel { max-width: none; } .reveria-hero-advanced .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 22px; background: transparent; border: none; color: #e7fbf8; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; } /* ────────────────────────────────────────────────────────── Eyebrow laser-device icon Explicit dermatological handpiece with firing beam + ripples. Color fixed to #836436 (NDN accent-dark) with continuous fire + ripple animation — reads immediately as "laser clinic". ────────────────────────────────────────────────────────── */ /* Seed-device classes are intrinsic to the SVG itself — shared across any widget that renders the laser-handpiece icon (hero + booking). */ .hero-eyebrow__seed { width: 22px; height: 42px; flex-shrink: 0; color: #836436; overflow: visible; } .hero-eyebrow__seed-device { /* static */ } .hero-eyebrow__seed-dot { transform-origin: 30px 22px; transform-box: fill-box; animation: ndn-laser-blink 1.8s ease-in-out infinite; } .hero-eyebrow__seed-beam { transform-origin: 30px 38px; transform-box: fill-box; animation: ndn-laser-fire 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .hero-eyebrow__seed-ripple { transform-origin: 30px 100px; transform-box: fill-box; animation: ndn-laser-ripple 1.6s cubic-bezier(0.22, 1, 0.36, 1) infinite; } .hero-eyebrow__seed-ripple--2 { animation-delay: 0.25s; } .hero-eyebrow__seed-ripple--3 { animation-delay: 0.5s; } @keyframes ndn-laser-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.82); } } @keyframes ndn-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-laser-ripple { 0% { transform: scale(0.2); opacity: 0.9; } 70% { opacity: 0.4; } 100% { transform: scale(1.3); opacity: 0; } } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .hero-eyebrow__seed-dot, .hero-eyebrow__seed-beam, .hero-eyebrow__seed-ripple { animation: none; } } .reveria-hero-advanced .hero-title { font-family: "Times New Roman", Times, serif; font-size: clamp(36px, 5.5vw, 62px); line-height: 1.08; letter-spacing: -0.015em; color: var(--hero-text); margin: 0 0 20px; font-weight: 700; } .reveria-hero-advanced .hero-title .title-highlight { display: inline; color: #836436; font-family: "Times New Roman", Times, serif; } .reveria-hero-advanced .highlight-italic { font-style: italic; } .reveria-hero-advanced .highlight-underline { position: relative; text-decoration: underline wavy #836436; text-underline-offset: 6px; } .reveria-hero-advanced .hero-description { font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, 0.86); margin: 0 0 32px; max-width: 560px; } .reveria-hero-advanced .hero-description p { margin: 0 0 14px; font-family: inherit; color: inherit; font-size: inherit; line-height: inherit; } .reveria-hero-advanced .hero-description strong { color: #fff; } /* CTA buttons */ .reveria-hero-advanced .hero-cta-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; } .reveria-hero-advanced .hero-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 999px; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; border: 2px solid transparent; } .reveria-hero-advanced .hero-btn .btn-text { display: inline-flex; align-items: center; gap: 8px; } .reveria-hero-advanced .hero-btn .btn-arrow { transition: transform 0.2s ease; } .reveria-hero-advanced .hero-btn:hover .btn-arrow { transform: translateX(3px); } .reveria-hero-advanced .hero-btn-primary { background: #1A1A1A; color: #ffffff; box-shadow: 0 14px 30px -10px rgba(26, 26, 26, 0.55); } .reveria-hero-advanced .hero-btn-primary:hover { background: #836436; color: #ffffff; transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(200, 164, 106, 0.7); } .reveria-hero-advanced .hero-btn-secondary { background: rgba(255, 255, 255, 0.04); color: #ffffff; border-color: rgba(255, 255, 255, 0.35); backdrop-filter: blur(8px); } .reveria-hero-advanced .hero-btn-secondary:hover { background: #ffffff; color: var(--hero-primary); border-color: #ffffff; transform: translateY(-2px); } .reveria-hero-advanced .hero-btn-ghost { background: transparent; color: #ffffff; border-color: transparent; } .reveria-hero-advanced .hero-btn-ghost:hover { color: var(--hero-secondary); } /* ========================================== Right column — luxury media stage ========================================== */ .reveria-hero-advanced .hero-media-panel { position: relative; z-index: 2; } .reveria-hero-advanced .hero-media-stage { position: relative; display: flex; flex-direction: column; gap: 18px; } .reveria-hero-advanced .hero-media-stage__glow { position: absolute; inset: -40px -30px auto -30px; height: 120%; background: radial-gradient(ellipse at 30% 0%, rgba(200, 164, 106, 0.45) 0%, transparent 65%), radial-gradient(ellipse at 80% 100%, rgba(200, 164, 106, 0.28) 0%, transparent 60%); filter: blur(60px); z-index: 0; pointer-events: none; border-radius: 48px; opacity: 0.85; } .reveria-hero-advanced .hero-media-frame { position: relative; aspect-ratio: 16/9; border-radius: 24px; overflow: hidden; background: #000; z-index: 1; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) inset; } .reveria-hero-advanced .hero-media-frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(200, 164, 106, 0.55) 0%, rgba(255, 255, 255, 0.15) 45%, rgba(200, 164, 106, 0.5) 100%); -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 4; } .reveria-hero-advanced .hero-media-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .reveria-hero-advanced .hero-media-frame:hover .hero-media-image { transform: scale(1.02); } /* Main video fills the frame edge-to-edge (frame is 16:9 so YouTube fits perfectly) */ .reveria-hero-advanced .hero-video { position: absolute; inset: 0; overflow: hidden; background: #000; } .reveria-hero-advanced .hero-video iframe, .reveria-hero-advanced .hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; object-fit: cover; } /* ========================================== Gallery tiles beneath the main video ========================================== */ .reveria-hero-advanced .hero-media-gallery { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .reveria-hero-advanced .hero-media-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); } .reveria-hero-advanced .hero-media-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); } .reveria-hero-advanced .hero-media-gallery--cols-4 { grid-template-columns: repeat(4, 1fr); } .reveria-hero-advanced .hero-media-tile { position: relative; aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; background: rgba(26, 26, 26, 0.6); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; } .reveria-hero-advanced .hero-media-tile:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -22px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(200, 164, 106, 0.4) inset; } .reveria-hero-advanced .hero-media-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 26, 26, 0) 55%, rgba(26, 26, 26, 0.7) 100%); pointer-events: none; z-index: 1; } .reveria-hero-advanced .hero-media-tile__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .reveria-hero-advanced .hero-media-tile:hover .hero-media-tile__media { transform: scale(1.05); } .reveria-hero-advanced .hero-media-tile__caption { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; color: #ffffff; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.3; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .reveria-hero-advanced .hero-media-tile--video::before { content: ""; position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%; background: rgba(200, 164, 106, 0.9); backdrop-filter: blur(8px); background-image: linear-gradient(135deg, rgba(200, 164, 106, 0.9), rgba(200, 164, 106, 0.7)), url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: cover, 12px 12px; } /* ========================================== Scroll indicator (hair follicle falling through a teal line) ========================================== */ .reveria-hero-advanced .dc-hero__scroll { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: rgba(255, 255, 255, 0.85); font-family: 'DM Sans', system-ui, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; transition: color 0.25s ease, transform 0.25s ease; } .reveria-hero-advanced .dc-hero__scroll:hover { color: #ffffff; transform: translate(-50%, -3px); } .reveria-hero-advanced .dc-hero__scroll-label { line-height: 1; } .reveria-hero-advanced .dc-hero__scroll-track { position: relative; width: 1px; height: 56px; background: linear-gradient(180deg, rgba(200, 164, 106, 0.1) 0%, rgba(200, 164, 106, 0.9) 50%, rgba(200, 164, 106, 0.1) 100%); overflow: visible; display: block; } .reveria-hero-advanced .dc-hero__scroll-seed { position: absolute; left: 50%; top: 0; width: 8px; height: 16px; color: var(--hero-secondary); transform: translateX(-50%); animation: dc-hero-seed-fall 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; filter: drop-shadow(0 0 4px rgba(200, 164, 106, 0.65)); } .reveria-hero-advanced .dc-hero__scroll-chevron { width: 16px; height: 16px; color: var(--hero-secondary); opacity: 0.85; animation: dc-hero-chevron-nudge 2.2s ease-in-out infinite; } @keyframes dc-hero-seed-fall { 0% { top: -12px; opacity: 0; transform: translateX(-50%) scale(0.7); } 25% { opacity: 1; } 80% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { top: 56px; opacity: 0; transform: translateX(-50%) scale(0.9); } } @keyframes dc-hero-chevron-nudge { 0%, 100% { transform: translateY(0); opacity: 0.85; } 50% { transform: translateY(4px); opacity: 1; } } @media (max-width: 620px) { .reveria-hero-advanced .dc-hero__scroll { bottom: 16px; font-size: 10.5px; letter-spacing: 0.18em; } .reveria-hero-advanced .dc-hero__scroll-track { height: 44px; } } /* ========================================== Responsive ========================================== */ @media (max-width: 1100px) { .reveria-hero-advanced .hero-section { padding: 90px 0 100px; } .reveria-hero-advanced .hero-container { padding: 0 28px; } .reveria-hero-advanced .hero-content-wrapper { gap: 50px; } } @media (max-width: 900px) { .reveria-hero-advanced .layout-split, .reveria-hero-advanced .layout-asymmetric { grid-template-columns: 1fr; } .reveria-hero-advanced .hero-content-panel { max-width: 640px; margin: 0 auto; text-align: center; } .reveria-hero-advanced .hero-cta-buttons { justify-content: center; } .reveria-hero-advanced .hero-media-stage { max-width: 620px; margin: 0 auto; } .reveria-hero-advanced .hero-media-gallery--cols-4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 620px) { .reveria-hero-advanced .hero-section { padding: 70px 0 80px; } .reveria-hero-advanced .hero-container { padding: 0 20px; } .reveria-hero-advanced .hero-title { font-size: clamp(30px, 8vw, 40px); } .reveria-hero-advanced .hero-description { font-size: 16px; } .reveria-hero-advanced .hero-media-frame { border-radius: 20px; } .reveria-hero-advanced .hero-media-gallery { gap: 10px; } .reveria-hero-advanced .hero-media-gallery--cols-3, .reveria-hero-advanced .hero-media-gallery--cols-4 { grid-template-columns: repeat(2, 1fr); } .reveria-hero-advanced .hero-media-tile__caption { font-size: 11.5px; left: 10px; right: 10px; bottom: 9px; } .reveria-hero-advanced .hero-media-tile--video::before { width: 26px; height: 26px; top: 8px; right: 8px; } /* On mobile, the last video tile spans full width like the main hero video */ .reveria-hero-advanced .hero-media-tile--video:last-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; } } /* dc-ndn-cta-booking */ .ndn-booking { --ndn-b-accent: #836436; --ndn-b-accent-soft: rgba(200, 164, 106, 0.12); --ndn-b-primary: #1A1A1A; --ndn-b-gold: #c9a557; --ndn-b-ink: #0f1a2b; --ndn-b-muted: #546070; --ndn-b-bg: #ffffff; --ndn-b-surface: #f8fafb; --ndn-b-border: rgba(26, 26, 26, 0.08); --ndn-b-radius: 20px; --ndn-b-shadow: 0 32px 80px -32px rgba(26, 26, 26, 0.25); --ndn-b-t: 0.35s cubic-bezier(0.22, 1, 0.36, 1); position: relative; padding: clamp(40px, 6vw, 90px) 20px; font-family: 'DM Sans', 'Jost', system-ui, sans-serif; color: var(--ndn-b-ink); isolation: isolate; } .ndn-booking::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 400px at 85% -20%, rgba(200, 164, 106, 0.10), transparent 60%), radial-gradient(900px 500px at 15% 110%, rgba(201,165,87,0.10), transparent 60%), linear-gradient(180deg, #ffffff 0%, #fafcfc 100%); z-index: -1; } .ndn-booking__wrap { max-width: 1200px; margin: 0 auto; } /* ── INTRO ─────────────────────────────────── */ .ndn-booking__intro { text-align: center; max-width: 760px; margin: 0 auto 40px; } /* Eyebrow — uses shared hero-eyebrow + laser-device seed SVG. Wrapper styling only; seed-device animations live globally. */ .ndn-booking__intro .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 auto 14px; color: var(--ndn-b-accent); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .ndn-booking__intro .hero-eyebrow__seed { width: 18px; height: 34px; } .ndn-booking__title { font-family: "Times New Roman", Times, serif; font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.15; color: var(--ndn-b-primary); margin: 0 0 14px; letter-spacing: -0.01em; } .ndn-booking__subtitle { font-size: 16px; line-height: 1.65; color: var(--ndn-b-muted); margin: 0; } /* ── PROGRESS RAIL ────────────────────────────────────────── Each step is a vertical dot+label. Connector lines sit behind the dots, span edge-to-edge between neighbouring dots, and fill with accent colour as soon as the step on the LEFT is done. ──────────────────────────────────────────────────────────── */ .ndn-booking__progress { display: flex; align-items: flex-start; justify-content: center; list-style: none; margin: 0 auto 32px; padding: 0 10px; max-width: 720px; counter-reset: ndn-pstep; } .ndn-booking__pstep { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } /* Connector line: sits behind the dots, spans to the next step */ .ndn-booking__pstep:not(:last-child)::after { content: ""; position: absolute; top: 18px; /* half of dot height (36/2) */ left: calc(50% + 20px); /* just past current dot's edge */ width: calc(100% - 40px); /* reach the next dot's edge */ height: 2px; background: var(--ndn-b-border); border-radius: 2px; transition: background-color var(--ndn-b-t); z-index: 0; } .ndn-booking__pstep.is-done:not(:last-child)::after { background: linear-gradient(90deg, var(--ndn-b-accent) 0%, var(--ndn-b-accent) 100%); } /* When current step is active AND the previous is done, half-fill the line coming into this step to signal "halfway there". */ .ndn-booking__pstep.is-active:not(:first-child):not(:last-child)::after { background: linear-gradient(90deg, var(--ndn-b-border) 0%, var(--ndn-b-border) 100%); } /* The dot (circle) */ .ndn-booking__pdot { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 2px solid var(--ndn-b-border); color: var(--ndn-b-muted); font-family: "Times New Roman", Times, serif; font-weight: 700; font-size: 14px; transition: background-color var(--ndn-b-t), border-color var(--ndn-b-t), color var(--ndn-b-t), transform var(--ndn-b-t), box-shadow var(--ndn-b-t); } /* Active state — current step */ .ndn-booking__pstep.is-active .ndn-booking__pdot { background: var(--ndn-b-primary); border-color: var(--ndn-b-primary); color: #fff; transform: scale(1.08); box-shadow: 0 0 0 6px rgba(200, 164, 106, 0.14), 0 10px 24px -8px rgba(26, 26, 26, 0.35); } /* Done state — step completed */ .ndn-booking__pstep.is-done .ndn-booking__pdot { background: var(--ndn-b-accent); border-color: var(--ndn-b-accent); color: transparent; /* hide the number */ } .ndn-booking__pstep.is-done .ndn-booking__pdot > span { visibility: hidden; } /* Checkmark for done steps — CSS-drawn tick centered in the dot */ .ndn-booking__pstep.is-done .ndn-booking__pdot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(-50%, -65%) rotate(-45deg); } /* Labels below the dot */ .ndn-booking__plabel { font-family: 'DM Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 600; color: var(--ndn-b-muted); letter-spacing: 0.02em; white-space: nowrap; transition: color var(--ndn-b-t); } .ndn-booking__pstep.is-active .ndn-booking__plabel, .ndn-booking__pstep.is-done .ndn-booking__plabel { color: var(--ndn-b-primary); } .ndn-booking__pstep.is-active .ndn-booking__plabel { font-weight: 700; } @media (max-width: 640px) { .ndn-booking__progress { padding: 0 4px; } .ndn-booking__plabel { font-size: 11px; } .ndn-booking__pdot { width: 32px; height: 32px; font-size: 13px; } .ndn-booking__pstep:not(:last-child)::after { top: 16px; left: calc(50% + 18px); width: calc(100% - 36px); } } /* ── PANEL (steps container) ───────────────── */ .ndn-booking__panel { position: relative; background: var(--ndn-b-bg); border: 1px solid var(--ndn-b-border); border-radius: var(--ndn-b-radius); padding: clamp(22px, 3vw, 40px); box-shadow: var(--ndn-b-shadow); overflow: hidden; } .ndn-booking__gold { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent 0%, var(--ndn-b-gold) 20%, var(--ndn-b-accent) 50%, var(--ndn-b-gold) 80%, transparent 100%); } .ndn-booking__step { display: none; animation: ndn-b-fade 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .ndn-booking__step.is-active { display: block; } @keyframes ndn-b-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .ndn-booking__step-title { font-family: "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; color: var(--ndn-b-primary); margin: 0 0 6px; } .ndn-booking__step-hint { font-size: 14px; color: var(--ndn-b-muted); margin: 0 0 22px; } /* ── TREATMENTS GRID ───────────────────────── */ .ndn-booking__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .ndn-booking__card { position: relative; display: flex; flex-direction: column; text-align: left; padding: 0; border: 2px solid var(--ndn-b-border); border-radius: 16px; background: #fff; overflow: hidden; cursor: pointer; font-family: inherit; color: inherit; transition: border-color var(--ndn-b-t), transform var(--ndn-b-t), box-shadow var(--ndn-b-t); } .ndn-booking__card:hover, .ndn-booking__card:focus-visible { border-color: var(--ndn-b-accent); transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(26, 26, 26, 0.28); outline: none; } .ndn-booking__card.is-selected { border-color: var(--ndn-b-accent); box-shadow: 0 0 0 6px var(--ndn-b-accent-soft), 0 20px 40px -18px rgba(26, 26, 26, 0.28); } .ndn-booking__card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ndn-b-surface); } .ndn-booking__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s ease; } .ndn-booking__card:hover .ndn-booking__card-media img { transform: scale(1.08); } .ndn-booking__card-badge { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(26, 26, 26, 0.72); backdrop-filter: blur(8px); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; } .ndn-booking__card-check { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.6); transition: opacity var(--ndn-b-t), transform var(--ndn-b-t), background-color var(--ndn-b-t); box-shadow: 0 6px 16px -6px rgba(26, 26, 26, 0.3); } .ndn-booking__card.is-selected .ndn-booking__card-check { opacity: 1; transform: scale(1); background: var(--ndn-b-accent); color: #fff; } .ndn-booking__card-check svg { width: 16px; height: 16px; } .ndn-booking__card-body { padding: 16px 18px 18px; } .ndn-booking__card-title { font-family: "Times New Roman", Times, serif; font-size: 18px; font-weight: 700; color: var(--ndn-b-primary); margin: 0 0 4px; line-height: 1.25; } .ndn-booking__card-subtitle { font-size: 13.5px; color: var(--ndn-b-muted); margin: 0; line-height: 1.45; } /* ── TIME SLOTS ────────────────────────────── */ .ndn-booking__slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .ndn-booking__slot { position: relative; padding: 20px 22px; border: 2px solid var(--ndn-b-border); border-radius: 14px; background: #fff; cursor: pointer; font-family: inherit; color: inherit; text-align: left; transition: border-color var(--ndn-b-t), background var(--ndn-b-t), transform var(--ndn-b-t); } .ndn-booking__slot:hover, .ndn-booking__slot:focus-visible { border-color: var(--ndn-b-accent); transform: translateY(-2px); outline: none; } .ndn-booking__slot.is-selected { border-color: var(--ndn-b-accent); background: var(--ndn-b-accent-soft); } .ndn-booking__slot-label { display: block; font-size: 16px; font-weight: 700; color: var(--ndn-b-primary); margin-bottom: 2px; } .ndn-booking__slot-hours { font-size: 13.5px; color: var(--ndn-b-muted); } /* ── PREFERRED DAY + SUB-HEADINGS ──────────────── */ .ndn-booking__subhead { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ndn-b-muted); margin: 4px 0 12px; } .ndn-booking__subhead + .ndn-booking__days { margin-bottom: 26px; } .ndn-booking__days { display: flex; flex-wrap: wrap; gap: 10px; } .ndn-booking__day { padding: 11px 18px; border: 2px solid var(--ndn-b-border); border-radius: 999px; background: #fff; cursor: pointer; font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--ndn-b-primary); transition: border-color var(--ndn-b-t), background var(--ndn-b-t), transform var(--ndn-b-t); } .ndn-booking__day:hover, .ndn-booking__day:focus-visible { border-color: var(--ndn-b-accent); transform: translateY(-2px); outline: none; } .ndn-booking__day.is-selected { border-color: var(--ndn-b-accent); background: var(--ndn-b-accent-soft); } /* ── CONFIRMATION — split layout (form left, summary right) ── */ .ndn-booking__confirm-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; } @media (max-width: 860px) { .ndn-booking__confirm-grid { grid-template-columns: 1fr; } } .ndn-booking__summary { display: grid; gap: 14px; padding: 26px; border-radius: 16px; background: var(--ndn-b-surface); border: 1px solid var(--ndn-b-border); margin-bottom: 0; position: sticky; top: 20px; } .ndn-booking__summary-title { font-family: var(--ndn-font-heading, "Times New Roman", serif); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ndn-b-accent); margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--ndn-b-border); } .ndn-booking__sum-trust { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--ndn-b-border); font-size: 12.5px; color: var(--ndn-b-muted); line-height: 1.5; } .ndn-booking__sum-trust svg { width: 16px; height: 16px; color: var(--ndn-success, #2E7D32); flex-shrink: 0; margin-top: 2px; } /* ══════════════════════════════════════════════ CF7 form — full NDN override (forces premium look over default CF7 markup) ══════════════════════════════════════════════ */ .ndn-cf { padding: 28px; background: var(--ndn-b-bg); border: 1px solid var(--ndn-b-border); border-radius: 18px; box-shadow: 0 18px 40px -20px rgba(26, 26, 26, 0.12); } .ndn-cf .wpcf7-form { margin: 0; padding: 0; } .ndn-cf .wpcf7 { margin: 0; } .ndn-cf .screen-reader-response { position: absolute; left: -9999px; } .ndn-cf .wpcf7 p { margin: 0; } .ndn-cf br { display: none; } /* Layout helpers inside form (declared by our CF7 template) */ .ndn-cf .ndn-cf__row { display: block; margin-bottom: 16px; } .ndn-cf .ndn-cf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } @media (max-width: 520px) { .ndn-cf .ndn-cf__grid { grid-template-columns: 1fr; } } /* Labels */ .ndn-cf__label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ndn-b-muted); margin-bottom: 8px; } .ndn-cf__req { color: var(--ndn-cta, #B91C1C); font-weight: 700; margin-left: 2px; } /* Inputs — kill all CF7 defaults, rebuild NDN style */ .ndn-cf input[type="text"], .ndn-cf input[type="email"], .ndn-cf input[type="tel"], .ndn-cf input[type="url"], .ndn-cf input[type="number"], .ndn-cf input[type="date"], .ndn-cf textarea, .ndn-cf select { display: block; width: 100%; box-sizing: border-box; padding: 13px 15px; margin-top: 6px; font-family: inherit; font-size: 15px; font-weight: 500; color: var(--ndn-b-ink); background: #fff; border: 1.5px solid var(--ndn-b-border); border-radius: 10px; outline: none; transition: border-color var(--ndn-b-t), box-shadow var(--ndn-b-t), background var(--ndn-b-t); -webkit-appearance: none; appearance: none; box-shadow: none; } .ndn-cf textarea { min-height: 110px; resize: vertical; line-height: 1.55; } .ndn-cf input::placeholder, .ndn-cf textarea::placeholder { color: rgba(107, 94, 75, 0.55); font-weight: 400; } .ndn-cf input:focus, .ndn-cf textarea:focus, .ndn-cf select:focus { border-color: var(--ndn-b-accent); box-shadow: 0 0 0 4px rgba(200, 164, 106, 0.14); background: #fffdf9; } .ndn-cf input.ndn-cf__readonly, .ndn-cf textarea.ndn-cf__readonly { background: var(--ndn-b-surface); color: var(--ndn-b-accent); font-weight: 600; cursor: default; font-style: italic; } .ndn-cf input.ndn-cf__readonly:focus { background: var(--ndn-b-surface); box-shadow: none; border-color: var(--ndn-b-border); } /* Acceptance checkbox */ .ndn-cf__checkbox { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0 20px; font-size: 13.5px; line-height: 1.55; color: var(--ndn-b-muted); cursor: pointer; } .ndn-cf__checkbox .wpcf7-list-item { margin: 0; } .ndn-cf__checkbox .wpcf7-list-item-label { display: none; } .ndn-cf__checkbox a { color: var(--ndn-b-accent); text-decoration: underline; text-underline-offset: 3px; } .ndn-cf__checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex-shrink: 0; margin: 1px 0 0; border: 1.5px solid var(--ndn-b-border); border-radius: 5px; cursor: pointer; position: relative; background: #fff; transition: border-color var(--ndn-b-t), background var(--ndn-b-t); } .ndn-cf__checkbox input[type="checkbox"]:hover { border-color: var(--ndn-b-accent); } .ndn-cf__checkbox input[type="checkbox"]:checked { background: var(--ndn-b-accent); border-color: var(--ndn-b-accent); } .ndn-cf__checkbox input[type="checkbox"]:checked::after { content: ""; position: absolute; top: 3px; left: 6px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* Submit button — premium gold gradient, matches design system */ .ndn-cf .ndn-cf__submit { margin-top: 6px; } .ndn-cf input[type="submit"], .ndn-cf button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 16px 24px; font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; color: #fff; background: linear-gradient(135deg, var(--ndn-b-accent) 0%, var(--ndn-accent-dark, #836436) 100%); border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 14px 30px -12px rgba(169, 131, 74, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: transform var(--ndn-b-t), box-shadow var(--ndn-b-t), background var(--ndn-b-t); -webkit-appearance: none; appearance: none; } .ndn-cf input[type="submit"]:hover, .ndn-cf button[type="submit"]:hover { background: linear-gradient(135deg, var(--ndn-accent-dark, #836436) 0%, #6e5330 100%); transform: translateY(-2px); box-shadow: 0 20px 38px -12px rgba(169, 131, 74, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .ndn-cf input[type="submit"]:active, .ndn-cf button[type="submit"]:active { transform: translateY(0); } /* Loading spinner */ .ndn-cf .wpcf7-spinner { display: inline-block; background: var(--ndn-b-accent); margin-left: 10px; } /* Validation messages */ .ndn-cf .wpcf7-not-valid-tip { display: block; margin-top: 6px; padding-left: 2px; font-size: 12.5px; font-weight: 600; color: var(--ndn-cta, #B91C1C); } .ndn-cf input.wpcf7-not-valid, .ndn-cf textarea.wpcf7-not-valid { border-color: var(--ndn-cta, #B91C1C); box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.08); } /* Response messages */ .ndn-cf .wpcf7-response-output { margin: 20px 0 0; padding: 14px 18px; border-radius: 12px; font-size: 14px; font-weight: 500; border: 1px solid var(--ndn-b-border); background: var(--ndn-b-surface); color: var(--ndn-b-ink); } .ndn-cf .wpcf7 form.sent .wpcf7-response-output { background: rgba(46, 125, 50, 0.08); border-color: rgba(46, 125, 50, 0.35); color: #1b5e20; } .ndn-cf .wpcf7 form.invalid .wpcf7-response-output, .ndn-cf .wpcf7 form.failed .wpcf7-response-output { background: rgba(185, 28, 28, 0.06); border-color: rgba(185, 28, 28, 0.3); color: #7a1515; } .ndn-cf__fallback { padding: 24px; text-align: center; color: var(--ndn-b-muted); font-size: 14px; font-style: italic; } .ndn-booking__sum-row { display: flex; align-items: flex-start; gap: 14px; } .ndn-booking__sum-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--ndn-b-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .ndn-booking__sum-icon svg { width: 16px; height: 16px; } .ndn-booking__sum-body { min-width: 0; flex: 1; } .ndn-booking__sum-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ndn-b-muted); } .ndn-booking__sum-value { font-size: 17px; font-weight: 600; color: var(--ndn-b-primary); line-height: 1.4; } .ndn-booking__confirm { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 18px 28px; border-radius: 999px; background: linear-gradient(135deg, var(--ndn-b-accent) 0%, #6e5330 100%); color: #fff; font-weight: 700; font-size: 16px; letter-spacing: 0.01em; text-decoration: none; border: none; cursor: pointer; box-shadow: 0 18px 36px -14px rgba(200, 164, 106, 0.55); transition: transform var(--ndn-b-t), box-shadow var(--ndn-b-t); position: relative; overflow: hidden; } .ndn-booking__confirm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35), transparent 70%); transform: translateX(-100%); transition: transform 0.9s ease; } .ndn-booking__confirm:hover, .ndn-booking__confirm:focus-visible { transform: translateY(-3px); box-shadow: 0 24px 46px -14px rgba(200, 164, 106, 0.65); outline: none; } .ndn-booking__confirm:hover::after { transform: translateX(100%); } .ndn-booking__confirm svg { width: 18px; height: 18px; } /* ── STEP NAV ──────────────────────────────── */ .ndn-booking__nav { display: flex; justify-content: space-between; margin-top: 22px; gap: 10px; } .ndn-booking__nav-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--ndn-b-border); background: #fff; border-radius: 999px; color: var(--ndn-b-primary); font-weight: 600; cursor: pointer; font-family: inherit; font-size: 14px; transition: background var(--ndn-b-t), border-color var(--ndn-b-t); } .ndn-booking__nav-btn:hover { background: var(--ndn-b-surface); border-color: var(--ndn-b-accent); } .ndn-booking__nav-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .ndn-booking__nav-btn svg { width: 14px; height: 14px; } /* ── TRUST ROW ─────────────────────────────── */ .ndn-booking__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 28px; list-style: none; padding: 0; } .ndn-booking__trust li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ndn-b-muted); font-weight: 500; } .ndn-booking__trust svg { width: 16px; height: 16px; color: var(--ndn-b-accent); flex-shrink: 0; } /* Mobile — tighter gap + smaller type, still readable. On very narrow phones stack items 2-per-row with centered alignment. */ @media (max-width: 640px) { /* Hide the trust badges row and the phone/WhatsApp side links on mobile */ .ndn-booking__trust, .ndn-booking__side { display: none; } } @media (max-width: 420px) { .ndn-booking__trust { gap: 8px 14px; padding: 0 8px; } .ndn-booking__trust li { font-size: 12px; gap: 6px; } } /* ── FALLBACK SIDE ACTIONS ─────────────────── */ .ndn-booking__side { display: flex; justify-content: center; gap: 20px; margin-top: 22px; font-size: 14px; color: var(--ndn-b-muted); flex-wrap: wrap; } .ndn-booking__side a { color: var(--ndn-b-primary); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .ndn-booking__side a:hover { color: var(--ndn-b-accent); } .ndn-booking__side svg { width: 14px; height: 14px; } /* ── PROMO POP-UP ─────────────────────────────────────────── Brand-styled modal: gold accent, serif heading, soft shadow. Inherits the booking palette via CSS vars; no duplication. ──────────────────────────────────────────────────────────── */ /* The modal is portalled to (outside .ndn-booking), so it needs its own box-sizing reset — otherwise width:100% + padding overflows on the right. */ .ndn-promo-modal, .ndn-promo-modal *, .ndn-promo-modal *::before, .ndn-promo-modal *::after { box-sizing: border-box; } .ndn-promo-modal { --pm-gold: #c9a557; --pm-gold-deep: #836436; --pm-ink: #0f1a2b; --pm-primary: #1A1A1A; --pm-muted: #546070; --pm-bg: #ffffff; position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: 'DM Sans', 'Jost', system-ui, sans-serif; color: var(--pm-ink); opacity: 0; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .ndn-promo-modal.is-open { opacity: 1; pointer-events: auto; } .ndn-promo-modal[hidden] { display: none; } .ndn-promo-modal__backdrop { position: absolute; inset: 0; background: radial-gradient(800px 400px at 70% 20%, rgba(201,165,87,0.20), transparent 60%), rgba(15, 26, 43, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; } .ndn-promo-modal__dialog { position: relative; width: min(440px, 100%); background: var(--pm-bg); border-radius: 22px; padding: 40px 32px 28px; text-align: center; box-shadow: 0 32px 80px -20px rgba(15, 26, 43, 0.45); overflow: hidden; transform: translateY(20px) scale(0.96); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ndn-promo-modal.is-open .ndn-promo-modal__dialog { transform: translateY(0) scale(1); } .ndn-promo-modal__dialog::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--pm-gold-deep), var(--pm-gold), var(--pm-gold-deep)); } .ndn-promo-modal__dialog::after { content: ""; position: absolute; top: -120px; right: -120px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(201,165,87,0.18), transparent 65%); pointer-events: none; } .ndn-promo-modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; background: rgba(15, 26, 43, 0.06); border-radius: 50%; color: var(--pm-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.2s ease; z-index: 2; } .ndn-promo-modal__close:hover { background: rgba(15, 26, 43, 0.12); transform: rotate(90deg); } .ndn-promo-modal__close svg { width: 18px; height: 18px; } .ndn-promo-modal__logo { margin: 0 auto 18px; position: relative; z-index: 1; } .ndn-promo-modal__logo img { max-width: 130px; max-height: 60px; width: auto; height: auto; display: block; margin: 0 auto; } .ndn-promo-modal__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--pm-gold-deep); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; position: relative; z-index: 1; } .ndn-promo-modal__eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pm-gold); box-shadow: 0 0 0 4px rgba(201, 165, 87, 0.18); animation: ndn-promo-pulse 1.8s ease-in-out infinite; } @keyframes ndn-promo-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(201, 165, 87, 0.18); } 50% { box-shadow: 0 0 0 8px rgba(201, 165, 87, 0.05); } } .ndn-promo-modal__title { font-family: "Times New Roman", Times, serif; font-size: clamp(22px, 4vw, 28px); font-weight: 700; line-height: 1.25; color: var(--pm-primary); margin: 0 0 10px; letter-spacing: -0.01em; position: relative; z-index: 1; } .ndn-promo-modal__device { font-size: 14px; font-weight: 600; color: var(--pm-muted); margin: 0 0 18px; letter-spacing: 0.02em; position: relative; z-index: 1; } .ndn-promo-modal__price { display: inline-flex; align-items: baseline; gap: 8px; padding: 14px 22px; border-radius: 14px; background: linear-gradient(135deg, rgba(201,165,87,0.10), rgba(169,131,74,0.06)); border: 1px solid rgba(201, 165, 87, 0.30); margin-bottom: 16px; position: relative; z-index: 1; } .ndn-promo-modal__price-amount { font-family: "Times New Roman", Times, serif; font-size: 38px; font-weight: 700; color: var(--pm-gold-deep); line-height: 1; } .ndn-promo-modal__price-unit { font-size: 13px; font-weight: 600; color: var(--pm-muted); text-transform: lowercase; } .ndn-promo-modal__copy { font-size: 14px; line-height: 1.6; color: var(--pm-muted); margin: 0 0 22px; position: relative; z-index: 1; } .ndn-promo-modal__cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 28px; background: linear-gradient(135deg, var(--pm-gold-deep), var(--pm-gold)); color: #fff; text-decoration: none; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; border-radius: 12px; box-shadow: 0 12px 28px -10px rgba(169, 131, 74, 0.55); transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; z-index: 1; } .ndn-promo-modal__cta:hover, .ndn-promo-modal__cta:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 32px -10px rgba(169, 131, 74, 0.65); color: #fff; } .ndn-promo-modal__cta svg { width: 16px; height: 16px; transition: transform 0.25s ease; } .ndn-promo-modal__cta:hover svg { transform: translateX(3px); } .ndn-promo-modal__dismiss { display: inline-block; margin-top: 12px; padding: 8px 12px; border: 0; background: transparent; color: var(--pm-muted); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(84, 96, 112, 0.4); transition: color 0.2s ease; position: relative; z-index: 1; } .ndn-promo-modal__dismiss:hover { color: var(--pm-primary); } /* ── Mobile tweaks ─────────────────────────── */ @media (max-width: 480px) { .ndn-promo-modal__dialog { padding: 34px 22px 22px; border-radius: 18px; } .ndn-promo-modal__price-amount { font-size: 32px; } .ndn-promo-modal__title { font-size: 20px; } } /* ── Reduced motion ─────────────────────────── */ @media (prefers-reduced-motion: reduce) { .ndn-promo-modal, .ndn-promo-modal__dialog, .ndn-promo-modal__cta, .ndn-promo-modal__close { transition: none; } .ndn-promo-modal__eyebrow-dot { animation: none; } } /* dc-dc-trust-bar */ .dc-brs, .dc-brs *, .dc-brs *::before, .dc-brs *::after{ font-family:'DM Sans','Poppins',system-ui,sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; box-sizing:border-box; } /* ═════════ SECTION ═════════ */ .dc-brs.dc-brs{ background:var(--brs-bg); padding:110px 0; position:relative; overflow:hidden; } .dc-brs .dc-brs__container{ max-width:1400px; margin:0 auto; padding:0 40px; } .dc-brs .dc-brs__layout{ display:grid; grid-template-columns:1fr 1.15fr; gap:72px; align-items:center; min-height:720px; } /* ═════════ LEFT — CONTENT ═════════ */ .dc-brs .dc-brs__content{ position:relative; z-index:2; opacity:0; transform:translateX(-24px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); } .dc-brs.is-in .dc-brs__content{ opacity:1; transform:translateX(0); } /* Eyebrow with flooring icon */ .dc-brs .dc-brs__eyebrow{ display:inline-flex; align-items:center; gap:12px; margin-bottom:24px; color:var(--brs-dark); } .dc-brs .dc-brs__eyebrow-icon{ display:inline-flex; width:28px; height:28px; color:var(--brs-primary); flex-shrink:0; } .dc-brs .dc-brs__eyebrow-icon svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .dc-brs .dc-brs__eyebrow-icon svg .fp-plank{ opacity:0; transform:translateY(4px); transform-box:fill-box; transition:opacity .45s ease, transform .5s cubic-bezier(.22,1,.36,1); } .dc-brs.is-in .dc-brs__eyebrow-icon svg .fp-plank{ opacity:1; transform:translateY(0); } .dc-brs .dc-brs__eyebrow-icon svg .fp-plank:nth-of-type(1){transition-delay:.28s;} .dc-brs .dc-brs__eyebrow-icon svg .fp-plank:nth-of-type(2){transition-delay:.34s;} .dc-brs .dc-brs__eyebrow-icon svg .fp-plank:nth-of-type(3){transition-delay:.40s;} .dc-brs .dc-brs__eyebrow-icon svg .fp-plank:nth-of-type(4){transition-delay:.46s;} .dc-brs .dc-brs__eyebrow-icon svg .fp-plank:nth-of-type(5){transition-delay:.52s;} .dc-brs .dc-brs__eyebrow-icon svg .fp-plank:nth-of-type(6){transition-delay:.58s;} .dc-brs .dc-brs__eyebrow-icon svg .fp-plank:nth-of-type(7){transition-delay:.64s;} .dc-brs .dc-brs__eyebrow-text{ font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--brs-dark); } .dc-brs .dc-brs__title{ margin:0 0 22px; font-size:clamp(34px, 4vw, 56px); font-weight:800; line-height:1.08; letter-spacing:-1px; color:var(--brs-dark); } .dc-brs .dc-brs__title strong{ color:var(--brs-primary); font-weight:800; } .dc-brs .dc-brs__desc{ margin:0 0 26px; font-size:17px; line-height:1.7; color:var(--brs-muted); max-width:560px; } .dc-brs .dc-brs__desc p{ margin:0 0 14px; font-size:inherit; line-height:inherit; color:inherit; font-family:inherit; } .dc-brs .dc-brs__desc p:last-child{margin-bottom:0;} /* Quote attribution */ .dc-brs .dc-brs__quote{ display:flex; align-items:flex-start; gap:14px; margin:0 0 30px; padding:14px 20px; max-width:520px; } .dc-brs .dc-brs__quote-mark{ font-family:"Times New Roman",Times,serif; font-size:46px; line-height:.6; color:var(--brs-primary); margin-top:6px; } .dc-brs .dc-brs__quote-author{ font-size:14.5px; color:var(--brs-dark); line-height:1.45; } .dc-brs .dc-brs__quote-author strong{ display:block; font-weight:700; color:var(--brs-dark); } .dc-brs .dc-brs__quote-author span{ color:var(--brs-muted); font-size:13.5px; } /* CTA */ .dc-brs .dc-brs__cta{ display:inline-flex; align-items:center; gap:14px; padding:17px 32px; background:var(--brs-dark); color:#fff; text-decoration:none; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; border-radius:100px; transition:all .4s cubic-bezier(.2,.8,.2,1); position:relative; overflow:hidden; } .dc-brs .dc-brs__cta::before{ content:''; position:absolute; inset:0; background:var(--brs-primary); transform:translateX(-100%); transition:transform .45s cubic-bezier(.2,.8,.2,1); z-index:0; } .dc-brs .dc-brs__cta:hover::before{transform:translateX(0);} .dc-brs .dc-brs__cta-text, .dc-brs .dc-brs__cta-icon{ position:relative; z-index:1; } .dc-brs .dc-brs__cta-icon{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.12); transition:transform .4s cubic-bezier(.2,.8,.2,1), background .3s; } .dc-brs .dc-brs__cta:hover .dc-brs__cta-icon{ transform:translateX(4px); background:rgba(255,255,255,.22); } /* ═════════ RIGHT — VISUAL (overlapping panels) ═════════ */ .dc-brs .dc-brs__visual{ position:relative; width:100%; height:820px; opacity:0; transform:translateX(24px); transition:opacity 1s cubic-bezier(.22,1,.36,1) .2s, transform 1s cubic-bezier(.22,1,.36,1) .2s; } .dc-brs.is-in .dc-brs__visual{ opacity:1; transform:translateX(0); } /* Warm gold ambient glow — matches the laser-clinic palette */ .dc-brs .dc-brs__visual::before{ content:''; position:absolute; top:40%; left:50%; width:640px; height:640px; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(200,164,106,.14), transparent 65%); pointer-events:none; z-index:0; } /* Panel card — bigger, more premium */ .dc-brs .dc-brs__panel{ position:absolute; background:rgba(255,255,255,.97); border:1px solid var(--brs-border); border-radius:18px; padding:26px 28px; box-shadow: 0 28px 70px -22px rgba(43,41,38,.22), 0 12px 28px -14px rgba(43,41,38,.14); transform:rotate(var(--brs-rot, 0deg)) translateY(20px); opacity:0; animation:_dcBrsPanelIn .9s cubic-bezier(.2,.8,.2,1) forwards; transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .dc-brs .dc-brs__panel:hover{ transform:rotate(0deg) translateY(-8px); box-shadow: 0 40px 80px -20px rgba(43,41,38,.28), 0 18px 36px -12px rgba(169,131,74,.22); z-index:20 !important; } @keyframes _dcBrsPanelIn{ 0% { opacity:0; transform:rotate(0deg) translateY(40px) scale(.92); } 100% { opacity:1; transform:rotate(var(--brs-rot, 0deg)) translateY(0) scale(1); } } /* Warm gold corner accent */ .dc-brs .dc-brs__panel::before{ content:''; position:absolute; top:0; left:0; width:60px; height:3px; background:linear-gradient(90deg, var(--brs-primary), transparent); border-radius:18px 0 0 0; } /* Panel header */ .dc-brs .dc-brs__panel-head{ display:flex; flex-direction:column; gap:18px; } /* Full-width frame that fully contains the logo without cropping */ .dc-brs .dc-brs__panel-head-top{ display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio: 16 / 10; background:var(--brs-soft, #FBF7F1); border-radius:12px; border:1px solid var(--brs-border); padding:18px; overflow:hidden; } .dc-brs .dc-brs__panel-logo{ display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; object-position:center; transition:transform .4s ease; } .dc-brs .dc-brs__panel:hover .dc-brs__panel-logo{ transform:scale(1.04); } .dc-brs .dc-brs__panel-info{ display:flex; flex-direction:column; gap:6px; padding-bottom:22px; border-bottom:1px solid var(--brs-border); } .dc-brs .dc-brs__panel-name{ font-family:"Times New Roman", Times, serif; font-size:22px; font-weight:700; color:var(--brs-dark); letter-spacing:-.01em; line-height:1.2; } .dc-brs .dc-brs__panel-loc{ font-size:13px; font-weight:600; color:var(--brs-primary); letter-spacing:.08em; text-transform:uppercase; } /* Sub-brands in panel */ .dc-brs .dc-brs__panel-brands{ display:flex; flex-direction:column; gap:8px; margin-top:14px; } .dc-brs .dc-brs__panel-sub{ display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--brs-soft); border-radius:8px; font-size:12px; font-weight:600; color:var(--brs-dark); transition:all .3s ease; } .dc-brs .dc-brs__panel-sub:hover{ background:rgba(200,164,106,.12); } .dc-brs .dc-brs__panel-sub img{ width:22px; height:22px; object-fit:contain; object-position:center; flex-shrink:0; filter:grayscale(100%); opacity:.8; } .dc-brs .dc-brs__panel-sub-initial{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--brs-primary); color:#fff; font-size:10px; font-weight:800; flex-shrink:0; } .dc-brs .dc-brs__panel-sub-loc{ margin-left:auto; font-size:10px; color:var(--brs-muted); font-weight:500; } /* Floating accent badge — transparent, no shadow */ .dc-brs .dc-brs__float-badge{ position:absolute; bottom:-50px; right:10%; display:inline-flex; align-items:center; gap:8px; padding:12px 20px; background:transparent; border:1px solid color-mix(in srgb, var(--brs-primary) 30%, transparent); color:var(--brs-dark); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-radius:100px; box-shadow:none; z-index:12; opacity:0; transform:translateY(20px) scale(.9); animation:_dcBrsFloatIn .9s cubic-bezier(.34,1.56,.64,1) 1.2s forwards; } .dc-brs .dc-brs__float-badge svg{ color:var(--brs-primary); flex-shrink:0; } @keyframes _dcBrsFloatIn{ to{opacity:1; transform:translateY(0) scale(1);} } /* Reduced motion */ @media (prefers-reduced-motion:reduce){ .dc-brs *, .dc-brs *::before, .dc-brs *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ═════════ RESPONSIVE ═════════ */ @media (max-width:1200px){ .dc-brs .dc-brs__layout{ gap:48px; min-height:640px; } .dc-brs .dc-brs__visual{height:620px;} } @media (max-width:1024px){ .dc-brs.dc-brs{padding:80px 0;} .dc-brs .dc-brs__layout{ grid-template-columns:1fr; gap:64px; min-height:auto; } .dc-brs .dc-brs__visual{ height:560px; max-width:640px; margin:0 auto; } } @media (max-width:768px){ .dc-brs.dc-brs{padding:64px 0;} .dc-brs .dc-brs__container{padding:0 20px;} .dc-brs .dc-brs__visual{height:480px;} .dc-brs .dc-brs__panel{padding:14px;} .dc-brs .dc-brs__panel-name{font-size:14px;} .dc-brs .dc-brs__float-badge{ right:50%; transform:translateX(50%) translateY(20px) scale(.9); font-size:10px; padding:10px 16px;display: none; } @keyframes _dcBrsFloatIn{ to{opacity:1; transform:translateX(50%) translateY(0) scale(1);} } } @media (max-width:520px){ .dc-brs .dc-brs__visual{height:420px;} .dc-brs .dc-brs__panel{padding:12px;} .dc-brs .dc-brs__panel-brands{gap:6px;} .dc-brs .dc-brs__panel-sub{padding:6px 8px; font-size:11px;} } /* dc-empowering-cards */ /** * Treatment Cards — TikTok-style feed for NDN.LASER. * Portrait 9:16 cards, video support in .ec-card__media, floating overlay * elements (badge, rating, live dot, caption). AHI palette #1A1A1A + #836436. */ .ec-section { --ec-primary: #1A1A1A; --ec-primary-soft: #2a2620; --ec-accent: #836436; --ec-accent-dark: #6e5330; --ec-accent-soft: rgba(200, 164, 106, 0.18); --ec-text-dark: #0f1a2b; --ec-text-muted: #546070; --ec-surface: #ffffff; --ec-soft: #f6f9f8; --ec-border: rgba(26, 26, 26, 0.08); position: relative; padding: 90px 24px 100px; background: var(--ec-surface); font-family: 'DM Sans', 'Inter', system-ui, sans-serif; color: var(--ec-text-dark); overflow: hidden; } .ec-section *, .ec-section *::before, .ec-section *::after { box-sizing: border-box; } .ec-wrap { max-width: 1240px; margin: 0 auto; } /* ─── Header ─── */ .ec-section .ec-header { text-align: center; margin-bottom: 52px; display: flex; flex-direction: column; align-items: center; } .ec-section .ec-header .dc-eyebrow { margin-bottom: 14px; } .ec-section .ec-title { font-family: "Times New Roman", Times, serif; font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; color: var(--ec-text-dark); margin: 0 0 14px; max-width: 720px; } .ec-section .ec-description { font-family: 'DM Sans', system-ui, sans-serif; font-size: 16.5px; line-height: 1.6; color: var(--ec-text-muted); max-width: 640px; margin: 0; } /* ─── Feed grid ─── */ .ec-section .ec-grid { display: grid; gap: 20px; list-style: none; margin: 0; padding: 0; } .ec-section .ec-grid--2 { grid-template-columns: repeat(2, 1fr); } .ec-section .ec-grid--3 { grid-template-columns: repeat(3, 1fr); } .ec-section .ec-grid--4 { grid-template-columns: repeat(4, 1fr); } .ec-section .ec-card { list-style: none; margin: 0; padding: 0; } .ec-section .ec-card__link { position: relative; display: block; height: 100%; color: inherit; text-decoration: none; border-radius: 24px; overflow: hidden; background: var(--ec-primary); transform: translateZ(0); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease; box-shadow: 0 18px 40px -16px rgba(26, 26, 26, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; } .ec-section .ec-card__link:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 32px 60px -20px rgba(26, 26, 26, 0.5), 0 0 0 1px rgba(200, 164, 106, 0.35) inset; } /* Gradient border on hover (premium feel) */ .ec-section .ec-card__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, rgba(200, 164, 106, 0) 0%, rgba(200, 164, 106, .55) 50%, rgba(200, 164, 106, 0) 100%); -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: 5; } .ec-section .ec-card__link:hover::before { opacity: 1; } /* ─── Portrait media (TikTok 9/16) ─── */ .ec-section .ec-card__media { position: relative; margin: 0; aspect-ratio: 9 / 16; overflow: hidden; background: var(--ec-primary); isolation: isolate; } .ec-section .ec-card__media img, .ec-section .ec-card__media .ec-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .ec-section .ec-card__link:hover .ec-card__media img, .ec-section .ec-card__link:hover .ec-card__media .ec-card__video { transform: scale(1.05); } /* Bottom gradient for caption legibility */ .ec-section .ec-card__gradient { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(26, 26, 26, 0) 35%, rgba(26, 26, 26, 0.55) 70%, rgba(26, 26, 26, 0.92) 100%), linear-gradient(135deg, rgba(26, 26, 26, 0.2) 0%, transparent 55%); pointer-events: none; transition: background 0.35s ease; } .ec-section .ec-card__link:hover .ec-card__gradient { background: linear-gradient(180deg, rgba(26, 26, 26, 0.15) 25%, rgba(26, 26, 26, 0.65) 65%, rgba(26, 26, 26, 0.95) 100%), linear-gradient(135deg, rgba(200, 164, 106, 0.18) 0%, transparent 55%); } /* ─── Floating overlay elements ─── */ .ec-section .ec-card__float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: #ffffff; background: rgba(26, 26, 26, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); white-space: nowrap; animation: ec-float 4s ease-in-out infinite; transition: transform 0.35s ease, background-color 0.35s ease; } .ec-section .ec-card__float--tl { top: 14px; left: 14px; animation-delay: 0s; } .ec-section .ec-card__float--tr { top: 14px; right: 14px; animation-delay: 0.8s; } .ec-section .ec-card__float--bl { bottom: 14px; left: 14px; animation-delay: 1.4s; } .ec-section .ec-card__float--br { bottom: 14px; right: 14px; animation-delay: 1.8s; } @keyframes ec-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } /* Badge pill (technique name) */ .ec-section .ec-card__badge { background: rgba(200, 164, 106, 0.85); border-color: rgba(255, 255, 255, 0.25); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; } /* Rating with star */ .ec-section .ec-card__rating svg { width: 14px; height: 14px; color: #ffd46b; margin-right: 2px; } /* Live indicator for video cards */ .ec-section .ec-card__live { background: rgba(236, 72, 72, 0.72); border-color: rgba(255, 255, 255, 0.28); text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px; } .ec-section .ec-card__live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); animation: ec-live-pulse 1.6s ease-in-out infinite; } @keyframes ec-live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); opacity: 1; } 50% { box-shadow: 0 0 0 6px rgba(255,255,255,0); opacity: .7; } } /* ─── Caption (title + subtitle + CTA) ─── */ .ec-section .ec-card__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 20px 22px; color: #ffffff; text-align: left; } .ec-section .ec-card__title { font-family: "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; line-height: 1.2; color: #ffffff; margin: 0 0 6px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .ec-section .ec-card__subtitle { font-family: 'DM Sans', system-ui, sans-serif; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.8); line-height: 1.4; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ec-section .ec-card__cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.35); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .ec-section .ec-card__cta svg { width: 13px; height: 13px; transition: transform 0.3s ease; } .ec-section .ec-card__link:hover .ec-card__cta { background: #ffffff; color: var(--ec-primary); border-color: #ffffff; transform: translateX(2px); box-shadow: 0 6px 18px -6px rgba(200, 164, 106, 0.6); } .ec-section .ec-card__link:hover .ec-card__cta svg { transform: translateX(3px); } /* ─── CTA row ─── */ .ec-section .ec-cta { display: flex; justify-content: center; margin-top: 44px; } /* ─── Responsive ─── */ @media (max-width: 1024px) { .ec-section { padding: 80px 22px 90px; } .ec-section .ec-grid--4 { grid-template-columns: repeat(3, 1fr); } .ec-section .ec-grid--3 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 820px) { .ec-section .ec-grid--4, .ec-section .ec-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .ec-section { padding: 70px 20px 80px; } .ec-section .ec-grid { gap: 18px; } .ec-section .ec-grid--2, .ec-section .ec-grid--3, .ec-section .ec-grid--4 { grid-template-columns: repeat(2, 1fr); } .ec-section .ec-card__title { font-size: 21px; } .ec-section .ec-card__caption { padding: 18px 16px; } } @media (max-width: 560px) { .ec-section { padding: 56px 16px 64px; } .ec-section .ec-grid { gap: 14px; } .ec-section .ec-grid--2, .ec-section .ec-grid--3, .ec-section .ec-grid--4 { grid-template-columns: 1fr; scroll-snap-type: x mandatory; } .ec-section .ec-card__title { font-size: 20px; } .ec-section .ec-card__caption { padding: 18px 16px; } .ec-section .ec-card__float { font-size: 11px; padding: 5px 10px; } .ec-section .ec-card__media { aspect-ratio: 18 / 16; } } @media (prefers-reduced-motion: reduce) { .ec-section .ec-card__link, .ec-section .ec-card__media img, .ec-section .ec-card__media .ec-card__video, .ec-section .ec-card__float, .ec-section .ec-card__live-dot { animation: none; transition: none; } } /* dc-lc-cta */ /* ========================================================================== Shared UI Components — Eyebrow Tag + Hero Buttons Used across all widgets for consistent styling ========================================================================== */ /* ========================================================================== Hero Eyebrow — Tag Pill ========================================================================== */ .hero-eyebrow { margin-bottom: 20px; } .eyebrow-inner { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #836436; background: linear-gradient(135deg, rgba(23, 70, 138, 0.08) 0%, rgba(30, 90, 173, 0.08) 100%); border: 1px solid rgba(23, 70, 138, 0.2); border-radius: 50px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; overflow: hidden; } .eyebrow-inner svg { flex-shrink: 0; } /* Shimmer sweep */ .eyebrow-inner::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(23, 70, 138, 0.15), transparent); animation: shimmer 3s infinite; } @keyframes shimmer { 0% { left: -100%; } 100% { left: 200%; } } /* ========================================================================== Hero Buttons — Primary + Secondary ========================================================================== */ .hero-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; font-size: 15px; font-weight: 700; line-height: 1; border: none; border-radius: 12px; text-decoration: none; cursor: pointer; overflow: hidden; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease, border-color 0.3s ease; } /* Button layers */ .btn-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: inherit; } .btn-text { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; pointer-events: none; } .btn-shine { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); z-index: 2; pointer-events: none; transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* Icon animation */ .btn-text svg, .btn-text i { width: 20px; height: 20px; transition: transform 0.3s ease; } .hero-btn:hover .btn-text svg, .hero-btn:hover .btn-text i { transform: translateX(4px); } /* ── Primary Button — shared hero-btn-primary (navy → teal on hover) ───── */ .hero-btn-primary { color: #ffffff; background: #1A1A1A; box-shadow: 0 14px 30px -10px rgba(26, 26, 26, 0.45); border: 2px solid transparent; } .hero-btn-primary .btn-bg { display: none; } .hero-btn-primary:hover { background: #836436; transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(200, 164, 106, 0.7); color: #ffffff; } .hero-btn-primary:active { transform: translateY(-1px); } /* ── Secondary Button ───────────────────────────────────────────────────── */ .hero-btn-secondary { color: #1A1A1A; background: transparent; border: 2px solid #1A1A1A; } .hero-btn-secondary .btn-bg { background: #836436; width: 0; opacity: 1; transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .hero-btn-secondary:hover { transform: translateY(-3px); color: #ffffff; box-shadow: 0 10px 30px rgba(23, 70, 138, 0.25); } .hero-btn-secondary:hover .btn-bg { width: 100%; } .hero-btn-secondary:active { transform: translateY(-1px); } /* ── Hover Effects ──────────────────────────────────────────────────────── */ /* Shine sweep */ .hero-btn.hover-shine:hover .btn-shine { left: 100%; } /* Fill effect */ .hero-btn.hover-fill:hover .btn-bg { opacity: 1; } /* Lift effect */ .hero-btn.hover-lift:hover { transform: translateY(-4px) scale(1.02); } /* ========================================================================== Legacy CTA Button (backwards compatibility) ========================================================================== */ .lc-cta-wrapper { display: flex; margin-top: 24px; } .lc-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-size: 15px; font-weight: 600; line-height: 1; color: #ffffff; background-color: #836436; border: none; border-radius: 12px; text-decoration: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .lc-cta-btn:hover { background-color: #6e5330; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(23, 70, 138, 0.25); color: #ffffff; } .lc-cta-btn:active { transform: translateY(0); } .lc-cta-btn-text { position: relative; z-index: 1; } .lc-cta-btn-icon { display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .lc-cta-btn-icon svg, .lc-cta-btn-icon i { width: 16px; height: 16px; font-size: 14px; } .lc-cta-btn:hover .lc-cta-btn-icon { transform: translateX(4px); } .lc-cta-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .lc-cta-btn:hover::before { left: 100%; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 768px) { .eyebrow-inner { padding: 10px 18px; font-size: 12px; } .hero-btn { padding: 12px 24px; font-size: 14px; } .lc-cta-wrapper { margin-top: 20px; } .lc-cta-btn { padding: 12px 24px; font-size: 14px; } .lc-cta-btn-icon svg, .lc-cta-btn-icon i { width: 14px; height: 14px; font-size: 12px; } } @media (max-width: 480px) { .eyebrow-inner { padding: 8px 14px; font-size: 11px; } .hero-btn { padding: 11px 20px; font-size: 13px; } .lc-cta-wrapper { margin-top: 16px; } .lc-cta-btn { padding: 11px 20px; font-size: 13px; gap: 8px; } } /* ========================================================================== Reduced Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { .eyebrow-inner::before { animation: none; display: none; } .hero-btn { transition: box-shadow 0.3s ease !important; } .hero-btn:hover { transform: none !important; } .btn-bg, .btn-shine { transition: none !important; } .btn-text svg, .btn-text i { transition: none !important; } .lc-cta-btn, .lc-cta-btn-icon, .lc-cta-btn::before { transition: none; } .lc-cta-btn:hover { transform: none; } .lc-cta-btn:hover .lc-cta-btn-icon { transform: none; } .lc-cta-btn::before { display: none; } } /* ========================================================================== Accessibility ========================================================================== */ .hero-btn:focus-visible { outline: 3px solid #836436; outline-offset: 4px; } .lc-cta-btn:focus-visible { outline: 3px solid #836436; outline-offset: 4px; } /* dc-usp-grid */ /** * USP Grid — NDN.LASER. * 12-column bento layout with mixed sizes, media-backed cards (image + MP4 loop), * follicle-dot grain and AHI palette (#1A1A1A + #836436). */ .dc-ug { --ug-bg: #f6f9f8; --ug-accent: #836436; --ug-accent-dark: #6e5330; --ug-accent-soft: rgba(200, 164, 106, 0.18); --ug-dark: #1A1A1A; --ug-dark-soft: #2a2620; --ug-card-bg: #1A1A1A; --ug-text: rgba(255, 255, 255, 0.78); --ug-border: rgba(200, 164, 106, 0.18); --ug-radius: 22px; position: relative; background: var(--ug-bg); padding: 100px 24px 110px; overflow: hidden; font-family: 'DM Sans', 'Inter', system-ui, sans-serif; isolation: isolate; } .dc-ug *, .dc-ug *::before, .dc-ug *::after { box-sizing: border-box; } /* Decorative follicle-dot grain + soft teal radial glow */ .dc-ug__grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.7; background-image: radial-gradient(ellipse at 18% 12%, rgba(200, 164, 106, .13) 0%, transparent 45%), radial-gradient(ellipse at 82% 88%, rgba(26, 26, 26, .05) 0%, transparent 55%), radial-gradient(circle at 20% 40%, rgba(200, 164, 106, .22) 1.2px, transparent 2px), radial-gradient(circle at 70% 30%, rgba(200, 164, 106, .18) 1px, transparent 2px), radial-gradient(circle at 45% 80%, rgba(200, 164, 106, .2) 1.4px, transparent 2px), radial-gradient(circle at 85% 60%, rgba(200, 164, 106, .16) 1px, transparent 2px); background-size: auto, auto, 560px 520px, 640px 580px, 720px 620px, 500px 480px; background-position: center, center, 0 0, 100px 60px, 240px 140px, 360px 80px; } .dc-ug__wrap { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; } /* ─── Header ─────────────────────────────── */ .dc-ug__header { text-align: center; max-width: 700px; margin: 0 auto 56px; display: flex; flex-direction: column; align-items: center; } .dc-ug__header .dc-eyebrow { margin-bottom: 14px; } .dc-ug__title { font-family: "Times New Roman", Times, serif; font-size: clamp(30px, 4.2vw, 46px); line-height: 1.12; letter-spacing: -0.01em; color: var(--ug-dark); margin: 0 0 14px; font-weight: 700; } .dc-ug__desc { font-size: 16.5px; line-height: 1.65; margin: 0; max-width: 620px; } /* ─── Bento grid ─────────────────────────────── */ .dc-ug__grid--bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(220px, auto); grid-auto-flow: dense; gap: 18px; } /* Size variants */ .dc-ug__card--size-sm { grid-column: span 4; } .dc-ug__card--size-md { grid-column: span 6; } .dc-ug__card--size-lg { grid-column: span 8; } .dc-ug__card--size-xl { grid-column: span 12; } .dc-ug__card--tall { grid-row: span 2; } /* ─── Card base ─────────────────────────────── */ .dc-ug__card { --card-i: 0; position: relative; background: var(--ug-card-bg); border: 1px solid var(--ug-border); border-radius: var(--ug-radius); padding: 32px 30px 30px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; box-shadow: 0 4px 14px -6px rgba(26, 26, 26, 0.06); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, border-color 0.35s ease; } .dc-ug__card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(200, 164, 106, 0) 0%, rgba(200, 164, 106, .55) 50%, rgba(200, 164, 106, 0) 100%); -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: 4; } .dc-ug__card:hover { transform: translateY(-6px); border-color: rgba(200, 164, 106, 0.25); box-shadow: 0 26px 50px -20px rgba(26, 26, 26, 0.22); } .dc-ug__card:hover::before { opacity: 1; } /* ─── Plain (icon-only) card — dark navy background ─────────────────── */ .dc-ug__card--plain { background: linear-gradient(155deg, var(--ug-dark) 0%, var(--ug-dark-soft) 100%); border-color: rgba(200, 164, 106, 0.2); min-height: 260px; color: #ffffff; } .dc-ug__card--plain::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 164, 106, .32) 0%, transparent 70%); filter: blur(10px); pointer-events: none; z-index: 0; opacity: 0.7; transition: opacity 0.4s ease, transform 0.5s ease; } .dc-ug__card--plain:hover::after { opacity: 1; transform: scale(1.1); } /* ─── Icon in glowing teal ring ─────────────────── */ .dc-ug__card-icon-wrap { position: relative; width: 68px; height: 68px; margin-bottom: auto; display: inline-flex; align-items: center; justify-content: center; z-index: 2; } .dc-ug__card-icon-glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(200, 164, 106, .35) 0%, rgba(200, 164, 106, 0) 70%); opacity: 0; transform: scale(0.8); transition: opacity 0.45s ease, transform 0.6s ease; pointer-events: none; } .dc-ug__card:hover .dc-ug__card-icon-glow { opacity: 1; transform: scale(1.6); } .dc-ug__card-icon { position: relative; width: 58px; height: 58px; border-radius: 50%; background: rgba(200, 164, 106, 0.18); color: #7fd4ce; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(200, 164, 106, 0.3); transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); } .dc-ug__card-icon svg { width: 30px; height: 30px; } .dc-ug__card:hover .dc-ug__card-icon { background: var(--ug-accent); color: #ffffff; border-color: var(--ug-accent); transform: rotate(-6deg) scale(1.04); } /* Media-backed cards: icon sits in top-left with glass effect */ .dc-ug__card--has-media .dc-ug__card-icon-wrap { position: absolute; top: 18px; left: 18px; width: 52px; height: 52px; margin: 0; } .dc-ug__card--has-media .dc-ug__card-icon { width: 44px; height: 44px; background: rgba(255, 255, 255, 0.15); color: #ffffff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.25); } .dc-ug__card--has-media .dc-ug__card-icon svg { width: 24px; height: 24px; } .dc-ug__card--has-media:hover .dc-ug__card-icon { background: var(--ug-accent); color: #ffffff; border-color: var(--ug-accent); } /* ─── Media layer ─────────────────────────────── */ .dc-ug__card-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; } .dc-ug__card-media img, .dc-ug__card-media video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .dc-ug__card--has-media:hover .dc-ug__card-media img, .dc-ug__card--has-media:hover .dc-ug__card-media video { transform: scale(1.04); } .dc-ug__card-media-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26, 26, 26, 0) 35%, rgba(26, 26, 26, .55) 75%, rgba(26, 26, 26, .85) 100%), linear-gradient(135deg, rgba(26, 26, 26, .25) 0%, transparent 60%); z-index: 1; transition: background 0.35s ease; } .dc-ug__card--has-media:hover .dc-ug__card-media-overlay { background: linear-gradient(180deg, rgba(26, 26, 26, .1) 20%, rgba(26, 26, 26, .65) 70%, rgba(26, 26, 26, .88) 100%), linear-gradient(135deg, rgba(200, 164, 106, .2) 0%, transparent 60%); } /* ─── Body ─────────────────────────────── */ .dc-ug__card-body { position: relative; z-index: 2; } .dc-ug__card-title { font-family: "Times New Roman", Times, serif; font-size: 22px; font-weight: 700; line-height: 1.25; color: #ffffff; margin: 16px 0 10px; transition: color 0.3s ease; } .dc-ug__card-text { font-family: 'DM Sans', system-ui, sans-serif; font-size: 14.5px; line-height: 1.6; color: #FFFFFF; margin: 0; } .dc-ug__card--plain:hover .dc-ug__card-title { color: #7fd4ce; } /* Media cards: larger title + slightly softer text */ .dc-ug__card--has-media .dc-ug__card-title { font-size: 26px; line-height: 1.15; margin: 0 0 8px; } .dc-ug__card--has-media .dc-ug__card-text { color: rgba(255,255,255,.82); font-size: 14px; } /* Media card on a tall cell: bigger title */ .dc-ug__card--has-media.dc-ug__card--tall .dc-ug__card-title { font-size: 32px; } .dc-ug__card--has-media.dc-ug__card--size-lg .dc-ug__card-title, .dc-ug__card--has-media.dc-ug__card--size-xl .dc-ug__card-title { font-size: 30px; } /* ─── Accent line ─────────────────────────────── */ .dc-ug__card-accent { position: absolute; left: 0; bottom: 0; height: 3px; width: 42px; background: var(--ug-accent); border-radius: 0 3px 3px 0; transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1); z-index: 2; } .dc-ug__card:hover .dc-ug__card-accent { width: 100%; } .dc-ug__card--has-media .dc-ug__card-accent { height: 4px; } /* Stagger reveal */ .dc-ug__card { animation: dc-ug-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--card-i) * 0.06s); } @keyframes dc-ug-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ─── CTA row ─────────────────────────────── */ .dc-ug__cta { display: flex; justify-content: center; margin-top: 56px; } /* ─── Responsive ─────────────────────────────── */ @media (max-width: 1024px) { .dc-ug { padding: 84px 22px 90px; } .dc-ug__grid--bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(200px, auto); } .dc-ug__card--size-sm { grid-column: span 3; } .dc-ug__card--size-md { grid-column: span 6; } .dc-ug__card--size-lg { grid-column: span 6; } .dc-ug__card--size-xl { grid-column: span 6; } .dc-ug__card--tall { grid-row: span 1; } } @media (max-width: 680px) { .dc-ug { padding: 64px 18px 72px; } .dc-ug__header { margin-bottom: 40px; } .dc-ug__grid--bento { grid-template-columns: 1fr; grid-auto-rows: minmax(180px, auto); gap: 14px; } .dc-ug__card--size-sm, .dc-ug__card--size-md, .dc-ug__card--size-lg, .dc-ug__card--size-xl { grid-column: span 1; } .dc-ug__card { padding: 26px 24px; min-height: 220px; } .dc-ug__card--plain { min-height: 220px; } .dc-ug__card-icon-wrap { width: 60px; height: 60px; } .dc-ug__card-icon { width: 52px; height: 52px; } .dc-ug__card-icon svg { width: 26px; height: 26px; } .dc-ug__card--has-media .dc-ug__card-title { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .dc-ug__card, .dc-ug__card-icon, .dc-ug__card-icon-glow, .dc-ug__card-media img, .dc-ug__card-media video { animation: none; transition: none; } } /* dc-cta-appointment */ /* ========================================================================== CTA Appointment — Floating Images + Custom Icons — 2026 ========================================================================== */ .dc-cta { --cta-bg: #f6f9f8; --cta-surface: #ffffff; --cta-accent: #836436; --cta-accent-dark: #6e5330; --cta-primary: #1A1A1A; --cta-text: #546070; --cta-border: rgba(26, 26, 26, 0.08); --cta-radius: 22px; } /* ── Section ────────────────────────────────────────────────────────────── */ .dc-cta { background: var(--cta-bg); padding: 90px 24px; position: relative; overflow: hidden; border-top: 1px solid var(--cta-border); border-bottom: 1px solid var(--cta-border); } /* ── Ambient glows ──────────────────────────────────────────────────────── */ .dc-cta__glow { position: absolute; border-radius: 50%; filter: blur(130px); pointer-events: none; } .dc-cta__glow--1 { width: 480px; height: 480px; background: var(--cta-accent); opacity: 0.12; top: -160px; right: -100px; } .dc-cta__glow--2 { width: 360px; height: 360px; background: var(--cta-accent); opacity: 0.06; bottom: -120px; left: -60px; } /* ── Layout ─────────────────────────────────────────────────────────────── */ .dc-cta__wrap { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════════════════ BODY — Content Column ═══════════════════════════════════════════════════════════════════════════ */ .dc-cta__body { display: flex; flex-direction: column; } /* Tag — uses shared hero-eyebrow from lc-cta.css */ .dc-cta__body .hero-eyebrow { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s; } .dc-cta--visible .hero-eyebrow { opacity: 1; transform: none; } /* Eyebrow is rendered via the shared DC_Eyebrow helper — no overrides needed. */ .dc-cta .dc-eyebrow { color: #1A1A1A; margin-bottom: 14px; } /* Heading */ .dc-cta__heading { color: var(--cta-primary); font-size: clamp(28px, 4vw, 44px); font-weight: 700; line-height: 1.14; margin: 0 0 16px; letter-spacing: -0.02em; opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease 0.18s, transform 0.5s ease 0.18s; } .dc-cta--visible .dc-cta__heading { opacity: 1; transform: none; } /* Description */ .dc-cta__desc { color: var(--cta-text); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.7; margin: 0 0 30px; max-width: 520px; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease 0.26s, transform 0.5s ease 0.26s; } .dc-cta--visible .dc-cta__desc { opacity: 1; transform: none; } /* ═══════════════════════════════════════════════════════════════════════════ USPs — Custom checkmark, no icon picker ═══════════════════════════════════════════════════════════════════════════ */ .dc-cta__usps { list-style: none; margin: 0 0 36px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; } .dc-cta__usp { display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateX(-10px); transition: opacity 0.35s ease, transform 0.35s ease; } .dc-cta--visible .dc-cta__usp { opacity: 1; transform: none; transition-delay: calc(0.32s + var(--usp-i, 0) * 0.07s); } .dc-cta__usp-check { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: color-mix(in srgb, var(--cta-accent) 18%, transparent); flex-shrink: 0; transition: background 0.25s ease; } .dc-cta__usp-check svg { width: 14px; height: 14px; color: var(--cta-accent); stroke-width: 2.5; } .dc-cta__usp:hover .dc-cta__usp-check { background: color-mix(in srgb, var(--cta-accent) 30%, transparent); } .dc-cta__usp-text { font-size: 14px; font-weight: 600; color: var(--cta-primary); line-height: 1.35; } /* ═══════════════════════════════════════════════════════════════════════════ ACTIONS — CTA Button + Quick pills ═══════════════════════════════════════════════════════════════════════════ */ .dc-cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 14px; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s; } .dc-cta--visible .dc-cta__actions { opacity: 1; transform: none; } /* Primary CTA — match the shared hero-btn-primary (navy → teal on hover) */ .dc-cta__actions .hero-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 999px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; text-decoration: none; background: #1A1A1A; color: #ffffff !important; border: 2px solid transparent; cursor: pointer; box-shadow: 0 14px 30px -10px rgba(26, 26, 26, 0.45); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .dc-cta__actions .hero-btn .btn-bg, .dc-cta__actions .hero-btn .btn-shine { display: none; } .dc-cta__actions .hero-btn .btn-text { display: inline-flex; align-items: center; gap: 8px; } .dc-cta__actions .hero-btn svg { width: 16px; height: 16px; transition: transform 0.2s ease; } .dc-cta__actions .hero-btn:hover { background: #836436; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(200, 164, 106, 0.7); } .dc-cta__actions .hero-btn:hover svg { transform: translateX(3px); } /* Quick action pills — same shape + teal family */ .dc-cta__quick { display: inline-flex; align-items: center; gap: 10px; } .dc-cta__pill { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--cta-primary); background: var(--cta-surface); border: 1px solid var(--cta-border); border-radius: 999px; text-decoration: none; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .dc-cta__pill svg { width: 16px; height: 16px; flex-shrink: 0; } .dc-cta__pill--phone:hover, .dc-cta__pill--wa:hover { background: #836436; border-color: #836436; color: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(200, 164, 106, 0.55); } /* ═══════════════════════════════════════════════════════════════════════════ VISUAL — Floating Image Composition ═══════════════════════════════════════════════════════════════════════════ */ .dc-cta__visual { position: relative; min-height: 460px; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s; /* Contain the floating images (f1, f2 use negative offsets that would otherwise cause horizontal scroll on narrow viewports). */ overflow: visible; } .dc-cta--visible .dc-cta__visual { opacity: 1; transform: none; } /* Shared image style */ .dc-cta__img { position: absolute; overflow: hidden; z-index: 1; } .dc-cta__img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Main image */ .dc-cta__img--main { width: 60%; aspect-ratio: 4 / 5; top: 3%; left: 10%; z-index: 2; border-radius: 22px; box-shadow: 0 10px 24px -10px rgba(26, 26, 26, 0.18), 0 30px 60px -20px rgba(26, 26, 26, 0.25); animation: ctaFloat 6s ease-in-out infinite alternate; } @keyframes ctaFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } } /* Float 1 — top-right overlap */ .dc-cta__img--f1 { width: 36%; aspect-ratio: 3 / 4; top: -3%; right: -2%; z-index: 3; border-radius: 16px; border: none; box-shadow: 0 20px 40px -12px rgba(26, 26, 26, 0.22); transform: rotate(3deg); animation: ctaFloat1 7s ease-in-out 0.5s infinite alternate; } @keyframes ctaFloat1 { 0% { transform: rotate(3deg) translateY(0); } 100% { transform: rotate(3deg) translateY(-8px); } } /* Float 2 — bottom-left overlap */ .dc-cta__img--f2 { width: 34%; aspect-ratio: 1 / 1; bottom: 1%; left: -4%; z-index: 3; border-radius: 16px; border: none; box-shadow: 0 20px 40px -12px rgba(26, 26, 26, 0.22); transform: rotate(-2deg); animation: ctaFloat2 8s ease-in-out 1s infinite alternate; } @keyframes ctaFloat2 { 0% { transform: rotate(-2deg) translateY(0); } 100% { transform: rotate(-2deg) translateY(-7px); } } /* ═══════════════════════════════════════════════════════════════════════════ FLOATING CTA CARD — Bottom Right ═══════════════════════════════════════════════════════════════════════════ */ .dc-cta__float { position: fixed; bottom: 24px; right: 24px; z-index: 990; width: 280px; background: var(--cta-surface); border: 1px solid var(--cta-border); border-radius: 18px; padding: 16px; box-shadow: 0 18px 40px -14px rgba(26, 26, 26, 0.35), 0 0 0 1px rgba(26, 26, 26, 0.04); transform: translateY(120%) scale(0.95); opacity: 0; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease; pointer-events: none; } .dc-cta__float--visible { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; } /* Minimized state */ .dc-cta__float--minimized { width: auto; padding: 0; border-radius: 14px; } .dc-cta__float--minimized .dc-cta__float-body { max-height: 0; opacity: 0; padding-top: 0; overflow: hidden; pointer-events: none; } .dc-cta__float--minimized .dc-cta__float-toggle { border-radius: 14px; padding: 12px 16px; } /* Toggle button */ .dc-cta__float-toggle { position: absolute; top: 0; right: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(26, 26, 26, 0.05); border: none; border-radius: 0 18px 0 12px; cursor: pointer; color: var(--cta-text); transition: background 0.2s, color 0.2s; z-index: 2; } .dc-cta__float-toggle:hover { background: rgba(200, 164, 106, 0.12); color: var(--cta-accent-dark); } /* Icon visibility */ .dc-cta__float-icon--max { display: none; } .dc-cta__float--minimized .dc-cta__float-icon--min { display: none; } .dc-cta__float--minimized .dc-cta__float-icon--max { display: block; } .dc-cta__float--minimized .dc-cta__float-toggle { position: static; width: 100%; border-radius: 14px; } /* Card body */ .dc-cta__float-body { max-height: 300px; opacity: 1; padding-top: 0; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, padding-top 0.35s ease; } /* Duur text */ .dc-cta__float-text { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--cta-text); } .dc-cta__float-text svg { color: var(--cta-accent); flex-shrink: 0; } /* Actions */ .dc-cta__float-actions { display: flex; flex-direction: column; gap: 10px; } .dc-cta__float-btn { display: flex; align-items: center; justify-content: center; padding: 12px 18px; background: var(--cta-accent); color: #ffffff; font-size: 14px; font-weight: 600; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 22px -10px rgba(200, 164, 106, 0.55); transition: background-color 0.25s, transform 0.2s, box-shadow 0.25s; } .dc-cta__float-btn:hover { background: var(--cta-primary); transform: translateY(-1px); color: #ffffff; box-shadow: 0 14px 28px -10px rgba(26, 26, 26, 0.45); } .dc-cta__float-icons { display: flex; gap: 8px; } .dc-cta__float-ico { flex: 1; display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 10px; background: rgba(200, 164, 106, 0.08); border: 1px solid rgba(200, 164, 106, 0.2); text-decoration: none; transition: background 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s; } .dc-cta__float-ico svg { width: 18px; height: 18px; color: var(--cta-accent-dark); } .dc-cta__float-ico--phone:hover, .dc-cta__float-ico--wa:hover { background: var(--cta-accent); border-color: var(--cta-accent); box-shadow: 0 8px 18px -8px rgba(200, 164, 106, 0.55); } .dc-cta__float-ico--phone:hover svg, .dc-cta__float-ico--wa:hover svg { color: #ffffff; } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .dc-cta__wrap { grid-template-columns: 1fr; gap: 48px; max-width: 620px; } .dc-cta__visual { order: -1; min-height: 380px; } .dc-cta__body { align-items: flex-start; text-align: left; } .dc-cta__usps { max-width: 480px; } .dc-cta__actions { justify-content: flex-start; } .dc-cta__quick { justify-content: flex-start; } } @media (max-width: 768px) { .dc-cta { padding: 56px 16px; } .dc-cta__glow--1 { width: 280px; height: 280px; } .dc-cta__glow--2 { width: 220px; height: 220px; } .dc-cta__visual { min-height: 320px; } .dc-cta__img--main { border-radius: 18px; } .dc-cta__img--f1, .dc-cta__img--f2 { border-radius: 14px; } .dc-cta__usps { grid-template-columns: 1fr; max-width: 280px; } .dc-cta__actions { flex-direction: column; align-items: flex-start; gap: 12px; } .dc-cta__actions .hero-btn { width: auto; justify-content: flex-start; } .dc-cta__quick { width: auto; flex-wrap: wrap; } .dc-cta__pill { flex: 0 0 auto; justify-content: flex-start; } } @media (max-width: 480px) { .dc-cta { padding: 40px 14px; } .dc-cta__float { right: 12px; bottom: 12px; width: 260px; padding: 14px; } .dc-cta__heading { font-size: 26px; } /* Visual composition — contain floats so they don't push out of the section on narrow phones. */ .dc-cta__visual { min-height: 280px; margin-bottom: 16px; overflow: clip; } .dc-cta__img--main { width: 72%; left: 14%; top: 0; } .dc-cta__img--f1 { width: 30%; right: 0; top: -2%; } .dc-cta__img--f2 { width: 28%; left: 0; bottom: 4%; } .dc-cta__usp-text { font-size: 13px; } } @media (max-width: 360px) { .dc-cta__visual { min-height: 240px; margin-bottom: 40px; } .dc-cta__img--main { width: 78%; left: 11%; } .dc-cta__img--f1, .dc-cta__img--f2 { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ REDUCED MOTION ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .dc-cta__body .hero-eyebrow, .dc-cta__heading, .dc-cta__desc, .dc-cta__usp, .dc-cta__actions, .dc-cta__visual { opacity: 1 !important; transform: none !important; transition: none !important; } .dc-cta__img--main, .dc-cta__img--f1, .dc-cta__img--f2 { animation: none !important; } .dc-cta__img--f1 { transform: rotate(3deg) !important; } .dc-cta__img--f2 { transform: rotate(-2deg) !important; } .dc-cta__float { transition: none !important; } .dc-cta__pill:hover { box-shadow: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ ELEMENTOR EDITOR ═══════════════════════════════════════════════════════════════════════════ */ .elementor-editor-active .dc-cta__body .hero-eyebrow, .elementor-editor-active .dc-cta__heading, .elementor-editor-active .dc-cta__desc, .elementor-editor-active .dc-cta__usp, .elementor-editor-active .dc-cta__actions, .elementor-editor-active .dc-cta__visual { opacity: 1 !important; transform: none !important; } .elementor-editor-active .dc-cta__img--f1 { transform: rotate(3deg) !important; } .elementor-editor-active .dc-cta__img--f2 { transform: rotate(-2deg) !important; } .elementor-editor-active .dc-cta__float { display: none !important; } /* dc-hair-reveal */ /* ========================================================================== Hair Reveal Widget - CSS Modern Before/After with Organic Blob Reveal Effect ========================================================================== */ /* CSS Variables */ :root { --hr-glow-1: #836436; --hr-glow-2: #1A1A1A; --hr-particle: #ffffff; } /* ========================================================================== Widget Container ========================================================================== */ /* 2-column layout: reveal media left, content aside right */ .hr-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 100px 24px; } .hr-widget { position: relative; width: 100%; max-width: 560px; margin: 0; } /* ── Aside (right column) ── */ .hr-aside { display: flex; flex-direction: column; max-width: 520px; color: #1A1A1A; font-family: 'DM Sans', system-ui, sans-serif; } .hr-aside .dc-eyebrow { margin-bottom: 14px; } .hr-aside__title { font-family: "Times New Roman", Times, serif; font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; line-height: 1.18; color: #1A1A1A; margin: 0 0 16px; letter-spacing: -0.01em; } .hr-aside__desc { font-size: 16px; line-height: 1.65; color: #546070; margin: 0 0 24px; } .hr-aside__usps { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; } .hr-aside__usp { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: #1A1A1A; line-height: 1.5; font-weight: 500; } .hr-aside__usp-check { width: 26px; height: 26px; border-radius: 8px; background: rgba(200, 164, 106, 0.14); color: #836436; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .hr-aside__usp-check svg { width: 14px; height: 14px; } .hr-aside__cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 999px; background: #1A1A1A; color: #ffffff !important; font-family: 'DM Sans', system-ui, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; text-decoration: none; border: 2px solid transparent; cursor: pointer; box-shadow: 0 14px 30px -10px rgba(26, 26, 26, 0.45); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .hr-aside__cta svg { width: 16px; height: 16px; transition: transform 0.2s ease; } .hr-aside__cta:hover { background: #836436; color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(200, 164, 106, 0.7); } .hr-aside__cta:hover svg { transform: translateX(3px); } .hr-container { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; cursor: none; background: linear-gradient(135deg, #1A1A1A 0%, #2a2620 100%); box-shadow: 0 25px 50px -12px rgba(26, 26, 26, 0.4), 0 0 0 1px rgba(26, 26, 26, 0.08); } /* ========================================================================== Image Layers ========================================================================== */ .hr-image-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hr-image { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .hr-before-layer { z-index: 1; } .hr-before-layer .hr-image, .hr-after-layer .hr-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .hr-after-layer { z-index: 2; pointer-events: none; /* Clip-path will be set by JavaScript */ clip-path: circle(0px at 50% 50%); transition: clip-path 0.1s ease-out; } /* ========================================================================== Reveal Blob ========================================================================== */ .hr-reveal-blob { position: absolute; width: var(--blob-size, 280px); height: var(--blob-size, 280px); pointer-events: none; z-index: 10; transform: translate(-50%, -50%) scale(0); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: transform, left, top; } .hr-container:hover .hr-reveal-blob { transform: translate(-50%, -50%) scale(1); } /* ========================================================================== Glow Rings ========================================================================== */ .hr-glow-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .hr-container:hover .hr-glow-ring { opacity: 1; } .hr-glow-ring-1 { width: 100%; height: 100%; background: linear-gradient(135deg, var(--glow-color-1), var(--glow-color-2)); filter: blur(20px); opacity: 0.6; animation: glowPulse1 2s ease-in-out infinite; } .hr-glow-ring-2 { width: 120%; height: 120%; background: linear-gradient(135deg, var(--glow-color-2), var(--glow-color-1)); filter: blur(40px); opacity: 0.4; animation: glowPulse2 2.5s ease-in-out infinite; } .hr-glow-ring-3 { width: 140%; height: 140%; background: radial-gradient(circle, var(--glow-color-1) 0%, transparent 70%); filter: blur(60px); opacity: 0.3; animation: glowPulse3 3s ease-in-out infinite; } @keyframes glowPulse1 { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; } } @keyframes glowPulse2 { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; } 50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.5; } } @keyframes glowPulse3 { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; } 50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.4; } } /* ========================================================================== Particles ========================================================================== */ .hr-particles { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .hr-container:hover .hr-particles { opacity: 1; } .hr-particle { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background: var(--particle-color); border-radius: 50%; opacity: 0; animation: particleFly 2s ease-out infinite; animation-delay: var(--delay); box-shadow: 0 0 10px var(--particle-color), 0 0 20px var(--particle-color); } @keyframes particleFly { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-150px) scale(0); } } /* Extra floating particles */ .hr-particle:nth-child(odd) { width: 4px; height: 4px; animation-duration: 2.5s; } .hr-particle:nth-child(3n) { width: 8px; height: 8px; animation-duration: 1.8s; } /* ========================================================================== Labels ========================================================================== */ .hr-label { position: absolute; display: flex; align-items: center; gap: 8px; padding: 10px 18px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #ffffff; border-radius: 50px; z-index: 20; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.3s ease, opacity 0.3s ease; } .hr-label-before { top: 20px; left: 20px; background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); } .hr-label-after { bottom: 20px; right: 20px; background: #836436; opacity: 0; transform: translateY(10px); box-shadow: 0 10px 24px -8px rgba(200, 164, 106, 0.55); } .hr-container:hover .hr-label-after { opacity: 1; transform: translateY(0); } .hr-label-dot { width: 8px; height: 8px; background: currentColor; border-radius: 50%; } .hr-label-dot-pulse { animation: dotPulse 1.5s ease-in-out infinite; } @keyframes dotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } } /* ========================================================================== Hover Hint ========================================================================== */ .hr-hint { position: absolute; bottom: 50%; left: 50%; transform: translate(-50%, 50%); display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.9); font-size: 14px; font-weight: 500; text-align: center; z-index: 15; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; } .hr-container:hover .hr-hint { opacity: 0; transform: translate(-50%, 50%) scale(0.9); } .hr-hint-icon { width: 24px; height: 24px; animation: hintBounce 1.5s ease-in-out infinite; } @keyframes hintBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .hr-hint-cursor { width: 32px; height: 32px; color: rgba(255, 255, 255, 0.6); animation: cursorMove 2s ease-in-out infinite; } @keyframes cursorMove { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(15px, -10px); } 50% { transform: translate(-10px, 15px); } 75% { transform: translate(10px, 10px); } } /* ========================================================================== Statistics ========================================================================== */ .hr-stats { position: absolute; top: 20px; right: 20px; display: flex; align-items: center; gap: 16px; padding: 14px 20px; background: rgba(255, 255, 255, 0.95); border-radius: 16px; z-index: 20; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(-10px); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; transition-delay: 0.1s; } .hr-container:hover .hr-stats { transform: translateY(0); opacity: 1; } .hr-stat { display: flex; align-items: center; gap: 10px; } .hr-stat-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(200, 164, 106, 0.12); border-radius: 10px; color: #836436; } .hr-stat-icon svg { width: 20px; height: 20px; } .hr-stat-content { display: flex; flex-direction: column; } .hr-stat-value { font-size: 18px; font-weight: 700; color: #1A1A1A; line-height: 1.2; } .hr-stat-label { font-size: 11px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; } .hr-stat-divider { width: 1px; height: 40px; background: linear-gradient(180deg, transparent, #e0e0e0, transparent); } /* ========================================================================== Corner Decorations ========================================================================== */ .hr-corner { position: absolute; width: 40px; height: 40px; border: 2px solid rgba(255, 255, 255, 0.2); z-index: 5; transition: border-color 0.3s ease, transform 0.3s ease; } .hr-corner-tl { top: 12px; left: 12px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; } .hr-corner-tr { top: 12px; right: 12px; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; } .hr-corner-bl { bottom: 12px; left: 12px; border-right: none; border-top: none; border-radius: 0 0 0 8px; } .hr-corner-br { bottom: 12px; right: 12px; border-left: none; border-top: none; border-radius: 0 0 8px 0; } .hr-container:hover .hr-corner { border-color: rgba(102, 126, 234, 0.5); } .hr-container:hover .hr-corner-tl { transform: translate(-4px, -4px); } .hr-container:hover .hr-corner-tr { transform: translate(4px, -4px); } .hr-container:hover .hr-corner-bl { transform: translate(-4px, 4px); } .hr-container:hover .hr-corner-br { transform: translate(4px, 4px); } /* ========================================================================== SVG Definitions (Hidden) ========================================================================== */ .hr-blob-svg { position: absolute; width: 0; height: 0; overflow: hidden; } /* ========================================================================== Responsive Design ========================================================================== */ @media (max-width: 960px) { .hr-layout { grid-template-columns: 1fr; gap: 40px; padding: 40px 20px; } .hr-widget { margin: 0 auto; } .hr-aside { max-width: 640px; margin: 0 auto; text-align: left; } } @media (max-width: 768px) { .hr-widget { max-width: 520px; } .hr-container { aspect-ratio: 4 / 5; } .hr-aside__title { font-size: clamp(24px, 5vw, 32px); } .hr-reveal-blob { --blob-size: 200px !important; } .hr-stats { top: auto; bottom: 70px; right: 50%; transform: translateX(50%) translateY(10px); padding: 10px 16px; gap: 12px; } .hr-container:hover .hr-stats { transform: translateX(50%) translateY(0); } .hr-stat-value { font-size: 16px; } .hr-label { font-size: 11px; padding: 8px 14px; } .hr-hint { font-size: 12px; } } @media (max-width: 480px) { .hr-widget { max-width: 100%; } .hr-container { aspect-ratio: 3 / 4; border-radius: 16px; } .hr-reveal-blob { --blob-size: 160px !important; } .hr-stats { gap: 8px; padding: 8px 12px; } .hr-stat-icon { width: 28px; height: 28px; } .hr-stat-value { font-size: 14px; } .hr-corner { width: 24px; height: 24px; } } /* ========================================================================== Touch Devices ========================================================================== */ @media (hover: none) { .hr-container { cursor: pointer; } .hr-hint span { display: none; } .hr-hint::after { content: 'Tik om resultaat te zien'; } .hr-reveal-blob { top: 50% !important; left: 50% !important; } } /* ========================================================================== Reduced Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { .hr-glow-ring, .hr-particle, .hr-label-dot-pulse, .hr-hint-icon, .hr-hint-cursor { animation: none !important; } .hr-reveal-blob, .hr-label, .hr-stats, .hr-corner, .hr-hint { transition: none !important; } } /* ========================================================================== Elementor Editor ========================================================================== */ .elementor-editor-active .hr-reveal-blob { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) scale(0.8); opacity: 0.7; } .elementor-editor-active .hr-hint { display: none; } .elementor-editor-active .hr-stats, .elementor-editor-active .hr-label-after { opacity: 1; transform: none; } /* dc-faq-accordion */ /* ========================================================================== FAQ Accordion Widget - CSS ========================================================================== */ /* CSS Variables */ :root { --faq-bg: #ffffff; --faq-item-bg: #ffffff; --faq-item-bg-active: rgba(200, 164, 106, 0.08); --faq-border: rgba(26, 26, 26, 0.08); --faq-text-primary: #1A1A1A; --faq-text-secondary: #546070; --faq-accent: #836436; --faq-accent-dark: #6e5330; } /* ========================================================================== Section ========================================================================== */ .faq-section { background-color: var(--faq-bg); padding: 80px 20px; } .faq-container { max-width: 1200px; margin: 0 auto; } .faq-wrapper { display: flex; gap: 60px; align-items: flex-start; } /* ========================================================================== Header (Left Side) ========================================================================== */ .faq-header { width: 35%; flex: 0 0 35%; position: sticky; top: 100px; } .faq-header-content { display: flex; flex-direction: column; gap: 16px; } .faq-title { color: var(--faq-text-primary); font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1.2; margin: 0 0 20px; letter-spacing: -0.02em; } .faq-description { color: var(--faq-text-secondary); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.6; margin: 0; } /* ========================================================================== FAQ Columns ========================================================================== */ .faq-columns { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; } .faq-column { display: flex; flex-direction: column; gap: 16px; } /* ========================================================================== FAQ Item ========================================================================== */ .faq-item { background-color: var(--faq-item-bg); border: 1px solid var(--faq-border); border-radius: 12px; overflow: hidden; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .faq-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .faq-item.is-open { background-color: var(--faq-item-bg-active); } /* Item Header (Question) */ .faq-item-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; user-select: none; transition: background-color 0.2s ease; } .faq-item-header:hover { background-color: rgba(0, 0, 0, 0.02); } .faq-question { color: var(--faq-text-primary); font-size: 16px; font-weight: 600; line-height: 1.4; margin: 0; flex: 1; transition: color 0.3s ease; } .faq-item.is-open .faq-question { color: var(--faq-accent); } /* ========================================================================== Icon - Plus/Minus ========================================================================== */ .faq-icon { width: 24px; height: 24px; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; } .faq-icon-plus { position: relative; } .faq-icon-bar { position: absolute; background-color: var(--faq-text-primary); border-radius: 2px; transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease; } .faq-icon-horizontal { width: 14px; height: 2px; } .faq-icon-vertical { width: 2px; height: 14px; } /* Active state - rotate to minus */ .faq-item.is-open .faq-icon-vertical { transform: rotate(90deg); opacity: 0; } .faq-item.is-open .faq-icon-bar { background-color: var(--faq-accent); } /* ========================================================================== Icon - Arrow ========================================================================== */ .faq-icon-arrow-wrapper { display: flex; align-items: center; justify-content: center; } .faq-icon-arrow { width: 10px; height: 10px; border-right: 2px solid var(--faq-text-primary); border-bottom: 2px solid var(--faq-text-primary); transform: rotate(45deg); transition: transform 0.3s ease, border-color 0.3s ease; margin-top: -4px; } .faq-item.is-open .faq-icon-arrow { transform: rotate(-135deg); margin-top: 4px; border-color: var(--faq-accent); } /* ========================================================================== Answer ========================================================================== */ .faq-answer-wrapper { height: 0; overflow: hidden; padding: 0 !important; transition: height 0.35s ease; } .faq-answer { padding: 0 24px 20px; color: var(--faq-text-secondary); font-size: 15px; line-height: 1.7; } .faq-answer p { margin: 0 0 12px; } .faq-answer p:last-child { margin-bottom: 0; } .faq-answer ul, .faq-answer ol { margin: 0 0 12px; padding-left: 20px; } .faq-answer li { margin-bottom: 6px; } /* ========================================================================== Animations - Entrance ========================================================================== */ .faq-header, .faq-item { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease, background-color 0.3s ease, box-shadow 0.3s ease; } .faq-header.faq-visible, .faq-item.faq-visible { opacity: 1; transform: translateY(0); } /* Stagger items */ .faq-item:nth-child(1) { transition-delay: 0.1s; } .faq-item:nth-child(2) { transition-delay: 0.2s; } .faq-item:nth-child(3) { transition-delay: 0.3s; } .faq-item:nth-child(4) { transition-delay: 0.4s; } .faq-item:nth-child(5) { transition-delay: 0.5s; } .faq-column-right .faq-item:nth-child(1) { transition-delay: 0.15s; } .faq-column-right .faq-item:nth-child(2) { transition-delay: 0.25s; } .faq-column-right .faq-item:nth-child(3) { transition-delay: 0.35s; } .faq-column-right .faq-item:nth-child(4) { transition-delay: 0.45s; } .faq-column-right .faq-item:nth-child(5) { transition-delay: 0.55s; } /* ========================================================================== Responsive Design ========================================================================== */ @media (max-width: 1024px) { .faq-wrapper { flex-direction: column; gap: 40px; } .faq-header { width: 100%; flex: none; position: static; max-width: 600px; } .faq-columns { width: 100%; } } @media (max-width: 768px) { .faq-section { padding: 60px 16px; } .faq-header-content { gap: 12px; } .faq-columns { grid-template-columns: 1fr; gap: 16px; } .faq-column { gap: 12px; } .faq-item-header { padding: 16px 20px; } .faq-question { font-size: 15px; } .faq-answer { padding: 0 20px 16px; font-size: 14px; } } @media (max-width: 480px) { .faq-title { font-size: 24px; } .faq-description { font-size: 14px; } .faq-item-header { padding: 14px 16px; gap: 12px; } .faq-question { font-size: 14px; } .faq-answer { padding: 0 16px 14px; font-size: 13px; } .faq-icon { width: 20px; height: 20px; } .faq-icon-horizontal { width: 12px; } .faq-icon-vertical { height: 12px; } } /* ========================================================================== Reduced Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { .faq-header, .faq-item { opacity: 1; transform: none; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .faq-answer-wrapper { transition: none; } .faq-icon-bar, .faq-icon-arrow, .faq-question { transition: none; } } /* ========================================================================== Elementor Editor ========================================================================== */ .elementor-editor-active .faq-header, .elementor-editor-active .faq-item { opacity: 1; transform: none; } /* ========================================================================== Dark Theme ========================================================================== */ .faq-section[data-theme="dark"] { --faq-bg: #1A1A1A; --faq-item-bg: #2a2620; --faq-item-bg-active: rgba(200, 164, 106, 0.18); --faq-border: rgba(200, 164, 106, 0.22); --faq-text-primary: #ffffff; --faq-text-secondary: rgba(255, 255, 255, 0.72); --faq-accent: #836436; } .faq-section[data-theme="dark"] .eyebrow-inner { color: #7cb876; background: linear-gradient(135deg, rgba(124, 184, 118, 0.1) 0%, rgba(90, 155, 84, 0.1) 100%); border-color: rgba(124, 184, 118, 0.2); } .faq-section[data-theme="dark"] .eyebrow-inner::before { background: linear-gradient(90deg, transparent, rgba(124, 184, 118, 0.15), transparent); } /* ========================================================================== Print Styles ========================================================================== */ @media print { .faq-section { padding: 20px 0; } .faq-wrapper { display: block; } .faq-header { width: 100%; margin-bottom: 20px; } .faq-columns { display: block; } .faq-column { display: block; } .faq-item { page-break-inside: avoid; margin-bottom: 10px; } .faq-answer-wrapper { height: auto !important; } .faq-icon { display: none; } } /* dc-reviews-marquee */ /* ========================================================================== Google Reviews Widget — Modern 2026 ========================================================================== */ /* ── Variables ──────────────────────────────────────────────────────────── */ .dc-rv { --rv-bg: #f6f9f8; --rv-accent: #836436; --rv-accent-dark:#6e5330; --rv-card-bg: #ffffff; --rv-title: #1A1A1A; --rv-text: #546070; --rv-border: rgba(200, 164, 106, 0.18); --rv-star: #C8A46A; } /* ── Section ────────────────────────────────────────────────────────────── */ .dc-rv { background: var(--rv-bg); padding: 64px 0; width: 100%; overflow: hidden; } /* ========================================================================== Google Rating Bar ========================================================================== */ .dc-rv__bar { max-width: 1200px; margin: 0 auto 36px; padding: 0 24px; } .dc-rv__bar-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; } /* Tag — uses shared hero-eyebrow from lc-cta.css */ .dc-rv__bar .hero-eyebrow { justify-content: center; margin-bottom: 18px; } /* ── Heading ────────────────────────────────────────────────────────────── */ .dc-rv__heading { font-size: clamp(24px, 3.5vw, 38px); font-weight: 800; color: var(--rv-title); text-align: center; margin: 0 0 4px; letter-spacing: -0.03em; line-height: 1.2; } /* ── Bar Row (inline rating strip) ─────────────────────────────────────── */ .dc-rv__bar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; background: var(--rv-card-bg); border: 1px solid var(--rv-border); border-radius: 60px; padding: 10px 28px; } /* ── Brand ──────────────────────────────────────────────────────────────── */ .dc-rv__bar-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--rv-title); letter-spacing: -0.01em; } .dc-rv__bar-brand .dc-rv__g-icon { flex-shrink: 0; } /* Divider dot */ .dc-rv__bar-divider { width: 4px; height: 4px; border-radius: 50%; background: var(--rv-border); flex-shrink: 0; } /* ── Rating ─────────────────────────────────────────────────────────────── */ .dc-rv__bar-rating { display: flex; align-items: center; gap: 6px; } .dc-rv__bar-score { font-size: 20px; font-weight: 800; color: var(--rv-title); letter-spacing: -0.02em; } .dc-rv__bar-rating .dc-rv__stars { display: flex; gap: 1px; } /* ── Count ──────────────────────────────────────────────────────────────── */ .dc-rv__bar-count { font-size: 14px; color: var(--rv-text); font-weight: 500; } /* ── Link ───────────────────────────────────────────────────────────────── */ .dc-rv__bar-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--rv-accent); text-decoration: none; transition: opacity 0.2s ease; } .dc-rv__bar-link:hover { opacity: 0.75; } .dc-rv__bar-link svg { transition: transform 0.2s ease; } .dc-rv__bar-link:hover svg { transform: translate(2px, -2px); } /* ========================================================================== Stage — Phone mockup + floating review cards ========================================================================== */ .dc-rv__stage { position: relative; max-width: 1200px; margin: 56px auto 0; padding: 80px 24px 90px; display: flex; align-items: center; justify-content: center; min-height: 560px; } /* Decorative Google G letters in the background */ .dc-rv__g { position: absolute; z-index: 0; pointer-events: none; display: inline-flex; align-items: center; justify-content: center; } .dc-rv__g .dc-rv__g-icon, .dc-rv__g svg, .dc-rv__g img { width: 100%; height: 100%; } .dc-rv__g--tl { top: 8%; left: 4%; width: 120px; height: 120px; opacity: 0.28; } .dc-rv__g--bl { bottom: 14%; left: 16%; width: 80px; height: 80px; opacity: 0.18; } .dc-rv__g--tr { top: 18%; right: 10%; width: 90px; height: 90px; opacity: 0.22; } .dc-rv__g--br { bottom: 6%; right: 3%; width: 140px; height: 140px; opacity: 0.32; } /* ── iPad mockup (landscape — fits a wide video) ── */ .dc-rv__phone { position: relative; z-index: 2; flex: 0 0 auto; } .dc-rv__phone-frame { position: relative; width: clamp(320px, 42vw, 480px); aspect-ratio: 4 / 3; background: #ffffff; border-radius: 30px; padding: 14px; box-shadow: 0 24px 60px -16px rgba(26, 26, 26, 0.28), 0 0 0 1px rgba(26, 26, 26, 0.10), inset 0 0 0 2px rgba(26, 26, 26, 0.06); } /* Front camera — a small centred dot on the top bezel (iPads have no notch) */ .dc-rv__phone-notch { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; background: #101828; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(26, 26, 26, 0.12); z-index: 2; } .dc-rv__phone-screen { position: relative; width: 100%; height: 100%; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #e0f2f0 0%, #c8e6e3 50%, #f6cfd6 100%); } .dc-rv__phone-screen img, .dc-rv__phone-screen video { width: 100%; height: 100%; object-fit: cover; display: block; } .dc-rv__phone-placeholder { position: absolute; inset: 0; background: radial-gradient(circle at 30% 25%, rgba(200, 164, 106, 0.5) 0%, transparent 55%), radial-gradient(circle at 70% 75%, rgba(246, 207, 214, 0.7) 0%, transparent 50%), linear-gradient(160deg, #cfe7e4 0%, #a0cec8 45%, #e9b8c2 100%); } /* ── Floating review cards ── */ .dc-rv__floater { position: absolute; z-index: 1; width: clamp(220px, 24vw, 280px); transition: transform 0.35s ease; } .dc-rv__floater--left-far { top: 20%; left: 2%; /* Depth via scale instead of opacity — faded text failed WCAG contrast. */ transform: rotate(-2deg) scale(0.92); } .dc-rv__floater--left-near { top: 48%; left: 8%; z-index: 3; transform: rotate(-1deg); } .dc-rv__floater--right-near { top: 46%; right: 8%; z-index: 3; transform: rotate(1.5deg); } .dc-rv__floater--right-far { top: 16%; right: 3%; transform: rotate(2deg) scale(0.92); } .dc-rv__floater:hover { transform: translateY(-3px) rotate(0); opacity: 1; } /* ========================================================================== Review Card — Google style ========================================================================== */ .dc-rv__card { background: var(--rv-card-bg); border: 1px solid var(--rv-border); border-radius: 16px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 18px 40px -18px rgba(26, 26, 26, 0.22); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .dc-rv__card:hover { border-color: color-mix(in srgb, var(--rv-accent) 28%, transparent); box-shadow: 0 26px 50px -18px rgba(26, 26, 26, 0.3), 0 0 0 1px color-mix(in srgb, var(--rv-accent) 8%, transparent); } /* A small date chip next to the stars row */ .dc-rv__card-head { display: flex; align-items: center; gap: 10px; } .dc-rv__card-head .dc-rv__stars { flex: 0 0 auto; } .dc-rv__card-head .dc-rv__card-date-inline { font-size: 11.5px; color: var(--rv-text); font-weight: 500; } /* ── Stars ──────────────────────────────────────────────────────────────── */ .dc-rv__stars { display: flex; gap: 1px; line-height: 0; } /* ── Card Text ─────────────────────────────────────────────────────────── */ .dc-rv__card-text { color: var(--rv-title); font-size: 14px; line-height: 1.55; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── Card Footer ───────────────────────────────────────────────────────── */ .dc-rv__card-footer { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--rv-border) 50%, transparent); } /* ── Avatar ─────────────────────────────────────────────────────────────── */ .dc-rv__card-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* Letter initial placeholder */ .dc-rv__card-avatar--initial { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--rv-accent) 10%, transparent); color: var(--rv-accent); font-size: 13px; font-weight: 700; } /* ── Meta ───────────────────────────────────────────────────────────────── */ .dc-rv__card-meta { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .dc-rv__card-name { font-size: 13px; font-weight: 700; color: var(--rv-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dc-rv__card-date { font-size: 11px; color: var(--rv-text); font-weight: 500; } /* ── Google G on card ──────────────────────────────────────────────────── */ .dc-rv__card-footer .dc-rv__g-icon { flex-shrink: 0; opacity: 0.5; transition: opacity 0.2s ease; } .dc-rv__card:hover .dc-rv__card-footer .dc-rv__g-icon { opacity: 0.8; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1024px) { .dc-rv__stage { min-height: 480px; padding: 60px 20px 70px; } .dc-rv__phone-frame { width: min(400px, 100%); } .dc-rv__floater { width: clamp(200px, 28vw, 260px); } .dc-rv__floater--left-far, .dc-rv__floater--right-far { display: none; } } @media (max-width: 768px) { .dc-rv { padding: 48px 0; } .dc-rv__bar { margin-bottom: 28px; } .dc-rv__bar-row { gap: 10px; padding: 8px 20px; } .dc-rv__bar-brand span { font-size: 14px; } .dc-rv__bar-score { font-size: 18px; } .dc-rv__bar-link { display: none; } .dc-rv__stage { flex-direction: column; min-height: 0; padding: 40px 18px 56px; gap: 24px; } .dc-rv__phone-frame { width: min(360px, 100%); } .dc-rv__floater { position: relative; top: auto; left: auto; right: auto; width: 100%; max-width: 360px; transform: none; opacity: 1; } .dc-rv__g--tl, .dc-rv__g--bl, .dc-rv__g--tr, .dc-rv__g--br { opacity: 0.12; } .dc-rv__card { padding: 16px; } .dc-rv__card-text { font-size: 13px; } .dc-rv__card-avatar { width: 28px; height: 28px; } } @media (max-width: 480px) { .dc-rv { padding: 40px 0; } .dc-rv__heading { font-size: 22px; } .dc-rv__bar-row { padding: 8px 16px; gap: 8px; } .dc-rv__bar-divider { display: none; } .dc-rv__bar-count { display: none; } .dc-rv__phone-frame { width: min(300px, 100%); border-radius: 22px; } .dc-rv__phone-notch { width: 6px; height: 6px; } .dc-rv__card { padding: 14px; gap: 10px; } .dc-rv__card-text { font-size: 13px; -webkit-line-clamp: 3; } .dc-rv__card-name { font-size: 12px; } .dc-rv__card-date { font-size: 10px; } .dc-rv__card-avatar { width: 26px; height: 26px; } .dc-rv__card-footer .dc-rv__g-icon { width: 14px; height: 14px; } } /* ========================================================================== Reduced Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { .dc-rv__card, .dc-rv__floater, .dc-rv__bar-link svg, .dc-rv__card-footer .dc-rv__g-icon { transition: none !important; } } /* ========================================================================== Print ========================================================================== */ @media print { .dc-rv { display: none; } } /* dc-blog-showcase */ /** * Blog Showcase Widget Styles * Two-column layout with sticky left + scrollable right * Framer-style scroll reveal animations */ /* ============================================ CSS Variables ============================================ */ :root { --bs-primary-dark: #1A1A1A; --bs-text-gray: #546070; --bs-text-light: #7b8696; --bs-border-gray: rgba(26, 26, 26, 0.08); --bs-accent-blue: #836436; --bs-accent-dark: #6e5330; --bs-white: #FFFFFF; --bs-card-bg: #f6f9f8; --bs-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --bs-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 8px 16px rgba(0, 0, 0, 0.04); } /* ============================================ Section & Container ============================================ */ .bs-section { position: relative; width: 100%; overflow: hidden; background-color: var(--bs-white); padding: 90px 0px; } .bs-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ============================================ Two-Column Layout with Sticky Left ============================================ */ .bs-wrapper { display: flex; flex-direction: column; gap: 48px; } /* Left layout: sticky header, scrollable grid */ .bs-section[data-header-layout="left"] .bs-wrapper { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; } /* Sticky Left Column */ .bs-section[data-header-layout="left"] .bs-header { position: sticky; top: 120px; align-self: start; max-height: calc(100vh - 140px); } /* Scrollable Right Column */ .bs-section[data-header-layout="left"] .bs-grid { min-height: 100%; } /* ============================================ Header Styles ============================================ */ .bs-header { position: relative; } .bs-section[data-header-layout="top"] .bs-header { text-align: center; max-width: 700px; margin: 0 auto; } .bs-header-content { display: flex; flex-direction: column; gap: 16px; } .bs-section[data-header-layout="top"] .bs-header-content { align-items: center; } /* Tag Badge - Hero Eyebrow Style */ .bs-tag-wrapper { display: flex; } .bs-section[data-header-layout="top"] .bs-tag-wrapper { justify-content: center; } .bs-tag { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #836436; background: linear-gradient(135deg, rgba(23, 70, 138, 0.08) 0%, rgba(30, 90, 173, 0.08) 100%); border: 1px solid rgba(23, 70, 138, 0.2); border-radius: 50px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; overflow: hidden; transition: all 0.3s ease; } /* Shimmer effect */ .bs-tag::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(23, 70, 138, 0.15), transparent); animation: bs-shimmer 3s infinite; } @keyframes bs-shimmer { 0% { left: -100%; } 100% { left: 200%; } } /* Title */ .bs-title { font-size: 36px; font-weight: 600; line-height: 1.2; color: var(--bs-primary-dark); letter-spacing: -0.02em; margin: 0; } /* Description */ .bs-description { font-size: 16px; line-height: 1.6; color: var(--bs-text-gray); margin: 0; } /* Button — shared hero-btn-primary pattern (navy → teal on hover) */ .bs-button { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; background-color: #1A1A1A; color: var(--bs-white); text-decoration: none; border-radius: 999px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; border: 2px solid transparent; box-shadow: 0 14px 30px -10px rgba(26, 26, 26, 0.45); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; margin-top: 8px; } .bs-button:hover { background-color: #836436; transform: translateY(-2px); color: var(--bs-white); text-decoration: none; box-shadow: 0 18px 40px -10px rgba(200, 164, 106, 0.7); } .bs-button svg { transition: transform 0.2s ease; } .bs-button:hover svg { transform: translateX(4px); } /* ============================================ Grid Layout ============================================ */ .bs-grid { display: grid; grid-template-columns: repeat(var(--columns, 2), 1fr); gap: 24px; } /* Single column in left layout for better scroll effect */ .bs-section[data-header-layout="left"] .bs-grid { grid-template-columns: repeat(var(--columns, 1), 1fr); } /* ============================================ Card Styles ============================================ */ .bs-card { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 24px; overflow: hidden; transition: var(--bs-transition); } .bs-card:hover { transform: translateY(-4px); box-shadow: var(--bs-shadow); } .bs-card-inner { background-color: var(--bs-card-bg); height: 100%; } .bs-card-link { display: block; text-decoration: none; color: inherit; height: 100%; } .bs-card-link:hover { text-decoration: none; color: inherit; } .bs-card-content { display: flex; flex-direction: column; height: 100%; } /* Scrollable content */ .bs-card-content.has-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.2) transparent; } .bs-card-content.has-scroll::-webkit-scrollbar { width: 6px; } .bs-card-content.has-scroll::-webkit-scrollbar-track { background: transparent; } .bs-card-content.has-scroll::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; } /* ============================================ Featured Image ============================================ */ .bs-post-image { position: relative; height: 200px; overflow: hidden; border-radius: 16px; margin: 16px 16px 0; } .bs-post-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .bs-card:hover .bs-post-image img { transform: scale(1.05); } /* Category Badge */ .bs-post-category { position: absolute; top: 12px; left: 12px; padding: 6px 14px; background-color: var(--bs-accent-blue); color: var(--bs-white); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 20px; z-index: 2; } /* ============================================ Text Content ============================================ */ .bs-text-content { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; } /* Meta Info */ .bs-post-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--bs-text-light); } .bs-post-date, .bs-post-author { display: flex; align-items: center; gap: 6px; } .bs-post-meta svg { opacity: 0.7; } /* Post Title */ .bs-post-title { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--bs-primary-dark); margin: 0; transition: color 0.3s ease; } .bs-card:hover .bs-post-title { color: var(--bs-accent-blue); } /* Excerpt */ .bs-post-excerpt { font-size: 14px; line-height: 1.6; color: var(--bs-text-gray); margin: 0; } /* Read More */ .bs-read-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--bs-accent-blue); margin-top: auto; padding-top: 8px; transition: var(--bs-transition); } .bs-read-more svg { transition: transform 0.3s ease; } .bs-card:hover .bs-read-more svg { transform: translateX(4px); } /* No Posts Message */ .bs-no-posts { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--bs-text-gray); font-size: 16px; } /* ============================================ Scroll Reveal System (Framer-style) Cards animate FROM BOTTOM-RIGHT to position ============================================ */ /* Base reveal class */ .reveal { will-change: opacity, transform; } /* Hidden state - FROM BOTTOM-RIGHT */ .reveal--hidden { opacity: 0; transform: translate(40px, 40px); pointer-events: none; transition: none; } /* Show state - Animate to original position */ .reveal--show { opacity: 1; transform: translate(0, 0); pointer-events: auto; transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); } /* Card specific reveal - enhanced bottom-right animation */ .bs-card.reveal--hidden { opacity: 0; transform: translate(50px, 50px) scale(0.96); } .bs-card.reveal--show { opacity: 1; transform: translate(0, 0) scale(1); transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); } /* Hover effect only after reveal */ .bs-card.reveal--show:hover { transform: translateY(-4px) scale(1); } /* Header reveal - more subtle */ .bs-header.reveal--hidden { opacity: 0; transform: translateY(30px); } .bs-header.reveal--show { opacity: 1; transform: translateY(0); transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1), transform 500ms cubic-bezier(0.22, 1, 0.36, 1); } /* Animation variants */ .reveal--fade.reveal--hidden { transform: none; } .reveal--fade.reveal--show { transform: none; } .reveal--scale.reveal--hidden { opacity: 0; transform: scale(0.9); } .reveal--scale.reveal--show { opacity: 1; transform: scale(1); } .reveal--slide-left.reveal--hidden { opacity: 0; transform: translateX(-60px); } .reveal--slide-left.reveal--show { opacity: 1; transform: translateX(0); } .reveal--slide-right.reveal--hidden { opacity: 0; transform: translateX(60px); } .reveal--slide-right.reveal--show { opacity: 1; transform: translateX(0); } /* Bottom-right variant (default for cards) */ .reveal--bottom-right.reveal--hidden { opacity: 0; transform: translate(40px, 40px); } .reveal--bottom-right.reveal--show { opacity: 1; transform: translate(0, 0); } /* ============================================ Reduced Motion - Instant visibility ============================================ */ @media (prefers-reduced-motion: reduce) { .reveal, .reveal--hidden, .reveal--show, .bs-card.reveal--hidden, .bs-card.reveal--show, .bs-header.reveal--hidden, .bs-header.reveal--show { opacity: 1 !important; transform: none !important; transition: none !important; pointer-events: auto !important; } .bs-card:hover { transform: none !important; } .bs-button, .bs-post-image img, .bs-read-more svg, .bs-tag::before { animation: none; transition: none; } } /* ============================================ No-JS Fallback ============================================ */ .no-js .reveal--hidden { opacity: 1; transform: none; pointer-events: auto; } /* ============================================ Responsive Styles ============================================ */ @media (max-width: 1024px) { /* Disable sticky on tablet */ .bs-section[data-header-layout="left"] .bs-wrapper { display: flex; flex-direction: column; gap: 40px; } .bs-section[data-header-layout="left"] .bs-header { position: relative; top: 0; max-height: none; text-align: center; } .bs-section[data-header-layout="left"] .bs-header-content { align-items: center; } .bs-section[data-header-layout="left"] .bs-grid { grid-template-columns: repeat(2, 1fr); } .bs-title { font-size: 32px; } .bs-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .bs-title { font-size: 28px; } .bs-description { font-size: 15px; } .bs-grid, .bs-section[data-header-layout="left"] .bs-grid { grid-template-columns: 1fr; } .bs-post-title { font-size: 18px; } .bs-post-image { height: 180px; margin: 12px 12px 0; } .bs-text-content { padding: 16px; } /* Reduce animation distance on mobile */ .bs-card.reveal--hidden { transform: translate(30px, 30px) scale(0.98); } } @media (max-width: 480px) { .bs-title { font-size: 24px; } .bs-tag { padding: 10px 18px; font-size: 12px; } .bs-button { padding: 12px 24px; font-size: 14px; } .bs-post-image { height: 160px; border-radius: 12px; } .bs-card { border-radius: 20px; } .bs-post-meta { font-size: 12px; gap: 12px; } /* Minimal animation on small screens */ .bs-card.reveal--hidden { transform: translate(20px, 20px); } } /* ============================================ Print Styles ============================================ */ @media print { .bs-section[data-header-layout="left"] .bs-wrapper { display: block; } .bs-section[data-header-layout="left"] .bs-header { position: relative; } .bs-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; } .bs-card, .bs-card.reveal--hidden, .bs-card.reveal--show { opacity: 1 !important; transform: none !important; } .bs-post-image img { transform: none; } } /* dc-lazy-video */ /** * Lazy Video Loading Styles */ /* Video loading state */ .lazy-video { background-color: #f0f0f0; background-image: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%); background-size: 200% 100%; animation: lazy-shimmer 1.5s infinite; } @keyframes lazy-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Loaded state */ .lazy-video.lazy-loaded { background: none; animation: none; } /* Lazy iframe loading state */ .lazy-iframe { background-color: #f0f0f0; background-image: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%); background-size: 200% 100%; animation: lazy-shimmer 1.5s infinite; } .lazy-iframe.lazy-loaded { background: none; animation: none; } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { .lazy-video, .lazy-iframe { animation: none; background-image: none; } } /* base-desktop */ .elementor .e-div-block-base{min-width:30px;padding:10px;display:block;}.elementor .e-flexbox-base{padding:10px;display:flex;flex-direction:row;}.elementor .e-grid-base{column-gap:20px;padding:10px;display:grid;row-gap:20px;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(2, 1fr);}.elementor .e-tabs-base{padding-block-start:0px;display:flex;flex-direction:column;gap:30px;}.elementor .e-tabs-menu-base{display:flex;justify-content:center;}.elementor .e-tab-base{width:160px;color:#0C0D0E;cursor:pointer;padding:8px;border-width:2px;border-color:#E0E0E0;border-style:solid;background-color:#FFFFFF;display:block;}.elementor .e-tab-base.e--selected{border-color:#0C0D0E;outline-width:0px;}.elementor .e-tab-base:focus{border-color:#0C0D0E;outline-width:0px;}.elementor .e-tab-base:hover,.elementor .e-tab-base:focus-visible{background-color:#E0E0E0;}.elementor .e-tabs-content-area-base{display:block;}.elementor .e-tab-content-base{min-width:30px;padding:10px;display:block;}.elementor .e-form-base{display:block;}.elementor .e-collection-loop-base{display:block;}.elementor .e-heading-base{margin:0px;}.elementor .e-heading-link-base{all:unset;cursor:pointer;}.elementor .e-image-link-base{width:fit-content;all:unset;cursor:pointer;display:inherit;}.elementor .e-image-base{display:block;}.elementor .e-paragraph-base{margin:0px;}.elementor .e-paragraph-link-base{all:unset;cursor:pointer;}.elementor .e-svg-base{width:65px;height:65px;display:inline-block;}.elementor .e-button-base{text-align:center;padding-block-start:12px;padding-block-end:12px;padding-inline-start:24px;padding-inline-end:24px;border-radius:2px;border-width:0px;background-color:#375EFB;display:inline-block;}.elementor .e-youtube-base{overflow:hidden;aspect-ratio:16/9;}.elementor .e-divider-base{height:1px;border-width:0px;border-color:transparent;border-style:none;background-color:#000;}.elementor .e-self-hosted-video-base{max-width:100vw;aspect-ratio:16/9;display:inline-block;} /* 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;} }