/* ============================================================ 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} /* ============================================================ 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%} } /* ============================================================ 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 ---- */ ::-webkit-scrollbar{width:5px} ::-webkit-scrollbar-track{background:var(--black)} ::-webkit-scrollbar-thumb{background:var(--gold-deep)} ::-webkit-scrollbar-thumb:hover{background:var(--gold)} /* ---- Custom cursor ---- */ .slr-cursor,.slr-ring{ position:fixed;left:0;top:0;border-radius:50%;pointer-events:none; z-index:99999;will-change:transform; } .slr-cursor{ width:8px;height:8px; background:var(--gold); transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease),opacity .3s; } .slr-ring{ width:34px;height:34px; border:1px solid rgba(201,164,92,.45); transition:width .4s var(--ease),height .4s var(--ease),border-color .4s var(--ease),opacity .3s; } .slr-cursor.on-link{width:48px;height:48px;background:rgba(201,164,92,.12);border:1px solid rgba(201,164,92,.4)} .slr-ring.on-link{width:0;height:0;opacity:0} @media(hover:none){.slr-cursor,.slr-ring{display:none}} /* ---- 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); }