/* ===================================================================== Sereni Clinic — modern startup palette (v3) Bright white base · medical teal primary · warm sun-orange accent Inter typography · Instrument Serif italic accent · Noto Sans Telugu ===================================================================== */ /* ---------- Telugu typography (CRITICAL — applies to entire subtree) -- */ /* Why the * selector: Tailwind's font-sans utility class is applied on , and individual descendants pick up their own font-* utilities. We need to BEAT them all when the user picks Telugu. */ html[lang="te"] body, html[lang="te"] * { font-family: "Noto Sans Telugu", "Inter", system-ui, sans-serif; letter-spacing: 0 !important; /* Latin tracking breaks Telugu shaping */ } /* But preserve italic Instrument Serif accents within Telugu */ html[lang="te"] .font-italic, html[lang="te"] .font-italic * { font-family: "Noto Sans Telugu", "Instrument Serif", Georgia, serif; font-style: normal; /* Telugu has no italic — drop the slant */ } html[lang="te"] h1, html[lang="te"] h2, html[lang="te"] h3 { line-height: 1.25; /* Telugu glyphs are taller */ } /* =================== Header scroll state =================== */ #site-header.scrolled { background: rgba(255, 255, 255, 0.95); box-shadow: 0 1px 24px -12px rgba(13, 148, 136, 0.18); } /* =================== Nav links =================== */ .nav-link { position: relative; padding: 8px 14px; border-radius: 10px; color: #0A0A0A; transition: color .25s, background .25s; } .nav-link:hover { color: #0F766E; background: #F0FDFA; } /* (Mobile drawer link styling lives in the v3.36 mobile drawer block at the bottom of this stylesheet — superseded the older block-display declaration that previously sat here.) */ /* =================== Eyebrow + section typography =================== */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #0F766E; margin-bottom: 14px; } .eyebrow::before { content: ""; width: 24px; height: 2px; background: #14B8A6; border-radius: 2px; } .section-title { font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: clamp(2.25rem, 4.5vw, 4rem); line-height: 1.05; letter-spacing: -0.025em; color: #0E0F11; } /* Ensure all child spans inherit the section title's color (defensive: prevents any cascade quirk from leaving them transparent) */ .section-title > span:not([class*="text-"]):not(.font-italic) { color: inherit; } .section-sub { margin-top: 18px; color: #737373; font-size: 1.05rem; line-height: 1.65; } /* =================== Buttons =================== */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 999px; background: linear-gradient(135deg, #0D9488 0%, #0F766E 100%); color: white; font-weight: 600; font-size: .95rem; letter-spacing: .01em; box-shadow: 0 8px 24px -8px rgba(13, 148, 136, .55), 0 2px 4px -2px rgba(13, 148, 136, .25); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(13, 148, 136, .65), 0 4px 8px -2px rgba(13, 148, 136, .3); filter: brightness(1.06); } .btn-primary:active { transform: translateY(0); } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 999px; background: white; color: #0A0A0A; font-weight: 600; font-size: .95rem; border: 1.5px solid #E7E5E4; transition: all .25s ease; } .btn-ghost:hover { border-color: #0D9488; color: #0F766E; transform: translateY(-2px); } .btn-ghost-light { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 999px; background: rgba(255,255,255,0.08); color: white; font-weight: 600; font-size: .95rem; border: 1.5px solid rgba(255,255,255,0.25); backdrop-filter: blur(10px); transition: all .25s ease; } .btn-ghost-light:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.5); } .btn-cta { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; border-radius: 999px; background: linear-gradient(135deg, #F97316, #EA580C); color: white; font-weight: 700; font-size: 1rem; letter-spacing: .01em; box-shadow: 0 12px 32px -8px rgba(234, 88, 12, .6), 0 0 0 4px rgba(255,255,255,0.1); transition: transform .25s ease, box-shadow .25s ease; } .btn-cta:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 44px -8px rgba(234, 88, 12, .7), 0 0 0 4px rgba(255,255,255,0.15); } /* =================== Condition chips =================== */ .condition-chip { background: white; border: 1px solid #E7E5E4; border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; gap: 12px; transition: all .3s ease; cursor: default; } .condition-chip:hover { border-color: #0D9488; background: #F0FDFA; transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(13, 148, 136, .25); } .condition-chip .chip-ico { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #CCFBF1, #99F6E4); color: #0F766E; display: grid; place-items: center; flex-shrink: 0; } .condition-chip .chip-ico svg { width: 18px; height: 18px; } .condition-chip .chip-label { font-size: .9rem; font-weight: 600; line-height: 1.3; color: #0A0A0A; } /* =================== Treatment cards (image-top, numbered) ============== */ .treatment-card { background: white; border: 1px solid #E7E5E4; border-radius: 24px; overflow: hidden; transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s; display: flex; flex-direction: column; } .treatment-card:hover { transform: translateY(-8px); box-shadow: 0 28px 60px -20px rgba(13, 148, 136, .25); border-color: #5EEAD4; } .treatment-card .treatment-img { height: 220px; position: relative; overflow: hidden; background: #FBFAF6; transition: transform .6s ease; } .treatment-card .treatment-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .6s ease; } .treatment-card .treatment-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(13,148,136,.12) 100%); } .treatment-card:hover .treatment-img img { transform: scale(1.05); } .treatment-card .treatment-body { padding: 28px 28px 32px; flex: 1; display: flex; flex-direction: column; } .treatment-card .treatment-num { display: inline-block; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 2.5rem; line-height: 1; color: #F97316; margin-bottom: 12px; } .treatment-card .treatment-title { font-family: 'Inter', system-ui, sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; color: #0A0A0A; } .treatment-card .treatment-desc { margin-top: 10px; color: #737373; font-size: .95rem; line-height: 1.6; } /* =================== Bento "why" cards =================== */ .bento-card { border-radius: 24px; padding: 32px; border: 1px solid #E7E5E4; transition: transform .4s ease, box-shadow .4s ease; } .bento-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -20px rgba(13, 148, 136, .2); } /* Override: dark/colored bento variants don't need the line border */ .bento-card.bg-teal-700, .bento-card.bg-gradient-to-br { border-color: transparent; } @media (min-width: 768px) { .bento-card { padding: 40px; } } /* =================== Review cards =================== */ .review-card { background: white; border: 1px solid #E7E5E4; border-radius: 20px; padding: 24px; transition: all .3s ease; } .review-card:hover { transform: translateY(-3px); border-color: #5EEAD4; box-shadow: 0 20px 44px -20px rgba(13, 148, 136, .25); } /* Review-card header layout: lock the avatar (44px) and the Google "G" logo (20px) so they never shrink, and let the name+date column shrink instead. min-w-0 unlocks flex-shrink for text containers (without it flex children refuse to go below their content's intrinsic minimum, which is what was making the G logo overlap "Suresh K."). */ .review-card > div:first-child > div:first-child, /* avatar */ .review-card > div:first-child > svg { /* Google G */ flex-shrink: 0; } .review-card > div:first-child > .flex-1 { min-width: 0; /* allow shrinking */ padding-right: 4px; /* small visual breathing room before svg */ } .review-card > div:first-child > .flex-1 > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* long names get "..." instead of overlap */ } /* =================== FAQ accordion =================== */ .faq-item { background: white; border: 1px solid #E7E5E4; border-radius: 16px; overflow: hidden; transition: border-color .3s, box-shadow .3s; } .faq-item[open] { border-color: #5EEAD4; box-shadow: 0 16px 36px -16px rgba(13, 148, 136, .2); } .faq-q { cursor: pointer; padding: 22px 26px; font-family: 'Inter', system-ui, sans-serif; font-size: 1.05rem; font-weight: 600; color: #0A0A0A; display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; transition: color .3s; } .faq-q::-webkit-details-marker { display: none; } .faq-q:hover { color: #0F766E; } .faq-icon { width: 30px; height: 30px; border-radius: 50%; background: #F0FDFA; color: #0F766E; display: grid; place-items: center; font-size: 1.15rem; font-weight: 400; flex-shrink: 0; transition: transform .3s ease, background .3s ease, color .3s ease; } .faq-item[open] .faq-icon { transform: rotate(45deg); background: #0D9488; color: white; } .faq-a { padding: 0 26px 24px; color: #525252; font-size: .98rem; line-height: 1.7; } /* =================== Contact rows =================== */ .contact-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px; background: white; border: 1px solid #E7E5E4; transition: all .3s ease; } .contact-row:hover { transform: translateX(4px); border-color: #0D9488; box-shadow: 0 12px 30px -14px rgba(13, 148, 136, .25); } /* =================== Form =================== */ .form-label { display: block; font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: #0F766E; font-weight: 700; margin-bottom: 8px; } .form-input { width: 100%; padding: 13px 16px; border-radius: 12px; background: #FAFAF9; border: 1.5px solid #E7E5E4; font: inherit; color: #0A0A0A; transition: border-color .25s, background .25s, box-shadow .25s; } .form-input:focus { outline: none; border-color: #0D9488; background: white; box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1); } /* =================== Reveal baseline (GSAP drives final state) ========== IMPORTANT: opacity:0 only applies AFTER body.js-ready is set by app.js. If JS fails or is slow, content stays visible — never an invisible page. */ body.js-ready .reveal { opacity: 0; transform: translateY(24px); } body.js-ready .hero-reveal { opacity: 0; transform: translateY(18px); } /* =================== Selection & scrollbar =================== */ ::selection { background: #0D9488; color: white; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #FAFAF9; } ::-webkit-scrollbar-thumb { background: #CCFBF1; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #5EEAD4; } /* No body padding-bottom needed — old sticky CTA bar removed; we now use floating corner buttons (phone left, WhatsApp right) which don't take up layout space. */ /* ===================================================================== Animation extensions (v3.1) ===================================================================== */ /* ---- Floating bob (hero stat cards) ---- */ @keyframes bob-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .bob { animation: bob-y 4.5s ease-in-out infinite; } .bob.delay-1 { animation-delay: -2.2s; } /* ---- Drifting decorative blobs ---- */ @keyframes blob-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -25px) scale(1.05); } 66% { transform: translate(-25px, 35px) scale(0.95); } } .blob-drift { animation: blob-drift 22s ease-in-out infinite; will-change: transform; } .blob-drift.delay-1 { animation-delay: -8s; } /* ---- Shimmer sweep on the orange CTA button ---- */ @keyframes shimmer-sweep { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .btn-cta { background: linear-gradient(110deg, #F97316 0%, #EA580C 30%, #FB923C 50%, #EA580C 70%, #F97316 100%); background-size: 220% 220%; animation: shimmer-sweep 5s ease-in-out infinite; } /* ---- 3D tilt prep for treatment cards (JS adds rotate via inline style) ---- */ .treatment-card { transform-style: preserve-3d; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s; } .treatment-card .treatment-img, .treatment-card .treatment-num, .treatment-card .treatment-title { transform: translateZ(20px); } /* ---- Subtle Ken Burns on doctor portrait ---- */ @keyframes ken-burns { 0%, 100% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.06) translate(-1.5%, -1.5%); } } #doctor img { animation: ken-burns 18s ease-in-out infinite; will-change: transform; } /* ---- Hero photo: lift on parallax scroll (JS sets transform) ---- */ /* Hero image — always fills container cleanly (parallax disabled in v3.39). The !important transform-reset defends against any cached inline transform that the previous parallax JS may have written. */ #home img.parallax-hero { transform: none !important; will-change: auto; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ---- Count-up pulse when number lands ---- */ @keyframes count-pulse { 0% { transform: scale(1); color: inherit; } 40% { transform: scale(1.12); color: #0D9488; } 100% { transform: scale(1); color: inherit; } } .count-pulsed { animation: count-pulse .7s ease-out; } /* ---- Eyebrow line: subtle width pulse on hover (already 24px static) ---- */ .eyebrow { transition: transform .3s ease; } .eyebrow::before { transition: width .35s cubic-bezier(.22,1,.36,1); } .reveal:hover .eyebrow::before { width: 36px; } /* ---- Treatment card image scale boost on hover ---- */ .treatment-card:hover .treatment-img img { transform: scale(1.08); } /* ---- Process step: line draw + number bloom on enter ---- */ .process-num { transition: transform .4s cubic-bezier(.22,1,.36,1), background-color .3s, color .3s, box-shadow .3s; } .process-step:hover .process-num { transform: scale(1.1) rotate(-4deg); box-shadow: 0 12px 28px -8px rgba(13, 148, 136, .4); } /* ---- Faq icon: extra bounce on toggle ---- */ .faq-item[open] .faq-icon { animation: faq-bounce .45s cubic-bezier(.22,1,.36,1); } @keyframes faq-bounce { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(45deg) scale(1.18); } 100% { transform: rotate(45deg) scale(1); } } /* ---- Condition chip: ripple on hover ---- */ .condition-chip { position: relative; overflow: hidden; } .condition-chip::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(13,148,136,.12), transparent 60%); opacity: 0; transition: opacity .35s; pointer-events: none; } .condition-chip:hover::after { opacity: 1; } /* ===================================================================== Theme refresh + mobile-first polish (v3.6) ===================================================================== */ /* ---- Warm cream body background (subtle paper feel) ---- */ body { background-color: #FBFAF6; /* Subtle grain texture — readable on OLED, warm on LCD */ background-image: radial-gradient(circle at 20% 10%, rgba(14, 132, 122, 0.025), transparent 40%), radial-gradient(circle at 80% 90%, rgba(255, 107, 107, 0.02), transparent 50%); background-attachment: fixed; } /* Subtle noise overlay — sits BEHIND content (z-index: -1) so it can never affect text rendering or be blended with foreground elements. Browser-paint cost: zero (it's a single static SVG). */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.4; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Refined card shadows — softer, more layered */ .bento-card, .review-card, .feature-card, .faq-item { box-shadow: 0 1px 2px rgba(15, 76, 70, 0.04), 0 4px 16px -8px rgba(15, 76, 70, 0.08); } .bento-card:hover, .review-card:hover, .feature-card:hover { box-shadow: 0 4px 8px rgba(15, 76, 70, 0.06), 0 16px 40px -12px rgba(15, 76, 70, 0.18); } /* Header glassmorphism — frostier, more modern */ #site-header { backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); } #site-header.scrolled { background: rgba(251, 250, 246, 0.78); border-bottom: 1px solid rgba(232, 227, 217, 0.6); } /* ============ MOBILE-FIRST IMPROVEMENTS ============ */ /* Mobile testimonials: horizontal scroll-snap carousel. Replaces the vertical 1-column stack on phones — feels native, thumb-friendly, and matches the "scroll through reviews" UX that users already know from app stores. */ @media (max-width: 767px) { #testimonials .grid { display: flex !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; gap: 16px; padding: 8px 20px 20px; margin: 0 -20px; /* break out of section padding */ scrollbar-width: none; /* hide scrollbar on Firefox */ -webkit-overflow-scrolling: touch; scroll-padding-inline: 20px; } #testimonials .grid::-webkit-scrollbar { display: none; } #testimonials .review-card { flex: 0 0 85%; /* ~85% viewport per card with peek */ scroll-snap-align: start; scroll-snap-stop: always; min-width: 280px; } } /* Scroll-snap dots indicator — visual cue that more reviews exist */ .snap-hint { display: none; } @media (max-width: 767px) { .snap-hint { display: flex; justify-content: center; gap: 6px; margin-top: 12px; } .snap-hint span { width: 6px; height: 6px; border-radius: 50%; background: rgba(14, 132, 122, 0.25); transition: background .25s, transform .25s; } .snap-hint span.active { background: #0E847A; transform: scale(1.4); } } /* Scroll-to-top FAB — bottom-right, above the WhatsApp FAB */ #scroll-top { position: fixed; right: 1rem; bottom: calc(6rem + env(safe-area-inset-bottom)); z-index: 45; width: 40px; height: 40px; border-radius: 50%; background: white; color: #0E847A; border: 1px solid #E8E3D9; display: grid; place-items: center; box-shadow: 0 8px 24px -8px rgba(15, 76, 70, 0.25); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .3s, transform .3s; } #scroll-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } #scroll-top:active { transform: scale(0.92); } @media (min-width: 768px) { #scroll-top { right: 1.5rem; bottom: 6rem; } } /* (Removed: .cta-bar rules — replaced with floating corner buttons.) */ /* Bigger tap targets on phones (accessibility minimum: 44×44 CSS px) */ @media (max-width: 767px) { .nav-link, .mobile-link, .faq-q, .btn-ghost, .btn-primary, .condition-chip { min-height: 44px; } .faq-q { padding: 18px 22px; } .condition-chip { padding: 16px 18px; } } /* Mobile hero: tighter, bolder, more breathing room above-fold */ @media (max-width: 640px) { #home h1 { line-height: 0.98; letter-spacing: -0.03em; } #home .hero-reveal.inline-flex { padding: 6px 14px; font-size: 0.78rem; } } /* Mobile form: bigger inputs, easier to tap */ @media (max-width: 767px) { .form-input { padding: 14px 16px; font-size: 16px; /* prevents iOS zoom on focus */ border-radius: 14px; } .form-label { font-size: 0.78rem; } } /* Hero gradient text now uses new deeper teal palette */ .hero-gradient-text { background: linear-gradient( 90deg, #0EA68B 0%, #0E847A 25%, #0E665E 50%, #0E847A 75%, #0EA68B 100% ); background-size: 250% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ===================================================================== In-view reveal animations (v3.5) — driven by [data-fx] + .fx-in class added by IntersectionObserver. Each effect is one-shot (plays once when scrolled into view) — keeps animation budget under control. ===================================================================== */ /* ---- 1. Star sparkle (review cards) ---- */ [data-fx="stars"] { display: inline-flex; transform: scale(0.6); opacity: 0; transform-origin: left center; } [data-fx="stars"].fx-in { animation: stars-pop 0.8s cubic-bezier(.34, 1.56, .64, 1) forwards; } @keyframes stars-pop { 0% { transform: scale(0.6) rotate(-8deg); opacity: 0; filter: brightness(2); } 60% { transform: scale(1.18) rotate(2deg); opacity: 1; filter: brightness(1.6); } 100% { transform: scale(1) rotate(0); opacity: 1; filter: brightness(1); } } /* ---- 2. Line draw (process step connector) ---- */ [data-fx="line-draw"] { transform: scaleX(0); transform-origin: left center; transition: transform 1.6s cubic-bezier(.22, 1, .36, 1) 0.2s; } [data-fx="line-draw"].fx-in { transform: scaleX(1); } /* ---- 3. Hero "Live fully." gradient sweep (continuous, the page's signature) ---- */ .hero-gradient-text { background: linear-gradient( 90deg, #14B8A6 0%, #0D9488 25%, #0F766E 50%, #0D9488 75%, #14B8A6 100% ); background-size: 250% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: hero-grad-sweep 9s ease-in-out infinite; } @keyframes hero-grad-sweep { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ---- 4. Form label focus glow (using :has() for clean selector) ---- */ label:has(.form-input:focus) .form-label { color: #14B8A6; letter-spacing: 0.22em; transform: translateX(2px); transition: color .25s, letter-spacing .35s, transform .35s; } .form-label { transition: color .25s, letter-spacing .35s, transform .35s; display: inline-block; } /* ---- 5. Doctor "15+ years" badge: orbiting decorative ring ---- */ .years-badge { position: relative; } .years-badge::before { content: ""; position: absolute; inset: -8px; border-radius: 24px; border: 2px dashed rgba(249, 115, 22, 0.4); animation: badge-orbit 14s linear infinite; pointer-events: none; } @keyframes badge-orbit { to { transform: rotate(360deg); } } /* ---- 6. Logo SVG path draw on page load ---- */ @keyframes logo-draw { from { stroke-dasharray: 60; stroke-dashoffset: 60; } to { stroke-dasharray: 60; stroke-dashoffset: 0; } } .logo-svg path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: logo-draw 1.4s cubic-bezier(.22, 1, .36, 1) 0.3s forwards; } .logo-svg path:nth-child(2) { animation-delay: 0.5s; } /* ---- 7. Treatment card number reactive on hover ---- */ .treatment-card .treatment-num { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), color .35s; display: inline-block; } .treatment-card:hover .treatment-num { transform: translateZ(20px) scale(1.15) rotate(-6deg); color: #EA580C; } /* ---- Bonus: scroll-direction indicator under section title underline ---- */ .section-title { position: relative; } [data-fx="title-line"] { display: block; width: 0; height: 4px; background: linear-gradient(90deg, #14B8A6, #F97316); border-radius: 2px; margin-top: 12px; transition: width 1.2s cubic-bezier(.22, 1, .36, 1) 0.15s; } [data-fx="title-line"].fx-in { width: 64px; } /* ===================================================================== WhatsApp popup + tel-call enhancements (v3.4) ===================================================================== */ /* ---- Floating WhatsApp button (bottom-right): green pulse ---- Explicit background-color so it can't go transparent even if Tailwind PlayCDN drops the arbitrary `bg-[#25D366]` value during JIT compile. */ #wa-float { background-color: #25D366 !important; color: white !important; } .wa-attention { transition: transform .3s cubic-bezier(.22,1,.36,1); } /* ---- Floating Phone button (bottom-left): teal pulse ---- */ #tel-float { background-color: #0E847A !important; color: white !important; } .tel-attention { transition: transform .3s cubic-bezier(.22,1,.36,1); } .tel-attention::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(14, 132, 122, 0.55); animation: tel-pulse 2.4s ease-out infinite; animation-delay: 1.2s; /* stagger from WA button so they alternate */ } .tel-attention:hover { transform: scale(1.08); } .tel-attention:active { transform: scale(0.94); } @keyframes tel-pulse { 0% { box-shadow: 0 0 0 0 rgba(14, 132, 122, 0.55); } 70% { box-shadow: 0 0 0 18px rgba(14, 132, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(14, 132, 122, 0); } } .wa-attention::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); animation: wa-pulse 2.4s ease-out infinite; } .wa-attention:hover { transform: scale(1.08); } .wa-attention:active { transform: scale(0.94); } @keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); } 70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } /* Tooltip "Chat with us" appears on hover (desktop only) */ .wa-tooltip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(8px); background: #0A0A0A; color: white; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .25s ease, transform .25s ease; } .wa-tooltip::after { content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-left-color: #0A0A0A; } @media (hover: hover) { .wa-attention:hover .wa-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); } } /* ---- WhatsApp popup container — sits above the floating WA button ---- */ .wa-popup-pos { bottom: calc(6rem + env(safe-area-inset-bottom)); } @media (min-width: 768px) { .wa-popup-pos { bottom: 6rem; } } #wa-popup { transform: scale(0.7) translateY(24px); opacity: 0; visibility: hidden; transform-origin: bottom right; transition: transform 0.4s cubic-bezier(.16, 1.05, .35, 1.05), opacity 0.25s ease, visibility 0s linear 0.4s; box-shadow: 0 24px 60px -12px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.04); } #wa-popup.is-open { transform: scale(1) translateY(0); opacity: 1; visibility: visible; transition: transform 0.4s cubic-bezier(.16, 1.05, .35, 1.05), opacity 0.25s ease, visibility 0s linear 0s; } /* WhatsApp wallpaper feel (subtle SVG dot pattern) */ .wa-popup-bg { background-color: #ECE5DD; background-image: radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px); background-size: 18px 18px, 24px 24px; background-position: 0 0, 9px 12px; min-height: 110px; } /* ---- Chat bubble (WhatsApp speech-bubble style with tail) ---- */ .wa-bubble { position: relative; background: white; padding: 10px 12px 18px; border-radius: 0 8px 8px 8px; max-width: 85%; font-size: 0.875rem; line-height: 1.45; color: #111; box-shadow: 0 1px 1px rgba(0,0,0,0.08); animation: wa-bubble-in 0.45s cubic-bezier(.22,1,.36,1); } .wa-bubble::before { content: ""; position: absolute; left: -7px; top: 0; width: 0; height: 0; border: 8px solid transparent; border-top-color: white; border-right-color: white; } .wa-bubble p { margin: 0; } .wa-bubble .wa-time { position: absolute; bottom: 4px; right: 8px; font-size: 10px; color: #999; } @keyframes wa-bubble-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ---- Typing indicator (3 bouncing dots) ---- */ .wa-typing { display: inline-flex; gap: 5px; padding: 12px 14px; background: white; border-radius: 0 14px 14px 14px; box-shadow: 0 1px 1px rgba(0,0,0,0.08); } .wa-typing span { width: 7px; height: 7px; background: #888; border-radius: 50%; animation: wa-dot 1.2s infinite ease-in-out; } .wa-typing span:nth-child(2) { animation-delay: 0.2s; } .wa-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes wa-dot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } /* ---- Mobile sticky CTA: subtle attention pulse on phone-call button ---- */ @keyframes call-attention { 0%, 100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); } 50% { box-shadow: 0 0 0 6px rgba(13, 148, 136, 0.18); } } .md\:hidden a[href^="tel:"] { position: relative; animation: call-attention 3s ease-in-out infinite; animation-delay: 5s; } /* Tap ripple feedback for tel: links — class added via JS on tap */ .tap-ripple { position: relative; overflow: hidden; } .tap-ripple::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.45); transform: translate(-50%, -50%) scale(0); animation: tap-ripple 0.6s ease-out; pointer-events: none; } @keyframes tap-ripple { to { transform: translate(-50%, -50%) scale(28); opacity: 0; } } /* On phones: hide the desktop tooltip (bottom CTA exists) */ @media (max-width: 767px) { .wa-tooltip { display: none; } } /* ===================================================================== Performance — paint/layout containment + animation pausing (v3.3) ===================================================================== */ /* Skip rendering of off-screen sections — browser doesn't paint or layout these until they enter the viewport. Each section reserves ~600px so scrollbar size stays accurate. ~30-50% faster initial render. */ section[id]:not(#home), footer { content-visibility: auto; contain-intrinsic-size: 1px 600px; } /* When animated elements scroll out of view, JS adds .anim-paused to halt their ambient CSS animations — saves CPU/battery on long pages. */ .anim-paused, .anim-paused * { animation-play-state: paused !important; } /* ===================================================================== Responsive corrections (v3.2) — fixes for edge-case viewports ===================================================================== */ /* ---- Galaxy Z Fold (closed) / S8+ — extremely narrow (≤380px) ---- */ @media (max-width: 380px) { .section-title { font-size: 2.1rem !important; line-height: 1.1; } .btn-primary, .btn-ghost, .btn-cta { padding-left: 18px; padding-right: 18px; font-size: 0.875rem; } .eyebrow { font-size: 0.66rem; letter-spacing: .18em; } .treatment-card .treatment-num { font-size: 1.85rem; } .treatment-card .treatment-title { font-size: 1.15rem; } .faq-q { padding: 18px 18px; font-size: .95rem; } .faq-a { padding: 0 18px 18px; font-size: .9rem; } /* Hero floating bottom card overlaps photo less */ #home .bob.delay-1 { max-width: 200px; left: -1rem; bottom: -1rem; } /* Big numbers in bento card scale down */ .bento-card .text-7xl { font-size: 3rem; } } /* ---- Phone (≤640px) — tighten cards, faqs, photos ---- */ @media (max-width: 640px) { .treatment-card .treatment-img { height: 180px; } .treatment-card .treatment-body { padding: 22px 22px 26px; } .bento-card { padding: 26px; } .review-card { padding: 20px; } .contact-row { padding: 14px 16px; } /* CTA banner: less aggressive curves on small screens */ section > .rounded-\[2rem\] { border-radius: 1.5rem; } /* Map section: shrink min-height to reclaim vertical space */ #contact iframe { filter: grayscale(0.1) contrast(1.05); } #contact .min-h-\[520px\] { min-height: 380px !important; } /* Map overlay address card: tighter */ #contact .min-h-\[520px\] .top-5 { padding: 14px; } } /* ---- Foldable / sub-tablet (481–767px) ---- */ @media (min-width: 481px) and (max-width: 767px) { /* Allow tighter spacing for in-between viewports like Surface Duo */ .section-title { font-size: clamp(2rem, 6vw, 2.75rem); } } /* ---- Tablet portrait (768–1023px) ---- */ @media (min-width: 768px) and (max-width: 1023px) { /* Process step numbers slightly smaller so 4-in-a-row fits */ .process-num { width: 60px; height: 60px; font-size: 1.5rem; } } /* ---- Landscape short (Nest Hub 1024×600, low-height laptops) ---- */ @media (min-width: 1024px) and (max-height: 700px) { #home { padding-top: 24px !important; padding-bottom: 48px !important; } #home > div.relative { padding-top: 16px; padding-bottom: 24px; } #home h1 { font-size: 3.5rem !important; } /* Reduce section title size globally on short screens */ .section-title { font-size: clamp(1.75rem, 3vw, 2.5rem); } } /* ---- Very tall phones (iPhone 14 Pro Max etc.) ---- */ @media (min-width: 401px) and (max-width: 480px) { /* Comfortable headlines without overflow */ h1.hero-reveal { font-size: clamp(2.75rem, 11vw, 3.5rem); } } /* ---- Touch-only: disable pseudo hover-only ripple effect entirely ---- */ @media (hover: none) { .condition-chip::after { display: none; } .treatment-card:hover { transform: none; } } /* =================== Reduced motion =================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } body.js-ready .reveal, body.js-ready .hero-reveal { opacity: 1 !important; transform: none !important; } .bob, .blob-drift, .btn-cta, #doctor img { animation: none !important; } } /* ===================================================================== ★ DARK MODE (v3.16) — toggle via .dark class on Warm dark base with teal-tinted blacks. Designed for OLED-friendly contrast and accent-color preservation, not a simple invert. ===================================================================== */ /* ---- Sun/Moon icon swap (visible state controlled by .dark) ---- */ .theme-icon-sun { display: none; } .theme-icon-moon { display: block; } .dark .theme-icon-sun { display: block; } .dark .theme-icon-moon { display: none; } /* ---- Smooth theme transition on whole site (subtle, only colors) ---- */ html.dark, html.dark body, .dark .bento-card, .dark .review-card, .dark .feature-card, .dark .faq-item, .dark .treatment-card, .dark .contact-row, .dark #site-header, .dark .form-input, .dark .condition-chip, .dark #scroll-top, .dark .nav-link, .dark .mobile-link, .dark .btn-ghost, .dark .theme-btn, .dark #lang-toggle, .dark #lang-toggle-mobile, .dark #theme-toggle-mobile, .dark #mobile-menu, .dark #mobile-menu-btn { transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; } /* ---- Body & global background ---- */ .dark body { background-color: #0A0F0E; color: #F0EDE7; background-image: radial-gradient(circle at 20% 10%, rgba(14, 132, 122, 0.12), transparent 45%), radial-gradient(circle at 80% 90%, rgba(255, 107, 107, 0.05), transparent 50%); } .dark body::before { /* Subtle bright noise on dark — much lower opacity */ opacity: 0.08; mix-blend-mode: screen; } /* ---- Section backgrounds ---- */ .dark .bg-paper, .dark section.bg-paper, .dark .bg-paper2 { background-color: #0F1614 !important; } .dark .bg-white { background-color: #161D1B !important; } .dark .bg-cream2 { background-color: #1B2422 !important; } /* ---- Text colors ---- */ .dark .text-ink, .dark h1, .dark h2, .dark h3, .dark h4, .dark h5 { color: #F0EDE7; } .dark .text-mute, .dark p.text-mute, .dark .section-sub, .dark .treatment-desc, .dark .faq-a, .dark .text-sm.text-mute { color: #9CA39E; } /* Section titles + emphasis stay readable */ .dark .section-title { color: #F4F1EB; } /* Eyebrow stays teal but slightly brighter to contrast dark bg */ .dark .eyebrow { color: #2DD4BF; } .dark .eyebrow::before { background: #14B8A6; } /* ---- Header ---- */ .dark #site-header { background: rgba(15, 22, 20, 0.72); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid rgba(45, 212, 191, 0.08); } .dark #site-header.scrolled { background: rgba(10, 15, 14, 0.88); border-bottom-color: rgba(45, 212, 191, 0.15); } .dark .nav-link { color: #F0EDE7; } .dark .nav-link:hover { color: #5DDCC4; background: rgba(14, 132, 122, 0.15); } /* ---- Buttons (icon-only chrome) ---- */ .dark #lang-toggle, .dark #lang-toggle-mobile, .dark #theme-toggle, .dark #theme-toggle-mobile, .dark .theme-btn, .dark #mobile-menu-btn { background: rgba(45, 212, 191, 0.06); border-color: rgba(45, 212, 191, 0.2); color: #F0EDE7; } .dark #lang-toggle:hover, .dark #theme-toggle:hover, .dark .theme-btn:hover, .dark #mobile-menu-btn:hover { background: rgba(45, 212, 191, 0.14); border-color: rgba(45, 212, 191, 0.4); } .dark .btn-ghost { background: rgba(45, 212, 191, 0.05); border-color: rgba(45, 212, 191, 0.25); color: #F0EDE7; } .dark .btn-ghost:hover { background: rgba(45, 212, 191, 0.12); border-color: #2DD4BF; color: #5DDCC4; } /* ---- Cards (bento, review, feature, faq, contact, treatment) ---- */ .dark .bento-card, .dark .review-card, .dark .feature-card, .dark .faq-item, .dark .treatment-card, .dark .contact-row { background: #161D1B; border-color: rgba(45, 212, 191, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px -8px rgba(0, 0, 0, 0.5); } .dark .bento-card:hover, .dark .review-card:hover, .dark .feature-card:hover, .dark .treatment-card:hover { background: #1B2422; border-color: rgba(45, 212, 191, 0.3); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 16px 40px -12px rgba(20, 184, 166, 0.25); } /* ---- Bento "big teal" card stays teal in dark — looks great ---- */ .dark .bento-card.bg-teal-700 { background: linear-gradient(135deg, #0F4C46, #0E665E) !important; border: 1px solid rgba(45, 212, 191, 0.25); } /* Bento sun gradient card — darken slightly */ .dark .bento-card.bg-gradient-to-br.from-sun-500.to-sun-600 { background: linear-gradient(135deg, #C2410C, #9A3412) !important; border: 1px solid rgba(251, 146, 60, 0.3); } /* ---- Treatment cards: tone down bright SVG illustrations ---- */ .dark .treatment-card .treatment-img { background: #0F1614; } /* Treatment-card text colors — the title is hard-coded #0A0A0A in the light-mode base rule, so it would render BLACK on dark cards (invisible). Override to a warm light cream that pairs with the hover state, and bump the description contrast a notch so it's comfortable to read. */ .dark .treatment-card .treatment-title { color: #F4F1EB; } .dark .treatment-card .treatment-desc { color: #B8BDC0; } .dark .treatment-card:hover .treatment-title { color: #5DDCC4; } .dark .treatment-card .treatment-img img { filter: brightness(0.78) saturate(0.85) hue-rotate(-2deg); } .dark .treatment-card .treatment-img::after { background: linear-gradient(180deg, transparent 30%, rgba(10, 15, 14, 0.5) 100%); } /* ---- Condition chips ---- */ .dark .condition-chip { background: #161D1B; border-color: rgba(45, 212, 191, 0.12); color: #F0EDE7; } .dark .condition-chip:hover { background: rgba(14, 132, 122, 0.18); border-color: rgba(45, 212, 191, 0.45); } .dark .condition-chip .chip-ico { background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(14, 132, 122, 0.3)); color: #5DDCC4; } .dark .condition-chip .chip-label { color: #F0EDE7; } /* ---- FAQ accordion ---- */ .dark .faq-q { color: #F0EDE7; } .dark .faq-q:hover { color: #5DDCC4; } .dark .faq-icon { background: rgba(14, 132, 122, 0.15); color: #5DDCC4; } .dark .faq-item[open] { border-color: rgba(45, 212, 191, 0.4); } .dark .faq-item[open] .faq-icon { background: #0EA68B; color: #0A0F0E; } /* ---- Form inputs ---- */ .dark .form-input { background: #161D1B; border-color: rgba(45, 212, 191, 0.18); color: #F0EDE7; } .dark .form-input::placeholder { color: #6B6E72; } .dark .form-input:focus { background: #1B2422; border-color: #14B8A6; box-shadow: 0 0 0 4px rgba(14, 132, 122, 0.18); } .dark .form-label { color: #5DDCC4; } .dark label:has(.form-input:focus) .form-label { color: #2DD4BF; } /* ---- Process steps ---- */ .dark .process-num { background: #161D1B; border-color: #14B8A6; color: #5DDCC4; } .dark .process-step:hover .process-num { background: #14B8A6; color: #0A0F0E; } /* ---- Mobile menu drawer ---- */ .dark #mobile-menu { background: #0A0F0E; color: #F0EDE7; } .dark .mobile-link { color: #F0EDE7; border-bottom-color: rgba(45, 212, 191, 0.08); } .dark .mobile-link:hover { color: #5DDCC4; } /* ---- Scroll-to-top FAB ---- */ .dark #scroll-top { background: #161D1B; border-color: rgba(45, 212, 191, 0.25); color: #5DDCC4; } /* ---- Decorative blobs: dim in dark mode ---- */ .dark .blob-drift { opacity: 0.35; mix-blend-mode: screen; } .dark .bg-teal-100 { background-color: rgba(45, 212, 191, 0.18) !important; } .dark .bg-sun-100 { background-color: rgba(249, 115, 22, 0.12) !important; } /* ---- Hero badge & floating cards ---- */ .dark .hero-reveal.bg-teal-50 { background: rgba(14, 132, 122, 0.18) !important; color: #5DDCC4 !important; border-color: rgba(45, 212, 191, 0.3) !important; } .dark .bob { background: #161D1B !important; border-color: rgba(45, 212, 191, 0.15) !important; color: #F0EDE7; } .dark .bob .text-mute { color: #9CA39E; } .dark .bob .text-ink { color: #F0EDE7; } /* ---- Trust strip text ---- */ .dark .text-mute { color: #9CA39E; } /* ---- Doctor section is already dark — keep as is, just enhance ---- */ .dark #doctor { background: #050808; } /* ---- Big CTA banner — slightly dimmer to not blast eyes ---- */ .dark section .from-teal-600.via-teal-700.to-teal-800 { --tw-gradient-stops: #0E665E, #0F4C46, #0F3934 !important; } /* ---- Map iframe in contact section: invert + tone for dark mode ---- */ .dark #contact iframe { filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.92) saturate(0.7); } /* ---- Map overlay address card ---- */ .dark #contact .min-h-\[520px\] .top-5 { background: rgba(22, 29, 27, 0.94) !important; border-color: rgba(45, 212, 191, 0.2) !important; color: #F0EDE7; } /* ---- Footer (already dark — minor refinement) ---- */ .dark footer.bg-ink { background: #050808; } /* ---- Selection highlight ---- */ .dark ::selection { background: #14B8A6; color: #0A0F0E; } /* ---- Scrollbar ---- */ .dark ::-webkit-scrollbar-track { background: #0F1614; } .dark ::-webkit-scrollbar-thumb { background: rgba(45, 212, 191, 0.3); } .dark ::-webkit-scrollbar-thumb:hover { background: rgba(45, 212, 191, 0.5); } /* ---- Hero gradient text — brighter in dark mode ---- */ .dark .hero-gradient-text { background: linear-gradient( 90deg, #2DD4BF 0%, #14B8A6 25%, #5DDCC4 50%, #14B8A6 75%, #2DD4BF 100% ); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ---- WhatsApp popup in dark mode ---- */ .dark #wa-popup { background: #161D1B; box-shadow: 0 24px 60px -12px rgba(0,0,0,0.7); } .dark .wa-bubble { background: #1B2422; color: #F0EDE7; } .dark .wa-bubble::before { border-top-color: #1B2422; border-right-color: #1B2422; } .dark .wa-bubble .wa-time { color: #6B6E72; } .dark .wa-popup-bg { background-color: #0F1614; background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px); } .dark .wa-typing { background: #1B2422; } .dark .wa-typing span { background: #5DDCC4; } .dark #wa-popup .border-t { border-color: rgba(45, 212, 191, 0.1); } .dark #wa-popup .bg-white { background: #161D1B !important; } /* ---- Subtle glow halos around FABs in dark — premium touch ---- */ .dark .wa-attention { box-shadow: 0 8px 28px -4px rgba(37, 211, 102, 0.5); } .dark .tel-attention { box-shadow: 0 8px 28px -4px rgba(14, 132, 122, 0.5); } /* ---- Ensure white-bg-class elements like form card adapt ---- */ .dark form#appointment-form.bg-white { background: #161D1B !important; } .dark .bg-white\/85 { background: rgba(15, 22, 20, 0.78) !important; } .dark .border-line { border-color: rgba(45, 212, 191, 0.12) !important; } .dark .border-line\/60 { border-color: rgba(45, 212, 191, 0.1) !important; } /* ---- Featured stars in reviews stay sun-orange (no override) ---- */ /* ---- Logo gradient stays vibrant ---- */ /* ===================================================================== ★ ENHANCEMENTS v3.17 — both modes, polish + extra animations ===================================================================== */ /* ---- 1. THEME TOGGLE RIPPLE REVEAL ---- On click, an expanding circle of the new theme's bg color sweeps out from the click point. The actual theme class swap happens at ~280ms so colors land naturally as the wave passes. */ .theme-ripple { position: fixed; width: 40px; height: 40px; margin-left: -20px; margin-top: -20px; border-radius: 50%; pointer-events: none; z-index: 9999; transform: scale(0); opacity: 1; transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease 0.55s; will-change: transform, opacity; } .theme-ripple.active { transform: scale(120); opacity: 0; } /* Smooth body-level color crossfade as a safety net for elements not specifically transition-targeted elsewhere. Kept brief (250ms) so the new theme is fully visible before the ripple animation finishes — prevents mid-transition contrast glitches. */ html, body { transition: background-color 0.25s ease, color 0.25s ease; } /* ---- 2. TWINKLING STARS — dark mode hero only ---- Pure CSS pseudo-element. Multiple tiny radial-gradient dots, each fading independently via animation-delay offsets. */ .dark #home { position: relative; } .dark #home > .relative { position: relative; z-index: 2; /* keep content above stars */ } .dark #home::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: radial-gradient(1px 1px at 12% 18%, white, transparent), radial-gradient(1px 1px at 27% 42%, white, transparent), radial-gradient(2px 2px at 45% 22%, #5DDCC4, transparent), radial-gradient(1px 1px at 62% 35%, white, transparent), radial-gradient(1.5px 1.5px at 78% 18%, white, transparent), radial-gradient(1px 1px at 89% 50%, #5DDCC4, transparent), radial-gradient(2px 2px at 8% 64%, white, transparent), radial-gradient(1px 1px at 35% 78%, #5DDCC4, transparent), radial-gradient(1.5px 1.5px at 55% 88%, white, transparent), radial-gradient(1px 1px at 72% 70%, white, transparent), radial-gradient(1px 1px at 92% 82%, #5DDCC4, transparent), radial-gradient(1.5px 1.5px at 18% 92%, white, transparent); background-size: 100% 100%; background-repeat: no-repeat; opacity: 0; animation: twinkle 6s ease-in-out infinite; } .dark #home::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: radial-gradient(1px 1px at 22% 8%, white, transparent), radial-gradient(1.5px 1.5px at 48% 58%, #5DDCC4, transparent), radial-gradient(1px 1px at 67% 12%, white, transparent), radial-gradient(1px 1px at 82% 38%, white, transparent), radial-gradient(1px 1px at 38% 28%, #5DDCC4, transparent), radial-gradient(1.5px 1.5px at 58% 72%, white, transparent), radial-gradient(1px 1px at 84% 95%, #5DDCC4, transparent); background-size: 100% 100%; background-repeat: no-repeat; opacity: 0; animation: twinkle 6s ease-in-out infinite 3s; /* offset = alternating */ } @keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } /* ---- 3. CURSOR SPOTLIGHT on hero ---- JS sets --mx, --my variables. CSS uses them for a radial gradient. Subtle in light mode, more visible in dark mode. */ #home { --mx: 50%; --my: 50%; } #home .relative > div:first-child::after, /* the inner content wrapper */ #home::before { /* don't override stars */ } /* Use a separate spotlight layer so it doesn't conflict with stars */ .hero-spotlight { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(500px circle at var(--mx) var(--my), rgba(14, 132, 122, 0.06), transparent 60%); transition: background 0.15s ease-out; } .dark .hero-spotlight { background: radial-gradient(500px circle at var(--mx) var(--my), rgba(45, 212, 191, 0.14), transparent 60%); } /* ---- 4. GLOW HALOS in dark mode (atmospheric depth) ---- */ .dark .section-title { text-shadow: 0 0 32px rgba(45, 212, 191, 0.12); } .dark .hero-gradient-text { filter: drop-shadow(0 0 28px rgba(45, 212, 191, 0.35)); } .dark .btn-primary { box-shadow: 0 0 32px rgba(20, 184, 166, 0.32), 0 8px 24px -8px rgba(13, 148, 136, .55); } .dark .btn-primary:hover { box-shadow: 0 0 48px rgba(20, 184, 166, 0.45), 0 14px 36px -8px rgba(13, 148, 136, .65); } .dark .btn-cta { box-shadow: 0 0 36px rgba(249, 115, 22, 0.3), 0 12px 32px -8px rgba(234, 88, 12, .6); } /* Subtle eyebrow line glow in dark */ .dark .eyebrow::before { box-shadow: 0 0 8px rgba(20, 184, 166, 0.6); } /* Floating stat cards in hero get a faint glow */ .dark .bob { box-shadow: 0 0 24px rgba(45, 212, 191, 0.15), 0 10px 40px -10px rgba(0, 0, 0, 0.5); } /* Process step number circles glow in dark */ .dark .process-num { box-shadow: 0 0 20px rgba(20, 184, 166, 0.2); } .dark .process-step:hover .process-num { box-shadow: 0 0 36px rgba(20, 184, 166, 0.5); } /* Trust monogram avatars get vibrant gradient + glow in dark */ .dark .from-teal-500.to-teal-700 { background: linear-gradient(135deg, #14B8A6, #0F766E) !important; box-shadow: 0 0 12px rgba(20, 184, 166, 0.4); } .dark .from-sun-500.to-sun-600 { background: linear-gradient(135deg, #F97316, #EA580C) !important; box-shadow: 0 0 12px rgba(249, 115, 22, 0.4); } .dark .from-teal-700.to-teal-900 { background: linear-gradient(135deg, #0F766E, #134E4A) !important; box-shadow: 0 0 12px rgba(15, 118, 110, 0.4); } /* ---- 5. SECTION TITLE underline pulse on enter ---- The auto-injected [data-fx="title-line"] gets a subtle glow burst as it draws in. */ [data-fx="title-line"].fx-in { animation: title-line-pulse 1.6s ease-out 0.2s; } @keyframes title-line-pulse { 0% { box-shadow: 0 0 0 rgba(20, 184, 166, 0); } 40% { box-shadow: 0 0 24px rgba(20, 184, 166, 0.6); } 100% { box-shadow: 0 0 0 rgba(20, 184, 166, 0); } } /* ---- 6. Hero badge subtle pulse glow ---- The "15+ Years · 4,200+ Patients" pill gently breathes. */ .hero-reveal.bg-teal-50 { animation: badge-breathe 3.5s ease-in-out infinite; } @keyframes badge-breathe { 0%, 100% { box-shadow: 0 0 0 rgba(14, 132, 122, 0); } 50% { box-shadow: 0 0 20px rgba(14, 132, 122, 0.18); } } .dark .hero-reveal.bg-teal-50 { animation-name: badge-breathe-dark; } @keyframes badge-breathe-dark { 0%, 100% { box-shadow: 0 0 0 rgba(45, 212, 191, 0); } 50% { box-shadow: 0 0 28px rgba(45, 212, 191, 0.35); } } /* ---- 7. Smoother transitions on more elements ---- Quick 250ms transitions so all colors land before the theme-ripple animation fades, eliminating "invisible text against new bg" glitches. */ .section-title, .eyebrow, .treatment-num, .treatment-title, .faq-q, .contact-row, .condition-chip, .condition-chip .chip-ico, .condition-chip .chip-label, .faq-icon, .process-num, .btn-primary, .btn-ghost, .btn-cta, .review-card blockquote, .bento-card h3 { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, text-shadow 0.25s ease; } /* ---- 8. Pause heavy animations under reduced-motion ---- */ @media (prefers-reduced-motion: reduce) { .theme-ripple, .dark #home::before, .dark #home::after, .hero-spotlight, .hero-reveal.bg-teal-50, [data-fx="title-line"].fx-in { animation: none !important; } } /* ===================================================================== ★ DARK MODE — Section gradient background overrides (v3.18) Problem: Tailwind gradient utilities (from-*, via-*, to-*) work via CSS custom properties (--tw-gradient-from etc.). Rules like ".dark .bg-paper { background-color: #0F1614 }" set background-color but do NOT affect gradient stop variables, so sections with gradient classes (from-teal-50 via-paper to-sun-50) stay cream/white in dark mode even though their text colors become light → invisible text. Similarly, "bg-white/95" generates a separate Tailwind class ".bg-white\/95" distinct from ".bg-white", so .dark .bg-white rules don't cover it. Fix: Override section backgrounds and the opacity-modified white popups explicitly with !important at the ID level. ===================================================================== */ /* ---- Home-visit section: cream teal→paper→sun gradient stays light ---- */ .dark #home-service { background: linear-gradient(135deg, #080E0D 0%, #0F1614 55%, #0C1110 100%) !important; } /* ---- Home-visit map pin popup: bg-white/95 escapes .dark .bg-white ---- */ .dark #home-service .bg-white\/95 { background-color: rgba(22, 29, 27, 0.96) !important; border-color: rgba(45, 212, 191, 0.15) !important; } /* ---- Home-visit map iframe: dark filter for readability ---- */ .dark #home-service iframe { filter: invert(0.9) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.65); } /* ---- Home-visit map card bottom strip inherits dark card bg ---- */ .dark #home-service .border-t.border-line { border-color: rgba(45, 212, 191, 0.12) !important; } /* ---- Contact section: cream-to-white gradient stays light ---- */ .dark #contact { background: linear-gradient(180deg, #0F1614 0%, #0A0F0E 100%) !important; } /* ---- Contact map popup: bg-white/95 (also handled by .top-5 rule, this is belt-and-suspenders for any other white-overlay popups) ---- */ .dark #contact .bg-white\/95 { background-color: rgba(22, 29, 27, 0.96) !important; border-color: rgba(45, 212, 191, 0.15) !important; } /* ---- Treatment image areas inside cards: from-teal-50 to-sun-50 ---- Already handled by .dark .treatment-card .treatment-img above, but reinforce so gradient stops don't bleed through on repaint. */ .dark .treatment-img[class*="from-teal-50"], .dark .treatment-img[class*="to-sun-50"] { background: #0F1614 !important; } /* ---- Add bg-white/95 to the global transition list for smooth toggle ---- */ .bg-white\/95 { transition: background-color 0.25s ease, border-color 0.25s ease; } /* ---- Blog page hero sections: same cream gradient as #home-service ---- Blog pages have no ID on the hero so target by class attribute substring. Covers all 5 blog hero sections + #home-service (both use from-teal-50). */ .dark section[class*="from-teal-50"] { background: linear-gradient(135deg, #080E0D 0%, #0F1614 55%, #0C1110 100%) !important; } /* ---- Blog page sticky headers: bg-white/90 (not covered by bg-white/85 rule) ---- */ .dark .bg-white\/90 { background: rgba(15, 22, 20, 0.85) !important; } /* ---- Blog article body text opacity variants: text-ink/80, text-ink/85 ---- Tailwind generates separate CSS classes for each opacity modifier. .dark .text-ink rule only handles the non-opacity class. */ .dark .text-ink\/80 { color: rgba(240, 237, 231, 0.85) !important; } .dark .text-ink\/85 { color: rgba(240, 237, 231, 0.9) !important; } /* ---- Smooth toggle for all bg-white opacity variants ---- */ .bg-white\/90, .bg-white\/80, .bg-white\/70 { transition: background-color 0.25s ease, border-color 0.25s ease; } /* ===================================================================== ★ MOBILE UX POLISH (v3.19) — Android-first, "best of best" 1. Kill the ugly default tap highlight (Android, Chrome on iOS) 2. Disable the 300ms "double-tap to zoom" delay on buttons/links 3. Bump touch targets to 44–48px minimum (WCAG 2.5.5 AAA) 4. Honour safe-area insets for Android gesture bar / iPhone notch ===================================================================== */ /* (1) Subtle teal tap highlight instead of harsh OS default */ html { -webkit-tap-highlight-color: rgba(14, 132, 122, 0.18); -webkit-text-size-adjust: 100%; /* prevent iOS auto-zoom on rotate */ text-size-adjust: 100%; } /* (2) Eliminate 300ms tap delay on interactive elements */ a, button, [role="button"], summary, input, select, textarea, label { touch-action: manipulation; } /* (3) Touch-target minimums on mobile */ @media (max-width: 767px) { /* Header nav icon-buttons: enforce 44px */ #lang-toggle, #theme-toggle, #mobile-menu-btn, #theme-toggle-mobile, #lang-toggle-mobile { min-width: 44px; min-height: 44px; } /* Mobile-menu links: extra-tall for thumb taps */ .mobile-link { min-height: 52px; display: flex; align-items: center; padding: 14px 4px; } /* Condition chips, FAQ summaries, treatment cards — comfy thumb area */ .condition-chip { min-height: 56px; } .faq-q { min-height: 56px; padding-top: 18px; padding-bottom: 18px; } /* Primary buttons hit 48px, ghost matches */ .btn-primary, .btn-ghost, .btn-cta { min-height: 48px; padding-top: 12px; padding-bottom: 12px; } /* Form inputs: 16px+ font prevents iOS auto-zoom */ .form-input { font-size: 16px; min-height: 48px; } } /* The mobile sticky CTA bar was removed in v3.36 — clean mobile UX prefers header CTAs + drawer CTA + contact section CTAs over a persistent bottom bar that competed with thumb-reach. Keep the rule below to suppress any stale markup if a cached page still has #mobile-cta-bar in DOM. */ #mobile-cta-bar, .mobile-cta-bar { display: none !important; } /* ===================================================================== ★ MOBILE DRAWER (v3.36 — clean rebuild) Drawer is now a sibling of

