/* Dentalix desktop cinematic hero: 11 real clinic photos cross-fade on native scroll. No JS / prefers-reduced-motion -> the first frame stays visible (never empty). Mobile is untouched: the hero is hidden and the offer slider takes over. */ .dx-hero{ --dx-blue:#005794;--dx-red:#e50913; --dx-top:calc(var(--dx-header-bottom,142px) + 12px); position:relative;isolation:isolate;display:flex;flex-direction:column;box-sizing:border-box; height:100svh;min-height:640px;padding:var(--dx-top) 18px 18px;background:#fff;color:#fff; font-family:'Inter',sans-serif;overflow:visible} .dx-hero__stage{position:relative;flex:1;min-height:520px;isolation:isolate;border-radius:32px;overflow:hidden;background:#03182b} /* ---- cinema: frames stacked in order; frame 0 is the base / still ---- */ .dx-hero__cinema{position:absolute;inset:0;z-index:0;overflow:hidden;transform-origin:50% 46%;will-change:transform} .dx-hero__scene{position:absolute;inset:0;opacity:0} .dx-hero__scene[data-frame="0"]{opacity:1} .dx-hero__scene img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;will-change:transform} /* ---- legibility layers over the photos ---- */ .dx-hero__scrim,.dx-hero__vignette{position:absolute;inset:0;pointer-events:none} .dx-hero__scrim{z-index:1;background: linear-gradient(90deg,rgba(3,20,40,.82),rgba(3,20,40,.44) 42%,rgba(3,20,40,0) 70%), linear-gradient(0deg,rgba(3,20,40,.88),rgba(3,20,40,.32) 34%,rgba(3,20,40,0) 62%)} .dx-hero__vignette{z-index:1;box-shadow:inset 0 0 170px 34px rgba(2,12,26,.42)} /* ---- persistent copy overlay (bottom-left, legible over every frame) ---- */ .dx-hero__inner{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;box-sizing:border-box; padding:clamp(30px,4vw,60px) clamp(30px,5vw,72px) clamp(60px,8vh,96px)} .dx-hero__copy{position:relative;max-width:640px;min-width:0} .dx-hero__eyebrow{margin:0 0 14px;color:#dcefff;font-size:11px;font-weight:600;line-height:1.6;letter-spacing:4px;text-transform:uppercase} .dx-hero h1{margin:0;color:#fff;font-family:'Playfair Display',Georgia,serif;font-size:clamp(58px,7vw,116px);font-weight:600;line-height:.92;letter-spacing:-.02em;text-shadow:0 2px 34px rgba(0,18,36,.4)} .dx-hero__word-mask{display:block;overflow:hidden;padding-bottom:.15em;margin-bottom:-.15em} .dx-hero__word-mask>span{display:block} .dx-hero__lead{max-width:540px;margin:20px 0 0;color:#eaf3fb;font-size:16.5px;font-weight:400;line-height:1.72;text-shadow:0 1px 14px rgba(0,16,32,.45)} .dx-hero__actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:28px} .dx-hero__primary,.dx-hero__secondary{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;box-sizing:border-box;padding:15px 24px;border:1px solid rgba(255,255,255,.55);border-radius:100px;color:#fff;background:rgba(4,34,57,.4);backdrop-filter:blur(14px);font-size:12.5px;font-weight:600;letter-spacing:.02em;line-height:1.4;text-decoration:none;transition:background .2s,color .2s,transform .2s} .dx-hero__primary{background:#fff;color:#005794;border-color:#fff} .dx-hero__primary:hover{background:#eaf5ff;color:#003c67;transform:translateY(-2px)} .dx-hero__secondary:hover{background:rgba(0,87,148,.85);transform:translateY(-2px)} .dx-hero__actions svg{flex:0 0 20px} .dx-hero a:focus-visible,.dx-hero button:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:6px} .dx-hero__locations{display:flex;align-items:center;gap:14px;margin-top:16px;font-size:12px;color:#dcefff} .dx-hero__clinic{display:inline-flex;align-items:center;min-height:40px;color:#fff;text-decoration:underline;text-underline-offset:4px} /* ---- top-right frame meta (counter + label + motion toggle) ---- */ .dx-hero__meta{position:absolute;top:clamp(22px,4vh,40px);right:clamp(24px,4vw,52px);z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:7px;color:#cfe4f5;text-align:right;pointer-events:none} .dx-hero__counter{display:inline-flex;align-items:baseline;gap:6px;font-size:12px;letter-spacing:.14em;font-variant-numeric:tabular-nums} .dx-hero__counter b{font-size:17px;font-weight:700;color:#fff} .dx-hero__art-label{max-width:220px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;line-height:1.5} .dx-hero__motion-toggle{pointer-events:auto;min-height:40px;padding:6px 0;border:0;background:none;color:#fff;font:inherit;font-size:10px;text-decoration:underline;text-underline-offset:4px;cursor:pointer} .dx-hero__motion-toggle[hidden]{display:none} /* ---- scroll hint (before first scroll) + progress bar ---- */ .dx-hero__scroll-hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;display:none;align-items:center;gap:10px;color:#fff;font-size:10px;letter-spacing:1px;text-transform:uppercase;pointer-events:none;text-shadow:0 1px 8px rgba(0,16,32,.5)} .dx-hero__scroll-hint>span{position:relative;width:17px;height:26px;border:1px solid rgba(255,255,255,.65);border-radius:12px} .dx-hero__scroll-hint>span:after{content:"";position:absolute;top:5px;left:6px;width:3px;height:5px;border-radius:2px;background:#fff} .dx-hero__progress{position:absolute;left:0;right:0;bottom:0;z-index:3;height:3px;background:rgba(255,255,255,.14);display:none} .dx-hero__progress>span{display:block;height:100%;background:linear-gradient(90deg,#005794,#e50913);transform:scaleX(0);transform-origin:left} /* ---- scroll-scrub active state (desktop + motion allowed) ---- */ @media(min-width:1024px) and (prefers-reduced-motion:no-preference){ .dx-hero--scroll{height:460svh;min-height:0} .dx-hero--scroll .dx-hero__stage{position:sticky;top:var(--dx-top);flex:none;height:calc(100svh - var(--dx-top) - 18px)} .dx-hero--scroll .dx-hero__scroll-hint{display:inline-flex} .dx-hero--scroll .dx-hero__progress{display:block} .dx-hero--animate .dx-hero__eyebrow{animation:dx-hero-enter .6s .12s both} .dx-hero--animate .dx-hero__word-mask>span{animation:dx-hero-word .95s .2s both} .dx-hero--animate .dx-hero__lead{animation:dx-hero-enter .6s .5s both} .dx-hero--animate .dx-hero__actions{animation:dx-hero-enter .6s .64s both} .dx-hero--animate .dx-hero__locations{animation:dx-hero-enter .6s .76s both} .dx-hero--animate .dx-hero__scroll-hint>span:after{animation:dx-hero-dot 2.2s infinite} .dx-hero--paused .dx-hero__scroll-hint>span:after{animation-play-state:paused} } @keyframes dx-hero-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @keyframes dx-hero-word{from{transform:translateY(115%)}to{transform:translateY(0)}} @keyframes dx-hero-dot{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(7px);opacity:1}} /* laptops shorter than the stage keep the same composition */ @media(min-width:1024px) and (max-height:760px){ .dx-hero{min-height:0} .dx-hero__stage{min-height:0} .dx-hero h1{font-size:clamp(52px,6vw,86px)} .dx-hero__lead{font-size:15px;line-height:1.6;margin-top:14px} .dx-hero__actions{margin-top:20px} .dx-hero__inner{padding-bottom:clamp(52px,7vh,80px)} } /* tablet: static composition (no scrub), still legible */ @media(min-width:769px) and (max-width:1023px){ .dx-hero h1{font-size:clamp(52px,8vw,84px)} .dx-hero__lead{font-size:15px} .dx-hero__meta .dx-hero__art-label{display:none} } /* ===== offer / pricing card side-note (Task B) — legible on the dark mobile panel and the light desktop card ===== */ .dx-note{margin-top:14px;padding:11px 13px;border-radius:12px;border:1px solid rgba(125,135,148,.30);border-left:3px solid rgba(125,135,148,.55);background:rgba(125,135,148,.09);color:inherit} @supports (background:color-mix(in srgb,#000,#fff)){ .dx-note{border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-left:3px solid color-mix(in srgb,currentColor 48%,transparent);background:color-mix(in srgb,currentColor 7%,transparent)} } .pricing-card .dx-note{color:var(--md-text)} .lh-panel .dx-note{color:#fff} .dx-note__label{display:flex;align-items:center;gap:6px;margin:0 0 5px;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.72} .dx-note__label svg{flex:0 0 13px} .dx-note__text{display:block;font-size:12px;line-height:1.55;opacity:.92} /* mobile offer card: single title after dedup — the promoted

keeps the offer-name styling */ .lh-ofer-name{margin:0} /* ===== mobile untouched: hero hidden, offer slider takes over ===== */ @media(max-width:768px){.dx-hero{display:none}} /* Intro mobil: fotografia reală și panoul din referința aprobată de Alex. */ @media(max-width:768px){ body .lh-promo.dx-consult{position:relative;isolation:isolate;display:block;padding:238px 12px 14px;border:0;background:#fff;overflow:hidden} .dx-consult__photo{position:absolute;inset:0 0 auto;height:260px;z-index:-1;overflow:hidden} .dx-consult__photo img{display:block;width:100%;height:calc(100% + 80px);object-fit:cover;object-position:52% 100%;transform:translateY(-80px)} body .lh-promo-panel.dx-consult__panel{position:relative;padding:16px 14px 10px;border-radius:17px;background:#fff;color:#082b4e;box-shadow:0 12px 30px rgba(15,42,66,.09)} .dx-consult__title{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(22px,7.1vw,31px);font-weight:700;line-height:1.11;letter-spacing:-1.1px;color:#082b4e} .dx-consult__title span{color:#d52127} .dx-consult__lead{margin:11px 0 0;font-size:clamp(15px,4.3vw,18px);line-height:1.35;color:#627083;letter-spacing:-.45px} .dx-consult__benefits{display:grid;grid-template-columns:1fr 1.13fr .92fr;gap:6px;list-style:none;margin:18px 0;padding:0} .dx-consult__benefits li{display:flex;align-items:center;gap:7px;min-width:0;font-size:clamp(10px,3vw,13px);font-weight:500;line-height:1.28;letter-spacing:-.35px} .dx-consult__check{flex:0 0 28px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:#fcebec;color:#ce272f;border-radius:50%;font-size:21px;font-weight:700} .dx-consult__cta{display:flex;align-items:center;justify-content:center;gap:18px;min-height:50px;padding:12px 9px;border-radius:12px;background:#d92127;color:#fff;font-size:clamp(13px,4vw,17px);font-weight:700;line-height:1.3;letter-spacing:.1px;text-decoration:none} .dx-consult__cta svg{flex:0 0 24px} .dx-consult__cta:focus-visible{outline:3px solid #005794;outline-offset:4px} .dx-consult__availability{display:flex;align-items:center;justify-content:center;gap:8px;margin:11px 0 0;padding-bottom:12px;border-bottom:1px solid #e4e7ec;color:#627083;font-size:clamp(11px,3.3vw,14px);line-height:1.4;letter-spacing:-.4px} .dx-consult__availability svg{flex:0 0 17px} .dx-consult__trust{display:flex;align-items:center;gap:12px;margin-top:7px;padding:10px 13px;border-radius:12px;background:#f1f4f8;color:#123958} .dx-consult__trust svg{flex:0 0 27px} .dx-consult__trust p{margin:0;font-size:clamp(11px,3.1vw,13px);line-height:1.4;letter-spacing:-.3px} } @media(max-width:340px){ .dx-consult__benefits li{gap:5px} .dx-consult__check{flex-basis:24px;width:24px;height:24px;font-size:19px} } /* 2026-09-15 (Task A): real cabinet photos on the mobile offer cards — full-bleed COVER behind the dark scrim panel (subject fills the frame; the text stays legible inside the panel). Supersedes the Sep13 `contain` override, which was only needed for the old conceptual product illustrations on white. */ @media(max-width:768px){ body .lh-scroller .lh-slide .lh-photo img{object-fit:cover;object-position:center top;transform-origin:center center} } /* 2026-09-15 (Task B): smooth page-by-page snapping on the mobile offer cards, without trapping the user. The PAGE stays the single scroll container. `proximity` (NEVER mandatory) gently settles each swipe onto a card without yanking the user back — after the last card, the sections below .lh carry no snap-align and scroll away freely. (A global `mandatory` previously trapped users at slide 4 / the team section.) `scroll-snap-stop:always` was REMOVED 2026-09-15: on 100vh slides it hard-stopped every swipe, fighting momentum and making scroll feel janky ("sacadat, trebuie scroll perfect"). Proximity alone stays smooth. NOTE: home's inline critical CSS carries `html{scroll-snap-type:none!important}`; dentalix-hero.css is linked AFTER that inline