/* ═══════════════════════════════════════════════════════════════════════ Cozy Cove Dental — shared stylesheet (static build) Visual design preserved exactly from the original React build. ═══════════════════════════════════════════════════════════════════════ */ html, body { min-height: 100%; } html, body { overflow-x: clip; } /* prevent sideways scroll without making a scroll container (avoids smooth-scroll jank) */ body { margin: 0; background: #F4EADA; font-family: 'Outfit', sans-serif; color: #3C3530; -webkit-font-smoothing: antialiased; } /* Fixed-rail offset. Sidebar width + all content left-padding read this var, so mobile shrinks both in lockstep and content is never cut off. */ :root { --rail: 112px; } .pl-rail { padding-left: var(--rail); } .w-rail { width: var(--rail); } .left-rail { left: var(--rail); } /* Default link colors (users add links in the editor later). */ a { color: #A07C4E; text-decoration: none; } a:hover { color: #7A5F45; } /* ── Load-in reveal used by the fixed sidebar ─────────────────────────── */ .reveal { opacity: 0; transform: translateY(14px); animation: revealUp 1s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes revealUp { to { opacity: 1; transform: translateY(0); } } /* ── Grain — fine SVG noise ───────────────────────────────────────────── */ .grain { background-image: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; opacity: 0.18; mix-blend-mode: overlay; pointer-events: none; } /* ── Shimmer for gold buttons ─────────────────────────────────────────── */ .shimmer { background: linear-gradient(110deg, transparent 0%, rgba(255,250,225,0.55) 45%, rgba(255,250,225,0.85) 50%, rgba(255,250,225,0.55) 55%, transparent 100%); transform: translateX(-150%) skewX(-18deg); transition: transform 0.85s ease; } .group:hover .shimmer { transform: translateX(420%) skewX(-18deg); } /* ── Sway ─────────────────────────────────────────────────────────────── */ @keyframes sway { 0% { transform: rotate(-1deg) translateY(0); } 100% { transform: rotate(1deg) translateY(4px); } } /* ── Slim scrollbar (hidden desktop track; smooth-scroll handles feel) ─── */ ::-webkit-scrollbar { width: 0; height: 0; } /* Nav item transitions */ .nav-item { transition: opacity 600ms cubic-bezier(0.22,1,0.36,1), transform 600ms cubic-bezier(0.22,1,0.36,1); } @keyframes panelFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes softFloat { 0%,100% { transform: translateY(0) rotate(var(--baseRot,0deg)); } 50% { transform: translateY(-6px) rotate(calc(var(--baseRot,0deg) + 1.5deg)); } } @keyframes bloomIn { from { transform: scale(1.08); filter: brightness(0.92) saturate(0.85); } to { transform: scale(1); filter: brightness(1) saturate(1); } } /* ─── Scroll reveal variants ──────────────────────────────────────────── */ .rv-up { opacity: 0; transform: translateY(16px); } .rv-up.is-shown { opacity: 1; transform: translateY(0); transition: opacity 900ms cubic-bezier(0.22,1,0.36,1) var(--rv-delay,0ms), transform 900ms cubic-bezier(0.22,1,0.36,1) var(--rv-delay,0ms); } .rv-blur { opacity: 0; filter: blur(14px); transform: scale(1.05); } .rv-blur.is-shown { opacity: 1; filter: blur(0); transform: scale(1); transition: opacity 1200ms cubic-bezier(0.22,1,0.36,1) var(--rv-delay,0ms), filter 1400ms cubic-bezier(0.22,1,0.36,1) var(--rv-delay,0ms), transform 1600ms cubic-bezier(0.22,1,0.36,1) var(--rv-delay,0ms); } .rv-clip { clip-path: inset(100% 0 0 0); opacity: 0; } .rv-clip.is-shown { clip-path: inset(0 0 0 0); opacity: 1; transition: clip-path 1200ms cubic-bezier(0.77,0,0.18,1) var(--rv-delay,0ms), opacity 800ms cubic-bezier(0.22,1,0.36,1) var(--rv-delay,0ms); } .rv-wipe { clip-path: inset(0 100% 0 0); opacity: 0; } .rv-wipe.is-shown { clip-path: inset(0 0 0 0); opacity: 1; transition: clip-path 1100ms cubic-bezier(0.77,0,0.18,1) var(--rv-delay,0ms), opacity 700ms cubic-bezier(0.22,1,0.36,1) var(--rv-delay,0ms); } .rv-slide-l { opacity: 0; transform: translateX(-30px); } .rv-slide-l.is-shown { opacity: 1; transform: translateX(0); transition: opacity 900ms cubic-bezier(0.22,1,0.36,1) var(--rv-delay,0ms), transform 1100ms cubic-bezier(0.22,1,0.36,1) var(--rv-delay,0ms); } .rv-slide-r { opacity: 0; transform: translateX(30px); } .rv-slide-r.is-shown { opacity: 1; transform: translateX(0); transition: opacity 900ms cubic-bezier(0.22,1,0.36,1) var(--rv-delay,0ms), transform 1100ms cubic-bezier(0.22,1,0.36,1) var(--rv-delay,0ms); } .rv-scale { opacity: 0; transform: scale(0.94); } .rv-scale.is-shown { opacity: 1; transform: scale(1); transition: opacity 1000ms cubic-bezier(0.22,1,0.36,1) var(--rv-delay,0ms), transform 1200ms cubic-bezier(0.22,1,0.36,1) var(--rv-delay,0ms); } .rv-word { display: inline-block; opacity: 0; transform: translateY(0.4em); will-change: transform, opacity; } .rv-word.is-shown { opacity: 1; transform: translateY(0); transition: opacity 800ms cubic-bezier(0.22,1,0.36,1) var(--rv-delay,0ms), transform 1000ms cubic-bezier(0.22,1,0.36,1) var(--rv-delay,0ms); } /* Animated timeline connector (For Patients — What to Expect) */ .sig-write { clip-path: inset(0 100% 0 0); opacity: 0; } .sig-write.is-shown { clip-path: inset(0 0 0 0); opacity: 1; transition: clip-path 1900ms cubic-bezier(0.62,0.02,0.30,1) var(--rv-delay,0ms), opacity 350ms ease var(--rv-delay,0ms); } .rv-line { transform: scaleX(0); transform-origin: left center; } .rv-line.is-shown { transform: scaleX(1); transition: transform 1700ms cubic-bezier(0.65,0,0.35,1) var(--rv-delay,0ms); } @media (prefers-reduced-motion: reduce) { .rv-up, .rv-blur, .rv-clip, .rv-wipe, .rv-slide-l, .rv-slide-r, .rv-scale, .rv-word, .sig-write { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } .rv-line { transform: scaleX(1) !important; } .reveal { opacity: 1 !important; transform: none !important; animation: none !important; } } /* ═══════════════════════ Slide-out navigation ═══════════════════════════ */ .nav-backdrop { opacity: 0; pointer-events: none; transition: opacity 500ms ease; background: rgba(40,30,22,0.45); backdrop-filter: blur(4px); } body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; } .nav-panel { left: var(--rail); width: 400px; transform: translateX(calc(-100% - 140px)); visibility: hidden; transition: transform 700ms cubic-bezier(0.22,1,0.36,1), visibility 0ms linear 700ms; background: linear-gradient(180deg, #F4E8D2 0%, #EBDDC2 100%); box-shadow: 24px 0 60px -20px rgba(40,30,20,0.35); } body.nav-open .nav-panel { transform: translateX(0); visibility: visible; transition: transform 700ms cubic-bezier(0.22,1,0.36,1), visibility 0ms; } /* Two stacked views inside the panel */ .nav-view { transition: transform 480ms cubic-bezier(0.22,1,0.36,1), opacity 380ms ease; } .nav-rootview { transform: translateX(0); opacity: 1; pointer-events: auto; } .nav-servicesview { transform: translateX(32px); opacity: 0; pointer-events: none; } .nav-panel.show-services .nav-rootview { transform: translateX(-32px); opacity: 0; pointer-events: none; } .nav-panel.show-services .nav-servicesview { transform: translateX(0); opacity: 1; pointer-events: auto; } /* Active-page indicator in the root nav list */ .nav-dot { display: none !important; } .nav-label { color: #3C3530; transition: color 300ms ease; } .nav-panel[data-active="home"] [data-id="home"] .nav-dot, .nav-panel[data-active="about"] [data-id="about"] .nav-dot, .nav-panel[data-active="services"] [data-id="services"] .nav-dot, .nav-panel[data-active="patients"] [data-id="patients"] .nav-dot, .nav-panel[data-active="contact"] [data-id="contact"] .nav-dot { display: block; } .nav-panel[data-active="home"] [data-id="home"] .nav-label, .nav-panel[data-active="about"] [data-id="about"] .nav-label, .nav-panel[data-active="services"] [data-id="services"] .nav-label, .nav-panel[data-active="patients"] [data-id="patients"] .nav-label, .nav-panel[data-active="contact"] [data-id="contact"] .nav-label { color: #7A5F45; } /* Nav item stagger — gated on open + which view is showing */ .nav-rootview .nav-item { opacity: 0; transform: translateX(-24px); } .nav-servicesview .nav-item { opacity: 0; transform: translateX(-16px); } body.nav-open .nav-panel:not(.show-services) .nav-rootview .nav-item { opacity: 1; transform: translateX(0); } body.nav-open .nav-panel.show-services .nav-servicesview .nav-item { opacity: 1; transform: translateX(0); } /* ── Services submenu — readability pass ──────────────────────────────── */ /* Own scroll region: keep wheel/touch inside the menu, never the page. */ [data-rdp-services-menu] { overscroll-behavior: contain; padding-top: 28px; padding-bottom: 24px; } /* Section groups get generous separation */ [data-rdp-services-menu] > div + div { margin-top: 40px; } /* Category header — clearer, a touch larger, more air beneath */ [data-rdp-services-menu] > div > div:first-child { font-size: 12px !important; letter-spacing: 0.34em !important; padding-bottom: 16px !important; margin-bottom: 6px; } /* Rows: bigger tap targets, no cramped hairline dividers, soft hover fill */ [data-rdp-services-menu] li > a { border-bottom: none !important; padding: 16px 18px !important; margin: 0 -18px; border-radius: 12px; transition: background 320ms cubic-bezier(0.22,1,0.36,1), transform 320ms cubic-bezier(0.22,1,0.36,1); } [data-rdp-services-menu] li > a:hover { background: rgba(176,144,74,0.09); transform: translateX(4px); } /* Service name — larger, more legible for patients */ [data-rdp-services-menu] .nav-svc { font-size: 25px !important; line-height: 1.3 !important; } [data-rdp-services-menu] li > a svg { width: 16px; height: 16px; } /* ── Body scroll-lock while the nav is open ───────────────────────────── */ body.nav-open { overflow: hidden; } /* ═══════════════════════ Insurance tabs (homepage) ══════════════════════ */ .ins-tab { background: #7A93A4; color: #F2E6CC; padding: 20px 22px 20px 26px; box-shadow: 0 6px 16px -10px rgba(40,55,70,0.45); font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 400; letter-spacing: 0.01em; text-align: left; width: 100%; transition: background 500ms cubic-bezier(0.22,1,0.36,1), color 500ms cubic-bezier(0.22,1,0.36,1), box-shadow 500ms cubic-bezier(0.22,1,0.36,1), transform 350ms cubic-bezier(0.22,1,0.36,1); } .ins-tab:hover:not(.active) { background: #86A0B0; transform: translateX(3px); } .ins-tab.active { background: #FFFCF3; color: #A07C4E; font-weight: 500; box-shadow: 0 12px 28px -16px rgba(80,55,30,0.30), inset 3px 0 0 #B0904A; } .ins-panel { display: none; } .ins-panel.active { display: block; animation: panelFade 480ms cubic-bezier(0.22,1,0.36,1); } /* ═══════════════════════ FAQ accordion (all pages) ══════════════════════ */ .faq-item { border-top: 1px solid rgba(176,144,74,0.22); } .faq-item.faq-last { border-bottom: 1px solid rgba(176,144,74,0.22); } .faq-q { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 24px; padding: 28px 0; text-align: left; } .faq-q::-webkit-details-marker { display: none; } .faq-qtext { flex: 1 1 auto; font-family: "Cormorant Garamond", serif; color: #503D2B; font-size: clamp(20px, 1.7vw, 25px); font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; transition: color 300ms ease; } .faq-item:hover .faq-qtext, details[open] .faq-qtext { color: #3C2E22; } .faq-plus { flex-shrink: 0; margin-top: 6px; } .faq-plus .v { transform-origin: 12px 12px; transition: transform 380ms cubic-bezier(0.22,1,0.36,1); } details[open] .faq-plus .v { transform: rotate(90deg); } .faq-a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 420ms cubic-bezier(0.22,1,0.36,1), opacity 380ms cubic-bezier(0.22,1,0.36,1); } details[open] .faq-a { grid-template-rows: 1fr; opacity: 1; } .faq-a > .faq-a-inner { overflow: hidden; } .faq-a-inner > div { padding: 0 8px 30px 24px; font-family: 'Outfit', sans-serif; color: #7A5F45; font-size: 15.5px; font-weight: 300; line-height: 1.75; letter-spacing: 0.005em; text-wrap: pretty; max-width: 640px; } @media (min-width: 1024px) { .faq-q { padding: 32px 0; } .faq-a-inner > div { padding: 0 8px 32px 32px; } } @media (prefers-reduced-motion: reduce) { .faq-a { transition: none; } } /* ═══════════════════════ Form fields (contact) ══════════════════════════ */ .cc-field:focus { outline: none; border-color: #B0904A !important; } .cc-field.cc-boxed:focus { background: rgba(255,253,245,0.85) !important; } .footer-input:focus { border-bottom-color: #D6B97A !important; } /* Hover states that were JS handlers in the original build */ .qlink:hover { transform: translateY(-3px); border-color: rgba(176,144,74,0.65) !important; box-shadow: 0 18px 36px -18px rgba(120,90,40,0.35) !important; } .footer-social:hover { color: #D6B97A !important; border-color: rgba(214,185,122,0.65) !important; transform: translateY(-2px); } .nav-svc { color: #3C3530; } a:hover .nav-svc { color: #7A5F45; } /* ═══════════════════════ Mobile responsiveness ══════════════════════════ */ /* Hero: video on desktop, static image on mobile (perf). */ #hero-mobile-img { display: none; } @media (max-width: 640px) { /* No left offset on mobile — the rail moves to the top. */ :root { --rail: 0px; } #hero-video { display: none !important; } #hero-mobile-img { display: block; } /* Rail becomes a horizontal top bar: logo left, actions + hamburger right. */ .site-rail { top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 64px; flex-direction: row; align-items: center; justify-content: flex-start; padding: 0 20px; } /* Right-side divider becomes a bottom hairline. */ .site-rail > .w-px { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 1px; } .site-rail img { width: 48px !important; } .site-rail .ham { width: 44px; height: 44px; order: 2; margin-left: 14px; } .site-rail .ham span.block { width: 24px !important; } .site-rail .rail-actions { order: 1; margin-left: auto; gap: 18px; } .site-rail .rail-actions svg { width: 24px; height: 24px; } /* Clear the fixed top bar. */ body { padding-top: 64px; } .nav-panel { width: 88vw; } /* Equalize the panel's left/right insets on mobile (pl-14 vs pr-10). */ .nav-panel .pl-14 { padding-left: 40px !important; } .nav-panel .px-14 { padding-left: 40px !important; padding-right: 40px !important; } [data-rdp-services-menu] .nav-svc { font-size: 22px !important; } /* Hero: smaller headline; compact CTAs side-by-side; drop the icons. */ .hero-h1 { font-size: 34px !important; line-height: 1.1 !important; } .hero-ctas { gap: 10px !important; flex-wrap: nowrap !important; margin-top: 28px !important; } .hero-cta { height: 46px !important; padding-left: 16px !important; padding-right: 16px !important; gap: 0 !important; } .hero-cta svg { display: none !important; } .hero-cta-phone span:last-child { font-size: 14px !important; } .hero-cta-book span:last-child { font-size: 11px !important; letter-spacing: 0.1em !important; } /* Intro section under the hero: match hero headline size, let it wrap; shrink sub + Google button. */ .intro-h2 { font-size: 34px !important; line-height: 1.12 !important; } .intro-h2 .rv-split { white-space: normal !important; } .intro-sub { font-size: 14px !important; line-height: 1.7 !important; margin-top: 24px !important; } .intro-google { padding: 12px 18px !important; gap: 12px !important; } .intro-google > svg { width: 32px !important; height: 32px !important; } .intro-google span[style*="font-size:16px"] { font-size: 13px !important; } .intro-google span svg { width: 15px !important; height: 15px !important; } /* "Where Comfort Meets Care" section: collapse height, shrink card, trim copy, drop signature. */ .intro2-section { min-height: 0 !important; } .intro2-wrap { min-height: 0 !important; padding-top: 48px !important; padding-bottom: 48px !important; } .intro2-card { padding: 30px 22px !important; } .intro2-h2 { font-size: 30px !important; } .intro2-card p { font-size: 14px !important; line-height: 1.6 !important; margin-top: 20px !important; } .intro2-more { display: none !important; } .intro2-card p::after { content: "."; } .sig-block { display: none !important; } /* ═══════════ Homepage-wide mobile optimization (scoped to .home-page) ═══════════ */ /* Consistent smaller section headings; allow wrapping (also fixes the nowrap final-CTA heading). */ .home-page section h2:not(.intro-h2) { font-size: 30px !important; line-height: 1.14 !important; white-space: normal !important; } .home-page section h3 { font-size: 23px !important; } /* Tighter vertical rhythm between and within sections. */ .home-page .py-24, .home-page .py-28, .home-page .py-32, .home-page .py-40 { padding-top: 52px !important; padding-bottom: 52px !important; } .home-page .pt-24 { padding-top: 52px !important; } .home-page .pb-20, .home-page .pb-24 { padding-bottom: 44px !important; } .home-page .mt-12 { margin-top: 26px !important; } .home-page .mt-14 { margin-top: 30px !important; } .home-page .mt-16 { margin-top: 32px !important; } .home-page .mb-16, .home-page .mb-24 { margin-bottom: 26px !important; } .home-page .space-y-20 > :not([hidden]) ~ :not([hidden]) { margin-top: 44px !important; } /* Services: shorter landscape imagery instead of tall 4:5 portraits. */ .home-page .svc-grid { margin-top: 30px !important; gap: 34px !important; } .home-page .svc-grid > div > div:first-child { aspect-ratio: 16 / 10 !important; } /* Office gallery → native swipe carousel; hide desktop arrow/dot controls. */ .home-page [data-gallery-track] { transform: none !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-right: 24px; scrollbar-width: none; } .home-page [data-gallery-track]::-webkit-scrollbar { display: none; } .home-page [data-gallery-slide] { width: 82vw !important; scroll-snap-align: center; } .home-page .gallery-controls { display: none !important; } /* Team: rein in the tall doctor portraits (contact photo is .rv-blur.relative, untouched). */ .home-page .rv-blur:not(.relative) { max-width: 230px; margin-left: auto; margin-right: auto; } /* Testimonials: horizontal swipe carousel on mobile (next card peeks; clear swipe hint). */ .home-page .tst-grid { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 32px; -webkit-overflow-scrolling: touch; gap: 14px !important; margin-left: -32px !important; margin-right: -32px !important; padding: 4px 32px 10px 32px !important; scrollbar-width: none; } .home-page .tst-grid::-webkit-scrollbar { display: none; } .home-page .tst-grid > div { flex: 0 0 80vw !important; scroll-snap-align: start; } .home-page .tst-grid > div > div { padding: 28px 22px 22px !important; } .home-page .tst-grid p { font-size: 16px !important; line-height: 1.5 !important; } .home-page .tst-grid [style*="font-size:88px"] { font-size: 58px !important; } /* Swipe affordance under the testimonials. */ .home-page .tst-swipe-hint { display: flex !important; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font-family: 'Outfit', sans-serif; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: #9A7E52; font-weight: 500; } .home-page .tst-swipe-hint svg { width: 16px; height: 16px; } .home-page .tst-swipe-hint .tsh-r { animation: tshNudgeR 1.6s ease-in-out infinite; } .home-page .tst-swipe-hint .tsh-l { animation: tshNudgeL 1.6s ease-in-out infinite; } /* Insurance answer panel: shorter and tighter. */ .home-page .ins-box { min-height: 0 !important; padding: 24px 22px !important; } /* Standalone CTA buttons: shorter, matching the hero treatment. */ .home-page a.mcta { height: 48px !important; padding-left: 22px !important; padding-right: 22px !important; } /* ═══════════ Other pages mobile optimization — About / For Patients / Contact / Services / Veneers (.mopt) ═══════════ */ .mopt section h1 { font-size: 36px !important; line-height: 1.08 !important; } .mopt section h2 { font-size: 30px !important; line-height: 1.14 !important; white-space: normal !important; } .mopt section h3 { font-size: 23px !important; line-height: 1.16 !important; } /* Tighter vertical rhythm (heroes + sections). */ .mopt .py-36, .mopt .py-32 { padding-top: 56px !important; padding-bottom: 56px !important; } .mopt .py-24, .mopt .py-28 { padding-top: 52px !important; padding-bottom: 52px !important; } .mopt .mt-14, .mopt .mt-16 { margin-top: 30px !important; } .mopt .mb-20, .mopt .mb-24 { margin-bottom: 28px !important; } .mopt .space-y-24 > :not([hidden]) ~ :not([hidden]), .mopt .space-y-32 > :not([hidden]) ~ :not([hidden]) { margin-top: 44px !important; } /* Cap tall 4:5 portrait imagery so it isn't full-bleed on mobile. */ .mopt [style*="aspect-ratio:4 / 5"] { max-width: 280px !important; margin-left: auto !important; margin-right: auto !important; } /* Compact card padding. */ .mopt .p-9, .mopt .p-10 { padding: 26px !important; } .mopt .p-8 { padding: 24px !important; } /* CTA buttons: shorter, matching the hero treatment. */ .mopt a[class*="h-[58px]"], .mopt a[class*="h-[56px]"], .mopt button[class*="h-[58px]"] { height: 48px !important; } /* Services directory: tighter category spacing. */ .mopt [data-rdp-services-directory] > [style*="margin-top:120px"] { margin-top: 56px !important; } .mopt [style*="margin-bottom:52px"] { margin-bottom: 28px !important; } /* Service detail pages: smaller long-form body copy. */ .mopt [data-rdp-service-explained], .mopt [data-rdp-our-approach] { font-size: 14px !important; line-height: 1.68 !important; } /* "How Treatment Works" cards: more compact. */ .mopt [data-rdp-card] { padding: 22px !important; } .mopt [data-rdp-card] > div:first-child { font-size: 26px !important; } .mopt [data-rdp-card-title] { font-size: 12px !important; letter-spacing: 0.24em !important; } .mopt [data-rdp-card-content] { font-size: 13.5px !important; line-height: 1.62 !important; } .mopt [data-rdp-process-cards] { gap: 14px !important; } /* Footer (shared across every page): shrink the oversized closing headline + padding. */ footer h2 { font-size: 44px !important; line-height: 1.0 !important; } footer .pt-28 { padding-top: 44px !important; } footer .pb-20 { padding-bottom: 36px !important; } footer .py-16 { padding-top: 36px !important; padding-bottom: 36px !important; } } /* Testimonials swipe-hint arrow nudge (reduced-motion safe). */ @keyframes tshNudgeR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } } @keyframes tshNudgeL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } } @media (prefers-reduced-motion: reduce) { .tst-swipe-hint .tsh-l, .tst-swipe-hint .tsh-r { animation: none !important; } } /* Testimonial carousel */ .home-page .tst-carousel{position:relative;overflow:visible;outline:none} .home-page .tst-carousel:focus-visible{outline:2px solid rgba(176,144,74,0.55);outline-offset:8px} .home-page .tst-viewport{overflow:hidden} .home-page .tst-track{display:flex;flex-wrap:nowrap;align-items:stretch;gap:32px;will-change:transform} .home-page .tst-track>.tst-item{flex:0 0 calc((100% - 64px)/3);display:flex;flex-direction:column} .home-page .tst-track>.tst-item>div{min-height:360px;width:100%} @media (min-width:1024px){ .home-page .tst-track{gap:40px} .home-page .tst-track>.tst-item{flex:0 0 calc((100% - 80px)/3)} } .home-page .tst-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:9999px;border:1px solid rgba(176,144,74,0.45);background:#FFFDF8;color:#B0904A;cursor:pointer;box-shadow:0 4px 14px -6px rgba(80,55,30,0.25);transition:color 400ms ease,border-color 400ms ease,background-color 400ms ease} .home-page .tst-arrow:hover{border-color:#A07C4E;color:#A07C4E;background:rgba(201,169,97,0.08)} .home-page .tst-arrow:focus-visible{outline:2px solid #A07C4E;outline-offset:3px} .home-page .tst-prev{left:10px} .home-page .tst-next{right:10px} @media (min-width:1440px){ .home-page .tst-prev{left:-60px} .home-page .tst-next{right:-60px} .home-page .tst-arrow{background:transparent;box-shadow:none} } .home-page .tst-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} @media (prefers-reduced-motion: reduce){ .home-page .tst-track{transition:none !important} .home-page .tst-dot{transition:none} } @media (max-width:767px){ .home-page .tst-arrow{display:none} .home-page .tst-track{gap:14px} .home-page .tst-track>.tst-item{flex:0 0 100%} .home-page .tst-track>.tst-item>div{min-height:0;padding:28px 22px 22px !important} .home-page .tst-track p{font-size:16px !important;line-height:1.5 !important} .home-page .tst-track [style*="font-size:88px"]{font-size:58px !important} } .home-page .tst-dots{display:flex;align-items:center;justify-content:center;gap:10px} .home-page .tst-dot{position:relative;width:6px;height:6px;border:0;padding:0;border-radius:9999px;background:rgba(176,144,74,0.30);cursor:pointer;flex:0 0 auto;transition:width 400ms cubic-bezier(0.22,1,0.36,1),background-color 400ms cubic-bezier(0.22,1,0.36,1)} .home-page .tst-dot::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;min-width:100%} .home-page .tst-dot:hover{background:rgba(176,144,74,0.55);transition:background-color 250ms ease} .home-page .tst-dot.is-active{width:20px;background:#C9A961} .home-page .tst-dot.is-active:hover{background:#C9A961} .home-page .tst-dot:focus-visible{outline:2px solid #A07C4E;outline-offset:4px}