/* ========================================================================== Dinçalya Smile — global stylesheet Design reference: 2613px wide comps -> 1560px viewport (scale 0.6) ========================================================================== */ /* ---------- tokens ---------- */ :root{ --ink:#020b12; /* brand near-black */ --ink-2:#0b141c; --gold:#c2a363; --gold-line:#c58e34; /* 1px card outlines, measured off the comp */ --gold-dark:#a8894b; --green:#13b550; --green-dark:#0f9a43; /* WhatsApp's own green — brighter than the site green, and only ever used for it */ --wa:#25d366; --wa-dark:#1ebe5a; --purple:#4b0a64; --purple-dark:#3b0850; --clock:#180d1e; --navy:#0a1a28; /* footer / dark sections */ --text:#111417; --muted:#5b6169; --line:#e3e5e8; --white:#fff; --container:1200px; --wide:1500px; /* tech cards + benefits strip — 93.6% of the comp */ --doctors:1410px; /* doctors band — 87.4% of the comp */ --gallery:1550px; /* smile gallery — 97.2% of the comp */ --blog:1300px; /* blog row — 80.3% of the comp */ --f-sans:"Roboto","Helvetica Neue",Arial,sans-serif; --f-display:"Poppins","Roboto",sans-serif; --f-cond:"Roboto Condensed","Roboto",sans-serif; --f-serif:"Playfair Display",Georgia,serif; --header-h:186px; /* diagonal “north-east” arrow used inside buttons */ --arrow-ne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 17.5 17.5 6.5'/%3E%3Cpath d='M9 6.5h8.5V15'/%3E%3C/svg%3E"); } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--f-sans); font-size:16px; line-height:1.55; color:var(--text); background:#fff; overflow-x:clip; /* not hidden: hidden would break position:sticky */ } img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer} h1,h2,h3,h4,p,ul,ol,figure{margin:0} ul,ol{padding:0;list-style:none} :focus-visible{outline:2px solid var(--gold);outline-offset:2px} [hidden]{display:none!important} /* ---------- layout ---------- */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px} .container-wide{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:24px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:space-between;gap:18px; min-width:237px;min-height:48px;padding:0 15px 0 28px;border-radius:6px; font-size:18px;font-weight:600;letter-spacing:.1px;line-height:1; transition:background-color .18s ease,color .18s ease,transform .18s ease; } /* also used by .tcard__more, so it is deliberately not scoped to .btn */ .btn__arrow{ flex:none;width:26px;height:26px;font-size:0;line-height:0; background:currentColor; -webkit-mask:var(--arrow-ne) center/contain no-repeat; mask:var(--arrow-ne) center/contain no-repeat; } .btn--green{background:var(--green);color:#fff} .btn--green:hover{background:var(--green-dark)} .btn--purple{background:var(--purple);color:#fff} .btn--purple:hover{background:var(--purple-dark)} .btn--gold{background:var(--gold);color:var(--ink);justify-content:center;padding-inline:26px; font-weight:700;letter-spacing:.4px} .btn--gold:hover{background:var(--gold-dark)} .btn--center{margin-inline:auto} .btn-row{display:flex;flex-wrap:wrap;gap:22px} .btn-wrap{display:flex;justify-content:center} /* “Get Price Now” appears many times, always centred on its own row */ .cta-row{padding:34px 0;display:flex;justify-content:center} /* ---------- section furniture ---------- */ .section{padding:64px 0} .section-head{margin-bottom:44px} .section-title{font-size:52px;line-height:1.12;font-weight:700;letter-spacing:-.5px} .section-sub{margin-top:10px;font-size:19px;color:#3d434a} .section-title--display{font-family:var(--f-display);font-weight:700} .center{text-align:center} /* ========================================================================== Header ========================================================================== */ .site-header{background:var(--ink);color:#fff;position:relative;z-index:40} .site-header .container{max-width:1348px} /* the header runs wider than the page container */ .header-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:31px 0 36px} .brand{display:inline-block} .brand img{width:280px;height:auto} .header-tools{display:flex;align-items:center;gap:26px} .socials{display:flex;align-items:center;gap:22px} .socials a{color:var(--gold);display:grid;place-items:center;transition:opacity .18s} .socials a:hover{opacity:.7} .socials svg{width:22px;height:22px;fill:currentColor} .btn-appointment{ display:inline-flex;align-items:center;justify-content:center; height:50px;padding:0 26px;border-radius:4px;background:var(--gold);color:var(--ink); font-weight:700;font-size:15px;letter-spacing:.4px;transition:background-color .18s; } .btn-appointment:hover{background:var(--gold-dark)} .header-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:2px} .nav{display:flex;align-items:center;gap:6px} .nav a{ display:inline-flex;align-items:center;height:42px;padding:0 26px;border-radius:3px; font-size:16px;color:#fff;transition:background-color .18s,color .18s;white-space:nowrap; } .nav a:hover{background:rgba(194,163,99,.22)} .nav a[aria-current="page"]{background:var(--gold);color:var(--ink);font-weight:500} .lang{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid rgba(255,255,255,.55); border-radius:3px;font-size:12px;color:#fff} .lang{cursor:pointer;transition:border-color .18s} .lang:hover{border-color:#fff} .lang__flag{display:grid;place-items:center;width:26px;height:17px;border-radius:2px;overflow:hidden} .lang img,.lang svg{width:26px;height:17px;border-radius:2px} /* three bars that fold into a cross — the only chrome the open menu needs */ .nav-toggle{display:none;position:relative;width:44px;height:44px;place-items:center;color:#fff; transition:color .2s ease} .nav-toggle__bars{position:relative;display:block;width:25px;height:2px;border-radius:2px; background:currentColor;transition:background-color .16s ease} .nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0; width:100%;height:2px;border-radius:2px;background:currentColor; transition:transform .3s cubic-bezier(.4,0,.2,1)} .nav-toggle__bars::before{top:-7px} .nav-toggle__bars::after{top:7px} .nav-toggle[aria-expanded="true"]{color:var(--gold)} .nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent} .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:translateY(7px) rotate(45deg)} .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:translateY(-7px) rotate(-45deg)} /* the menu's own block of actions — only ever shown inside the mobile overlay */ .nav__foot{display:none} /* Treatments carries a disclosure on phones; on desktop it is only a link */ .nav__group{display:contents} .nav__more,.nav__sub{display:none} /* ========================================================================== Hero (home) ========================================================================== */ .hero{position:relative;background:var(--ink) url("../img/hero.jpg") center/cover no-repeat; aspect-ratio:2613/1091;min-height:560px;max-height:760px;display:flex;align-items:flex-end; overflow:hidden} .hero .container{position:relative;z-index:2;display:grid; grid-template-columns:minmax(0,1fr) 420px;gap:40px;align-items:end; padding-bottom:clamp(48px,11%,170px);width:100%} .hero-copy{padding-bottom:0} .hero-eyebrow{font-family:var(--f-cond);font-size:30px;font-weight:700;letter-spacing:.2px;color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.45)} .hero-title{font-family:var(--f-cond);font-size:64px;line-height:1.02;font-weight:700;color:#fff; margin-top:2px;text-shadow:0 2px 22px rgba(0,0,0,.45)} .hero-copy .btn-row{margin-top:30px;gap:22px} .hero-copy .btn{min-width:237px} /* quick-offer form — used in the hero and in dark panels */ .offer{background:rgba(2,11,18,.6);padding:34px 30px 40px;width:100%;max-width:470px} .hero__panel{position:relative;background:rgba(2,11,18,.6);padding:42px 30px 28px 32px; margin-right:40px} .hero__panel::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:100vw; background:rgba(2,11,18,.6);pointer-events:none} .hero .offer{max-width:none;background:none;padding:0} .offer--panel{background:var(--ink) url("../img/bg-offer.jpg") center/cover no-repeat} .offer__title{font-family:var(--f-display);font-size:34px;line-height:1.18;font-weight:600;color:#fff} .offer form{margin-top:22px;display:grid;gap:14px} .offer input{ width:100%;height:46px;padding:0 16px;border:0;border-radius:2px;background:#fbfbfb; font-size:14px;color:#222; } .offer input::placeholder{color:#8b9096} .offer .field-phone{position:relative;display:flex;align-items:center;background:#fbfbfb;border-radius:2px;height:46px} .offer .field-phone .dial{display:flex;align-items:center;gap:8px;height:100%; padding:0 12px 0 14px;margin-right:10px;border-right:1px solid #e4e6e9;border-radius:2px 0 0 2px; font-size:14px;font-weight:500;color:#222;white-space:nowrap;cursor:pointer; transition:background-color .15s} .offer .field-phone .dial:hover{background:#f0f1f3} /* flag chip — one 3:2 box for every flag, hairline so pale flags keep an edge */ .dial__flag,.lang__flag{position:relative;flex:none;display:block;border-radius:2px;overflow:hidden} .dial__flag{width:24px;height:16px} .lang__flag{width:26px;height:17px} .dial__flag svg,.lang__flag svg{width:100%;height:100%;display:block} .dial__flag::after,.lang__flag::after{content:"";position:absolute;inset:0;border-radius:2px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)} .lang__flag::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)} .dial__code{font-variant-numeric:tabular-nums} .dial__caret,.lang__caret{flex:none;display:block;width:10px;transition:transform .18s} .dial__caret{color:#8b9096} .dial__caret svg,.lang__caret svg{width:10px;height:6px;display:block} [aria-expanded="true"] .dial__caret,[aria-expanded="true"] .lang__caret{transform:rotate(180deg)} /* the drop-down shared by the phone-code and language buttons */ .picker{position:absolute;top:calc(100% + 6px);z-index:60;min-width:212px;max-height:262px;overflow:auto; padding:6px;background:#fff;border:1px solid var(--line);border-radius:6px; box-shadow:0 18px 40px rgba(2,11,18,.22)} .field-phone .picker{left:0} .header-bar .picker{right:0;top:calc(100% + 4px);min-width:172px} .picker__opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:4px; font-size:14px;font-weight:400;color:#222;text-align:left;transition:background-color .15s} .picker__opt:hover{background:#f1f2f4} .picker__opt[aria-selected="true"]{background:rgba(194,163,99,.18);font-weight:700} .picker__flag{position:relative;flex:none;display:block;width:24px;height:16px;border-radius:2px; overflow:hidden} .picker__flag svg{width:100%;height:100%;display:block} .picker__flag::after{content:"";position:absolute;inset:0;border-radius:2px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)} .picker__name{flex:1} .picker__code{color:var(--muted)} .offer .field-phone input{height:44px;padding-left:6px} .offer button[type="submit"]{ height:46px;background:var(--gold);color:var(--ink);font-weight:700;font-size:13px; letter-spacing:1.2px;border-radius:2px;transition:background-color .18s; } .offer button[type="submit"]:hover{background:var(--gold-dark)} /* ========================================================================== Opening-hours strip ========================================================================== */ .hours{background:var(--clock);color:#cfc4d6;padding:26px 0 22px} .hours .container{max-width:none;padding-inline:34px} .hours__status{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:2.4px; text-transform:uppercase;color:#b9a9c2} .hours__dot{width:9px;height:9px;border-radius:50%;background:var(--gold)} .hours__time{font-size:44px;line-height:1.1;font-weight:300;color:#fff;letter-spacing:-1px;margin-top:2px} .hours__date{font-size:12px;letter-spacing:2.4px;text-transform:uppercase;color:#8d7f96} .hours__top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px} .hours__last{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#b9a9c2} /* the scale reads bottom-up: ticks rise off the rule, labels sit under it */ .hours__scale{margin-top:18px} .hours__track{position:relative;height:15px;border-bottom:1px solid rgba(194,163,99,.28)} .hours__tick{position:absolute;bottom:0;width:1px;height:7px;background:rgba(194,163,99,.5)} .hours__tick.is-strong{height:15px;background:rgba(226,208,165,.6)} /* the 4-hour marks */ .hours__fill{position:absolute;bottom:-1px;height:2px;background:var(--gold)} .hours__now{position:absolute;bottom:-4px;width:8px;height:8px;border-radius:50%;background:var(--gold); transform:translateX(-50%)} .hours__labels{position:relative;height:17px;margin-top:6px;font-size:11px;font-style:italic; letter-spacing:1px;color:#8d7f96} .hours__labels span{position:absolute;transform:translateX(-50%)} .hours__labels span.is-strong{color:#e6d4a5} .hours__foot{display:flex;justify-content:space-between;margin-top:10px;font-size:11px; letter-spacing:2px;text-transform:uppercase;color:#7d7086} /* inner-page banner */ .page-banner{position:relative;background:var(--ink) url("../img/hero.jpg") center 73%/cover no-repeat; min-height:274px;height:16.4vw;display:flex;align-items:center} /* the height tracks the width, so the crop stays put on every screen; below 1400px the band is taller than the photo slice, so it needs a lower anchor */ @media (max-width:1400px){.page-banner{background-position:center 82%}} .page-banner h1{position:relative;z-index:2;font-size:38px;font-weight:700;color:#fff;letter-spacing:-.3px} .page-banner::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(2,11,18,.45) 0%,rgba(2,11,18,0) 40%)} .hours--compact{padding:8px 0 11px} .hours--compact .hours__time,.hours--compact .hours__status{display:none} /* ========================================================================== Intro + clinic collage ========================================================================== */ /* the intro runs on a wider measure than the rest of the site — the comp puts the copy on a 640px column, which is what makes the paragraphs break where they do; --container also feeds the collage bleed further down */ .intro{padding:72px 0 40px;overflow-x:clip;--container:1320px} .intro__grid{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:60px;align-items:start} .intro__title{font-family:var(--f-serif);font-style:italic;font-size:63px;line-height:1.1; font-weight:500;color:#2b1b3d;letter-spacing:-.5px} .intro__body{margin-top:40px;display:grid;gap:23px;font-size:19px;line-height:1.22; color:#2f343a;max-width:640px} .intro__quote{font-family:var(--f-serif);font-style:italic;font-size:26px;color:#2b1b3d} .intro .btn-row{margin-top:36px} /* the collage breaks out of the container and runs to the right edge of the viewport — `width:100%` here would over-constrain the box and the negative margin would simply be dropped, so the width is left to stretch on its own */ .collage{position:relative;aspect-ratio:1306/820; margin-right:min(0px,calc((var(--container) - 100vw)/2 - 24px))} .collage img{position:absolute;object-fit:cover;display:block} /* a (certificates) sits behind c (signage); b (lounge) floats in front with a white gutter, exactly as in the comp */ .collage__a{left:13.5%;top:0;width:43.1%;height:31.3%;z-index:1} .collage__b{left:0;top:31.3%;width:55.4%;height:68.7%;z-index:3; border:8px solid #fff} .collage__c{left:55.8%;top:0;width:44.2%;height:89.1%;z-index:2} /* ========================================================================== Technology section ========================================================================== */ .tech-intro{padding:48px 0 40px;text-align:center} /* on the inner pages the intro heads the split band, so it drops to the same wide measure and ranges left with it */ .tech-intro:has(+ .tech-split){text-align:left;--container:1500px} .tech-intro:has(+ .tech-split) h2{font-size:46px} .tech-intro:has(+ .tech-split) p{margin-inline:0;font-size:15.5px} .tech-intro h2{font-family:var(--f-display);font-size:62px;font-weight:700;letter-spacing:-.8px;color:#111} .tech-intro p{margin:16px auto 0;max-width:820px;font-size:18px;color:#3d434a;line-height:1.6} .tech{background:#000;padding:34px 0 42px} .tech__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;align-items:stretch} /* the three technology cards ship as finished artwork on the home page */ .tech-shot{display:block;width:100%;height:100%;object-fit:contain;border-radius:16px} /* each technology card is a button that opens its clip in the gallery lightbox; the artwork carries its own frame, so the button adds nothing but the hit area and the focus ring */ .tech-play{display:block;width:100%;height:100%;padding:0;border:0;background:none; cursor:pointer;border-radius:16px} .tech-card{border:1px solid var(--gold-line);border-radius:16px;padding:32px 34px 26px; display:flex;flex-direction:column;min-height:640px;color:#fff} .tech-card--left{padding-left:60px} /* comp: content sits 101/2613 in from the edge */ .tech-card__pill{align-self:flex-start;border:1px solid var(--gold);border-radius:999px; padding:6px 18px;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold)} .tech-card__logo{margin-top:22px;height:38px;width:auto} .tech-card h3{font-family:var(--f-display);font-size:44px;font-weight:600;line-height:1;margin-top:12px} .tech-card__sub{font-family:var(--f-display);font-size:21px;color:var(--gold);margin-top:6px} .tech-card__text{margin-top:18px;font-size:14px;line-height:1.5;color:#e7e9ec} .tech-card__media{margin-top:auto;padding-block:22px;display:grid;place-items:center} .tech-card__media img{max-height:300px;width:auto} .tech-card__foot{display:flex;justify-content:center;padding-top:6px} .tech-card__foot img{height:52px;width:auto} .tech-card--center{text-align:center} .tech-card--center .tech-card__title{font-family:var(--f-display);font-size:26px;letter-spacing:.5px; text-transform:uppercase;color:#fff} .tech-card--center .rule{width:88px;height:3px;background:var(--gold);margin:12px auto 0;border-radius:2px} .tech-flow{display:flex;align-items:center;justify-content:center;gap:12px;font-size:16px;color:#fff; flex-wrap:wrap} .tech-flow .g{color:var(--gold)} .tech-flow .r{color:#e8323c;font-weight:700} .tech-card--right{text-align:center} .tech-card--right .tech-card__logo{margin-inline:auto} .tech-card--right h4{font-family:var(--f-display);font-size:21px;color:var(--gold);margin-top:16px;font-weight:500} .features{background:#fff;padding:22px 0 8px} .features__inner{background:#050c12;border-radius:14px;padding:26px 34px} .features__row{display:grid;grid-template-columns:repeat(4,1fr)} .feature{display:flex;align-items:center;gap:16px;padding:6px 22px;color:#fff} .feature+.feature{border-left:1px solid rgba(255,255,255,.14)} .feature img{width:46px;height:46px;flex:none} .feature h4{font-size:15px;font-weight:700} .feature p{font-size:12px;line-height:1.4;color:#c8ccd1;margin-top:3px} /* ========================================================================== How we work ========================================================================== */ .steps__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:56px;margin-top:56px;text-align:center} .step__icon{height:112px;display:grid;place-items:center} .step__icon img{max-height:104px;width:auto} /* 20px, not 22: the widest label is 17 characters and the column is 186px at the 56px gap — this keeps every heading on one line with room to spare */ .step h3{margin-top:32px;font-size:20px;font-style:italic;font-weight:700;color:#111} .step p{margin-top:16px;font-size:17px;line-height:1.5;color:#3d434a} /* ========================================================================== Treatments strip ========================================================================== */ .treatments{padding:72px 0 26px;overflow:hidden;--container:1320px} .treatments__grid{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:60px;align-items:start} .treatments__grid>*,.reviews__grid>*{min-width:0} .treatments__intro p{margin-top:26px;font-size:19px;line-height:1.45;color:#2f343a} .treatments__intro .btn-row{margin-top:36px;flex-direction:column;align-items:flex-start;gap:16px} .treatments__intro .btn{width:237px} .tcards{display:flex;gap:24px} .tcard{flex:0 0 430px;background:#000;color:#fff;display:flex;flex-direction:column;overflow:hidden} .tcards--grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 30px} .tcards--grid .tcard{flex:none} .tcard__img{aspect-ratio:613/537;object-fit:cover;width:100%} .tcard__body{padding:18px 24px 24px;flex:1} .tcard__body h3{font-size:22px;font-weight:700} .tcard__body p{margin-top:10px;font-size:15px;line-height:1.45;color:#cfd3d8} .tcard__more{display:flex;align-items:center;justify-content:space-between;gap:16px; background:var(--gold);color:var(--ink);padding:16px 26px;font-size:18px;font-weight:500; transition:background-color .18s} .tcard__more:hover{background:var(--gold-dark)} .dots{display:flex;gap:9px;justify-content:center;padding-top:22px} .dots button{width:14px;height:14px;background:var(--purple);border-radius:2px;opacity:.85} .dots button[aria-current="true"]{background:var(--ink);opacity:1} .dots--light button{background:#8b2fb5} .dots--light button[aria-current="true"]{background:#fff} .treatments .dots{justify-content:flex-start;padding-left:0} /* ========================================================================== Our doctors (dark carousel band) ========================================================================== */ .doctors{position:relative;background:#050f18;color:#fff;overflow:visible} .doctors__stage{position:relative;isolation:isolate;width:100%;aspect-ratio:2613/1137;min-height:520px; background:#050f18 url("../img/bg-doctors.jpg") center top/100% 100% no-repeat} /* Our Teams — the same stage in daylight ----------------------------------- Layout, deck, spotlight and breakpoints all come from .doctors; only the room changes. On white the cut-outs have nothing to stand on, so the ground is drawn: a gold hairline exactly on the floor (deck top 15% + its 62%) and a pool of warm light resting on it. Nobody is dimmed here. On the dark stage the spotlight reads by taking light away from the others; on white that only makes silhouettes, so the effect is carried entirely by the light itself — the centred portrait steps forward and the pool under it comes up. */ .doctors--teams{background:#fff;color:var(--text)} .doctors--teams .doctors__stage{ background: linear-gradient(180deg,rgba(0,0,0,0) calc(77% - 1px),var(--gold) calc(77% - 1px), var(--gold) 77%,rgba(0,0,0,0) 77%), radial-gradient(44% 18% at 50% 77%, rgba(194,163,99,.20) 0%, rgba(194,163,99,0) 100%), #fff; } .doctors--teams .doctors__head h2{color:var(--ink)} .doctors--teams .doctors__head p{color:var(--muted)} .doctors--teams .doctors__deck .slider__slide::before{ background:radial-gradient(closest-side,rgba(194,163,99,.42),rgba(194,163,99,0) 74%)} .doctors--teams .doctors__deck .doc__name b{color:var(--ink)} .doctors--teams .doctors__deck .doc__name span{color:var(--muted)} /* same purple as the dark band; only the current one changes, because there it is picked out in white and white is invisible on this ground */ .doctors--teams .doctors__deck .dots button[aria-current="true"]{background:var(--purple)} .doctors__head, .doctors__deck{max-width:var(--doctors);margin-inline:auto;padding-inline:24px} .doctors__head{position:absolute;left:0;right:0;top:4.5%;z-index:2;text-align:right; pointer-events:none} .doctors__head h2{font-family:var(--f-display);font-size:clamp(26px,2.6vw,40px);font-weight:700;color:var(--gold)} .doctors__head p{margin-top:6px;font-size:clamp(12px,1vw,15px);color:#dfe3e7} .badge-10{position:absolute;left:6.6%;top:-7%;width:20.7%;z-index:6;pointer-events:none; filter:drop-shadow(0 10px 26px rgba(0,0,0,.5))} .doctors__doc{position:absolute;z-index:3} .doctors__dots{position:absolute;left:0;right:0;top:82%;z-index:2} .doctors__dots .dots{padding:0} /* about-page doctor grid — the same lineup as the team page, five up so the ten portraits fill two complete rows and each gold rule runs unbroken */ .team{padding:20px 0 10px} .team__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:46px 0;align-items:start} .team figure{margin:0;display:flex;flex-direction:column;padding-inline:14px;text-align:left} .team img:not(.badge-10){display:block;width:100%;height:auto} .team figcaption{padding-top:14px;border-top:1px solid var(--gold)} .team h3{font-family:var(--f-display);font-size:15px;font-weight:500;line-height:1.32;color:#111} .team p{margin-top:4px;font-size:13px;color:var(--muted)} .team__feature{position:relative} .team__feature .badge-10{position:absolute;left:0;top:-16px;width:56%;max-width:132px;z-index:2; pointer-events:none;filter:drop-shadow(0 8px 20px rgba(0,0,0,.28))} /* clinic photo grid (about) */ .clinic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:38px} .clinic-grid img{width:100%;aspect-ratio:1;object-fit:cover} /* ========================================================================== Smile gallery ========================================================================== */ .gallery{padding:46px 0 10px} .gallery .dots{padding-top:22px} .gallery-bleed{max-width:var(--gallery);margin-inline:auto;padding-inline:16px} /* ========================================================================== Blog posts (dark band) ========================================================================== */ .blog{background:#040d16 url("../img/bg-blog.jpg") center/cover no-repeat;padding:56px 0 48px;color:#fff} .blog .container-wide{max-width:var(--blog)} .blog__head{text-align:center;margin-bottom:34px} .blog__head h2{font-size:40px;font-weight:700} .blog__head p{margin-top:8px;font-size:15px;color:#dbdfe4} .post img{width:100%;aspect-ratio:538/370;object-fit:cover;border-radius:9px} .post h3{margin-top:14px;font-size:17px;font-style:italic;font-weight:700} .post p{margin-top:12px;font-size:12px;line-height:1.5;color:#c9ced4} .post a.more{display:inline-block;margin-top:18px;font-size:12.5px;color:#e6eaee} .post a.more:hover{color:var(--gold)} .blog__foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:26px} .blog__foot .dots{padding:0} /* ========================================================================== Reviews ========================================================================== */ .reviews{padding:72px 0;--container:1320px} .reviews__grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:56px} .reviews__aside h2{font-size:50px;font-weight:700;letter-spacing:-.4px} .reviews__stars{margin-top:14px;height:34px;width:auto} .reviews__marks{display:flex;align-items:center;gap:18px;margin-top:20px} .reviews__marks img{height:44px;width:auto} .reviews__marks .sep{width:1px;height:38px;background:var(--line)} .reviews__aside p{margin-top:18px;font-size:18px;color:#3d434a} .reviews__aside .btn{margin-top:28px} /* the 3-up layout comes from the slider's --per; this wrapper must stay a plain block or the whole carousel gets squeezed into one grid track */ .reviews__list{border-left:1px solid var(--line);padding-left:56px} .review__top{display:flex;align-items:center;justify-content:space-between;gap:16px} .review__top h3{font-size:19px;font-weight:700} .review__top img{height:28px;width:auto} /* the star/Trustpilot marks carry width/height attributes in the markup */ .review__top svg{width:28px;height:28px} .review p{margin-top:18px;font-size:18px;line-height:1.55;color:#2f343a} .reviews__list .dots{justify-content:flex-start;padding-top:8px} /* ========================================================================== FAQ + side offer panel ========================================================================== */ .faq-block{padding:20px 0 0} .faq-block__grid{display:grid;grid-template-columns:minmax(0,1fr) 525px;gap:56px;align-items:start} /* the panel closes the page, so it runs to the bottom of the section however short the accordion beside it is — otherwise a white strip opens above the footer and breaks the join */ .faq-block .offer--panel{align-self:stretch} .faq-block h2{font-size:40px;font-weight:700;letter-spacing:-.4px} .accordion{margin-top:30px;display:grid;gap:10px} .acc__item{background:var(--ink);color:#fff;overflow:hidden} .acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:20px 24px;font-size:14.5px;font-weight:700;text-align:left;color:#fff} .acc__btn svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2; transition:transform .22s} .acc__item.is-open .acc__btn{background:#1b232a} .acc__item.is-open .acc__btn svg{transform:rotate(180deg)} .acc__panel{display:none;padding:0 24px 24px;font-size:14px;line-height:1.75;color:#dbdfe4} .acc__item.is-open .acc__panel{display:block} /* light accordion (treatment detail / price list) */ .accordion--light .acc__item{background:#fff;border:1px solid #d9c9a8;color:var(--text)} .accordion--light .acc__btn{color:var(--text)} .accordion--light .acc__item.is-open .acc__btn{background:#fff} .accordion--light .acc__panel{color:#3d434a;padding-inline:32px} /* ========================================================================== Footer ========================================================================== */ .site-footer{position:relative;background:var(--navy) url("../img/bg-footer.jpg") center/cover no-repeat; color:#dfe4ea;padding:70px 0 34px;margin-top:-1px} /* End of page: the offer panel sits directly on the footer and both carry the same photograph, which read as two crops meeting at a seam. Anchoring the image to the viewport makes both boxes sample one and the same picture, so the wireframe runs straight through the join. Which section closes the page differs — .faq-block on the home pages, .tech-split on the nine inner ones — so this is bound to the panel itself rather than to either section. Above 1024px only: iOS Safari does not honour a fixed attachment. */ @media (min-width:1025px){ .offer--panel, .site-footer{ background:var(--navy) url("../img/bg-footer.jpg") center/cover fixed no-repeat; } } .site-footer__grid{display:grid;grid-template-columns:minmax(0,300px) repeat(2,minmax(0,190px)) minmax(0,1fr); gap:40px} .footer-brand img.logo{width:266px} .footer-brand .marks{margin-top:44px;display:grid;gap:32px;justify-items:start} .footer-brand .marks img{width:auto} .footer-brand .marks .ht{height:112px} .footer-brand .marks .cert{width:188px} .site-footer nav a{display:block;padding:6px 0;font-size:15px;color:#dfe4ea;transition:color .18s} .site-footer nav a:hover{color:var(--gold)} .footer-contact p{font-size:15px;line-height:1.6;color:#dfe4ea} .footer-contact a{display:block;margin-top:18px;font-size:15px} .footer-contact a:hover{color:var(--gold)} .footer-contact .tel{margin-top:18px} .footer-contact .tel a{margin-top:2px} .footer-col__head{margin:0 0 10px;font-size:15px;font-weight:700;color:var(--gold);letter-spacing:.2px} .footer-col__toggle{display:flex;align-items:center;justify-content:space-between;width:100%; text-align:left;color:inherit;font:inherit;pointer-events:none} .footer-col__toggle::after{content:"";width:8px;height:8px;border-right:2px solid currentColor; border-bottom:2px solid currentColor;transform:rotate(45deg);margin:-4px 6px 0 0;opacity:0; transition:transform .2s} .footer-quick{display:none} .site-footer__bar{display:flex;align-items:center;justify-content:center;gap:40px; margin-top:56px;font-size:14px;color:#dfe4ea;position:relative} .site-footer__bar img{height:28px;width:auto;position:absolute;right:0} /* ========================================================================== Utility bands ========================================================================== */ .band-dark{background:var(--ink);color:#fff} .strip-cta{background:#000;color:#fff;display:flex;align-items:center;justify-content:space-between; gap:24px;padding:26px 34px;margin:38px 0} .strip-cta h3{font-size:24px;font-weight:700;line-height:1.25} /* ========================================================================== Inner-page technology split ========================================================================== */ .tech-split{background:#fff;padding:0;--container:1500px;overflow-x:clip} .tech-split__grid{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:100px;align-items:stretch} /* the card breaks out of the container and runs to the left edge of the viewport while the form stays on the container line. No width here: with one, the negative margin would be over-constrained and simply dropped. */ .tech-split__card{background:#000;border-radius:0;padding:22px 22px 18px; margin-left:min(0px,calc((var(--container) - 100vw)/2 - 24px))} .tech-split__card .tech-card{border:1px solid var(--gold-line);min-height:auto} .tech-split__card .tech-card__media img{max-height:230px} .tech-split__card .dots{padding-top:16px;justify-content:flex-start} .tech-split .offer{max-width:none;height:100%} /* ========================================================================== Article (treatment detail) ========================================================================== */ .article__grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start} /* the aside travels with the reader at its own full height — the stops list is short enough now that it does not need a scroller of its own */ .article__aside{position:sticky;top:24px;align-self:start} .article__aside .offer--light{background:#fff;padding:0;max-width:none} .article__aside .offer--light .offer__title{font-family:var(--f-display);font-size:19px; font-weight:600;color:var(--gold)} .article__aside .offer--light input, .article__aside .offer--light .field-phone{background:#fff;border:1px solid #d9dcdf;height:42px} .article__aside .offer--light .field-phone input{border:0;height:40px} .toc__label{margin-top:30px;font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:#6c727a} .toc{margin-top:12px;border-left:1px solid var(--line)} .toc li{padding:0} .toc a{display:block;padding:9px 16px;font-size:14px;line-height:1.35;color:#2f343a; border-left:3px solid transparent;margin-left:-1px;transition:color .18s,border-color .18s} .toc a:hover{color:var(--gold-dark)} /* without the script the first stop is marked; with it, the one being read */ .toc li:first-child a{border-left-color:var(--gold);font-weight:500} .toc--live li:first-child a{border-left-color:transparent;font-weight:400} .toc--live a.is-current{border-left-color:var(--gold);font-weight:500;color:var(--text)} .article__aside .btn{margin-top:26px} .article__body h1{font-size:38px;font-weight:700;letter-spacing:-.4px} .article__body h2{font-size:34px;font-weight:700;letter-spacing:-.4px;margin-top:44px} .article__body p{margin-top:20px;font-size:15px;line-height:1.62;color:#2f343a} .article__body .btn-wrap{margin:34px 0} .article__body .accordion{gap:12px} /* ========================================================================== Contact page ========================================================================== */ .map img{width:100%;height:clamp(340px,42vw,660px);object-fit:cover} .contact{padding:0 0 10px} .contact__grid{display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:56px;align-items:start; margin-top:-190px;position:relative;z-index:2} .contact__info{padding-top:210px} .contact__info h2{font-size:31px;font-weight:700;line-height:1.25;max-width:420px} .contact__info p{margin-top:22px;font-size:16px;line-height:1.55;color:#2f343a} .contact__tel a{display:inline-block} .contact__tel a+a{display:block;margin-left:58px} .offer--solid{background:#000;max-width:none} .contact__form .btn-wrap{margin-top:26px} .strip-cta .btn-appointment{flex:none} @media (max-width:1100px){ .contact__grid{margin-top:0} .contact__info{padding-top:34px} } /* ========================================================================== Smile gallery — photo / video grid and the lightbox it opens ========================================================================== */ .gallery-page{padding-top:40px} .gallery-page+.gallery-page{padding-top:8px} .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .gallery-grid--video{grid-template-columns:repeat(2,1fr);gap:22px} .shot{position:relative;display:block;padding:0;overflow:hidden;border-radius:8px;background:#000; cursor:pointer} .shot img{display:block;width:100%;aspect-ratio:621/842;object-fit:cover; transition:transform .45s cubic-bezier(.2,.7,.3,1)} .gallery-grid--video .shot img{aspect-ratio:16/9} .shot:hover img{transform:scale(1.045)} .shot__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); display:grid;place-items:center;width:64px;height:64px;border-radius:50%; background:rgba(2,11,18,.5);border:1px solid rgba(255,255,255,.65); transition:background-color .2s,border-color .2s} .shot__play::after{content:"";margin-left:5px;border-left:17px solid #fff; border-top:11px solid transparent;border-bottom:11px solid transparent} .shot:hover .shot__play{background:var(--gold);border-color:var(--gold)} .shot:hover .shot__play::after{border-left-color:var(--ink)} .shot__meta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end; justify-content:space-between;gap:16px;padding:34px 18px 16px;text-align:left;color:#fff; background:linear-gradient(0deg,rgba(2,11,18,.88),rgba(2,11,18,0))} .shot__title{font-size:15px;font-weight:600;line-height:1.3} .shot__len{flex:none;font-size:12px;letter-spacing:1px;color:var(--gold)} .lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center; gap:14px;padding:32px;background:rgba(2,11,18,.93)} .lightbox__stage{margin:0;display:flex;flex-direction:column;gap:16px;max-width:min(1100px,100%)} .lightbox__media{display:flex;justify-content:center} .lightbox__media img{width:auto;max-width:100%;max-height:76vh;border-radius:6px} .lightbox__media iframe, .lightbox__media video{width:min(1000px,84vw);aspect-ratio:16/9;border:0;border-radius:6px; background:#000} .lightbox figcaption{text-align:center;font-size:14px;color:#dfe3e7} .lightbox__close{position:absolute;top:16px;right:22px;display:grid;place-items:center; width:46px;height:46px;border-radius:50%;font-size:30px;line-height:1;color:#fff; background:rgba(255,255,255,.1);transition:background-color .18s} .lightbox__nav{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:50%; font-size:32px;line-height:1;color:#fff;background:rgba(255,255,255,.1); transition:background-color .18s} .lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.24)} body.is-locked{overflow:hidden} /* ========================================================================== Our Teams — the clinic as one lineup standing on a gold floor line ========================================================================== */ .team-lede{padding:58px 0 8px} .team-lede p{max-width:62ch;font-size:17px;line-height:1.62;color:#2f343a} .team-lede p+p{margin-top:18px} /* the head physician is the only person on the dark ground */ .team-lead{background:var(--ink);color:#fff;margin-top:56px} .team-lead__grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:60px; align-items:end;padding-top:54px;border-bottom:1px solid var(--gold)} .team-lead__figure{margin:0} .team-lead__figure img{display:block;width:100%;height:auto} .team-lead__copy{padding-bottom:54px} .team-lead__name{font-family:var(--f-display);font-size:34px;font-weight:600;line-height:1.15; letter-spacing:-.4px} .team-lead__role{margin-top:8px;font-size:15px;color:var(--gold)} .team-lead__copy p{margin-top:22px;max-width:54ch;font-size:15px;line-height:1.66;color:#c5cad0} /* everyone else stands on a line that runs unbroken across the row: the columns carry their own padding and butt up against each other, so the rules meet */ .team-group{padding-top:58px} .team-group > h2{font-family:var(--f-display);font-size:26px;font-weight:600;letter-spacing:-.2px; padding-bottom:14px;border-bottom:1px solid var(--line)} /* items are top-aligned and equally padded, so every portrait is the same size and every rule sits at the same height — the row reads as one unbroken line */ .team-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px; align-items:start} .team-member{display:flex;flex-direction:column;padding-inline:22px} .team-member img{display:block;width:100%;height:auto} .team-member__id{padding:16px 0 0;border-top:1px solid var(--gold)} .team-member__id b{display:block;font-family:var(--f-display);font-size:16px;font-weight:500; line-height:1.32} .team-member__id span{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)} /* ========================================================================== Responsive ========================================================================== */ @media (max-width:1180px){ .nav a{padding:0 18px;font-size:15px} } @media (max-width:1240px){ .tech__grid{gap:22px} .tech-card{min-height:0;padding:24px 20px} .tech-card h3{font-size:34px} .features__inner{grid-template-columns:repeat(2,1fr);gap:8px 0} .feature:nth-child(3){border-left:0} } @media (max-width:1024px){ :root{--container:100%} /* ---- one header row: wordmark left, language + menu bars right ---- the two desktop rows become flex items of the header container, so the socials and the gold CTA can step aside and let the menu carry them */ .site-header .container{display:flex;align-items:center;justify-content:space-between;gap:14px} .header-top{flex:0 1 auto;min-width:0;position:relative;z-index:2;gap:0;padding:13px 0} .brand img{width:188px} .header-tools{display:none} .header-bar{flex:none;gap:4px;padding:0} .lang{order:1;position:relative;z-index:2;gap:7px;height:44px;padding:0 8px;border:0} .lang__flag{order:1;width:30px;height:20px} .lang__caret{order:2;color:var(--gold)} .nav-toggle{display:grid;order:2;z-index:2} /* ---- the menu itself: a full viewport sheet sitting under the header ---- the header is lifted out of flow while it is open and body picks up the same height as padding, so nothing underneath moves */ html.nav-open{overflow:hidden} html.nav-open body{overflow:hidden;padding-top:var(--nav-top,76px)} html.nav-open .site-header{position:fixed;top:0;left:0;right:0} /* the contact bar outranks the header, so it steps aside for the menu */ html.nav-open .fixbar{opacity:0;visibility:hidden;pointer-events:none} .nav{ position:fixed;inset:0;z-index:1; flex-direction:column;align-items:stretch;gap:0; padding:calc(var(--nav-top,76px) + 20px) 24px max(28px,env(safe-area-inset-bottom)) 24px; background:radial-gradient(130% 56% at 100% 0,rgba(194,163,99,.17),rgba(194,163,99,0) 62%), var(--ink); overflow-y:auto;overscroll-behavior:contain; opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s ease; } /* opens on the spot and fades on the way out: the links carry the entrance */ .nav.is-open{opacity:1;visibility:visible;transition:none} /* the link stack is the loud element — the hero's condensed cut, poster size */ .nav>a,.nav>.nav__group>a{ height:auto;padding:16px 0;border-radius:0; font-family:var(--f-cond);font-weight:700;font-size:clamp(26px,7.4vw,38px);line-height:1.04; letter-spacing:.2px;white-space:normal; transition:color .18s ease; } .nav>a,.nav>.nav__group{ border-bottom:1px solid rgba(255,255,255,.1); opacity:0;transform:translateY(16px); transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.3,1); } .nav>a:last-of-type{border-bottom:0} .nav>a:hover,.nav>.nav__group>a:hover{background:none;color:var(--gold)} .nav>a[aria-current="page"], .nav>.nav__group>a[aria-current="page"]{background:none;color:var(--gold)} .nav.is-open>a,.nav.is-open>.nav__group{opacity:1;transform:none} .nav.is-open>:nth-child(1){transition-delay:40ms} .nav.is-open>:nth-child(2){transition-delay:75ms} .nav.is-open>:nth-child(3){transition-delay:110ms} .nav.is-open>:nth-child(4){transition-delay:145ms} .nav.is-open>:nth-child(5){transition-delay:180ms} .nav.is-open>:nth-child(6){transition-delay:215ms} .nav.is-open>:nth-child(7){transition-delay:250ms} /* Treatments stays a link to every service; the chevron beside it unfolds the names, and a gold rule ties the list back to the row it belongs to */ .nav__group{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center} .nav__more{display:grid;place-items:center;align-self:stretch;width:54px;margin-right:-12px; color:var(--gold)} .nav__more svg{width:15px;height:9px;transition:transform .3s cubic-bezier(.4,0,.2,1)} .nav__group.is-open .nav__more svg{transform:rotate(180deg)} .nav__sub{display:block;grid-column:1/-1;overflow:hidden;max-height:0; transition:max-height .34s cubic-bezier(.4,0,.2,1)} .nav__sub a{display:block;height:auto;border-radius:0;white-space:normal; padding:11px 0 11px 17px;border-left:1px solid rgba(194,163,99,.4); font-size:16px;font-weight:400;color:#c7ccd3;transition:color .18s ease} .nav__sub a:first-child{padding-top:2px} .nav__sub a:last-child{padding-bottom:20px} .nav__sub a:hover,.nav__sub a:active{background:none;color:var(--gold)} /* booking, phone and the social set — pinned to the foot of the sheet */ .nav__foot{ display:flex;flex-direction:column;gap:22px;margin-top:auto; padding-top:28px;border-top:1px solid rgba(194,163,99,.3); opacity:0;transform:translateY(16px); transition:opacity .4s ease 285ms,transform .4s cubic-bezier(.2,.7,.3,1) 285ms; } .nav.is-open .nav__foot{opacity:1;transform:none} /* these are not part of the stack, so they shed the nav link styling */ .nav__foot a{height:auto;padding:0;border-radius:0;white-space:nowrap} .nav .nav__cta{display:flex;align-items:center;justify-content:center;height:52px;border-radius:4px; border:1px solid var(--gold);color:var(--gold);font-weight:600;font-size:15px;letter-spacing:.6px; transition:background-color .18s ease,color .18s ease} .nav .nav__cta:hover,.nav .nav__cta:active{background:var(--gold);color:var(--ink)} .nav__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .nav .nav__tel{font-size:16px;font-weight:500;letter-spacing:.3px;color:var(--gold); font-variant-numeric:tabular-nums} .socials--menu{gap:2px;margin-left:-9px} .nav .socials--menu a{padding:9px;color:var(--gold)} .socials--menu svg{width:22px;height:22px} .hero .container{grid-template-columns:1fr;padding-bottom:40px} .hero{aspect-ratio:auto;min-height:auto;max-height:none;padding-block:40px;align-items:stretch} .hero__panel{margin-right:0} .hero__panel::after{display:none} .offer{max-width:none} .intro__grid,.treatments__grid,.reviews__grid,.faq-block__grid, .tech-split__grid,.article__grid,.contact__grid{grid-template-columns:1fr;gap:34px} /* the article leads on a phone: the stops come first as chips, and the offer form drops below the piece, where someone is actually ready to act on it */ .article__grid{display:flex;flex-direction:column} .article__aside{position:static;display:contents} .toc__label{order:1;margin-top:0} .toc{order:2} .article__body{order:3} .article__aside .offer--light{order:4} .article__aside .btn{order:5;display:none} /* the row just below repeats it */ /* every stop on screen at once: a wrapping set of chips, nothing to swipe */ .toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;border-left:0} .toc a{margin-left:0;padding:8px 13px;border:1px solid var(--line);border-radius:999px; font-size:13px;line-height:1.25} .toc li:first-child a{border-color:var(--gold);background:var(--gold);color:var(--ink); font-weight:600} .toc--live li:first-child a{border-color:var(--line);background:none;color:#2f343a; font-weight:400} .toc--live li a.is-current{border-color:var(--gold);background:var(--gold);color:var(--ink); font-weight:600} .reviews__list{border-left:0;padding-left:0} .tech__grid{grid-template-columns:1fr} .steps__grid{grid-template-columns:repeat(2,1fr);gap:48px 40px} .clinic-grid{grid-template-columns:repeat(2,1fr)} .team-lead__grid{grid-template-columns:220px minmax(0,1fr);gap:36px} .team-lead__name{font-size:28px} .gallery-grid{grid-template-columns:repeat(3,1fr)} .tcards--grid{grid-template-columns:repeat(2,1fr)} .site-footer__grid{grid-template-columns:1fr 1fr;gap:34px} /* now sits under the heading, so it follows the copy's own gutter */ .doctors__stage .badge-10{position:static;width:210px;margin:22px 0 0} .article__body h1,.section-title,.tech-intro h2,.blog__head h2,.faq-block h2{font-size:38px} .hero-title{font-size:44px} .hero-eyebrow{font-size:22px} .intro__title{font-size:44px} /* 10 portraits only tile into whole rows at 5, 2 or 1 up, so the tablet step keeps 5 columns and takes the caption down a size instead */ } @media (max-width:720px){ .container,.container-wide,.gallery-bleed{padding-inline:16px} .hours .container{padding-inline:16px} .btn-appointment{height:40px;padding-inline:16px;font-size:13px} .brand img{width:168px} .nav{padding-inline:16px} /* the Dinçalya Smile pair stays on one line — 237px each is what broke it */ .intro .btn-row{flex-wrap:nowrap;gap:12px} .intro .btn{flex:1 1 0;min-width:0;font-size:clamp(13px,3.6vw,17px); padding:0 clamp(9px,2.4vw,15px) 0 clamp(12px,3.4vw,28px);gap:clamp(5px,1.8vw,18px)} .intro .btn span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .intro .btn__arrow{width:clamp(18px,5vw,26px);height:clamp(18px,5vw,26px)} .clinic-grid,.tcards--grid{grid-template-columns:1fr} .team__grid{grid-template-columns:repeat(2,1fr)} .gallery-grid{grid-template-columns:repeat(2,1fr)} .gallery-grid--video{grid-template-columns:1fr} .lightbox{padding:16px;gap:6px} .lightbox__nav{width:42px;height:42px;font-size:26px} .strip-cta{flex-direction:column;align-items:flex-start;padding:22px} .collage{grid-auto-rows:10px} .site-footer__bar{flex-direction:column;gap:18px;text-align:center} .site-footer__bar img{position:static} .tcard{flex-basis:min(320px,82vw)} /* the 46px heading belongs to the two-column band; one column needs less */ .tech-intro:has(+ .tech-split) h2{font-size:31px} .tech-intro:has(+ .tech-split) p br{display:none} .team-lead__grid{grid-template-columns:1fr;gap:0;padding-top:38px} .team-lead__figure{max-width:210px} .team-lead__copy{padding-bottom:40px} .team-row{grid-template-columns:repeat(2,1fr)} .team-member{padding-inline:12px} } @media (prefers-reduced-motion:reduce){ .nav>a,.nav>.nav__group,.nav__foot{opacity:1;transform:none;transition:none} .nav__sub,.nav__more svg{transition:none} .nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after{transition:none} } /* ========================================================================== Slider — every section that shows dots is swipeable ========================================================================== */ .slider{position:relative} .slider__track{ display:flex;gap:var(--slide-gap,18px); overflow-x:auto;overscroll-behavior-x:contain; /* proximity, not mandatory: mandatory forces the browser to re-align the container on every layout change, and with scroll-behavior:smooth on the box that correction played as an animation. Smooth is requested per call in main.js instead, so nothing the browser does on its own animates. */ scroll-snap-type:x proximity; scrollbar-width:none;-ms-overflow-style:none; padding-bottom:2px;cursor:grab; } .slider__track::-webkit-scrollbar{display:none} .slider__track.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none} .slider__track.is-dragging *{pointer-events:none} .slider__slide{ flex:0 0 calc((100% - (var(--per,3) - 1) * var(--slide-gap,18px)) / var(--per,3)); scroll-snap-align:start;min-width:0; } .slider .dots{padding-top:18px} .slider__track:focus-visible{outline:2px solid var(--gold);outline-offset:4px} /* per-section tuning */ .treatments .slider{--per:2.6;--slide-gap:24px} /* 2 cards + a bit over half */ .gallery .slider{--per:4;--slide-gap:11px} .blog .slider{--per:4;--slide-gap:12px} .reviews .slider{--per:3;--slide-gap:44px} .doctors .slider{--per:5;--slide-gap:26px} .tech-split .slider{--per:1;--slide-gap:22px} @media (max-width:1024px){ .treatments .slider,.blog .slider,.reviews .slider{--per:2} .gallery .slider{--per:3} .doctors .slider{--per:3} } @media (max-width:720px){ .treatments .slider,.blog .slider,.reviews .slider,.gallery .slider{--per:1} .treatments .slider__slide{flex:0 0 82vw} /* card peeks past the edge */ .doctors .slider{--per:1} .gallery .slider{--per:2} } /* ========================================================================== Slider placement inside each section ========================================================================== */ /* doctors deck sits on the dark stage, cutouts anchored to the floor line */ /* height carries the track's bottom padding so the content box stays at 62%: the name label hangs 2.6em below its slide and, without room inside the scroller, that overflow made the track scrollable on the y axis (overflow-x :auto turns an unset overflow-y into auto) — the wheel then scrolled the deck instead of the page. */ .doctors__deck{position:absolute;left:0;right:0;top:15%;height:calc(62% + 100px)} .doctors__deck .slider, .doctors__deck .slider__track{height:100%} .doctors__deck .slider__track{align-items:flex-end;padding-bottom:100px} .doctors__deck .slider__slide{display:flex;align-items:flex-end;height:100%;position:relative} .doctors__deck .doc{margin:0;width:100%;height:100%;display:flex;align-items:flex-end;position:relative} .doctors__deck img{width:100%;height:100%;object-fit:contain;object-position:bottom; transform:scale(.93);transform-origin:50% 100%; transition:transform .45s cubic-bezier(.2,.7,.3,1)} /* the portrait centred in the track steps forward and lights up */ .doctors__deck .is-featured img{transform:scale(1.04)} .doctors__deck .slider__slide::before{ content:"";position:absolute;left:50%;bottom:0;width:150%;aspect-ratio:1;max-height:100%; transform:translateX(-50%);border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(202,172,110,.20),rgba(202,172,110,0) 72%); opacity:0;transition:opacity .45s ease} .doctors__deck .is-featured::before{opacity:1} .doctors__deck .doc__name{ position:absolute;left:0;right:0;top:calc(100% + 14px);text-align:center; transition:color .45s ease} .doctors__deck .doc__name b{display:block;font-size:14px;font-weight:700;line-height:1.25;color:#fff} .doctors__deck .doc__name span{display:block;margin-top:3px;font-size:12px;line-height:1.3;color:var(--gold)} @media (prefers-reduced-motion:reduce){ .doctors__deck img,.doctors__deck .slider__slide::before,.doctors__deck .doc__name{transition:none} } .doctors__deck .dots{position:absolute;left:0;right:0;top:calc(100% + 16px);padding:0} .doctors__deck .dots button{background:#8b2fb5} .doctors__deck .dots button[aria-current="true"]{background:#fff} /* On the about page the team is not a carousel: the whole line-up is laid out at once, so nobody has to swipe to find out who else works here. */ .doctors--all .doctors__stage{aspect-ratio:auto;min-height:0;padding:34px 0 44px} .doctors--all .doctors__head{position:static;text-align:left;padding-bottom:6px} .doctors--all .doctors__deck{position:static;height:auto;margin-top:26px} .doctors--all .slider, .doctors--all .slider__track{height:auto} .doctors--all .slider__track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)); gap:34px 26px;overflow:visible;padding-bottom:0;scroll-snap-type:none} .doctors--all .slider__slide{flex:none;width:auto;height:auto;scroll-snap-align:none} .doctors--all .doc{height:auto;display:block} /* the portraits fill their column instead of being sized by height, which is what the carousel did and what pushed them past the grid */ .doctors--all .doc img{width:100%;height:auto;max-height:none;margin-inline:0; transform:none;filter:none} .doctors--all .slider__slide::before{display:none} .doctors--all .doc__name{position:static;opacity:1;transform:none;margin-top:12px} .doctors--all .dots,.doctors--all .slider__nav{display:none} @media (max-width:1024px){ .doctors--all .slider__track{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:720px){ .doctors--all .slider__track{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px} } /* small screens: the band stops being a fixed-ratio stage and simply flows */ @media (max-width:1024px){ .doctors__stage{aspect-ratio:auto;min-height:0;padding:26px 0 34px;background-size:cover} .doctors__head{position:static;text-align:left} .doctors__deck{position:static;height:auto;margin-top:24px} .doctors__deck .slider,.doctors__deck .slider__track{height:auto} .doctors__deck .slider__slide{height:auto} .doctors__deck .doc{height:auto;display:block} .doctors__deck img{height:auto;transform:none;filter:none} .doctors__deck .slider__slide::before{display:none} .doctors__deck .doc__name{position:static;opacity:1;transform:none;margin-top:12px} .doctors__deck .dots{position:static;padding-top:22px} .doctors__head,.doctors__deck{max-width:none;padding-inline:0} /* the name and the glow are back inside the box here, so the track needs no room reserved for them */ .doctors__deck .slider__track{padding-bottom:2px} /* the stage stops being a fixed ratio, so the drawn floor has no fixed % to sit on — plain white */ .doctors--teams .doctors__stage{background:#fff} } /* gallery */ .gallery .slider__slide img{width:100%;aspect-ratio:621/842;object-fit:cover} .gallery .slider .dots{padding-top:22px} /* blog — CTA left, dots right, one row (as in the comp) */ .blog .slider{padding-bottom:0} .blog .dots button{background:#8b2fb5} .blog .dots button[aria-current="true"]{background:#fff} /* reviews */ .reviews__list .slider .dots{padding-top:26px;justify-content:flex-start} /* treatments — the card strip runs past the container's right edge, and --per above is fractional, so two whole cards and ~57% of a third are in view and the row reads as scrollable */ .treatments__viewport{width:calc(100% + (100vw - min(100vw,var(--container)))/2 + 24px)} .treatments__viewport .slider .dots{justify-content:flex-start} .treatments .slider__slide{display:flex} .treatments .tcard{width:100%;flex:1 1 auto;min-width:0} /* inner-page technology slider */ .tech-split__card .slider .dots{padding-top:16px;justify-content:flex-start} .tech-split__card .slider .dots button{background:#8b2fb5} .tech-split__card .slider .dots button[aria-current="true"]{background:#fff} .tech-split__card .slider__slide{display:flex} .tech-split__card .tech-card{width:100%} /* the finished artwork cards keep their own aspect ratio */ /* One rule covers both artworks. The landscape card (1662x843) at the card's ~857px content width comes out 435px tall, so it fills the band edge to edge; the two portrait cards still in the deck would be 1189px tall at that width, so max-height clamps the box and object-fit:contain centres them on the black plate instead. Swap those two for landscape art and they fill in the same way with no CSS change. */ .tech-split__card .tech-play{height:auto} .tech-split__card picture{display:block;width:100%} .tech-split__card .tech-shot{width:100%;height:auto;max-height:460px;object-fit:contain} /* ========================================================================== Price planner (price-list page) ========================================================================== */ .planner{background:#000;padding:34px 0 42px;color:#fff} /* chart and plan stack on the left, the palette rides alongside; on one column the palette moves between them so picking a treatment never means scrolling past the plan */ .planner__grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;grid-template-areas:"chart palette" "plan palette"; gap:20px 24px;align-items:start} .chart{grid-area:chart}.plan{grid-area:plan}.palette{grid-area:palette} .chart,.plan,.palette{background:#0d0d0d;border:1px solid rgba(255,255,255,.09);border-radius:14px} .chart{padding:22px 26px 8px} .chart__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .chart__marking{font-size:15px;color:#9aa0a7} .chart__marking b{color:var(--gold);font-weight:700;font-size:17px;margin-left:4px} .chart__tools{display:flex;align-items:center;gap:10px;flex:none} .chart__reset{white-space:nowrap} .chart__reset{border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:8px 14px; font-size:13px;color:#d8dce0;transition:.18s} .chart__reset:hover{border-color:var(--gold);color:var(--gold)} /* one live sentence under the bar: what hovering / clicking will do, or what just happened */ .chart__readout{margin-top:10px;min-height:22px;font-size:14px;line-height:1.5;color:#b7bcc3} .chart__stage{position:relative;padding:6px 0 10px} .chart__arch-label{position:absolute;left:0;right:0;text-align:center;font-size:11.5px; letter-spacing:1.2px;color:#6f747b} .chart__arch-label--upper{top:10px} .chart__arch-label--lower{bottom:14px} .chart__svg{width:100%;height:auto;max-height:520px;margin-inline:auto;display:block;overflow:visible} /* -------------------------------------------------------------------------- Teeth. Each is drawn in its own frame: roots at -y, crown at +y, gum line at y=9. The body is cut into a root and a crown so each can show its own work. What is on a tooth is written by the script as data-cap natural | crown | veneer | bridge the crown's surface data-root natural | none none = replaced by a fixture data-screw none | short | long the fixture in the bone and, while the cursor is over it, data-ghost a preview of the treatment in hand data-drop 1 the treatment in hand is here and a click removes it -------------------------------------------------------------------------- */ .tooth{cursor:pointer;--fx:none;filter:var(--fx);transition:filter .16s ease} .tooth__hit{fill:transparent;stroke:transparent;stroke-width:16} .tooth__root,.tooth__crown{fill:url(#toothFill);stroke:rgba(0,0,0,.55);stroke-width:.6; transition:fill .16s ease,opacity .16s ease} .tooth__lines path{stroke:#b9bcc0;stroke-width:1.1;fill:none;opacity:.85;pointer-events:none;transition:opacity .16s} .tooth__screw,.tooth__sheen,.tooth__margin,.tooth__wash{opacity:0;pointer-events:none;transition:opacity .16s ease} /* FDI numbers sit just past each biting edge, upright whatever the tooth's rotation, so the plan's "11 · 21" can be found on the chart */ .tooth__num{font-family:var(--f-cond);font-size:10.5px;fill:#5f656c;text-anchor:middle; dominant-baseline:central;pointer-events:none;letter-spacing:.3px;transition:fill .16s} .tooth.is-on .tooth__num,.tooth.is-hot .tooth__num{fill:#c9ced4} /* crown: a cap in the marked gold, with the margin line where it meets the tooth */ .tooth[data-cap="crown"] .tooth__crown, .tooth[data-cap="bridge"] .tooth__crown{fill:url(#toothGold)} .tooth[data-cap="crown"] .tooth__margin{fill:#7a5a14;opacity:1} .tooth[data-cap="crown"] .tooth__lines path, .tooth[data-cap="bridge"] .tooth__lines path{stroke:rgba(0,0,0,.42)} /* veneer: porcelain-bright, outlined in gold, with a polish sweep across it */ .tooth[data-cap="veneer"] .tooth__crown{fill:url(#pearl);stroke:#d8b45e;stroke-width:1.4} .tooth[data-cap="veneer"] .tooth__sheen{fill:url(#sheen);opacity:.9} .tooth[data-cap="veneer"] .tooth__lines path{opacity:0} /* implant: the root is gone, a threaded fixture sits in its place */ .tooth[data-root="none"] .tooth__root{opacity:0} .tooth[data-screw="short"] .tooth__screw, .tooth[data-screw="long"] .tooth__screw{opacity:1} /* the full-jaw bridge behind the crowns, on the gum line */ .archfx{pointer-events:none} .archfx__band{fill:none;stroke:url(#bandFill);stroke-width:9;stroke-linecap:round} .archfx__edge{fill:none;stroke:#f2d79a;stroke-width:1;stroke-linecap:round;opacity:.7} .archfx__ghost{opacity:.45} /* hover: the tooth lifts, and the preview is drawn in the treatment's own colour but held back, so the eye reads "this is what a click gives you" */ .tooth.is-hot{--fx:drop-shadow(0 0 8px rgba(194,163,99,.55))} .tooth[data-ghost="crown"] .tooth__wash, .tooth[data-ghost="bridge"] .tooth__wash, .tooth[data-ghost="anchor"] .tooth__wash{fill:url(#toothGold);opacity:.6} .tooth[data-ghost="veneer"] .tooth__wash{fill:url(#pearl);stroke:#d8b45e;stroke-width:1.4;opacity:.75} .tooth[data-ghost="screw"] .tooth__screw, .tooth[data-ghost="anchor"] .tooth__screw{opacity:.55} .tooth[data-ghost="screw"] .tooth__root, .tooth[data-ghost="bridge"] .tooth__root, .tooth[data-ghost="anchor"] .tooth__root{opacity:.35} /* the treatment in hand is already here: the marks fade and the tooth is haloed white, so a click reads as "back to natural" */ .tooth[data-drop="1"]{--fx:drop-shadow(0 0 8px rgba(255,255,255,.3))} .tooth[data-drop="1"][data-screw="short"] .tooth__screw, .tooth[data-drop="1"][data-screw="long"] .tooth__screw, .tooth[data-drop="1"][data-cap="crown"] .tooth__margin, .tooth[data-drop="1"][data-cap="veneer"] .tooth__sheen{opacity:.35} .tooth[data-drop="1"] .tooth__wash{fill:url(#toothFill);opacity:.8} /* a click focuses the , and the browser draws its own ring around the rotated bounding box — kill it on :focus, and mark keyboard focus on the tooth */ .tooth:focus{outline:none} .tooth:focus-visible .tooth__crown{stroke:var(--gold);stroke-width:2.4;stroke-dasharray:5 3;stroke-linejoin:round} /* plan card */ .plan{padding:24px 26px 26px} .plan__head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px} .plan__head h3{font-size:22px;font-weight:700} .plan__count{margin-top:4px;font-size:14px;color:#9aa0a7} .plan__count b{color:var(--gold)} .plan__wa{display:inline-flex;align-items:center;gap:10px;background:#128c33;color:#fff; border-radius:9px;padding:14px 22px;font-size:15px;font-weight:700;transition:background-color .18s} .plan__wa:hover{background:#0f7a2c} .plan__wa svg{width:20px;height:20px} .plan__label{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.09); font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:#8e9299} .plan__list{margin-top:12px;display:grid;gap:10px} .plan__list li{display:flex;align-items:center;gap:12px;background:#151515; border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:11px 16px;font-size:14px} .plan__list li b{font-weight:700} .plan__list li span{color:#9aa0a7} .plan__ico{width:24px;height:26px;flex:none} .plan__empty{color:#8e9299;justify-content:center} .plan__teeth{margin-left:auto;font-family:var(--f-cond);letter-spacing:.4px; font-size:13px;color:#7d838a;text-align:right} .plan__list li .plan__remove{margin-left:14px} .plan__total{margin-top:14px;font-size:13.5px;line-height:1.5;color:#8e9299} .plan__total b{color:var(--gold);font-size:15px} .plan__total[hidden]{display:none} .plan__remove{margin-left:auto;width:26px;height:26px;flex:none;display:grid;place-items:center; border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#c9ced4;font-size:13px;line-height:1} .plan__remove:hover{border-color:#e0523f;color:#e0523f} .plan__note{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.09); font-size:13.5px;line-height:1.55;color:#9aa0a7} .plan__more{display:inline-block;margin-top:14px;font-size:13.5px;color:#d8dce0; border-bottom:1px solid rgba(216,220,224,.45);padding-bottom:2px} .plan__more:hover{color:var(--gold);border-color:var(--gold)} /* palette — each row's icon is the exact mark the chart draws, so the palette doubles as the legend */ .palette{padding:20px 18px 22px;position:sticky;top:16px} .pal__title{font-size:17px;font-weight:700} .pal__hint{margin-top:4px;font-size:13.5px;line-height:1.5;color:#8e9299} .pal__group{margin:18px 0 6px;font-size:12.5px;color:#6f747b} .pal__item{margin-top:8px;background:#141414;border:1px solid rgba(255,255,255,.08); border-radius:10px;overflow:hidden;transition:border-color .18s,background-color .18s} .pal__item.is-active{background:#191510;border-color:rgba(194,163,99,.55)} .pal__item.has-picks{border-color:rgba(255,255,255,.14)} .pal__item.is-active.has-picks{border-color:rgba(194,163,99,.55)} .pal__item:hover{border-color:rgba(255,255,255,.22)} .pal__pick{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px; font-size:14.5px;font-weight:600;color:#fff;text-align:left} .pal__badge{margin-left:auto;flex:none;min-width:24px;height:22px;padding:0 7px; display:none;place-items:center;border-radius:999px;font-size:12px;font-weight:700; font-family:var(--f-cond);color:#0d0d0d;background:var(--gold)} .pal__item.has-picks .pal__badge{display:grid} .pal__icon{width:20px;height:28px;flex:none} .pal__icon--arch{width:28px;height:20px} .pal__tools[hidden]{display:none} .pal__tools{display:flex;align-items:center;gap:10px;padding:2px 14px 14px;flex-wrap:wrap} .pal__step{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:var(--gold);font-size:18px;line-height:1;display:grid;place-items:center;transition:.16s} .pal__step:hover{background:rgba(255,255,255,.13)} .pal__reel{width:52px;height:96px;border-radius:9px;background:#0f0f0f;display:grid; align-content:center;justify-items:center;font-size:15px;color:#4d5157; border:1px solid rgba(255,255,255,.07)} .pal__reel span{line-height:24px} .pal__reel .is-on{color:var(--gold);font-weight:700;font-size:17px} /* the middle slot is typed into — pressing + twenty times is no way to count */ .pal__num{width:100%;padding:0;border:0;border-radius:5px;background:none;text-align:center; font-family:inherit;font-size:17px;font-weight:700;line-height:24px;color:var(--gold); -moz-appearance:textfield} .pal__num::-webkit-outer-spin-button,.pal__num::-webkit-inner-spin-button{-webkit-appearance:none} .pal__num:focus{outline:none;background:rgba(194,163,99,.16)} .pal__count{font-size:13.5px;color:#9aa0a7;flex:1;min-width:110px} .pal__count b{color:var(--gold)} /* jaw chips for whole-jaw work: the choice a patient can make without the chart */ .pal__jaw{flex:1;min-width:110px;height:36px;border-radius:8px;font-size:13.5px;font-weight:600; color:#d8dce0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);transition:.16s} .pal__jaw:hover{border-color:rgba(255,255,255,.35)} .pal__jaw[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#0d0d0d} /* touch has no hover: previews would only ever flash on the tapped tooth */ @media (hover:none){ .tooth.is-hot,.tooth[data-drop="1"]{filter:none} .tooth[data-ghost] .tooth__wash,.tooth[data-ghost] .tooth__screw{opacity:0} .tooth[data-ghost] .tooth__root{opacity:1} .tooth[data-drop="1"][data-screw="short"] .tooth__screw, .tooth[data-drop="1"][data-screw="long"] .tooth__screw, .tooth[data-drop="1"][data-cap="crown"] .tooth__margin, .tooth[data-drop="1"][data-cap="veneer"] .tooth__sheen{opacity:1} .tooth[data-drop="1"] .tooth__wash{opacity:0} .archfx__ghost{display:none} } @media (prefers-reduced-motion:reduce){ .tooth,.tooth__root,.tooth__crown,.tooth__screw,.tooth__sheen,.tooth__margin,.tooth__wash,.tooth__num,.tooth__lines path{transition:none} } /* the dock lives only on one-column layouts */ .dock{display:none} @media (max-width:1100px){ .planner__grid{grid-template-columns:1fr;grid-template-areas:"chart" "palette" "plan"} .palette{position:static} .dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;max-width:560px;margin-inline:auto; display:flex;align-items:center;gap:10px; padding:8px 8px 8px 16px;border-radius:14px;background:rgba(20,20,20,.92); border:1px solid rgba(194,163,99,.4);box-shadow:0 12px 34px rgba(0,0,0,.55); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); transition:transform .22s ease,opacity .22s ease} .dock[hidden]{display:none} .dock.is-away{transform:translateY(calc(100% + 16px));opacity:0;pointer-events:none} .dock__sum{flex:1;font-size:13.5px;color:#c9ced4;line-height:1.3} .dock__sum b{color:var(--gold)} .dock__wa{flex:none;display:inline-flex;align-items:center;gap:8px;background:#128c33;color:#fff; border-radius:9px;padding:11px 14px;font-size:13.5px;font-weight:700} .dock__wa svg{width:18px;height:18px} } @media (max-width:720px){ /* one column on a phone: the palette becomes a row of chips above the chart, so picking a treatment and tapping teeth happen on the same screen */ .planner{padding:18px 0 32px} .planner__grid{grid-template-areas:"palette" "chart" "plan";gap:14px} .chart,.plan,.palette{padding-inline:14px} .chart{padding-top:16px} .chart__bar{flex-wrap:nowrap;align-items:center} .chart__reset{padding:7px 11px;font-size:12.5px} .chart__marking{font-size:14px} .chart__marking b{font-size:16px} .chart__readout{font-size:13.5px;min-height:20px;margin-top:6px} /* let the chart use the card's full width */ .chart__stage{margin-inline:-8px;padding-bottom:4px} .chart__arch-label--upper{top:6px} .chart__arch-label--lower{bottom:8px} .tooth__num{display:none} /* the arches only need to be big enough to tap: shrinking them brings the plan up to where a phone can see it without scrolling past the teeth */ .chart__svg{max-height:min(42vh,312px)} .palette{padding:14px 14px 12px} .pal__title,.pal__hint,.pal__group{display:none} .palette{display:flex;flex-wrap:wrap;gap:8px} .pal__item{display:contents} .pal__pick{width:auto;order:1;gap:8px;padding:9px 12px 9px 10px;border-radius:999px;font-size:13.5px; background:#141414;border:1px solid rgba(255,255,255,.12);transition:border-color .18s,background-color .18s} .pal__pick > span{display:none} .pal__pick::before{content:attr(data-short);order:1} .pal__pick.is-active{background:#191510;border-color:var(--gold)} .pal__pick.has-picks:not(.is-active){border-color:rgba(194,163,99,.45)} .pal__icon{width:16px;height:22px} .pal__icon--arch{width:22px;height:16px} .pal__badge{order:2;margin-left:2px;min-width:20px;height:18px;font-size:11px} /* the active treatment's controls drop under the chips as one full row */ .pal__tools{order:3;flex-basis:100%;padding:4px 0 0;gap:8px} .pal__reel{width:58px;height:38px;border-radius:8px} .pal__reel span{display:none} .pal__num{font-size:16px;line-height:36px} .pal__step{width:38px;height:38px} .pal__count{min-width:0} .pal__jaw{min-width:0;height:38px} .plan__head{flex-direction:column} .plan__wa{width:100%;justify-content:center} .plan__list li{flex-wrap:wrap} .plan__list li .plan__remove{order:2;margin-left:auto} .plan__teeth{order:3;width:100%;margin-left:0;text-align:left} } /* price-list intro copy */ .price-intro{padding:56px 0 40px} .price-intro h1{font-size:40px;font-weight:700;letter-spacing:-.5px} .price-intro p{margin-top:22px;font-size:15px;line-height:1.62;color:#2f343a} .price-body{padding:44px 0 0} .price-body p{font-size:15px;line-height:1.62;color:#2f343a} .price-body p+p{margin-top:20px} /* ========================================================================== Phone layout (≤720px): everything that runs in a row on the desktop is swiped one card at a time here. The next card peeks past the right edge so the strip reads as movable, the purple squares below say where you are, and the round arrows do the same job for people who do not swipe. ========================================================================== */ /* nothing may push the page sideways: whatever leaks is cut, not scrolled */ html,body{overflow-x:clip} /* .slider--mobile: a grid on wide screens, a slider on phones */ .slider--mobile .dots,.slider__arrow{display:none} .slider__nav{display:contents} @media (min-width:721px){ .slider--mobile .slider__track{display:grid;overflow:visible;scroll-snap-type:none;cursor:auto;padding-bottom:0} /* the endless strip's copies belong to the phone; a grid shows the real cards only (they are the ones without aria-hidden) */ .slider--mobile .slider__track > [aria-hidden="true"]{display:none} .tech__grid.slider__track{gap:44px} .steps__grid.slider__track{gap:56px} .features__row.slider__track{gap:0} .features__row .slider__slide+.slider__slide .feature{border-left:1px solid rgba(255,255,255,.14)} } @media (max-width:720px){ /* ---- hero: a square photograph with the words on it; the offer form rides up over its bottom edge ---- */ .hero{padding-block:0 30px;background:var(--ink)} .hero .container{padding:0 16px;gap:0} .hero-copy{aspect-ratio:1;margin-inline:-16px;padding:20px 16px 100px; background:var(--ink) url("../img/hero.jpg") center/cover no-repeat; display:flex;flex-direction:column;justify-content:flex-end} .hero-copy::before{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(2,11,18,0) 45%,rgba(2,11,18,.72) 100%)} .hero-copy{position:relative} .hero-copy>*{position:relative} .hero-eyebrow{font-size:20px} .hero-title{font-size:38px} .hero-copy .btn-row{display:none} .hero__panel{margin:-72px 0 0;padding:22px 18px 20px; background:rgba(2,11,18,.94);border:1px solid rgba(194,163,99,.4)} .hero .offer__title{font-size:26px} /* ---- sliders ---- */ .slider--mobile{--per:1;--slide-gap:12px} .slider--mobile .slider__slide{flex:0 0 86%} .slider--mobile .dots{display:flex} .slider--mobile .slider__track{padding-bottom:4px} /* the future of dentistry: three video cards */ .tech .slider--mobile .slider__slide{flex:0 0 84%} .tech-play{height:auto} /* faster · accuracy · comfort · results: one dark panel, stacked */ .features{padding:18px 0 4px} .features__inner{padding:6px 20px} .features__row.slider__track{display:grid;grid-template-columns:1fr;gap:0;overflow:visible; scroll-snap-type:none;padding-bottom:0} .features .slider__arrow,.features .dots{display:none} .feature{border-left:0;padding:14px 0} .features__row .slider__slide+.slider__slide .feature{border-top:1px solid rgba(255,255,255,.14)} .feature img{width:44px;height:44px} .feature h4{font-size:16px} .feature p{font-size:13px;margin-top:4px} /* how we work: five steps in order */ .steps__grid{margin-top:26px} .steps .slider__slide{flex:0 0 82%} .step{padding:22px 18px 26px;border:1px solid var(--gold-line);border-radius:14px;height:100%} .step__icon{height:96px} .step__icon img{max-height:88px} .step h3{margin-top:18px;font-size:19px} .step p{font-size:15px;margin-top:10px} /* treatments: the dots and the strip line up with the text above */ .treatments{padding-top:48px} .treatments__viewport{width:100%} .treatments .slider__slide{flex:0 0 84%} .treatments__intro .btn-row{flex-direction:row;gap:10px} .treatments__intro .btn{width:auto;flex:1;min-width:0;font-size:15px;padding:0 12px 0 16px} .treatments .dots,.treatments__viewport .slider .dots{justify-content:center} /* doctors and teams: one portrait on stage */ .doctors__head{padding-inline:16px} .doctors__stage .badge-10{margin-left:16px} .doctors__deck .slider__slide{flex:0 0 100%} .doctors__deck img{max-height:min(420px,58vh);width:auto;max-width:100%;margin-inline:auto;display:block} .doctors__deck .doc__name b{font-size:17px} .doctors__deck .doc__name span{font-size:13px} /* one control row under the strip: ‹ ■ ■ ■ › — two bare chevrons in the squares' own purple, on the squares' own centre line. Only three squares show at a time. */ .slider__nav{--arrow:var(--purple);display:flex;align-items:center;justify-content:center; gap:2px;padding-top:16px} /* room for three squares, kept whether three or fewer are lit, so the chevrons never shuffle sideways as the groups change */ /* several sections pad their own dot row down; inside the control row that would drop the squares below the chevrons, so it is reset here at a weight those section rules cannot beat */ .slider .slider__nav .dots{padding:0;gap:9px;justify-content:center;align-items:center; position:static;min-width:60px} .slider__nav .dots .is-out{display:none} /* the box is a thumb's worth of tap area; only the chevron inside is seen */ .slider__arrow{display:grid;place-items:center;width:34px;height:34px;background:none; color:var(--arrow);transition:opacity .18s,color .18s} .slider__arrow:hover{color:var(--purple-dark)} .slider__arrow svg{width:11px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round} .slider__arrow[disabled]{opacity:.3} /* on the dark bands the squares are a lighter purple, so the chevrons are too */ .tech .slider__nav,.doctors__deck .slider__nav{--arrow:#8b2fb5} .tech .slider__arrow:hover,.doctors__deck .slider__arrow:hover{color:#a34fd0} .doctors__deck .slider__nav{padding-top:18px} .treatments .dots,.treatments__viewport .slider .dots,.reviews__list .slider .dots{justify-content:center} .blog__foot{flex-wrap:wrap;gap:16px} /* ---- footer: logos centred, three fold-out lists, contact always in reach ---- */ .site-footer{padding:44px 0 28px} .site-footer__grid{grid-template-columns:1fr;gap:0} .footer-brand{text-align:center;padding-bottom:26px} .footer-brand img.logo{width:220px;margin-inline:auto} .footer-brand .marks{margin-top:26px;justify-items:center;gap:22px} .footer-brand .marks .ht{height:90px} .footer-brand .marks .cert{width:160px} .footer-col{border-top:1px solid rgba(255,255,255,.14)} .footer-col__head{margin:0} .footer-col__toggle{pointer-events:auto;padding:16px 4px;font-size:16px} .footer-col__toggle::after{opacity:1} .footer-col__toggle[aria-expanded="true"]::after{transform:rotate(225deg);margin-top:4px} .footer-col__body{display:none;padding:0 4px 16px} .footer-col.is-open .footer-col__body{display:block} .footer-contact .footer-col__body a{margin-top:12px} .footer-quick{display:flex;flex-direction:column;align-items:center;gap:8px; padding:22px 0 4px;border-top:1px solid rgba(255,255,255,.14)} .footer-quick a{font-size:17px;font-weight:600;color:#fff} .footer-quick a:hover{color:var(--gold)} .site-footer__bar{margin-top:26px} .site-footer__bar span{font-size:12.5px} } /* ========================================================================== Fixed contact bar, on every page. A phone gets a two-button bar along the bottom — request a call, WhatsApp; wider screens get WhatsApp alone as a pill in the bottom-right corner. Each opens a small card above itself; the WhatsApp card carries the clinic's live status. ========================================================================== */ .fixbar{position:fixed;z-index:60;right:24px;bottom:24px;display:flex;flex-direction:column; align-items:flex-end;gap:10px} /* the same buttons as everywhere else on the site: square-cornered, arrowed */ .fixbar__btn{display:inline-flex;align-items:center;gap:12px;min-width:200px;height:48px; padding:0 15px 0 20px;border-radius:6px;font-size:16px;font-weight:600;color:#fff; box-shadow:0 10px 26px rgba(0,0,0,.28);transition:background-color .18s} .fixbar__btn svg{width:20px;height:20px;flex:none} .fixbar__btn span{flex:1;text-align:left} .fixbar__call{display:none;background:var(--purple)} .fixbar__call:hover{background:var(--purple-dark)} .fixbar__wa{background:var(--wa)} .fixbar__wa:hover{background:var(--wa-dark)} .fixbar__pop{position:absolute;right:0;bottom:calc(100% + 12px);width:min(360px,calc(100vw - 32px)); background:var(--ink);color:#fff;border:1px solid var(--gold-line);overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.5);transform-origin:bottom right; animation:fixbar-in .2s ease} .fixbar__pop[hidden]{display:none} @keyframes fixbar-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}} .fixbar__close{position:absolute;top:10px;right:10px;width:32px;height:32px; display:grid;place-items:center;color:var(--gold);font-size:24px;line-height:1; border:1px solid rgba(194,163,99,.45);border-radius:2px} .fixbar__close:hover{background:rgba(194,163,99,.15)} .fixbar__head{display:flex;align-items:center;gap:14px;padding:18px 52px 18px 18px; border-bottom:1px solid rgba(194,163,99,.35)} .fixbar__avatar{position:relative;flex:none;width:56px;height:56px;border-radius:50%;background:#fff; display:grid;place-items:center} .fixbar__avatar img{width:46px;height:auto} .fixbar__avatar::after{content:"";position:absolute;right:1px;bottom:1px;width:13px;height:13px; border-radius:50%;background:#9aa0a7;border:2px solid var(--ink)} .fixbar.is-online .fixbar__avatar::after{background:var(--green)} .fixbar__name{font-family:var(--f-display);font-size:19px;font-weight:700;color:var(--gold)} .fixbar__status{margin-top:3px;font-size:13px;color:#c9ced4} .fixbar.is-online .fixbar__status{color:#7fd89a} .fixbar__chat{padding:18px;background:var(--ink-2)} .fixbar__bubble{display:inline-block;max-width:90%;background:#fff;color:#111;border-radius:2px 10px 10px 10px; padding:10px 14px;font-size:14px;line-height:1.5} .fixbar__bubble small{display:block;margin-top:6px;font-size:11px;color:#6f747b} /* three dots in an empty bubble — how a chat shows that someone is writing */ .fixbar__typing{display:inline-flex;align-items:center;gap:5px; background:#fff;border-radius:2px 10px 10px 10px;padding:14px 16px} .fixbar__typing i{width:7px;height:7px;border-radius:50%;background:#9aa0a7; animation:typingDot 1.1s infinite ease-in-out} .fixbar__typing i:nth-child(2){animation-delay:.15s} .fixbar__typing i:nth-child(3){animation-delay:.3s} @keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}} .fixbar__go{display:flex;align-items:center;gap:12px;margin:16px;height:48px;padding:0 15px 0 20px; border-radius:6px;background:var(--wa);color:#fff;font-size:16px;font-weight:600; transition:background-color .18s} .fixbar__go:hover{background:var(--wa-dark)} .fixbar__go svg{width:20px;height:20px} .fixbar__go span{flex:1} /* the call-back card is the offer form in miniature, on the same dark ground */ .fixbar__pop--call{display:none} .fixbar__pop .offer{max-width:none;padding:20px 18px 18px;background:none} .fixbar__pop .offer__title{font-size:24px;padding-right:40px} .fixbar__pop .offer p{margin-top:8px;font-size:14px;line-height:1.5;color:#c9ced4} .fixbar__pop .offer form{margin-top:14px} @media (max-width:720px){ body{padding-bottom:calc(66px + env(safe-area-inset-bottom))} .fixbar{left:0;right:0;bottom:0;flex-direction:row;align-items:stretch;gap:8px; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:rgba(2,11,18,.96);border-top:1px solid var(--gold-line); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .fixbar__btn{flex:1;min-width:0;height:48px;padding:0 14px;box-shadow:none;font-size:15px; justify-content:center;white-space:nowrap} .fixbar__btn span{flex:none} /* the phone gets the second button back — and only the phone */ .fixbar__call{display:inline-flex} .fixbar__pop--call{display:block} .fixbar__pop{position:fixed;left:10px;right:10px;bottom:calc(74px + env(safe-area-inset-bottom)); width:auto;transform-origin:bottom center} /* the price planner's own summary bar rides above the contact bar */ .dock{bottom:calc(76px + env(safe-area-inset-bottom))} } @media (prefers-reduced-motion:reduce){ .fixbar__pop{animation:none} .fixbar__btn,.footer-col__toggle::after{transition:none} .fixbar__typing i{animation:none} }