/* ===== Vibrant-wellness palette — brand teal + sage, brightened ===== */ :root{ --brand-teal:#2E6267; /* exact logo wordmark */ --teal-900:#0B2024; --teal-800:#173F44; --teal-700:#2E6267; --teal-600:#3B7B80; --teal-500:#5A999E; --teal-bright:#4FA7AC; /* fresher, brighter teal for energy */ --sage:#8FB8A0; --sage-light:#C9E2D1; /* softer, brighter sage wash */ --sage-soft:#E8F3EC; /* breathable mint wash */ --sage-deep:#4A8274; --mint-50:#F4FAF6; /* almost-white mint — replaces cream for main bg */ --mint-100:#E8F3EC; --cream:#FAF6EC; /* kept for legacy references */ --cream-2:#F0E9D8; /* fun supporting palette — brings warmth & friendliness without losing the brand */ --coral:#FF8A6B; /* warm friendly coral */ --coral-soft:#FFD4C4; --coral-bg:#FFEEE5; --sunny:#FFC857; /* warm sunny yellow */ --sunny-soft:#FFE7B0; --sunny-bg:#FFF6E0; --sky:#7FC9DA; /* friendly sky blue */ --sky-soft:#C9E8F0; --sky-bg:#EAF6FA; --lavender:#B8A8E0; /* gentle lavender */ --lavender-soft:#E0D7F2; --lavender-bg:#F0EBFA; --pink:#F4A5C5; --pink-soft:#FCD8E5; --pink-bg:#FCE9F1; --blush:#FFF3EE; --peach:#FFD7C2; --ink:#142628; --ink-soft:#4C6365; --line:rgba(46,98,103,0.10); --shadow:0 16px 40px -16px rgba(46,98,103,0.18); --shadow-lg:0 40px 80px -24px rgba(46,98,103,0.22); --shadow-sm:0 6px 20px -8px rgba(46,98,103,0.16); --shadow-colored:0 20px 50px -20px rgba(143,184,170,0.55); --r-sm:14px; --r-md:22px; --r-lg:32px; --r-xl:48px; --grad-teal:linear-gradient(135deg, var(--brand-teal) 0%, var(--teal-bright) 100%); --grad-sage:linear-gradient(135deg, var(--sage-light) 0%, #DFEFE3 100%); --grad-hero:linear-gradient(180deg, #FFFFFF 0%, var(--mint-50) 60%, var(--sage-soft) 100%); /* legacy aliases so older rules still work */ --gold:var(--sage); --gold-dark:var(--sage-deep); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color:var(--ink); background:#FFFFFF; line-height:1.65; -webkit-font-smoothing:antialiased; font-size:17px; } h1,h2,h3,h4{ font-family:'Bricolage Grotesque','Inter',sans-serif; font-weight:600; letter-spacing:-0.025em; color:var(--teal-900); } h1{font-size:clamp(2.8rem, 6vw, 5rem); line-height:1.02; font-weight:700; letter-spacing:-0.035em} h2{font-size:clamp(2.2rem, 4.2vw, 3.6rem); line-height:1.05; letter-spacing:-0.03em; font-weight:700} h3{font-size:1.55rem; line-height:1.22; letter-spacing:-0.02em; font-weight:600} h4{font-size:1.15rem} p{color:var(--ink-soft); font-size:1.02rem} a{color:inherit; text-decoration:none} img{max-width:100%; display:block} .container{max-width:1280px; margin:0 auto; padding:0 28px} .eyebrow{ font-family:'Inter', sans-serif; text-transform:uppercase; letter-spacing:0.14em; font-size:0.78rem; color:var(--brand-teal); font-weight:600; display:inline-flex; align-items:center; gap:10px; background:var(--sage-soft); padding:8px 16px; border-radius:999px; border:1px solid rgba(143,184,170,0.3); } .eyebrow::before{ content:""; display:inline-block; width:6px; height:6px; background:var(--brand-teal); border-radius:50%; } /* Per-section eyebrow colours for friendlier variety */ #about .eyebrow{background:var(--coral-bg); color:var(--coral); border-color:var(--coral-soft)} #about .eyebrow::before{background:var(--coral)} .services .eyebrow{background:var(--sunny-bg); color:#B07815; border-color:var(--sunny-soft)} .services .eyebrow::before{background:#D49A2C} #team .eyebrow{background:var(--sky-bg); color:#2E6F7E; border-color:var(--sky-soft)} #team .eyebrow::before{background:#3D8FA1} .testimonials .eyebrow{background:var(--pink-bg); color:#A85478; border-color:var(--pink-soft)} .testimonials .eyebrow::before{background:#C26A8E} .blog-section .eyebrow{background:var(--lavender-bg); color:#6A57AC; border-color:var(--lavender-soft)} .blog-section .eyebrow::before{background:#7E6BC1} #contact .eyebrow{background:var(--coral-bg); color:var(--coral); border-color:var(--coral-soft)} #contact .eyebrow::before{background:var(--coral)} /* ===== Top info bar — animated marquee ===== */ .topbar{ background:linear-gradient(90deg, var(--teal-900) 0%, var(--brand-teal) 50%, var(--teal-900) 100%); color:#fff; font-size:0.9rem; padding:14px 0; overflow:hidden; position:relative; border-bottom:2px solid var(--sage); box-shadow:0 2px 12px rgba(0,0,0,0.18); } .topbar::before, .topbar::after{ content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; } .topbar::before{left:0; background:linear-gradient(90deg, var(--teal-900) 0%, transparent 100%)} .topbar::after{right:0; background:linear-gradient(-90deg, var(--teal-900) 0%, transparent 100%)} .topbar-track{ display:flex; gap:0; width:max-content; animation:marquee 38s linear infinite; } .topbar:hover .topbar-track{animation-play-state:paused} .topbar-item{ display:inline-flex; align-items:center; gap:10px; padding:0 28px; white-space:nowrap; font-family:'Inter',sans-serif; font-weight:500; letter-spacing:0.03em; border-right:1px solid rgba(143,184,170,0.25); } .topbar-item i{ color:var(--sage-light); font-size:0.95rem; } .topbar-item.accent{color:#FFF7DB} .topbar-item.accent i{color:#FFD88A} .topbar a.topbar-item{color:#fff; transition:color .3s ease} .topbar a.topbar-item:hover{color:var(--sage-light)} @keyframes marquee{ 0% { transform:translateX(0) } 100%{ transform:translateX(-50%) } } /* ===== Section-transition marquees (mid-page banners) ===== */ .section-marquee{ position:relative; overflow:hidden; padding:18px 0; z-index:2; border-top:1px solid rgba(0,0,0,0.04); border-bottom:1px solid rgba(0,0,0,0.04); } .section-marquee::before, .section-marquee::after{ content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; } .section-marquee--coral{ background:linear-gradient(90deg, #ff8a6b 0%, #ff7a5f 50%, #ff6a55 100%); color:#fff; } .section-marquee--coral::before{background:linear-gradient(90deg, #ff8a6b 0%, rgba(255,138,107,0) 100%)} .section-marquee--coral::after{background:linear-gradient(-90deg, #ff6a55 0%, rgba(255,106,85,0) 100%)} .section-marquee--navy{ background:linear-gradient(90deg, #0e3a4a 0%, #134b60 50%, #0e3a4a 100%); color:#FFF7DB; } .section-marquee--navy::before{background:linear-gradient(90deg, #0e3a4a 0%, rgba(14,58,74,0) 100%)} .section-marquee--navy::after{background:linear-gradient(-90deg, #0e3a4a 0%, rgba(14,58,74,0) 100%)} .section-marquee--cream{ background:linear-gradient(90deg, #FFF3E0 0%, #FFE9C9 50%, #FFF3E0 100%); color:#5a3a1a; border-top-color:rgba(212,154,44,0.18); border-bottom-color:rgba(212,154,44,0.18); } .section-marquee--cream::before{background:linear-gradient(90deg, #FFF3E0 0%, rgba(255,243,224,0) 100%)} .section-marquee--cream::after{background:linear-gradient(-90deg, #FFF3E0 0%, rgba(255,243,224,0) 100%)} .section-marquee--sage{ background:linear-gradient(90deg, #c7dccb 0%, #b9d4be 50%, #c7dccb 100%); color:#1f3a2b; border-top-color:rgba(31,58,43,0.10); border-bottom-color:rgba(31,58,43,0.10); } .section-marquee--sage::before{background:linear-gradient(90deg, #c7dccb 0%, rgba(199,220,203,0) 100%)} .section-marquee--sage::after{background:linear-gradient(-90deg, #c7dccb 0%, rgba(199,220,203,0) 100%)} .sm-track{ display:inline-flex; gap:0; white-space:nowrap; will-change:transform; animation:marquee 42s linear infinite; } .section-marquee:hover .sm-track{animation-play-state:paused} .sm-item{ display:inline-flex; align-items:center; gap:10px; padding:0 26px; font-size:1.02rem; font-weight:600; letter-spacing:0.01em; } .sm-item i{font-size:1rem; opacity:0.85} .sm-item strong{font-weight:800; letter-spacing:0.02em} .sm-bullet{ display:inline-flex; align-items:center; padding:0 6px; opacity:0.55; font-size:0.85rem; } .section-marquee--coral .sm-bullet{color:#FFF7DB} .section-marquee--navy .sm-bullet{color:#FFD88A} .section-marquee--cream .sm-bullet{color:#b27c1a} .section-marquee--sage .sm-bullet{color:#1f3a2b} /* Speed variants — let each banner feel different */ .sm-fast .sm-track{animation-duration:30s} .sm-slow .sm-track{animation-duration:55s} /* Reverse direction banner (visual variety when stacked) */ .sm-reverse .sm-track{animation-direction:reverse} /* ===== Stacked dual-banner (Cranbourne West pattern) ===== */ .marquee-stack{position:relative} .marquee-stack .section-marquee + .section-marquee{margin-top:0} /* ===== Floating hero callout ("Same-day appointments available") ===== */ .hero-floating-callout{ position:relative; margin:-28px auto 0; max-width:560px; background:#fff; border:1px solid rgba(14,58,74,0.10); border-radius:18px; padding:18px 22px; box-shadow:0 24px 60px -28px rgba(14,58,74,0.40), 0 8px 24px -12px rgba(0,0,0,0.10); display:flex; align-items:center; gap:16px; z-index:5; opacity:0; transform:translateY(18px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); transition-delay:.6s; } .hero-floating-callout.in{opacity:1; transform:translateY(0)} .hero-floating-callout::before{ content:""; position:absolute; top:-8px; left:50%; width:14px; height:14px; background:#fff; transform:translateX(-50%) rotate(45deg); border-top:1px solid rgba(14,58,74,0.10); border-left:1px solid rgba(14,58,74,0.10); } .hfc-dot{ position:relative; flex:0 0 12px; height:12px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,0.18); } .hfc-dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; background:rgba(34,197,94,0.35); animation:hfcPulse 1.8s ease-in-out infinite; } @keyframes hfcPulse{ 0% {transform:scale(1); opacity:0.9} 100%{transform:scale(2.2); opacity:0} } .hfc-body{flex:1; line-height:1.4} .hfc-body strong{display:block; color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:1.02rem} .hfc-body span{display:block; font-size:0.86rem; color:#5a6970} .hfc-cta{ display:inline-flex; align-items:center; gap:6px; padding:10px 16px; background:var(--coral); color:#fff; border-radius:999px; font-weight:700; font-size:0.88rem; text-decoration:none; transition:transform .25s ease, box-shadow .25s ease; box-shadow:0 6px 18px -8px rgba(255,106,85,0.55); } .hfc-cta:hover{transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(255,106,85,0.7)} @media (max-width:680px){ .hero-floating-callout{flex-direction:column; text-align:center; max-width:90%; padding:18px} .hfc-cta{margin-top:4px} } /* ===== Loved-by-locals heart badge ===== */ .loved-badge{ display:inline-flex; align-items:center; gap:10px; padding:10px 18px; background:linear-gradient(135deg, #fff 0%, #fff5ee 100%); border:1px solid rgba(255,106,85,0.18); border-radius:999px; box-shadow:0 8px 24px -12px rgba(255,106,85,0.30); font-weight:600; color:#7a3a2a; font-size:0.95rem; position:relative; } .loved-badge .heart{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; color:var(--coral); font-size:1.1rem; animation:heartBeat 1.6s ease-in-out infinite; } @keyframes heartBeat{ 0%, 100%{transform:scale(1)} 14%{transform:scale(1.25)} 28%{transform:scale(1)} 42%{transform:scale(1.18)} 70%{transform:scale(1)} } .loved-badge strong{color:var(--coral); font-weight:800} /* ===== Languages chip cluster ===== */ .lang-cluster{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px; } .lang-chip{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; background:#fff; border:1px solid rgba(14,58,74,0.10); border-radius:999px; font-weight:600; font-size:0.9rem; color:var(--ink); transition:all .3s cubic-bezier(.2,.8,.2,1); cursor:default; position:relative; overflow:hidden; } .lang-chip::before{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,138,107,0.18) 50%, transparent 70%); transform:translateX(-100%); transition:transform .6s ease; } .lang-chip:hover{ transform:translateY(-3px); border-color:var(--coral); color:var(--coral); box-shadow:0 10px 24px -10px rgba(255,106,85,0.35); } .lang-chip:hover::before{transform:translateX(100%)} .lang-chip .flag{font-size:1rem; opacity:0.7} /* ===== Service chip cloud (rapid-tap navigation) ===== */ .chip-cloud{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:980px; margin:24px auto 0; } .chip-cloud .chip{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; background:#fff; border:1px solid rgba(14,58,74,0.10); border-radius:999px; font-weight:600; font-size:0.92rem; color:var(--ink); text-decoration:none; transition:all .28s cubic-bezier(.2,.8,.2,1); } .chip-cloud .chip i{font-size:0.85rem; color:var(--coral); transition:transform .25s ease} .chip-cloud .chip:hover{ transform:translateY(-3px); background:var(--coral); color:#fff; border-color:var(--coral); box-shadow:0 12px 28px -12px rgba(255,106,85,0.45); } .chip-cloud .chip:hover i{color:#fff; transform:translateX(3px)} .chip-cloud .chip.chip--featured{ background:linear-gradient(135deg, #FFD88A 0%, #FFB44A 100%); border-color:transparent; color:#5a3a1a; } .chip-cloud .chip.chip--featured i{color:#5a3a1a} .chip-cloud .chip.chip--featured:hover{ background:linear-gradient(135deg, var(--coral) 0%, #ff7a5f 100%); color:#fff; } /* ===== Suburb tiles with drive-time ===== */ .suburb-tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; margin-top:24px; } .suburb-tile{ background:#fff; border:1px solid rgba(14,58,74,0.08); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; position:relative; overflow:hidden; } .suburb-tile::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--coral); transform:scaleY(0); transform-origin:top; transition:transform .4s ease; } .suburb-tile:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -22px rgba(14,58,74,0.30); border-color:transparent; } .suburb-tile:hover::after{transform:scaleY(1)} .suburb-tile .name{font-family:var(--font-display); font-weight:700; color:var(--ink); font-size:1rem} .suburb-tile .pc{font-size:0.78rem; color:#7a8a90; font-weight:500} .suburb-tile .drive{ margin-top:4px; display:inline-flex; align-items:center; gap:5px; font-size:0.82rem; color:var(--coral); font-weight:700; } .suburb-tile .drive i{font-size:0.75rem} .suburb-tile.suburb-tile--primary{ background:linear-gradient(135deg, var(--coral) 0%, #ff7a5f 100%); border-color:transparent; color:#fff; } .suburb-tile.suburb-tile--primary .name{color:#fff} .suburb-tile.suburb-tile--primary .pc, .suburb-tile.suburb-tile--primary .drive{color:rgba(255,255,255,0.92)} .suburb-tile.suburb-tile--primary::after{display:none} /* ===== Header / Nav ===== */ header.site{ background:rgba(255,255,255,0.85); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; } .nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; } .brand{display:flex; align-items:center; gap:14px} .brand-logo{ height:56px; display:inline-block; background:transparent; padding:0; box-shadow:none; } .brand-logo img{height:100%; width:auto; display:block} /* Logo on dark footer gets a soft cream pill so the teal wordmark stays readable */ footer .brand-logo{ background:var(--cream); padding:14px 22px; border-radius:8px; height:auto; display:inline-block; } footer .brand-logo img{height:44px} nav.primary{flex:1; margin:0 40px} nav.primary ul{list-style:none; display:flex; justify-content:space-evenly; align-items:center; gap:8px; width:100%} nav.primary a{ font-size:0.92rem; font-weight:500; color:var(--brand-teal); position:relative; padding:6px 0; } nav.primary a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .35s ease; } nav.primary a:hover::after{width:100%} .btn{ display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:999px; font-family:'Inter',sans-serif; font-weight:600; font-size:0.95rem; cursor:pointer; border:1px solid transparent; transition:transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, color .3s ease, box-shadow .3s ease; letter-spacing:-0.005em; } .btn-primary{ background:var(--grad-teal); color:#fff; box-shadow:0 14px 30px -12px rgba(46,98,103,0.55); } .btn-primary:hover{transform:translateY(-3px); box-shadow:0 20px 42px -12px rgba(46,98,103,0.6)} .btn-ghost{ border:1.5px solid var(--brand-teal); color:var(--brand-teal); background:#fff; } .btn-ghost:hover{background:var(--brand-teal); color:#fff; transform:translateY(-2px)} .btn-gold{ background:var(--sage-light); color:var(--teal-900); box-shadow:var(--shadow-colored); } .btn-gold:hover{background:var(--sage); color:#fff; transform:translateY(-2px)} .menu-btn{display:none; background:none; border:none; font-size:1.5rem; color:var(--brand-teal); cursor:pointer} /* ===== Hero — vibrant wellness split layout ===== */ .hero{ position:relative; overflow:hidden; padding:40px 0 0; background:var(--grad-hero); } .hero::before{ content:""; position:absolute; top:-120px; right:-120px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, var(--sunny-bg) 0%, transparent 70%); opacity:0.85; z-index:0; animation: floaty 14s ease-in-out infinite; } .hero::after{ content:""; position:absolute; bottom:-160px; left:-140px; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle, var(--coral-bg) 0%, transparent 75%); opacity:0.85; z-index:0; animation: floaty 18s ease-in-out -4s infinite reverse; } @keyframes floaty{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-20px,20px) scale(1.04)} } .slides{position:absolute; inset:0; z-index:0} .slide{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.05); animation: slideFade 24s infinite; } .slide::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(15,46,44,0.82) 0%, rgba(15,46,44,0.55) 55%, rgba(15,46,44,0.35) 100%); } .slide:nth-child(1){ /* Young family laughing together outdoors */ background-image:url('https://images.unsplash.com/photo-1609220136736-443140cffec6?w=1800&q=80'); animation-delay:0s; } .slide:nth-child(2){ /* Three generations — grandparents, parents & child */ background-image:url('https://images.unsplash.com/photo-1591084728795-1149f32d9866?w=1800&q=80'); animation-delay:6s; } .slide:nth-child(3){ /* Mother with baby — warm, tender */ background-image:url('https://images.unsplash.com/photo-1566753323558-f4e0952af115?w=1800&q=80'); animation-delay:12s; } .slide:nth-child(4){ /* Happy diverse family outdoors */ background-image:url('https://images.unsplash.com/photo-1517677208171-0bc6725a3e60?w=1800&q=80'); animation-delay:18s; } @keyframes slideFade{ 0% {opacity:0; transform:scale(1.08)} 6% {opacity:1; transform:scale(1.02)} 25% {opacity:1; transform:scale(1.0)} 31% {opacity:0; transform:scale(1.0)} 100% {opacity:0; transform:scale(1.0)} } .hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 1fr; gap:70px; align-items:center; padding:80px 0 140px; } .hero .eyebrow{background:#fff; color:var(--brand-teal)} .hero h1{color:var(--teal-900); margin:22px 0 24px} .hero h1 .accent{ color:var(--coral); font-family:'Bricolage Grotesque','Inter',sans-serif; font-style:normal; position:relative; display:inline-block; font-weight:700; } .hero h1 .accent::after{ content:""; position:absolute; left:-4px; right:-4px; bottom:6px; height:14px; background:var(--sunny); border-radius:999px; z-index:-1; opacity:0.55; } .hero p.lede{ font-size:1.18rem; max-width:540px; color:var(--ink-soft); margin-bottom:36px; line-height:1.65; } .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; align-items:center} .hero-trust{ margin-top:40px; display:flex; gap:24px; flex-wrap:wrap; align-items:center; padding-top:28px; border-top:1px solid var(--line); } .hero-trust-item{ display:flex; gap:12px; align-items:center; font-size:0.92rem; color:var(--ink-soft); font-weight:500; } .hero-trust-item i{ width:36px; height:36px; border-radius:50%; background:var(--sage-soft); color:var(--brand-teal); display:inline-flex; align-items:center; justify-content:center; font-size:0.95rem; } /* Hero visual — organic blob mask with floating stat cards */ .hero-visual{ position:relative; aspect-ratio:1/1.08; } .hero-visual .hero-photo{ position:absolute; inset:0; background-size:cover; background-position:center; border-radius:62% 38% 54% 46% / 48% 52% 48% 52%; box-shadow:var(--shadow-lg); animation: blobMorph 18s ease-in-out infinite; background-image:url('https://images.unsplash.com/photo-1591084728795-1149f32d9866?w=1400&q=80'); } @keyframes blobMorph{ 0%,100%{border-radius:62% 38% 54% 46% / 48% 52% 48% 52%} 33% {border-radius:44% 56% 38% 62% / 58% 42% 58% 42%} 66% {border-radius:56% 44% 62% 38% / 42% 58% 42% 58%} } .hero-float-card{ position:absolute; background:#fff; border-radius:var(--r-md); padding:18px 22px; box-shadow:var(--shadow); display:flex; align-items:center; gap:14px; animation:bob 6s ease-in-out infinite; } .hero-float-card.fc-1{top:8%; left:-18px; animation-delay:-2s} .hero-float-card.fc-2{bottom:22%; right:-24px; animation-delay:-4s} .hero-float-card.fc-3{bottom:-10px; left:12%} @keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } .fc-icon{ width:44px; height:44px; border-radius:14px; background:var(--grad-sage); color:var(--brand-teal); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; } .hero-float-card.fc-1 .fc-icon{background:var(--coral-bg); color:var(--coral)} .hero-float-card.fc-2 .fc-icon{background:var(--sunny-bg); color:#D49A2C} .hero-float-card.fc-3 .fc-icon{background:var(--sky-bg); color:#3D8FA1} .fc-text strong{display:block; color:var(--teal-900); font-size:0.95rem; line-height:1.2; font-weight:600} .fc-text span{display:block; color:var(--ink-soft); font-size:0.78rem; margin-top:2px} .hero-badges{ position:absolute; right:40px; bottom:40px; z-index:2; display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; max-width:380px; } .hero-badge{ background:#fff; color:var(--teal-900); padding:10px 18px; border-radius:999px; font-size:0.82rem; font-weight:600; display:inline-flex; align-items:center; gap:8px; box-shadow:var(--shadow-sm); } .hero-badge i{color:var(--brand-teal)} /* slide indicator */ .slide-indicator{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:2; display:flex; gap:10px; } .slide-indicator span{ display:block; width:34px; height:2px; background:rgba(250,246,236,0.35); overflow:hidden; position:relative; } .slide-indicator span::after{ content:""; position:absolute; inset:0; background:var(--gold); transform:translateX(-100%); animation: indicator 24s infinite linear; } .slide-indicator span:nth-child(1)::after{animation-delay:0s} .slide-indicator span:nth-child(2)::after{animation-delay:6s} .slide-indicator span:nth-child(3)::after{animation-delay:12s} .slide-indicator span:nth-child(4)::after{animation-delay:18s} @keyframes indicator{ 0%{transform:translateX(-100%)} 25%{transform:translateX(0)} 26%{transform:translateX(101%)} 100%{transform:translateX(101%)} } /* ===== Quick booking strip — floating card ===== */ .booking-strip{ position:relative; z-index:3; margin-top:-60px; margin-bottom:60px; } .booking-strip-inner{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); display:grid; grid-template-columns:repeat(4,1fr); gap:24px; align-items:center; padding:32px 36px; border:1px solid rgba(143,184,170,0.2); } .strip-item{ display:flex; gap:14px; align-items:center; transition:transform .3s ease; } .strip-item:hover{transform:translateY(-3px)} .strip-icon{ width:52px; height:52px; border-radius:16px; background:var(--grad-sage); color:var(--brand-teal); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.2rem; transition:transform .3s ease; } .strip-item:nth-child(1) .strip-icon{background:var(--coral-bg); color:var(--coral)} .strip-item:nth-child(2) .strip-icon{background:var(--sunny-bg); color:#D49A2C} .strip-item:nth-child(3) .strip-icon{background:var(--sky-bg); color:#3D8FA1} .strip-item:nth-child(4) .strip-icon{background:var(--lavender-bg); color:#7E6BC1} .strip-item:hover .strip-icon{transform:rotate(-6deg) scale(1.05)} .strip-item h4{font-size:1rem; margin-bottom:3px; font-family:'Inter',sans-serif; font-weight:600; color:var(--teal-900); letter-spacing:0} .strip-item p{font-size:0.85rem; margin:0} /* ===== Section base ===== */ section{padding:110px 0; position:relative} .section-head{text-align:center; max-width:760px; margin:0 auto 70px; position:relative} .section-head .eyebrow{margin-bottom:18px} .section-head h2{margin-bottom:16px} .section-head p{margin-top:14px; font-size:1.08rem; line-height:1.7} /* Friendly hand-drawn squiggle accent under each section head */ .section-head::after{ content:""; display:block; width:84px; height:14px; margin:22px auto 0; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:center; opacity:0.9; } .services .section-head::after{ background-image:url("data:image/svg+xml;utf8,"); } #team .section-head::after{ background-image:url("data:image/svg+xml;utf8,"); } .allied .section-head::after{ background-image:url("data:image/svg+xml;utf8,"); } .testimonials .section-head::after{ background-image:url("data:image/svg+xml;utf8,"); } .blog-section .section-head::after{ background-image:url("data:image/svg+xml;utf8,"); } .decor-divider{display:none} /* Soft wave divider between sections */ .wave-sep{display:block; width:100%; line-height:0} .wave-sep svg{display:block; width:100%; height:80px} /* Fade-up scroll reveal */ .reveal{opacity:0; transform:translateY(32px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1)} .reveal.in{opacity:1; transform:translateY(0)} .reveal.delay-1{transition-delay:.08s} .reveal.delay-2{transition-delay:.16s} .reveal.delay-3{transition-delay:.24s} .reveal.delay-4{transition-delay:.32s} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} .hero::before, .hero::after, .hero-photo, .hero-float-card, .topbar-track, .slide{animation:none !important} } /* ===== About ===== */ .about{background:#fff; position:relative; overflow:hidden} .about::before{ content:""; position:absolute; top:60px; left:-120px; width:280px; height:280px; background:radial-gradient(circle, var(--coral-bg) 0%, transparent 70%); opacity:0.7; border-radius:50%; } .about::after{ content:""; position:absolute; bottom:80px; right:-100px; width:240px; height:240px; background:radial-gradient(circle, var(--sunny-bg) 0%, transparent 70%); opacity:0.85; border-radius:50%; } .about > .container{position:relative; z-index:2} .about-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:80px; align-items:center; } .about-text h2{margin:14px 0 22px} .about-text p{font-size:1.05rem; margin-bottom:16px; line-height:1.75} .about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; } .about-stats .stat{ background:var(--sage-soft); border-radius:var(--r-md); padding:26px 22px; transition:transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease, box-shadow .3s ease; position:relative; overflow:hidden; } .about-stats .stat::before{ content:""; position:absolute; top:-30px; right:-30px; width:80px; height:80px; border-radius:50%; opacity:0.55; } .about-stats .stat:nth-child(1){background:var(--coral-bg)} .about-stats .stat:nth-child(1)::before{background:var(--coral-soft)} .about-stats .stat:nth-child(1) .num, .about-stats .stat:nth-child(1) .num span{color:var(--coral)} .about-stats .stat:nth-child(2){background:var(--sunny-bg)} .about-stats .stat:nth-child(2)::before{background:var(--sunny-soft)} .about-stats .stat:nth-child(2) .num, .about-stats .stat:nth-child(2) .num span{color:#D49A2C} .about-stats .stat:nth-child(3){background:var(--sky-bg)} .about-stats .stat:nth-child(3)::before{background:var(--sky-soft)} .about-stats .stat:nth-child(3) .num, .about-stats .stat:nth-child(3) .num span{color:#3D8FA1} .about-stats .stat:hover{transform:translateY(-6px) rotate(-1deg); box-shadow:var(--shadow-sm)} .stat .num{font-family:'Bricolage Grotesque','Inter',sans-serif; font-size:2.8rem; color:var(--teal-900); line-height:1; font-weight:700; position:relative; z-index:1} .stat .num span{color:var(--brand-teal); font-size:1.5rem} .stat .lbl{font-size:0.85rem; color:var(--ink-soft); margin-top:10px; font-weight:600; position:relative; z-index:1} .about-visual{ position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); transition:transform .5s cubic-bezier(.2,.8,.2,1); } .about-visual:hover{transform:scale(1.01)} .about-visual img{width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s cubic-bezier(.2,.8,.2,1)} .about-visual:hover img{transform:scale(1.05)} .about-badge{ position:absolute; left:-26px; bottom:40px; background:#fff; padding:22px 28px; box-shadow:var(--shadow); border-radius:var(--r-md); max-width:260px; border:1px solid rgba(143,184,170,0.3); } .about-badge strong{display:block; font-family:'Bricolage Grotesque','Inter',sans-serif; font-size:1.7rem; color:var(--teal-900); line-height:1.1; font-weight:500} .about-badge span{font-size:0.82rem; color:var(--ink-soft); margin-top:6px; display:block; font-weight:500} /* ===== Services ===== */ .services{background:var(--mint-50); position:relative; overflow:hidden} .services::before{ content:""; position:absolute; top:-120px; right:-120px; width:420px; height:420px; background:radial-gradient(circle, var(--coral-bg) 0%, transparent 70%); opacity:0.85; border-radius:50%; } .services::after{ content:""; position:absolute; bottom:-140px; left:-140px; width:420px; height:420px; background:radial-gradient(circle, var(--lavender-bg) 0%, transparent 70%); opacity:0.85; border-radius:50%; } .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; position:relative; z-index:2; } .service-card{ background:#fff; padding:42px 34px 36px; border-radius:var(--r-lg); border:1px solid rgba(143,184,170,0.22); transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease; position:relative; overflow:hidden; } .service-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:0; background:var(--grad-sage); transition:height .45s ease; z-index:0; } .service-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; } .service-card:hover::before{height:120%} .service-card > *{position:relative; z-index:1} .service-icon{ width:64px; height:64px; border-radius:20px; background:var(--grad-sage); color:var(--brand-teal); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin:0 auto 26px; transition:transform .5s cubic-bezier(.2,.8,.2,1), background .4s ease, color .4s ease; } .service-card{text-align:center} .service-card .more{justify-content:center} .service-card:hover .service-icon{ transform:rotate(-8deg) scale(1.08); background:#fff; } /* Rotate fun colours through the service cards */ .services-grid .service-card:nth-child(1) .service-icon{background:var(--coral-bg); color:var(--coral)} .services-grid .service-card:nth-child(2) .service-icon{background:var(--sunny-bg); color:#D49A2C} .services-grid .service-card:nth-child(3) .service-icon{background:var(--sky-bg); color:#3D8FA1} .services-grid .service-card:nth-child(4) .service-icon{background:var(--lavender-bg); color:#7E6BC1} .services-grid .service-card:nth-child(5) .service-icon{background:var(--pink-bg); color:#C26A8E} .services-grid .service-card:nth-child(6) .service-icon{background:var(--mint-100); color:var(--brand-teal)} .service-card h3{margin-bottom:10px} .service-card p{font-size:0.97rem} .service-card a.more{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; color:var(--brand-teal); font-weight:600; font-size:0.9rem; letter-spacing:0; } .service-card a.more i{transition:transform .3s ease} .service-card a.more:hover i{transform:translateX(5px)} .service-card a.more:hover{color:var(--teal-900)} /* ===== Allied Health — brighter, inverted ===== */ .allied{ background:linear-gradient(160deg, var(--teal-900) 0%, var(--brand-teal) 100%); color:#fff; position:relative; overflow:hidden; } .allied::before{ content:""; position:absolute; top:-160px; right:-160px; width:520px; height:520px; background:radial-gradient(circle, rgba(143,184,170,0.35) 0%, transparent 70%); animation:floaty 16s ease-in-out infinite; } .allied::after{ content:""; position:absolute; bottom:-180px; left:-120px; width:480px; height:480px; background:radial-gradient(circle, rgba(79,167,172,0.25) 0%, transparent 70%); animation:floaty 22s ease-in-out -6s infinite reverse; } .allied-inner{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.1fr; gap:70px; align-items:center} .allied h2{color:#fff} .allied h2 .accent{color:var(--sunny); font-weight:600} .allied p{color:rgba(255,255,255,0.85); margin-bottom:28px; font-size:1.05rem} .allied-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:32px; } .allied-item{ display:flex; align-items:center; gap:16px; padding:18px 22px; border:1px solid rgba(201,226,209,0.2); border-radius:18px; background:rgba(255,255,255,0.04); backdrop-filter:blur(8px); transition:all .35s cubic-bezier(.2,.8,.2,1); } .allied-item:hover{ background:rgba(255,255,255,0.1); border-color:var(--sage-light); transform:translateY(-3px); } .allied-item i{color:var(--sage-light); font-size:1.2rem} .allied-item span{font-weight:500; font-size:0.98rem} .allied-visual{position:relative} .allied-visual img{ width:100%; aspect-ratio:5/6; object-fit:cover; border-radius:var(--r-lg); box-shadow:var(--shadow-lg); } .allied-tag{ position:absolute; top:30px; right:-20px; background:var(--sage-light); color:var(--teal-900); padding:14px 24px; font-weight:600; font-size:0.85rem; letter-spacing:0; border-radius:999px; box-shadow:var(--shadow); } .allied .section-head .eyebrow{background:rgba(255,255,255,0.1); color:var(--sage-light); border-color:rgba(201,226,209,0.25)} .allied .section-head .eyebrow::before{background:var(--sage-light)} .allied .section-head h2{color:#fff} .allied .section-head h2 em, .allied .section-head h2 .accent{color:var(--sunny); font-style:normal; font-weight:600} .allied .section-head p{color:rgba(255,255,255,0.82)} .allied .decor-divider::before, .allied .decor-divider::after{background:var(--sage); opacity:0.55} .allied-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; position:relative; z-index:2; } .allied-card{ background:rgba(255,255,255,0.05); border:1px solid rgba(201,226,209,0.2); border-radius:var(--r-md); padding:28px 18px 24px; text-align:center; backdrop-filter:blur(8px); transition:transform .45s cubic-bezier(.2,.8,.2,1), background .4s ease, border-color .4s ease, box-shadow .4s ease; } .allied-card:hover{ transform:translateY(-8px); background:rgba(255,255,255,0.12); border-color:var(--sage-light); box-shadow:0 30px 60px -20px rgba(0,0,0,0.35); } .allied-card-photo{ aspect-ratio:1; width:104px; border-radius:50%; overflow:hidden; margin:0 auto 18px; border:3px solid var(--sage-light); background:var(--mint-100); transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s ease; } /* Rotate fun colour rims through the allied team */ .allied-grid .allied-card:nth-child(5n+1) .allied-card-photo{border-color:var(--coral)} .allied-grid .allied-card:nth-child(5n+2) .allied-card-photo{border-color:var(--sunny)} .allied-grid .allied-card:nth-child(5n+3) .allied-card-photo{border-color:var(--sky)} .allied-grid .allied-card:nth-child(5n+4) .allied-card-photo{border-color:var(--lavender)} .allied-grid .allied-card:nth-child(5n+5) .allied-card-photo{border-color:var(--pink)} .allied-card:hover .allied-card-photo{transform:scale(1.06)} .allied-card-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; } .allied-card h4{ color:#fff; font-family:'Bricolage Grotesque','Inter',sans-serif; font-size:1.2rem; font-weight:500; margin-bottom:6px; line-height:1.2; letter-spacing:-0.015em; } .allied-card .role{ display:block; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--sage-light); font-weight:600; line-height:1.3; } .allied-card .clinic{ display:block; font-size:0.8rem; color:rgba(255,255,255,0.7); margin-top:6px; line-height:1.35; } .allied-card .visiting{ display:inline-block; margin-top:10px; font-size:0.64rem; letter-spacing:0.14em; text-transform:uppercase; padding:4px 10px; border-radius:999px; background:var(--sage-light); color:var(--teal-900); font-weight:600; } @media (max-width:1180px){ .allied-grid{grid-template-columns:repeat(4,1fr)} } @media (max-width:900px){ .allied-grid{grid-template-columns:repeat(3,1fr)} } @media (max-width:600px){ .allied-grid{grid-template-columns:repeat(2,1fr)} } /* ===== Bulk billing CTA ===== */ .bulk-cta{ padding:80px 0; background:#fff; position:relative; } .bulk-inner{ display:grid; grid-template-columns:auto 1fr auto; gap:40px; align-items:center; padding:48px 56px; background:linear-gradient(135deg, var(--sunny-bg) 0%, var(--coral-bg) 100%); border-radius:var(--r-lg); box-shadow:var(--shadow); position:relative; overflow:hidden; } .bulk-inner::before{ content:""; position:absolute; top:-80px; right:-80px; width:240px; height:240px; background:radial-gradient(circle, rgba(255,255,255,0.6) 0%, transparent 70%); } .bulk-inner::after{ content:""; position:absolute; bottom:-100px; left:-60px; width:260px; height:260px; background:radial-gradient(circle, var(--sunny-soft) 0%, transparent 70%); opacity:0.6; } .bulk-inner > *{position:relative; z-index:1} .bulk-icon{ width:86px; height:86px; border-radius:26px; background:#fff; color:var(--coral); display:flex; align-items:center; justify-content:center; font-size:2.1rem; flex-shrink:0; box-shadow:var(--shadow-sm); transition:transform .4s cubic-bezier(.2,.8,.2,1); } .bulk-inner:hover .bulk-icon{transform:rotate(-8deg) scale(1.06); color:#D49A2C} .bulk-text h3{ font-family:'Bricolage Grotesque','Inter',sans-serif; font-size:2.1rem; margin-bottom:6px; color:var(--teal-900); font-weight:500; } .bulk-text p{font-size:1rem; color:var(--teal-800)} /* ===== Team ===== */ .team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; } .doctor{ text-align:center; cursor:pointer; transition:transform .4s cubic-bezier(.2,.8,.2,1); } .doctor:hover{transform:translateY(-6px)} .doctor-photo{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-md); margin-bottom:22px; box-shadow:var(--shadow-sm); } .doctor-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; transition:transform .8s cubic-bezier(.2,.8,.2,1); background:var(--mint-100); } .doctor:hover .doctor-photo img{transform:scale(1.08)} .doctor .specialty{ display:block; font-size:0.85rem; color:var(--ink-soft); margin-top:6px; font-weight:500; } .doctor-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(11,32,36,0.55) 0%, transparent 45%); } .doctor-photo .tag-cred{ position:absolute; bottom:16px; left:16px; z-index:2; background:#fff; color:var(--brand-teal); padding:6px 14px; border-radius:999px; font-size:0.7rem; letter-spacing:0; text-transform:none; font-weight:600; } .doctor h3{margin-bottom:4px; font-size:1.4rem} .doctor .role{ font-size:0.8rem; letter-spacing:0.1em; color:var(--sage-deep); font-weight:600; } /* ===== Testimonials ===== */ .testimonials{ background:var(--mint-50); position:relative; overflow:hidden; } .testimonials::before{ content:""; position:absolute; top:-100px; left:-100px; width:360px; height:360px; background:radial-gradient(circle, var(--pink-bg) 0%, transparent 70%); opacity:0.85; border-radius:50%; } .testimonials::after{ content:""; position:absolute; bottom:-120px; right:-100px; width:340px; height:340px; background:radial-gradient(circle, var(--sky-bg) 0%, transparent 70%); opacity:0.8; border-radius:50%; } .tests-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; position:relative; z-index:2; } .test-card{ background:#fff; padding:42px 34px; border-radius:var(--r-lg); border:1px solid rgba(143,184,170,0.2); box-shadow:var(--shadow-sm); position:relative; transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; } .test-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)} .test-card::before{ content:"\201C"; position:absolute; top:-24px; left:24px; width:52px; height:52px; border-radius:50%; background:var(--grad-teal); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Bricolage Grotesque','Inter',sans-serif; font-size:2.4rem; font-weight:500; line-height:1; padding-top:18px; box-shadow:var(--shadow-sm); } .test-stars{color:#F5B041; margin-bottom:16px; font-size:0.95rem} .test-card p{font-size:1rem; margin-bottom:24px; color:var(--ink); line-height:1.7; font-style:normal} .test-author{display:flex; align-items:center; gap:14px; border-top:1px solid var(--line); padding-top:20px} .test-author-avatar{ width:50px; height:50px; border-radius:50%; background:var(--grad-sage); color:var(--brand-teal); display:flex; align-items:center; justify-content:center; font-family:'Bricolage Grotesque','Inter',sans-serif; font-weight:600; font-size:1.15rem; } .tests-grid .test-card:nth-child(1) .test-author-avatar{background:var(--coral-bg); color:var(--coral)} .tests-grid .test-card:nth-child(2) .test-author-avatar{background:var(--sunny-bg); color:#D49A2C} .tests-grid .test-card:nth-child(3) .test-author-avatar{background:var(--sky-bg); color:#3D8FA1} .test-author strong{display:block; font-size:0.98rem; color:var(--teal-900)} .test-author span{font-size:0.8rem; color:var(--ink-soft)} /* ===== Blog / Journal ===== */ .blog-section{background:#fff; padding:110px 0; position:relative; overflow:hidden} .blog-section::before{ content:""; position:absolute; top:120px; right:-110px; width:300px; height:300px; background:radial-gradient(circle, var(--lavender-bg) 0%, transparent 70%); opacity:0.85; border-radius:50%; } .blog-section::after{ content:""; position:absolute; bottom:60px; left:-120px; width:280px; height:280px; background:radial-gradient(circle, var(--sunny-bg) 0%, transparent 70%); opacity:0.75; border-radius:50%; } .blog-section > .container{position:relative; z-index:2} .blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:54px} .blog-card{ background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid rgba(143,184,170,0.2); transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease; display:flex; flex-direction:column; } .blog-card:hover{transform:translateY(-8px); box-shadow:var(--shadow-lg)} .blog-img{ width:100%; height:240px; background-size:cover; background-position:center; position:relative; transition:transform .7s cubic-bezier(.2,.8,.2,1); } .blog-card:hover .blog-img{transform:scale(1.03)} .blog-category{ position:absolute; top:18px; left:18px; background:#fff; color:var(--brand-teal); font-family:'Inter',sans-serif; font-size:0.72rem; letter-spacing:0; text-transform:none; padding:8px 16px; border-radius:999px; font-weight:600; box-shadow:var(--shadow-sm); } .blog-grid .blog-card:nth-child(1) .blog-category{background:var(--coral); color:#fff} .blog-grid .blog-card:nth-child(2) .blog-category{background:var(--sunny); color:#5C3F0E} .blog-grid .blog-card:nth-child(3) .blog-category{background:var(--sky); color:#0E3E48} .blog-body{padding:30px 30px 32px; display:flex; flex-direction:column; flex:1} .blog-date{ color:var(--sage-deep); font-family:'Inter',sans-serif; font-size:0.82rem; letter-spacing:0; text-transform:none; margin-bottom:12px; font-weight:500; } .blog-card h3{ font-family:'Bricolage Grotesque','Inter',sans-serif; font-size:1.45rem; color:var(--teal-900); line-height:1.25; margin-bottom:14px; font-weight:500; letter-spacing:-0.02em; } .blog-excerpt{color:var(--ink-soft); font-size:0.95rem; line-height:1.68; margin-bottom:22px; flex:1} .blog-read{ color:var(--brand-teal); font-family:'Inter',sans-serif; font-size:0.9rem; letter-spacing:0; text-transform:none; font-weight:600; display:inline-flex; align-items:center; gap:8px; } .blog-read i{transition:transform .3s ease} .blog-read:hover i{transform:translateX(5px)} .blog-cta-row{text-align:center; margin-top:52px} /* ===== Follow Us social banner ===== */ .follow-banner{ background:var(--grad-teal); padding:80px 0; position:relative; overflow:hidden; } .follow-banner::before{ content:""; position:absolute; top:-120px; right:-100px; width:320px; height:320px; background:radial-gradient(circle, rgba(201,226,209,0.3) 0%, transparent 70%); animation:floaty 18s ease-in-out infinite; } .follow-inner{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; position:relative; z-index:2; } .follow-copy h3{ font-family:'Bricolage Grotesque','Inter',sans-serif; color:#fff; font-weight:500; letter-spacing:-0.02em; font-size:2.2rem; margin-bottom:10px; } .follow-copy p{color:rgba(255,255,255,0.8); max-width:480px; font-size:1rem} .follow-socials{display:flex; gap:14px; flex-wrap:wrap} .follow-socials a{ display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:999px; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.25); color:#fff; font-family:'Inter',sans-serif; font-size:0.92rem; letter-spacing:0; font-weight:600; transition:all .3s cubic-bezier(.2,.8,.2,1); backdrop-filter:blur(10px); } .follow-socials a:hover{ background:#fff; color:var(--brand-teal); border-color:#fff; transform:translateY(-3px); box-shadow:0 16px 30px -8px rgba(0,0,0,0.25); } .follow-socials a i{font-size:1rem} /* ===== Contact & Location ===== */ .contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:40px; align-items:stretch; } .contact-info{ background:var(--grad-teal); color:#fff; padding:56px 48px; border-radius:var(--r-lg); position:relative; overflow:hidden; box-shadow:var(--shadow-lg); } .contact-info::before{ content:""; position:absolute; bottom:-80px; right:-80px; width:280px; height:280px; background:radial-gradient(circle, rgba(201,226,209,0.25) 0%, transparent 70%); animation:floaty 16s ease-in-out infinite; } .contact-info .eyebrow{background:rgba(255,255,255,0.15); color:#fff; border-color:rgba(255,255,255,0.25)} .contact-info .eyebrow::before{background:var(--sage-light)} .contact-info h2{color:#fff; margin:18px 0 30px} .contact-info h2 .accent{color:var(--sunny); font-weight:600} .contact-list{list-style:none; margin-bottom:28px; position:relative; z-index:2} .contact-list li{ display:flex; gap:18px; align-items:flex-start; padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.15); } .contact-list li:last-child{border-bottom:none} .contact-list i{ width:42px; height:42px; border-radius:14px; background:rgba(255,255,255,0.12); color:var(--sage-light); display:flex; align-items:center; justify-content:center; font-size:0.95rem; flex-shrink:0; transition:background .3s ease, color .3s ease, transform .3s ease; } .contact-list li:nth-child(1) i{background:var(--coral); color:#fff} .contact-list li:nth-child(2) i{background:var(--sunny); color:#5C3F0E} .contact-list li:nth-child(3) i{background:var(--sky); color:#0E3E48} .contact-list li:nth-child(4) i{background:var(--lavender); color:#3D2B6F} .contact-list li:hover i{transform:rotate(-6deg) scale(1.05)} .contact-list strong{display:block; font-size:0.78rem; letter-spacing:0; text-transform:none; color:var(--sage-light); margin-bottom:3px; font-weight:600} .contact-list a, .contact-list span{color:#fff; font-size:1rem} .hours-table{ background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); padding:24px 26px; border-radius:var(--r-md); position:relative; z-index:2; margin-top:12px; backdrop-filter:blur(6px); } .hours-table h4{color:var(--sage-light); font-family:'Inter',sans-serif; font-size:0.82rem; letter-spacing:0; text-transform:none; margin-bottom:16px; font-weight:600} .hours-row{display:flex; justify-content:space-between; padding:8px 0; font-size:0.95rem; color:#fff} .hours-row span:last-child{color:var(--sage-light); font-weight:500} .map-wrap{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); min-height:560px; position:relative; } .map-wrap iframe{width:100%; height:100%; border:0; display:block; position:absolute; inset:0; filter:saturate(1.08)} /* ===== Final CTA ===== */ .final-cta{ background:linear-gradient(135deg, var(--mint-50) 0%, var(--sage-soft) 100%); padding:120px 0; text-align:center; color:var(--teal-900); position:relative; overflow:hidden; } .final-cta::before{ content:""; position:absolute; top:-140px; right:-120px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, var(--coral-bg) 0%, transparent 70%); opacity:0.85; animation:floaty 20s ease-in-out infinite; } .final-cta::after{ content:""; position:absolute; bottom:-140px; left:-120px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, var(--sunny-bg) 0%, transparent 70%); opacity:0.85; animation:floaty 24s ease-in-out -6s infinite reverse; } .final-cta > *{position:relative; z-index:2} .final-cta h2{color:var(--teal-900); margin:18px 0 20px} .final-cta h2 .accent{color:var(--coral); font-weight:600} .final-cta p{color:var(--ink-soft); max-width:620px; margin:0 auto 38px; font-size:1.12rem; line-height:1.7} .final-cta-btns{display:flex; justify-content:center; gap:16px; flex-wrap:wrap} /* ===== Footer ===== */ footer{ background:var(--teal-900); color:rgba(255,255,255,0.72); padding:90px 0 30px; font-size:0.92rem; } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; padding-bottom:52px; border-bottom:1px solid rgba(201,226,209,0.12); } footer h4{ color:var(--sage-light); font-family:'Inter',sans-serif; font-size:0.85rem; letter-spacing:0; text-transform:none; margin-bottom:20px; font-weight:600; } footer ul{list-style:none} footer ul li{margin-bottom:10px} footer ul a{transition:color .25s ease, padding-left .25s ease; display:inline-block} footer ul a:hover{color:var(--sage-light); padding-left:6px} .footer-brand p{margin:16px 0 22px; color:rgba(255,255,255,0.65); font-size:0.95rem; max-width:320px; line-height:1.7} .socials{display:flex; gap:10px} .socials a{ width:42px; height:42px; border-radius:14px; background:rgba(255,255,255,0.06); border:1px solid rgba(201,226,209,0.2); display:flex; align-items:center; justify-content:center; color:var(--sage-light); transition:all .3s cubic-bezier(.2,.8,.2,1); } .socials a:hover{background:var(--sage-light); color:var(--teal-900); border-color:var(--sage-light); transform:translateY(-3px)} .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; padding-top:24px; gap:20px; font-size:0.82rem; color:rgba(250,246,236,0.5); } .ack{ max-width:820px; margin:32px auto 0; text-align:center; padding:24px; border-top:1px solid rgba(143,184,170,0.1); font-size:0.86rem; font-weight:400; color:rgba(255,255,255,0.6); } /* ===== Responsive ===== */ @media (max-width:960px){ nav.primary{display:none} .menu-btn{display:inline-flex} .booking-strip-inner{grid-template-columns:repeat(2,1fr); gap:20px} .about-grid, .allied-inner, .contact-grid{grid-template-columns:1fr; gap:40px} .services-grid, .team-grid, .tests-grid, .blog-grid{grid-template-columns:repeat(2,1fr)} .bulk-inner{grid-template-columns:1fr; text-align:center; padding:32px 24px} .bulk-icon{margin:0 auto} .footer-grid{grid-template-columns:repeat(2,1fr); gap:36px} .follow-inner{flex-direction:column; text-align:center} .follow-copy p{margin:0 auto} .hero-inner{grid-template-columns:1fr; gap:48px; padding:60px 0 100px} .hero-visual{max-width:480px; margin:0 auto; aspect-ratio:1/1} .hero-float-card.fc-1{left:-10px} .hero-float-card.fc-2{right:-14px} .hero-badges{position:static; margin-top:32px; justify-content:flex-start; max-width:none} section{padding:80px 0} .allied-list{grid-template-columns:1fr} .booking-strip{margin-top:-40px} .booking-strip-inner{padding:28px} } @media (max-width:600px){ .services-grid, .team-grid, .tests-grid, .footer-grid, .blog-grid{grid-template-columns:1fr} .booking-strip-inner{grid-template-columns:1fr} .about-stats{grid-template-columns:repeat(3,1fr); gap:12px} .stat .num{font-size:2rem} .contact-info, .map-wrap{padding:36px 28px} .map-wrap{min-height:360px} nav.primary ul{flex-direction:column; gap:16px} .topbar{font-size:0.82rem; padding:12px 0} .topbar-item{padding:0 20px} } /* ============================================================ Subpage additions — hero, breadcrumb, FAQ, form, blog filter Used by services/our-doctors/allied-health/blog/contact pages ============================================================ */ /* Page hero (smaller than homepage hero) */ .page-hero{ position:relative; overflow:hidden; background:var(--grad-hero); padding:80px 0 100px; } .page-hero::before{ content:""; position:absolute; top:-100px; right:-100px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, var(--coral-bg) 0%, transparent 70%); opacity:0.85; z-index:0; animation: floaty 16s ease-in-out infinite; } .page-hero::after{ content:""; position:absolute; bottom:-120px; left:-120px; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, var(--sunny-bg) 0%, transparent 70%); opacity:0.85; z-index:0; animation: floaty 22s ease-in-out -4s infinite reverse; } .page-hero > .container{position:relative; z-index:2; text-align:center; max-width:880px} .page-hero h1{margin:18px 0 18px} .page-hero h1 .accent{color:var(--coral); font-weight:700; position:relative; display:inline-block} .page-hero h1 .accent::after{ content:""; position:absolute; left:-4px; right:-4px; bottom:6px; height:14px; background:var(--sunny); border-radius:999px; z-index:-1; opacity:0.55; } .page-hero p{font-size:1.12rem; line-height:1.7; max-width:680px; margin:0 auto} /* Breadcrumb */ .breadcrumb{ font-size:0.85rem; color:var(--ink-soft); display:inline-flex; gap:8px; align-items:center; background:rgba(255,255,255,0.6); padding:8px 18px; border-radius:999px; border:1px solid var(--line); } .breadcrumb a{color:var(--brand-teal); font-weight:600; transition:color .25s ease} .breadcrumb a:hover{color:var(--coral)} .breadcrumb .sep{color:var(--sage); font-size:0.7rem} /* Anchor-link offset for sticky header */ section[id]{scroll-margin-top:90px} /* FAQ accordion */ .faq{display:grid; gap:14px; max-width:860px; margin:0 auto} .faq details{ background:#fff; border-radius:var(--r-md); border:1px solid var(--line); padding:0; overflow:hidden; transition:box-shadow .3s ease, border-color .3s ease; } .faq details:hover{box-shadow:var(--shadow-sm); border-color:var(--sage-light)} .faq details[open]{border-color:var(--coral-soft); box-shadow:var(--shadow-sm)} .faq summary{ list-style:none; cursor:pointer; padding:22px 26px; font-weight:600; font-family:'Bricolage Grotesque','Inter',sans-serif; color:var(--teal-900); font-size:1.08rem; display:flex; justify-content:space-between; align-items:center; gap:18px; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"\f067"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--coral); font-size:0.85rem; transition:transform .3s ease; } .faq details[open] summary::after{content:"\f068"; transform:rotate(0)} .faq .faq-body{padding:0 26px 24px; color:var(--ink-soft); line-height:1.7} .faq .faq-body p{margin-bottom:10px} .faq .faq-body p:last-child{margin-bottom:0} /* Contact form */ .contact-form{ display:grid; gap:18px; background:#fff; padding:40px 36px; border-radius:var(--r-lg); box-shadow:var(--shadow-sm); border:1px solid var(--line); } .contact-form h3{margin-bottom:6px} .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px} .form-field{display:flex; flex-direction:column; gap:6px} .form-field label{ font-size:0.84rem; font-weight:600; color:var(--teal-900); letter-spacing:0.02em; } .form-field label .required{color:var(--coral)} .form-field input, .form-field textarea, .form-field select{ font-family:'Inter',sans-serif; font-size:1rem; padding:14px 16px; border-radius:14px; border:1.5px solid var(--line); background:#fff; color:var(--ink); transition:border-color .25s ease, box-shadow .25s ease; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-bg); } .form-field textarea{min-height:140px; resize:vertical; line-height:1.6} .form-disclaimer{font-size:0.82rem; color:var(--ink-soft); line-height:1.6} @media (max-width:700px){ .form-row{grid-template-columns:1fr} } /* Blog filter pills */ .blog-filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:0 auto 50px; max-width:920px; } .filter-pill{ padding:10px 20px; border-radius:999px; background:#fff; border:1.5px solid var(--line); color:var(--ink-soft); font-weight:600; font-size:0.88rem; cursor:pointer; transition:all .25s ease; } .filter-pill:hover{transform:translateY(-2px); border-color:var(--coral); color:var(--coral)} .filter-pill.active{background:var(--coral); color:#fff; border-color:var(--coral)} /* Newsletter signup card */ .newsletter-card{ background:linear-gradient(135deg, var(--lavender-bg) 0%, var(--coral-bg) 100%); border-radius:var(--r-lg); padding:48px 56px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; margin-top:60px; border:1px solid rgba(255,255,255,0.5); } .newsletter-card h3{margin-bottom:8px; font-size:1.7rem; color:var(--teal-900)} .newsletter-card p{font-size:0.98rem; color:var(--ink-soft); margin:0} .newsletter-form{display:flex; gap:10px; flex-wrap:wrap} .newsletter-form input{ flex:1; min-width:220px; font-family:'Inter',sans-serif; font-size:0.98rem; padding:14px 18px; border-radius:999px; border:1.5px solid var(--line); background:#fff; } .newsletter-form input:focus{outline:none; border-color:var(--coral); box-shadow:0 0 0 3px var(--coral-bg)} @media (max-width:900px){ .newsletter-card{grid-template-columns:1fr; padding:36px 30px; text-align:center} .newsletter-form{justify-content:center} } /* Sub-page service detail card (extended descriptions) */ .service-detail{ background:#fff; border-radius:var(--r-lg); border:1px solid var(--line); padding:42px 38px; margin-bottom:24px; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:flex-start; } .service-detail:hover{transform:translateY(-4px); box-shadow:var(--shadow)} .service-detail .service-icon{ width:80px; height:80px; border-radius:24px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.8rem; } .service-detail h2{font-size:1.7rem; margin-bottom:10px; line-height:1.2} .service-detail .lede{font-size:1.04rem; color:var(--ink-soft); margin-bottom:18px} .service-detail ul{list-style:none; display:grid; gap:8px; margin:14px 0} .service-detail ul li{ display:flex; gap:12px; align-items:flex-start; font-size:0.96rem; color:var(--ink); line-height:1.5; } .service-detail ul li::before{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--sage-deep); font-size:0.8rem; margin-top:5px; flex-shrink:0; } .service-detail .more{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; color:var(--coral); font-weight:600; font-size:0.92rem; } .service-detail .more i{transition:transform .3s ease} .service-detail .more:hover i{transform:translateX(5px)} @media (max-width:700px){ .service-detail{grid-template-columns:1fr; padding:32px 26px; gap:18px} } /* Doctor detail block (extended bio) */ .doctor-detail{ background:#fff; border-radius:var(--r-lg); border:1px solid var(--line); padding:36px; margin-bottom:24px; display:grid; grid-template-columns:240px 1fr; gap:36px; align-items:flex-start; transition:box-shadow .35s ease; } .doctor-detail:hover{box-shadow:var(--shadow)} .doctor-detail-photo{ aspect-ratio:1; border-radius:var(--r-md); overflow:hidden; background:var(--sage-soft); } .doctor-detail-photo img{width:100%; height:100%; object-fit:cover; object-position:center 18%} .doctor-detail h2{font-size:1.6rem; margin-bottom:6px; line-height:1.2} .doctor-detail .role{ font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--coral); font-weight:700; margin-bottom:12px; } .doctor-detail .creds{ display:inline-block; padding:4px 12px; margin-bottom:14px; background:var(--sage-soft); color:var(--brand-teal); border-radius:999px; font-size:0.78rem; font-weight:600; letter-spacing:0.04em; } .doctor-detail .specialty-list{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 18px; list-style:none; } .doctor-detail .specialty-list li{ padding:6px 14px; background:var(--coral-bg); color:var(--coral); border-radius:999px; font-size:0.82rem; font-weight:600; } .doctor-detail .languages{ font-size:0.92rem; color:var(--ink-soft); margin-bottom:18px; } .doctor-detail .languages strong{color:var(--teal-900)} .doctor-detail p{font-size:0.98rem; line-height:1.7; margin-bottom:12px} @media (max-width:760px){ .doctor-detail{grid-template-columns:1fr; padding:30px 24px; gap:24px} .doctor-detail-photo{max-width:240px; margin:0 auto} } /* Allied detail block */ .allied-detail{ background:#fff; border-radius:var(--r-lg); border:1px solid var(--line); padding:36px; margin-bottom:24px; display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:flex-start; } .allied-detail-photo{ aspect-ratio:1; border-radius:var(--r-md); overflow:hidden; background:var(--mint-100); } .allied-detail-photo img{width:100%; height:100%; object-fit:cover; object-position:center 18%} .allied-detail h3{font-size:1.4rem; margin-bottom:4px} .allied-detail .role{ font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--coral); font-weight:700; margin-bottom:10px; } .allied-detail .availability{ font-size:0.85rem; color:var(--brand-teal); font-weight:600; margin-bottom:14px; display:inline-flex; gap:8px; align-items:center; } .allied-detail .availability i{color:var(--sunny)} .allied-detail p{font-size:0.96rem; line-height:1.65} @media (max-width:760px){ .allied-detail{grid-template-columns:1fr; padding:28px 22px; gap:20px} .allied-detail-photo{max-width:200px; margin:0 auto} } /* "On this page" sticky sidebar (services/blog) — visual cue only */ .toc{ position:sticky; top:90px; background:#fff; padding:24px 22px; border-radius:var(--r-md); border:1px solid var(--line); box-shadow:var(--shadow-sm); align-self:flex-start; } .toc h4{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--brand-teal); margin-bottom:14px; font-family:'Inter',sans-serif; } .toc ul{list-style:none; display:grid; gap:8px} .toc a{ display:block; padding:8px 12px; border-radius:8px; font-size:0.92rem; color:var(--ink-soft); font-weight:500; transition:background .25s ease, color .25s ease; } .toc a:hover{background:var(--coral-bg); color:var(--coral)} /* ============================================================ Service landing page components ============================================================ */ /* Service hero with stat row */ .service-hero{ position:relative; overflow:hidden; background:var(--grad-hero); padding:80px 0 90px; } .service-hero::before{ content:""; position:absolute; top:-120px; right:-120px; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, var(--coral-bg) 0%, transparent 70%); opacity:0.85; z-index:0; } .service-hero::after{ content:""; position:absolute; bottom:-140px; left:-140px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, var(--sunny-bg) 0%, transparent 70%); opacity:0.85; z-index:0; } .service-hero > .container{position:relative; z-index:2} .service-hero-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:60px; align-items:center; } .service-hero h1{margin:18px 0} .service-hero h1 .accent{color:var(--coral); font-weight:700; position:relative; display:inline-block} .service-hero h1 .accent::after{ content:""; position:absolute; left:-4px; right:-4px; bottom:6px; height:14px; background:var(--sunny); border-radius:999px; z-index:-1; opacity:0.55; } .service-hero p.lede{font-size:1.14rem; line-height:1.7; max-width:560px; margin-bottom:30px} .service-hero-stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:32px; max-width:520px; } .service-hero-stat{ background:#fff; padding:18px 20px; border-radius:var(--r-md); border:1px solid var(--line); box-shadow:var(--shadow-sm); display:flex; gap:12px; align-items:center; } .service-hero-stat i{ width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:0.95rem; flex-shrink:0; } .service-hero-stat strong{display:block; color:var(--teal-900); font-size:0.92rem; line-height:1.2; font-weight:700} .service-hero-stat span{display:block; color:var(--ink-soft); font-size:0.78rem; margin-top:2px} .service-hero-visual{ position:relative; aspect-ratio:1/1.05; border-radius:62% 38% 54% 46% / 48% 52% 48% 52%; overflow:hidden; box-shadow:var(--shadow-lg); animation: blobMorph 18s ease-in-out infinite; } .service-hero-visual img{width:100%; height:100%; object-fit:cover} @media (max-width:1100px){ .service-hero-grid{grid-template-columns:1fr; gap:50px} .service-hero-visual{max-width:480px; margin:0 auto} } @media (max-width:600px){ .service-hero-stats{grid-template-columns:1fr} } /* Sub-nav (anchor pills) for service deep-dive */ .service-subnav{ background:#fff; padding:18px 0; border-bottom:1px solid var(--line); position:sticky; top:96px; z-index:40; box-shadow:var(--shadow-sm); } .service-subnav-inner{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .service-subnav-inner a{ padding:9px 18px; border-radius:999px; background:var(--mint-50); color:var(--brand-teal); font-size:0.86rem; font-weight:600; transition:all .25s ease; white-space:nowrap; } .service-subnav-inner a:hover{background:var(--coral-bg); color:var(--coral)} /* Procedure / sub-service card */ .proc-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:24px; margin-top:40px; } .proc-card{ background:#fff; padding:0 28px 28px; border-radius:var(--r-md); border:1.5px solid var(--line); transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; overflow:hidden; } .proc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--coral-soft)} .proc-card h3{font-size:1.25rem; line-height:1.25; margin-bottom:10px} /* Legacy icon — keep for backwards-compat in case any cards retain old markup */ .proc-card .proc-icon{ width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; margin:28px 0 18px; } /* New image-placeholder fills the top half of each card — drop in to replace */ .proc-card .proc-image{ width:calc(100% + 56px); margin:0 -28px 22px; aspect-ratio:16/9; background:linear-gradient(135deg, var(--mint-50) 0%, var(--mint-100) 100%); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; } .proc-card .proc-image::before{ content:"\f03e"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:1.8rem; color:rgba(15,107,123,0.3); position:absolute; pointer-events:none; z-index:1; } .proc-card .proc-image::after{ content:"Add image"; font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase; font-weight:700; color:rgba(15,107,123,0.4); position:absolute; bottom:12px; left:50%; transform:translateX(-50%); pointer-events:none; z-index:1; } .proc-card .proc-image img{ position:relative; z-index:2; width:100%; height:100%; object-fit:cover; display:block; } .proc-card .proc-image img[src=""], .proc-card .proc-image img:not([src]){ display:none; } .proc-card .proc-meta{ display:inline-block; padding:4px 12px; background:var(--coral-bg); color:var(--coral); border-radius:999px; font-size:0.74rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:14px; } .proc-card p{font-size:0.96rem; line-height:1.65; margin-bottom:14px; color:var(--ink-soft)} .proc-card ul{list-style:none; margin:12px 0; padding:0} .proc-card ul li{ display:flex; gap:10px; align-items:flex-start; padding:5px 0; font-size:0.92rem; } .proc-card ul li::before{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--sage-deep); font-size:0.78rem; margin-top:5px; flex-shrink:0; } .proc-card .proc-cta{ display:inline-flex; gap:8px; align-items:center; margin-top:6px; color:var(--coral); font-weight:600; font-size:0.9rem; } .proc-card .proc-cta i{transition:transform .3s ease} .proc-card .proc-cta:hover i{transform:translateX(4px)} /* Eligibility / comparison table */ .elig-table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); margin:30px 0; } .elig-table th, .elig-table td{ padding:16px 22px; text-align:left; border-bottom:1px solid var(--line); font-size:0.96rem; vertical-align:top; } .elig-table th{ background:var(--mint-50); font-family:'Bricolage Grotesque','Inter',sans-serif; font-weight:700; color:var(--teal-900); font-size:0.92rem; letter-spacing:-0.01em; } .elig-table tbody tr:last-child th, .elig-table tbody tr:last-child td{border-bottom:none} .elig-table .check{color:var(--sage-deep); font-weight:700} .elig-table .cross{color:var(--coral); font-weight:700} .elig-table .free{ display:inline-block; padding:2px 10px; background:var(--sage-soft); color:var(--brand-teal); border-radius:999px; font-size:0.78rem; font-weight:700; } /* Process / steps */ .steps{ display:grid; gap:18px; margin:32px 0; counter-reset:step; } .step{ background:#fff; padding:24px 28px; border-radius:var(--r-md); border:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:flex-start; counter-increment:step; } .step::before{ content:counter(step); width:44px; height:44px; border-radius:14px; background:var(--grad-teal); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:1.2rem; flex-shrink:0; } .step h3{font-size:1.15rem; margin-bottom:6px; line-height:1.25} .step p{font-size:0.96rem; line-height:1.65; color:var(--ink-soft); margin:0} /* Pricing / fees pill */ .fee-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:var(--sage-soft); color:var(--brand-teal); font-size:0.82rem; font-weight:700; } .fee-pill.private{background:var(--sunny-bg); color:#B07815} /* Related services cross-link grid */ .related-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:18px; margin-top:30px; } .related-card{ background:#fff; padding:24px 22px; border-radius:var(--r-md); border:1px solid var(--line); transition:all .3s ease; display:block; } .related-card:hover{ transform:translateY(-3px); border-color:var(--coral); box-shadow:var(--shadow-sm); } .related-card .r-icon{ width:40px; height:40px; border-radius:12px; background:var(--coral-bg); color:var(--coral); display:inline-flex; align-items:center; justify-content:center; margin-bottom:12px; font-size:0.95rem; } /* Image-placeholder for related-service cards — drop in a photo by setting */ .related-card .r-image{ width:100%; aspect-ratio:16/10; border-radius:12px; overflow:hidden; background:linear-gradient(135deg, var(--mint-50) 0%, var(--mint-100) 100%); border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; position:relative; margin-bottom:14px; } .related-card .r-image::before{ content:"\f03e"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:1.4rem; color:rgba(15,107,123,0.35); position:absolute; pointer-events:none; z-index:1; } .related-card .r-image::after{ content:"Add image"; font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; color:rgba(15,107,123,0.45); position:absolute; bottom:10px; left:50%; transform:translateX(-50%); pointer-events:none; z-index:1; } .related-card .r-image img{ position:relative; z-index:2; width:100%; height:100%; object-fit:cover; display:block; } .related-card .r-image img[src=""], .related-card .r-image img:not([src]){ display:none; /* hide broken/empty src so placeholder shows through */ } .related-card h4{font-size:1rem; margin-bottom:6px; line-height:1.2} .related-card p{font-size:0.86rem; color:var(--ink-soft); line-height:1.5; margin:0} /* Service section base */ .service-section{padding:90px 0} .service-section.alt{background:var(--mint-50)} .service-section h2{margin-bottom:14px} .service-section .lede{font-size:1.06rem; max-width:680px; margin-bottom:14px; line-height:1.7} /* ============================================================ Footer — vibrant brand-colour social buttons ============================================================ */ .social-cta-row .social-cta-fb{ background:#1877F2 !important; border-color:#1877F2 !important; color:#fff !important; } .social-cta-row .social-cta-fb:hover{ background:#0F5BCB !important; border-color:#0F5BCB !important; transform:translateY(-3px); box-shadow:0 12px 28px -10px rgba(24,119,242,0.45); } .social-cta-row .social-cta-ig{ background:linear-gradient(45deg, #F58529 0%, #DD2A7B 35%, #8134AF 65%, #515BD4 100%) !important; border-color:transparent !important; color:#fff !important; } .social-cta-row .social-cta-ig:hover{ background:linear-gradient(45deg, #F58529 0%, #DD2A7B 35%, #8134AF 65%, #515BD4 100%) !important; filter:brightness(1.05); transform:translateY(-3px); box-shadow:0 12px 28px -10px rgba(221,42,123,0.5); } /* ============================================================ Header navbar dropdowns — Services & Allied Health (v3, bulletproof) Uses class-targeted rules to avoid the previous ::after conflict. ============================================================ */ /* Header must never clip the dropdown */ header.site, header.site-header, header{overflow:visible !important} header.site .nav, nav.primary, nav.primary ul, nav.primary > ul > li{overflow:visible !important} /* Bridge the gap between trigger & panel so hover stays alive */ nav.primary li.has-dropdown{ position:relative; padding-bottom:18px; margin-bottom:-18px; } nav.primary li.has-dropdown > a.nav-dropdown-trigger{ cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } nav.primary .nav-caret{ font-size:0.62rem !important; opacity:0.55; transition:transform .25s ease, opacity .25s ease; display:inline-block; } nav.primary li.has-dropdown:hover .nav-caret, nav.primary li.has-dropdown:focus-within .nav-caret{ transform:rotate(180deg); opacity:1; } /* Suppress the underline ::after specifically on the dropdown trigger */ nav.primary li.has-dropdown > a.nav-dropdown-trigger::after{ content:none !important; display:none !important; } /* The dropdown panel itself */ nav.primary .nav-dropdown{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px); margin-top:4px; width:580px; max-width:90vw; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 28px 64px -22px rgba(20,40,60,0.28), 0 6px 18px -6px rgba(20,40,60,0.10); padding:0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .22s ease, transform .22s ease, visibility .22s; z-index:300; } nav.primary .nav-dropdown.nav-dropdown-narrow{width:340px} nav.primary li.has-dropdown:hover > .nav-dropdown, nav.primary li.has-dropdown:focus-within > .nav-dropdown{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); } nav.primary .nav-dropdown-inner{ padding:22px 24px 16px; display:grid; grid-template-columns:1fr 1fr; gap:2px 18px; } nav.primary .nav-dropdown.nav-dropdown-narrow .nav-dropdown-inner{ grid-template-columns:1fr; } nav.primary .nav-dropdown h5{ grid-column:1 / -1; font-family:'Inter',sans-serif; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--brand-teal); font-weight:700; margin:0 0 10px; padding-bottom:10px; border-bottom:1px solid var(--line); } nav.primary .nav-dropdown a{ display:flex; align-items:center; padding:9px 12px; border-radius:10px; font-family:'Inter',sans-serif; font-size:0.88rem; font-weight:500; color:var(--ink); text-decoration:none; transition:background .18s ease, color .18s ease, transform .18s ease; position:relative; } nav.primary .nav-dropdown a::after{ content:none !important; display:none !important; } nav.primary .nav-dropdown a:hover{ background:var(--coral-bg); color:var(--coral); transform:translateX(2px); } nav.primary .nav-dropdown-footer{ border-top:1px solid var(--line); padding:12px 24px; background:var(--mint-50); border-radius:0 0 16px 16px; } nav.primary .nav-dropdown-footer a{ display:inline-flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; font-size:0.85rem; font-weight:600; color:var(--brand-teal); text-decoration:none; } nav.primary .nav-dropdown-footer a::after{content:none !important; display:none !important} nav.primary .nav-dropdown-footer a:hover{color:var(--coral)} nav.primary .nav-dropdown-footer a i{transition:transform .25s ease} nav.primary .nav-dropdown-footer a:hover i{transform:translateX(3px)} /* Mobile / narrow viewport — collapse dropdown so the nav stays usable */ @media (max-width:1100px){ nav.primary li.has-dropdown{padding-bottom:0; margin-bottom:0} nav.primary .nav-dropdown{display:none !important} nav.primary .nav-caret{display:none} } /* ============================================================ Services-page quick-jump dropdown ============================================================ */ .services-jump{padding:40px 0 0; background:#fff} .services-jump-card{ background:linear-gradient(135deg, var(--mint-50) 0%, #fff 100%); border:1px solid var(--line); border-radius:var(--r-md); padding:22px 28px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; box-shadow:0 12px 30px -16px rgba(20,40,60,0.18); } .services-jump-card label{ font-family:'Bricolage Grotesque', serif; font-weight:700; font-size:1.05rem; color:var(--brand-teal); display:flex; align-items:center; gap:10px; } .services-jump-card label i{color:var(--coral)} .services-jump-card select{ flex:1; min-width:280px; padding:14px 18px; font-family:'Inter', sans-serif; font-size:0.95rem; font-weight:500; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:999px; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232e6267'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right 16px center; background-size:20px; padding-right:46px; transition:border-color .25s ease, box-shadow .25s ease; } .services-jump-card select:hover, .services-jump-card select:focus{ border-color:var(--coral); box-shadow:0 0 0 4px var(--coral-bg); outline:none; } @media (max-width:600px){ .services-jump-card{padding:18px 20px} .services-jump-card select{min-width:0; width:100%} } /* ============================================================ Blog search & filter ============================================================ */ .blog-search-card{ background:linear-gradient(135deg, var(--mint-50) 0%, #fff 60%); border:1px solid var(--line); border-radius:var(--r-md); padding:26px 28px; box-shadow:0 12px 30px -18px rgba(20,40,60,0.18); } .blog-search-input{ position:relative; display:flex; align-items:center; } .blog-search-input > i.fa-magnifying-glass{ position:absolute; left:22px; top:50%; transform:translateY(-50%); color:var(--brand-teal); font-size:1.05rem; pointer-events:none; } .blog-search-input input{ flex:1; width:100%; padding:18px 56px 18px 56px; font-family:'Inter',sans-serif; font-size:1.02rem; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:999px; transition:border-color .25s ease, box-shadow .25s ease; } .blog-search-input input::placeholder{color:var(--ink-soft); opacity:0.85} .blog-search-input input:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 4px var(--coral-bg); } .blog-search-input button#blog-search-clear{ position:absolute; right:14px; top:50%; transform:translateY(-50%); width:34px; height:34px; background:var(--mint-100); color:var(--brand-teal); border:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease, color .2s ease; } .blog-search-input button#blog-search-clear:hover{background:var(--coral); color:#fff} .blog-search-tags{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:18px; } .blog-search-tags .blog-tag-label{ font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; margin-right:4px; } .blog-tag{ font-family:'Inter',sans-serif; font-size:0.82rem; font-weight:500; background:#fff; color:var(--brand-teal); border:1px solid var(--mint-100); border-radius:999px; padding:7px 14px; cursor:pointer; transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease; } .blog-tag:hover{ background:var(--coral-bg); color:var(--coral); border-color:var(--coral-soft); transform:translateY(-1px); } .blog-search-status{ margin:18px 4px 0; font-size:0.88rem; color:var(--ink-soft); font-weight:500; } .blog-search-empty{ margin-top:40px; padding:50px 30px; text-align:center; background:var(--mint-50); border:1px dashed var(--mint-100); border-radius:var(--r-md); } .blog-search-empty i{ font-size:2.4rem; color:var(--coral); margin-bottom:14px; display:inline-block; } .blog-search-empty p{ font-size:1rem; color:var(--ink); margin:0 0 22px; } @media (max-width:640px){ .blog-search-card{padding:20px} .blog-search-input input{font-size:0.95rem; padding:16px 50px 16px 50px} .blog-search-input > i.fa-magnifying-glass{left:18px} .blog-search-input button#blog-search-clear{right:10px; width:30px; height:30px} } /* ============================================================ Services-hub redesigned card grid ============================================================ */ .services-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:22px; } .svc-card{ background:#fff; border-radius:var(--r-md); border:1px solid var(--line); padding:0 26px 26px; display:flex; flex-direction:column; overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; text-decoration:none; color:inherit; } .svc-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--coral-soft); } /* Legacy icon kept for backwards-compat */ .svc-card .svc-icon{ width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin:26px 0 18px; transition:transform .35s ease; } .svc-card:hover .svc-icon{transform:rotate(-6deg) scale(1.08)} /* New full-width image placeholder for service-hub cards */ .svc-card .svc-image{ width:calc(100% + 52px); margin:0 -26px 22px; aspect-ratio:16/9; background:linear-gradient(135deg, var(--mint-50) 0%, var(--mint-100) 100%); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; } .svc-card .svc-image::before{ content:"\f03e"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:1.6rem; color:rgba(15,107,123,0.3); position:absolute; pointer-events:none; z-index:1; } .svc-card .svc-image::after{ content:"Add image"; font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:700; color:rgba(15,107,123,0.4); position:absolute; bottom:10px; left:50%; transform:translateX(-50%); pointer-events:none; z-index:1; } .svc-card .svc-image img{ position:relative; z-index:2; width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s cubic-bezier(.2,.8,.2,1); } .svc-card .svc-image img[src=""], .svc-card .svc-image img:not([src]){ display:none } .svc-card:hover .svc-image img{ transform:scale(1.04) } .svc-card h3{ font-size:1.2rem; line-height:1.25; margin-bottom:10px; color:var(--teal-900); } .svc-card p{ font-size:0.94rem; line-height:1.6; color:var(--ink-soft); margin-bottom:18px; flex:1; } .svc-card .svc-more{ display:inline-flex; align-items:center; gap:8px; color:var(--coral); font-weight:600; font-size:0.88rem; } .svc-card .svc-more i{transition:transform .3s ease} .svc-card:hover .svc-more i{transform:translateX(6px)} .svc-section{ padding:90px 0; } .svc-section-head{ text-align:center; max-width:720px; margin:0 auto 50px; } .svc-section-head h2{margin-bottom:14px} .svc-section-head p{font-size:1.06rem; line-height:1.7; color:var(--ink-soft)} /* ============================================================ Stay Connected — Instagram & Facebook social cards ============================================================ */ .stay-connected{ padding:100px 0; background:linear-gradient(180deg, var(--mint-50) 0%, #fff 100%); position:relative; overflow:hidden; } .stay-head{text-align:center; max-width:780px; margin:0 auto 56px} .stay-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-size:0.78rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--brand-teal); font-weight:600; margin-bottom:18px; } .stay-eyebrow-dot{width:8px; height:8px; border-radius:50%; background:var(--coral)} .stay-title{ font-family:'Bricolage Grotesque', serif; font-size:clamp(2.4rem, 4.6vw, 3.6rem); line-height:1.05; color:var(--ink); margin:0 0 16px; } .stay-title em{font-style:italic; color:var(--coral); font-weight:600} .stay-sub{font-size:1.05rem; color:var(--ink-soft); line-height:1.7} .stay-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:1180px; margin:0 auto; } .stay-card{ position:relative; overflow:hidden; border-radius:28px; padding:40px; min-height:480px; color:#fff; text-decoration:none; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 30px 70px -28px rgba(20,40,60,0.35); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; } .stay-card::after{content:none !important; display:none !important} .stay-card:hover{ transform:translateY(-8px); box-shadow:0 40px 90px -28px rgba(20,40,60,0.45); } .stay-card-ig{ background:linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%); } .stay-card-fb{ background:linear-gradient(135deg, #2563EB 0%, #1877F2 100%); } .stay-card-blob{ position:absolute; border-radius:50%; pointer-events:none; background:rgba(255,255,255,0.12); } .stay-card-blob-1{ width:240px; height:240px; top:-30px; right:-40px; } .stay-card-blob-2{ width:180px; height:180px; bottom:-50px; right:60px; background:rgba(255,255,255,0.08); } .stay-card-icon{ width:72px; height:72px; border-radius:20px; background:rgba(255,255,255,0.18); backdrop-filter:blur(10px); display:inline-flex; align-items:center; justify-content:center; font-size:2rem; color:#fff; margin-bottom:auto; } .stay-card-fb .stay-card-icon{background:rgba(255,255,255,0.25)} .stay-card-body{margin:30px 0} .stay-card-body h3{ font-family:'Bricolage Grotesque', serif; font-size:2.3rem; font-weight:700; color:#fff; margin:0 0 6px; } .stay-handle{ font-family:'Inter',sans-serif; font-size:0.98rem; color:rgba(255,255,255,0.9); margin:0 0 18px; } .stay-desc{ font-size:0.98rem; line-height:1.6; color:rgba(255,255,255,0.92); max-width:340px; margin:0; } .stay-card-footer{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .stay-stats{display:flex; gap:24px; flex-wrap:wrap} .stay-stat{display:flex; flex-direction:column} .stay-stat strong{ font-family:'Bricolage Grotesque', serif; font-size:1.5rem; font-weight:700; color:#fff; line-height:1.1; } .stay-stat span{ font-family:'Inter',sans-serif; font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:rgba(255,255,255,0.85); font-weight:500; margin-top:4px; } .stay-btn{ display:inline-flex; align-items:center; gap:8px; background:#fff; padding:12px 22px; border-radius:999px; font-family:'Inter',sans-serif; font-size:0.92rem; font-weight:600; transition:transform .25s ease; } .stay-card-ig .stay-btn{color:#DD2A7B} .stay-card-fb .stay-btn{color:#1877F2} .stay-card:hover .stay-btn{transform:translateX(4px)} @media (max-width:900px){ .stay-grid{grid-template-columns:1fr; gap:24px} .stay-card{min-height:auto; padding:32px} .stay-card-body h3{font-size:1.9rem} } /* ============================================================ Doctor profile cards — homepage (compact, neat 4-up layout) ============================================================ */ .doctor-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; } .doc-card{ background:transparent; border-radius:14px; transition:transform .35s cubic-bezier(.2,.8,.2,1); } .doc-card:hover{transform:translateY(-4px)} .doc-photo{ position:relative; aspect-ratio:1/1.05; overflow:hidden; border-radius:14px; background:var(--mint-50); } .doc-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.8,.2,1); } .doc-card:hover .doc-photo img{transform:scale(1.04)} .doc-pill{ position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px; font-family:'Inter',sans-serif; font-size:0.65rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; background:#fff; color:var(--brand-teal); box-shadow:0 4px 12px -4px rgba(0,0,0,0.15); } .doc-pill-accent{background:var(--coral); color:#fff} .doc-pill-coral{background:linear-gradient(135deg, #FF6B6B 0%, #C26A8E 100%); color:#fff} .doc-pill-green{background:#fff; color:var(--brand-teal)} .doc-pill-pink{background:#fff; color:#C26A8E; border:1px solid var(--pink-bg)} .doc-pill-lavender{background:var(--lavender-bg); color:#6A57AC} .doc-body{padding:16px 2px 0} .doc-body h3{ font-family:'Bricolage Grotesque', serif; font-size:1.18rem; line-height:1.2; color:var(--ink); margin:0 0 6px; font-weight:700; } .doc-nickname{ display:inline; font-family:'Inter',sans-serif; font-size:0.78rem; font-weight:500; color:var(--coral); margin-left:4px; } .doc-role{ font-family:'Inter',sans-serif; font-size:0.82rem; color:var(--ink-soft); margin:0 0 10px; font-weight:500; } .doc-specialty{ font-family:'Inter',sans-serif; font-size:0.84rem; line-height:1.5; color:var(--brand-teal); margin:0 0 12px; font-weight:500; } .doc-langs{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:14px; } .doc-lang{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; background:var(--mint-100); color:var(--brand-teal); font-family:'Inter',sans-serif; font-size:0.72rem; font-weight:500; } .doc-book{ display:inline-flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; font-size:0.84rem; font-weight:600; color:var(--brand-teal); text-decoration:none; border-bottom:1.5px solid var(--brand-teal); padding-bottom:2px; transition:color .2s ease, gap .2s ease; } .doc-book::after{content:none !important; display:none !important} .doc-book:hover{color:var(--coral); border-color:var(--coral); gap:10px} .doc-book i{font-size:0.82em} @media (max-width:1100px){ .doctor-grid{grid-template-columns:repeat(3, 1fr)} } @media (max-width:900px){ .doctor-grid{grid-template-columns:repeat(2, 1fr); gap:18px} .doc-body h3{font-size:1.05rem} } @media (max-width:520px){ .doctor-grid{grid-template-columns:1fr; gap:20px} } /* ============================================================ Dr Sree welcome banner (with photo + focus chips) ============================================================ */ .sree-welcome{padding:40px 0 90px; background:#fff} .sree-card{ position:relative; background:linear-gradient(135deg, var(--coral-bg) 0%, #FFE4DD 55%, var(--sunny-bg) 100%); border-radius:24px; padding:48px 52px; display:grid; grid-template-columns:280px 1fr; align-items:center; gap:48px; border:1px solid rgba(255,140,123,0.25); overflow:hidden; } .sree-card::before{ content:""; position:absolute; top:-80px; right:-60px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(255,140,123,0.35) 0%, transparent 70%); pointer-events:none; } .sree-photo{ position:relative; aspect-ratio:1/1.15; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 22px 50px -18px rgba(20,40,60,0.28); z-index:1; } .sree-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .sree-pill{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg, #FF6B6B 0%, #C26A8E 100%); color:#fff; padding:8px 18px; border-radius:999px; font-family:'Inter',sans-serif; font-size:0.7rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; margin-bottom:14px; box-shadow:0 10px 24px -8px rgba(255,107,107,0.5); } .sree-body{position:relative; z-index:1} .sree-body h3{ font-family:'Bricolage Grotesque', serif; font-size:1.75rem; font-weight:700; color:var(--ink); margin:0 0 14px; line-height:1.2; } .sree-quote{ font-family:'Inter',sans-serif; font-size:0.96rem; line-height:1.7; color:var(--ink); font-style:italic; margin:0 0 14px; } .sree-credentials{ font-family:'Inter',sans-serif; font-size:0.88rem; color:var(--ink-soft); margin:0 0 16px; font-style:normal; } .sree-credentials strong{color:var(--coral); font-weight:700} .sree-focus{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; } .sree-focus-chip{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid rgba(255,140,123,0.35); color:var(--brand-teal); padding:6px 14px; border-radius:999px; font-family:'Inter',sans-serif; font-size:0.78rem; font-weight:600; } .sree-focus-chip i{color:var(--coral); font-size:0.78em} .sree-cta{margin-top:0} @media (max-width:900px){ .sree-card{grid-template-columns:1fr; padding:36px 30px; gap:28px} .sree-photo{max-width:260px; margin:0 auto} .sree-body h3{font-size:1.45rem} } /* ============================================================ Allied Health cards — now anchor-wrapped & link to service pages ============================================================ */ a.allied-card{ text-decoration:none; color:inherit; display:flex; flex-direction:column; cursor:pointer; transition:transform .35s cubic-bezier(.2,.8,.2,1); } a.allied-card::after{content:none !important; display:none !important} a.allied-card:hover{transform:translateY(-6px)} .allied-link{ display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-family:'Inter',sans-serif; font-size:0.82rem; font-weight:600; color:var(--sage); letter-spacing:0.04em; transition:gap .2s ease, color .2s ease; } a.allied-card:hover .allied-link{ color:var(--gold); gap:10px; } .allied-link i{font-size:0.85em; transition:transform .25s ease} a.allied-card:hover .allied-link i{transform:translateX(3px)} /* Allied section eyebrow dot for visual parity */ .allied .eyebrow-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--coral); margin-right:6px; vertical-align:middle; } /* ============================================================ New Patient Registration form ============================================================ */ .registration-section{ padding:60px 0 100px; background:#fff; } .registration-form{ background:#fff; border:1px solid var(--line); border-radius:24px; padding:42px 48px; max-width:980px; margin:0 auto; box-shadow:0 28px 60px -28px rgba(20,40,60,0.20); } /* Progress */ .reg-progress{margin-bottom:36px} .reg-progress-bar{ position:relative; height:6px; background:var(--mint-100); border-radius:999px; overflow:hidden; margin-bottom:24px; } .reg-progress-fill{ position:absolute; top:0; left:0; bottom:0; background:linear-gradient(90deg, var(--coral) 0%, var(--brand-teal) 100%); border-radius:999px; transition:width .35s ease; } .reg-progress-steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:14px; } .reg-step{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:6px 4px; border-radius:12px; transition:background .2s ease; } .reg-step-num{ width:34px; height:34px; border-radius:50%; background:var(--mint-100); color:var(--brand-teal); display:inline-flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; font-weight:700; font-size:0.95rem; transition:background .25s ease, color .25s ease; } .reg-step.done .reg-step-num{ background:var(--brand-teal); color:#fff; } .reg-step.done .reg-step-num::before{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:0.85em; } .reg-step.done .reg-step-num{font-size:0} .reg-step.active .reg-step-num{ background:var(--coral); color:#fff; box-shadow:0 0 0 6px var(--coral-bg); } .reg-step-label{ font-family:'Inter',sans-serif; font-size:0.78rem; font-weight:500; color:var(--ink-soft); letter-spacing:0.02em; line-height:1.2; } .reg-step.active .reg-step-label, .reg-step.done .reg-step-label{ color:var(--brand-teal); font-weight:600; } .reg-progress-label{ text-align:right; font-family:'Inter',sans-serif; font-size:0.82rem; color:var(--ink-soft); margin:0; } /* Step panes */ .reg-step-pane{ border:none; padding:0; margin:0; } .reg-step-pane[hidden]{display:none} /* Section heading */ .reg-section-head{ display:flex; align-items:center; gap:16px; padding:0 0 22px; border-bottom:1px solid var(--line); margin-bottom:30px; width:100%; } .reg-section-head h2{ font-family:'Bricolage Grotesque', serif; font-size:1.7rem; color:var(--ink); margin:0; } .reg-section-icon{ width:48px; height:48px; border-radius:14px; background:var(--mint-100); color:var(--brand-teal); display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; } /* Subsection heading */ .reg-subhead{ font-family:'Bricolage Grotesque', serif; font-size:1.15rem; color:var(--brand-teal); margin:28px 0 14px; padding-top:14px; border-top:1px dashed var(--line); } .reg-subhead:first-of-type{border-top:none; padding-top:0; margin-top:6px} /* Grid */ .reg-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px 22px; } .reg-field{display:flex; flex-direction:column; gap:6px} .reg-field-wide{grid-column:span 2} .reg-field-full{grid-column:1 / -1} @media (min-width:760px){ .reg-grid{grid-template-columns:repeat(2, 1fr)} } @media (max-width:600px){ .reg-grid{grid-template-columns:1fr; gap:14px} .reg-field-wide{grid-column:auto} } .reg-field label{ font-family:'Inter',sans-serif; font-size:0.86rem; font-weight:600; color:var(--ink); } .reg-field small{ font-size:0.74rem; color:var(--ink-soft); margin-top:2px; } .reg-field input, .reg-field select, .reg-field textarea, .reg-conditional input, .reg-conditional select, .reg-conditional textarea, .reg-repeater input{ font-family:'Inter',sans-serif; font-size:0.95rem; color:var(--ink); padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; background:#fff; transition:border-color .2s ease, box-shadow .2s ease; width:100%; } .reg-field input:focus, .reg-field select:focus, .reg-field textarea:focus, .reg-conditional input:focus, .reg-conditional select:focus, .reg-conditional textarea:focus, .reg-repeater input:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 4px var(--coral-bg); } .reg-field textarea{resize:vertical; min-height:80px} .req{color:var(--coral); font-weight:700} /* Radio groups */ .reg-radio-group{ background:var(--mint-50); padding:18px 22px; border-radius:14px; margin:18px 0 6px; border:1px solid var(--mint-100); } .reg-question{ font-family:'Inter',sans-serif; font-size:0.92rem; font-weight:600; color:var(--ink); margin:0 0 12px; } .reg-question-soft{ font-weight:500; color:var(--ink-soft); margin:14px 0 10px; font-size:0.88rem; } .reg-radio-group .reg-radio, .reg-radio-row .reg-radio{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--line); border-radius:999px; padding:9px 18px; margin-right:10px; margin-bottom:8px; cursor:pointer; font-family:'Inter',sans-serif; font-size:0.88rem; font-weight:500; color:var(--ink); transition:border-color .15s ease, background .15s ease; } .reg-radio input{ width:16px; height:16px; accent-color:var(--coral); margin:0; } .reg-radio:hover{border-color:var(--coral); color:var(--coral)} .reg-radio input:checked ~ span{color:var(--coral); font-weight:600} .reg-radio:has(input:checked){ border-color:var(--coral); background:var(--coral-bg); } /* Checkbox grid */ .reg-check-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:10px; } @media (max-width:760px){.reg-check-grid{grid-template-columns:repeat(2, 1fr)}} @media (max-width:480px){.reg-check-grid{grid-template-columns:1fr}} .reg-check{ display:inline-flex; align-items:center; gap:10px; background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:10px 14px; cursor:pointer; font-family:'Inter',sans-serif; font-size:0.86rem; color:var(--ink); transition:border-color .15s ease, background .15s ease; } .reg-check:hover{border-color:var(--brand-teal)} .reg-check input{ width:18px; height:18px; accent-color:var(--brand-teal); margin:0; } .reg-check:has(input:checked){ background:var(--mint-50); border-color:var(--brand-teal); } .reg-check-large{ display:flex; align-items:flex-start; gap:14px; padding:18px 22px; background:var(--mint-50); border:1px solid var(--mint-100); font-size:0.95rem; } .reg-check-large input{margin-top:3px} /* Conditional groups */ .reg-conditional{ margin-top:14px; padding-left:22px; border-left:3px solid var(--coral-soft); } .reg-conditional[hidden]{display:none !important} /* Repeater */ .reg-repeater{margin-top:10px; display:flex; flex-direction:column; gap:8px} .reg-repeater-row{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; } .reg-repeater-row-double{grid-template-columns:1fr 1.6fr auto} @media (max-width:600px){.reg-repeater-row-double{grid-template-columns:1fr auto}} .reg-repeater-remove{ width:38px; height:38px; border-radius:50%; background:var(--mint-100); color:var(--brand-teal); border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease; } .reg-repeater-remove:hover{background:var(--coral); color:#fff} .reg-repeater-add{ align-self:flex-start; margin-top:10px; display:inline-flex; align-items:center; gap:6px; background:#fff; border:1.5px dashed var(--mint-100); color:var(--brand-teal); padding:9px 16px; border-radius:10px; cursor:pointer; font-family:'Inter',sans-serif; font-size:0.85rem; font-weight:600; transition:border-color .2s ease, color .2s ease, background .2s ease; } .reg-repeater-add:hover{ border-color:var(--coral); color:var(--coral); background:var(--coral-bg); border-style:solid; } /* Consent rows */ .reg-consent-intro{ background:var(--lavender-bg); border-left:3px solid #7E6BC1; padding:16px 20px; border-radius:10px; font-family:'Inter',sans-serif; font-size:0.92rem; line-height:1.6; color:var(--ink); margin-bottom:20px; } .reg-consent{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px 22px; margin-bottom:14px; } .reg-consent .reg-question{margin-bottom:14px} .reg-radio-row{display:flex; gap:10px; flex-wrap:wrap} .reg-final-check{margin-top:24px} /* Step navigation */ .reg-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:32px; padding-top:24px; border-top:1px solid var(--line); gap:12px; } .reg-nav .btn{padding:12px 24px} /* Success state */ .reg-success{ text-align:center; padding:50px 30px; } .reg-success-icon{ font-size:4rem; color:var(--sage); margin-bottom:20px; } .reg-success h2{ font-family:'Bricolage Grotesque', serif; font-size:1.85rem; color:var(--ink); margin:0 0 14px; } .reg-success p{ font-size:1rem; color:var(--ink-soft); max-width:520px; margin:0 auto; line-height:1.65; } /* Footnote */ .reg-footnote{ max-width:980px; margin:30px auto 0; padding:0 16px; } .reg-footnote p{ font-family:'Inter',sans-serif; font-size:0.85rem; color:var(--ink-soft); text-align:center; } .reg-footnote i{color:var(--brand-teal); margin-right:6px} .reg-footnote a{color:var(--brand-teal); font-weight:600; text-decoration:underline} .reg-footnote a:hover{color:var(--coral)} @media (max-width:720px){ .registration-form{padding:30px 22px; border-radius:18px} .reg-step-label{display:none} .reg-progress-steps{gap:6px} } /* ============================================================ Allied health practitioner cards with photo placeholders ============================================================ */ .practitioner-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; margin-top:30px; } @media (max-width:960px){.practitioner-grid{grid-template-columns:repeat(2, 1fr)}} @media (max-width:620px){.practitioner-grid{grid-template-columns:1fr}} .practitioner-card{ background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; } .practitioner-card:hover{ transform:translateY(-6px); box-shadow:0 28px 60px -28px rgba(20,40,60,0.25); border-color:transparent; } .practitioner-photo{ position:relative; aspect-ratio:4/3.4; overflow:hidden; background:var(--mint-50); display:flex; align-items:center; justify-content:center; } .practitioner-photo img{ width:100%; height:100%; object-fit:cover; display:block; position:absolute; top:0; left:0; z-index:1; } .practitioner-photo-placeholder{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:100%; height:100%; color:var(--ink-soft); font-family:'Inter',sans-serif; font-size:0.82rem; font-weight:500; letter-spacing:0.04em; } .practitioner-photo-placeholder i{ font-size:2.6rem; color:#fff; width:84px; height:84px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--mint-100); box-shadow:0 8px 20px -8px rgba(20,40,60,0.18); } .practitioner-photo-placeholder span{ text-transform:uppercase; font-size:0.7rem; letter-spacing:0.12em; font-weight:600; color:var(--brand-teal); } /* Photo tint variants */ .practitioner-photo-coral{background:linear-gradient(135deg, var(--coral-bg) 0%, #FFE4DD 100%)} .practitioner-photo-coral .practitioner-photo-placeholder i{background:#fff; color:var(--coral)} .practitioner-photo-sunny{background:linear-gradient(135deg, var(--sunny-bg) 0%, #FFF1D6 100%)} .practitioner-photo-sunny .practitioner-photo-placeholder i{background:#fff; color:#D49A2C} .practitioner-photo-sky{background:linear-gradient(135deg, var(--sky-bg) 0%, #D9F1F6 100%)} .practitioner-photo-sky .practitioner-photo-placeholder i{background:#fff; color:#3D8FA1} .practitioner-photo-lavender{background:linear-gradient(135deg, var(--lavender-bg) 0%, #EBE5FB 100%)} .practitioner-photo-lavender .practitioner-photo-placeholder i{background:#fff; color:#7E6BC1} /* When a real photo is present (img has loaded), hide the placeholder */ .practitioner-photo img[src]:not([src=""]) ~ .practitioner-photo-placeholder{display:none} .practitioner-body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:8px; flex:1; } .practitioner-body h3{ font-family:'Bricolage Grotesque', serif; font-size:1.2rem; font-weight:700; color:var(--ink); margin:0; line-height:1.2; } .practitioner-meta{ font-family:'Inter',sans-serif; font-size:0.82rem; font-weight:600; color:var(--coral); letter-spacing:0.02em; } .practitioner-body p{ font-family:'Inter',sans-serif; font-size:0.92rem; line-height:1.6; color:var(--ink-soft); margin:6px 0 0; } /* ============================================================ SERVICE-PAGE UPLIFT — 2026 polish Larger typography, polished animations, smoother transitions All additions are CSS-cascade safe (no required HTML changes). ============================================================ */ /* Bigger, more impactful service-page hero headings with gradient accent */ .service-hero h1{ font-size:clamp(2.4rem, 5.2vw, 4.1rem); line-height:1.05; letter-spacing:-0.025em; font-weight:600; margin:18px 0 22px; } .service-hero h1 .accent{ color:var(--coral); background:linear-gradient(110deg, var(--coral) 0%, #E26B5E 45%, #D49A2C 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; position:relative; display:inline-block; } /* Keep the playful underline highlight visible — sits behind the gradient text */ .service-hero h1 .accent::after{ content:""; position:absolute; left:-4px; right:-4px; bottom:6px; height:16px; background:var(--sunny); border-radius:999px; z-index:-1; opacity:0.6; } .service-hero p.lede{font-size:1.18rem; line-height:1.72; max-width:600px} /* Service-section h2 — larger, with optical-balanced kerning */ .service-section h2{ font-size:clamp(1.85rem, 3.4vw, 2.7rem); line-height:1.15; letter-spacing:-0.018em; margin-bottom:18px; } /* Card hover lift — polished, not bouncy */ .proc-card{ transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1), border-color .35s ease } .proc-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -22px rgba(15,107,123,0.28); border-color:var(--coral); } .related-card{ transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .3s ease } .related-card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px -18px rgba(46,98,103,0.32); border-color:var(--coral); } .related-card:hover .r-image{ background:linear-gradient(135deg, var(--coral-bg) 0%, var(--sunny-bg) 100%); } .related-card .r-image{ transition:background .4s ease } /* Subtle zoom-in on placeholder images when the card is hovered */ .proc-card:hover .proc-image{ transform:scale(1.012) } .proc-card .proc-image{ transition:transform .55s cubic-bezier(.2,.8,.2,1) } .proc-card .proc-image img, .related-card .r-image img{ transition:transform .55s cubic-bezier(.2,.8,.2,1) } .proc-card:hover .proc-image img, .related-card:hover .r-image img{ transform:scale(1.04) } /* Button shimmer — diagonal light sweep on hover */ .btn-primary, .btn-gold{ position:relative; overflow:hidden } .btn-primary::after, .btn-gold::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.32) 50%, transparent 100%); transform:skewX(-22deg); transition:left .65s cubic-bezier(.2,.8,.2,1); pointer-events:none; } .btn-primary:hover::after, .btn-gold:hover::after{ left:130% } /* Slight glow ring on focus for accessibility */ .btn:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(231,121,107,0.35) } /* Smooth, slower scroll-reveal for richer feel + extended stagger range */ .reveal{ transition:opacity 1.1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1) !important } .reveal.delay-5{transition-delay:.40s} .reveal.delay-6{transition-delay:.48s} .reveal.delay-7{transition-delay:.56s} .reveal.delay-8{transition-delay:.64s} /* Hover affordance on info-callout — soft border-glow on focusable content */ .info-callout{ transition:box-shadow .35s ease, transform .35s ease } .info-callout:hover{ box-shadow:0 8px 22px -10px rgba(15,107,123,0.18) } /* Decorative shimmer behind hero blob image — light ambient motion */ @keyframes ambientPulse{ 0%, 100% { opacity:0.85; transform:scale(1) } 50% { opacity:1; transform:scale(1.04) } } .service-hero::before, .service-hero::after{ animation: ambientPulse 8s ease-in-out infinite; } .service-hero::after{ animation-delay:-4s } /* Breadcrumb polish — subtle underline on hover */ .breadcrumb a{ transition:color .2s ease } .breadcrumb a:hover{ color:var(--coral) } /* Section dividers — soft fading line for cleaner separation between sections */ .service-section + .service-section{ position:relative; } .service-section + .service-section::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:3px; border-radius:999px; background:linear-gradient(90deg, transparent 0%, var(--coral-soft) 50%, transparent 100%); opacity:0.6; } /* Sticky sub-nav style refinement when used */ .service-subnav{ backdrop-filter:saturate(140%) blur(8px) } /* Specialty/sub-list bullets get a soft fade-in when the parent reveals */ .specialty-list li{ transition:transform .35s ease } .specialty-list li:hover{ transform:translateX(2px); color:var(--coral) } /* Make eyebrow tags feel kinetic — gentle pulse dot */ .eyebrow{ position:relative } .eyebrow::before{ display:inline-block; } /* Reduced-motion fallback — kill the new flourishes too */ @media (prefers-reduced-motion: reduce){ .service-hero::before, .service-hero::after, .btn-primary::after, .btn-gold::after, .proc-card, .proc-card .proc-image, .proc-card .proc-image img, .related-card, .related-card .r-image, .related-card .r-image img{ animation:none !important; transition:none !important; } .proc-card:hover, .related-card:hover{ transform:none !important } } /* AHPRA cue: "Information only" disclaimer footer block (used on service pages) */ .ahpra-disclaimer{ background:var(--mint-50); border-left:3px solid var(--brand-teal); padding:16px 20px; border-radius:8px; font-size:0.85rem; line-height:1.6; color:var(--ink-soft); margin:30px 0; } .ahpra-disclaimer strong{ color:var(--teal-900) } /* Allied Health practitioner card hover lift + photo zoom (mirrors proc-card polish) */ .allied-detail{ transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1), border-color .3s ease; } .allied-detail:hover{ transform:translateY(-5px); box-shadow:0 22px 48px -20px rgba(15,107,123,0.32); border-color:var(--coral-soft); } .allied-detail-photo{ overflow:hidden } .allied-detail-photo img{ transition:transform .65s cubic-bezier(.2,.8,.2,1) } .allied-detail:hover .allied-detail-photo img{ transform:scale(1.05) } /* Allied hub mini-cards (homepage / hub) — same polished hover */ .allied-card{ transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .3s ease; } .allied-card:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -20px rgba(46,98,103,0.28); border-color:var(--coral); } /* Allied "How we work" feature cards (the centred-icon row) — subtle hover */ .allied .feature-card, section .feature-card{ transition:transform .35s ease, box-shadow .35s ease } section .feature-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -16px rgba(15,107,123,0.22) } /* Reduced-motion fallback extends to allied additions */ @media (prefers-reduced-motion: reduce){ .allied-detail, .allied-detail-photo img, .allied-card{ transition:none !important; } .allied-detail:hover, .allied-card:hover{ transform:none !important } } /* ============================================================ EDITORIAL MAGAZINE LAYER — body.editorial Generalized version of the Women's Health v2 prototype. Uses brand defaults (coral/teal); pink page overrides via theme-pink. ============================================================ */ body.editorial{ --editorial-accent:var(--coral); --editorial-accent-soft:var(--coral-soft); --editorial-accent-bg:var(--coral-bg); --editorial-accent-deep:#C25841; --editorial-accent-line:rgba(255,138,107,0.35); --serif:'Playfair Display', 'Cormorant Garamond', Georgia, serif; counter-reset: chapter; } /* Auto chapter numbering — every service-section gets a number */ body.editorial .service-section{ counter-increment: chapter; } /* Chapter mark element (used in HTML where present) */ body.editorial .chapter-mark{ display:flex; align-items:center; gap:18px; font-family:'Inter', sans-serif; font-size:0.74rem; font-weight:700; letter-spacing:0.32em; text-transform:uppercase; color:var(--editorial-accent-deep); margin-bottom:24px; } body.editorial .chapter-mark::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--editorial-accent-line) 0%, transparent 100%); } body.editorial .chapter-mark .num{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--editorial-accent-bg); color:var(--editorial-accent-deep); font-family:var(--serif); font-size:0.95rem; font-weight:600; font-style:italic; letter-spacing:0; } /* Auto-prepend a chapter mark above each service-section h2 (when no explicit chapter-mark already exists in the HTML) */ body.editorial .service-section:not(:has(> .container > .chapter-mark)) > .container > h2:first-of-type::before, body.editorial .service-section:not(:has(.chapter-mark)) .container > h2:first-of-type::before{ content: "Chapter " counter(chapter, decimal-leading-zero); display:block; font-family:'Inter', sans-serif; font-size:0.7rem; font-weight:700; letter-spacing:0.28em; text-transform:uppercase; color:var(--editorial-accent-deep); margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--editorial-accent-line); max-width:240px; } /* Editorial hero — restyle existing .service-hero markup */ body.editorial .service-hero{ background:linear-gradient(180deg, #fff 0%, var(--mint-50) 60%, var(--editorial-accent-bg) 100%); padding:80px 0 95px; } body.editorial .service-hero h1{ font-family:var(--serif); font-size:clamp(2.6rem, 6vw, 5.2rem); line-height:1.02; letter-spacing:-0.025em; font-weight:500; color:var(--teal-900); } body.editorial .service-hero h1 .accent{ font-family:var(--serif); font-style:italic; font-weight:500; color:var(--editorial-accent); background:none; -webkit-text-fill-color:initial; position:relative; display:inline-block; } body.editorial .service-hero h1 .accent::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg, var(--editorial-accent) 0%, var(--editorial-accent-soft) 100%); } body.editorial .service-hero p.lede{ font-size:1.15rem; line-height:1.75; max-width:580px; color:var(--ink-soft); } /* Drop cap on the hero lede for editorial polish */ body.editorial .service-hero p.lede::first-letter{ font-family:var(--serif); font-size:3.2rem; line-height:0.82; color:var(--editorial-accent); font-weight:600; float:left; padding:6px 12px 0 0; font-style:italic; } /* ============================================================ PER-PAGE THEME PALETTES — body.theme-{name} applies topic colour ============================================================ */ body.theme-blue{ --editorial-accent:#2E6F9E; --editorial-accent-soft:#A9C9DF; --editorial-accent-bg:#E4EFF8; --editorial-accent-deep:#1F4F73; --editorial-accent-line:rgba(46,111,158,0.35); } body.theme-children{ --editorial-accent:#E07FAB; --editorial-accent-soft:#F4CFE0; --editorial-accent-bg:#FDF0F6; --editorial-accent-deep:#A8417A; --editorial-accent-line:rgba(224,127,171,0.35); } body.theme-orange{ --editorial-accent:#E37D5A; --editorial-accent-soft:#F4C5B4; --editorial-accent-bg:#FCEAE2; --editorial-accent-deep:#B45638; --editorial-accent-line:rgba(227,125,90,0.35); } body.theme-sage{ --editorial-accent:#6A9D8A; --editorial-accent-soft:#C6DDD0; --editorial-accent-bg:#E8F1ED; --editorial-accent-deep:#446B5E; --editorial-accent-line:rgba(106,157,138,0.35); } body.theme-lavender{ --editorial-accent:#8166AE; --editorial-accent-soft:#C8B8E0; --editorial-accent-bg:#EDE6F5; --editorial-accent-deep:#5A4480; --editorial-accent-line:rgba(129,102,174,0.35); } body.theme-gold{ --editorial-accent:#C18E2A; --editorial-accent-soft:#E8D49A; --editorial-accent-bg:#FAF1D9; --editorial-accent-deep:#8E661B; --editorial-accent-line:rgba(193,142,42,0.35); } /* ============================================================ HERO BLOB SHAPE VARIANTS — body.shape-{n} picks a unique blob Default falls back to the original blob. ============================================================ */ body.editorial.shape-1 .editorial-hero-visual, body.editorial.shape-1 .service-hero-visual{ border-radius:60% 40% 50% 50% / 55% 45% 55% 45% } body.editorial.shape-2 .editorial-hero-visual, body.editorial.shape-2 .service-hero-visual{ border-radius:45% 55% 70% 30% / 50% 70% 30% 50% } body.editorial.shape-3 .editorial-hero-visual, body.editorial.shape-3 .service-hero-visual{ border-radius:38% 62% 40% 60% / 60% 40% 60% 40% } body.editorial.shape-4 .editorial-hero-visual, body.editorial.shape-4 .service-hero-visual{ border-radius:50% 50% 35% 65% / 45% 55% 45% 55% } body.editorial.shape-5 .editorial-hero-visual, body.editorial.shape-5 .service-hero-visual{ border-radius:65% 35% 55% 45% / 40% 60% 40% 60% } body.editorial.shape-6 .editorial-hero-visual, body.editorial.shape-6 .service-hero-visual{ border-radius:42% 58% 60% 40% / 65% 35% 65% 35% } /* ============================================================ TIGHTER HEADINGS — premium polish at smaller scale ============================================================ */ body.editorial .editorial-hero h1, body.editorial .hero h1{ font-size:clamp(2.1rem, 4.4vw, 3.6rem) !important; line-height:1.06 !important; letter-spacing:-0.022em !important; } body.editorial .service-section h2, body.editorial .section-head h2, body.editorial #about h2, body.editorial .photo-slider h2, body.editorial .services .section-head h2, body.editorial #team .section-head h2, body.editorial .allied .section-head h2, body.editorial .testimonials .section-head h2, body.editorial .blog-section .section-head h2, body.editorial #contact h2{ font-size:clamp(1.7rem, 3vw, 2.6rem) !important; line-height:1.12 !important; } body.editorial .premium-cta h2{ font-size:clamp(2rem, 4vw, 3.2rem) !important; line-height:1.08 !important; } body.editorial .editors-pick h2{ font-size:clamp(1.8rem, 3.4vw, 2.8rem) !important; line-height:1.1 !important; } /* ============================================================ MID-PAGE BOOKING CTA STRIP — luxury rule with single button Drop
…
after any section ============================================================ */ .mid-cta{ padding:36px 0; text-align:center; background:transparent; } .mid-cta-inner{ display:inline-flex; align-items:center; gap:18px; padding:14px 22px 14px 28px; background:linear-gradient(135deg, var(--editorial-accent-bg) 0%, #fff 100%); border:1px solid var(--editorial-accent-soft); border-radius:999px; box-shadow:0 12px 28px -14px rgba(0,0,0,0.12); transition:transform .3s ease, box-shadow .3s ease; } .mid-cta-inner:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(0,0,0,0.16); } .mid-cta-text{ font-family:var(--serif, 'Playfair Display', serif); font-size:1.05rem; color:var(--teal-900); font-style:italic; font-weight:500; } .mid-cta-text em{ color:var(--editorial-accent); font-weight:600 } .mid-cta .btn-primary{ padding:11px 22px; font-size:0.85rem } /* Subtle ambient float of hero blob — premium feel */ @keyframes ambientFloat{ 0%, 100% { transform:translateY(0) } 50% { transform:translateY(-12px) } } body.editorial .editorial-hero-visual, body.editorial .service-hero-visual{ animation: blobMorph 22s ease-in-out infinite, ambientFloat 8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ body.editorial .editorial-hero-visual, body.editorial .service-hero-visual{ animation:none !important } } /* Editorial hero — 2-column grid (matches v2 prototype layout) */ body.editorial .editorial-hero{ position:relative; padding:80px 0 95px; background:linear-gradient(180deg, #fff 0%, var(--mint-50) 60%, var(--editorial-accent-bg) 100%); overflow:hidden; } body.editorial .editorial-hero::before{ content:""; position:absolute; top:-180px; right:-160px; width:540px; height:540px; border-radius:50%; background:radial-gradient(circle, var(--editorial-accent-soft) 0%, transparent 70%); opacity:0.65; pointer-events:none; animation: ambientPulse 12s ease-in-out infinite; } body.editorial .editorial-hero::after{ content:""; position:absolute; bottom:-200px; left:-160px; width:440px; height:440px; border-radius:50%; background:radial-gradient(circle, var(--editorial-accent-bg) 0%, transparent 70%); opacity:0.7; pointer-events:none; animation: ambientPulse 16s ease-in-out infinite reverse; } body.editorial .editorial-hero > .container{ position:relative; z-index:2 } body.editorial .editorial-hero-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:70px; align-items:center; margin-top:30px; } body.editorial .editorial-hero h1{ font-family:var(--serif); font-size:clamp(2.6rem, 5.8vw, 5rem); line-height:1.02; letter-spacing:-0.025em; font-weight:500; color:var(--teal-900); margin:0 0 24px; } body.editorial .editorial-hero h1 em{ font-style:italic; color:var(--editorial-accent); font-weight:500; position:relative; } body.editorial .editorial-hero h1 em::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:linear-gradient(90deg, var(--editorial-accent), var(--editorial-accent-soft)); } body.editorial .editorial-hero .lede{ font-family:'Inter', sans-serif; font-size:1.1rem; line-height:1.75; color:var(--ink-soft); max-width:560px; margin:0 0 28px; } body.editorial .editorial-hero .lede::first-letter{ font-family:var(--serif); font-size:3.2rem; line-height:0.82; color:var(--editorial-accent); font-weight:600; float:left; padding:6px 12px 0 0; font-style:italic; } body.editorial .editorial-hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:32px; } /* Editorial meta — 2-column credentials panel under CTAs */ body.editorial .editorial-meta{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--editorial-accent-soft); border-bottom:1px solid var(--editorial-accent-soft); padding:18px 0; } body.editorial .editorial-meta > div{ padding:8px 24px 8px 0 } body.editorial .editorial-meta > div + div{ border-left:1px solid var(--editorial-accent-soft); padding-left:24px; } body.editorial .editorial-meta-label{ font-family:'Inter', sans-serif; font-size:0.66rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--editorial-accent-deep); font-weight:700; margin-bottom:6px; } body.editorial .editorial-meta-value{ font-family:var(--serif); font-size:1.05rem; color:var(--teal-900); font-weight:500; line-height:1.3; } /* Hero photo — organic blob with rings + animation (matches v2 prototype) */ body.editorial .editorial-hero-visual, body.editorial .service-hero-visual{ position:relative; aspect-ratio:0.82/1; max-width:440px; margin:0 auto; border-radius:54% 46% 50% 50% / 50% 54% 46% 50%; overflow:hidden; box-shadow:0 36px 70px -28px rgba(15,107,123,0.4), 0 0 0 6px rgba(255,255,255,0.7), 0 0 0 10px var(--editorial-accent-bg); animation: blobMorph 22s ease-in-out infinite; } body.editorial .editorial-hero-visual img, body.editorial .service-hero-visual img{ width:100%; height:100%; object-fit:cover; transition:transform 1s ease; } body.editorial .editorial-hero-visual:hover img, body.editorial .service-hero-visual:hover img{ transform:scale(1.05) } /* Editorial hero responsive — collapse to single column on mobile */ @media (max-width:980px){ body.editorial .editorial-hero-grid{ grid-template-columns:1fr; gap:50px; } body.editorial .editorial-hero-visual, body.editorial .service-hero-visual{ max-width:380px; margin:0 auto; } } @media (max-width:560px){ body.editorial .editorial-meta{ grid-template-columns:1fr } body.editorial .editorial-meta > div + div{ border-left:none; border-top:1px solid var(--editorial-accent-soft); padding:18px 0 0; margin-top:18px; } } @media (prefers-reduced-motion: reduce){ body.editorial .editorial-hero::before, body.editorial .editorial-hero::after, body.editorial .editorial-hero-visual, body.editorial .service-hero-visual{ animation:none !important } } /* Section h2 — editorial serif */ body.editorial .service-section h2{ font-family:var(--serif); font-size:clamp(2rem, 4vw, 3.1rem); line-height:1.1; font-weight:500; letter-spacing:-0.018em; color:var(--teal-900); margin-bottom:20px; } body.editorial .service-section h2 em{ font-style:italic; color:var(--editorial-accent); font-weight:500; } body.editorial .service-section .lede{ font-size:1.1rem; line-height:1.72; max-width:720px; color:var(--ink-soft); } /* Hide the existing eyebrow inside service-hero when we have an editorial chapter (the chapter mark replaces it). We keep eyebrows on other sections (proc-cards still benefit). */ body.editorial .service-hero .eyebrow{ display:none } /* Trust band — 4-credential strip */ body.editorial .trust-band{ padding:50px 0; background:#fff; border-top:1px solid var(--editorial-accent-soft); border-bottom:1px solid var(--editorial-accent-soft); } body.editorial .trust-band-inner{ display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; align-items:center; } body.editorial .trust-item{ text-align:center; padding:6px } body.editorial .trust-item i{ font-size:1.5rem; color:var(--editorial-accent); margin-bottom:10px; } body.editorial .trust-item strong{ display:block; font-family:var(--serif); font-size:1.1rem; color:var(--teal-900); font-weight:600; margin-bottom:4px; } body.editorial .trust-item span{ display:block; font-size:0.78rem; color:var(--ink-soft); letter-spacing:0.04em; line-height:1.4; } /* Premium final CTA panel */ body.editorial .premium-cta{ padding:110px 0; text-align:center; background:linear-gradient(135deg, var(--teal-900) 0%, var(--brand-teal) 60%, var(--editorial-accent) 100%); color:#fff; position:relative; overflow:hidden; } body.editorial .premium-cta::before, body.editorial .premium-cta::after{ content:""; position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.16) 0%, transparent 70%); pointer-events:none; } body.editorial .premium-cta::before{ width:520px; height:520px; top:-180px; right:-160px } body.editorial .premium-cta::after{ width:380px; height:380px; bottom:-140px; left:-120px } body.editorial .premium-cta .container{ position:relative; z-index:2 } body.editorial .premium-cta h2{ font-family:var(--serif); color:#fff; font-size:clamp(2.4rem, 5vw, 4rem); line-height:1.05; font-weight:500; margin-bottom:24px; } body.editorial .premium-cta h2 em{ font-style:italic; color:var(--editorial-accent-bg); font-weight:500; } body.editorial .premium-cta p{ color:rgba(255,255,255,0.88); font-size:1.1rem; max-width:640px; margin:0 auto 36px; line-height:1.7; } body.editorial .premium-cta .btn-primary{ background:#fff; color:var(--teal-900); font-weight:700; box-shadow:0 18px 36px -8px rgba(0,0,0,0.25); } body.editorial .premium-cta .btn-primary:hover{ background:var(--mint-50); transform:translateY(-3px); } body.editorial .premium-cta .btn-ghost{ background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.4); color:#fff; } body.editorial .premium-cta .btn-ghost:hover{ background:rgba(255,255,255,0.18); transform:translateY(-2px); } /* Sticky floating book button */ body.editorial .sticky-book-cta{ position:fixed; bottom:28px; right:28px; z-index:50; padding:14px 24px; border-radius:999px; background:linear-gradient(135deg, var(--editorial-accent) 0%, var(--editorial-accent-deep) 100%); color:#fff; font-family:'Inter', sans-serif; font-weight:700; font-size:0.9rem; text-decoration:none; box-shadow:0 18px 36px -10px rgba(231,121,107,0.55); transform:translateY(140px); opacity:0; transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease, box-shadow .3s ease; display:inline-flex; align-items:center; gap:10px; } body.editorial .sticky-book-cta.is-visible{ transform:translateY(0); opacity:1 } body.editorial .sticky-book-cta:hover{ box-shadow:0 24px 48px -10px rgba(231,121,107,0.65); transform:translateY(-3px) !important; } /* Editorial responsive */ @media (max-width:980px){ body.editorial .trust-band-inner{ grid-template-columns:repeat(2, 1fr); gap:30px 20px } } @media (max-width:560px){ body.editorial .trust-band-inner{ grid-template-columns:1fr } body.editorial .sticky-book-cta{ right:16px; bottom:16px; padding:12px 18px; font-size:0.82rem } body.editorial .sticky-book-cta span{ display:none } /* icon-only on tiny screens */ body.editorial .sticky-book-cta::after{ content:"Book" } } @media (prefers-reduced-motion: reduce){ body.editorial .sticky-book-cta{ transition:none !important } } /* ============================================================ MEDICARE BULK-BILLING BADGE - .medicare-badge — full stacked version (hero / trust spots) - .medicare-badge-mini — compact horizontal lockup (footer) Official Medicare palette: green #006B3F, yellow #FFC72C ============================================================ */ .medicare-badge{ --mb-green:#006B3F; --mb-yellow:#FFC72C; --mb-yellow-soft:#FFE08A; position:relative; display:inline-block; padding:24px; background:#fff; border:8px solid var(--mb-yellow-soft); border-radius:14px; max-width:380px; text-align:left; box-shadow:0 18px 36px -16px rgba(0,107,63,0.25); } .medicare-badge .mb-line-1{ display:block; font-family:'Inter', sans-serif; font-weight:800; font-size:clamp(1.8rem, 3vw, 2.4rem); letter-spacing:-0.02em; color:var(--mb-green); line-height:1; margin-bottom:14px; } .medicare-badge .mb-medicare-pill{ display:inline-block; padding:6px 18px 8px; background:var(--mb-green); color:var(--mb-yellow); font-family:'Inter', sans-serif; font-weight:600; font-style:italic; font-size:clamp(1.5rem, 2.4vw, 2rem); line-height:1; letter-spacing:-0.01em; margin-bottom:10px; } .medicare-badge .mb-bulk-pill{ display:block; padding:14px 18px; background:var(--mb-yellow); color:var(--mb-green); font-family:'Inter', sans-serif; font-weight:800; font-size:clamp(1.6rem, 2.7vw, 2.2rem); line-height:1.05; letter-spacing:-0.02em; } /* Section that wraps the badge — gives breathing room when used standalone */ .medicare-badge-section{ padding:70px 0; background:linear-gradient(180deg, #fff 0%, var(--mint-50) 100%); text-align:center; } .medicare-badge-section .badge-prelude{ font-family:'Inter', sans-serif; font-size:0.74rem; letter-spacing:0.32em; text-transform:uppercase; color:var(--mb-green); font-weight:700; margin-bottom:24px; } .medicare-badge-section .badge-postlude{ margin-top:24px; font-size:0.95rem; color:var(--ink-soft); max-width:540px; margin-left:auto; margin-right:auto; line-height:1.65; } /* Compact horizontal lockup — for footer / inline trust use */ .medicare-badge-mini{ --mb-green:#006B3F; --mb-yellow:#FFC72C; display:inline-flex; align-items:center; gap:0; background:#fff; border:3px solid var(--mb-yellow); border-radius:8px; overflow:hidden; font-family:'Inter', sans-serif; font-size:0.78rem; font-weight:700; line-height:1; letter-spacing:0.02em; text-decoration:none; box-shadow:0 4px 12px -4px rgba(0,107,63,0.25); } .medicare-badge-mini .mbm-left{ background:var(--mb-green); color:var(--mb-yellow); padding:10px 14px; font-style:italic; } .medicare-badge-mini .mbm-right{ background:var(--mb-yellow); color:var(--mb-green); padding:10px 14px; } @media (max-width:520px){ .medicare-badge{ max-width:300px; padding:18px } .medicare-badge-mini{ font-size:0.7rem } } /* ============================================================ HOMEPAGE PREMIUM ANIMATION LAYER Scoped to body.editorial so other pages aren't affected. ============================================================ */ /* 1) Scroll-progress bar at top of viewport */ .scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg, var(--coral), var(--sunny), var(--coral)); background-size:200% 100%; z-index:9999; pointer-events:none; transition:width .12s ease-out; box-shadow:0 0 8px rgba(231,121,107,0.55); animation:gradientShift 4s linear infinite; } @keyframes gradientShift{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} } /* 2) Count-up stat numbers (homepage about-stats) */ /* When the counter is mid-animation, give a soft pulse and accent glow */ .stat .num{ display:inline-block; transition:transform .25s ease; } .stat .num.counting{ animation:countPulse 0.6s ease-in-out infinite alternate; text-shadow:0 0 24px rgba(255,138,107,0.18); } @keyframes countPulse{ 0% { transform:scale(1) } 100% { transform:scale(1.04) } } .stat .num.counted{ animation:numLand .85s cubic-bezier(.2,1.4,.4,1); } @keyframes numLand{ 0% { transform:scale(1.18); text-shadow:0 0 40px rgba(255,138,107,0.35) } 60% { transform:scale(0.96) } 100% { transform:scale(1); text-shadow:0 0 0 rgba(255,138,107,0) } } /* About-stats container — cards lift in with staggered delay */ .about-stats .stat{ opacity:0; transform:translateY(24px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); } .about-stats.in .stat, .about-stats .stat.in{ opacity:1; transform:translateY(0); } .about-stats .stat:nth-child(1){ transition-delay:0ms } .about-stats .stat:nth-child(2){ transition-delay:160ms } .about-stats .stat:nth-child(3){ transition-delay:320ms } @media (prefers-reduced-motion: reduce){ .about-stats .stat{ opacity:1 !important; transform:none !important } .stat .num{ animation:none !important; text-shadow:none !important } } /* 3) Hero CTA — gentle pulsing glow on the primary book button */ body.editorial .hero .btn-primary, body.editorial .premium-cta .btn-primary{ position:relative; animation:ctaPulse 3.4s cubic-bezier(.4,0,.6,1) infinite; } @keyframes ctaPulse{ 0%, 100% { box-shadow:0 14px 30px -12px rgba(46,98,103,0.55), 0 0 0 0 rgba(231,121,107,0.0) } 50% { box-shadow:0 14px 30px -12px rgba(46,98,103,0.55), 0 0 0 14px rgba(231,121,107,0.18) } } /* 4) Card 3D hover tilt — service cards, doctor cards, allied cards */ body.editorial .service-card, body.editorial .doc-card, body.editorial .allied-card, body.editorial .blog-card{ perspective:1000px; transform-style:preserve-3d; } body.editorial .service-card:hover, body.editorial .doc-card:hover, body.editorial .allied-card:hover, body.editorial .blog-card:hover{ transform:perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-6px); transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .35s ease; } /* 5) Hero photo slow zoom — never-ending Ken Burns effect */ body.editorial .hero-photo{ animation:slowKenBurns 18s cubic-bezier(.4,0,.6,1) infinite alternate; } @keyframes slowKenBurns{ 0% { transform:scale(1) rotate(0deg) } 100% { transform:scale(1.04) rotate(-0.4deg) } } /* 6) Hero floating cards — gentle alternating drift */ body.editorial .hero-float-card{ animation:floatGentle 6s ease-in-out infinite; } body.editorial .hero-float-card.fc-2{ animation-delay:-2s; animation-duration:7s } body.editorial .hero-float-card.fc-3{ animation-delay:-4s; animation-duration:8s } @keyframes floatGentle{ 0%, 100% { transform:translateY(0) } 50% { transform:translateY(-8px) } } /* 7) Chapter mark numbered disc — subtle entrance bounce */ body.editorial .chapter-mark.in .num, body.editorial .reveal.in .chapter-mark .num{ animation:discBounce .8s cubic-bezier(.2,.8,.2,1); } @keyframes discBounce{ 0% { transform:scale(0.6) rotate(-15deg); opacity:0 } 60% { transform:scale(1.08) rotate(2deg); opacity:1 } 100% { transform:scale(1) rotate(0); opacity:1 } } /* 8) Headline letter-stagger — sweeps left to right on entry */ body.editorial .hero h1 em, body.editorial .editorial-hero h1 em{ background-image:linear-gradient(90deg, var(--coral) 0%, var(--coral) 50%, var(--editorial-accent) 100%); background-size:200% 100%; background-position:100% 0; -webkit-background-clip:text; background-clip:text; animation:hueShift 6s ease-in-out infinite alternate; } @keyframes hueShift{ 0% { background-position:100% 0 } 100% { background-position:0% 0 } } /* 9) Allied / Service icon — gentle rotation on hover */ body.editorial .service-card .service-icon, body.editorial .allied-card .allied-card-photo, body.editorial .doc-pill{ transition:transform .5s cubic-bezier(.2,.8,.2,1); } body.editorial .service-card:hover .service-icon{ transform:rotate(-8deg) scale(1.12); } /* 10) Booking-strip items — tiny pulse to keep the strip alive */ body.editorial .strip-icon{ animation:iconBreathe 4s ease-in-out infinite; } body.editorial .strip-item:nth-child(2) .strip-icon{ animation-delay:-1s } body.editorial .strip-item:nth-child(3) .strip-icon{ animation-delay:-2s } body.editorial .strip-item:nth-child(4) .strip-icon{ animation-delay:-3s } @keyframes iconBreathe{ 0%, 100% { transform:scale(1) } 50% { transform:scale(1.06) } } /* 11) Stat numbers when revealed — counter animation companion */ body.editorial .about-stats .stat{ transition:transform .5s cubic-bezier(.2,.8,.2,1); } body.editorial .about-stats .stat:hover{ transform:translateY(-4px); } /* 12) Section soft-line entrance — fade in from below */ body.editorial section .container > h2, body.editorial section .container > .section-head h2{ transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); } /* 13) Photo slider — subtle Ken Burns on the active slide image */ .slider .slide.is-active img{ animation:slowKenBurns 12s cubic-bezier(.4,0,.6,1) infinite alternate; } /* 14) Marquee speed up on hover (pause on hover is more luxurious) */ body.editorial .topbar:hover .topbar-track{ animation-play-state:paused; } /* 15) Premium tagline shimmer on h1 em — runs once on load */ body.editorial .hero h1 em::before{ content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; animation:shimmerOnce 2.5s cubic-bezier(.4,0,.2,1) 0.6s 1 forwards; pointer-events:none; } @keyframes shimmerOnce{ 0% { background-position:200% 0 } 100% { background-position:-100% 0 } } /* 16) Photo slider dots — gentle pulse on the active one */ .slider-dots button[aria-selected="true"]{ animation:activeDotPulse 2.4s ease-in-out infinite; } @keyframes activeDotPulse{ 0%, 100% { box-shadow:0 0 0 0 rgba(255,255,255,0.4) } 50% { box-shadow:0 0 0 6px rgba(255,255,255,0) } } /* 17) Allied/Doctor card photo zoom — image scales on hover */ body.editorial .doc-card .doc-photo img, body.editorial .allied-card-photo img, body.editorial .blog-card .blog-img, body.editorial .blog-card{ transition:transform .55s cubic-bezier(.2,.8,.2,1); } body.editorial .doc-card:hover .doc-photo img, body.editorial .allied-card:hover .allied-card-photo img, body.editorial .blog-card:hover .blog-img{ transform:scale(1.06); } /* 18) Decorative blob slow drift (background ovals on hero / sections) */ body.editorial .hero::before, body.editorial .hero::after, body.editorial .services::before, body.editorial .services::after{ animation:slowDrift 24s ease-in-out infinite; } body.editorial .hero::after{ animation-delay:-8s; animation-duration:30s } body.editorial .services::after{ animation-delay:-12s } @keyframes slowDrift{ 0%, 100% { transform:translate(0, 0) } 33% { transform:translate(20px, -15px) } 66% { transform:translate(-15px, 10px) } } /* 19) Honor reduced-motion — disable every new animation */ @media (prefers-reduced-motion: reduce){ .scroll-progress, body.editorial .hero .btn-primary, body.editorial .premium-cta .btn-primary, body.editorial .hero-photo, body.editorial .hero-float-card, body.editorial .hero h1 em, body.editorial .strip-icon, body.editorial .service-card:hover, body.editorial .doc-card:hover, body.editorial .allied-card:hover, body.editorial .blog-card:hover, .slider .slide.is-active img, .slider-dots button[aria-selected="true"], body.editorial .hero::before, body.editorial .hero::after, body.editorial .services::before, body.editorial .services::after, body.editorial .chapter-mark .num{ animation:none !important; transition:none !important; } } /* ============================================================ WORDPRESS-SPECIFIC ADDITIONS ============================================================ */ /* Admin bar top-offset fix */ html.wp-toolbar header.site { top: 32px; } @media screen and (max-width: 782px) { html.wp-toolbar header.site { top: 46px; } } /* Header scrolled shadow */ header.site.scrolled { box-shadow: 0 4px 20px -8px rgba(46,98,103,0.18); } /* Mobile drawer */ .mobile-drawer { position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw); background: #fff; z-index: 100; transform: translateX(100%); transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -8px 0 40px -12px rgba(11,32,36,0.22); display: flex; flex-direction: column; overflow-y: auto; } .mobile-drawer.open { transform: translateX(0); } .mobile-overlay { position: fixed; inset: 0; z-index: 99; background: rgba(11,32,36,0.45); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; backdrop-filter: blur(3px); } .mobile-overlay.open { opacity: 1; pointer-events: auto; } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line); } .drawer-close { background: none; border: none; font-size: 1.4rem; color: var(--brand-teal); cursor: pointer; padding: 6px; border-radius: 50%; transition: background 0.2s; } .drawer-close:hover { background: var(--sage-soft); } .drawer-nav { flex: 1; padding: 16px 0; } .drawer-nav ul { list-style: none; padding: 0; margin: 0; } .drawer-nav li a { display: block; padding: 14px 28px; font-weight: 600; font-size: 1.05rem; color: var(--teal-900); border-bottom: 1px solid var(--line); transition: background 0.2s, padding-left 0.2s; } .drawer-nav li a:hover { background: var(--sage-soft); padding-left: 36px; } .drawer-actions { padding: 24px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); } @media (max-width: 1024px) { nav.primary { display: none; } .menu-btn { display: block !important; } } @media (min-width: 1025px) { .mobile-drawer, .mobile-overlay { display: none !important; } } /* Breadcrumb */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--ink-soft); flex-wrap: wrap; } .breadcrumb a { color: var(--teal-700); font-weight: 500; } .breadcrumb a:hover { color: var(--teal-900); } .breadcrumb .sep { font-size: 0.6rem; opacity: 0.6; } /* Related grid */ .related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .related-card { background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); overflow: hidden; text-decoration: none; color: inherit; display: block; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease; } .related-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .related-card .r-image { aspect-ratio: 4/3; overflow: hidden; background: var(--sage-soft); } .related-card .r-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; } .related-card:hover .r-image img { transform: scale(1.06); } .related-card h4 { padding: 16px 20px 8px; font-size: 1rem; color: var(--teal-900); font-weight: 600; } .related-card p { padding: 0 20px 20px; font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; margin: 0; } @media (max-width: 900px) { .related-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .related-grid { grid-template-columns: 1fr; } } /* Stay connected section — light mint background matching HTML design */ .stay-connected { padding: 100px 0; background: linear-gradient(180deg, var(--mint-50) 0%, #fff 100%); position: relative; overflow: hidden; } .stay-head { text-align: center; max-width: 600px; margin: 0 auto 56px; } .stay-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-900); font-weight: 700; margin-bottom: 18px; } .stay-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-teal); display: inline-block; } .stay-title { font-family: var(--serif, 'Playfair Display', serif); font-size: clamp(2rem, 4vw, 3.2rem); color: var(--teal-900); font-weight: 500; line-height: 1.1; margin-bottom: 16px; } .stay-title em { font-style: italic; color: var(--editorial-accent, var(--coral)); } .stay-sub { color: var(--ink-soft); font-size: 1rem; line-height: 1.65; margin: 0; } .stay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 900px; margin: 0 auto; } .stay-card { border-radius: 28px; padding: 36px 32px; text-decoration: none; color: inherit; position: relative; overflow: hidden; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease; } .stay-card:hover { transform: translateY(-6px); } .stay-card-ig { background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #FCAF45 100%); box-shadow: 0 24px 48px -16px rgba(131,58,180,0.55); } .stay-card-fb { background: linear-gradient(135deg, #1877F2 0%, #0A52C4 100%); box-shadow: 0 24px 48px -16px rgba(24,119,242,0.55); } .stay-card-blob { position: absolute; border-radius: 50%; pointer-events: none; } .stay-card-blob-1 { width: 220px; height: 220px; top: -80px; right: -80px; background: rgba(255,255,255,0.08); } .stay-card-blob-2 { width: 160px; height: 160px; bottom: -60px; left: -40px; background: rgba(255,255,255,0.06); } .stay-card-icon { font-size: 2.2rem; color: #fff; margin-bottom: 20px; position: relative; z-index: 1; } .stay-card-body { position: relative; z-index: 1; } .stay-card-body h3 { color: #fff; font-size: 1.5rem; margin-bottom: 4px; } .stay-handle { color: rgba(255,255,255,0.75); font-size: 0.88rem; margin-bottom: 10px; } .stay-desc { color: rgba(255,255,255,0.82); font-size: 0.9rem; line-height: 1.55; margin-bottom: 0; } .stay-card-footer { margin-top: 28px; position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; } .stay-stats { display: flex; gap: 20px; } .stay-stat { text-align: center; } .stay-stat strong { display: block; color: #fff; font-size: 1.15rem; font-weight: 700; line-height: 1; } .stay-stat span { display: block; color: rgba(255,255,255,0.65); font-size: 0.72rem; margin-top: 3px; letter-spacing: 0.06em; } .stay-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 999px; background: rgba(255,255,255,0.16); color: #fff; font-size: 0.82rem; font-weight: 600; white-space: nowrap; border: 1px solid rgba(255,255,255,0.28); transition: background 0.25s; } .stay-card:hover .stay-btn { background: rgba(255,255,255,0.26); } @media (max-width: 680px) { .stay-grid { grid-template-columns: 1fr; } .stay-card { padding: 28px 24px; } } /* AHPRA disclaimer */ .ahpra-disclaimer { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.6; border-top: 1px solid var(--line); padding-top: 24px; } .ahpra-disclaimer strong { color: var(--ink); } .ahpra-disclaimer a { color: var(--teal-700); text-decoration: underline; } /* Footer */ footer { background: linear-gradient(180deg, var(--teal-900) 0%, var(--teal-800) 100%); color: rgba(255,255,255,0.82); padding: 80px 0 40px; } footer .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } footer h4 { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sage-light); font-weight: 700; margin-bottom: 20px; } footer .footer-brand p { font-size: 0.92rem; line-height: 1.65; margin: 14px 0 20px; } footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } footer li { font-size: 0.9rem; } footer li a, footer a { color: rgba(255,255,255,0.72); transition: color 0.2s; } footer li a:hover, footer a:hover { color: #fff; } footer .socials { display: flex; gap: 10px; } footer .socials a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.12); transition: background 0.25s, color 0.25s, transform 0.25s; } footer .socials a:hover { background: rgba(255,255,255,0.18); color: #fff; transform: translateY(-2px); } footer .ack { font-size: 0.78rem; color: rgba(255,255,255,0.45); line-height: 1.6; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 28px; margin-bottom: 20px; } footer .footer-bottom { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: rgba(255,255,255,0.45); flex-wrap: wrap; gap: 10px; } footer .footer-bottom a { color: rgba(255,255,255,0.55); } footer .footer-bottom a:hover { color: #fff; } @media (max-width: 900px) { footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 560px) { footer .footer-grid { grid-template-columns: 1fr; } } /* Entry content typography */ .entry-content h2 { margin: 2em 0 0.7em; } .entry-content h3 { margin: 1.6em 0 0.5em; } .entry-content p { margin-bottom: 1.2em; } .entry-content ul, .entry-content ol { padding-left: 1.5em; margin-bottom: 1.2em; } .entry-content li { margin-bottom: 0.4em; } .entry-content blockquote { border-left: 4px solid var(--brand-teal); padding: 16px 24px; margin: 28px 0; background: var(--sage-soft); border-radius: 0 8px 8px 0; font-style: italic; } .entry-content a { color: var(--teal-700); text-decoration: underline; } .entry-content img { border-radius: 12px; margin: 24px 0; } /* Service section */ .service-section { padding: 90px 0; } .service-section.alt { background: var(--mint-50) !important; } .service-section h2 em { font-style: italic; color: var(--editorial-accent, var(--brand-teal)); } /* FAQ */ details.faq-item summary { list-style: none; } details.faq-item summary::-webkit-details-marker { display: none; } details.faq-item summary::after { content: '+'; float: right; font-size: 1.3rem; color: var(--editorial-accent, var(--brand-teal)); line-height: 1; margin-left: 12px; transition: transform 0.25s ease; } details.faq-item[open] summary::after { transform: rotate(45deg); } /* Nav dropdown — immediate show, small delay before hiding to prevent lag */ li.has-dropdown { position: relative; } .nav-caret { font-size: 0.6rem; transition: transform 0.25s ease; vertical-align: middle; } li.has-dropdown:hover .nav-caret { transform: rotate(180deg); } li.has-dropdown .nav-dropdown { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 260px; background: #fff; border-radius: 16px; padding: 10px 0; box-shadow: 0 24px 60px -16px rgba(11,32,36,0.22); border: 1px solid var(--line); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease 0s, transform 0.18s ease 0s, visibility 0s ease 0.18s; z-index: 200; } li.has-dropdown:hover .nav-dropdown, li.has-dropdown.open .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition: opacity 0.18s ease 0s, transform 0.18s ease 0s, visibility 0s ease 0s; } .nav-dropdown-inner { padding: 8px 0; } .nav-dropdown-inner h5 { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; padding: 8px 20px 4px; } .nav-dropdown-inner a { display: block; padding: 9px 20px; font-size: 0.9rem; color: var(--teal-900); font-weight: 500; transition: background 0.18s, padding-left 0.18s; } .nav-dropdown-inner a:hover { background: var(--sage-soft); padding-left: 26px; } .nav-dropdown-footer { border-top: 1px solid var(--line); padding: 10px 20px 4px; margin-top: 4px; } .nav-dropdown-footer a { font-size: 0.85rem; font-weight: 600; color: var(--teal-700); } .nav-dropdown.nav-dropdown-narrow { min-width: 210px; } /* Info callout */ .info-callout { border-radius: 10px; padding: 18px 22px; margin: 20px 0; } .info-callout.warn { background: var(--sunny-bg); border-left: 4px solid var(--sunny); } .info-callout.info { background: var(--sky-bg); border-left: 4px solid var(--sky); } /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; } /* ============================================================ SERVICE PAGE COMPONENTS Ported from static HTML assets/styles.css ============================================================ */ /* Anchor offset for sticky header */ section[id] { scroll-margin-top: 100px; } /* Sub-nav (sticky anchor pill bar) */ .service-subnav { background: #fff; padding: 18px 0; border-bottom: 1px solid var(--line); position: sticky; top: 96px; z-index: 40; box-shadow: 0 4px 18px -8px rgba(46,98,103,0.12); } .service-subnav-inner { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .service-subnav-inner a { padding: 9px 18px; border-radius: 999px; background: var(--mint-50, #f0faf5); color: var(--brand-teal, #0f6b7b); font-size: 0.86rem; font-weight: 600; transition: all 0.25s ease; white-space: nowrap; text-decoration: none; } .service-subnav-inner a:hover { background: var(--coral-bg, #fff0ed); color: var(--coral, #e7796b); } @media (max-width: 600px) { .service-subnav { top: 60px; padding: 12px 0; } .service-subnav-inner a { font-size: 0.8rem; padding: 7px 14px; } } /* Steps / process list */ .steps { display: grid; gap: 18px; margin: 32px 0; counter-reset: step; } .step { background: #fff; padding: 24px 28px; border-radius: var(--r-md, 14px); border: 1px solid var(--line, #e6ece8); display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: flex-start; counter-increment: step; } .step::before { content: counter(step); width: 44px; height: 44px; border-radius: 14px; background: var(--grad-teal, linear-gradient(135deg, #0f6b7b, #1a9bb5)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; } .step h3 { font-size: 1.15rem; margin: 0 0 6px; line-height: 1.25; } .step p { font-size: 0.96rem; line-height: 1.65; color: var(--ink-soft, #5a6b60); margin: 0; } /* Procedure / sub-service card grid */ .proc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 40px; } .proc-card { background: #fff; padding: 0 28px 28px; border-radius: var(--r-md, 14px); border: 1.5px solid var(--line, #e6ece8); transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; overflow: hidden; } .proc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -12px rgba(46,98,103,0.22); border-color: var(--coral-soft, #f4c7bf); } .proc-card h3 { font-size: 1.2rem; line-height: 1.25; margin: 18px 0 10px; } .proc-card .proc-image { width: calc(100% + 56px); margin: 0 -28px 22px; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--mint-50, #f0faf5) 0%, var(--mint-100, #d9f1e4) 100%); border-bottom: 1px solid var(--line, #e6ece8); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .proc-card .proc-image::before { content: "\f03e"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.8rem; color: rgba(15,107,123,0.28); pointer-events: none; } .proc-card .proc-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .proc-card .proc-image img[src=""], .proc-card .proc-image img:not([src]) { display: none; } .proc-card p { font-size: 0.96rem; line-height: 1.65; color: var(--ink-soft, #5a6b60); margin-bottom: 12px; } .proc-card ul { list-style: none; margin: 12px 0; padding: 0; } .proc-card ul li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: 0.92rem; } .proc-card ul li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--sage-deep, #3a8050); font-size: 0.78rem; margin-top: 5px; flex-shrink: 0; } /* Eligibility / comparison table */ .elig-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--r-md, 14px); overflow: hidden; border: 1px solid var(--line, #e6ece8); margin: 30px 0; } .elig-table th, .elig-table td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--line, #e6ece8); font-size: 0.96rem; vertical-align: top; } .elig-table th { background: var(--mint-50, #f0faf5); font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-weight: 700; color: var(--teal-900, #0b2024); font-size: 0.92rem; } .elig-table tbody tr:last-child th, .elig-table tbody tr:last-child td { border-bottom: none; } .elig-table .check { color: var(--sage-deep, #3a8050); font-weight: 700; } .elig-table .cross { color: var(--coral, #e7796b); font-weight: 700; } .elig-table .free { display: inline-block; padding: 2px 10px; background: var(--sage-soft, #e4f0e8); color: var(--brand-teal, #0f6b7b); border-radius: 999px; font-size: 0.78rem; font-weight: 700; } @media (max-width: 640px) { .elig-table th, .elig-table td { padding: 12px 14px; font-size: 0.88rem; } } /* FAQ accordion */ .faq { display: grid; gap: 14px; max-width: 860px; margin: 0 auto; } .faq details { background: #fff; border-radius: var(--r-md, 14px); border: 1px solid var(--line, #e6ece8); overflow: hidden; transition: box-shadow 0.3s ease, border-color 0.3s ease; } .faq details:hover { box-shadow: 0 6px 18px -6px rgba(46,98,103,0.14); border-color: var(--sage-light, #8fb8aa); } .faq details[open] { border-color: var(--coral-soft, #f4c7bf); box-shadow: 0 6px 18px -6px rgba(231,121,107,0.15); } .faq summary { list-style: none; cursor: pointer; padding: 22px 26px; font-weight: 600; font-family: 'Bricolage Grotesque', 'Inter', sans-serif; color: var(--teal-900, #0b2024); font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 18px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "\f067"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--coral, #e7796b); font-size: 0.85rem; transition: transform 0.3s ease; flex-shrink: 0; } .faq details[open] summary::after { content: "\f068"; } .faq .faq-body { padding: 0 26px 24px; color: var(--ink-soft, #5a6b60); line-height: 1.7; } .faq .faq-body p { margin-bottom: 10px; } .faq .faq-body p:last-child { margin-bottom: 0; } /* Pricing fees callout */ .fee-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--sage-soft, #e4f0e8); color: var(--brand-teal, #0f6b7b); font-size: 0.82rem; font-weight: 700; } .fee-pill.private { background: var(--sunny-bg, #fffbeb); color: #B07815; } /* Mid-section CTA strip */ .mid-cta { padding: 40px 0; background: var(--mint-50, #f0faf5); border-top: 1px solid var(--line, #e6ece8); border-bottom: 1px solid var(--line, #e6ece8); } .mid-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .mid-cta-text { font-family: var(--serif, 'Playfair Display', serif); font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--teal-900, #0b2024); font-weight: 500; } .mid-cta-text em { font-style: italic; color: var(--editorial-accent, var(--brand-teal, #0f6b7b)); } @media (max-width: 640px) { .mid-cta-inner { flex-direction: column; text-align: center; } } /* ============================================================ SERVICES PAGE — .svc-card grid, quick-jump, section styles Ported from services.html + assets/styles.css ============================================================ */ /* Services grid layout */ .services-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; margin-top: 40px; } /* Individual service card */ .svc-card { background: #fff; border-radius: var(--r-md, 14px); border: 1.5px solid var(--line, #e6ece8); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.35s ease; } .svc-card:hover { transform: translateY(-6px); box-shadow: 0 24px 52px -18px rgba(46, 98, 103, 0.26); border-color: var(--coral-soft, #f4c7bf); } /* Card image area */ .svc-image { width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--mint-50, #f0faf5) 0%, var(--mint-100, #d9f1e4) 100%); border-bottom: 1px solid var(--line, #e6ece8); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .svc-image::before { content: "\f0fa"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 2rem; color: rgba(15, 107, 123, 0.22); pointer-events: none; } .svc-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); } .svc-image img[src=""], .svc-image img:not([src]) { display: none; } .svc-card:hover .svc-image img { transform: scale(1.05); } .svc-card h3 { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--teal-900, #0b2024); margin: 20px 22px 8px; line-height: 1.25; } .svc-card p { font-size: 0.88rem; line-height: 1.6; color: var(--ink-soft, #5a6b60); margin: 0 22px 14px; flex: 1; } .svc-more { display: inline-flex; align-items: center; gap: 7px; padding: 10px 22px; border-top: 1px solid var(--line, #e6ece8); font-size: 0.82rem; font-weight: 700; color: var(--editorial-accent, var(--brand-teal)); letter-spacing: 0.03em; transition: color 0.2s ease, gap 0.2s ease; margin-top: auto; } .svc-card:hover .svc-more { gap: 11px; } /* Section wrapper for medical / allied health grids */ .svc-section { padding: 90px 0; } /* Section heading area */ .svc-section-head { max-width: 720px; } .svc-section-head p { font-size: 1rem; line-height: 1.7; color: var(--ink-soft); margin-top: 10px; } /* Quick-jump dropdown box */ .services-jump { padding: 40px 0; background: #fff; border-bottom: 1px solid var(--line); } .services-jump-card { display: flex; align-items: center; gap: 18px; padding: 18px 24px; background: var(--mint-50, #f0faf5); border: 1.5px solid var(--line, #e6ece8); border-radius: var(--r-md, 14px); max-width: 680px; flex-wrap: wrap; } .services-jump-card label { font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--teal-900); display: flex; align-items: center; gap: 8px; white-space: nowrap; } .services-jump-card select { flex: 1; padding: 12px 18px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; font-family: 'Inter', sans-serif; font-size: 0.92rem; color: var(--teal-900); cursor: pointer; transition: border-color 0.2s ease; min-width: 220px; } .services-jump-card select:focus { outline: none; border-color: var(--brand-teal); } @media (max-width: 760px) { .services-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .services-cards { grid-template-columns: 1fr; } } @media (max-width: 600px) { .services-jump-card { flex-direction: column; align-items: flex-start; } } /* ============================================================ THEME-PINK — Women's Health rose palette Matches womens-health.html inline