/* ========================= Precision Sports – Dark Glass Theme (color-aware) ========================= */ /* --- Design tokens (fallbacks; plugin will override in ) --- */ :root{ --bg:#0b0f14; --card:#111827; --muted:#9aa4b2; --text:#f7f9fc; --brand:#37d6b5; --brand2:#4e8cff; --grad-from: var(--brand); --grad-to: var(--brand2); --grad-angle: 115deg; --gradient: linear-gradient(var(--grad-angle), var(--grad-from), var(--grad-to)); --ring:0 0 0 2px rgba(255,255,255,.08); } /* ========================= Base Variables & Resets ========================= */ *{ box-sizing:border-box; } html,body{ margin:0; padding:0; scroll-behavior:smooth; background:var(--bg); color:var(--text); font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; } a{ color:inherit; text-decoration:none; } img,video{ display:block; max-width:100%; height:auto; } .container{ width:min(1200px,94vw); margin-inline:auto; padding-inline:22px; } .section{ padding:64px 0; } .section-title{ font-size:32px; letter-spacing:.3px; margin:0 0 16px; } .lead{ color:var(--muted); font-size:18px; } .muted{ color:var(--muted); } /* ========================= Header ========================= */ .site-header{ position:sticky; top:0; z-index:60; background:rgba(8,13,18,.55); backdrop-filter:blur(10px); border-bottom:1px solid rgba(16,21,28,.6); } .site-header__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 0; } .site-logo img{ height:clamp(40px,5vw,56px); width:auto; } .nav{ display:flex; gap:18px; align-items:center; } .nav a{ color:var(--text); font-weight:600; opacity:.85; } .nav a:hover{ opacity:1; color:var(--brand); } /* Mobile nav */ .nav-toggle{ display:none; background:transparent; border:0; color:var(--text); } .nav-toggle span{ display:block; width:24px; height:2px; background:var(--text); margin:5px 0; } @media (max-width:860px){ .nav{ position:fixed; inset:64px 12px auto 12px; display:none; flex-direction:column; background:#0e1520; border:1px solid #172132; border-radius:16px; padding:14px; } .nav.open{ display:flex; } .nav-toggle{ display:inline-flex; flex-direction:column; gap:2px; } } /* ========================= Buttons ========================= */ .btn{ /*align-items:center; gap:.5rem;*/ padding:12px 18px; border-radius:14px; font-weight:800; letter-spacing:.3px; border:1px solid #2a3341; color:var(--text); background:rgba(255,255,255,.06); box-shadow:var(--ring); backdrop-filter:saturate(140%) blur(6px); transition:.25s transform,.25s background,.25s border; } .btn:hover{ transform:translateY(-2px); } .btn--primary{ background: var(--gradient); color:#fff; border:0; box-shadow:0 10px 30px color-mix(in oklab, var(--grad-to) 35%, transparent); } .btn--ghost{ background:rgba(255,255,255,.08); border-color:transparent; } .btn--light{ background:#fff; color:#0f172a; border:1px solid rgba(2,8,23,.08); } /* ========================= Hero ========================= */ .hero{ position:relative; isolation:isolate; color:#fff; } .hero--tall{ min-height:82vh; } .hero .container{ padding-block:clamp(90px,12vh,140px); } /* Background / video frame */ .hero__bg{ position:absolute; inset:0; overflow:hidden; z-index:-1; } .hero__bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(.6) saturate(105%); } /* Video cover helper */ .hero__bg video, .hero .hero-video{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:cover!important; max-width:none!important; max-height:none!important; display:block!important; } /* Vignettes – softly tint with brand colors */ .hero__bg::after, .hero__vignette{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(5,10,18,.92) 0%, rgba(5,10,18,.75) 38%, rgba(5,10,18,.35) 60%, rgba(5,10,18,0) 100%), radial-gradient(1200px 600px at 15% -10%, color-mix(in oklab, var(--grad-to) 18%, transparent), transparent 60%), radial-gradient(1200px 600px at 85% 110%, color-mix(in oklab, var(--grad-from) 18%, transparent), transparent 60%); } @media (max-width:900px){ .hero__bg::after, .hero__vignette{ background: linear-gradient(180deg, rgba(5,10,18,.92) 0%, rgba(5,10,18,.75) 45%, rgba(5,10,18,.25) 100%), radial-gradient(900px 500px at 10% -10%, color-mix(in oklab, var(--grad-to) 16%, transparent), transparent 60%); } } /* Single-column hero layout (your current template) */ .hero__row{ display:grid; grid-template-columns: 1fr; justify-content:center; align-items:center; gap: clamp(16px, 2.2vw, 28px); max-width: 980px; margin-inline: auto; } /* Glass content card */ .hero-card{ position:relative; width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:22px; padding:clamp(22px,3.4vw,36px); box-shadow:0 30px 80px rgba(0,0,0,.35); backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); } .hero-card__decor::before, .hero-card__decor::after{ content:""; position:absolute; width:140px; height:140px; border:1.5px solid rgba(255,255,255,.18); border-radius:18px; transform:rotate(18deg); pointer-events:none; } .hero-card__decor::before{ top:-24px; left:-24px; } .hero-card__decor::after{ bottom:-24px; right:-30px; } /* Headline & copy */ .hero-title{ margin:0 0 10px; font-size:clamp(36px,5.4vw,66px); line-height:1.04; font-weight:900; letter-spacing:-.01em; } .text-gradient{ background: var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 1px 0 rgba(0,0,0,.12); } .hero-sub{ margin:0 0 16px; opacity:.95; font-size:clamp(16px,1.4vw,18px); } .hero-ctas{ display:flex; gap:12px; align-items:center; margin:6px 0 8px; } /* Chips */ .hero-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; } .chip{ display:inline-flex; align-items:center; white-space:nowrap; padding:8px 12px; font-weight:700; font-size:14px; border-radius:999px; color:#cfe3ff; background:#0f1723cc; border:1px solid #1a2333; } /* In-card media (small slider inside glass box) */ .hero-card__top{ display:flex; gap:16px; align-items:flex-start; } .hero-card__copy{ flex:1 1 auto; } .hero-card__media{ flex:0 0 auto; width: clamp(220px, 32%, 320px); min-height: 180px; border: 1px solid rgba(255,255,255,.10); background:#000; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.28); } @media (max-width: 900px){ .hero-card__top{ flex-direction: column; } .hero-card__media{ order: -1; /* move before .hero-card__copy */ width: 100%; min-height: 220px; /* tweak as you like */ margin-bottom: 12px; /* breathing room above headline */ }} .hero-card__media .slider, .hero-card__media .swiper, .hero-card__media .sp-gallery, .hero-card__media .sp-gallery-slider{ height:100%; } .hero-card__media img, .hero-card__media video{ width:100%; height:100%; object-fit:cover; } .hero-card__media .slider__btn{ background: rgba(255,255,255,.9); border: 0; padding: 8px 10px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.25); } .hero-card__media .slider__dots{ bottom: 10px; } .hero-card__media .slider__dot{ background:#ffffff88; border-color:#ffffffcc; } .hero-card__media .slider__dot.is-active{ background:#fff; } /* ========================= Cards / Grids / Reveal ========================= */ .grid{ display:grid; gap:22px; } .grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } @media (max-width:900px){ .grid--3{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .grid--3{ grid-template-columns:1fr; } } .card{ background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.22); } .card__media{ aspect-ratio:16/9; background:#0e1622; } .card__body{ padding:18px; } .card h3{ margin:.2rem 0 .4rem; color:var(--text); } .card p{ margin:0 0 .6rem; color:var(--muted); } .reveal{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; } .reveal.is-visible{ opacity:1; transform:none; } /* ========================= Footer ========================= */ .site-footer{ padding:36px 0; border-top:1px solid #131b26; background:#0c1117; color:var(--muted); } .footer-grid{ display:grid; gap:16px; grid-template-columns:2fr 1fr 1fr; } @media (max-width:800px){ .footer-grid{ grid-template-columns:1fr; } } .footer-legal{ color:var(--muted); font-size:14px; } /* ========================= Accent Squares Utility ========================= */ .accent-squares{ position:relative; isolation:isolate; } .accent-squares::before, .accent-squares::after{ content:""; position:absolute; width: var(--sq-size, 140px); height: var(--sq-size, 140px); border: var(--sq-stroke, 3px) solid var(--sq-color, rgba(255,255,255,.12)); border-radius: var(--sq-radius, 12px); transform: rotate(var(--sq-rotate, 45deg)); pointer-events:none; z-index:0; } .accent-squares::before{ top: calc(var(--sq-offset,-70px)); left: calc(var(--sq-offset,-40px)); } .accent-squares::after{ bottom: calc(var(--sq-offset,-70px)); right: calc(var(--sq-offset,-40px)); } @media (prefers-reduced-motion:no-preference){ .accent-squares::before,.accent-squares::after{ transition:transform .6s ease, opacity .6s ease; } .accent-squares:hover::before{ transform: rotate(45deg) translate3d(2px,-2px,0); } .accent-squares:hover::after{ transform: rotate(45deg) translate3d(-2px,2px,0); } } /* ===== Utilities wired to gradient ===== */ .bg-gradient{ background: var(--gradient); } .text-gradient{ background: var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; } .border-gradient{ position:relative; } .border-gradient::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background: var(--gradient); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* ========================= Locations – visual layouts ========================= */ /* Pills (cloud) */ .loc-cloud{ display:flex; flex-wrap:wrap; gap:10px; margin: 6px 0 0; } .loc-pill{ list-style:none; display:inline-flex; align-items:center; padding:10px 14px; border-radius:999px; background: color-mix(in oklab, var(--text) 8%, transparent); border: 1px solid color-mix(in oklab, #fff 6%, transparent); box-shadow: var(--ring); font-weight: 700; letter-spacing:.2px; color: var(--text); } .loc-pill:hover{ transform: translateY(-1px); transition: transform .2s ease; } /* Tiles (cards grid) */ .loc-grid{ display:grid; gap:18px; } .loc-grid--c2{ grid-template-columns: repeat(2, minmax(0,1fr)); } .loc-grid--c3{ grid-template-columns: repeat(3, minmax(0,1fr)); } .loc-grid--c4{ grid-template-columns: repeat(4, minmax(0,1fr)); } .loc-grid--c5{ grid-template-columns: repeat(5, minmax(0,1fr)); } @media (max-width:1000px){ .loc-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (max-width:780px){ .loc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width:520px){ .loc-grid{ grid-template-columns: 1fr; } } .loc-tile{ position:relative; overflow:hidden; border-radius:16px; background: color-mix(in oklab, var(--card) 86%, transparent); border:1px solid color-mix(in oklab, #fff 7%, transparent); backdrop-filter: blur(8px) saturate(130%); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .loc-tile:hover{ transform: translateY(-2px); border-color: color-mix(in oklab, var(--grad-to) 20%, transparent); box-shadow: 0 18px 40px rgba(0,0,0,.28); } .loc-tile__inner{ padding:16px 14px; display:grid; gap:4px; align-items:center; } .loc-pin{ width:28px; height:28px; display:inline-grid; place-items:center; border-radius:10px; color: var(--grad-to); background: color-mix(in oklab, var(--text) 7%, transparent); border: 1px solid color-mix(in oklab, #fff 8%, transparent); } .loc-name{ margin:0; font-size:16px; line-height:1.1; font-weight:800; letter-spacing:.2px; } .loc-blurb{ margin:0; color:var(--muted); font-size:14px; } /* ============ Guarantees ============ */ .guarantees__grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(20px,3vw,36px); align-items:center; } @media (max-width: 900px){ .guarantees__grid{ grid-template-columns:1fr; } } .guarantee-list{ margin:18px 0 0; padding:0; display:grid; gap:14px; } .guarantee-item{ list-style:none; display:grid; grid-template-columns:40px 1fr; gap:12px; padding:14px; border-radius:14px; background: color-mix(in oklab, var(--text) 6%, transparent); border:1px solid color-mix(in oklab, #fff 7%, transparent); box-shadow: var(--ring); transform: translateY(8px); } .guarantee-item h3{ margin:.1rem 0 .2rem; letter-spacing:.2px; } .guarantee-item p{ margin:0; color:var(--muted); } .guarantee-icon{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background: var(--gradient); color:#0a0f16; box-shadow: 0 8px 24px color-mix(in oklab, var(--grad-to) 28%, transparent); } .guarantees__image .guarantees__frame{ position:relative; border-radius:20px; overflow:hidden; background:#0a0f16; border:1px solid color-mix(in oklab, #fff 10%, transparent); box-shadow: 0 28px 70px rgba(0,0,0,.35); } .guarantees__image img{ display:block; width:100%; height:auto; } .guarantees__frame::after{ content:""; position:absolute; inset:0; background: radial-gradient(60% 70% at 80% 10%, color-mix(in oklab, var(--grad-to) 12%, transparent), transparent 60%); pointer-events:none; } /* subtle stagger using your .reveal class */ .reveal.guarantee-item{ opacity:0; transition:opacity .6s ease, transform .6s ease; } .reveal.is-visible.guarantee-item{ opacity:1; transform:none; transition-delay: calc(var(--stagger,0) * 80ms); } /* ===== Testimonials ===== */ .t-card { display:flex; flex-direction:column; } .t-card__head{ display:flex; align-items:center; gap:12px; padding:14px 14px 0 14px; } .t-avatar{ width:42px; height:42px; border-radius:999px; display:grid; place-items:center; font-weight:900; letter-spacing:.5px; background: color-mix(in oklab, var(--grad-from) 12%, #0f172a); border:1px solid color-mix(in oklab, #fff 10%, transparent); box-shadow: 0 6px 18px rgba(0,0,0,.25) inset, 0 8px 20px rgba(0,0,0,.18); } .t-meta{ display:flex; flex-direction:column; } .t-name{ color:var(--text); line-height:1.2; } .t-stars{ display:flex; gap:2px; margin-top:2px; } .t-star svg{ fill: color-mix(in oklab, var(--text) 22%, transparent); opacity:.7; } .t-star.is-filled svg{ fill: #ffd166; opacity:1; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); } .t-carousel{ position:relative; overflow:hidden; background: transparent; } .t-track{ display:flex; gap:18px; overflow: hidden; /* we scroll it via JS */ scroll-behavior:smooth; } .t-slide{ border-radius:16px; overflow:hidden; } .t-nav{ position:absolute; inset:auto 10px 10px auto; display:flex; gap:8px; } .t-btn{ background:#fff; color:#0b1220; border:0; border-radius:10px; padding:8px 10px; font-weight:800; box-shadow:0 8px 24px rgba(0,0,0,.25); cursor:pointer; } .t-btn:hover{ transform:translateY(-1px); } .t-dots{ position:absolute; left:50%; transform:translateX(-50%); bottom:10px; display:flex; gap:6px; } .t-dot{ width:8px; height:8px; border-radius:999px; border:1px solid #ffffffbb; background:#ffffff66; } .t-dot.is-active{ background:#fff; border-color:#fff; } /* tighten body of testimonial */ .t-slide .card__body, .t-card .card__body{ padding:14px; color:var(--muted); } /* ==== Stacked Auto-Rotating Deck ==== */ .stack-slider{ position: relative; width: 100%; height: 100%; min-height: 220px; isolation: isolate; } .stack-card{ position:absolute; inset:0; border-radius: var(--stack-radius, 18px); overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.10) inset; transform-origin: 50% 70%; transition: transform .6s ease, opacity .6s ease, box-shadow .6s ease, filter .6s ease; opacity: 0; /* default hidden; JS assigns visible classes */ pointer-events: none; } .stack-card img{ width:100%; height:100%; object-fit:cover; display:block; } /* Layers (tweak offsets/rotations to taste) */ .stack-card.is-top{ z-index: 4; opacity: 1; transform: translate(0,0) rotate(0deg) scale(1); filter: none; } .stack-card.is-next{ z-index: 3; opacity: 1; transform: translate(16px, 12px) rotate(-3.5deg) scale(.965); filter: saturate(.9) brightness(.96); } .stack-card.is-third{ z-index: 2; opacity: .95; transform: translate(32px, 24px) rotate(4deg) scale(.93); filter: saturate(.85) brightness(.92); } .stack-card.is-fourth{ z-index: 1; opacity: .9; transform: translate(48px, 34px) rotate(-5deg) scale(.90); filter: saturate(.8) brightness(.9); } /* Small screens: tighten the spread */ @media (max-width: 900px){ .stack-card.is-next { transform: translate(10px, 8px) rotate(-3deg) scale(.97); } .stack-card.is-third { transform: translate(20px, 16px) rotate(3.5deg) scale(.94); } .stack-card.is-fourth{ transform: translate(28px, 24px) rotate(-4deg) scale(.92); } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ .stack-card{ transition: none; } } /* ===== Utilities ===== */ .visually-hidden{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); border:0; } /* ===== Brand / logo sizing to match old inline styles ===== */ .site-brand .custom-logo{ height:clamp(40px,5vw,56px); width:auto; display:block; } .site-title{ font-weight:800; font-size:clamp(18px,2vw,22px); } /* ===== WordPress menu structure (top-level) ===== */ .nav .menu{ display:flex; gap:18px; align-items:center; list-style:none; margin:0; padding:0; } .nav .menu > .menu-item{ position:relative; } .nav .menu a{ display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:10px; font-weight:700; color:var(--text); opacity:.9; } .nav .menu > .menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 6px; opacity: 0.7; transition: transform 0.2s ease; } .nav .menu > .menu-item-has-children:hover > a::after { transform: rotate(225deg); opacity: 1; } /* ===== Dropdowns (desktop) ===== */ .nav .sub-menu{ display:none; position:absolute; left:0; top:calc(100% + 10px); min-width:220px; list-style:none; margin:0; padding:8px; background:#0e1520; border:1px solid #172132; border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.4); z-index:100; } .nav .sub-menu .menu-item a{ display:block; padding:8px 10px; border-radius:10px; font-weight:600; } .nav .sub-menu .menu-item a:hover{ background:rgba(255,255,255,.06); color:var(--brand); } @media (hover:hover){ .nav .menu > .menu-item:hover > .sub-menu{ display:block; } } /* ===== Mobile nav (overlay) ===== */ .nav-toggle{ display:none; background:transparent; border:0; color:var(--text); } .nav-toggle span{ display:block; width:24px; height:2px; background:var(--text); margin:3px 0; } @media (max-width:860px){ .nav-toggle{ display:inline-flex; flex-direction:column; gap:1px; } .nav{ position:fixed; inset:64px 12px auto 12px; display:none; flex-direction:column; background:#0e1520; border:1px solid #172132; border-radius:16px; padding:14px; box-shadow:0 30px 80px rgba(0,0,0,.45); } .nav.open{ display:flex; } .nav .menu{ flex-direction:column; align-items:stretch; gap:6px; } .nav .menu > .menu-item > a{ padding:10px 12px; border-radius:12px; } /* Mobile dropdowns: collapsed by default, expand when parent gets .is-open */ .nav .sub-menu{ position:static; display:none; padding:6px; margin:6px 0 0; border-radius:12px; background:rgba(255,255,255,.04); } .nav .menu .menu-item.is-open > .sub-menu{ display:block; } .submenu-toggle{ background:transparent; border:0; padding:0 6px; margin-left:2px; color:var(--muted); cursor:pointer; font-weight:800; } .submenu-toggle:hover{ color:var(--brand); } } /* ===== Header layout: push nav + CTA to the right (logo stays left) */ .site-header__inner{ justify-content:flex-start; } /* instead of space-between */ .site-brand{ margin-right:auto; } /* everything after slides right */ /* ===== Gradient treatment on top-level links (hover/active) */ .nav .menu > .menu-item:hover > a, .nav .menu > .current-menu-item > a, .nav .menu > .current-menu-ancestor > a{ background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ===== Dropdown panel polish + gradient hover */ .nav .sub-menu{ display:none; position:absolute; left:0; top:calc(100% + 10px); min-width:220px; list-style:none; margin:0; padding:8px; background:#0e1520; border:1px solid #172132; border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.4); z-index:100; } /* keep open while moving mouse toward it (hover bridge) */ @media (hover:hover){ .nav .menu > .menu-item-has-children{ position:relative; } .nav .menu > .menu-item-has-children::after{ content:""; position:absolute; left:0; right:0; top:100%; height:14px; /* invisible cushion */ } .nav .menu > .menu-item:hover > .sub-menu, .nav .menu > .menu-item > .sub-menu:hover{ display:block; } } /* dropdown items: gradient hover background */ .nav .sub-menu .menu-item a{ display:block; padding:8px 10px; border-radius:10px; font-weight:600; color:var(--text); } .nav .sub-menu .menu-item a:hover{ color:#fff; background: linear-gradient( var(--grad-angle), color-mix(in oklab, var(--grad-from) 20%, transparent), color-mix(in oklab, var(--grad-to) 20%, transparent) ); } /* ===== Gradient CTA in header (no markup change needed) */ .site-header .btn.btn--light{ background: var(--gradient); color:#fff; border:0; box-shadow:0 10px 30px color-mix(in oklab, var(--grad-to) 35%, transparent); } .site-header .btn.btn--light:hover{ transform:translateY(-2px); filter:saturate(110%); } @media (hover:hover){ .nav .menu > .menu-item.is-hover > .sub-menu{ display:block; } } /* Back-to-top button */ .to-top{ position: fixed; right: clamp(12px, 2vw, 22px); bottom: calc(14px + env(safe-area-inset-bottom)); width: 46px; height: 46px; display: grid; place-items: center; border-radius: 999px; border: 0; background: var(--gradient); color: #fff; box-shadow: var(--ring), 0 14px 34px color-mix(in oklab, var(--grad-to) 30%, transparent); z-index: 80; opacity: 0; transform: translateY(8px) scale(.92); pointer-events: none; transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease, filter .25s ease; } .to-top.is-visible{ opacity: 1; transform: none; pointer-events: auto; } .to-top:hover{ transform: translateY(-2px); filter: saturate(110%); } .to-top:focus-visible{ outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--grad-to) 40%, transparent); } /* === Hero stack (compact, portrait, stacked cards) ======================= */ /* let angled cards stick out; avoid ancestor clipping */ .hero-card, .hero-card__top, .hero-card__media { overflow: visible !important; } /* container: fixed 3:4 portrait, compact width */ #heroStack { aspect-ratio: 3 / 4; max-width: 300px; /* was 420px */ width: min(300px, 70vw); margin-inline: auto; overflow: visible; } /* card look */ #heroStack .swiper-slide { border-radius: 18px; /* was 22px */ background: #111; box-shadow: 0 8px 26px rgba(0,0,0,.28); overflow: hidden; will-change: transform; } /* uniform image fill */ #heroStack .swiper-slide a, #heroStack .swiper-slide img { display: block; width: 100%; height: 100%; } #heroStack .swiper-slide img { object-fit: cover; object-position: center; } /* even smaller on small screens */ @media (max-width: 540px) { #heroStack { max-width: 280px; width: min(280px, 88vw); } } /* ===== Location Hero (clean/compact) ===== */ .loc-breadcrumb{ margin: 10px 0 14px; display:flex; gap:8px; align-items:center; color: var(--muted); font-size: 14px; } .loc-breadcrumb a{ opacity:.9; } .loc-breadcrumb a:hover{ opacity:1; color: var(--brand); } .loc-hero{ padding-top: 36px; padding-bottom: 28px; } .loc-hero__card{ background: color-mix(in oklab, var(--card) 86%, transparent); border: 1px solid color-mix(in oklab, #fff 7%, transparent); border-radius: 16px; padding: 18px 20px; box-shadow: 0 16px 40px rgba(0,0,0,.25); } .loc-hero__grid{ display: grid; gap: 18px; grid-template-columns: 1.2fr .8fr; align-items: center; } @media (max-width: 980px){ .loc-hero__grid{ grid-template-columns: 1fr; } } .loc-hero__title{ margin: 6px 0 6px; font-weight: 900; font-size: clamp(28px, 4.6vw, 44px); line-height: 1.08; letter-spacing: -0.01em; } .loc-hero__sub{ margin: 0 0 10px; color: var(--muted); } .loc-badge{ display:inline-flex; align-items:center; gap:8px; padding: 6px 10px; border-radius: 999px; font-weight: 800; letter-spacing: .2px; background: color-mix(in oklab, var(--text) 8%, transparent); border: 1px solid color-mix(in oklab, #fff 6%, transparent); color: color-mix(in oklab, var(--text) 94%, #000); } .loc-hero__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 8px; } .chip--soft{ background: transparent; color: var(--text); border: 1px solid color-mix(in oklab, #fff 10%, transparent); box-shadow: none; opacity: .9; } .chip--soft:hover{ opacity: 1; } .loc-hero__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; } /* calm primary button (reduce glow/orange pop) */ .btn--calm{ box-shadow: 0 10px 26px color-mix(in oklab, var(--grad-to) 18%, transparent); filter: saturate(105%); } /* media pane (compact portrait) */ .loc-hero__media #heroStack{ aspect-ratio: 4 / 3; max-width: 420px; width: min(420px, 90%); } @media (max-width: 980px){ .loc-hero__media{ order: -1; } /* gallery above copy on mobile */ .loc-hero__media #heroStack{ max-width: 100%; } } /* Optional: soften stacked card edges a touch for this layout */ .loc-hero__media .swiper-slide{ border-radius: 16px; } /* carousel essentials */ .t-track { display: flex; gap: 18px; /* * This is the change: * 'auto' makes it programmatically scrollable by the JS. * 'hidden' was likely causing the 'scroll' event to not fire correctly. */ overflow-x: auto; scroll-behavior: smooth; /* --- ADD THIS PART --- */ /* Hide scrollbar for Firefox */ scrollbar-width: none; /* Hide scrollbar for IE and Edge */ -ms-overflow-style: none; } /* ADD THIS NEW RULE BLOCK for Chrome, Safari, etc. */ .t-track::-webkit-scrollbar { display: none; } /* === Compact hero buttons (esp. mobile) === */ .hero-ctas{ gap: 8px; /* was 12px */ margin: 4px 0 6px; /* was 6px 0 8px */ flex-wrap: wrap; /* allow wrap when tight */ } .hero-ctas .btn{ padding: 10px 14px; /* was 12px 18px */ font-weight: 800; letter-spacing: .1px; /* was .3px */ border-radius: 12px; /* a touch tighter */ line-height: 1.15; white-space: nowrap; /* prevent 2-line labels on iOS */ } /* Make primary + ghost the same height */ .hero-ctas .btn--primary, .hero-ctas .btn--ghost{ min-height: 42px; /* ~44px touch target but compact */ } /* Phone layout */ @media (max-width: 560px){ .hero-ctas{ gap: 6px; margin: 2px 0 4px; } .hero-ctas .btn{ padding: 9px 12px; font-size: 14px; /* was default 16 */ border-radius: 10px; } /* Option A: two small pills on one row */ .hero-ctas .btn{ flex: 1 1 calc(50% - 6px); text-align: center; } /* Chips under buttons get tighter too */ .hero-chips{ gap: 8px; margin-top: 4px; } .chip{ padding: 6px 10px; font-size: 13px; } } /* If you prefer full-width stacked buttons on very small screens, add: */ @media (max-width: 380px){ .hero-ctas .btn{ flex: 1 1 100%; } } /* === Center + slightly narrower hero buttons (mobile) === */ @media (max-width: 560px){ .hero-ctas{ justify-content: center; /* center container */ } .hero-ctas .btn{ flex: 0 1 86%; /* not full width */ max-width: 360px; /* cap width */ min-width: 260px; /* keeps label on one line */ text-align: center; } /* Optional: center the chips under the buttons */ .hero-chips{ justify-content: center; } } @media (max-width: 860px) { .site-logo img, .site-brand .custom-logo { height: clamp(56px, 12vw, 80px); /* increase mobile size */ } } /* Bigger logo on mobile */ @media (max-width: 860px){ .site-brand .custom-logo { height: clamp(64px, 14vw, 88px) !important; /* was ~56px */ width: auto; max-height: none; } /* keep the link from constraining the image */ .site-brand .custom-logo-link{ display: inline-flex; align-items: center; } /* give the header a tad more breathing room if needed */ .site-header__inner{ padding: 16px 0; /* was 14px */ } }