/* ========================================================================== Nital Aesthetics — "Porcelain" light edition A calm, airy design system: warm porcelain grounds, eucalyptus sage, blush ceramic and soft gold, with layered background patterns. 1. Tokens 8. Trust & ribbon 15. Doctor 2. Base & reset 9. Services rail 16. Reviews 3. Patterns & decor 10. Process 17. Journal & FAQ 4. Buttons & chips 11. Results / B&A 18. Contact 5. Header & drawer 12. Why Nital 19. Footer, bar, FABs 6. Section furniture 13. Standards band 20. Blog & article 7. Hero 14. Clinic tour 21. Responsive & motion ========================================================================== */ /* ─────────────────────────────────────────────────────── 1. tokens */ :root{ /* grounds */ --cream:#F8F4EF; --paper:#FFFFFF; --sand:#EFE6DC; --sand-2:#E7DBCC; --haze:#EEF0F8; --haze-2:#E4E8F4; --sky:#F0F2F8; /* navy — the primary voice */ --navy-mid:#3B478A; --navy:#232E63; --navy-deep:#141B3D; --navy-soft:#C3C9E2; --navy-tint:#E8EAF4; /* peach — the warm counterpoint */ --blush:#DFA189; --blush-deep:#C9826A; --blush-soft:#F4DDD1; --blush-tint:#FBEFE7; /* gilding */ --gold:#C6A15B; --gold-soft:#E9DCBE; /* ink */ --ink:#101736; --ink-2:#19224A; --text:#1C2340; --muted:#6C7391; --muted-2:#8A90A8; --on-dark:#F4F1EC; --on-dark-mute:#B6BCD2; /* rules */ --line:#E4DBD1; --line-2:#EFE9E2; --line-cool:#DDE1EF; /* type */ --f-display:'Fraunces',Georgia,'Times New Roman',serif; --f-ui:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif; --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --t-hero:clamp(2.5rem,5.6vw,4.6rem); --t-sec:clamp(1.95rem,4vw,3.3rem); --t-h3:clamp(1.2rem,1.9vw,1.55rem); --t-body:clamp(1rem,.98vw,1.0625rem); /* space */ --shell:1280px; --shell-wide:1480px; --gut:clamp(1.15rem,4vw,2.5rem); --sec-y:clamp(4.5rem,9vw,8rem); /* radii + shadow — soft, diffuse, never heavy */ --r-xs:10px; --r-sm:16px; --r:22px; --r-lg:30px; --r-xl:44px; --r-full:999px; --arch:50% 50% 20px 20px / 32% 32% 0 0; --sh-1:0 1px 2px rgba(16,23,54,.04),0 6px 18px rgba(16,23,54,.05); --sh-2:0 2px 8px rgba(16,23,54,.05),0 16px 40px rgba(16,23,54,.08); --sh-3:0 6px 20px rgba(16,23,54,.07),0 32px 70px rgba(16,23,54,.11); --sh-glow:0 20px 60px rgba(35,46,99,.18); --sh-in:inset 0 1px 0 rgba(255,255,255,.75); /* motion */ --e-out:cubic-bezier(.22,.9,.28,1); --e-io:cubic-bezier(.65,.02,.25,1); --e-spring:cubic-bezier(.34,1.4,.5,1); --head-h:74px; --bar-h:0px; } /* ─────────────────────────────────────────────────────── 2. base & reset */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 18px); } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; font-family:var(--f-body); font-size:var(--t-body); line-height:1.68; color:var(--text); background:var(--cream); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; padding-bottom:var(--bar-h); } body.no-scroll{overflow:hidden} img,video,svg,iframe{display:block;max-width:100%} img,video{height:auto} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} a{color:inherit;text-decoration:none} input,select,textarea{font:inherit;color:inherit} ul,ol{margin:0;padding:0;list-style:none} p{margin:0 0 1em} p:last-child{margin-bottom:0} h1,h2,h3,h4{ font-family:var(--f-display); font-weight:500; font-variation-settings:'SOFT' 40,'WONK' 0; letter-spacing:-.018em; line-height:1.08; margin:0; text-wrap:balance; color:var(--ink); } h1 em,h2 em,h3 em{ font-style:italic; font-weight:400; font-variation-settings:'SOFT' 100,'WONK' 1; color:var(--navy); } strong{font-weight:600} ::selection{background:var(--navy-soft);color:var(--navy-deep)} .shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)} .shell-wide{max-width:var(--shell-wide)} .skip-link{ position:fixed;top:-100px;left:1rem;z-index:2000; background:var(--navy);color:#fff;padding:.75rem 1.15rem;border-radius:var(--r-xs); transition:top .2s } .skip-link:focus-visible{top:1rem} :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--navy-mid);outline-offset:3px;border-radius:var(--r-xs) } kbd{ font:600 .72rem/1 var(--f-ui);padding:.2rem .4rem;border-radius:6px; background:var(--paper);border:1px solid var(--line);color:var(--muted) } /* scroll progress hairline */ .scroll-progress{position:fixed;inset:0 0 auto;height:2px;z-index:1200;pointer-events:none} .scroll-progress i{ display:block;height:100%;width:0%; background:linear-gradient(90deg,var(--navy-soft),var(--navy-mid),var(--blush)); box-shadow:0 0 12px rgba(35,46,99,.5); transition:width .1s linear } /* ─────────────────────────────────────────────────────── 3. patterns & decor */ :root{ --pat-dot:radial-gradient(rgba(35,46,99,.17) 1px,transparent 1px); --pat-dot-warm:radial-gradient(rgba(201,130,106,.16) 1px,transparent 1px); --pat-grid: linear-gradient(to right,rgba(35,46,99,.07) 1px,transparent 1px), linear-gradient(to bottom,rgba(35,46,99,.07) 1px,transparent 1px); --pat-diag:repeating-linear-gradient(135deg,rgba(35,46,99,.06) 0 1px,transparent 1px 9px); --pat-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg stroke='%23232E63' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M20 16v8M16 20h8'/%3E%3C/g%3E%3C/svg%3E"); --pat-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); } /* a decorative layer any section can drop in */ .decor{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0} .decor > *{position:absolute} .pat{inset:0} .pat-dot{background-image:var(--pat-dot);background-size:22px 22px} .pat-dot-warm{background-image:var(--pat-dot-warm);background-size:26px 26px} .pat-dot-lg{background-image:var(--pat-dot);background-size:34px 34px} .pat-grid{background-image:var(--pat-grid);background-size:64px 64px} .pat-diag{background-image:var(--pat-diag)} .pat-cross{background-image:var(--pat-cross);background-size:40px 40px} .pat-fade-b{-webkit-mask-image:linear-gradient(to bottom,#000,transparent);mask-image:linear-gradient(to bottom,#000,transparent)} .pat-fade-t{-webkit-mask-image:linear-gradient(to top,#000,transparent);mask-image:linear-gradient(to top,#000,transparent)} .pat-fade-r{-webkit-mask-image:linear-gradient(to right,#000 15%,transparent 85%);mask-image:linear-gradient(to right,#000 15%,transparent 85%)} .pat-fade-l{-webkit-mask-image:linear-gradient(to left,#000 15%,transparent 85%);mask-image:linear-gradient(to left,#000 15%,transparent 85%)} .pat-vignette{ -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 20%,transparent 72%); mask-image:radial-gradient(120% 90% at 50% 40%,#000 20%,transparent 72%) } /* soft light orbs */ /* No filter. These were blur(70px) on top of a radial gradient that is already soft — the blur cost a full-surface re-filter on every frame of the drift, for a difference you cannot see once the stops are eased. */ .orb{border-radius:50%;opacity:.75} .orb-navy{background:radial-gradient(circle closest-side,rgba(35,46,99,.30),rgba(35,46,99,.12) 45%,transparent 72%)} .orb-blush{background:radial-gradient(circle closest-side,rgba(223,161,137,.34),rgba(223,161,137,.13) 45%,transparent 72%)} .orb-gold{background:radial-gradient(circle closest-side,rgba(198,161,91,.24),rgba(198,161,91,.09) 45%,transparent 72%)} .orb-sky{background:radial-gradient(circle closest-side,rgba(146,160,206,.28),rgba(146,160,206,.10) 45%,transparent 72%)} @keyframes drift{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 33%{transform:translate3d(3%,-4%,0) scale(1.09)} 66%{transform:translate3d(-3%,3%,0) scale(.94)} } .orb-float{animation:drift 24s var(--e-io) infinite} .orb-float-slow{animation:drift 34s var(--e-io) infinite reverse} .is-hidden-tab .orb-float,.is-hidden-tab .orb-float-slow{animation-play-state:paused} /* hairline flourishes */ .rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0;margin:0} .flourish{ display:flex;align-items:center;gap:.7rem;color:var(--blush); } .flourish::before,.flourish::after{ content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--blush-soft)) } .flourish::before{background:linear-gradient(90deg,transparent,var(--blush-soft))} .flourish::after{background:linear-gradient(90deg,var(--blush-soft),transparent)} /* ─────────────────────────────────────────────────────── 4. buttons & chips */ .btn{ --bg:var(--navy); --fg:#fff; --bd:transparent; position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem; padding:.88rem 1.6rem;border-radius:var(--r-full); font-family:var(--f-ui);font-weight:500;font-size:.94rem;letter-spacing:.005em; background:var(--bg);color:var(--fg);border:1px solid var(--bd); cursor:pointer;overflow:hidden;isolation:isolate;white-space:nowrap; transition:transform .5s var(--e-out),box-shadow .45s var(--e-out), background .35s var(--e-out),color .35s var(--e-out),border-color .35s; } .btn svg{flex:none;transition:transform .45s var(--e-out)} /* a slow sheen sweeps across on hover */ .btn::before{ content:'';position:absolute;inset:0;z-index:-1; background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.3) 48%,transparent 72%); transform:translateX(-120%);transition:transform .85s var(--e-out) } .btn:hover::before{transform:translateX(120%)} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.985)} .btn:hover svg{transform:translateX(3px)} .btn-primary{--bg:var(--navy);box-shadow:0 8px 24px rgba(35,46,99,.22)} .btn-primary:hover{--bg:var(--navy-deep);box-shadow:0 14px 34px rgba(35,46,99,.28)} .btn-blush{--bg:var(--blush-deep);box-shadow:0 8px 24px rgba(201,130,106,.22)} .btn-blush:hover{--bg:#AC705A} .btn-dark{--bg:var(--ink);box-shadow:0 8px 24px rgba(16,23,54,.18)} .btn-dark:hover{--bg:#16232a} .btn-light{--bg:#fff;--fg:var(--navy-deep);box-shadow:var(--sh-2)} .btn-light:hover{--bg:var(--navy-tint)} .btn-ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line);box-shadow:var(--sh-in)} .btn-ghost:hover{--bd:var(--navy-soft);--fg:var(--navy);--bg:var(--navy-tint)} .btn-outline-light{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.42)} .btn-outline-light:hover{--bg:rgba(255,255,255,.14);--bd:rgba(255,255,255,.8)} .btn-wa{--bg:#25D366;--fg:#0B3B21} .btn-wa:hover{--bg:#1FBF5B} .btn-sm{padding:.6rem 1.15rem;font-size:.86rem} .btn-lg{padding:1.05rem 2rem;font-size:1rem} .btn-block{width:100%} .btn.is-loading{pointer-events:none;opacity:.75} .btn[disabled]{opacity:.55;pointer-events:none} /* eyebrow pill / tags */ .pill{ display:inline-flex;align-items:center;gap:.4rem; padding:.34rem .8rem;border-radius:var(--r-full); font-family:var(--f-ui);font-size:.7rem;font-weight:500; letter-spacing:.14em;text-transform:uppercase; background:var(--blush-tint);color:var(--blush-deep); border:1px solid var(--blush-soft) } .pill-sm{font-size:.63rem;padding:.24rem .6rem;letter-spacing:.1em} .pill-sage{background:var(--navy-tint);color:var(--navy);border-color:var(--navy-soft)} .chip{ display:inline-flex;align-items:center;gap:.4rem; padding:.5rem 1rem;border-radius:var(--r-full); font-family:var(--f-ui);font-size:.85rem;font-weight:500; background:var(--paper);border:1px solid var(--line);color:var(--muted); transition:transform .35s var(--e-out),border-color .35s,color .35s,background .35s } .chip i{font-style:normal;font-size:.7rem;color:var(--muted-2)} .chip:hover{border-color:var(--navy-soft);color:var(--navy);transform:translateY(-2px)} .chip.is-on{background:var(--navy);border-color:var(--navy);color:#fff} .chip.is-on i{color:rgba(255,255,255,.65)} .stars{display:inline-flex;gap:1px;color:var(--gold)} .pulse-dot{ position:relative;width:7px;height:7px;border-radius:50%;background:var(--navy-mid);flex:none } .pulse-dot::after{ content:'';position:absolute;inset:-4px;border-radius:50%; border:1px solid var(--navy-mid);opacity:.7;animation:pulseRing 2.6s var(--e-out) infinite } @keyframes pulseRing{ 0%{transform:scale(.6);opacity:.8} 70%{transform:scale(1.8);opacity:0} 100%{opacity:0} } /* ─────────────────────────────────────────────────────── 5. header & drawer */ .topbar{ position:relative;z-index:60; background:linear-gradient(90deg,var(--navy-tint),var(--sand) 45%,var(--blush-tint)); border-bottom:1px solid var(--line-2); font-size:.78rem;color:var(--muted) } .topbar-in{display:flex;align-items:center;gap:1.25rem;min-height:40px;flex-wrap:wrap} .topbar-item{display:inline-flex;align-items:center;gap:.42rem} .topbar-item svg{color:var(--navy-mid);flex:none} .topbar-spacer{flex:1} .topbar-rating strong{color:inherit;font-weight:inherit} .topbar-rating svg{color:var(--gold)} .topbar-call{font-weight:600;color:var(--ink);transition:color .3s} .topbar-call:hover{color:var(--navy)} @media (max-width:860px){ .topbar-in{justify-content:center;gap:.85rem;font-size:.72rem;padding-block:.4rem} .topbar-item:not(.topbar-rating):not(.topbar-call){display:none} .topbar-spacer{display:none} } .site-head{ position:sticky;top:0;z-index:900; background:rgba(248,244,239,.72); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid transparent; transition:background .45s var(--e-out),box-shadow .45s var(--e-out),border-color .45s } .site-head.is-stuck{ background:rgba(248,244,239,.92); border-bottom-color:var(--line-2); box-shadow:0 1px 26px rgba(16,23,54,.06) } .head-in{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);min-height:var(--head-h)} /* One source of truth for the wordmark width; the strapline below is sized from it, so the two stay the same length at every viewport. Previously the mark scaled with vw while the strapline sat at a fixed .58rem, so they only lined up at one window size. */ .brand{--mark-w:clamp(170px,17vw,225px);display:flex;flex-direction:column;gap:3px;flex:none} /* The wordmark ships as navy artwork, which fights this palette. The white version is pure white on a clean alpha channel, so it doubles as a mask — painting it with a background colour gives exact, crisp control over the ink. Deep eucalyptus reads far better on porcelain than the original navy. */ .brand-mark{ display:block; width:var(--mark-w); aspect-ratio:1400/142; background-color:var(--navy-deep); -webkit-mask:url(../assets/img/brand/wordmark-white.webp) left center/contain no-repeat; mask:url(../assets/img/brand/wordmark-white.webp) left center/contain no-repeat; transition:background-color .4s var(--e-out) } .brand:hover .brand-mark{background-color:var(--navy)} .brand-mark-sm{width:180px} .brand-mark-sm + .brand-sub,.drawer .brand-sub{font-size:calc(180px / 21.25)} /* anything without mask support falls back to the original artwork */ @supports not ((-webkit-mask-image:url(a.webp)) or (mask-image:url(a.webp))){ .brand-mark{ background:url(../assets/img/brand/wordmark-navy.webp) left center/contain no-repeat } } .brand-sub{ font-family:var(--f-ui); /* 29 characters at .16em tracking (including the trailing gap) measure ~21.25x the font size, so this divisor makes the strapline span the wordmark to within a pixel at any viewport */ font-size:calc(var(--mark-w) / 21.25); font-weight:500;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);white-space:nowrap } .nav{margin-inline:auto} /* Seven labels need about 550px. The bar had exactly 630px of slack with the old gap and size, so any rounding tipped the list onto a second row — nowrap plus a tighter rhythm keeps it on one line with room to spare. */ .nav-list{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(.3rem,.9vw,.85rem)} .nav-link{ position:relative;display:block;padding:.5rem .25rem; font-family:var(--f-ui);font-size:.87rem;font-weight:400;color:var(--ink-2); white-space:nowrap;transition:color .35s } .nav-link span{position:relative;display:block} .nav-link span::after{ content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px; background:var(--navy-mid);transform:scaleX(0);transform-origin:right; transition:transform .45s var(--e-out) } .nav-link:hover{color:var(--navy)} .nav-link:hover span::after,.nav-link.is-current span::after{transform:scaleX(1);transform-origin:left} .nav-link.is-current{color:var(--navy)} .head-actions{display:flex;align-items:center;gap:.6rem;flex:none} .burger{ display:none;width:44px;height:44px;border-radius:14px; background:var(--paper);border:1px solid var(--line); flex-direction:column;align-items:center;justify-content:center;gap:5px; transition:border-color .3s,background .3s } .burger span{ display:block;width:21px;height:2.2px;border-radius:2px;background:var(--navy); transition:transform .45s var(--e-out),opacity .3s } /* the cross has to follow the new bar height and gap: 2.2 + 5 = 7.2 */ .burger.is-open span:nth-child(1){transform:translateY(7.2px) rotate(45deg)} .burger.is-open span:nth-child(2){opacity:0} .burger.is-open span:nth-child(3){transform:translateY(-7.2px) rotate(-45deg)} @media (max-width:1180px){ .nav{display:none} .burger{display:flex} /* with the nav gone there is no auto margin left to push these over, so the call button and burger would drift back toward the wordmark */ .head-actions{margin-left:auto} } @media (max-width:620px){ .head-phone span{display:none} .head-phone{padding-inline:.8rem} .brand-sub{display:none} } @media (max-width:460px){ .head-actions .btn-primary{display:none} } /* drawer */ .drawer{position:fixed;inset:0;z-index:1500;background:rgba(16,23,54,.35);opacity:0;transition:opacity .45s} .drawer[hidden]{display:none} .drawer.is-open{opacity:1} .drawer-panel{ position:absolute;top:0;right:0;bottom:0;width:min(420px,90vw); background:var(--cream);display:flex;flex-direction:column; padding:1.4rem clamp(1.25rem,4vw,2rem) 1.6rem; transform:translateX(100%);transition:transform .55s var(--e-out); overflow-y:auto; box-shadow:-30px 0 80px rgba(16,23,54,.14) } .drawer.is-open .drawer-panel{transform:none} .drawer-panel::before{ content:'';position:absolute;inset:0;pointer-events:none; background-image:var(--pat-dot);background-size:24px 24px;opacity:.6; -webkit-mask-image:linear-gradient(to bottom,#000,transparent 60%); mask-image:linear-gradient(to bottom,#000,transparent 60%) } .drawer-panel > *{position:relative} .drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.75rem} .drawer-close{ width:42px;height:42px;display:grid;place-items:center;border-radius:50%; background:var(--paper);border:1px solid var(--line);color:var(--ink); transition:transform .4s var(--e-out),background .3s } .drawer-close:hover{background:var(--navy-tint);transform:rotate(90deg)} .drawer-nav{display:flex;flex-direction:column;margin-bottom:auto} .drawer-nav a{ display:flex;align-items:center;gap:.9rem; padding:.95rem .25rem;border-bottom:1px solid var(--line-2); font-family:var(--f-display);font-size:1.25rem;font-weight:500;color:var(--ink); opacity:0;transform:translateX(24px); transition:opacity .5s var(--e-out),transform .5s var(--e-out),color .3s; transition-delay:calc(var(--i) * 55ms + 120ms) } .drawer.is-open .drawer-nav a{opacity:1;transform:none} .drawer-nav a svg{margin-left:auto;color:var(--navy-mid);opacity:0;transform:translateX(-8px);transition:.35s var(--e-out)} .drawer-nav a:hover{color:var(--navy)} .drawer-nav a:hover svg{opacity:1;transform:none} .dn-num{ font-family:var(--f-ui);font-size:.66rem;font-weight:500;letter-spacing:.14em; color:var(--blush-deep);width:22px } .drawer-foot{padding-top:1.5rem} .drawer-contact{display:flex;flex-direction:column;gap:.55rem;margin:1.1rem 0 .9rem} .drawer-contact a{display:inline-flex;align-items:center;gap:.55rem;font-size:.92rem;color:var(--ink-2)} .drawer-contact svg{color:var(--navy-mid)} .drawer-addr{font-size:.8rem;color:var(--muted-2);line-height:1.55;margin:0} /* ─────────────────────────────────────────────────────── 6. section furniture */ section{position:relative} .sec-head{max-width:760px;margin-inline:auto;text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem);position:relative;z-index:2} .sec-head-left{margin-inline:0;text-align:left} .sec-head-split{ max-width:none;display:flex;align-items:flex-end;justify-content:space-between; gap:1.5rem;text-align:left;flex-wrap:wrap } .eyebrow{ display:inline-flex;align-items:center;gap:.5rem; font-family:var(--f-ui);font-size:.72rem;font-weight:500; letter-spacing:.2em;text-transform:uppercase;color:var(--blush-deep); margin:0 0 1.1rem } .eyebrow svg{color:var(--navy-mid)} .eyebrow-light{color:var(--blush-soft)} .eyebrow-light svg{color:var(--navy-soft)} .sec-title{font-size:var(--t-sec);margin-bottom:1rem} .sec-title-light{color:#fff} .sec-title-light em{color:var(--blush-soft)} .sec-lede{color:var(--muted);font-size:1.03rem;line-height:1.72;max-width:62ch;margin-inline:auto} .sec-head-left .sec-lede,.sec-head-split .sec-lede{margin-inline:0} .grid-h{font-family:var(--f-display);font-size:clamp(1.3rem,2.3vw,1.75rem);font-weight:500} .grid-note{font-size:.86rem;color:var(--muted-2);margin:0} .disclaimer{ display:flex;align-items:flex-start;gap:.5rem;justify-content:center; font-size:.78rem;color:var(--muted-2);margin-top:2.25rem;text-align:center;line-height:1.6 } .disclaimer svg{flex:none;margin-top:2px;color:var(--navy-mid)} /* reveal engine */ [data-reveal]{ opacity:0; transition:opacity .9s var(--e-out),transform 1s var(--e-out),filter .9s var(--e-out),clip-path 1.1s var(--e-out); transition-delay:calc(var(--d,0) * 90ms) } [data-reveal="up"]{transform:translateY(30px)} [data-reveal="down"]{transform:translateY(-26px)} [data-reveal="left"]{transform:translateX(-34px)} [data-reveal="right"]{transform:translateX(34px)} [data-reveal="scale"]{transform:scale(.94)} [data-reveal="fade"]{transform:none} [data-reveal="blur"]{filter:blur(12px);transform:translateY(18px)} [data-reveal="clip"]{clip-path:inset(0 0 100% 0);transform:none} [data-reveal="curtain"]{clip-path:inset(0 100% 0 0);transform:none} [data-reveal].is-in{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)} /* word-by-word display reveal Each word carries its own clipping box, so the mask is exact no matter how the headline wraps — no line measuring, nothing to recompute on resize. The padding/negative-margin pair keeps descenders inside the box while leaving the baseline where the browser put it. */ .split-word{ display:inline-block;overflow:hidden;vertical-align:bottom; padding-bottom:.18em;margin-bottom:-.18em } .sw-i{ display:inline-block;font-style:inherit;font-weight:inherit; /* must clear the clipping box, which is line-height + the descender padding — 110% only cleared the line box and let glyph tops peek */ transform:translateY(150%);opacity:0; transition:transform 1s var(--e-out),opacity .8s var(--e-out); transition-delay:calc(var(--w,0) * 55ms + var(--d,0) * 90ms) } .is-in .sw-i, [data-split].is-in .sw-i, .hero-slide.is-active .sw-i{transform:none;opacity:1} /* image mask reveal `.curtain` wipes the covering panel only — safe over a stack of images that run their own crossfade. `.mask-img` adds the slow scale-down and must only go on a frame holding a single static photograph, or its transition shorthand would replace the one the stacked images rely on. */ .curtain,.mask-img{position:relative;overflow:hidden} .curtain::after,.mask-img::after{ content:'';position:absolute;inset:0;background:var(--sand); transform-origin:bottom;transition:transform 1.15s var(--e-out); transition-delay:calc(var(--d,0) * 90ms + 60ms);z-index:4 } .curtain.is-in::after,.is-in .curtain::after, .mask-img.is-in::after,.is-in .mask-img::after{transform:scaleY(0)} .mask-img img{ transform:scale(1.14);transition:transform 1.6s var(--e-out); transition-delay:calc(var(--d,0) * 90ms + 120ms) } .mask-img.is-in img,.is-in .mask-img img{transform:none} /* hover tilt */ [data-tilt]{transform-style:preserve-3d;transition:transform .5s var(--e-out)} [data-tilt] > *{transform:translateZ(0)} /* ─────────────────────────────────────────────────────── 7. hero */ .hero{ position:relative;overflow:hidden; padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,6vw,5rem); background: radial-gradient(120% 80% at 78% 8%,var(--haze) 0%,transparent 55%), radial-gradient(90% 70% at 8% 90%,var(--blush-tint) 0%,transparent 55%), linear-gradient(180deg,var(--cream),var(--sand) 88%) } .hero .decor .orb-1{width:46vw;height:46vw;max-width:620px;max-height:620px;top:-14%;right:-8%} .hero .decor .orb-2{width:38vw;height:38vw;max-width:480px;max-height:480px;bottom:-12%;left:-10%} .hero .decor .orb-3{width:24vw;height:24vw;max-width:300px;max-height:300px;top:38%;left:44%} .hero .decor .pat-dot{opacity:.55} /* Multiply is what makes this work: the drawing ships on its own pale paper, and multiplying drops that ground to nothing over the hero wash, leaving only the ink. The radial mask keeps it clear of the headline. */ @media (max-width:980px){ .hero-art{ background-position:center bottom;opacity:.8; -webkit-mask-image:radial-gradient(130% 80% at 50% 88%,#000 12%,transparent 76%); mask-image:radial-gradient(130% 80% at 50% 88%,#000 12%,transparent 76%) } } .hero-in{ position:relative;z-index:2; display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(2rem,5vw,4.5rem);align-items:center } /* both stacks share one grid cell so height = tallest slide */ /* the stage stacks the slides; the copy column itself flows normally so the controls and the stat row can sit beneath them */ .hero-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start} .hero-stage{display:grid;width:100%} .hero-slide{ grid-area:1/1; opacity:0;visibility:hidden;pointer-events:none; transform:translateY(16px); transition:opacity .8s var(--e-out),transform .9s var(--e-out),visibility .8s } .hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;transform:none} .hero-eyebrow{ display:inline-flex;align-items:center;gap:.55rem; padding:.44rem .95rem .44rem .8rem;border-radius:var(--r-full); background:rgba(255,255,255,.75);border:1px solid var(--line-cool); font-family:var(--f-ui);font-size:.74rem;font-weight:500; letter-spacing:.1em;text-transform:uppercase;color:var(--navy); margin:0 0 1.4rem;box-shadow:var(--sh-1) } .hero-title{ font-size:var(--t-hero); line-height:1.02; letter-spacing:-.028em; margin-bottom:1.25rem; max-width:16ch } .hero-title em{display:inline-block;color:var(--blush-deep)} .hero-text{ color:var(--muted);font-size:clamp(1rem,1.15vw,1.14rem);line-height:1.7; max-width:52ch;margin-bottom:1.6rem } .hero-actions{display:flex;flex-wrap:wrap;gap:.75rem} .hero-stats{ display:flex;align-items:flex-start;gap:clamp(1.4rem,3.4vw,3rem); width:100%;max-width:34rem;margin:clamp(1.5rem,3vw,2.2rem) 0 0; padding-top:clamp(1.2rem,2.4vw,1.7rem);border-top:1px solid var(--line) } .hero-stats > div{display:flex;flex-direction:column;gap:.22rem} .hero-stats dt{ display:inline-flex;align-items:center;gap:.22rem; font-family:var(--f-display);font-size:clamp(1.4rem,2.3vw,1.9rem);font-weight:500; line-height:1;letter-spacing:-.02em;color:var(--navy) } .hs-star{display:inline-flex;color:var(--gold)} .hero-stats dd{margin:0;font-size:.78rem;color:var(--muted);line-height:1.4} /* Vadodara's implant work draws patients who live abroad and fly in for it — saying so in the hero is what makes them read on. */ /* ── the mounted arch: the signature object of this edition ────────────── Four layers, back to front: two offset arch plates, a porcelain mount with a gilt hairline, the photograph itself, then the seal and stat chips. */ /* crop marks, the way a print is registered on a plate */ /* The mat. Only the band outside the mount is ever visible, so the scallop motif reads as an engraved border following the arch. */ /* a slow diagonal light pass across the glass */ /* the seal — curved type revolving around a still mark */ /* both chips sit inside the frame — the seal is the only element that deliberately breaks the edge, and it stays clear of the copy column */ @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* The foot is now a grid item of .hero-in rather than its own shell, because `order` cannot move an element between two different parents — and below the stacking breakpoint the slide indicator belongs directly under the copy it paginates, not beneath the mosaic. */ .hero-foot{ position:relative;z-index:3; display:flex;align-items:center;gap:1rem;flex-wrap:wrap; margin-top:clamp(1.1rem,2vw,1.6rem) } .hero-dots{display:flex;gap:.6rem;align-items:center} .hero-dot{ position:relative;width:46px;height:26px;display:grid;place-items:center; border-radius:var(--r-full) } .hd-bar{display:block;width:100%;height:2px;border-radius:2px;background:var(--line);overflow:hidden} .hd-bar i{display:block;height:100%;width:0;background:var(--navy-mid);border-radius:2px} .hero-dot.is-active .hd-bar{background:var(--navy-soft)} .hero-dot.is-active .hd-bar i{animation:dotFill var(--dur,6500ms) linear forwards} .hero.is-paused .hero-dot.is-active .hd-bar i{animation-play-state:paused} @keyframes dotFill{from{width:0}to{width:100%}} .hero-dot:hover .hd-bar{background:var(--navy-soft)} .hero-arrows{display:flex;gap:.5rem} .hero-arrow{ width:42px;height:42px;display:grid;place-items:center;border-radius:50%; background:var(--paper);border:1px solid var(--line);color:var(--ink); transition:transform .4s var(--e-out),background .3s,border-color .3s,color .3s } .hero-arrow:hover{background:var(--navy);border-color:var(--navy);color:#fff;transform:scale(1.06)} @media (max-width:980px){ .hero-in{grid-template-columns:1fr;gap:clamp(1.75rem,5vw,2.5rem)} .hero-title{max-width:none} } @media (max-width:560px){ .hero-actions .btn{flex:1 1 100%} } /* ─────────────────────────────────────────────────────── 8. trust & ribbon */ .trust{ position:relative;padding-block:clamp(2rem,4vw,3rem); background:var(--sand);border-block:1px solid var(--line-2);overflow:hidden } .trust-in{ position:relative;z-index:2; display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,3vw,2.5rem) } .trust-item{ display:flex;flex-direction:column;gap:.3rem;align-items:center;text-align:center; padding-inline:.5rem;position:relative } .trust-item + .trust-item::before{ content:'';position:absolute;left:0;top:12%;bottom:12%;width:1px; background:linear-gradient(180deg,transparent,var(--line),transparent) } .trust-item strong{ font-family:var(--f-display);font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:500;color:var(--navy);line-height:1;letter-spacing:-.02em } .trust-item span{font-size:.8rem;color:var(--muted);letter-spacing:.03em} /* Key phrases carry a peach wash sitting behind the baseline rather than a marker-pen block, so emphasis reads without fighting the type colour. */ /* Emphasis only. The peach highlighter wash that used to sit behind these phrases read as a stray underline rather than a deliberate mark, so the weight and ink now carry the emphasis on their own. */ .hl{color:var(--ink);font-weight:600} .trust-rating strong{font-size:1.05rem;color:var(--ink);font-family:var(--f-ui);font-weight:500} @media (max-width:720px){ .trust-in{grid-template-columns:repeat(2,1fr);gap:1.75rem 1rem} .trust-item:nth-child(3)::before{display:none} } /* ribbon marquee */ .ribbon{ overflow:hidden;padding-block:.9rem; background:var(--navy-deep);color:var(--navy-soft) } .ribbon-row{overflow:hidden} .ribbon-track{display:flex;align-items:center;gap:1.5rem;width:max-content;will-change:transform} .ribbon-item{ font-family:var(--f-ui);font-size:.82rem;font-weight:400; letter-spacing:.2em;text-transform:uppercase;white-space:nowrap } .ribbon-dot{display:grid;place-items:center;color:var(--blush);opacity:.8} /* ─────────────────────────────────────────────────────── 9. services */ .services{position:relative;padding-block:var(--sec-y) clamp(3rem,6vw,5rem);overflow:hidden;background:var(--cream)} .services .decor .pat-grid{opacity:.55} .services .decor .orb-1{width:520px;height:520px;top:-10%;left:-12%} .services .decor .orb-2{width:460px;height:460px;bottom:0;right:-14%} .rail-wrap{position:relative;margin-top:clamp(1rem,2vw,2rem);z-index:2} .rail{ overflow-x:auto;overflow-y:hidden;scrollbar-width:none; cursor:grab;padding-block:1rem; -ms-overflow-style:none } .rail::-webkit-scrollbar{display:none} .rail.is-dragging{cursor:grabbing} .rail-track{ display:flex;gap:clamp(1rem,1.8vw,1.6rem);width:max-content; padding-inline:max(var(--gut),calc((100vw - var(--shell)) / 2 + var(--gut))) } .svc{ width:clamp(268px,25vw,320px);flex:none; display:flex;flex-direction:column; background:var(--paper);border:1px solid var(--line-2); border-radius:var(--r-lg);overflow:hidden; box-shadow:var(--sh-1); transition:transform .6s var(--e-out),box-shadow .6s var(--e-out),border-color .5s } .svc:hover{transform:translateY(-8px);box-shadow:var(--sh-3);border-color:var(--navy-soft)} .svc-img{ position:relative;aspect-ratio:16/11;overflow:hidden; background:var(--haze);border-bottom:1px solid var(--line-2) } .svc-img img{ width:100%;height:100%;object-fit:cover; /* line art, so the zoom stays small — a heavy scale softens the hairlines */ transition:transform 1.1s var(--e-out) } .svc:hover .svc-img img{transform:scale(1.04)} .svc-img::after{ content:'';position:absolute;inset:auto 0 0 0;height:36%; background:linear-gradient(180deg,transparent,rgba(248,244,239,.9)) } .svc-body{ padding:1.35rem 1.4rem 1.5rem;position:relative; /* the column stretches so the WhatsApp link can be pushed to the floor — copy lengths differ per treatment and a ragged row of CTAs reads sloppy */ display:flex;flex-direction:column;flex:1 } /* a light sweep crosses the tile as it flips */ .svc-title{font-size:1.22rem;margin-bottom:.55rem} .svc-text{font-size:.9rem;color:var(--muted);line-height:1.65;margin-bottom:.9rem} .svc-meta{ display:flex;align-items:center;gap:.4rem; font-size:.76rem;color:var(--navy);margin-bottom:1.1rem } .svc-meta svg{flex:none} .svc-link{ display:inline-flex;align-items:center;gap:.4rem; font-family:var(--f-ui);font-size:.85rem;font-weight:500;color:var(--ink); padding-bottom:2px;border-bottom:1px solid var(--line); transition:color .3s,border-color .3s,gap .3s } .svc-link{margin-top:auto;align-self:flex-start} .svc-link:hover{color:var(--navy);border-color:var(--navy-mid);gap:.65rem} .rail-btn{ width:44px;height:44px;display:grid;place-items:center;border-radius:50%; background:var(--paper);border:1px solid var(--line);color:var(--ink); transition:transform .4s var(--e-out),background .3s,color .3s,border-color .3s } .rail-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:scale(1.06)} .svc-cta{ position:relative;z-index:2; display:flex;align-items:center;justify-content:space-between;gap:1.75rem; flex-wrap:wrap;margin-top:clamp(2.5rem,5vw,4rem); padding:clamp(1.75rem,3.5vw,2.75rem); border-radius:var(--r-lg);overflow:hidden; background:linear-gradient(115deg,var(--navy-tint),var(--haze) 55%,var(--blush-tint)); border:1px solid var(--line-cool) } .svc-cta::before{ content:'';position:absolute;inset:0;pointer-events:none; background-image:var(--pat-grid);background-size:52px 52px;opacity:.7 } .svc-cta > *{position:relative} .svc-cta h3{font-size:clamp(1.35rem,2.4vw,1.85rem);margin-bottom:.45rem} .svc-cta p{color:var(--muted);font-size:.94rem;max-width:52ch;margin:0} /* ── who we are: digital smile design drawn over the photograph ───────── The overlay is one SVG in the image's own 1600x1000 coordinate space, so every mark stays welded to the tooth it describes at any frame width. */ .whois{position:relative;padding-block:var(--sec-y);overflow:hidden;background:var(--cream)} .whois .decor .pat-dot{opacity:.6} .whois-in{ position:relative;z-index:2; display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(2rem,4.5vw,4rem);align-items:center } .whois-frame{ position:relative;margin:0;aspect-ratio:16/10; border-radius:var(--r-lg);overflow:hidden;background:var(--sand-2); box-shadow:var(--sh-3) } .whois-frame > img{width:100%;height:100%;object-fit:cover} .whois-frame::after{ content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5) } /* The section's own signature, laid over the photograph rather than baked into it — so it stays selectable, translatable and indexable, and rescales with the frame. Same bottom-scrim treatment as the clinic tour tiles. */ .whois-cap{ position:absolute;inset:auto 0 0 0;z-index:2; display:flex;flex-direction:column;gap:.28rem;color:#fff; padding:clamp(2.4rem,6vw,3.4rem) clamp(1.1rem,2.4vw,1.7rem) clamp(1rem,2vw,1.35rem); background:linear-gradient(180deg, transparent,rgba(16,23,54,.30) 45%,rgba(16,23,54,.84)) } .whois-cap b{ font-family:var(--f-ui);font-size:.7rem;font-weight:500; letter-spacing:.2em;text-transform:uppercase;color:var(--blush-soft) } .whois-cap span{ font-family:var(--f-display);font-size:clamp(1.05rem,1.7vw,1.35rem); line-height:1.25;letter-spacing:-.01em } /* strokes draw themselves once the section arrives */ /* the scan band sweeps the upper arch, clipped to it */ /* callouts */ .whois-points{display:flex;flex-direction:column;gap:.75rem;margin:1.6rem 0 2rem} .whois-points li{ display:flex;align-items:flex-start;gap:.75rem;font-size:.94rem;line-height:1.6 } .wp-ic{ flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:11px; background:var(--navy-tint);color:var(--navy) } .whois-actions{display:flex;flex-wrap:wrap;gap:.7rem} @media (max-width:960px){ .whois-in{grid-template-columns:1fr} .whois-media{order:-1} } /* below tablet the teeth are too small for callout type — the arcs, ticks and scan still read, so only the labels go */ /* ─────────────────────────────────────────────────────── 10. process */ .process{position:relative;padding-block:var(--sec-y);overflow:hidden;background:var(--sand)} .process .decor .pat-dot-lg{opacity:.7} .process .decor .orb-1{width:520px;height:520px;top:10%;right:-12%} /* The rail sits in its own lane at the far left and is never crossed by a step panel: the panel background lives on the step's text block, not on the whole row. The disc then breaks the line with a ring of section ground, so the timeline reads as beads on a thread rather than a stripe drawn through the numbers. */ /* The rail spans first disc centre to last disc centre and no further. Left to the list's own box it overhung the first number by ~70px and the last by ~20px, and those two dangling stubs read as a line struck through the sequence. --rail-top and --rail-h are measured in js/site.js, because the offsets move with the type. */ /* ─────────────────────────────────────────────────────── 11. results / B&A */ .ba{ position:relative;overflow:hidden;border-radius:var(--r-lg); background:var(--sand-2);aspect-ratio:4/5; touch-action:pan-y;user-select:none;-webkit-user-select:none; box-shadow:var(--sh-3);cursor:ew-resize; --pos:50% } .ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none} /* clip-path keeps both layers perfectly registered at any container width */ .ba-clip{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)} .ba-tag{ position:absolute;top:1rem;z-index:3; padding:.34rem .8rem;border-radius:var(--r-full); font-family:var(--f-ui);font-size:.66rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase; background:rgba(255,255,255,.88);color:var(--navy-deep); pointer-events:none;transition:opacity .3s } .ba-tag-b{left:1rem} .ba-tag-a{right:1rem;background:rgba(35,46,99,.9);color:#fff} .ba-handle{ position:absolute;top:0;bottom:0;left:var(--pos);width:2px;z-index:4; background:rgba(255,255,255,.95);transform:translateX(-1px); box-shadow:0 0 24px rgba(16,23,54,.4);pointer-events:none } .ba-handle i{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:52px;height:52px;display:grid;place-items:center;border-radius:50%; background:#fff;color:var(--navy);box-shadow:0 8px 28px rgba(16,23,54,.28); transition:transform .4s var(--e-spring) } .ba:hover .ba-handle i{transform:translate(-50%,-50%) scale(1.1)} .ba:focus-visible{outline:3px solid var(--navy-mid);outline-offset:4px} .ba-card{ display:block;text-align:left;border-radius:var(--r);overflow:hidden; background:var(--paper);border:1px solid var(--line-2);box-shadow:var(--sh-1); transition:transform .55s var(--e-out),box-shadow .55s var(--e-out),border-color .4s } .ba-card:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--navy-soft)} /* The photographs are pre-cropped to a common face box, so the frame only has to hold them: a fixed 4:5 well with a hairline foot that separates picture from caption the same way the treatment cards do. */ .bac-media{ position:relative;display:block;aspect-ratio:4/5;overflow:hidden; background:var(--sand-2);border-bottom:1px solid var(--line-2) } .bac-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%} .bac-a{opacity:0;transform:scale(1.04);transition:opacity .6s var(--e-io),transform .9s var(--e-out)} .ba-card:hover .bac-a,.ba-card:focus-visible .bac-a{opacity:1;transform:none} .bac-swap{ position:absolute;left:.7rem;bottom:.7rem;z-index:2; display:inline-flex;align-items:center;gap:.35rem; padding:.3rem .65rem;border-radius:var(--r-full); font-size:.68rem;font-weight:500;letter-spacing:.04em; background:rgba(255,255,255,.92);color:var(--navy-deep); transition:opacity .3s } .ba-card:hover .bac-swap{opacity:0} .bac-body{display:block;padding:.95rem 1rem 1.15rem} .bac-tag{ display:inline-block;font-family:var(--f-ui);font-size:.62rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--blush-deep);margin-bottom:.4rem } .bac-title{display:block;font-family:var(--f-display);font-size:1.02rem;font-weight:500;line-height:1.28;letter-spacing:-.015em;margin-bottom:.45rem;color:var(--ink);min-height:2.6em} .bac-stat{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--muted-2)} .bac-stat svg{color:var(--navy-mid);flex:none} /* lightbox */ .lb{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:clamp(.75rem,3vw,2rem)} .lb[hidden]{display:none} .lb-backdrop{position:absolute;inset:0;background:rgba(16,23,54,.55);backdrop-filter:blur(12px);opacity:0;transition:opacity .4s} .lb.is-open .lb-backdrop{opacity:1} .lb-panel{ position:relative;width:min(1080px,100%);max-height:92vh;max-height:92svh;overflow:auto; background:var(--cream);border-radius:var(--r-lg); box-shadow:0 40px 120px rgba(16,23,54,.3); opacity:0;transform:translateY(24px) scale(.97); transition:opacity .45s var(--e-out),transform .5s var(--e-out) } .lb.is-open .lb-panel{opacity:1;transform:none} .lb-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem);padding:clamp(1.25rem,3vw,2rem)} .lb-ba{aspect-ratio:4/5;max-height:70vh;max-height:70svh} .lb-info h3{font-size:clamp(1.4rem,2.6vw,2rem);margin:.8rem 0 .7rem} .lb-info p{color:var(--muted);line-height:1.7} .lb-count{font-size:.78rem;color:var(--muted-2);margin:1.2rem 0 1.4rem;font-weight:500;letter-spacing:.08em} .lb-close,.lb-nav{ position:absolute;z-index:5;width:46px;height:46px;display:grid;place-items:center; border-radius:var(--r-full);background:rgba(255,255,255,.95);color:var(--ink); box-shadow:var(--sh-2);transition:background .3s,color .3s,transform .4s var(--e-out) } .lb-close{top:.85rem;right:.85rem} .lb-close:hover,.lb-nav:hover{background:var(--navy);color:#fff;transform:scale(1.07)} .lb-nav{top:50%;margin-top:-23px} .lb-prev{left:-58px} .lb-next{right:-58px} @media (max-width:1220px){ .lb-prev{left:.85rem} .lb-next{right:.85rem} .lb-nav{top:auto;bottom:.85rem;margin-top:0} } @media (max-width:820px){ .lb-body{grid-template-columns:1fr} .lb-ba{max-height:52vh;max-height:52svh} .lb-nav{position:static;margin:0} } /* ─────────────────────────────────────────────────────── 12. why nital */ .why{ position:relative;padding-block:var(--sec-y);overflow:hidden; background: radial-gradient(80% 60% at 100% 0%,var(--haze-2),transparent 60%), radial-gradient(70% 60% at 0% 100%,var(--blush-tint),transparent 60%), var(--haze) } .why .decor .orb-1{width:520px;height:520px;top:-15%;left:30%} .why .shell{position:relative;z-index:2} .why .eyebrow{color:var(--blush-deep)} .why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)} @media (max-width:940px){.why-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.why-grid{grid-template-columns:1fr}} .why-card{ position:relative;overflow:hidden; padding:1.9rem 1.6rem 1.7rem;border-radius:var(--r-lg); background:rgba(255,255,255,.86); border:1px solid rgba(255,255,255,.9); box-shadow:var(--sh-1); transition:transform .6s var(--e-out),box-shadow .6s var(--e-out),background .5s } .why-card::before{ content:'';position:absolute;inset:auto auto -40% -30%;width:180px;height:180px; border-radius:50%;background:radial-gradient(circle,rgba(35,46,99,.16),transparent 70%); opacity:0;transition:opacity .6s var(--e-out) } .why-card:hover{transform:translateY(-6px);box-shadow:var(--sh-2);background:rgba(255,255,255,.94)} .why-card:hover::before{opacity:1} .why-card > *{position:relative} .why-icon{ display:grid;place-items:center;width:50px;height:50px;border-radius:16px; background:var(--navy-tint);color:var(--navy);margin-bottom:1.15rem; transition:transform .55s var(--e-spring),background .4s,color .4s } .why-card:hover .why-icon{background:var(--navy);color:#fff;transform:rotate(-7deg)} .why-title{font-size:1.18rem;margin-bottom:.6rem} .why-text{font-size:.9rem;color:var(--muted);line-height:1.68;margin:0} /* travelling-patient panel — full width beneath the why grid */ .why-nri{ display:flex;gap:clamp(1.1rem,2.4vw,2rem);align-items:flex-start; margin-top:clamp(1rem,2vw,1.5rem); padding:clamp(1.6rem,3vw,2.4rem);border-radius:var(--r-lg); background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.9); box-shadow:var(--sh-1) } .why-nri-ic{ display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:18px; background:var(--blush-tint);color:var(--blush-deep) } .why-nri-body h3{font-size:1.24rem;margin-bottom:.6rem} .why-nri-body p{font-size:.94rem;color:var(--muted);line-height:1.72;margin:0 0 1.25rem;max-width:70ch} .why-nri-actions{display:flex;gap:.6rem;flex-wrap:wrap} @media (max-width:620px){ .why-nri{flex-direction:column} .why-nri-actions .btn{flex:1 1 100%} } .why-n{ position:absolute;top:1.1rem;right:1.3rem; font-family:var(--f-display);font-size:2.4rem;font-weight:400;font-style:italic; color:var(--navy-mid);opacity:.14;line-height:1 } /* ─────────────────────────────────────────────────────── 13. standards band */ .band{ position:relative;overflow:hidden; min-height:clamp(420px,54vw,600px);display:grid;align-items:center; color:#fff } /* Every layer is oversized so it still covers the frame at the extremes of its travel — a parallax layer sized to the section shows an edge as soon as it moves. The overscan must beat the layer's own factor (0.22) times the reader's clamp (1.2), so 30% covers 26.4% with room to spare. --plx is written by the scroll reader in js/site.js. */ .band-media{ position:absolute;inset:-30% 0;z-index:0; transform:translate3d(0,var(--plx,0px),0); will-change:transform } .band-media img{width:100%;height:100%;object-fit:cover} .band-media::after{ content:'';position:absolute;inset:0; background:linear-gradient(100deg,rgba(16,23,54,.9) 0%,rgba(16,23,54,.64) 45%,rgba(16,23,54,.26) 100%) } .band-pat{ position:absolute;inset:-30% 0;z-index:1;pointer-events:none; background-image:var(--pat-grid);background-size:56px 56px;opacity:.35; filter:invert(1) brightness(2); transform:translate3d(0,var(--plx,0px),0) } .band-glow{ position:absolute;inset:-24% -10%;z-index:1;pointer-events:none; background: radial-gradient(46% 60% at 18% 50%,rgba(35,46,99,.5),transparent 70%), radial-gradient(38% 50% at 88% 30%,rgba(223,161,137,.35),transparent 70%); transform:translate3d(0,var(--plx,0px),0) } /* the parallax transform lives on .shell, never on .band-in — that element carries data-reveal, and two rules writing `transform` on one element means whichever loses the cascade silently does nothing */ .band .shell{position:relative;z-index:2;transform:translate3d(0,var(--plx,0px),0)} .band-in{position:relative;z-index:2;padding-block:clamp(3.5rem,7vw,5.5rem);max-width:720px} .band-in .eyebrow{color:var(--blush-soft)} .band-in .eyebrow svg{color:var(--navy-soft)} .band-quote{ font-family:var(--f-display);font-size:clamp(1.5rem,3.2vw,2.5rem);font-weight:400; font-style:italic;line-height:1.28;color:#fff;letter-spacing:-.015em; margin:0 0 1.5rem } .band-quote span{font-style:normal;font-weight:500;color:var(--blush-soft)} .band-by{display:flex;align-items:center;gap:.75rem;font-size:.88rem;color:var(--on-dark-mute)} .band-by strong{color:#fff;font-weight:500} .band-line{width:34px;height:1px;background:var(--blush);flex:none} .band-marks{ display:flex;gap:clamp(1.25rem,3vw,2.5rem);flex-wrap:wrap;margin-top:2.25rem; padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.18) } .band-mark{display:flex;align-items:center;gap:.6rem;font-size:.84rem;color:var(--on-dark)} .band-mark svg{color:var(--navy-soft);flex:none} /* ─────────────────────────────────────────────────────── 14. clinic tour */ .tour{position:relative;padding-block:var(--sec-y);overflow:hidden;background:var(--cream)} .tour .decor .pat-dot{opacity:.6} .tour .decor .orb-1{width:480px;height:480px;bottom:-8%;right:-10%} .tour .shell{position:relative;z-index:2} .reel{ position:relative;border-radius:var(--r-lg);overflow:hidden; aspect-ratio:9/13;background:var(--sand-2);box-shadow:var(--sh-3) } .reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s} .reel.is-playing video{opacity:1} .reel-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s,transform 1.2s var(--e-out)} .reel.is-playing .reel-poster{opacity:0} .reel::after{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(16,23,54,.16),transparent 40%,rgba(16,23,54,.42)); transition:opacity .5s } .reel.is-playing::after{opacity:0} .reel-play{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3; width:76px;height:76px;display:grid;place-items:center;border-radius:50%; background:rgba(255,255,255,.94);color:var(--navy); box-shadow:0 12px 40px rgba(16,23,54,.3); transition:transform .45s var(--e-spring),background .35s } .reel-play:hover{transform:translate(-50%,-50%) scale(1.08)} .reel.is-playing .reel-play{opacity:0;pointer-events:none} .reel-ring{ position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(255,255,255,.7); animation:pulseRing 2.6s var(--e-out) infinite } .reel-cap{ position:absolute;left:1rem;bottom:1rem;z-index:3; font-family:var(--f-ui);font-size:.76rem;color:#fff; padding:.35rem .8rem;border-radius:var(--r-full); background:rgba(16,23,54,.5); transition:opacity .4s } .reel.is-playing .reel-cap{opacity:0} /* ─────────────────────────────────────────────────────── 15. doctor */ .doctor{ position:relative;padding-block:var(--sec-y);overflow:hidden; background:var(--sand) } .doctor .decor .orb-1{width:520px;height:520px;top:-10%;left:-14%} .doc-in{ position:relative;z-index:2; display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem);align-items:center } .doc-media{position:relative} .doc-frame{ position:relative;border-radius:var(--arch);overflow:hidden; aspect-ratio:4/5;background:var(--sand-2); box-shadow:0 30px 80px rgba(16,23,54,.16) } .doc-frame img{width:100%;height:100%;object-fit:cover} .doc-frame::after{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5) } /* the outline sits just inside the column so it can never be clipped by the page's overflow guard, however wide the screen gets */ .doc-media::before{ content:'';position:absolute;inset:-14px -14px 22px -14px;border-radius:var(--arch); border:1px solid var(--navy-soft);opacity:.65;pointer-events:none } /* a scrim across the foot of the portrait so the two chips always sit on something dark enough to read against, whatever the photograph does */ .doc-frame::before{ content:'';position:absolute;inset:auto 0 0 0;height:42%;z-index:1; background:linear-gradient(180deg,transparent,rgba(16,23,54,.5)); pointer-events:none } .doc-float{ position:absolute;z-index:3; display:flex;flex-direction:column;gap:.15rem; padding:.8rem 1rem;border-radius:var(--r-sm); background:rgba(255,255,255,.95); border:1px solid rgba(255,255,255,.9);box-shadow:var(--sh-2); max-width:46% } .doc-float strong{font-family:var(--f-display);font-size:1.5rem;font-weight:500;color:var(--navy);line-height:1} .doc-float span{font-size:.72rem;color:var(--muted);line-height:1.35} /* both chips live inside the frame, low down where the arch is still rectangular — nothing hangs into the gutter and nothing gets cut */ .doc-float-1{left:5%;bottom:6%;animation:floatY 7s var(--e-io) infinite} .doc-float-2{right:5%;bottom:6%;animation:floatY 8.5s var(--e-io) infinite reverse} .is-hidden-tab .doc-float{animation-play-state:paused} @media (max-width:400px){ .doc-float{max-width:44%;padding:.6rem .7rem} .doc-float strong{font-size:1.2rem} } .doc-qual{ font-family:var(--f-ui);font-size:.9rem;color:var(--blush-deep); letter-spacing:.05em;margin-bottom:1.4rem } .doc-text{color:var(--muted);line-height:1.75;margin-bottom:1.1rem} .doc-creds{display:flex;flex-direction:column;gap:.6rem;margin:1.6rem 0 2rem} .doc-creds li{display:flex;align-items:flex-start;gap:.6rem;font-size:.92rem} .doc-creds svg{flex:none;margin-top:3px;color:var(--navy-mid)} .doc-actions{display:flex;flex-wrap:wrap;gap:.7rem} @media (max-width:900px){ .doc-in{grid-template-columns:1fr} .doc-media{max-width:420px;margin-inline:auto;width:100%} } @media (max-width:520px){ .doc-float-1{left:4%} .doc-float-2{right:4%} .doc-media::before{inset:-9px -9px 16px -9px} } /* ─────────────────────────────────────────────────────── 16. reviews */ .reviews{position:relative;padding-block:var(--sec-y);overflow:hidden;background:var(--haze)} .reviews .decor .pat-cross{opacity:.5} .reviews .decor .orb-1{width:460px;height:460px;top:0;right:-12%} .reviews .shell{position:relative;z-index:2} .rev-marquee{position:relative;z-index:2;overflow:hidden;padding-block:.5rem 1rem} .rev-marquee::before,.rev-marquee::after{ content:'';position:absolute;top:0;bottom:0;width:clamp(40px,8vw,140px);z-index:3;pointer-events:none } .rev-marquee::before{left:0;background:linear-gradient(90deg,var(--haze),transparent)} .rev-marquee::after{right:0;background:linear-gradient(270deg,var(--haze),transparent)} .rev-row{overflow:hidden} .rev-track{display:flex;gap:clamp(1rem,1.6vw,1.4rem);width:max-content;padding-inline:var(--gut);will-change:transform} .rev{ position:relative;width:clamp(280px,26vw,340px);flex:none;margin:0; padding:1.9rem 1.5rem 1.4rem;border-radius:var(--r-lg); background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.9);box-shadow:var(--sh-1); transition:transform .5s var(--e-out),box-shadow .5s var(--e-out) } .rev:hover{transform:translateY(-5px);box-shadow:var(--sh-2)} .rev-q{position:absolute;top:1rem;right:1.2rem;color:var(--navy-soft)} .rev blockquote{ margin:.7rem 0 1.2rem;font-size:.94rem;line-height:1.7;color:var(--text) } .rev figcaption{display:flex;align-items:center;gap:.7rem;padding-top:1rem;border-top:1px solid var(--line-2)} .rev-av{ width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%; background:var(--blush-tint);color:var(--blush-deep); font-family:var(--f-display);font-size:1rem;font-weight:500 } .rev figcaption strong{display:block;font-size:.9rem;font-weight:600;color:var(--ink)} .rev figcaption em{font-style:normal;font-size:.74rem;color:var(--muted-2)} .rev-more{text-align:center;margin-top:1.75rem} /* ─────────────────────────────────────────────────────── 17. journal & faq */ .journal{position:relative;padding-block:var(--sec-y);overflow:hidden;background:var(--cream)} .journal .decor .pat-grid{opacity:.5} .journal .shell{position:relative;z-index:2} .jrn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2vw,1.75rem)} @media (max-width:900px){.jrn-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){.jrn-grid{grid-template-columns:1fr}} .jrn{ border-radius:var(--r-lg);overflow:hidden;background:var(--paper); border:1px solid var(--line-2);box-shadow:var(--sh-1); transition:transform .55s var(--e-out),box-shadow .55s var(--e-out),border-color .4s } .jrn:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--navy-soft)} .jrn-link{display:flex;flex-direction:column;height:100%} .jrn-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--sand-2)} .jrn-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-out)} .jrn:hover .jrn-media img{transform:scale(1.06)} .jrn-body{display:flex;flex-direction:column;flex:1;padding:1.3rem 1.4rem 1.5rem} .jrn-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.74rem;color:var(--muted-2);margin-bottom:.8rem} .jrn-title{font-size:1.2rem;line-height:1.32;margin-bottom:.6rem} .jrn-ex{font-size:.89rem;color:var(--muted);line-height:1.65;margin-bottom:1.1rem} .jrn-cta{ display:inline-flex;align-items:center;gap:.4rem;margin-top:auto; font-family:var(--f-ui);font-size:.85rem;font-weight:500;color:var(--navy); transition:gap .3s } .jrn:hover .jrn-cta{gap:.65rem} .faq{position:relative;padding-block:var(--sec-y);overflow:hidden;background:var(--sand)} .faq .decor .pat-dot-warm{opacity:.65} .faq .decor .orb-1{width:480px;height:480px;bottom:-14%;left:-10%} .faq-in{ position:relative;z-index:2; display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(2rem,5vw,4rem);align-items:start } .faq-head{position:sticky;top:calc(var(--head-h) + 2.5rem)} .faq-head .sec-lede{margin-bottom:1.5rem} .faq-list{display:flex;flex-direction:column;gap:.7rem} .faq-item{ border-radius:var(--r);overflow:hidden; background:rgba(255,255,255,.8);border:1px solid var(--line-2); transition:background .4s,border-color .4s,box-shadow .4s } .faq-item[open]{background:var(--paper);border-color:var(--navy-soft);box-shadow:var(--sh-1)} .faq-item summary{ display:flex;align-items:center;gap:.9rem;cursor:pointer; padding:1.15rem 1.3rem;list-style:none; transition:color .3s } .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{color:var(--navy)} .fq-n{ font-family:var(--f-ui);font-size:.68rem;font-weight:500;letter-spacing:.12em; color:var(--blush-deep);flex:none } .fq-q{font-family:var(--f-display);font-size:1.03rem;font-weight:500;line-height:1.4;flex:1;color:var(--ink)} .fq-i{ flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%; background:var(--navy-tint);color:var(--navy); transition:transform .45s var(--e-out),background .35s,color .35s } .faq-item[open] .fq-i{transform:rotate(135deg);background:var(--navy);color:#fff} .fq-a{padding:0 1.3rem 1.3rem 3.1rem} .fq-a p{font-size:.93rem;color:var(--muted);line-height:1.72;margin:0} .faq-item[open] .fq-a{animation:fqOpen .5s var(--e-out)} @keyframes fqOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (max-width:900px){ .faq-in{grid-template-columns:1fr} .faq-head{position:relative;top:0} } /* ─────────────────────────────────────────────────────── 18. contact */ .contact{ position:relative;padding-block:var(--sec-y);overflow:hidden; background: radial-gradient(70% 60% at 100% 0%,var(--haze-2),transparent 60%), var(--cream) } .contact .decor .orb-1{width:520px;height:520px;top:10%;right:-14%} .contact-in{ position:relative;z-index:2; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(2rem,4vw,3.5rem);align-items:start } .ci-list{display:flex;flex-direction:column;gap:1.25rem;margin:1.75rem 0} .ci-list li{display:flex;gap:1rem} .ci-ic{ flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:14px; background:var(--navy-tint);color:var(--navy) } .ci-list strong{display:block;font-family:var(--f-ui);font-weight:600;font-size:.95rem;margin-bottom:.2rem} .ci-list p{font-size:.9rem;color:var(--muted);line-height:1.6;margin:0 0 .3rem} .ci-list a{transition:color .3s} .ci-list p a:hover{color:var(--navy)} .ci-link{ display:inline-flex;align-items:center;gap:.35rem; font-family:var(--f-ui);font-size:.82rem;font-weight:500;color:var(--navy) } .ci-link:hover{gap:.55rem} .map{ border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2); box-shadow:var(--sh-1);aspect-ratio:16/9;background:var(--sand-2) } .map iframe{width:100%;height:100%;border:0;filter:saturate(.78) contrast(.96)} .contact-form-wrap{position:relative} .cform{ position:relative;padding:clamp(1.5rem,3vw,2.25rem);border-radius:var(--r-lg); background:var(--paper);border:1px solid var(--line-2); box-shadow:var(--sh-2);overflow:hidden } .cform::before{ content:'';position:absolute;inset:0 0 auto 0;height:4px; background:linear-gradient(90deg,var(--navy-mid),var(--blush),var(--gold)) } .cf-title{font-size:clamp(1.3rem,2.2vw,1.65rem);margin-bottom:.35rem} .cf-sub{font-size:.88rem;color:var(--muted-2);margin-bottom:1.6rem} .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem} @media (max-width:520px){.cf-row{grid-template-columns:1fr}} .field{position:relative;margin-bottom:.9rem} .field input,.field select,.field textarea{ width:100%;padding:1.35rem .95rem .55rem;border-radius:var(--r-xs); background:var(--cream);border:1px solid var(--line); font-size:.94rem;outline:none; transition:border-color .3s,box-shadow .3s,background .3s } .field textarea{resize:vertical;min-height:96px} .field label{ position:absolute;left:.95rem;top:.95rem; font-size:.9rem;color:var(--muted-2);pointer-events:none; transform-origin:left top; transition:transform .3s var(--e-out),color .3s } .field .opt{font-size:.78em;opacity:.7} .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--navy-mid);background:var(--paper); box-shadow:0 0 0 4px rgba(35,46,99,.12) } .field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label, .field-select select:focus + label, .field-select select.has-value + label{ transform:translateY(-.62rem) scale(.76);color:var(--navy) } .field-select{position:relative} .field-select select{ appearance:none;-webkit-appearance:none;cursor:pointer; padding-right:2.75rem /* clear of the chevron */ } /* A