, not a child, so it has its own stacking context against and isn't constrained by the header's backdrop-filter context. ===================================================================== */ /* Body scroll-lock while drawer is open — prevents the under-page bleed that was making hero content visible behind the drawer on Safari/Chrome. */ html.menu-open, html.menu-open body { overflow: hidden !important; touch-action: none; } /* The drawer fills the *entire* viewport on every screen below lg. Six redundant overrides because real-world parent contexts can break any one of them (flex, grid, transformed ancestors, etc.). */ #mobile-menu { background-color: #FBFAF6 !important; width: 100vw !important; max-width: 100vw !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; height: 100vh !important; height: 100dvh !important; } .dark #mobile-menu { background-color: #0A0F0E !important; } /* Tighten mobile-link sizing (was text-2xl which felt overscaled — now text-base with a clean row layout, separator border, hover affordance) */ .mobile-link { display: flex !important; align-items: center; justify-content: space-between; padding: 14px 14px !important; font-size: 1rem !important; /* 16px */ font-weight: 600; border-radius: 12px; border-bottom: 1px solid transparent; color: #0E0F11; transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease; -webkit-tap-highlight-color: transparent; } .mobile-link::after { content: "→"; font-size: 0.9rem; color: #6B6E72; transition: transform 0.18s ease, color 0.18s ease; } .mobile-link:active { background-color: #EEFCFA; transform: scale(0.99); } .mobile-link:active::after { transform: translateX(2px); color: #0E847A; } .dark .mobile-link { color: #F0EDE7; } .dark .mobile-link::after { color: #6B6E72; } .dark .mobile-link:active { background-color: rgba(14, 132, 122, 0.18); } .dark .mobile-link:active::after { color: #5DDCC4; } /* Hide only the obsolete elements (sticky bar + chat-preview popup). The floating Phone (#tel-float) and WhatsApp (#wa-float) are now back as round corner buttons with blink animations — keep them visible. */ #mobile-cta-bar, .mobile-cta-bar, #wa-popup, .mcta-btn, .mcta-call, .mcta-whatsapp { display: none !important; } /* ===================================================================== ★ LANGUAGE PICKER MODAL — first-visit prompt (v3.36) Backdrop + centered card, smooth fade+scale entrance, two equal-width language buttons with hover/tap micro-interactions. ===================================================================== */ #lang-picker { position: fixed; inset: 0; z-index: 300; /* above drawer (200), above FABs (48) */ display: grid; place-items: center; padding: 20px; } #lang-picker[hidden] { display: none !important; } .lang-picker-backdrop { position: absolute; inset: 0; background: rgba(10, 15, 14, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.28s ease; } #lang-picker.is-open .lang-picker-backdrop { opacity: 1; } .lang-picker-card { position: relative; width: 100%; max-width: 380px; background: #FBFAF6; border: 1px solid #E8E3D9; border-radius: 24px; padding: 28px 24px; text-align: center; box-shadow: 0 32px 64px -20px rgba(15, 76, 70, 0.32); transform: translateY(16px) scale(0.96); opacity: 0; transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; } #lang-picker.is-open .lang-picker-card { transform: translateY(0) scale(1); opacity: 1; } .dark .lang-picker-card { background: #161D1B; border-color: rgba(45, 212, 191, 0.18); } .lang-picker-title { font-family: "Inter", system-ui, sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; color: #0E0F11; margin: 0 0 6px; } .dark .lang-picker-title { color: #F4F1EB; } .lang-picker-sub { font-size: 0.875rem; color: #6B6E72; margin: 0 0 24px; line-height: 1.5; } .dark .lang-picker-sub { color: #9CA39E; } .lang-picker-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .lang-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px 12px; border: 2px solid #E8E3D9; border-radius: 16px; background: white; color: #0E0F11; cursor: pointer; transition: transform 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } .lang-btn:hover { border-color: #0E847A; background: #EEFCFA; transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(14, 132, 122, 0.32); } .lang-btn:active { transform: translateY(0) scale(0.98); } .lang-btn-label { font-size: 1.125rem; font-weight: 700; } .lang-btn-sub { font-size: 0.7rem; color: #6B6E72; letter-spacing: 0.01em; } .dark .lang-btn { background: #1B2422; border-color: rgba(45, 212, 191, 0.2); color: #F0EDE7; } .dark .lang-btn:hover { border-color: #2DD4BF; background: rgba(14, 132, 122, 0.18); } .dark .lang-btn-sub { color: #9CA39E; } /* Lock body scroll while picker is up */ html.lang-picker-open, html.lang-picker-open body { overflow: hidden !important; } /* ===================================================================== ★ EXTRA MOBILE POLISH (v3.36) - Smoother momentum-style scrolling on iOS - Subtle press feedback on taps via ::after ripple - Buttery anchor-jump scrolling ===================================================================== */ html { scroll-behavior: smooth; } body { -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (max-width: 767px) { /* Slightly bigger tap-feedback on every primary CTA */ .btn-primary, .btn-ghost, .btn-cta { transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s ease, filter 0.18s ease; } .btn-primary:active, .btn-ghost:active, .btn-cta:active { transform: scale(0.97); } /* Section reveal animations are slightly faster on mobile to feel snappier */ .reveal { transition-duration: 0.5s; } } /* ===================================================================== ★ COMPACT CONTACT CARDS (v3.42) — replaces the bulky vertical cards that were too tall on mobile. Now: icon · text · arrow horizontal row, premium gradient skin, smooth tap interaction. Width capped at 480px on desktop so they don't span the full 700px panel — cleaner CTA hierarchy. ===================================================================== */ .contact-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: #FFFFFF; position: relative; overflow: hidden; width: 100%; max-width: 480px; margin-inline: auto; /* centered on every viewport */ transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.22s ease, filter 0.22s ease; -webkit-tap-highlight-color: transparent; isolation: isolate; } @media (max-width: 640px) { .contact-card { border-radius: 14px; } } .contact-card-wa { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); box-shadow: 0 10px 28px -12px rgba(37, 211, 102, 0.55); } .contact-card-tel { background: linear-gradient(135deg, #0EA68B 0%, #0E665E 100%); box-shadow: 0 10px 28px -12px rgba(14, 132, 122, 0.55); } /* Subtle moving sheen on hover/tap — adds premium feel without being distracting */ .contact-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%); transform: translateX(-100%); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; z-index: 1; } .contact-card:hover::before { transform: translateX(100%); } .contact-card:hover { transform: translateY(-2px); filter: brightness(1.05); } .contact-card:active { transform: scale(0.98); filter: brightness(0.96); } .contact-card-icon { position: relative; z-index: 2; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.22); backdrop-filter: blur(6px); display: grid; place-items: center; flex-shrink: 0; } .contact-card-text { position: relative; z-index: 2; flex: 1 1 0; min-width: 0; /* let text shrink instead of pushing arrow off */ } .contact-card-title { font-weight: 700; font-size: 0.95rem; line-height: 1.25; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contact-card-sub { font-size: 0.75rem; opacity: 0.86; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contact-card-arrow { position: relative; z-index: 2; width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; transition: transform 0.25s ease, opacity 0.25s ease; } .contact-card:hover .contact-card-arrow, .contact-card:active .contact-card-arrow { transform: translateX(4px); opacity: 1; } /* ===================================================================== ★ ENHANCED MOBILE ANIMATIONS (v3.41) — smooth, creative, restrained - Stagger fade-up for grid children (conditions, treatments, etc.) - Float animation on hero badge - Soft pulse on "Replying within minutes" status pill - Tap-scale on every clickable card ===================================================================== */ @keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes pulse-soft { 0%, 100% { box-shadow: 0 0 0 0 rgba(14, 166, 139, 0.45); } 70% { box-shadow: 0 0 0 6px rgba(14, 166, 139, 0); } } @keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Hero badge "Natural · Safe · Effective" floats gently */ .hero-reveal.bg-teal-50 { animation: float-soft 4s ease-in-out infinite; } /* "Replying within minutes" pill softly pulses */ .bg-teal-50.text-teal-700:has(> .animate-pulse) { animation: pulse-soft 2.4s ease-out infinite; } /* Stagger reveal: each .reveal child of a section appears 80ms after the prior */ section .reveal:nth-child(1) { animation-delay: 0ms; } section .reveal:nth-child(2) { animation-delay: 80ms; } section .reveal:nth-child(3) { animation-delay: 160ms; } section .reveal:nth-child(4) { animation-delay: 240ms; } section .reveal:nth-child(5) { animation-delay: 320ms; } section .reveal:nth-child(6) { animation-delay: 400ms; } /* Tap-scale feedback on EVERY clickable card on mobile */ @media (max-width: 767px) { .bento-card, .feature-card, .treatment-card, .condition-chip, .faq-item summary, .review-card { transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } .bento-card:active, .feature-card:active, .treatment-card:active, .condition-chip:active, .faq-item summary:active, .review-card:active { transform: scale(0.985); } /* Disable the constant float/pulse animations on reduced-motion */ @media (prefers-reduced-motion: reduce) { .hero-reveal.bg-teal-50, .bg-teal-50.text-teal-700:has(> .animate-pulse) { animation: none !important; } } }