/* et-enhance: lightbox + scroll-reveal + hover polish (loaded site-wide) */ /* ---- Lightbox ---- */ .etlb{position:fixed;inset:0;z-index:99999;background:rgba(12,18,32,.93);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .28s ease} .etlb.is-open{display:flex;opacity:1} .etlb__stage{max-width:94vw;max-height:88vh;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none} .etlb__img{max-width:94vw;max-height:88vh;transform-origin:center center;transition:transform .07s linear;cursor:grab;user-select:none;-webkit-user-drag:none;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.55);will-change:transform} .etlb__img:active{cursor:grabbing} .etlb__close{position:absolute;top:16px;right:20px;width:46px;height:46px;border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:44px;text-align:center;cursor:pointer;transition:background .2s ease,transform .2s ease;z-index:2} .etlb__close:hover{background:var(--orange,#E8772E);transform:rotate(90deg)} .etlb__hint{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.72);font-size:12.5px;letter-spacing:.3px;pointer-events:none} #et-hero,.et-mhero__car-photo img,img.et-zoom{cursor:zoom-in} @media (max-width:640px){.etlb__hint{font-size:11px}.etlb__close{top:10px;right:12px}} /* ---- Scroll reveal (JS adds .et-reveal, then .is-in) ---- */ .et-reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.22,.7,.24,1),transform .6s cubic-bezier(.22,.7,.24,1)} .et-reveal.is-in{opacity:1;transform:none} /* stagger children within a grid */ .et-makes.et-reveal-group>*,.et-models.et-reveal-group>*,.et-whys.et-reveal-group>*,.et-steps.et-reveal-group>*{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease} .et-makes.et-reveal-group.is-in>*,.et-models.et-reveal-group.is-in>*,.et-whys.et-reveal-group.is-in>*,.et-steps.et-reveal-group.is-in>*{opacity:1;transform:none} /* ---- Hover polish (subtle, non-breaking) ---- */ .et-cta__btn,.et-ribbon__go,.et-gq-btn,.et-showmore-btn{transition:transform .18s ease,box-shadow .22s ease,background .2s ease,filter .2s ease} .et-cta__btn:hover,.et-ribbon__go:hover,.et-gq-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(232,119,46,.32)} .et-table tbody tr{transition:background .16s ease} .et-table tbody tr:hover{background:rgba(232,119,46,.05)} .et-faq__item{transition:border-color .2s ease,box-shadow .2s ease} .et-model-card__img img{transition:transform .5s cubic-bezier(.2,.7,.2,1)} /* accessibility: honour reduced motion */ @media (prefers-reduced-motion:reduce){ .et-reveal,.et-reveal.is-in,.et-reveal-group>*,.et-makes.is-in>*,.et-models.is-in>*{opacity:1!important;transform:none!important;transition:none!important} .etlb,.etlb__img{transition:none!important} .et-cta__btn:hover,.et-ribbon__go:hover,.et-gq-btn:hover{transform:none} } /* trusted-suppliers 2-col */ .et-trustcols{display:flex;gap:52px;align-items:center} .et-trustcols__body{flex:1;min-width:0} .et-trustcols__media{flex:0 0 460px;max-width:460px} .et-trustcols__media img{width:100%;height:auto;display:block;border-radius:18px;box-shadow:0 22px 50px rgba(26,43,74,.18)} @media(max-width:980px){.et-trustcols{flex-direction:column;gap:28px;align-items:stretch}.et-trustcols__media{flex:none;max-width:520px;width:100%;margin:0 auto}} /* ===== et-smooth: page-enter + consistent interaction easing ===== NOTE: animates OPACITY ONLY on . A transform on body would create a containing block and break position:fixed children (quote modal, lightbox, back-to-top). No fill-mode, so no stacking context lingers after it runs. Pure CSS - if JS fails the page still shows. */ /* Page-enter fade deliberately NOT used: animating from opacity:0 means any stall (slow composite, paused animation, background tab) leaves the whole site blank. Section-level scroll-reveal below gives the same feel safely, because it degrades to visible if it never runs. */ /* interaction easing */ a,button,.et-btn,.et-cta__btn,.et-make,.et-model-card,.et-why,.et-step,.et-faq__item,.et-listing-card,.et-trustbar__item{transition:color .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .28s ease,transform .28s cubic-bezier(.22,.61,.36,1),opacity .22s ease} /* card lift */ body .et-make:hover,body .et-model-card:hover,body .et-listing-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(26,43,74,.10)} /* image ease inside cards (no layout shift - the wrapper clips) */ body .et-model-card__img,body .et-make__logo{overflow:hidden} body .et-model-card__img img,body .et-make img{transition:transform .5s cubic-bezier(.22,.61,.36,1)} body .et-model-card:hover .et-model-card__img img{transform:scale(1.04)} /* focus should never be animated away - keep it instant and visible */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--orange,#E8772E);outline-offset:2px;transition:none} @media (prefers-reduced-motion:reduce){ a,button,.et-make,.et-model-card,.et-why,.et-step,.et-listing-card,.et-model-card__img img{transition:none!important} body .et-make:hover,body .et-model-card:hover,body .et-listing-card:hover{transform:none} body .et-model-card:hover .et-model-card__img img{transform:none} } /* et-astra-guard-lightbox-close: Astra's global button padding/width reset was overriding this circular close button, stretching it into an oval (60px x 46px instead of 46x46) */ body .etlb__close{width:46px;height:46px;padding:0;box-sizing:border-box;line-height:44px}