/* ========================================================= Dr. Kavya P — Fertility & IVF Specialist, Chennai "Bloom" design system — organic warmth meets clinical precision. Signature: living gradient blooms + petal-cut portrait + growth-line dividers, echoing the brand's own lotus mark. Built so the same classes that already exist across every page pick up the new look. ========================================================= */ :root{ --cream:#FFFBF6; --cream-deep:#FCF1E7; --bg-tint:#FCEEF4; --mint-tint:#EAF8F3; --ink:#241525; --ink-soft:#6E5F71; --ink-faint:#9C8FA0; --wine:#A6225F; --wine-deep:#7A1A43; --wine-light:#CB5089; --teal:#0FA0B5; --teal-deep:#0B6E7E; --teal-light:#5FC9D6; --gold:#E3A53E; --gold-light:#F4CD84; --blush:#FCE1EE; --mint:#E3F7F1; --plum:#2C1430; --plum-deep:#1B0E1F; --line:rgba(36,21,37,.10); --line-soft:rgba(36,21,37,.06); --white:#FFFFFF; --grad-bloom: radial-gradient(at 22% 24%, rgba(166,34,95,.50), transparent 58%), radial-gradient(at 82% 18%, rgba(227,165,62,.40), transparent 55%), radial-gradient(at 70% 82%, rgba(15,160,181,.42), transparent 58%), radial-gradient(at 15% 85%, rgba(203,80,137,.30), transparent 55%); --grad-cta: linear-gradient(135deg,#B22968 0%, #7A1A43 60%, #41122E 100%); --grad-gold: linear-gradient(120deg, var(--gold), var(--wine-light)); --grad-text: linear-gradient(100deg, var(--wine) 10%, var(--wine-light) 45%, var(--gold) 80%); --font-serif:"Fraunces","Iowan Old Style","Georgia",serif; --font-display:"Plus Jakarta Sans","Segoe UI",Arial,sans-serif; --font-sans:"Inter","Segoe UI",Arial,sans-serif; --radius:26px; --radius-sm:16px; --radius-lg:34px; --radius-btn:100px; --shadow:0 22px 48px -26px rgba(44,20,48,.30); --shadow-lg:0 34px 70px -30px rgba(44,20,48,.38); --shadow-wine:0 18px 40px -18px rgba(166,34,95,.45); --container:1180px; --ease:cubic-bezier(.22,.85,.32,1); /* Back-compat aliases — some inline styles in page content still reference the original token names. Keep both working. */ --sans: var(--font-sans); --display: var(--font-display); } /* ---------- Dark mode (toggled via [data-theme="dark"] on ) ---------- */ [data-theme="dark"]{ --cream:#181016; --cream-deep:#1F1620; --bg-tint:#231A27; --mint-tint:#16201E; --ink:#F3EAF1; --ink-soft:#C6B8C6; --ink-faint:#8E7F90; --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.07); --white:#241A26; --blush:#3A2434; --mint:#16332E; } [data-theme="dark"] body{background:var(--cream);} [data-theme="dark"] .site-header{background:rgba(24,16,22,.7);} [data-theme="dark"] .site-header.scrolled{background:rgba(24,16,22,.92);} [data-theme="dark"] .card,[data-theme="dark"] .testi-card,[data-theme="dark"] .step, [data-theme="dark"] .blog-card,[data-theme="dark"] .toc,[data-theme="dark"] .faq-item, [data-theme="dark"] .about-mini-photo,[data-theme="dark"] .page-hero-icon{ background:var(--white);box-shadow:0 24px 50px -28px rgba(0,0,0,.6); } [data-theme="dark"] img{filter:brightness(.92) saturate(1.05);} [data-theme="dark"] .hero::after{opacity:.6;} [data-theme="dark"] .scroll-progress{background:rgba(255,255,255,.08);} html{transition:background-color .4s ease;} body{transition:background-color .4s ease, color .4s ease;} *{box-sizing:border-box;} html{scroll-behavior:smooth;overflow-x:hidden;} body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--font-sans); font-size:16.5px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;} ::selection{background:var(--blush);color:var(--wine-deep);} h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.16; margin:0 0 .5em; color:var(--ink); letter-spacing:-.015em; } h1{font-family:var(--font-serif);font-size:clamp(2.4rem,4.6vw,3.8rem);font-weight:600;letter-spacing:-.01em;} h2{font-size:clamp(1.7rem,2.9vw,2.35rem);font-weight:700;} h3{font-size:1.2rem;font-weight:700;} p{margin:0 0 1em;color:var(--ink-soft);} .em{ font-style:italic;font-weight:600;font-family:var(--font-serif); background:var(--grad-text);background-size:200% 100%; -webkit-background-clip:text;background-clip:text;color:transparent; animation:shimmer 6s ease-in-out infinite; } @media(prefers-reduced-motion:reduce){.em{animation:none;}} .container{max-width:var(--container);margin:0 auto;padding:0 24px;} .section{padding:96px 0;position:relative;} .section-tight{padding:56px 0;} .section-alt{background:var(--bg-tint);} .section-mint{background:var(--mint-tint);} .section-dark{background:linear-gradient(160deg,var(--plum),var(--plum-deep));color:#EFE6EF;} .section-dark h2,.section-dark h3{color:#FFFFFF;} .section-dark p{color:#D6C7D8;} @media(max-width:760px){ .container{padding:0 18px;} .section{padding:62px 0;} .section-tight{padding:40px 0;} } @media(max-width:420px){.container{padding:0 14px;}} .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-family:var(--font-display);font-size:.74rem;letter-spacing:.13em; text-transform:uppercase;color:var(--wine);font-weight:700; margin-bottom:16px;padding:5px 14px 5px 6px;border-radius:100px; background:var(--blush); } .eyebrow::before{ content:"";width:7px;height:7px;border-radius:50%; background:var(--grad-gold);display:inline-block; box-shadow:0 0 0 4px rgba(227,165,62,.22); } .lede{font-size:1.14rem;max-width:640px;} .center{text-align:center;margin-left:auto;margin-right:auto;} .eyebrow.center{display:flex;width:fit-content;} @media(max-width:480px){ .eyebrow{font-size:.66rem;letter-spacing:.1em;padding:5px 12px 5px 6px;} } /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:15px 30px;border-radius:var(--radius-btn);font-weight:700;font-size:.95rem; border:1.5px solid transparent;cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s ease, color .3s ease; font-family:var(--font-display);position:relative;isolation:isolate;overflow:hidden; } .btn .ripple{ position:absolute;border-radius:50%;background:rgba(255,255,255,.55); transform:scale(0);opacity:0;pointer-events:none; animation:rippleOut .6s ease-out forwards; } .btn-outline .ripple{background:rgba(166,34,95,.18);} @keyframes rippleOut{to{transform:scale(2.6);opacity:0;}} @media(prefers-reduced-motion:reduce){.btn .ripple{display:none;}} @media(max-width:480px){ .btn-row{flex-direction:column;align-items:stretch;} .btn-row .btn{width:100%;} } .btn:active{transform:translateY(0) scale(.98);} .btn-primary{ background:var(--grad-cta);color:var(--white); box-shadow:0 16px 32px -14px rgba(166,34,95,.55); } .btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 40px -14px rgba(166,34,95,.6);} .btn-outline{border-color:var(--teal-deep);color:var(--teal-deep);background:transparent;} .btn-outline:hover{background:var(--teal-deep);color:#fff;transform:translateY(-3px);box-shadow:0 16px 30px -16px rgba(11,110,126,.45);} .btn-ghost-light{border-color:rgba(255,255,255,.55);color:#fff;} .btn-ghost-light:hover{background:rgba(255,255,255,.16);transform:translateY(-3px);} .btn-row{display:flex;gap:14px;flex-wrap:wrap;} .btn-sm{padding:10px 22px;font-size:.85rem;} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:50;background:rgba(255,251,246,.78); backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%); border-bottom:1px solid var(--line-soft); transition:box-shadow .3s,background .3s,padding .3s; } .site-header.scrolled{box-shadow:0 12px 32px -22px rgba(44,20,48,.35);background:rgba(255,251,246,.94);} .nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:var(--container);margin:0 auto;transition:padding .3s;} .site-header.scrolled .nav-wrap{padding:9px 24px;} .brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--ink);} .brand small{display:block;font-family:var(--font-sans);font-weight:600;font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);} .bloom{width:32px;height:32px;flex:none;transition:transform .4s var(--ease);filter:drop-shadow(0 4px 10px rgba(166,34,95,.3));} .brand:hover .bloom{transform:rotate(-12deg) scale(1.08);} .nav-links{display:flex;gap:30px;align-items:center;font-size:.93rem;font-weight:600;font-family:var(--font-display);} .nav-links a{position:relative;padding:6px 1px;color:var(--ink);} .nav-links a:hover{color:var(--wine);} .nav-links a::after{ content:"";position:absolute;left:50%;bottom:-2px;height:2px;width:0;border-radius:2px; background:var(--grad-gold);transition:width .3s var(--ease),left .3s var(--ease); } .nav-links a:hover::after{width:100%;left:0;} .nav-cta{display:flex;gap:10px;align-items:center;} .nav-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--wine);padding:8px;flex:none;} .nav-toggle-bars{display:block;width:22px;height:16px;position:relative;} .nav-toggle-bars span{ position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--ink); transition:transform .35s var(--ease), opacity .25s ease, top .35s var(--ease); } .nav-toggle-bars span:nth-child(1){top:0;} .nav-toggle-bars span:nth-child(2){top:7px;} .nav-toggle-bars span:nth-child(3){top:14px;} .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1){top:7px;transform:rotate(45deg);background:var(--wine);} .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2){opacity:0;} .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3){top:7px;transform:rotate(-45deg);background:var(--wine);} .has-dropdown{position:relative;} .dropdown{ position:absolute;top:118%;left:0;background:var(--white);min-width:250px; border-radius:18px;box-shadow:var(--shadow-lg);padding:10px;border:1px solid var(--line-soft); opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);transition:.25s var(--ease); } .has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0) scale(1);} .dropdown a{display:block;padding:10px 13px;border-radius:11px;font-size:.9rem;font-weight:500;transition:background .2s, color .2s, padding-left .2s;} .dropdown a:hover{background:var(--blush);color:var(--wine-deep);padding-left:17px;} @media(max-width:920px){ .nav-links{display:none;} .nav-toggle{display:block;} .nav-wrap{position:relative;flex-wrap:nowrap;gap:8px;} .brand{margin-right:auto;min-width:0;flex-shrink:1;} .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;} .nav-cta{display:flex;flex:none;} .nav-cta .btn-outline{display:none;} .nav-cta .btn-primary{padding:10px 16px;font-size:.8rem;white-space:nowrap;} .nav-toggle{flex:none;} .nav-wrap .nav-links{ display:block;position:absolute;top:100%;left:0;right:0; background:var(--white);border-bottom:1px solid var(--line); box-shadow:0 18px 30px -18px rgba(44,20,48,.25); max-height:0;overflow:hidden;opacity:0; transition:max-height .4s var(--ease), opacity .3s ease; } .nav-wrap.open .nav-links{ display:flex;flex-direction:column;gap:6px;padding:18px 24px 22px; align-items:flex-start;max-height:80vh;overflow-y:auto;opacity:1; } .nav-wrap.open .has-dropdown{width:100%;} .nav-wrap.open .dropdown{ position:static;opacity:1;visibility:visible;box-shadow:none;display:none; padding:6px 0 0 14px;border-left:2px solid var(--blush);margin-top:8px; } .nav-wrap.open .has-dropdown.open .dropdown{display:flex;flex-direction:column;gap:4px;} .nav-wrap.open .nav-links a{padding:9px 1px;width:100%;} } @media(max-width:480px){ .brand small{display:none;} .brand{font-size:1rem;} .nav-wrap{padding:12px 18px;} } @media(max-width:380px){ .brand span{display:none;} .bloom{width:30px;height:30px;} .nav-cta .btn-primary{padding:9px 13px;font-size:.76rem;} .nav-wrap{gap:6px;} } /* ---------- Ambient bloom field (injected by main.js, CSS-only fallback safe) ---------- */ .bloom-field{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;} .bloom-blob{ position:absolute;border-radius:42% 58% 65% 35% / 45% 45% 55% 55%; filter:blur(2px);opacity:.55;mix-blend-mode:normal; animation:blobMorph 16s ease-in-out infinite, blobDrift 22s ease-in-out infinite; will-change:transform,border-radius; } @keyframes blobMorph{ 0%,100%{border-radius:42% 58% 65% 35% / 45% 45% 55% 55%;} 33%{border-radius:62% 38% 40% 60% / 56% 62% 38% 44%;} 66%{border-radius:38% 62% 55% 45% / 40% 50% 50% 60%;} } @keyframes blobDrift{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(2.5%,-3%) scale(1.06);} } @keyframes shimmer{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}} @media(prefers-reduced-motion:reduce){.bloom-blob{animation:none;}} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;background:var(--cream);isolation:isolate;} .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center;padding:72px 24px 64px;max-width:var(--container);margin:0 auto;position:relative;z-index:2;} .hero-trust{display:grid;grid-template-columns:repeat(2,minmax(150px,1fr));gap:14px 22px;margin-top:34px;max-width:540px;} .hero-trust div{ font-size:.82rem;color:var(--ink-soft);padding:16px 16px 14px 18px; background:var(--white);border:1px solid var(--line-soft);border-radius:18px; position:relative;display:flex;flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s ease; } .hero-trust div:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent;} .hero-trust strong{display:block;font-family:var(--font-serif);font-size:1.55rem;color:var(--wine);font-weight:600;margin-bottom:2px;} .hero-trust-icon{ position:absolute;top:14px;right:14px;width:26px;height:26px;color:var(--gold);opacity:.85; } .hero-trust-icon svg{width:100%;height:100%;} @media(max-width:420px){.hero-trust{grid-template-columns:repeat(2,1fr);gap:10px 12px;}.hero-trust div{padding:13px 12px 11px 14px;}} .hero-art{position:relative;perspective:1200px;} /* Apple-style aurora mesh, slow drifting premium gradient wash behind hero content */ .hero::after{ content:"";position:absolute;inset:-10%;z-index:0;pointer-events:none; background: radial-gradient(38% 38% at 18% 12%, rgba(166,34,95,.16), transparent 70%), radial-gradient(34% 34% at 88% 8%, rgba(227,165,62,.16), transparent 70%), radial-gradient(40% 40% at 78% 88%, rgba(15,160,181,.16), transparent 70%); background-size:200% 200%; animation:auroraDrift 22s ease-in-out infinite; filter:blur(6px); } @keyframes auroraDrift{ 0%,100%{background-position:0% 0%,100% 0%,50% 100%;} 50%{background-position:30% 20%,70% 30%,30% 70%;} } @media(prefers-reduced-motion:reduce){.hero::after{animation:none;}} /* Rotating halo ring around the doctor portrait — premium "in orbit" feel */ .hero-art .doctor-photo-wrap{transform-style:preserve-3d;} .hero-art .doctor-photo-wrap::after{ content:"";position:absolute;inset:-16px;z-index:-1;border-radius:50%; background:conic-gradient(from 0deg, var(--wine), var(--gold), var(--teal), var(--wine-light), var(--wine)); opacity:.55;filter:blur(2px); -webkit-mask:radial-gradient(closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); mask:radial-gradient(closest-side, transparent calc(100% - 9px), #000 calc(100% - 8px)); animation:haloSpin 9s linear infinite; } @keyframes haloSpin{to{transform:rotate(360deg);}} @media(prefers-reduced-motion:reduce){.hero-art .doctor-photo-wrap::after{animation:none;}} @media(max-width:880px){ .hero-grid{grid-template-columns:1fr;padding-top:36px;} .hero-art{order:-1;max-width:300px;margin:0 auto;} } /* ---------- Cards / grids ---------- */ .grid{display:grid;gap:24px;} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} .grid-2{grid-template-columns:repeat(2,1fr);} @media(max-width:920px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}} @media(max-width:620px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}} .card{ background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius); padding:30px;transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease; position:relative;isolation:isolate;overflow:hidden; } .card::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px; background:var(--grad-gold);opacity:0;transition:opacity .4s ease; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none; } .card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);border-color:transparent;} .card:hover::before{opacity:1;} .card .icon-badge{ width:50px;height:50px;border-radius:42% 58% 65% 35% / 45% 45% 55% 55%;margin-bottom:18px; background:var(--blush);color:var(--wine);display:flex;align-items:center;justify-content:center; font-size:1.3rem;transition:border-radius .6s var(--ease), transform .35s var(--ease); } .card .icon-badge svg{width:24px;height:24px;} .card:hover .icon-badge{border-radius:62% 38% 40% 60% / 56% 62% 38% 44%;transform:rotate(-6deg) scale(1.08);} /* About-section supporting photo card (homepage "Fertility care that listens" block) */ .about-mini-photo{ position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:22px; box-shadow:var(--shadow-lg);isolation:isolate; } .about-mini-photo img{width:100%;height:240px;object-fit:cover;object-position:top center;display:block;transition:transform .6s var(--ease);} .about-mini-photo:hover img{transform:scale(1.04);} .about-mini-photo::after{ content:"";position:absolute;inset:0;background:linear-gradient(180deg, transparent 55%, rgba(36,21,37,.55) 100%); } .about-mini-badge{ position:absolute;left:18px;bottom:16px;z-index:1;color:#fff;font-family:var(--font-display); font-weight:700;font-size:.85rem;display:flex;align-items:center;gap:6px; background:rgba(255,255,255,.16);backdrop-filter:blur(6px);padding:7px 14px;border-radius:100px; border:1px solid rgba(255,255,255,.35); } .card h3{margin-bottom:9px;font-size:1.12rem;} .card p{margin-bottom:10px;font-size:.94rem;} .card a.more{font-size:.85rem;font-weight:700;color:var(--teal-deep);display:inline-flex;gap:6px;align-items:center;transition:gap .25s ease;} .card a.more:hover{gap:10px;} /* ---------- Steps / journey ---------- */ .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:step;position:relative;} @media(max-width:920px){.steps{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.steps{grid-template-columns:1fr;}} .step{position:relative;padding:28px 22px 22px;background:var(--white);border-radius:var(--radius);border:1px solid var(--line-soft);transition:transform .4s var(--ease), box-shadow .4s var(--ease);} .step:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--shadow-lg);} .step .num{ counter-increment:step;width:40px;height:40px;border-radius:13px; background:var(--grad-cta);color:#fff;display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:800;margin-bottom:16px;font-size:.92rem; box-shadow:0 10px 20px -8px rgba(166,34,95,.5); } .step .num::before{content:counter(step,decimal-leading-zero);} /* ---------- Testimonials ---------- */ .testi-card{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);padding:30px 28px 28px;transition:transform .4s var(--ease), box-shadow .4s var(--ease);position:relative;} .testi-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);} .testi-card .quote{font-family:var(--font-sans);font-style:normal;font-size:1rem;color:var(--ink);position:relative;z-index:1;} .testi-card .who{margin-top:14px;font-size:.85rem;color:var(--ink-soft);font-weight:600;} .testi-tag{display:inline-block;margin-top:6px;font-size:.72rem;background:var(--blush);color:var(--wine);padding:3px 10px;border-radius:100px;font-weight:700;} .sample-flag{display:inline-block;font-size:.72rem;color:#A8754E;background:#FBEFE3;border:1px dashed #D9B98A;padding:8px 12px;border-radius:8px;margin-bottom:14px;line-height:1.4;} /* Inside a testimonial card, keep the placeholder note out of the way as a small corner ribbon */ .testi-card .sample-flag{ display:block;position:absolute;top:-10px;right:18px;margin-bottom:0; font-size:.62rem;padding:4px 10px;white-space:nowrap;box-shadow:0 4px 10px -4px rgba(0,0,0,.15); max-width:calc(100% - 36px);overflow:hidden;text-overflow:ellipsis; } @media(max-width:360px){ .testi-card .sample-flag{right:10px;font-size:.58rem;padding:3px 8px;} } /* ---------- FAQ ---------- */ .faq-cat{margin-bottom:10px;} .faq-item{border-bottom:1px solid var(--line);} .faq-q{ width:100%;text-align:left;background:none;border:none;cursor:pointer; padding:19px 4px;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink); display:flex;justify-content:space-between;gap:14px;align-items:center; } .faq-q:hover{color:var(--wine);} .faq-q::after{ content:"+";flex:none;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-size:1.2rem;color:var(--wine);background:var(--blush); transition:transform .35s var(--ease), background .3s ease, color .3s ease; } .faq-item.open .faq-q::after{transform:rotate(135deg);background:var(--grad-cta);color:#fff;} .faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease), padding .35s var(--ease);padding:0 4px;} .faq-item.open .faq-a{max-height:600px;padding-bottom:18px;} .faq-a p{font-size:.96rem;margin-bottom:0;} .faq-filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;} .faq-filter{padding:9px 18px;border-radius:100px;border:1.5px solid var(--line);font-size:.84rem;font-weight:600;cursor:pointer;background:var(--white);transition:.25s var(--ease);font-family:var(--font-display);} .faq-filter:hover{border-color:var(--wine-light);color:var(--wine);} .faq-filter.active{background:var(--grad-cta);border-color:transparent;color:#fff;box-shadow:0 10px 22px -10px rgba(166,34,95,.5);} /* ---------- Tables ---------- */ table.compare{width:100%;border-collapse:collapse;font-size:.94rem;border-radius:var(--radius-sm);overflow:hidden;} table.compare th,table.compare td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;} table.compare th{font-family:var(--font-display);color:var(--wine);background:var(--blush);} table.compare tr:hover td{background:var(--bg-tint);} @media(max-width:700px){ table.compare{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;} table.compare th,table.compare td{white-space:nowrap;} } /* ---------- Areas / pills ---------- */ .pill-row{display:flex;flex-wrap:wrap;gap:10px;} .pill{background:var(--white);border:1px solid var(--line);padding:9px 18px;border-radius:100px;font-size:.88rem;font-weight:600;color:var(--teal-deep);transition:.3s var(--ease);} .pill:hover{background:var(--teal-deep);color:#fff;border-color:transparent;transform:translateY(-2px);} /* ---------- Blog ---------- */ .blog-card{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;transition:transform .4s var(--ease), box-shadow .4s var(--ease);} .blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);} .blog-card .tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--wine);background:var(--blush);padding:4px 10px;border-radius:100px;margin-bottom:10px;} .blog-card .body{padding:24px 26px 28px;} .blog-meta{font-size:.78rem;color:var(--ink-soft);margin-top:10px;} /* ---------- CTA banner ---------- */ .cta-banner{ background:var(--grad-cta);color:#FCEAF1;border-radius:var(--radius-lg);padding:54px; display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap; position:relative;overflow:hidden;isolation:isolate; } .cta-banner::before{ content:"";position:absolute;inset:0;background: radial-gradient(at 85% 15%, rgba(227,165,62,.35), transparent 55%), radial-gradient(at 10% 90%, rgba(15,160,181,.3), transparent 55%); animation:blobDrift 18s ease-in-out infinite; } .cta-banner > *{position:relative;z-index:1;} .cta-banner h2{color:#fff;} .cta-banner p{color:#F6D6E4;} /* ---------- Sticky mobile CTA ---------- */ .sticky-cta{ position:fixed;bottom:14px;left:14px;right:14px;z-index:60; background:rgba(36,21,37,.92);backdrop-filter:blur(14px); border-radius:100px;display:none;justify-content:space-around;padding:12px 10px; box-shadow:0 18px 40px -16px rgba(44,20,48,.5); bottom:max(14px, env(safe-area-inset-bottom)); } .sticky-cta a{color:#fff;font-size:.8rem;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--font-display);transition:transform .25s var(--ease);} .sticky-cta a:active{transform:scale(.92);} @media(max-width:920px){.sticky-cta{display:flex;}body{padding-bottom:calc(78px + env(safe-area-inset-bottom));}} @media(max-width:340px){.sticky-cta a{font-size:.72rem;}} /* ---------- Footer ---------- */ .site-footer{background:linear-gradient(170deg,var(--plum),var(--plum-deep));color:#C7BFCB;padding:64px 0 28px;position:relative;overflow:hidden;} .site-footer h4{color:#FFFFFF;font-family:var(--font-display);font-size:1.02rem;margin-bottom:16px;} .site-footer a{color:#C7BFCB;font-size:.92rem;transition:color .25s;} .site-footer a:hover{color:var(--gold-light);} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;position:relative;z-index:1;} @media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}} @media(max-width:520px){.footer-grid{grid-template-columns:1fr;}} .footer-grid ul li{margin-bottom:9px;} .footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:46px;padding-top:22px;font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#8F8696;position:relative;z-index:1;} /* ---------- Breadcrumb ---------- */ .breadcrumb{font-size:.84rem;color:var(--ink-soft);padding:18px 0;} .breadcrumb a{color:var(--wine);font-weight:600;} .breadcrumb a:hover{text-decoration:underline;} .breadcrumb span{margin:0 6px;} /* ---------- Page hero (sub pages) ---------- */ .page-hero{background:var(--bg-tint);padding:50px 0 42px;position:relative;overflow:hidden;isolation:isolate;} .page-hero .eyebrow{margin-bottom:10px;} .page-hero .container{position:relative;z-index:2;} /* Treatment-page hero icon — same halo/float language as the homepage portrait, scaled down to a topic glyph so every service page gets a bit of visual identity */ .page-hero-grid{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;} .page-hero-text{flex:1 1 420px;min-width:0;} .page-hero-art{flex:none;position:relative;} .page-hero-icon{ position:relative;display:flex;align-items:center;justify-content:center; width:128px;height:128px;border-radius:38% 62% 63% 37% / 41% 41% 59% 59%; background:var(--white);color:var(--wine);border:1px solid var(--line-soft); box-shadow:var(--shadow-lg);animation:softFloat 8s ease-in-out infinite, blobMorph 14s ease-in-out infinite; } .page-hero-icon svg{width:50px;height:50px;} .page-hero-icon::after{ content:"";position:absolute;inset:-14px;z-index:-1;border-radius:50%; background:conic-gradient(from 0deg, var(--wine), var(--gold), var(--teal), var(--wine-light), var(--wine)); opacity:.5;filter:blur(2px); -webkit-mask:radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask:radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); animation:haloSpin 9s linear infinite; } @media(prefers-reduced-motion:reduce){.page-hero-icon{animation:none;}.page-hero-icon::after{animation:none;}} @media(max-width:760px){ .page-hero-grid{justify-content:center;text-align:center;} .page-hero-text{flex:1 1 100%;} .page-hero-art{order:-1;} .page-hero-icon{width:96px;height:96px;} .page-hero-icon svg{width:38px;height:38px;} } /* ---------- Misc ---------- */ .flag-box{background:#FBEFE3;border:1px solid #E8C99B;border-radius:var(--radius-sm);padding:18px 20px;font-size:.92rem;margin:22px 0;} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px;} @media(max-width:820px){.two-col{grid-template-columns:1fr;}} .author-box{display:flex;gap:16px;align-items:flex-start;background:var(--bg-tint);border-radius:var(--radius);padding:22px;margin:28px 0;} .author-box .ava{width:52px;height:52px;border-radius:50%;background:var(--grad-cta);flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-size:1.1rem;font-weight:700;} .toc{background:var(--bg-tint);border-radius:var(--radius);padding:24px 28px;margin:28px 0;border:1px solid var(--line-soft);} .toc h4{margin-bottom:10px;} .toc ol{padding-left:18px;color:var(--wine);font-weight:600;font-size:.92rem;} .toc ol li{margin-bottom:6px;} .toc ol li a{color:inherit;transition:padding-left .2s;display:inline-block;} .toc ol li a:hover{padding-left:4px;color:var(--wine-deep);} .badge-row{display:flex;gap:18px;flex-wrap:wrap;align-items:center;} .badge{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--ink-soft);} .badge .dot{width:8px;height:8px;background:var(--grad-gold);border-radius:50%;} /* ---------- Appointment form ---------- */ #appointmentForm input, #appointmentForm select, #appointmentForm textarea{ width:100%;font-size:.96rem;font-family:var(--font-sans);color:var(--ink); background:var(--white);transition:box-shadow .3s ease, border-color .3s ease, transform .25s ease; } #appointmentForm input::placeholder, #appointmentForm textarea::placeholder{color:var(--ink-faint);} #appointmentForm input:focus, #appointmentForm select:focus, #appointmentForm textarea:focus{ outline:none;border-color:var(--wine) !important; box-shadow:0 0 0 4px var(--blush); } #appointmentForm .btn-primary{margin-top:6px;} @media(max-width:600px){ #appointmentForm input, #appointmentForm select, #appointmentForm textarea{font-size:1rem;padding:14px 16px !important;} } /* ========================================================= Motion — orchestrated, purposeful, brand-led ========================================================= */ @keyframes fadeInUp{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}} @keyframes countUpPulse{0%{transform:scale(1);}50%{transform:scale(1.08);}100%{transform:scale(1);}} @keyframes softFloat{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-10px) rotate(1deg);}} @keyframes heroWord{from{opacity:0;transform:translateY(.5em);filter:blur(4px);}to{opacity:1;transform:translateY(0);filter:blur(0);}} .reveal{opacity:0;transform:translateY(24px) scale(.985);transition:opacity .7s var(--ease), transform .7s var(--ease);} .reveal.in-view{opacity:1;transform:translateY(0) scale(1);} .reveal-stagger.in-view{transition-delay:var(--d,0s);} @media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} *{animation:none !important;} } .card,.testi-card,.blog-card,.step{transition:transform .4s var(--ease), box-shadow .4s var(--ease);} /* Doctor photo — petal-cut portrait, brand bloom echoed in the frame */ .doctor-photo-wrap{position:relative;width:min(310px,80%);margin:0 auto;text-align:center;z-index:2;transition:transform .4s var(--ease);will-change:transform;} .doctor-photo-frame{ position:relative;width:100%;aspect-ratio:1/1; border-radius:38% 62% 63% 37% / 41% 41% 59% 59%; overflow:hidden;border:7px solid var(--white);box-shadow:var(--shadow-lg); background:var(--bg-tint);animation:softFloat 8s ease-in-out infinite, blobMorph 14s ease-in-out infinite; } .doctor-photo-frame img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;} .doctor-credentials{ margin-top:20px;font-family:var(--font-display);font-weight:700;font-size:.92rem; color:var(--teal-deep);letter-spacing:.02em; } .doctor-photo-wrap::before{ content:"";position:absolute;top:-22px;right:2%;bottom:-22px;left:2%;z-index:-1; background:var(--grad-bloom);filter:blur(28px);opacity:.6;border-radius:50%; animation:blobDrift 12s ease-in-out infinite; } @media(prefers-reduced-motion:reduce){.doctor-photo-frame{animation:none;}.doctor-photo-wrap::before{animation:none;}} @media(max-width:880px){.doctor-photo-wrap{margin-top:6px;}} .about-photo{ width:240px;height:240px;border-radius:38% 62% 63% 37% / 41% 41% 59% 59%;object-fit:cover;object-position:top center; border:6px solid var(--white);box-shadow:var(--shadow-lg);flex:none; animation:softFloat 8s ease-in-out infinite;position:relative;z-index:2; } .about-hero-grid{display:flex;gap:36px;align-items:center;flex-wrap:wrap;position:relative;} .about-hero-grid::before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:260px;height:260px;z-index:-1;border-radius:50%; background:var(--grad-bloom);filter:blur(30px);opacity:.55; animation:blobDrift 12s ease-in-out infinite; } @media(prefers-reduced-motion:reduce){.about-photo{animation:none;}.about-hero-grid::before{animation:none;}} @media(max-width:560px){ .about-hero-grid{flex-direction:column;text-align:center;} .about-hero-grid::before{left:50%;top:120px;transform:translate(-50%,-50%);} .about-photo{width:190px;height:190px;} } .stat-num{display:inline-block;} .hero-trust strong.counted{animation:countUpPulse .4s ease;} /* ---------- Hero entrance choreography (classes toggled by main.js) ---------- */ .hero-enter .eyebrow, .hero-enter h1, .hero-enter .lede, .hero-enter .btn-row, .hero-enter .hero-trust, .hero-enter .hero-art{ opacity:0;transform:translateY(22px); } .hero-enter.run .eyebrow{animation:fadeInUp .7s var(--ease) .05s forwards;} .hero-enter.run h1{animation:fadeInUp .8s var(--ease) .15s forwards;} .hero-enter.run .lede{animation:fadeInUp .8s var(--ease) .28s forwards;} .hero-enter.run .btn-row{animation:fadeInUp .8s var(--ease) .4s forwards;} .hero-enter.run .hero-trust{animation:fadeInUp .8s var(--ease) .52s forwards;} .hero-enter.run .hero-art{animation:fadeInUp .9s var(--ease) .3s forwards;} @media(prefers-reduced-motion:reduce){ .hero-enter .eyebrow, .hero-enter h1, .hero-enter .lede, .hero-enter .btn-row, .hero-enter .hero-trust, .hero-enter .hero-art{ opacity:1;transform:none;animation:none !important; } } /* Word-by-word cascade reveal for the hero headline (markup built by main.js; plain text shows instantly if JS doesn't run, so nothing is ever hidden) */ .hero h1.word-cascade{opacity:1 !important;transform:none !important;animation:none !important;} .hero h1.word-cascade .word{display:inline-block;overflow:hidden;vertical-align:top;} .hero h1.word-cascade .word > span{display:inline-block;opacity:0;transform:translateY(.6em) rotate(2deg);filter:blur(5px);} .hero-enter.run h1.word-cascade .word > span{animation:heroWord .7s var(--ease) forwards;animation-delay:var(--wd,0s);} @media(prefers-reduced-motion:reduce){ .hero h1.word-cascade .word > span{opacity:1;transform:none;filter:none;animation:none;} } /* Soft pulsing glow on the primary hero CTA — premium "look here" emphasis */ .hero .btn-primary{position:relative;} .hero .btn-primary::after{ content:"";position:absolute;inset:-3px;z-index:-1;border-radius:inherit; background:var(--grad-cta);opacity:.6;filter:blur(10px); animation:ctaPulse 2.6s ease-in-out infinite; } @keyframes ctaPulse{0%,100%{opacity:.35;transform:scale(1);}50%{opacity:.7;transform:scale(1.08);}} @media(prefers-reduced-motion:reduce){.hero .btn-primary::after{animation:none;}} /* ---------- Magnetic button glow on pointer (set via JS custom props) ---------- */ .btn-primary, .btn-outline{ background-position:var(--mx,50%) var(--my,50%); } /* ---------- Scroll progress bar ---------- */ .scroll-progress{ position:fixed;top:0;left:0;height:3px;z-index:80; background:var(--grad-text);width:0%; transition:width .12s linear; } @media(max-width:760px){.scroll-progress{top:0;}} /* ---------- Marquee (auto-scrolling pill rows, e.g. "areas served") ---------- */ .pill-row.marquee{ display:flex;flex-wrap:nowrap;overflow:hidden;gap:0; mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .pill-row.marquee .marquee-track{ display:flex;gap:10px;flex:none;animation:marqueeScroll 26s linear infinite; } .pill-row.marquee:hover .marquee-track{animation-play-state:paused;} @keyframes marqueeScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media(prefers-reduced-motion:reduce){ .pill-row.marquee .marquee-track{animation:none;} } /* ---------- Idle liveliness on service icon badges ---------- */ .card .icon-badge{animation:blobMorph 11s ease-in-out infinite;} @media(prefers-reduced-motion:reduce){.card .icon-badge{animation:none;}} /* ---------- Small-screen spacing polish ---------- */ @media(max-width:480px){ .card{padding:24px;} .cta-banner{padding:34px 26px;border-radius:24px;} .step{padding:22px 18px 18px;} .testi-card,.blog-card .body{padding:22px;} .toc{padding:20px;} h1{font-size:clamp(2rem,8vw,2.6rem);} } @media(max-width:760px){ .cta-banner{text-align:center;justify-content:center;} .cta-banner .btn-row{justify-content:center;width:100%;} } /* ========================================================= New premium UI/UX additions — loader, dark-mode toggle, cursor glow, 3D tilt, scroll-to-top, footer icons, carousel, page-fade transitions, gradient button shimmer. ========================================================= */ /* ---------- Loading screen ---------- */ .site-loader{ position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center; background:var(--cream);transition:opacity .55s ease, visibility .55s ease; } body.is-loading{overflow:hidden;} body:not(.is-loading) .site-loader{opacity:0;visibility:hidden;pointer-events:none;} .site-loader-mark{ width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center; color:var(--wine);background:var(--white);box-shadow:var(--shadow-lg); animation:loaderPulse 1.1s ease-in-out infinite; } .site-loader-mark svg{width:30px;height:30px;} @keyframes loaderPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.12);opacity:.7;}} @media(prefers-reduced-motion:reduce){ .site-loader{transition:opacity .2s linear;} .site-loader-mark{animation:none;} } /* ---------- Page fade transition between internal pages ---------- */ body.page-fade-ready{animation:pageFadeIn .5s var(--ease);} body.page-fade-out{animation:pageFadeOut .22s ease forwards;} @keyframes pageFadeIn{from{opacity:0;}to{opacity:1;}} @keyframes pageFadeOut{to{opacity:0;}} /* ---------- Dark mode toggle button ---------- */ .theme-toggle{ width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--white); color:var(--wine);display:flex;align-items:center;justify-content:center;cursor:pointer; margin-right:6px;flex:none;transition:transform .3s var(--ease), background .3s ease, color .3s ease; } .theme-toggle svg{width:18px;height:18px;} .theme-toggle:hover{transform:rotate(18deg) scale(1.08);background:var(--blush);} @media(max-width:600px){.theme-toggle{display:none;}} /* ---------- Scroll-to-top button ---------- */ .scroll-top-btn{ position:fixed;right:22px;bottom:96px;z-index:60;width:46px;height:46px;border-radius:50%; border:none;cursor:pointer;background:var(--grad-cta);color:#fff;display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow-wine);opacity:0;transform:translateY(14px) scale(.85);pointer-events:none; transition:opacity .35s var(--ease), transform .35s var(--ease); } .scroll-top-btn svg{width:20px;height:20px;} .scroll-top-btn.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;} .scroll-top-btn:hover{transform:translateY(-4px) scale(1.06);} @media(max-width:760px){.scroll-top-btn{right:14px;bottom:84px;width:42px;height:42px;}} /* ---------- Page-wide mouse-follow glow ---------- */ .cursor-glow{ position:fixed;top:0;left:0;width:440px;height:440px;border-radius:50%;z-index:0;pointer-events:none; background:radial-gradient(closest-side, rgba(166,34,95,.10), transparent 70%); mix-blend-mode:multiply;will-change:transform; } [data-theme="dark"] .cursor-glow{ background:radial-gradient(closest-side, rgba(227,165,62,.14), transparent 70%); mix-blend-mode:screen; } /* ---------- 3D tilt cards ---------- */ .tilt-card{transition:transform .35s var(--ease), box-shadow .35s var(--ease);transform-style:preserve-3d;} /* ---------- Gradient shimmer on the primary CTA ---------- */ .btn-primary{ background-size:220% 220%; animation:btnGradientShift 6s ease-in-out infinite; } @keyframes btnGradientShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}} @media(prefers-reduced-motion:reduce){.btn-primary{animation:none;}} [data-theme="dark"] .doctor-credentials{color:var(--teal-light);} /* ---------- Footer / sticky-cta contact icons ---------- */ .footer-ico{ display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px; margin-right:7px;vertical-align:-3px;transition:transform .35s cubic-bezier(.34,1.56,.64,1); } .footer-ico svg{width:100%;height:100%;} .site-footer a:hover .footer-ico,.sticky-cta a:hover .footer-ico{transform:translateY(-4px);} .sticky-cta a{display:inline-flex;align-items:center;} /* ---------- Testimonial carousel: spotlight-cycle (safe, no layout collapse) ---------- */ .testi-carousel .testi-card{ transition:opacity .6s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease); opacity:.55;transform:scale(.97); } .testi-carousel .testi-card.is-active{ opacity:1;transform:scale(1.015);box-shadow:var(--shadow-lg); } @media(prefers-reduced-motion:reduce){ .testi-carousel .testi-card{opacity:1;transform:none;} }