/* ════════════════════════════════════════════════════════════════════════════ CLINIC HOMEPAGE · PREMIUM LAYER Editorial-grade upgrades layered on top of clinic-home.css (Modern theme). Goal: a $1M+ agency-level aesthetic — typography, motion, depth, light. Safe to remove/toggle: this file only overrides and extends, it does not rely on structural HTML changes. ════════════════════════════════════════════════════════════════════════════ */ :root { --clinic-display-font: 'Fraunces', 'Playfair Display', Georgia, serif; --clinic-accent: #f59e0b; --clinic-accent-2: #10b981; --clinic-ink: #0b1220; --clinic-ink-soft: #121a2e; --clinic-hairline: rgba(15, 23, 42, 0.08); --clinic-glow-primary: 0 0 60px rgba(99, 102, 241, 0.35); --noise-tex: url("data:image/svg+xml;utf8,"); } /* Smooth scroll + respect reduced motion */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body.clinic-homepage *, body.clinic-homepage *::before, body.clinic-homepage *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ─── Scroll progress bar (JS sets --scroll: 0..1 on ) ───────────── */ body.clinic-homepage::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--clinic-primary), var(--clinic-accent-2) 55%, var(--clinic-accent)); transform-origin: left center; transform: scaleX(var(--scroll, 0)); z-index: 2000; pointer-events: none; will-change: transform; } /* ─── Selection + focus polish ────────────────────────────────────────── */ body.clinic-homepage ::selection { background: rgba(99, 102, 241, 0.28); color: var(--clinic-text); } body.clinic-homepage *:focus-visible { outline: 2px solid var(--clinic-primary); outline-offset: 3px; border-radius: 4px; } /* ──────────────────────────────────────────────────────────────────────── HERO — editorial display, layered mesh, grain, float ──────────────────────────────────────────────────────────────────────── */ .clinic-hero { min-height: 92vh; padding: 10rem 0 6rem; background: radial-gradient(ellipse 70% 60% at 18% 18%, rgba(99, 102, 241, 0.16) 0%, transparent 60%), radial-gradient(ellipse 65% 55% at 82% 28%, rgba(16, 185, 129, 0.12) 0%, transparent 60%), radial-gradient(ellipse 60% 55% at 50% 95%, rgba(245, 158, 11, 0.10) 0%, transparent 60%), linear-gradient(160deg, #f3f6ff 0%, #eef1ff 30%, #f0fdf4 70%, #fef9f0 100%); } /* Film grain overlay for subtle analog texture */ .clinic-hero::after { content: ''; position: absolute; inset: 0; background-image: var(--noise-tex); opacity: 0.55; mix-blend-mode: overlay; pointer-events: none; z-index: 1; } /* Luxe blurred colour blobs — elevated from flat circles */ .clinic-hero .hero-shape { filter: blur(90px); opacity: 0.35 !important; mix-blend-mode: screen; transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1); } .clinic-hero .hero-shape-1 { background: radial-gradient(circle at 30% 30%, var(--clinic-primary), transparent 70%); width: 620px; height: 620px; } .clinic-hero .hero-shape-2 { background: radial-gradient(circle at 40% 40%, var(--clinic-accent-2), transparent 70%); width: 360px; height: 360px; } .clinic-hero .hero-shape-3 { background: radial-gradient(circle at 50% 50%, var(--clinic-accent), transparent 70%); width: 240px; height: 240px; } .clinic-hero .container { position: relative; z-index: 2; } /* Editorial display serif hero title */ .hero-title { font-family: var(--clinic-display-font); font-weight: 500; font-size: clamp(2.75rem, 6.4vw, 5rem); line-height: 1.02; letter-spacing: -0.035em; color: var(--clinic-ink); margin-bottom: 1.5rem; font-variation-settings: "opsz" 144, "SOFT" 30; text-wrap: balance; } .hero-title::after { content: ''; display: block; width: 72px; height: 4px; margin-top: 1.75rem; border-radius: 4px; background: linear-gradient(90deg, var(--clinic-primary), var(--clinic-accent-2)); box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35); } .hero-subtitle { font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.7; color: var(--clinic-text); opacity: 0.82; max-width: 560px; margin-bottom: 2.5rem; } /* Hero primary CTA — animated conic shimmer ring */ .btn-hero-primary { position: relative; isolation: isolate; padding: 1.05rem 2.4rem; font-size: 1.05rem; letter-spacing: 0.01em; box-shadow: 0 12px 35px rgba(99, 102, 241, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .btn-hero-primary::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: conic-gradient(from 0deg, var(--clinic-primary), var(--clinic-accent-2), var(--clinic-accent), var(--clinic-primary)); z-index: -1; opacity: 0; filter: blur(10px); animation: cta-shimmer 5s linear infinite; transition: opacity 0.4s; } .btn-hero-primary:hover::after { opacity: 0.85; } @keyframes cta-shimmer { to { transform: rotate(1turn); } } .btn-hero-secondary { background: rgba(255, 255, 255, 0.65); border-color: rgba(15, 23, 42, 0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Hero visual — editorial accents: dashed ring + floating dot */ .hero-visual { position: relative; } .hero-visual::before { content: ''; position: absolute; width: 140px; height: 140px; top: -28px; right: -18px; border-radius: 50%; border: 1.5px dashed rgba(99, 102, 241, 0.45); animation: slow-spin 40s linear infinite; pointer-events: none; z-index: 1; } .hero-visual::after { content: ''; position: absolute; width: 20px; height: 20px; bottom: 10%; left: -8px; border-radius: 50%; background: var(--clinic-accent); box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.18), 0 10px 30px rgba(245, 158, 11, 0.45); animation: float-dot 6s ease-in-out infinite; pointer-events: none; z-index: 1; } @keyframes slow-spin { to { transform: rotate(360deg); } } @keyframes float-dot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } .hero-image { position: relative; z-index: 2; border-radius: 1.5rem; box-shadow: 0 50px 120px rgba(15, 23, 42, 0.22), 0 20px 48px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.8); animation: hero-float 9s ease-in-out infinite; } @keyframes hero-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(0.6deg); } } /* Hero trust bar — luxe divider dots instead of a border line */ .hero-trust { border-top: none; padding-top: 0; margin-top: 1.75rem; gap: 0; align-items: center; } .hero-trust-item { padding: 0 1.25rem; position: relative; font-weight: 500; } .hero-trust-item:first-child { padding-left: 0; } .hero-trust-item + .hero-trust-item::before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgba(15, 23, 42, 0.25); transform: translateY(-50%); } /* ──────────────────────────────────────────────────────────────────────── SECTION HEADINGS — editorial eyebrow + display serif titles ──────────────────────────────────────────────────────────────────────── */ .section-title { font-family: var(--clinic-display-font); font-weight: 500; font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.1; letter-spacing: -0.028em; font-variation-settings: "opsz" 80; color: var(--clinic-ink); text-wrap: balance; } .section-badge { background: transparent; border: none; color: var(--clinic-text-muted); padding: 0; text-transform: uppercase; font-size: 0.74rem; letter-spacing: 0.22em; font-weight: 600; margin-bottom: 1.1rem; display: inline-flex; align-items: center; gap: 0.65rem; } .section-badge::before { content: ''; width: 28px; height: 1px; background: linear-gradient(90deg, var(--clinic-primary), transparent); } .section-badge i { color: var(--clinic-primary); font-size: 0.85rem; } /* Centered badge variant — horizontal accent under the title instead */ .text-center .section-badge::before { display: none; } .text-center .section-badge { display: inline-flex; flex-direction: column; gap: 0; align-items: center; } .text-center .section-title + * { margin-top: 0.75rem; } /* ──────────────────────────────────────────────────────────────────────── STATS — editorial numerals + subtle divider ──────────────────────────────────────────────────────────────────────── */ .stat-value { font-family: var(--clinic-display-font); font-weight: 600; font-size: clamp(2.8rem, 4.5vw, 3.8rem); letter-spacing: -0.035em; font-variation-settings: "opsz" 144; background: linear-gradient(180deg, #ffffff 0%, rgba(165, 180, 252, 0.95) 120%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .stat-icon i { background: linear-gradient(135deg, var(--clinic-primary), var(--clinic-accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 6px 16px rgba(99, 102, 241, 0.35)); } .stat-label { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); } /* ──────────────────────────────────────────────────────────────────────── SERVICE CARDS — editorial w/ animated gradient border ──────────────────────────────────────────────────────────────────────── */ .clinic-services .service-card { position: relative; padding: 2.25rem 1.75rem 2rem; background: #fff; border: 1px solid var(--clinic-hairline); border-radius: 1.25rem; overflow: hidden; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s, border-color 0.3s; will-change: transform; } .clinic-services .service-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), transparent 55%); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .clinic-services .service-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--clinic-primary), var(--clinic-accent-2)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .clinic-services .service-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(15, 23, 42, 0.12); border-color: transparent; } .clinic-services .service-card:hover::before, .clinic-services .service-card:hover::after { opacity: 1; } .clinic-services .service-card:hover::after { transform: scaleX(1); } /* Base clinic-home.css turns title/desc/icon WHITE on hover (designed for its solid-gradient hover background). The premium layout keeps a white card on hover, so white text would disappear. Restore the editorial colors. */ .clinic-services .service-card:hover .service-title { color: var(--clinic-ink, #0f172a); } .clinic-services .service-card:hover .service-desc { color: var(--clinic-muted, #475569); } .clinic-services .service-card:hover .service-icon { background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(16, 185, 129, 0.18)); color: var(--clinic-primary); box-shadow: none; } .service-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(16, 185, 129, 0.12)); color: var(--clinic-primary); border-radius: 1rem; font-size: 1.35rem; margin-bottom: 1.25rem; } .service-title { font-family: var(--clinic-display-font); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.015em; } /* ──────────────────────────────────────────────────────────────────────── TEAM CARDS — refined portrait w/ concentric aura ──────────────────────────────────────────────────────────────────────── */ .clinic-team .team-card { background: #fff; border: 1px solid var(--clinic-hairline); border-radius: 1.25rem; padding: 2rem 1.5rem; transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.45s; } .clinic-team .team-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(15, 23, 42, 0.14); } .clinic-team .team-photo { width: 128px; height: 128px; margin: 0 auto 1.25rem; border-radius: 50%; overflow: hidden; position: relative; background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(16, 185, 129, 0.15)); box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(99, 102, 241, 0.2); } .clinic-team .team-img, .clinic-team .team-photo .team-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .clinic-team .team-card:hover .team-img { transform: scale(1.08); } .clinic-team .team-name { font-family: var(--clinic-display-font); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; } /* ──────────────────────────────────────────────────────────────────────── TESTIMONIALS — editorial quote card ──────────────────────────────────────────────────────────────────────── */ .clinic-testimonials .testimonial-card { background: #fff; border: 1px solid var(--clinic-hairline); border-radius: 1.25rem; padding: 2.5rem 1.75rem 1.75rem; position: relative; transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s; } .clinic-testimonials .testimonial-card::before { content: "\201C"; position: absolute; top: -14px; left: 18px; font-family: var(--clinic-display-font); font-size: 5rem; line-height: 1; color: rgba(99, 102, 241, 0.55); font-weight: 700; text-shadow: 0 6px 18px rgba(99, 102, 241, 0.22); pointer-events: none; } .clinic-testimonials .testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 25px 55px rgba(15, 23, 42, 0.12); } .clinic-testimonials .testimonial-text { font-family: var(--clinic-display-font); font-weight: 400; font-size: 1.05rem; line-height: 1.65; color: var(--clinic-text); font-style: italic; } .clinic-testimonials .testimonial-stars i { color: var(--clinic-accent); } /* ──────────────────────────────────────────────────────────────────────── CONTACT — elevated panel + glossy map ──────────────────────────────────────────────────────────────────────── */ .contact-info-card { background: linear-gradient(180deg, #fff 0%, var(--clinic-bg-soft) 100%); border-radius: 1.5rem; box-shadow: 0 30px 60px rgba(15, 23, 42, 0.06); border: 1px solid var(--clinic-hairline); } .map-container { border-radius: 1.5rem; overflow: hidden; box-shadow: 0 30px 60px rgba(15, 23, 42, 0.12); border: 1px solid var(--clinic-hairline); height: 100%; min-height: 420px; } .map-container iframe { display: block; height: 100%; } /* ──────────────────────────────────────────────────────────────────────── FAQ — frosted accordion ──────────────────────────────────────────────────────────────────────── */ .clinic-faq .accordion-item { border-radius: 1rem !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(255, 255, 255, 0.92); border: 1px solid var(--clinic-hairline); } /* ──────────────────────────────────────────────────────────────────────── REGISTER CTA — editorial dark panel w/ mesh ──────────────────────────────────────────────────────────────────────── */ .clinic-register-cta { position: relative; padding: 6.5rem 0; background: radial-gradient(ellipse 55% 55% at 20% 30%, rgba(99, 102, 241, 0.45), transparent 60%), radial-gradient(ellipse 55% 55% at 80% 70%, rgba(16, 185, 129, 0.30), transparent 60%), var(--clinic-ink); color: #fff; overflow: hidden; } .clinic-register-cta::after { content: ''; position: absolute; inset: 0; background-image: var(--noise-tex); opacity: 0.4; mix-blend-mode: overlay; pointer-events: none; } .clinic-register-cta .container { position: relative; z-index: 1; } .clinic-register-cta .section-title { color: #fff; } .clinic-register-cta .section-badge { color: rgba(255, 255, 255, 0.72); } .clinic-register-cta .register-cta-text { color: rgba(255, 255, 255, 0.82); } .btn-register-cta { box-shadow: 0 18px 48px rgba(255, 255, 255, 0.18); } .btn-register-cta:hover { box-shadow: 0 22px 60px rgba(255, 255, 255, 0.3); } /* ──────────────────────────────────────────────────────────────────────── FOOTER — refined ──────────────────────────────────────────────────────────────────────── */ .clinic-footer { background: var(--clinic-ink); color: rgba(255, 255, 255, 0.72); padding: 3.5rem 0 2rem; position: relative; } .clinic-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.45), transparent); } .footer-brand { font-family: var(--clinic-display-font); font-weight: 600; font-size: 1.55rem; color: #fff; display: inline-flex; align-items: center; gap: 0.75rem; letter-spacing: -0.01em; } .footer-brand i { background: linear-gradient(135deg, var(--clinic-primary), var(--clinic-accent-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 1.3rem; } .footer-tagline { color: rgba(255, 255, 255, 0.55); margin-top: 0.35rem; } .footer-social a { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; margin-left: 0.5rem; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); text-decoration: none; } .footer-social a:hover { background: var(--clinic-primary); transform: translateY(-3px); box-shadow: 0 12px 24px rgba(99, 102, 241, 0.35); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 2.25rem; padding-top: 1.5rem; font-size: 0.85rem; text-align: center; color: rgba(255, 255, 255, 0.55); } .footer-bottom .powered-link { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-weight: 600; } .footer-bottom .powered-link:hover { color: #fff; } /* ──────────────────────────────────────────────────────────────────────── WHATSAPP FLOAT — polished ring pulse ──────────────────────────────────────────────────────────────────────── */ .whatsapp-float { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45), 0 0 0 4px rgba(37, 211, 102, 0.12); } /* ──────────────────────────────────────────────────────────────────────── MOTION TOKENS — magnetic / tilt base (JS applies inline transforms) ──────────────────────────────────────────────────────────────────────── */ .magnetic { transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1); will-change: transform; } .magnetic:hover { transition-duration: 0.1s; } .service-card, .team-card, .testimonial-card { transform-style: preserve-3d; perspective: 900px; } /* ──────────────────────────────────────────────────────────────────────── RESPONSIVE REFINEMENTS ──────────────────────────────────────────────────────────────────────── */ @media (max-width: 991.98px) { .clinic-hero { min-height: auto; padding-top: 8.5rem; padding-bottom: 4.5rem; } .hero-visual::before { width: 90px; height: 90px; top: -14px; right: -10px; } } @media (max-width: 767.98px) { .hero-title { font-size: clamp(2.1rem, 9vw, 3rem); } .hero-title::after { width: 54px; height: 3px; margin-top: 1.25rem; } .clinic-hero { padding-top: 7.5rem; padding-bottom: 3.5rem; } .clinic-hero .hero-shape { filter: blur(70px); } .hero-visual::before, .hero-visual::after { display: none; } .clinic-register-cta { padding: 4rem 0; } .clinic-testimonials .testimonial-card::before { font-size: 3.5rem; top: -6px; } }