@font-face{font-family:'Clash Display';src:url('../fonts/ClashDisplay-Light.woff2') format('woff2'),url('../fonts/ClashDisplay-Light.woff') format('woff');font-weight:300;font-display:swap} @font-face{font-family:'Clash Display';src:url('../fonts/ClashDisplay-Regular.woff2') format('woff2'),url('../fonts/ClashDisplay-Regular.woff') format('woff');font-weight:400;font-display:swap} @font-face{font-family:'Clash Display';src:url('../fonts/ClashDisplay-Medium.woff2') format('woff2'),url('../fonts/ClashDisplay-Medium.woff') format('woff');font-weight:500;font-display:swap} @font-face{font-family:'Clash Display';src:url('../fonts/ClashDisplay-Semibold.woff2') format('woff2'),url('../fonts/ClashDisplay-Semibold.woff') format('woff');font-weight:600;font-display:swap} :root{ --bg:#0a0a0a; --bg-alt:#111111; --panel:#161616; --text:#f2f2f2; --muted:#9a9a9a; --gold:#c9a86a; --line:rgba(255,255,255,.08); --font-head:'Clash Display',Arial,sans-serif; --font-body:'Clash Display',Helvetica,Arial,sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* safety net: transforms/animations on full-width sections (e.g. hero intro scale) must never create a horizontal scrollbar */ html,body{overflow-x:clip} body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-weight:300;line-height:1.7} img{display:block;width:100%;height:100%;object-fit:cover} a{color:inherit;text-decoration:none} /* ===== PRELOADER ===== */ #preloader{ position:fixed;inset:0;z-index:1000;background:#050505;overflow:hidden; display:flex;flex-direction:column;align-items:center;justify-content:center; transition:opacity .6s ease,visibility .6s; } #preloader.done{opacity:0;visibility:hidden} /* intro already seen this session — html.skip-intro is set in before first paint */ html.skip-intro #preloader{display:none} html.skip-intro header.hero{filter:none;opacity:1;transform:none;transition:none} .pre-logo,.pre-wave{position:relative;z-index:2} .pre-wheel{ position:absolute;z-index:1;bottom:-16vmin;left:0; width:85vmin;height:85vmin;opacity:.12;pointer-events:none; animation:wheelRoll 4.5s linear infinite; } @keyframes wheelRoll{ from{transform:translateX(-90vmin) rotate(0deg)} to{transform:translateX(calc(100vw + 5vmin)) rotate(1080deg)} } .pre-logo{width:min(230px,52vw);height:auto;animation:preLogoPulse 2s ease-in-out infinite} @keyframes preLogoPulse{0%,100%{opacity:.75}50%{opacity:1}} .pre-wave{width:220px;height:36px;overflow:hidden;margin-top:30px} .pre-wave svg{width:340px;height:36px;display:block} .pre-wave path{fill:none;stroke:var(--gold);stroke-width:1.6;animation:waveSlide linear infinite} .pre-wave .w1{animation-duration:1.3s;opacity:.95} .pre-wave .w2{animation-duration:1.8s;opacity:.5} .pre-wave .w3{animation-duration:2.4s;opacity:.28} @keyframes waveSlide{from{transform:translateX(0)}to{transform:translateX(-60px)}} /* ===== NAV (Mansory-style: solid black bar, inline links + MENU overlay) ===== */ nav{ position:fixed;top:0;left:0;right:0;z-index:100; display:flex;align-items:stretch;justify-content:space-between; height:64px;padding:0 0 0 40px; background:#000;border-bottom:1px solid var(--line); transition:background .4s ease; } nav.scrolled{background:rgba(8,8,8,.55);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)} .logo{display:flex;align-items:center} /* logo mark is ~1.8:1, so it is sized by height to sit inside the 64px bar */ .logo img{height:42px;width:auto;display:block;transition:opacity .3s} .logo:hover img{opacity:.72} .nav-links{display:flex;align-items:stretch;list-style:none;margin-left:auto} .nav-links li{display:flex} .nav-links a{ display:flex;align-items:center;padding:0 26px; font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text); border-left:1px solid var(--line);transition:background .3s,color .3s; } .nav-links a:hover{background:var(--gold);color:#000} .menu-btn{ display:flex;align-items:center;gap:14px;cursor:pointer; background:none;border:none;border-left:1px solid var(--line); padding:0 40px;color:var(--text); font-family:var(--font-body);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase; transition:background .3s,color .3s;z-index:210; } .menu-btn:hover{background:var(--gold);color:#000} .menu-btn .bars{display:flex;flex-direction:column;gap:5px} .menu-btn .bars span{display:block;width:24px;height:1px;background:currentColor;transition:transform .3s,opacity .3s} body.menu-open .menu-btn .bars span:nth-child(1){transform:translateY(6px) rotate(45deg)} body.menu-open .menu-btn .bars span:nth-child(2){opacity:0} body.menu-open .menu-btn .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* full-screen overlay menu */ .overlay-menu{ position:fixed;inset:0;z-index:200;background:rgba(5,5,5,.98); display:flex;flex-direction:column;align-items:center;justify-content:center; opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s; } body.menu-open .overlay-menu{opacity:1;visibility:visible} .overlay-close{ position:absolute;top:14px;right:24px;width:48px;height:48px; background:none;border:1px solid var(--line);border-radius:50%; color:var(--text);font-size:1.1rem;line-height:1;cursor:pointer; transition:border-color .3s,color .3s,transform .3s; } .overlay-close:hover{border-color:var(--gold);color:var(--gold);transform:rotate(90deg)} .overlay-menu ul{list-style:none;text-align:center} .overlay-menu li{overflow:hidden} .overlay-menu a{ display:block;font-family:var(--font-head);font-weight:300;text-transform:uppercase; font-size:clamp(1.8rem,4.5vw,3rem);letter-spacing:.18em;color:var(--text); padding:12px 0;transform:translateY(100%);transition:color .3s,transform .5s ease; } body.menu-open .overlay-menu a{transform:none} body.menu-open .overlay-menu li:nth-child(2) a{transition-delay:.06s} body.menu-open .overlay-menu li:nth-child(3) a{transition-delay:.12s} body.menu-open .overlay-menu li:nth-child(4) a{transition-delay:.18s} body.menu-open .overlay-menu li:nth-child(5) a{transition-delay:.24s} .overlay-menu a:hover{color:var(--gold)} .overlay-meta{margin-top:60px;text-align:center;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)} .overlay-meta a{font-family:var(--font-body);font-size:.7rem;letter-spacing:.3em;color:var(--gold);display:inline;padding:0;transform:none} /* ===== HERO ===== */ header.hero{ height:100vh;min-height:600px;position:relative; display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden; filter:blur(28px);opacity:.35;transform:scale(1.03); transition:filter 1.4s ease,opacity 1.4s ease,transform 1.4s ease; } body.loaded header.hero{filter:blur(0);opacity:1;transform:none} .hero-bg{ position:absolute;inset:0; background:url('https://images.unsplash.com/photo-1553440569-bcc63803a83d?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat; filter:brightness(.3) saturate(.85); animation:heroZoom 18s ease-out forwards; } .hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.55))} @keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}} .hero-content{position:relative;z-index:2;padding:0 24px} .hero-kicker{font-size:.8rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);margin-bottom:22px} .hero h1{ font-family:var(--font-head);font-weight:500;text-transform:uppercase; font-size:clamp(2.6rem,7vw,5.5rem);letter-spacing:.12em;line-height:1.1; } .hero-logo img{width:min(440px,72vw);height:auto;margin:0 auto;object-fit:contain} .hero p{max-width:520px;margin:26px auto 0;color:#d9d9d9;font-size:1rem;letter-spacing:.05em} .hero-cta{ display:inline-block;margin-top:44px;padding:16px 52px; border:1px solid var(--gold);color:var(--gold); font-size:.75rem;letter-spacing:.35em;text-transform:uppercase; transition:background .3s,color .3s; } .hero-cta:hover{background:var(--gold);color:#0a0a0a} .scroll-hint{ position:absolute;bottom:34px;left:50%;transform:translateX(-50%); width:1px;height:56px;background:linear-gradient(var(--gold),transparent); animation:pulse 2s infinite; } @keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}} /* ===== PROMO BANNER ===== */ .promo-wrap{padding:14px;position:relative;z-index:5} .promo{ position:relative;display:block; background:var(--gold);color:#0a0a0a;border-radius:22px; min-height:280px; } .promo-inner{ position:relative;z-index:2;display:flex;align-items:center;gap:44px; padding:56px clamp(300px,38vw,500px) 56px 60px;max-width:1400px;margin:0 auto; } .promo-mark{ flex:none;width:104px;height:104px;background:#0a0a0a;border-radius:6px; display:flex;align-items:center;justify-content:center; } .promo-mark img{width:62px;height:62px} .promo-tag{ font-size:.68rem;font-weight:500;letter-spacing:.4em;text-transform:uppercase; margin-bottom:12px; } .promo-title{ font-family:var(--font-head);font-weight:600; font-size:clamp(1.3rem,2.5vw,2rem);line-height:1.25;letter-spacing:.01em; text-transform:none; } .promo-actions{display:flex;gap:18px;margin-top:30px;flex-wrap:wrap} .promo-btn{ display:inline-block;padding:15px 40px;border-radius:999px; font-size:.72rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase; border:1px solid #0a0a0a;transition:background .3s,color .3s,transform .3s; } .promo-btn.solid{background:#0a0a0a;color:var(--gold)} .promo-btn.solid:hover{background:transparent;color:#0a0a0a} .promo-btn.ghost{color:#0a0a0a} .promo-btn.ghost:hover{background:#0a0a0a;color:var(--gold)} .promo-btn:hover{transform:translateY(-2px)} .promo-product{ position:absolute;z-index:1;right:26px;top:50%; width:min(440px,38vw);height:auto; transform:translateY(-56%) rotate(12deg); filter:drop-shadow(-18px 24px 32px rgba(0,0,0,.35)); pointer-events:none; } .promo-close{ position:absolute;top:16px;right:16px;z-index:3; width:38px;height:38px;border-radius:50%; background:rgba(10,10,10,.14);border:1px solid rgba(10,10,10,.35);color:#0a0a0a; font-size:1rem;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background .3s,color .3s,transform .3s; } .promo-close:hover{background:#0a0a0a;color:var(--gold);transform:rotate(90deg)} .promo-close:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px} /* brand slider */ .promo-fade{transition:opacity .35s ease,transform .35s ease} .promo.swapping .promo-fade{opacity:0;transform:translateY(10px)} .promo-product{transition:opacity .35s ease} .promo.swapping .promo-product{opacity:0} .promo-dots{display:flex;gap:10px;margin-top:28px} .promo-dot{ width:9px;height:9px;border-radius:50%;padding:0;cursor:pointer; background:rgba(10,10,10,.22);border:1px solid rgba(10,10,10,.45); transition:background .3s,transform .3s; } .promo-dot:hover{background:rgba(10,10,10,.5)} .promo-dot.active{background:#0a0a0a;transform:scale(1.3)} .promo-wrap{transition:max-height .55s ease,opacity .45s ease,padding .55s ease} .promo-wrap.promo-dismissed{max-height:0 !important;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden} .promo-wrap.promo-gone{display:none} @media(prefers-reduced-motion:reduce){ .promo-wrap,.promo-close,.promo-fade,.promo-product{transition:none} } /* ===== SECTIONS (shared) ===== */ section{padding:120px 48px} .section-head{text-align:center;margin-bottom:70px} .section-head .kicker{font-size:.7rem;letter-spacing:.45em;text-transform:uppercase;color:var(--gold);margin-bottom:14px} .section-head h2{ font-family:var(--font-head);font-weight:400;text-transform:uppercase; font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:.15em; } .section-head .rule{width:56px;height:1px;background:var(--gold);margin:26px auto 0} /* ===== ABOUT ===== */ #about{background:var(--bg-alt)} .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;max-width:1200px;margin:0 auto;align-items:center} .about-img{aspect-ratio:4/5;overflow:hidden} .about-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.85);transition:transform .8s,filter .8s} .about-img:hover img{transform:scale(1.04);filter:grayscale(0) brightness(1)} /* text side */ .about-text h3{ font-family:var(--font-head);font-weight:400;text-transform:uppercase; font-size:1.4rem;letter-spacing:.12em;margin-bottom:22px; } .about-lead{color:var(--text);font-size:1.02rem;line-height:1.8;margin-bottom:34px} .about-text p{color:var(--muted);margin-bottom:20px} /* capabilities grid — replaces the second text block */ .about-caps{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:26px 34px} .about-caps li{position:relative;padding-left:20px;transition:transform .35s ease} .about-caps li::before{ content:'';position:absolute;left:0;top:5px;width:8px;height:8px; border:1px solid var(--gold);transform:rotate(45deg); background:transparent;transition:background .35s ease,box-shadow .35s ease; } .about-caps li:hover{transform:translateX(4px)} .about-caps li:hover::before{background:var(--gold);box-shadow:0 0 10px rgba(201,168,106,.5)} .about-caps__title{display:block;font-family:var(--font-head);font-weight:500; font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px; transition:color .3s ease} .about-caps li:hover .about-caps__title{color:var(--gold)} .about-caps__desc{display:block;color:var(--muted);font-size:.86rem;line-height:1.55} /* signature pull-quote */ .about-quote{ margin:34px 0 4px;padding:4px 0 4px 24px;border-left:2px solid var(--gold); font-family:var(--font-head);font-weight:400;font-style:normal; font-size:1.15rem;line-height:1.55;letter-spacing:.01em;color:var(--text); } .about-quote cite{ display:block;margin-top:14px;font-family:var(--font-body);font-style:normal; font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold); } /* stats with divider */ .about-stats{display:flex;gap:48px;margin-top:40px;padding-top:36px; border-top:1px solid var(--line);flex-wrap:wrap} .stat .num{font-family:var(--font-head);font-size:2.2rem;color:var(--gold);letter-spacing:.05em} .stat .label{font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)} /* ===== GALLERY OF WORK ===== */ .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:1400px;margin:0 auto} .work-item{position:relative;aspect-ratio:4/3;overflow:hidden;cursor:pointer} .work-item img{filter:brightness(.75);transition:transform .7s,filter .7s} .work-item:hover img{transform:scale(1.06);filter:brightness(.4)} .work-item::before{ content:'';position:absolute;inset:0;z-index:4;pointer-events:none; border:1px solid transparent;transition:border-color .5s ease; } .work-item:hover::before{border-color:rgba(201,168,106,.55)} .work-item::after{ content:'';position:absolute;inset:0;z-index:2;pointer-events:none; background:url('../img/kf-logo-white.png') center 44%/30% no-repeat; opacity:0;transform:scale(.85);transition:opacity .5s ease,transform .5s ease; } .work-item:hover::after{opacity:.92;transform:scale(1)} .work-caption{ position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end; padding:28px;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s; background:linear-gradient(to top,rgba(0,0,0,.75),transparent 60%); } .work-item:hover .work-caption{opacity:1;transform:translateY(0)} .work-caption .tag{font-size:.65rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold)} .work-caption h4{font-family:var(--font-head);font-weight:400;font-size:1.15rem;letter-spacing:.1em;text-transform:uppercase;margin-top:6px} .work-item.wide{grid-column:span 2;aspect-ratio:auto} /* ===== GALLERY LIGHTBOX ===== */ .lightbox{ position:fixed;inset:0;z-index:400;background:rgba(4,4,4,.94); display:flex;align-items:center;justify-content:center; opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s; } .lightbox.open{opacity:1;visibility:visible} .lb-stage{position:relative;overflow:hidden;cursor:zoom-in;touch-action:none;border:1px solid var(--line);background:#000} .lb-stage img{ width:auto;height:auto;max-width:min(92vw,1500px);max-height:78vh;object-fit:contain; user-select:none;-webkit-user-drag:none;transition:transform .45s ease; } .lb-stage.zoomed{cursor:zoom-out} .lb-stage.zoomed img{transform:scale(2.4)} .lb-close{ position:absolute;top:16px;right:20px;z-index:5;width:48px;height:48px;border-radius:50%; background:none;border:1px solid var(--line);color:var(--text);font-size:1.05rem;line-height:1;cursor:pointer; transition:border-color .3s,color .3s,transform .3s; } .lb-close:hover{border-color:var(--gold);color:var(--gold);transform:rotate(90deg)} .lb-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:5; width:54px;height:54px;border-radius:50%;cursor:pointer; background:rgba(10,10,10,.55);border:1px solid var(--line);color:var(--text); font-size:1.2rem;line-height:1;transition:border-color .3s,color .3s; } .lb-arrow:hover{border-color:var(--gold);color:var(--gold)} .lb-arrow.prev{left:clamp(8px,3vw,40px)} .lb-arrow.next{right:clamp(8px,3vw,40px)} .lb-bar{ position:absolute;left:0;right:0;bottom:0;z-index:4;pointer-events:none; display:flex;align-items:flex-end;justify-content:space-between;gap:18px; padding:18px 28px;background:linear-gradient(to top,rgba(0,0,0,.7),transparent); } .lb-tag{display:block;font-size:.62rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold)} .lb-title{font-family:var(--font-head);font-weight:400;font-size:1.05rem;letter-spacing:.1em;text-transform:uppercase} .lb-hint{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)} .lb-count{font-size:.7rem;letter-spacing:.4em;color:var(--muted);font-variant-numeric:tabular-nums} @media(max-width:768px){ .lb-arrow{width:44px;height:44px} .lb-arrow.prev{left:6px} .lb-arrow.next{right:6px} .lb-hint{display:none} .lb-stage img{max-width:94vw;max-height:70vh} .lb-bar{padding:14px 16px} } /* ===== BRAND MARQUEE ===== */ .brands{ background:var(--bg-alt);border-top:1px solid var(--line); padding:48px 0;overflow:hidden; } .brands .kicker{ text-align:center;font-size:.65rem;letter-spacing:.45em; text-transform:uppercase;color:var(--muted);margin-bottom:36px; } .marquee{ display:flex;width:max-content; animation:marquee 40s linear infinite; } .marquee:hover{animation-play-state:paused} .marquee-track{display:flex;align-items:center;flex-shrink:0} .marquee-track span{ font-family:var(--font-head);font-weight:400;text-transform:uppercase; font-size:1.3rem;letter-spacing:.25em;color:#3d3d3d; padding:0 48px;white-space:nowrap;position:relative; transition:color .4s;cursor:default; } .marquee-track span::after{ content:'';position:absolute;right:0;top:50%;transform:translateY(-50%); width:4px;height:4px;background:var(--gold);border-radius:50%;opacity:.4; } .marquee-track span:hover{color:var(--text)} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ===== PRODUCTS (wheel slider) ===== */ #products{background:var(--bg-alt)} .wheel-slider-wrap{position:relative;max-width:1400px;margin:0 auto} .wheel-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none} .wheel-track::-webkit-scrollbar{display:none} .wheel-card{flex:0 0 282px;scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);cursor:pointer;transition:border-color .3s,transform .3s} .wheel-card:hover{border-color:var(--gold);transform:translateY(-4px)} .wheel-card__img{position:relative;aspect-ratio:1;background:#fff;padding:20px;overflow:hidden} .wheel-card__img::before{ content:'';position:absolute;inset:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c9a86a' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M0 28l20-16 20 16 20-16 20 16 20-16 20 16'/%3E%3Cpath d='M0 68l20-16 20 16 20-16 20 16 20-16 20 16'/%3E%3Cpath d='M0 108l20-16 20 16 20-16 20 16 20-16 20 16'/%3E%3C/g%3E%3C/svg%3E"); background-size:120px 120px; opacity:0;transition:opacity .45s ease; } .wheel-card:hover .wheel-card__img::before{opacity:.5;animation:treadFlow 2.6s linear infinite} @keyframes treadFlow{from{background-position:0 0}to{background-position:120px 0}} .wheel-card__img img{position:relative;z-index:1;object-fit:contain;transition:transform .5s} .wheel-card:hover .wheel-card__img img{transform:scale(1.05)} .ribbon-new{position:absolute;top:14px;left:14px;z-index:2;background:var(--gold);color:#000;font-size:.62rem;font-weight:500;letter-spacing:.25em;text-transform:uppercase;padding:5px 14px;border-radius:3px} .wheel-card__body{padding:18px 20px 22px} .wheel-swatches{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap} .wheel-swatch{width:52px;height:52px;padding:6px;background:#fff;border:2px solid transparent;border-radius:4px;cursor:pointer;transition:border-color .2s} .wheel-swatch img{object-fit:contain} .wheel-swatch.active{border-color:var(--gold)} .wheel-card__name{font-family:var(--font-head);font-weight:500;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;transition:color .3s ease} .wheel-card:hover .wheel-card__name{color:var(--gold)} .wheel-card__finish{font-size:.72rem;color:var(--gold);letter-spacing:.06em;margin:4px 0 12px;min-height:1.1em} .wheel-card__specs{font-size:.78rem;color:var(--muted);line-height:1.9} .wheel-card__specs b{color:var(--text);font-weight:400} .wheel-arrow{position:absolute;top:141px;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;background:#fff;color:#000;border:none;font-size:1.3rem;line-height:1;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.45);transition:background .3s} .wheel-arrow:hover{background:var(--gold)} .wheel-arrow.prev{left:-14px} .wheel-arrow.next{right:-14px} .wheel-arrow[hidden]{display:none} /* brand filter chips above each catalogue slider */ .brand-filter{ display:flex;flex-wrap:wrap;justify-content:center;gap:8px; max-width:1080px;margin:0 auto 42px; } .brand-chip{ display:inline-flex;align-items:center;gap:7px;cursor:pointer; padding:9px 18px;border-radius:999px; background:none;border:1px solid var(--line);color:var(--muted); font-family:var(--font-body);font-size:.62rem;font-weight:400; letter-spacing:.2em;text-transform:uppercase;white-space:nowrap; transition:background .3s,border-color .3s,color .3s; } .brand-chip:hover{border-color:var(--gold);color:var(--text)} .brand-chip .n{font-size:.58rem;letter-spacing:.08em;opacity:.55} .brand-chip.active{background:var(--gold);border-color:var(--gold);color:#0a0a0a} .brand-chip.active .n{opacity:.7} .brand-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .wheel-card.filtered-out{display:none} .brand-empty{ text-align:center;padding:40px 0;color:var(--muted); font-size:.72rem;letter-spacing:.24em;text-transform:uppercase; } /* on phones the chips would stack 5 rows deep — scroll them sideways instead */ @media(max-width:768px){ .brand-filter{ flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto; margin-bottom:26px;padding-bottom:4px; scrollbar-width:none;-ms-overflow-style:none; } .brand-filter::-webkit-scrollbar{display:none} .brand-chip{padding:8px 15px;font-size:.58rem;letter-spacing:.16em} } /* wheel detail modal */ .wheel-modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.82);padding:24px} .wheel-modal.open{display:flex} .wheel-modal__box{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--bg-alt);border:1px solid var(--line);max-width:940px;width:100%;max-height:92vh;overflow:auto} .wheel-modal__img{position:relative;background:#fff;padding:36px;display:flex;align-items:center;justify-content:center;overflow:hidden} .wheel-modal__img::before{ content:'';position:absolute;inset:0;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23c9a86a' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M0 28l20-16 20 16 20-16 20 16 20-16 20 16'/%3E%3Cpath d='M0 68l20-16 20 16 20-16 20 16 20-16 20 16'/%3E%3Cpath d='M0 108l20-16 20 16 20-16 20 16 20-16 20 16'/%3E%3C/g%3E%3C/svg%3E"); background-size:120px 120px; opacity:.4;animation:treadFlow 2.6s linear infinite; } .wheel-modal__img img{position:relative;z-index:1;object-fit:contain;max-height:420px} .wheel-modal__info{padding:40px 36px} .wheel-modal__brand{font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold)} .wheel-modal__model{font-family:var(--font-head);font-weight:500;font-size:2rem;letter-spacing:.12em;text-transform:uppercase;margin:6px 0 18px} .wheel-modal__finish-label{font-size:.8rem;color:var(--muted);margin-bottom:10px} .wheel-modal__finish-label span{color:var(--text)} .wheel-modal__specs{border-top:1px solid var(--line);margin-top:22px;padding-top:20px;font-size:.85rem;color:var(--muted);line-height:2} .wheel-modal__specs b{color:var(--text);font-weight:400} .wheel-modal__desc{font-size:.85rem;color:var(--muted);margin-top:16px} .wheel-modal__cta{display:inline-block;margin-top:26px;padding:14px 42px;border:1px solid var(--gold);color:var(--gold);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;background:none;cursor:pointer;font-family:var(--font-body);transition:background .3s,color .3s} .wheel-modal__cta:hover{background:var(--gold);color:#000} .wheel-modal__close{position:absolute;top:10px;right:10px;z-index:2;width:40px;height:40px;background:#000;color:#fff;border:1px solid var(--line);border-radius:50%;font-size:1rem;cursor:pointer} .wheel-modal__close:hover{color:var(--gold)} /* ===== CONTACT (gold panel, matches promo banner) ===== */ .contact-wrap{ max-width:1120px;margin:0 auto; display:grid;grid-template-columns:340px 1fr;gap:56px; background:var(--gold);color:#0a0a0a;border-radius:22px; padding:56px 60px; } /* shop info column */ .contact-info{border-right:1px solid rgba(10,10,10,.25);padding-right:48px} .contact-info h3{ font-family:var(--font-head);font-weight:500;text-transform:uppercase; font-size:1.05rem;letter-spacing:.14em;margin-bottom:30px; } .ci-block{margin-bottom:28px} .ci-block:last-child{margin-bottom:0} .ci-label{ display:block;font-size:.65rem;font-weight:500;letter-spacing:.3em; text-transform:uppercase;color:rgba(10,10,10,.65);margin-bottom:8px; } .ci-block p{font-size:.95rem;line-height:1.6} .ci-block p a{color:#0a0a0a;border-bottom:1px solid rgba(10,10,10,.35);transition:border-color .3s} .ci-block p a:hover{border-bottom-color:#0a0a0a} .hours{display:grid;gap:7px;font-size:.85rem} .hrow{display:flex;justify-content:space-between;gap:16px} .hrow span:last-child{font-variant-numeric:tabular-nums} .hrow.closed span:last-child{color:rgba(10,10,10,.55)} .hrow.today{font-weight:500} .hrow.today span:first-child::after{ content:'';display:inline-block;width:6px;height:6px;margin-left:8px; background:#0a0a0a;border-radius:50%;vertical-align:middle; } .contact-form{display:grid;grid-template-columns:1fr 1fr;gap:24px} .contact-form .full{grid-column:1/-1} .field label,.field .field-label{display:block;font-size:.65rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:rgba(10,10,10,.65);margin-bottom:10px} /* interested-in checkboxes */ .check-group{display:flex;flex-wrap:wrap;gap:14px 32px;padding-top:6px} .check-group .check{ display:flex;align-items:center;gap:12px;margin-bottom:0;cursor:pointer; font-size:.92rem;font-weight:400;letter-spacing:.02em;text-transform:none;color:#0a0a0a; -webkit-user-select:none;user-select:none; } .check input{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .check .box{ position:relative;flex:none;width:19px;height:19px;border-radius:3px; border:1px solid rgba(10,10,10,.5);background:transparent; transition:background .25s,border-color .25s; } .check:hover .box{border-color:#0a0a0a} .check input:checked+.box{background:#0a0a0a;border-color:#0a0a0a} .check input:checked+.box::after{ content:'';position:absolute;left:6px;top:2px;width:5px;height:10px; border:solid var(--gold);border-width:0 2px 2px 0;transform:rotate(45deg); } .check input:focus-visible+.box{outline:2px solid #0a0a0a;outline-offset:2px} /* direct children only — must not hit the visually-hidden checkboxes inside .check */ .field>input,.field>select,.field>textarea{ width:100%;background:transparent;border:none;border-bottom:1px solid rgba(10,10,10,.35); padding:12px 2px;color:#0a0a0a;font-family:var(--font-body);font-size:.95rem;font-weight:400; transition:border-color .3s;border-radius:0; } .field>input::placeholder,.field>textarea::placeholder{color:rgba(10,10,10,.45)} .field>select{appearance:none;cursor:pointer} .field>select option{background:#fff;color:#0a0a0a} .field>textarea{resize:vertical;min-height:120px} .field>input:focus,.field>select:focus,.field>textarea:focus{outline:none;border-bottom-color:#0a0a0a} .submit-btn{ grid-column:1/-1;justify-self:center;margin-top:16px; background:#0a0a0a;border:1px solid #0a0a0a;color:var(--gold);border-radius:999px; padding:16px 64px;font-size:.75rem;font-weight:500;letter-spacing:.35em;text-transform:uppercase; cursor:pointer;transition:background .3s,color .3s,transform .3s;font-family:var(--font-body); } .submit-btn:hover{background:transparent;color:#0a0a0a;transform:translateY(-2px)} .submit-btn:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px} .submit-btn:disabled{opacity:.55;cursor:progress;transform:none} /* Honeypot. Off-screen rather than display:none — bots that skip hidden fields still fill this one, and it stays out of the tab order via tabindex="-1" and out of the a11y tree via aria-hidden. */ .field-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-note{grid-column:1/-1;text-align:center;font-size:.8rem;color:rgba(10,10,10,.75);display:none;margin-top:12px} .form-note.is-pending{opacity:.7} .form-note.is-error{color:#8c1c1c;font-weight:500} .form-note.is-error a{color:#8c1c1c;text-decoration:underline} /* ===== FOOTER ===== */ footer{ border-top:1px solid var(--line);padding:40px 48px; display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px; } footer .f-logo-img{height:44px;width:auto;display:block} footer p{font-size:.7rem;letter-spacing:.15em;color:var(--muted);text-transform:uppercase} .f-social{display:flex;gap:24px} .f-social a{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:color .3s} .f-social a:hover{color:var(--gold)} /* ===== reveal on scroll ===== */ .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease} .reveal.visible{opacity:1;transform:none} /* ===== RESPONSIVE ===== */ @media(max-width:1024px){ .wheel-modal__box{grid-template-columns:1fr} .wheel-modal__img img{max-height:300px} } /* nav needs ~1105px at full link padding; step down before it clips the Menu button */ @media(max-width:1240px){ .nav-links a{padding:0 15px} } @media(max-width:1000px){ .nav-links{display:none} } @media(max-width:768px){ nav{padding-left:24px;height:58px} .logo img{height:36px} .menu-btn{padding:0 24px} section{padding:80px 24px} .promo-wrap{padding:10px} .promo-inner{flex-direction:column;align-items:flex-start;gap:26px;padding:36px 28px 40px} .promo-mark{width:72px;height:72px} .promo-mark img{width:44px;height:44px} .promo-product{ position:static;width:240px;margin:-16px 16px 0 auto;display:block; transform:rotate(12deg) translateY(24px); } .about-grid{grid-template-columns:1fr;gap:56px} .about-caps{grid-template-columns:1fr;gap:22px} .work-grid{grid-template-columns:1fr} .work-item.wide{grid-column:span 1} .contact-form{grid-template-columns:1fr} .contact-wrap{grid-template-columns:1fr;gap:40px;padding:36px 28px 40px;border-radius:18px} .contact-info{border-right:none;border-bottom:1px solid rgba(10,10,10,.25);padding-right:0;padding-bottom:36px} .hours{max-width:340px} footer{flex-direction:column;text-align:center} .wheel-card{flex-basis:246px} .wheel-arrow.prev{left:8px} .wheel-arrow.next{right:8px} } /* ===== ABOUT SUBPAGE ===== */ .about-more{ display:inline-block;margin-top:36px;padding:14px 44px; border:1px solid var(--gold);color:var(--gold); font-size:.72rem;letter-spacing:.3em;text-transform:uppercase; transition:background .3s,color .3s; } .about-more:hover{background:var(--gold);color:#0a0a0a} .nav-links a.current{color:var(--gold)} .page-hero{ padding:170px 24px 90px;text-align:center;background:var(--bg-alt); border-bottom:1px solid var(--line); } .page-hero .kicker{font-size:.7rem;letter-spacing:.45em;text-transform:uppercase;color:var(--gold);margin-bottom:14px} .page-hero h1{ font-family:var(--font-head);font-weight:400;text-transform:uppercase; font-size:clamp(2rem,5vw,3.2rem);letter-spacing:.15em; } .page-hero p{max-width:560px;margin:22px auto 0;color:var(--muted)} .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1240px;margin:0 auto} .svc{background:var(--panel);border:1px solid var(--line);padding:36px 28px;transition:border-color .3s,transform .3s} .svc:hover{border-color:var(--gold);transform:translateY(-4px)} .svc .n{display:block;font-family:var(--font-head);color:var(--gold);font-size:.78rem;letter-spacing:.3em;margin-bottom:18px} .svc h3{font-family:var(--font-head);font-weight:500;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px} .svc p{color:var(--muted);font-size:.88rem;line-height:1.7} .steps{max-width:860px;margin:0 auto} .step{display:flex;gap:32px;padding:34px 0;border-bottom:1px solid var(--line);align-items:baseline} .step:last-child{border-bottom:none} .step .num{font-family:var(--font-head);color:var(--gold);font-size:1.5rem;letter-spacing:.05em;min-width:56px;flex:none} .step h3{font-family:var(--font-head);font-weight:500;font-size:1rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px} .step p{color:var(--muted);font-size:.92rem} .ig-band{ max-width:1240px;margin:0 auto; background:var(--gold);color:#0a0a0a;border-radius:22px; padding:64px 48px;text-align:center; } .ig-band .tag{font-size:.68rem;font-weight:500;letter-spacing:.4em;text-transform:uppercase;margin-bottom:14px} .ig-band h2{ font-family:var(--font-head);font-weight:600;text-transform:none; font-size:clamp(1.3rem,2.6vw,2rem);line-height:1.3;letter-spacing:.01em; } .ig-band p{color:rgba(10,10,10,.75);max-width:520px;margin:16px auto 0} .ig-band .promo-actions{justify-content:center} @media(max-width:1024px){.svc-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){ .svc-grid{grid-template-columns:1fr} .page-hero{padding:140px 24px 70px} .step{gap:20px;flex-direction:column;padding:28px 0} .step .num{min-width:0} } /* ===== WHEEL SHOWROOM (wheels.html) ===== */ .showroom{ position:relative;min-height:100vh;min-height:100svh; display:flex;flex-direction:column; padding:84px 24px 0;overflow:hidden; } .showroom::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 58% 44% at 50% 40%,rgba(201,168,106,.09),transparent 70%); } .sr-head{position:relative;z-index:2;text-align:center} .sr-head .kicker{font-size:.7rem;letter-spacing:.45em;text-transform:uppercase;color:var(--gold);margin-bottom:6px} .sr-title{ font-family:var(--font-head);font-weight:500;text-transform:uppercase; font-size:clamp(1.7rem,3.6vw,2.7rem);letter-spacing:.14em;line-height:1.1; } .sr-title .ribbon-new{position:static;display:inline-block;vertical-align:middle;margin-left:16px;transform:translateY(-4px)} .sr-count{margin-top:4px;font-size:.72rem;letter-spacing:.4em;color:var(--muted);font-variant-numeric:tabular-nums} .sr-count b{color:var(--gold);font-weight:400} /* center stage */ .sr-stage{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;min-height:210px} .sr-mark{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); font-family:var(--font-head);font-weight:600;text-transform:uppercase; font-size:clamp(4.5rem,17vw,15rem);letter-spacing:.06em;line-height:1; color:transparent;-webkit-text-stroke:1px rgba(201,168,106,.13); -webkit-user-select:none;user-select:none;pointer-events:none;white-space:nowrap; } .sr-wheel{ position:relative;z-index:2;height:clamp(200px,32vh,400px);aspect-ratio:1; filter:drop-shadow(0 34px 40px rgba(0,0,0,.6)); transition:transform .3s ease,opacity .3s ease; } .sr-wheel img{object-fit:contain} .showroom.swapping .sr-wheel{transform:rotate(calc(var(--dir,1)*65deg)) scale(.88);opacity:0} .showroom.swapping .sr-mark{opacity:0} .sr-mark{transition:opacity .3s ease} .sr-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:5; width:56px;height:56px;border-radius:50%;cursor:pointer; background:transparent;border:1px solid var(--line);color:var(--text); font-size:1.3rem;line-height:1;transition:border-color .3s,color .3s,background .3s; } .sr-arrow:hover{border-color:var(--gold);color:var(--gold)} .sr-arrow.prev{left:clamp(4px,6vw,120px)} .sr-arrow.next{right:clamp(4px,6vw,120px)} /* finish picker */ .sr-finish{position:relative;z-index:2;text-align:center;padding:2px 0 10px} .sr-finish .wheel-swatches{justify-content:center;margin-bottom:8px} .sr-finish .wheel-swatch{border-radius:50%} .sr-finish-name{font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)} .sr-finish-name span{color:var(--muted)} /* fitment spec bar */ .sr-specbar{ position:relative;z-index:2;display:flex;justify-content:center;flex-wrap:wrap; border-top:1px solid var(--line); } .sr-specbar .spec{ padding:10px 30px 8px;border-left:1px solid var(--line);text-align:center;min-width:118px; } .sr-specbar .spec:first-child{border-left:none} .sr-specbar .spec .l{display:block;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .sr-specbar .spec .v{font-family:var(--font-head);font-weight:500;font-size:1.05rem;letter-spacing:.08em;color:var(--text)} /* wheels/tires tab switcher + brand chips */ .sr-controls{position:relative;z-index:2;display:flex;flex-direction:column;min-width:0} .sr-tabs{position:relative;z-index:2;display:flex;justify-content:center;gap:8px;flex:none} .sr-tab{ position:relative;background:none;border:none;cursor:pointer; padding:13px 30px 15px;color:var(--muted); font-family:var(--font-body);font-size:.7rem;letter-spacing:.35em;text-transform:uppercase; transition:color .3s; } .sr-tab::after{content:'';position:absolute;left:28px;right:28px;bottom:9px;height:1px;background:transparent;transition:background .3s} .sr-tab:hover{color:var(--text)} .sr-tab.active{color:var(--gold)} .sr-tab.active::after{background:var(--gold)} /* brand chips inside the showroom — one scrolling row so the whole showcase still fits a single viewport (see the compact media queries below) */ .sr-filter{ position:relative;z-index:2;flex-wrap:nowrap;justify-content:flex-start; overflow-x:auto;margin:0 auto 6px;padding:0 4px 4px;max-width:100%; scrollbar-width:none;-ms-overflow-style:none; } .sr-filter::-webkit-scrollbar{display:none} .sr-filter .brand-chip{padding:7px 15px;font-size:.58rem;letter-spacing:.16em} /* bottom model rail */ .sr-rail{position:relative;z-index:2;border-top:1px solid var(--line);background:rgba(17,17,17,.6)} .sr-rail-track{ display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth; padding:14px 24px 16px;width:max-content;max-width:100%;margin:0 auto; scrollbar-width:none;-ms-overflow-style:none; } .sr-rail-track::-webkit-scrollbar{display:none} .rail-item{ flex:none;width:118px;padding:6px 4px 10px;text-align:center;cursor:pointer; background:none;border:none;font-family:var(--font-body);color:var(--text); opacity:.5;transition:opacity .3s; } .rail-item:hover{opacity:.85} .rail-item.active{opacity:1} .rail-item .puck{ width:78px;height:78px;margin:0 auto 8px;border-radius:50%; background:#fff;padding:9px;border:2px solid transparent; transition:border-color .3s,box-shadow .3s,transform .3s; } .rail-item .puck img{object-fit:contain} .rail-item:hover .puck{transform:translateY(-3px)} .rail-item.active .puck{border-color:var(--gold);box-shadow:0 0 26px rgba(201,168,106,.3)} .rail-item .bd{display:block;font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:2px} .rail-item .nm{display:block;font-family:var(--font-head);font-weight:500;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase} .rail-item.active .nm{color:var(--gold)} .sr-rail .wheel-arrow{top:50%} .sr-rail .wheel-arrow.prev{left:10px} .sr-rail .wheel-arrow.next{right:10px} /* detail section */ .sr-details{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:start} .sr-details h3{ font-family:var(--font-head);font-weight:400;text-transform:uppercase; font-size:1.35rem;letter-spacing:.12em;margin-bottom:20px; } .sr-details h3 span{color:var(--gold)} .sr-desc{color:var(--muted);font-size:.96rem;line-height:1.9;margin-bottom:26px} .sr-feats{list-style:none;margin-bottom:36px} .sr-feats li{padding:9px 0 9px 30px;position:relative;color:var(--text);font-size:.9rem;letter-spacing:.04em} .sr-feats li::before{content:'\2713';position:absolute;left:0;color:var(--gold)} .sr-cta-row{display:flex;gap:16px;flex-wrap:wrap} .sr-cta-row .solid{ display:inline-block;padding:14px 44px;background:var(--gold);border:1px solid var(--gold);color:#0a0a0a; font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;transition:background .3s,color .3s; } .sr-cta-row .solid:hover{background:transparent;color:var(--gold)} .sr-cta-row .ghost{ display:inline-block;padding:14px 44px;border:1px solid var(--line);color:var(--text); font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;transition:border-color .3s,color .3s; } .sr-cta-row .ghost:hover{border-color:var(--gold);color:var(--gold)} .d-rows{border-top:1px solid var(--line)} .d-row{display:flex;justify-content:space-between;gap:24px;padding:15px 2px;border-bottom:1px solid var(--line)} .d-row .k{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);padding-top:3px;flex:none} .d-row .v{text-align:right;font-size:.9rem;color:var(--text);letter-spacing:.03em} /* compact vertical rhythm on shorter viewports so the model rail stays above the fold */ @media(max-height:820px){ .showroom{padding-top:74px} .sr-head .kicker{margin-bottom:2px} .sr-title{font-size:clamp(1.5rem,3vw,2rem)} .sr-count{margin-top:2px;font-size:.66rem} .sr-stage{min-height:160px} .sr-wheel{height:clamp(160px,24vh,320px)} .sr-finish{padding:2px 0 8px} .sr-finish .wheel-swatch{width:44px;height:44px;padding:5px} .sr-specbar .spec{padding:7px 26px 5px} .sr-specbar .spec .v{font-size:.95rem} .sr-tab{padding:9px 26px 11px} .sr-tab::after{bottom:6px} .sr-filter{margin-bottom:6px} .sr-filter .brand-chip{padding:6px 13px} .rail-item{width:104px} .rail-item .puck{width:64px;height:64px;padding:8px} .sr-rail-track{padding:10px 24px 12px} } @media(max-width:900px){ .sr-details{grid-template-columns:1fr;gap:48px} } @media(max-width:768px){ /* compact rhythm here too — the whole showcase must fit one phone viewport, otherwise scrolling to the rail hides the heading under the fixed nav */ .showroom{padding:68px 12px 0} .sr-head .kicker{margin-bottom:2px} .sr-count{margin-top:2px;font-size:.66rem} .sr-arrow{width:44px;height:44px} .sr-arrow.prev{left:2px} .sr-arrow.next{right:2px} .sr-stage{min-height:165px} .sr-wheel{height:clamp(160px,25vh,280px)} .sr-finish{padding:2px 0 10px} .sr-finish .wheel-swatch{width:44px;height:44px;padding:5px} .sr-specbar .spec{padding:9px 12px 7px;min-width:0;flex:1 1 30%} .sr-specbar .spec:nth-child(3n+1){border-left:none} .sr-specbar .spec .v{font-size:.92rem} .sr-tab{padding:9px 22px 11px} .sr-tab::after{left:22px;right:22px;bottom:6px} .rail-item{width:92px} .rail-item .puck{width:60px;height:60px;padding:8px} .sr-rail-track{padding:10px 12px 12px} } /* short phones (SE class) — squeeze further so the showcase still fits one screen */ @media(max-width:768px) and (max-height:700px){ .sr-wheel{height:clamp(128px,20vh,170px)} .sr-stage{min-height:128px} .sr-finish{padding:0 0 8px} .sr-finish .wheel-swatch{width:38px;height:38px;padding:4px} .sr-specbar .spec{padding:6px 10px 4px} .sr-specbar .spec .l{margin-bottom:2px} /* tightest phones: tabs and chips share one row so the wheel stays big */ .sr-controls{flex-direction:row;align-items:center;gap:6px;padding:0 2px} .sr-tabs{flex:none} .sr-tab{padding:5px 12px 8px} .sr-tab::after{left:12px;right:12px;bottom:4px} .sr-filter{margin:0;padding:0;min-width:0;flex:1} .sr-filter .brand-chip{padding:5px 12px;font-size:.55rem} .rail-item .puck{width:50px;height:50px;padding:6px} .sr-rail-track{padding:6px 12px 8px} }