/* ============================================================ Swiss Luxury Rent — Premium Visual Layer Loaded after style.css; never overrides layout — only adds depth, motion, glass, and micro-interactions. ============================================================ */ /* Intro preloader: hidden instantly on repeat visits (flag set in ) */ .intro-seen .preloader{display:none!important} /* ============================================================ Page transitions — smooth fade between pages ============================================================ */ /* Opacity-only — never puts a transform on (that would break position:fixed elements like the custom cursor / nav by creating a containing block). */ @keyframes slrPageIn{from{opacity:0}to{opacity:1}} body{animation:slrPageIn .45s var(--ease) both} body.slr-leaving{opacity:0;transition:opacity .32s var(--ease)} @media (prefers-reduced-motion: reduce){ body{animation:none} body.slr-leaving{transition:none} } /* ============================================================ Cookie consent banner ============================================================ */ .cookie-banner{ position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,140%); z-index:9998;width:min(680px,92vw); display:flex;align-items:center;gap:1.4rem; padding:1.1rem 1.4rem; background:rgba(13,13,15,.82); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid rgba(201,164,92,.28); box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(201,164,92,.12); opacity:0;transition:transform .6s var(--ease),opacity .6s var(--ease); } .cookie-banner.show{transform:translate(-50%,0);opacity:1} .cookie-banner__text{ flex:1;font-size:.86rem;line-height:1.5;color:var(--mute);margin:0; } .cookie-banner__text a{ color:var(--gold);text-decoration:underline;text-underline-offset:2px; transition:.3s var(--ease);white-space:nowrap; } .cookie-banner__text a:hover{color:var(--gold-hi)} .cookie-banner__accept{ flex-shrink:0;cursor:pointer; padding:.7rem 1.6rem;font-family:var(--sans); font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500; background:var(--gold);color:#0a0a0a;border:0; transition:.35s var(--ease); } .cookie-banner__accept:hover{background:var(--gold-hi);transform:translateY(-1px)} @media(max-width:600px){ .cookie-banner{ flex-direction:column;align-items:stretch;text-align:center;gap:.9rem; bottom:0;width:100%;border-left:0;border-right:0;border-bottom:0; } .cookie-banner__accept{width:100%} } /* ============================================================ Service cards — cinematic background video The image div stays underneath as instant poster/fallback; the video fades in only once it is actually playing. ============================================================ */ .cbox__video,.subhero__video,.hero__video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none; } .cbox__video.playing,.subhero__video.playing,.hero__video.playing{opacity:1} /* ============================================================ Vehicle page — "Hear the engine" audio button ============================================================ */ .engine-btn{ display:inline-flex;align-items:center;gap:12px; margin:2px 0 22px;padding:12px 22px; background:transparent;border:1px solid var(--gold-deep,#9c7c3a);border-radius:40px; color:var(--gold,#c9a45c);font-family:inherit;font-size:.82rem;letter-spacing:.12em; text-transform:uppercase;cursor:pointer; transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease); } .engine-btn:hover{background:rgba(201,164,92,.1);border-color:var(--gold,#c9a45c);color:#fff} .engine-btn__ico{font-size:.7rem;line-height:1} .engine-btn.playing{background:rgba(201,164,92,.14);border-color:var(--gold,#c9a45c);color:#fff} /* Animated equaliser — only moves while playing */ .engine-btn__wave{display:inline-flex;align-items:center;gap:3px;height:16px;opacity:.55} .engine-btn__wave i{width:2px;height:5px;background:currentColor;border-radius:2px} .engine-btn.playing .engine-btn__wave{opacity:1} .engine-btn.playing .engine-btn__wave i{animation:engwave .8s ease-in-out infinite} .engine-btn.playing .engine-btn__wave i:nth-child(2){animation-delay:.15s} .engine-btn.playing .engine-btn__wave i:nth-child(3){animation-delay:.3s} .engine-btn.playing .engine-btn__wave i:nth-child(4){animation-delay:.45s} .engine-btn.playing .engine-btn__wave i:nth-child(5){animation-delay:.6s} @keyframes engwave{0%,100%{height:4px}50%{height:15px}} @media(prefers-reduced-motion:reduce){.engine-btn.playing .engine-btn__wave i{animation:none}} /* Vehicle header — stack sale + rent price when both apply */ .vehead__meta{display:flex;flex-direction:column;gap:16px;align-items:flex-end} .vehead__price{display:flex;flex-direction:column} @media(max-width:680px){.vehead__meta{align-items:flex-start}} /* Quote modal — For Rent / For Sale selector */ .qform__modes{display:flex;gap:10px;margin:0 0 4px} .qform__mode{ flex:1;padding:11px 8px;border:1px solid rgba(201,164,92,.4);border-radius:8px; background:transparent;color:var(--mute,#9a968f);font-family:inherit;font-size:.72rem; letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.25s var(--ease); } .qform__mode:hover{border-color:var(--gold,#c9a45c);color:#fff} .qform__mode.active{background:var(--gold,#c9a45c);border-color:var(--gold,#c9a45c);color:#0d0d0f} .qform__modeLabel{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold,#c9a45c);margin:0 0 2px} .qform__dates--hidden{display:none} .qform__hint{font-size:.76rem;color:var(--gold,#c9a45c);margin:6px 0 0;letter-spacing:.02em} /* Long Rent — partner co-branding band (left-aligned) */ .lr-partner{ display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px 3.5rem; margin:3.5rem 0 1rem;text-align:left; } .lr-partner__brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px} .lr-partner__label{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--faint,#8f8c86)} .lr-partner__card{display:inline-block;background:#fff;border-radius:14px;padding:16px 26px;box-shadow:0 16px 44px rgba(0,0,0,.3);line-height:0} .lr-partner__logo{display:block;width:300px;max-width:74vw;height:auto} /* Benefits copy sitting to the right of the partner logo */ .lr-benefits{max-width:46rem} .lr-benefits__title{ font-family:var(--display);font-weight:400;font-size:clamp(1.2rem,2.1vw,1.55rem); color:var(--white,#f6f4ef);margin:0 0 .5rem; } .lr-benefits__list{ list-style:none;padding:0;margin:.9rem 0 0; display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.6rem; } .lr-benefits__list li{ position:relative;padding-left:1.15rem;color:var(--mute,#9a968f); font-size:.86rem;line-height:1.5; } .lr-benefits__list li::before{ content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--gold,#c9a45c); } @media(max-width:1080px){ .lr-partner{grid-template-columns:1fr;gap:1.6rem} .lr-benefits__list{grid-template-columns:1fr} } /* Vehicle search box (cars/jets/yachts) */ .vsearch{max-width:440px;margin:0 auto 1.5rem;position:relative} .vsearch__input{ width:100%;height:48px;padding:0 20px 0 48px;background:rgba(255,255,255,.03); border:1px solid rgba(201,164,92,.3);border-radius:40px;color:#f5f1e6;font-family:inherit;font-size:.95rem; } .vsearch__input::placeholder{color:#8f8c86} .vsearch__input:focus{outline:none;border-color:var(--gold,#c9a45c)} .vsearch__ico{position:absolute;left:19px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--gold,#c9a45c)} .vsearch__ico i{position:relative;display:block;width:11px;height:11px;border:2px solid currentColor;border-radius:50%} .vsearch__ico i::after{content:'';position:absolute;right:-5px;bottom:-4px;width:2px;height:8px;background:currentColor;transform:rotate(-45deg);border-radius:2px} /* Cars/Jets/Yachts — filter + nav menu */ .carfilter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:0 0 2.6rem} .carfilter__btn{ display:inline-block;padding:10px 22px;border:1px solid rgba(201,164,92,.4);border-radius:40px;background:transparent; color:var(--mute,#9a968f);font-family:inherit;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; text-decoration:none;cursor:pointer;transition:.25s var(--ease); } .carfilter__btn:hover{border-color:var(--gold,#c9a45c);color:#fff} .carfilter__btn.active{background:var(--gold,#c9a45c);border-color:var(--gold,#c9a45c);color:#0d0d0f} .carfilter__btn--mode{border-color:rgba(201,164,92,.6)} .carfilter__sep{width:1px;height:22px;background:rgba(201,164,92,.3);margin:0 6px} @media(max-width:640px){.carfilter__sep{display:none}} /* "Offered by" — partner vehicle supplier */ .vcard__offered{font-size:.72rem;color:var(--faint,#8f8c86);margin:.1rem 0 .9rem;letter-spacing:.01em} .vcard__offered strong{color:var(--mute,#9a968f);font-weight:600} .detail__offered{font-size:.82rem;color:var(--faint,#8f8c86);margin:.4rem 0 0} .detail__offered strong{color:var(--white,#f6f4ef);font-weight:600} /* Long Rent — partner cars section below our featured car */ .inventory--partners{border-top:1px solid rgba(201,164,92,.16);margin-top:1.5rem;padding-top:.5rem} .lr-partners-head{text-align:center;margin:1rem 0 2rem} .lr-partners-head .section-title{margin:0} /* Car categories dropdown — services (Long Rent / Choose Your Car) stay outside it */ .catdrop{position:relative} .catdrop__btn{ display:inline-flex;align-items:center;justify-content:space-between;gap:1rem;min-width:210px; padding:10px 20px;border:1px solid rgba(201,164,92,.5);border-radius:40px;background:transparent; color:#fff;font-family:inherit;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; cursor:pointer;transition:.25s var(--ease); } .catdrop__btn:hover,.catdrop.open .catdrop__btn{border-color:var(--gold,#c9a45c)} .catdrop__btn svg{flex:0 0 auto;transition:transform .25s var(--ease)} .catdrop.open .catdrop__btn svg{transform:rotate(180deg)} .catdrop__menu{ position:absolute;top:calc(100% + 8px);left:0;min-width:100%; background:rgba(12,12,14,.97);backdrop-filter:blur(14px); border:1px solid rgba(201,164,92,.25);border-radius:14px;padding:.4rem; display:flex;flex-direction:column;gap:2px;z-index:70; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s; } .catdrop.open .catdrop__menu{opacity:1;visibility:visible;transform:none} .catdrop__item{ display:block;width:100%;text-align:left;white-space:nowrap; padding:10px 16px;border:0;border-radius:10px;background:transparent; color:var(--mute,#9a968f);font-family:inherit;font-size:.68rem;letter-spacing:.14em; text-transform:uppercase;text-decoration:none;cursor:pointer;transition:.2s var(--ease); } .catdrop__item:hover{background:rgba(201,164,92,.1);color:#fff} .catdrop__item.active{background:var(--gold,#c9a45c);color:#0d0d0f} /* Second-level jet menu (appears under Private Jets) */ .carfilter--sub{margin:-1.4rem 0 2.6rem} .carfilter--sub[hidden]{display:none} .carfilter--sub .carfilter__btn{padding:7px 16px;font-size:.64rem;border-color:rgba(201,164,92,.28);border-radius:40px} .carfilter--sub .carfilter__btn.active{background:transparent;border-color:var(--gold,#c9a45c);color:#fff} /* Mobile: every option stays visible, laid out as an even 2-column grid (no scrolling, no ragged wrap) */ @media(max-width:640px){ .carfilter{ display:grid;grid-template-columns:repeat(2,1fr);gap:8px; overflow:visible;margin:0 0 1.4rem; } .carfilter__btn{ width:100%;padding:11px 8px;font-size:.63rem;letter-spacing:.08em; text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* a lone item on the last row spans the full width so the grid stays even (sub-bar only: the car bar contains a hidden separator that would skew nth-child) */ .carfilter--sub .carfilter__btn:last-child:nth-child(odd){grid-column:1/-1} /* category dropdown takes its own full-width row; the two services share the row below */ .catdrop{grid-column:1/-1} .catdrop__btn{width:100%;min-width:0;padding:12px 18px} .catdrop__menu{left:0;right:0} .catdrop__item{white-space:normal} .carfilter--sub{margin:-.5rem 0 1.7rem;gap:7px} .carfilter--sub .carfilter__btn{padding:9px 6px;font-size:.6rem} .vsearch{max-width:100%;margin:0 auto 1.1rem} } /* Location badge (Switzerland / Europe / Italy …) */ .vcard__loc{ position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:6px; padding:5px 12px;border-radius:40px;background:rgba(13,13,15,.6);backdrop-filter:blur(4px); border:1px solid rgba(255,255,255,.16);color:#f5f1e6;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase; } .detail__loc{ display:inline-flex;align-items:center;gap:7px;margin-top:14px; padding:7px 15px;border-radius:40px;border:1px solid rgba(201,164,92,.35); color:var(--mute,#9a968f);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase; } .vcard__loc-dot{width:7px;height:7px;border-radius:50%;background:#d52b1e;flex-shrink:0} /* ============================================================ Choose Your Car — Autoscout24 link form ============================================================ */ .choose-form{display:flex;flex-direction:column;gap:14px;padding:2.5rem 0} .choose-form .qform__pair{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:560px){.choose-form .qform__pair{grid-template-columns:1fr}} .choose-form input,.choose-form textarea{ width:100%;background:rgba(255,255,255,.03);border:1px solid rgba(201,164,92,.25); border-radius:10px;padding:14px 16px;color:#f5f1e6;font-family:inherit;font-size:.95rem; } .choose-form input::placeholder,.choose-form textarea::placeholder{color:#8f8c86} .choose-form input:focus,.choose-form textarea:focus{outline:none;border-color:var(--gold,#c9a45c)} .choose-form textarea{resize:vertical;min-height:84px} .choose-form .form__note{margin-top:4px;font-size:.85rem} .choose-search{position:relative} .choose-search input{padding-left:50px;height:58px;font-size:1.02rem;border-color:rgba(201,164,92,.4)} .choose-search__ico{position:absolute;left:20px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--gold,#c9a45c)} .choose-search__ico i{position:relative;display:block;width:11px;height:11px;border:2px solid currentColor;border-radius:50%} .choose-search__ico i::after{content:'';position:absolute;right:-5px;bottom:-4px;width:2px;height:8px;background:currentColor;transform:rotate(-45deg);border-radius:2px} /* Category card "Coming Soon" badge (Luxury SUVs) */ .cbox__soon{ position:absolute;top:18px;right:18px;z-index:3; padding:6px 14px;border:1px solid var(--gold,#c9a45c);border-radius:40px; background:rgba(13,13,15,.55);backdrop-filter:blur(4px); color:var(--gold,#c9a45c);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase; } /* ============================================================ Home — Statement band (between Services & Featured) ============================================================ */ .statement{position:relative;padding:clamp(7rem,18vh,12rem) 0;overflow:hidden;text-align:center} .statement__bg{position:absolute;inset:0;background-size:cover;background-position:center 58%;z-index:0} .statement .fx{z-index:1} .statement__veil{ position:absolute;inset:0;z-index:2; background: radial-gradient(120% 90% at 50% 50%,rgba(7,7,7,.55) 0%,rgba(7,7,7,.28) 55%,rgba(7,7,7,.5) 100%), linear-gradient(to bottom,rgba(7,7,7,.5),rgba(7,7,7,.35) 40%,rgba(7,7,7,.6)); } .statement__content{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center} .statement__rule{ width:54px;height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin-bottom:2rem; } .statement__text{ font-family:var(--display);font-weight:400;font-style:italic; font-size:clamp(1.7rem,3.6vw,2.8rem);line-height:1.25;color:var(--white); max-width:24ch;text-shadow:0 2px 30px rgba(0,0,0,.85),0 1px 8px rgba(0,0,0,.7); } .statement__kicker{ margin-top:1.6rem; font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-hi); text-shadow:0 1px 14px rgba(0,0,0,.8); } /* ============================================================ Home — Featured Fleet ============================================================ */ .featured{background:var(--ink)} .featured__grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem; } .ffeat{ position:relative;display:block;height:440px;overflow:hidden; border:1px solid rgba(255,255,255,.06); transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease); } .ffeat__img{ position:absolute;inset:0;background-size:cover;background-position:center; transition:transform 1.1s var(--ease); } .ffeat:hover .ffeat__img{transform:scale(1.07)} .ffeat__veil{ position:absolute;inset:0; background:linear-gradient(to top,rgba(7,7,7,.92) 4%,rgba(7,7,7,.35) 48%,rgba(7,7,7,.12) 100%); } .ffeat:hover{ border-color:rgba(201,164,92,.3); box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(201,164,92,.1); } .ffeat__body{ position:absolute;left:0;bottom:0;width:100%;padding:2rem;z-index:2; display:flex;flex-direction:column;gap:.35rem; } .ffeat__brand{ font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold); } .ffeat__model{ font-family:var(--display);font-weight:500;font-size:1.65rem;line-height:1.1;color:var(--white); } .ffeat__tag{font-size:.82rem;color:var(--mute);margin-top:.1rem} .ffeat__more{ margin-top:1rem;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--white); opacity:0;transform:translateY(8px);transition:.4s var(--ease); } .ffeat__more::after{content:' →'} .ffeat:hover .ffeat__more{opacity:1;transform:none;color:var(--gold)} .featured__cta{text-align:center;margin-top:3rem} /* ============================================================ Home — Why Choose Us ============================================================ */ .why{background:var(--black)} .why__grid{ display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem; } .why__item{ text-align:center;padding:2.5rem 1.6rem; background:rgba(255,255,255,.018); border:1px solid rgba(255,255,255,.06); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transition:transform .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease); } .why__item:hover{ transform:translateY(-8px); border-color:rgba(201,164,92,.22); background:rgba(201,164,92,.03); box-shadow:0 24px 56px rgba(0,0,0,.45),0 0 30px rgba(201,164,92,.06); } .why__icon{ display:inline-block;font-size:1.7rem;color:var(--gold);margin-bottom:1.2rem; text-shadow:0 0 20px rgba(201,164,92,.4); } .why__item h3{ font-family:var(--display);font-weight:500;font-size:1.25rem;color:var(--white);margin-bottom:.8rem; } .why__item p{font-size:.9rem;color:var(--mute);line-height:1.7} /* ============================================================ Home — Locations ============================================================ */ .locations{background:var(--ink)} .locations__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem} .loc{ position:relative;height:380px;overflow:hidden; border:1px solid rgba(255,255,255,.06); transition:border-color .5s var(--ease),box-shadow .5s var(--ease); } .loc__img{ position:absolute;inset:0;background-size:cover;background-position:center; filter:grayscale(.4) brightness(.7); transition:transform 1.1s var(--ease),filter .6s var(--ease); } .loc:hover .loc__img{transform:scale(1.06);filter:grayscale(0) brightness(.85)} .loc__veil{ position:absolute;inset:0; background:linear-gradient(to top,rgba(7,7,7,.92),rgba(7,7,7,.25) 70%); } .loc:hover{border-color:rgba(201,164,92,.25);box-shadow:0 24px 60px rgba(0,0,0,.5)} .loc__body{position:absolute;left:0;bottom:0;padding:2.2rem;z-index:2} .loc__tag{ font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold); } .loc__body h3{ font-family:var(--display);font-weight:500;font-size:2rem;color:var(--white);margin:.4rem 0 .6rem; } .loc__body p{font-size:.92rem;color:var(--mute);line-height:1.6} /* ============================================================ Home — CTA Banner ============================================================ */ .cta-banner{position:relative;padding:clamp(6rem,14vh,10rem) 0;overflow:hidden;text-align:center} .cta-banner__bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0} .cta-banner__veil{ position:absolute;inset:0;z-index:1; background:linear-gradient(to bottom,rgba(7,7,7,.82),rgba(7,7,7,.7)); } .cta-banner__content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center} .cta-banner__title{ font-family:var(--display);font-weight:400; font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.08;color:var(--white);max-width:18ch; } .cta-banner__sub{ color:var(--mute);font-size:1.05rem;margin:1.4rem 0 2.6rem;max-width:42ch; } /* ---- Responsive for new sections ---- */ @media(max-width:980px){ .featured__grid{grid-template-columns:1fr;gap:1.2rem} .ffeat{height:380px} .why__grid{grid-template-columns:1fr 1fr;gap:1.4rem} .locations__grid{grid-template-columns:1fr;gap:1.2rem} } @media(max-width:600px){ .why__grid{grid-template-columns:1fr} } /* ============================================================ Mobile refinements - bigger hero slogan, slightly smaller hero buttons - calm the Ken Burns zoom so images aren't over-cropped/zoomed ============================================================ */ @media(max-width:600px){ /* Bigger hero slogan */ .hero__title{font-size:clamp(3.2rem,15.5vw,5rem);line-height:1.0} /* Slightly smaller hero buttons */ .hero__actions .btn{padding:.8rem 1.4rem;font-size:.68rem;letter-spacing:.16em} /* Reduce zoom: hold images near their natural cover scale, no slow zoom-in */ .kenburns{animation:none;transform:scale(1.01)} .hero__img,.statement__bg,.experience__bg{background-position:center center} /* Card images: keep subjects framed, less aggressive crop */ .cbox{aspect-ratio:auto;min-height:340px} .ffeat{height:340px} .ffeat__img,.cbox__img,.loc__img{background-position:center center} } /* ============================================================ Hero — cinematic slideshow + entrance animation ============================================================ */ /* Slides */ .hero__slides{position:absolute;inset:0;z-index:0} .hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s cubic-bezier(.4,0,.2,1);z-index:0} .hero__slide.active{opacity:1;z-index:1} /* Title word entrance */ .hero__title .line{overflow:hidden;display:block} .hero__title .line span{ display:block; transform:translateY(108%); opacity:0; transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .9s cubic-bezier(.22,1,.36,1); } .hero--ready .hero__title .line:nth-child(1) span{transform:none;opacity:1;transition-delay:.2s} .hero--ready .hero__title .line:nth-child(2) span{transform:none;opacity:1;transition-delay:.38s} .hero--ready .hero__title .line:nth-child(3) span{transform:none;opacity:1;transition-delay:.54s} /* Sub + actions entrance */ .hero__sub,.hero__actions{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)} .hero--ready .hero__sub{opacity:1;transform:none;transition-delay:.78s} .hero--ready .hero__actions{opacity:1;transform:none;transition-delay:.96s} /* Slide category label */ .hero__label{ display:flex;align-items:center;gap:1rem; margin-bottom:2.6rem; opacity:0;transform:translateX(-16px); transition:opacity .9s var(--ease),transform .9s var(--ease); } .hero--ready .hero__label{opacity:1;transform:none;transition-delay:.05s} .hero__label-num{font-size:.72rem;letter-spacing:.34em;color:var(--gold);font-weight:500} .hero__label-line{width:36px;height:1px;background:rgba(255,255,255,.3)} .hero__label-cat{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.55)} /* Slide progress indicators */ .hero__indicators{ position:absolute;bottom:2.6rem;left:min(1280px,90vw); margin-left:calc((100vw - min(1280px,90vw))/2); display:flex;gap:.7rem;z-index:10; } .hero__ind{ width:42px;height:2px;padding:0;border:0;cursor:pointer; background:rgba(255,255,255,.2);position:relative;overflow:hidden; } .hero__ind span{ position:absolute;left:0;top:0;height:100%;width:0; background:var(--gold); } .hero__ind.active span{width:100%;transition:width 6s linear} /* ---- Custom scrollbar — wide enough to grab easily ---- */ ::-webkit-scrollbar{width:12px} ::-webkit-scrollbar-track{background:var(--ink)} ::-webkit-scrollbar-thumb{ background:var(--gold-deep); border-radius:8px; border:3px solid var(--ink); /* inset padding so the thumb reads as a rounded pill */ background-clip:padding-box; min-height:48px; } ::-webkit-scrollbar-thumb:hover{background:var(--gold);background-clip:padding-box} /* Firefox */ html{scrollbar-width:thin;scrollbar-color:var(--gold-deep) var(--ink)} /* ---- Custom cursor (G&P style: white + difference blend → self-inverts, always visible on any background; position via GPU transform) ---- */ .slr-cursor,.slr-ring{ position:fixed;top:0;left:0;border-radius:50%;pointer-events:none; transform:translate3d(-50%,-50%,0);z-index:99999;will-change:transform; mix-blend-mode:difference; } .slr-cursor{ width:8px;height:8px;background:#fff; transition:width .3s var(--ease),height .3s var(--ease),background .3s,opacity .3s; } .slr-ring{ width:34px;height:34px;border:1px solid rgba(255,255,255,.75); transition:width .4s var(--ease),height .4s var(--ease),opacity .3s; } .slr-cursor.on-link{width:46px;height:46px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.9)} .slr-ring.on-link{width:0;height:0;opacity:0} .slr-cursor.is-off,.slr-ring.is-off{opacity:0!important} @media(hover:none){.slr-cursor,.slr-ring{display:none}} /* Over the native scrollbar: bring back the real cursor so it can be grabbed */ html.slr-native, html.slr-native *{cursor:auto!important} /* ---- Button shimmer sweep ---- */ .btn--gold{overflow:hidden;position:relative} .btn--gold::after{ content:'';position:absolute;top:0;left:-110%;width:55%;height:100%; background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.22) 50%,transparent 100%); transform:skewX(-18deg); transition:left .6s var(--ease); } .btn--gold:hover::after{left:160%} /* Ghost button glow */ .btn--ghost:hover{ box-shadow:0 0 22px rgba(201,164,92,.18),inset 0 0 16px rgba(201,164,92,.04); } /* ---- Vehicle / fleet cards ---- */ .vcard{ background:rgba(255,255,255,.015); border:1px solid rgba(255,255,255,.06); transition:transform .55s var(--ease),border-color .55s var(--ease),box-shadow .55s var(--ease),background .55s var(--ease); } .vcard:hover{ background:rgba(201,164,92,.04); border-color:rgba(201,164,92,.22); box-shadow:0 28px 70px rgba(0,0,0,.55),0 0 0 1px rgba(201,164,92,.08),inset 0 1px 0 rgba(201,164,92,.12); transform:translateY(-10px); } /* ---- Fleet grid cards (fcard) ---- */ .fcard{transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .fcard:hover{ transform:translateY(-8px); box-shadow:0 22px 55px rgba(0,0,0,.5),0 0 40px rgba(201,164,92,.07); } /* ---- Service boxes ---- */ .cbox{transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .cbox:hover{ transform:translateY(-8px); box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(201,164,92,.14); } /* ---- Yacht cards ---- */ .ycard{transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .ycard:hover{ transform:translateY(-6px); box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(201,164,92,.12); } /* ---- Detail page sidebar glass ---- */ .detail__side{ background:rgba(255,255,255,.025); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.07); padding:2.4rem; transition:border-color .4s var(--ease); } .detail__side:hover{border-color:rgba(201,164,92,.15)} /* ---- Gallery image subtle zoom ---- */ .gallery__img{transition:transform .7s var(--ease),opacity .4s} .gallery__main:hover .gallery__img{transform:scale(1.03)} /* ---- Stats card glass ---- */ .stat{ background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); padding:2rem; transition:border-color .4s var(--ease),box-shadow .4s var(--ease); } .stat:hover{ border-color:rgba(201,164,92,.2); box-shadow:0 0 32px rgba(201,164,92,.06); } /* ---- Office info cards glass ---- */ .office{ background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); padding:1.4rem; transition:border-color .4s var(--ease); } .office:hover{border-color:rgba(201,164,92,.18)} /* ---- Form field focus glow ---- */ .field input:focus,.field textarea:focus,.field select:focus{ box-shadow:0 4px 24px rgba(201,164,92,.08); } /* ---- Gold kicker glow ---- */ .kicker{text-shadow:0 0 24px rgba(201,164,92,.35)} /* ---- Section gold hairline accent (top) ---- */ .intro.section::before, .fleet-section.section::before, .showcase.section::before, .contact.section::before{ content:'';position:absolute;top:0;left:50%;transform:translateX(-50%); width:80px;height:1px; background:linear-gradient(90deg,transparent,rgba(201,164,92,.45),transparent); } /* ---- Hero title ambient glow behind em ---- */ .hero__title em{position:relative} .hero__title em::before{ content:'';position:absolute; inset:-30px -60px; background:radial-gradient(ellipse,rgba(201,164,92,.1) 0%,transparent 70%); pointer-events:none;z-index:-1;filter:blur(24px); } /* ---- Preloader gold line glow ---- */ .preloader__line{box-shadow:0 0 14px rgba(201,164,92,.25)} /* ---- Nav enhancement: subtle gold top rim when scrolled ---- */ .nav.scrolled{border-top:1px solid rgba(201,164,92,.08)} /* ---- Showcase panels glass border ---- */ .showcase__panel{ border-left:1px solid rgba(201,164,92,.08); transition:border-color .4s var(--ease); } .showcase--right .showcase__panel{border-left:0;border-right:1px solid rgba(201,164,92,.08)} /* ---- Lightbox glass ---- */ .lbox{ background:rgba(5,5,7,.92); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); } /* ---- Legal TOC glass ---- */ .legal__toc{ background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.07); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }