/* ========================================= SafeBus — Product page Design system: refined-industrial, mobile-first ========================================= */ :root { /* Default palette — "Classic SafeBus" */ --sb-yellow: #FFC72C; --sb-yellow-2:#FFB300; --sb-black: #0A0A0A; --sb-ink: #141414; --sb-bone: #F5F2EA; --sb-paper: #FFFFFF; --sb-line: #1a1a1a14; --sb-line-strong: #1a1a1a26; --sb-mute: #6B6B6B; --sb-amber: #FF8A00; --sb-glow: 255, 138, 0; /* Typography */ --font-display: "Archivo Black", "Arial Black", sans-serif; --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", monospace; /* Spacing & radius */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; /* Page chrome */ --page-max: 1180px; --gutter: 20px; } /* Palette tweaks — applied by Tweaks panel via [data-palette] on */ html[data-palette="hivis"] { --sb-yellow: #F5D300; --sb-amber: #FF4D00; --sb-bone: #FAFAF7; } html[data-palette="mono"] { --sb-yellow: #0A0A0A; --sb-yellow-2: #1f1f1f; --sb-amber: #FFC72C; --sb-bone: #F2F1ED; } html[data-palette="night"] { --sb-yellow: #FFC72C; --sb-yellow-2: #FFB300; --sb-black: #FFFFFF; --sb-ink: #F1EFEA; --sb-bone: #0B0C0E; --sb-paper: #16181C; --sb-line: #ffffff1a; --sb-line-strong: #ffffff2e; --sb-mute: #9a9a9a; } /* ========================================================= THEME: MODERN — Vercel/Linear-inspired minimal monochrome Hairline borders, mono accent labels, no offset shadows. ========================================================= */ html[data-theme="modern"] { --sb-bone: #FAFAFA; --sb-paper: #FFFFFF; --sb-ink: #0A0A0A; --sb-mute: #737373; --sb-line: #EAEAEA; --sb-line-strong: #D4D4D4; --font-display: "Geist", ui-sans-serif, system-ui, sans-serif; } html[data-theme="modern"] .hero__title { font-weight: 700; letter-spacing: -0.04em; font-size: clamp(36px, 9vw, 84px); } html[data-theme="modern"] .hero__title em { background: none; box-shadow: none; transform: none; padding: 0; color: var(--sb-mute); font-weight: 400; } html[data-theme="modern"] .hero__title em::before { content: '— '; color: var(--sb-line-strong); } html[data-theme="modern"] .cycle-word { color: var(--sb-ink); } html[data-theme="modern"] .hero__crumb .chip { background: var(--sb-paper); border: 1px solid var(--sb-line); border-radius: 6px; color: var(--sb-mute); font-weight: 500; } html[data-theme="modern"] .hero__crumb .chip .dot { background: #00C853; box-shadow: 0 0 0 3px rgba(0,200,83,0.18); } html[data-theme="modern"] .selector-card, html[data-theme="modern"] .chat__bubble, html[data-theme="modern"] .cmd__bar { border: 1px solid var(--sb-line-strong); box-shadow: none; } html[data-theme="modern"] .selector-prompt { font-family: var(--font-display); font-weight: 500; } html[data-theme="modern"] .selector-prompt .blank { background: var(--sb-bone); color: var(--sb-ink); border: 1px solid var(--sb-line-strong); border-radius: 6px; font-weight: 600; box-shadow: none; } html[data-theme="modern"] .selector-prompt .blank.is-empty { background: transparent; border: 1px dashed var(--sb-line-strong); border-radius: 6px; color: var(--sb-mute); padding: 2px 12px 4px; } html[data-theme="modern"] .brand__logo { filter: none; } html[data-theme="modern"] .site-header { background: rgba(250,250,250,0.85); } html[data-theme="modern"] .product[data-style="showcase"] .product__media { background: var(--sb-bone); } html[data-theme="modern"] .product[data-style="showcase"], html[data-theme="modern"] .product[data-style="studio"] { border: 1px solid var(--sb-line); box-shadow: none; } html[data-theme="modern"] .product[data-style="showcase"]:hover, html[data-theme="modern"] .product[data-style="studio"]:hover { border-color: var(--sb-line-strong); box-shadow: 0 4px 16px rgba(0,0,0,0.04); } html[data-theme="modern"] .product__name { font-family: var(--font-display); font-weight: 600; } html[data-theme="modern"] .btn-cart { background: var(--sb-ink); color: #fff; border-radius: 6px; font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 13px; } html[data-theme="modern"] .cart-pill { background: var(--sb-ink); color: #fff; border-radius: 6px; font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; } html[data-theme="modern"] .cart-pill__count { background: #fff; color: var(--sb-ink); } html[data-theme="modern"] .results__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; } html[data-theme="modern"] .stat__num { font-family: var(--font-display); font-weight: 600; } html[data-theme="modern"] .foot { background: #0A0A0A; } /* ========================================================= THEME: EDITORIAL — magazine-style serifs on cream Inspired by Anthropic, Klim, Are.na, MR PORTER editorial ========================================================= */ html[data-theme="editorial"] { --sb-bone: #F4EFE3; --sb-paper: #FBF7EC; --sb-ink: #1A1714; --sb-mute: #6D6356; --sb-line: #1a17141a; --sb-line-strong: #1a171426; --font-display: "Fraunces", "Instrument Serif", Georgia, serif; } html[data-theme="editorial"] body { font-family: "Geist", system-ui, sans-serif; } html[data-theme="editorial"] .hero__title { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; font-size: clamp(44px, 12vw, 110px); line-height: 0.92; font-variation-settings: "opsz" 144; } html[data-theme="editorial"] .hero__title em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; background: none; box-shadow: none; transform: none; padding: 0; color: var(--sb-amber); } html[data-theme="editorial"] .cycle-word { font-style: italic; font-family: "Instrument Serif", Georgia, serif; color: var(--sb-amber); } html[data-theme="editorial"] .hero__sub { font-family: "Instrument Serif", Georgia, serif; font-size: clamp(18px, 2.4vw, 22px); line-height: 1.4; color: var(--sb-ink); opacity: 0.7; max-width: 48ch; } html[data-theme="editorial"] .hero__crumb .chip { background: transparent; border: 1px solid var(--sb-line-strong); font-family: "Geist Mono", ui-monospace, monospace; } html[data-theme="editorial"] .selector-card { background: var(--sb-paper); border: 1px solid var(--sb-line-strong); border-radius: 4px; box-shadow: none; position: relative; } html[data-theme="editorial"] .selector-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--sb-yellow); } html[data-theme="editorial"] .selector-card__eyebrow .t-eyebrow { font-family: "Geist Mono", ui-monospace, monospace; } html[data-theme="editorial"] .selector-prompt { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; font-size: clamp(26px, 6vw, 44px); line-height: 1.1; } html[data-theme="editorial"] .selector-prompt .blank { background: var(--sb-yellow); border-radius: 2px; box-shadow: none; font-family: "Instrument Serif", Georgia, serif; font-style: italic; padding: 0 10px 4px; } html[data-theme="editorial"] .selector-prompt .blank.is-empty { background: transparent; border: none; border-bottom: 1px solid var(--sb-amber); font-style: italic; color: var(--sb-amber); } html[data-theme="editorial"] .t-eyebrow, html[data-theme="editorial"] .product__sku, html[data-theme="editorial"] .results__count, html[data-theme="editorial"] .installed__title, html[data-theme="editorial"] .step__num, html[data-theme="editorial"] .selector-meta .pill, html[data-theme="editorial"] .badge, html[data-theme="editorial"] .placement, html[data-theme="editorial"] .stat__lbl { font-family: "Geist Mono", ui-monospace, monospace; } html[data-theme="editorial"] .results { background: var(--sb-bone); } html[data-theme="editorial"] .results__title, html[data-theme="editorial"] .product__name { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; font-variation-settings: "opsz" 72; } html[data-theme="editorial"] .product[data-style="showcase"], html[data-theme="editorial"] .product[data-style="studio"] { background: var(--sb-paper); border: 1px solid var(--sb-line-strong); border-radius: 4px; box-shadow: none; } html[data-theme="editorial"] .product[data-style="showcase"] .product__media { background: var(--sb-paper); border-radius: 0; } html[data-theme="editorial"] .product[data-style="showcase"] .product__name { font-size: clamp(28px, 3.6vw, 38px); } html[data-theme="editorial"] .showcase__tags .tag { border-radius: 2px; background: transparent; } html[data-theme="editorial"] .showcase__tags .tag.is-accent { background: var(--sb-yellow); color: var(--sb-ink); } html[data-theme="editorial"] .btn-cart { background: var(--sb-ink); color: var(--sb-paper); border-radius: 2px; font-family: "Geist Mono", ui-monospace, monospace; text-transform: uppercase; } html[data-theme="editorial"] .cart-pill { border-radius: 2px; } html[data-theme="editorial"] .stat__num { font-family: var(--font-display); font-weight: 400; font-variation-settings: "opsz" 144; } html[data-theme="editorial"] .compliance { background: var(--sb-paper); } html[data-theme="editorial"] .hero { background: radial-gradient(ellipse at top right, rgba(255,199,44,0.12), transparent 60%), var(--sb-bone); } html[data-theme="editorial"] .chat__bubble { border-radius: 4px; border: 1px solid var(--sb-line-strong); box-shadow: none; } html[data-theme="editorial"] .chat__bubble--user { background: var(--sb-yellow); } html[data-theme="editorial"] .cmd__bar { border-radius: 4px; border: 1px solid var(--sb-line-strong); box-shadow: none; } html[data-theme="editorial"] .cmd__token { border-radius: 2px; } html[data-theme="editorial"] .product__price { font-family: var(--font-display); font-weight: 400; } html[data-theme="editorial"] .foot { background: var(--sb-ink); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--sb-bone); color: var(--sb-ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { min-height: 100dvh; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } button { font-family: inherit; cursor: pointer; } a { color: inherit; } /* ====== Display type ====== */ .t-display { font-family: var(--font-display); font-weight: 900; line-height: 0.95; letter-spacing: -0.02em; } .t-mono { font-family: var(--font-mono); } .t-eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sb-mute); } /* ====== Header ====== */ .site-header { position: sticky; top: 0; z-index: 30; background: var(--sb-bone); border-bottom: 1px solid var(--sb-line); backdrop-filter: blur(8px); } .site-header__inner { max-width: var(--page-max); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; gap: 14px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .brand__logo { height: 36px; width: auto; display: block; } @media (min-width: 640px) { .brand__logo { height: 42px; } } .foot__logo { height: 48px; } .brand__mark { width: 40px; height: 40px; border-radius: 8px; background: var(--sb-yellow); display: grid; place-items: center; border: 1.5px solid var(--sb-black); box-shadow: 2px 2px 0 0 var(--sb-black); } .brand__mark img { width: 30px; height: 30px; } .brand__name { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; color: var(--sb-black); line-height: 1; } .brand__tag { display: none; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sb-mute); margin-top: 2px; } @media (min-width: 640px) { .brand__tag { display: block; } } .site-header__spacer { flex: 1; } .nav { display: none; gap: 20px; font-size: 14px; } .nav a { text-decoration: none; color: var(--sb-ink); opacity: 0.8; } .nav a:hover { opacity: 1; } .cart-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; background: var(--sb-black); color: var(--sb-yellow); border-radius: 999px; font-family: var(--font-mono); font-size: 12px; border: none; letter-spacing: 0.04em; } .cart-pill__count { min-width: 18px; height: 18px; padding: 0 5px; background: var(--sb-yellow); color: var(--sb-black); border-radius: 999px; display: grid; place-items: center; font-weight: 700; } /* ====== Section structure ====== */ .section { padding: 56px var(--gutter); } @media (min-width: 720px) { .section { padding: 88px var(--gutter); } } .section__inner { max-width: var(--page-max); margin: 0 auto; } /* ====== Cycling word in the hero headline ====== */ .cycle-word { display: inline-block; position: relative; vertical-align: baseline; color: var(--sb-amber); } .cycle-word__measure { visibility: hidden; display: inline-block; white-space: nowrap; } .cycle-word__item { position: absolute; inset: 0; display: inline-block; white-space: nowrap; opacity: 0; transform: translateY(0.45em); transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .cycle-word__item.is-in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .cycle-word__item { transition: opacity 0.15s linear; transform: none; } .cycle-word__item.is-in { transform: none; } } /* ====== Hero ====== */ .hero { background: var(--sb-bone); position: relative; overflow: hidden; padding-top: 24px; padding-bottom: 32px; } @media (min-width: 720px) { .hero { padding-top: 40px; padding-bottom: 56px; } } .hero__inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); position: relative; } .hero__crumb { margin-bottom: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .hero__crumb .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 10px; background: var(--sb-paper); border: 1px solid var(--sb-line-strong); border-radius: 999px; color: var(--sb-ink); } .hero__crumb .chip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--sb-amber); box-shadow: 0 0 0 3px rgba(var(--sb-glow), 0.22); } .hero__title { font-family: var(--font-display); font-size: clamp(40px, 11vw, 92px); line-height: 0.92; letter-spacing: -0.025em; color: var(--sb-ink); margin: 0 0 20px; } .hero__title em { font-style: normal; background: var(--sb-yellow); padding: 0 0.18em 0.04em; display: inline-block; transform: rotate(-1deg); box-shadow: 4px 4px 0 0 var(--sb-black); color: var(--sb-black); } .hero__sub { font-size: 16px; color: var(--sb-mute); max-width: 60ch; margin: 0 0 28px; } @media (min-width: 720px) { .hero__sub { font-size: 18px; } } /* ====== AI-style fill-in-the-blank selector ====== */ .selector-card { background: var(--sb-paper); border: 1.5px solid var(--sb-black); border-radius: var(--r-xl); padding: 22px; box-shadow: 8px 8px 0 0 var(--sb-black); position: relative; } @media (min-width: 720px) { .selector-card { padding: 32px; } } .selector-card__eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .selector-card__eyebrow .pulse { width: 8px; height: 8px; border-radius: 999px; background: var(--sb-amber); animation: pulse 1.8s infinite; box-shadow: 0 0 0 0 rgba(var(--sb-glow), 0.5); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--sb-glow), 0.45); } 70% { box-shadow: 0 0 0 10px rgba(var(--sb-glow), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--sb-glow), 0); } } .selector-prompt { font-family: var(--font-display); font-size: clamp(22px, 6vw, 38px); line-height: 1.18; letter-spacing: -0.015em; color: var(--sb-ink); } .selector-prompt .blank { display: inline-block; background: var(--sb-yellow); padding: 4px 14px 6px; border-radius: 8px; border: none; font-family: inherit; font-size: inherit; line-height: 1; color: var(--sb-black); margin: 0 4px; cursor: pointer; position: relative; transition: transform 0.12s ease; outline: none; vertical-align: baseline; } .selector-prompt .blank:hover { transform: translateY(-1px); } .selector-prompt .blank:focus-visible { box-shadow: 0 0 0 3px var(--sb-black); } .selector-prompt .blank.is-empty { background: transparent; color: var(--sb-mute); border-bottom: 3px dashed var(--sb-yellow); border-radius: 0; padding: 0 2px 2px; } .selector-prompt .blank.is-empty::after { content: "▾"; font-size: 0.6em; margin-left: 6px; opacity: 0.7; } .selector-prompt .blank::after { content: "▾"; font-size: 0.5em; margin-left: 6px; opacity: 0.5; } .selector-prompt .blank.is-empty::after { opacity: 0.7; } .selector-meta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; color: var(--sb-mute); } /* Lights follow-up steps (front/rear, internal/external) */ .followup { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--sb-line); display: flex; flex-direction: column; gap: 18px; } .followup__step { display: flex; flex-direction: column; gap: 10px; } .followup__q { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sb-mute); } .followup__opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .followup__opts--three { grid-template-columns: repeat(3, 1fr); } .followup__opts--four { grid-template-columns: repeat(4, 1fr); } @media (max-width: 560px) { .followup__opts--three { grid-template-columns: 1fr; } .followup__opts--four { grid-template-columns: 1fr; } } .followup__opt { display: flex; flex-direction: column; text-align: left; background: var(--sb-paper); border: 1.5px solid var(--sb-line-strong); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; } .followup__opt:hover { transform: translateY(-2px); border-color: var(--sb-black); box-shadow: 0 8px 18px rgba(0,0,0,0.10); } .followup__opt.is-active { border-color: var(--sb-black); box-shadow: inset 0 0 0 2px var(--sb-black); } .followup__opt-img { width: 100%; aspect-ratio: 1 / 1; background: var(--sb-paper) center/contain no-repeat; border-bottom: 1.5px solid var(--sb-line-strong); } .followup__opt-label { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--sb-ink); } .followup__opt.is-active .followup__opt-label { background: var(--sb-yellow); } .followup__opt-sub { font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--sb-mute); } /* Chat-style photo options (front/rear, internal/external) */ .chat__photo-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; } .chat__photo-opt { display: flex; flex-direction: column; gap: 0; text-align: left; cursor: pointer; background: var(--sb-paper); border: 1.5px solid var(--sb-line-strong); border-radius: 10px; overflow: hidden; transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; } .chat__photo-opt:hover { transform: translateY(-2px); border-color: var(--sb-black); box-shadow: 0 6px 14px rgba(0,0,0,0.08); } .chat__photo-opt.is-active { border-color: var(--sb-black); box-shadow: inset 0 0 0 2px var(--sb-black); } .chat__photo-opt-img { aspect-ratio: 1 / 1; background: var(--sb-paper) center/contain no-repeat; border-bottom: 1px solid var(--sb-line-strong); } .chat__photo-opt-label { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--sb-ink); } .chat__photo-opt.is-active .chat__photo-opt-label { background: var(--sb-yellow); } .chat__photo-opt-sub { font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--sb-mute); } .selector-meta .pill { display: inline-flex; align-items: center; gap: 6px; background: var(--sb-bone); border: 1px solid var(--sb-line-strong); padding: 5px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .selector-meta .link { background: none; border: none; color: var(--sb-ink); text-decoration: underline; padding: 0; font: inherit; } /* ====== Picker modal ====== */ .picker-backdrop { position: fixed; inset: 0; background: rgba(10,10,10,0.42); z-index: 100; display: grid; place-items: end center; animation: fadeIn 0.18s ease; } @media (min-width: 720px) { .picker-backdrop { place-items: center; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .picker { background: var(--sb-paper); width: 100%; max-width: 760px; border-radius: 24px 24px 0 0; border: 1.5px solid var(--sb-black); padding: 22px; max-height: 80dvh; overflow-y: auto; animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1); } @media (min-width: 720px) { .picker { border-radius: var(--r-xl); max-height: 80dvh; } } @keyframes slideUp { from { transform: translateY(40px); opacity: 0.5; } to { transform: translateY(0); opacity: 1; } } .picker__title { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.015em; margin-bottom: 4px; } .picker__sub { font-size: 13px; color: var(--sb-mute); margin-bottom: 18px; } /* Sub-model (body shape) step — wider modal with large 2-up photos */ .picker--submodel { max-width: 720px; } .picker__grid--submodel { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; } .picker__grid--side { grid-template-columns: repeat(3, 1fr) !important; gap: 14px; } .picker__grid--side4 { grid-template-columns: repeat(4, 1fr) !important; } @media (max-width: 560px) { .picker__grid--side { grid-template-columns: 1fr !important; } } .picker__tile--submodel .picker__tile-img { aspect-ratio: 1 / 1; background-color: var(--sb-paper); } .picker__tile--submodel .picker__tile-face { background-size: contain !important; } .picker__tile--submodel .picker__tile-label { padding: 14px 12px; font-family: var(--font-display); font-size: 17px; font-weight: 600; } .picker__list { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 8px; align-items: stretch; } @media (max-width: 480px) { .picker__list { grid-template-columns: 1fr; } } .picker__option { display: flex; align-items: center; gap: 12px; width: 100%; height: 100%; text-align: left; background: var(--sb-bone); border: 1px solid var(--sb-line-strong); border-radius: var(--r-md); padding: 12px 14px; font-size: 15px; color: var(--sb-ink); transition: all 0.12s; } .picker__option:hover { background: var(--sb-yellow); border-color: var(--sb-black); transform: translateX(2px); } .picker__option.is-selected { background: var(--sb-yellow); border-color: var(--sb-black); box-shadow: inset 0 0 0 1px var(--sb-black); } .picker__option--other { background: repeating-linear-gradient(135deg, var(--sb-bone) 0 10px, var(--sb-paper) 10px 20px); border-color: var(--sb-line-strong); } .picker__option--other .code { color: var(--sb-mute); } .picker__option--other:hover { border-color: var(--sb-black); } .picker__option--other.is-selected { background: var(--sb-yellow); } .picker__option--other.is-selected .code { color: var(--sb-mute); } .picker__option .thumb { width: 80px; height: 80px; border-radius: 8px; background: var(--sb-paper) center/cover no-repeat; border: 1px solid var(--sb-line-strong); flex-shrink: 0; } .picker__option .label { flex: 1; min-width: 0; } .picker__option .code { font-family: var(--font-mono); font-size: 11px; color: var(--sb-mute); letter-spacing: 0.02em; text-transform: none; text-wrap: pretty; } .soon-tag { display: inline-block; margin-left: 10px; padding: 2px 7px; background: var(--sb-amber); color: #fff; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; vertical-align: middle; font-weight: 600; } .picker__option.is-empty-cat { opacity: 0.62; } .picker__option.is-empty-cat:hover { opacity: 1; } .picker__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (min-width: 520px) { .picker__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 900px) { .picker__grid:not(.picker__grid--submodel):not(.picker__grid--side):not(.picker__grid--quad) { grid-template-columns: repeat(4, 1fr); } } .picker__tile { background: var(--sb-bone); border: 1px solid var(--sb-line-strong); border-radius: 10px; padding: 0; overflow: hidden; cursor: pointer; transition: all 0.12s; display: flex; flex-direction: column; } .picker__tile:hover { border-color: var(--sb-black); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); } .picker__tile.is-selected { border-color: var(--sb-black); background: var(--sb-yellow); box-shadow: inset 0 0 0 1px var(--sb-black); } .picker__tile-img { aspect-ratio: 1/1; background: var(--sb-paper) center/cover no-repeat; display: grid; place-items: center; border-bottom: 1px solid var(--sb-line-strong); position: relative; overflow: hidden; } .picker__tile-face { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; transition: opacity 220ms ease; } .picker__tile-face--rear { opacity: 0; } .picker__tile.has-flip:hover .picker__tile-face--front, .picker__tile.has-flip:focus-visible .picker__tile-face--front { opacity: 0; } .picker__tile.has-flip:hover .picker__tile-face--rear, .picker__tile.has-flip:focus-visible .picker__tile-face--rear { opacity: 1; } .picker__tile-flip-hint { position: absolute; bottom: 6px; left: 6px; display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(0,0,0,0.72); color: #fff; padding: 3px 6px; border-radius: 2px; pointer-events: none; line-height: 1; } .picker__tile-flip-front, .picker__tile-flip-rear { display: inline-block; transition: opacity 180ms ease; } .picker__tile-flip-rear { display: none; } .picker__tile.has-flip .picker__tile-flip-front::after { content: " · hover for rear"; opacity: 0.65; } .picker__tile.has-flip:hover .picker__tile-flip-front, .picker__tile.has-flip:focus-visible .picker__tile-flip-front { display: none; } .picker__tile.has-flip:hover .picker__tile-flip-rear, .picker__tile.has-flip:focus-visible .picker__tile-flip-rear { display: inline-block; } .picker__tile-placeholder { font-family: var(--font-mono); font-size: 11px; color: var(--sb-mute); letter-spacing: 0.08em; text-transform: uppercase; } .picker__tile-label { padding: 8px 10px; font-size: 13px; font-weight: 500; text-align: center; color: var(--sb-ink); } .picker__tile-sublabel { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; color: var(--sb-mute); margin-top: 2px; } /* Blocked mount option (e.g. rear-internal where not road-legal) */ .picker__tile.is-blocked { cursor: not-allowed; opacity: 1; } .picker__tile.is-blocked:hover { transform: none; border-color: var(--sb-line-strong); box-shadow: none; } .picker__tile.is-blocked .picker__tile-img { position: relative; } .picker__tile.is-blocked .picker__tile-face { filter: grayscale(1); opacity: 0.5; } .picker__tile.is-blocked .picker__tile-label { color: var(--sb-mute); } .picker__tile.is-blocked .picker__tile-sublabel { color: #c0392b; } .picker__tile-badge { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 5px; background: #c0392b; color: #fff; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 8px; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,0.18); } .picker__tile-variants { position: absolute; top: 6px; right: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; background: var(--sb-black); color: #fff; padding: 3px 6px; border-radius: 2px; pointer-events: none; line-height: 1; } .picker__back { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sb-mute); padding: 0 0 10px; transition: color 120ms ease; } .picker__back:hover { color: var(--sb-black); } .picker__mount-group { margin-bottom: 18px; } .picker__mount-label { display: block; margin-bottom: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sb-mute); } /* "All 4" both-mount dialog: Front | Rear side by side, compact tiles */ .picker--bothmount { max-width: 860px; } .picker__mount-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 6px; } .picker--bothmount .picker__mount-group { margin-bottom: 0; } .picker__grid--quad { grid-template-columns: 1fr 1fr !important; gap: 10px; } .picker__grid--quad .picker__tile--submodel .picker__tile-img { aspect-ratio: 4 / 3; } .picker__grid--quad .picker__tile--submodel .picker__tile-label { padding: 8px 8px; font-size: 14px; } @media (max-width: 620px) { .picker__mount-cols { grid-template-columns: 1fr; gap: 14px; } } .picker__continue { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--sb-yellow); color: var(--sb-black); border: 1.5px solid var(--sb-black); border-radius: 10px; padding: 14px 18px; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 16px; transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease; } .picker__continue:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(0,0,0,0.12); } .picker__continue:disabled { opacity: 0.45; cursor: not-allowed; background: var(--sb-bone); } .picker__tile.is-selected { border-color: var(--sb-black) !important; box-shadow: inset 0 0 0 2px var(--sb-black); } /* ====== Results section ====== */ .results { background: var(--sb-paper); border-top: 1px solid var(--sb-line); } html[data-palette="night"] .results { background: #1c1f24; } .results__head { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; } .results__title { font-family: var(--font-display); font-size: clamp(28px, 5vw, 42px); letter-spacing: -0.02em; line-height: 1; } .results__count { font-family: var(--font-mono); font-size: 12px; color: var(--sb-mute); text-transform: uppercase; letter-spacing: 0.1em; } /* "What you chose" summary chips under the results title */ .results__chosen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .chosen-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--sb-paper); border: 1px solid var(--sb-line-strong); border-radius: 999px; padding: 5px 12px 5px 8px; font-size: 13px; color: var(--sb-ink); } .chosen-chip__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sb-paper); background: var(--sb-black); padding: 2px 7px; border-radius: 999px; } .chosen-chip__v { font-weight: 500; } .chosen-chip--edit { cursor: pointer; background: none; border-style: dashed; color: var(--sb-mute); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 14px; transition: color 120ms ease, border-color 120ms ease; } .chosen-chip--edit:hover { color: var(--sb-black); border-color: var(--sb-black); } html[data-palette="night"] .chosen-chip { background: #23272e; } html[data-palette="night"] .chosen-chip__k { color: var(--sb-black); background: var(--sb-yellow); } .results__grid { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 720px) { .results__grid { grid-template-columns: 1fr 1fr; gap: 24px; } } @media (min-width: 1024px) { .results__grid { grid-template-columns: 1fr 1fr; gap: 28px; } } /* "Also compatible" — universal parts, in a quieter collapsible section */ .results__empty-note { margin: 0 0 18px; font-size: 15px; color: var(--sb-mute); line-height: 1.5; } .results__also { margin-top: 36px; } .results__also-head { width: 100%; text-align: left; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 14px; row-gap: 2px; background: var(--sb-bone); border: 1px solid var(--sb-line-strong); border-radius: 12px; padding: 16px 20px; transition: border-color 120ms ease, background 120ms ease; } .results__also-head:hover { border-color: var(--sb-black); } .results__also-title { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--sb-ink); } .results__also-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; background: var(--sb-black); color: var(--sb-paper); border-radius: 11px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; } .results__also-sub { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--sb-mute); } .results__also-chev { grid-column: 3; grid-row: 1 / span 2; color: var(--sb-mute); transition: transform 200ms ease; } .results__also-chev.is-open { transform: rotate(180deg); } .results__grid--also { margin-top: 20px; } .results__grid--also .product { opacity: 0.94; } /* ====== Product Card ====== */ .product { background: var(--sb-paper); border: 1px solid var(--sb-line-strong); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; } .product:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(10,10,10,0.06); } .product__media { position: relative; /* 16/15, not 4/3: the photo is sized by object-fit:contain inside this box and the box clips, so growing the photo means growing the box. Height 0.9375W instead of 0.75W makes the fitted photo exactly 25% larger with nothing cropped. */ aspect-ratio: 16/15; background: radial-gradient(circle at 50% 40%, #ffffff 0%, #f5f2ea 70%, #ebe6d6 100%); overflow: hidden; } html[data-palette="night"] .product__media { background: radial-gradient(circle at 50% 40%, #1f242b 0%, #0c0e12 100%); } .product__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; transition: transform 0.5s ease; /* Drops white product-photo background so it blends with the card */ mix-blend-mode: multiply; } html[data-palette="night"] .product__media img { mix-blend-mode: screen; } .photo-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; background: rgba(0,0,0,0.4); padding: 5px 8px; border-radius: 999px; backdrop-filter: blur(6px); } .photo-dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.5); border: none; padding: 0; cursor: pointer; transition: all 0.15s; } .photo-dot.is-active { background: var(--sb-yellow); transform: scale(1.4); } .product:hover .product__media img { transform: scale(1.03); } .product__media .placeholder { width: 100%; height: 100%; display: grid; place-items: center; gap: 8px; grid-template-rows: auto auto; color: var(--sb-mute); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 20px; text-align: center; } .product__media .placeholder svg { width: 36px; height: 36px; opacity: 0.35; stroke: var(--sb-mute); } .product__media .badge { position: absolute; top: 12px; left: 12px; background: var(--sb-yellow); color: var(--sb-black); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; font-weight: 700; border: 1px solid var(--sb-black); } .product__media .placement { position: absolute; top: 12px; right: 12px; background: rgba(10,10,10,0.85); color: #fff; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; backdrop-filter: blur(4px); } .product__body { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; } .product__sku { font-family: var(--font-mono); font-size: 11px; color: var(--sb-mute); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; } .product__name { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.015em; line-height: 1.05; margin: 0 0 6px; } .product__family { font-size: 13px; color: var(--sb-mute); margin-bottom: 10px; } /* Shown when a product is approved for the shopper's state but its title names a different one — without it, an ACT buyer sees a card headed "for Victoria". */ .product__crossstate { display: inline-flex; align-items: center; gap: 6px; /* .product__body is a flex column, which blockifies inline-flex to flex and stretches this to the full card width. align-self keeps it content-hugging. */ align-self: flex-start; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sb-black); background: var(--sb-yellow); border: 1.5px solid var(--sb-black); border-radius: 999px; padding: 4px 10px; margin-bottom: 10px; } .product__blurb { font-size: 14px; line-height: 1.55; color: var(--sb-ink); margin-bottom: 16px; } html[data-palette="night"] .product__blurb { color: var(--sb-ink); } .product__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; } .product__price { font-family: var(--font-display); font-size: 26px; letter-spacing: -0.02em; } .product__price small { font-family: var(--font-mono); font-size: 11px; color: var(--sb-mute); font-weight: 400; margin-left: 4px; letter-spacing: 0.06em; } .btn-cart { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; background: var(--sb-black); color: var(--sb-yellow); border-radius: 999px; border: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; transition: transform 0.12s; } .btn-cart:hover { transform: scale(1.04); } .btn-cart.is-added { background: var(--sb-yellow); color: var(--sb-black); } .btn-cart svg { width: 14px; height: 14px; } /* ====== Card style: "showcase" (premium / editorial) ====== */ .product[data-style="showcase"] { border-radius: var(--r-lg); border: none; background: var(--sb-paper); box-shadow: 0 1px 0 var(--sb-line), 0 1px 2px rgba(10,10,10,0.04); overflow: visible; position: relative; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s; } .product[data-style="showcase"]:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--sb-line), 0 20px 50px -16px rgba(10,10,10,0.18); } .product[data-style="showcase"] .product__media { aspect-ratio: 5/4; border-radius: var(--r-lg) var(--r-lg) 0 0; background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, #f7f3e9 60%, #ebe5d2 100%); } html[data-palette="night"] .product[data-style="showcase"] .product__media { background: radial-gradient(ellipse at 50% 40%, #1f242b 0%, #0c0e12 100%); } .product[data-style="showcase"] .product__media img { padding: 8%; filter: drop-shadow(0 18px 24px rgba(0,0,0,0.16)); transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); } .product[data-style="showcase"]:hover .product__media img { transform: scale(1.04) translateY(-4px); } .product[data-style="showcase"] .product__body { padding: 26px 26px 24px; border-top: 1px solid var(--sb-line); background: var(--sb-paper); } .product[data-style="showcase"] .product__sku { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--sb-mute); } .product[data-style="showcase"] .product__sku::after { content: ''; flex: 1; height: 1px; background: var(--sb-line-strong); } .product[data-style="showcase"] .product__name { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -0.02em; line-height: 1; margin: 0 0 8px; } .product[data-style="showcase"] .product__family { display: none; } .product[data-style="showcase"] .product__blurb { font-size: 15px; color: var(--sb-mute); line-height: 1.55; margin-bottom: 22px; max-width: 42ch; } /* Showcase: tags strip (placement, voltage, mount) */ .showcase__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; } .showcase__tags .tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-ink); padding: 5px 9px; border: 1px solid var(--sb-line-strong); border-radius: 999px; background: var(--sb-bone); } .showcase__tags .tag.is-accent { background: var(--sb-yellow); border-color: var(--sb-black); color: var(--sb-black); font-weight: 600; } .product[data-style="showcase"] .product__foot { padding-top: 18px; border-top: 1px solid var(--sb-line); align-items: center; } .product[data-style="showcase"] .product__price { font-size: 34px; } .product[data-style="showcase"] .product__price small { display: block; font-size: 10px; margin: 2px 0 0; } .product[data-style="showcase"] .btn-cart { padding: 14px 22px; font-size: 12px; } .product[data-style="showcase"] .product__media .badge { background: var(--sb-paper); color: var(--sb-ink); border-color: var(--sb-line-strong); } .product[data-style="showcase"] .product__media .placement { background: rgba(255,255,255,0.92); color: var(--sb-ink); border: 1px solid var(--sb-line-strong); backdrop-filter: none; } /* Showcase install strip: bigger thumbnails with a horizontal scroll feel */ .product[data-style="showcase"] .product__installed { background: transparent; border-top: 1px solid var(--sb-line); padding: 20px 26px 24px; } .product[data-style="showcase"] .installed__strip { grid-template-columns: repeat(4, 1fr); gap: 6px; } .product[data-style="showcase"] .installed__strip .cell { border-radius: 8px; aspect-ratio: 4/5; } /* Card style: "studio" — clean white card, minimal premium product page */ .product[data-style="studio"] { border-radius: var(--r-md); background: var(--sb-paper); border: 1px solid var(--sb-line); box-shadow: none; overflow: hidden; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; } html[data-palette="night"] .product[data-style="studio"] { background: #1c1f24; } .product[data-style="studio"]:hover { border-color: var(--sb-line-strong); transform: translateY(-2px); box-shadow: 0 18px 40px -22px rgba(10,10,10,0.18); } .product[data-style="studio"] .product__media { aspect-ratio: 5/4; background: var(--sb-paper); border-bottom: 1px solid var(--sb-line); } html[data-palette="night"] .product[data-style="studio"] .product__media { background: #16181C; border-bottom-color: var(--sb-line); } .product[data-style="studio"] .product__media img { padding: 9%; mix-blend-mode: multiply; filter: drop-shadow(0 14px 18px rgba(0,0,0,0.10)); } html[data-palette="night"] .product[data-style="studio"] .product__media img { mix-blend-mode: screen; } .product[data-style="studio"] .product__media .badge { background: var(--sb-paper); color: var(--sb-ink); border: 1px solid var(--sb-line-strong); } .product[data-style="studio"] .product__media .placement { background: var(--sb-bone); color: var(--sb-ink); border: 1px solid var(--sb-line-strong); backdrop-filter: none; } .product[data-style="studio"] .product__body { padding: 22px; background: var(--sb-paper); } html[data-palette="night"] .product[data-style="studio"] .product__body { background: #1c1f24; } .product[data-style="studio"] .product__sku { margin-bottom: 12px; } .product[data-style="studio"] .product__name { font-size: 26px; margin-bottom: 6px; } .product[data-style="studio"] .product__family { margin-bottom: 12px; } .product[data-style="studio"] .product__blurb { font-size: 14px; color: var(--sb-mute); margin-bottom: 18px; } .product[data-style="studio"] .product__foot { padding-top: 14px; border-top: 1px solid var(--sb-line); } .product[data-style="studio"] .product__installed { background: var(--sb-paper); border-top: 1px solid var(--sb-line); } html[data-palette="night"] .product[data-style="studio"] .product__installed { background: #1c1f24; } /* Card style: "spec" */ .product[data-style="spec"] { border-radius: var(--r-md); } .product[data-style="spec"] .product__media { aspect-ratio: 16/10; background: var(--sb-bone); } .product[data-style="spec"] .product__media img { object-fit: contain; padding: 12px; } .product[data-style="spec"] .product__body { background: var(--sb-paper); } .product[data-style="spec"] .product__name { font-size: 19px; } .product[data-style="spec"] .specrow { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; padding: 6px 0; border-top: 1px dashed var(--sb-line-strong); letter-spacing: 0.04em; } .product[data-style="spec"] .specrow span:first-child { color: var(--sb-mute); text-transform: uppercase; } .product[data-style="spec"] .specrow span:last-child { color: var(--sb-ink); font-weight: 600; } /* (Removed: glow style — superseded by studio + premium) */ /* ====== Installed gallery ====== */ .product__installed { border-top: 1px solid var(--sb-line); padding: 14px 18px 18px; background: var(--sb-bone); } html[data-palette="night"] .product__installed { background: #0e1115; } .installed__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .installed__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-mute); } .installed__strip { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); } .installed__strip .cell { aspect-ratio: 1; background: #ddd center/cover no-repeat; border-radius: 6px; cursor: pointer; border: 1px solid var(--sb-line-strong); transition: transform 0.15s; position: relative; overflow: hidden; } .installed__strip .cell:hover { transform: scale(1.04); border-color: var(--sb-black); } /* ====== Empty / no results ====== */ .no-results { padding: 60px 30px; background: var(--sb-bone); border-radius: var(--r-lg); text-align: center; border: 1px dashed var(--sb-line-strong); } .no-results__icon { width: 56px; height: 56px; border-radius: 16px; background: var(--sb-yellow); display: inline-grid; place-items: center; margin-bottom: 18px; border: 1.5px solid var(--sb-black); } .no-results h3 { font-family: var(--font-display); font-size: 22px; margin: 0 0 8px; } .no-results p { color: var(--sb-mute); max-width: 40ch; margin: 0 auto 18px; } .no-results .link-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 10px 16px; border-radius: 999px; background: var(--sb-black); color: var(--sb-yellow); text-decoration: none; border: none; } /* ====== Compliance strip ====== */ .compliance { background: var(--sb-bone); border-top: 1px solid var(--sb-line); } .compliance__grid { display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 720px) { .compliance__grid { grid-template-columns: repeat(4, 1fr); gap: 28px; } } .stat { padding: 18px 0; border-top: 1px solid var(--sb-line-strong); } .stat__num { font-family: var(--font-display); font-size: 44px; letter-spacing: -0.025em; line-height: 1; margin-bottom: 6px; } .stat__num small { font-family: var(--font-mono); font-size: 14px; color: var(--sb-mute); } .stat__lbl { font-size: 13px; color: var(--sb-mute); max-width: 22ch; } /* ====== Footer ====== */ .foot { background: var(--sb-black); color: #d0d0d0; padding: 56px var(--gutter); } html[data-palette="night"] .foot { background: #0a0a0a; } .foot__inner { max-width: var(--page-max); margin: 0 auto; } .foot__top { display: grid; gap: 32px; grid-template-columns: 1fr; margin-bottom: 40px; } @media (min-width: 720px) { .foot__top { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .foot__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .foot__brand .brand__mark { background: var(--sb-yellow); } .foot__brand .brand__name { color: #fff; } .foot__desc { font-size: 14px; color: #999; max-width: 38ch; line-height: 1.6; } .foot__col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #777; margin: 0 0 14px; } .foot__col a { display: block; text-decoration: none; color: #d0d0d0; padding: 4px 0; font-size: 14px; } .foot__col a:hover { color: var(--sb-yellow); } .foot__bot { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding-top: 24px; border-top: 1px solid #1f1f1f; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: #777; } /* ====== Note about photo mapping (for the user) ====== */ .note-box { background: #FFF6D6; border: 1px dashed #C0A000; color: #5C4A00; padding: 18px 20px; border-radius: var(--r-md); font-size: 13px; line-height: 1.55; margin-top: 28px; } .note-box strong { color: #3B3000; } html[data-palette="night"] .note-box { background: #2a2410; border-color: #6f5c1c; color: #f0e3a8; } html[data-palette="night"] .note-box strong { color: #fff; } /* ====== Hero layout: CHAT \u2014 conversational AI bubbles ====== */ .chat { display: flex; flex-direction: column; gap: 14px; max-width: 640px; } .chat__msg { display: flex; align-items: flex-end; gap: 10px; animation: chatIn 0.4s cubic-bezier(0.16,1,0.3,1) both; } @keyframes chatIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .chat__msg--user { justify-content: flex-end; } .chat__avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--sb-black); display: grid; place-items: center; border: 1.5px solid var(--sb-black); align-self: flex-end; } .chat__avatar img { width: 22px; height: 22px; } .chat__bubble { background: var(--sb-paper); border: 1.5px solid var(--sb-black); border-radius: 18px 18px 18px 4px; padding: 14px 18px; box-shadow: 3px 3px 0 0 var(--sb-black); max-width: min(520px, 84%); } .chat__bubble--user { background: var(--sb-yellow); border-radius: 18px 18px 4px 18px; font-size: 15px; padding: 10px 16px; box-shadow: 3px 3px 0 0 var(--sb-black); } .chat__bubble--final { background: var(--sb-yellow); } .chat__name { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sb-mute); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .chat__online { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: #00c853; box-shadow: 0 0 0 2px rgba(0,200,83,0.18); } .chat__text { font-size: 15px; line-height: 1.4; margin: 0 0 12px; color: var(--sb-ink); } .chat__text:last-child { margin-bottom: 0; } .chat__sub { display: block; font-size: 12px; color: var(--sb-mute); font-style: italic; margin-top: 4px; } .chat__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .chat__chip { background: var(--sb-bone); border: 1px solid var(--sb-line-strong); border-radius: 999px; padding: 7px 12px; font-size: 13px; font-family: var(--font-body); color: var(--sb-ink); cursor: pointer; transition: all 0.12s; display: inline-flex; align-items: center; gap: 6px; } .chat__chip:hover { background: var(--sb-yellow); border-color: var(--sb-black); transform: translateY(-1px); } .chat__chip.is-active { background: var(--sb-black); border-color: var(--sb-black); color: var(--sb-yellow); } .chat__chip.is-soon { opacity: 0.6; } .chat__chip.is-soon:hover { opacity: 1; } .chat__chip .soon-tag { margin-left: 4px; padding: 1px 5px; font-size: 8px; } .chat__cta { display: inline-flex; align-items: center; gap: 8px; background: var(--sb-black); color: var(--sb-yellow); border: none; padding: 10px 18px; border-radius: 999px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; text-decoration: none; transition: transform 0.15s; } .chat__cta:hover { transform: scale(1.04); } .chat__cta--accent { background: var(--sb-ink); color: var(--sb-yellow); } .chat__cta svg { width: 14px; height: 14px; } .chat__answer { display: inline-flex; align-items: center; gap: 10px; background: var(--sb-bone); border: 1px solid var(--sb-line-strong); border-radius: 12px; padding: 8px 14px 8px 8px; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--sb-ink); transition: all 0.12s; } .chat__answer:hover { border-color: var(--sb-black); background: var(--sb-paper); } .chat__answer-thumb { width: 32px; height: 32px; border-radius: 8px; background: var(--sb-paper) center/cover no-repeat; border: 1px solid var(--sb-line-strong); flex-shrink: 0; } .chat__answer-flag { display: inline-grid; place-items: center; width: 32px; height: 32px; background: var(--sb-yellow); border-radius: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--sb-black); border: 1px solid var(--sb-black); } .chat__answer-edit { margin-left: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sb-mute); text-decoration: underline; } /* ====== Hero layout: COMMAND \u2014 spotlight / command palette ====== */ .cmd { max-width: 760px; } .cmd__bar { display: flex; align-items: center; gap: 10px; background: var(--sb-paper); border: 1.5px solid var(--sb-black); border-radius: 14px; padding: 10px 12px; box-shadow: 4px 4px 0 0 var(--sb-black); flex-wrap: wrap; min-height: 64px; } .cmd__prompt { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 14px; color: var(--sb-mute); padding: 6px 4px; } .cmd__caret { font-size: 18px; color: var(--sb-amber); } .cmd__phrase { color: var(--sb-ink); font-weight: 500; } .cmd__token { display: inline-flex; align-items: center; gap: 8px; background: var(--sb-bone); border: 1px solid var(--sb-line-strong); border-radius: 10px; padding: 6px 12px; font-family: inherit; cursor: pointer; transition: all 0.12s; position: relative; } .cmd__token:hover { border-color: var(--sb-black); transform: translateY(-1px); } .cmd__token.is-set { background: var(--sb-yellow); border-color: var(--sb-black); } .cmd__token.is-empty { border-style: dashed; background: transparent; } .cmd__token-key { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sb-mute); } .cmd__token.is-set .cmd__token-key { color: rgba(0,0,0,0.6); } .cmd__token-val { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--sb-ink); font-weight: 500; } .cmd__token.is-empty .cmd__token-val { color: var(--sb-mute); font-weight: 400; } .cmd__token-thumb { display: inline-block; width: 20px; height: 20px; border-radius: 4px; background: var(--sb-paper) center/cover no-repeat; border: 1px solid rgba(0,0,0,0.15); } .cmd__spacer { flex: 1; min-width: 0; } .cmd__kbd { font-family: var(--font-mono); font-size: 14px; padding: 4px 8px; background: var(--sb-bone); border: 1px solid var(--sb-line-strong); border-radius: 6px; color: var(--sb-mute); box-shadow: 0 1px 0 var(--sb-line-strong); } .cmd__hint { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--sb-mute); padding-left: 12px; } .cmd__hint strong { color: var(--sb-ink); font-weight: 600; } .cmd__hint-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--sb-amber); animation: pulse 1.6s infinite; } .cmd__hint-dot.is-ready { background: #00c853; box-shadow: 0 0 0 0 rgba(0,200,83,0.4); animation: pulseReady 1.6s infinite; } @keyframes pulseReady { 0% { box-shadow: 0 0 0 0 rgba(0,200,83,0.4); } 70% { box-shadow: 0 0 0 10px rgba(0,200,83,0); } 100% { box-shadow: 0 0 0 0 rgba(0,200,83,0); } } .cmd__hint-link { margin-left: 6px; background: none; border: none; font: inherit; font-size: 11px; color: var(--sb-mute); text-decoration: underline; cursor: pointer; } /* ====== Hero layout variant: "stepper" ====== */ .stepper { display: grid; gap: 14px; } .step { background: var(--sb-paper); border: 1.5px solid var(--sb-black); border-radius: var(--r-lg); padding: 18px 20px; transition: all 0.2s; } .step.is-active { box-shadow: 6px 6px 0 0 var(--sb-black); } .step.is-done { background: var(--sb-yellow); } .step__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-mute); margin-bottom: 6px; } .step__q { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 12px; } .step__answer { font-family: var(--font-mono); font-size: 13px; } /* ====== Hero layout variant: "compact form" ====== */ .compact-form { background: var(--sb-paper); border: 1px solid var(--sb-line-strong); border-radius: var(--r-lg); padding: 20px; display: grid; gap: 12px; } .compact-form__row { display: grid; gap: 6px; } .compact-form__row label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sb-mute); } .compact-form__row select, .compact-form__row .fakeselect { appearance: none; background: var(--sb-bone); border: 1px solid var(--sb-line-strong); padding: 12px 14px; border-radius: 8px; font-family: var(--font-body); font-size: 15px; color: var(--sb-ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; } /* ====== Visual hint bar above CTA ====== */ .geo-hint { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sb-mute); background: var(--sb-paper); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--sb-line-strong); margin-top: 14px; } .geo-hint .change { text-decoration: underline; cursor: pointer; background: none; border: none; color: var(--sb-ink); padding: 0; font: inherit; } /* ====== Cart toast ====== */ .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--sb-black); color: var(--sb-yellow); padding: 12px 18px; border-radius: 999px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; z-index: 150; display: flex; align-items: center; gap: 10px; animation: toastIn 0.25s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 10px 30px rgba(0,0,0,0.2); } @keyframes toastIn { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } /* ====== Curate mode (hidden admin) ====== */ .curate { position: fixed; inset: 0; z-index: 400; background: var(--sb-paper); display: flex; flex-direction: column; font-family: var(--font-body); } .curate__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; background: var(--sb-black); color: var(--sb-paper); } .curate__brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 16px; } .curate__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sb-yellow); } .curate__hint { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: #ffffff80; text-transform: uppercase; letter-spacing: 0.05em; margin-left: 6px; } .curate__bar-actions { display: flex; gap: 10px; align-items: center; } .curate__btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; padding: 9px 16px; border-radius: 8px; border: 1px solid transparent; display: inline-flex; align-items: center; } .curate__btn--ghost { background: #ffffff14; color: var(--sb-paper); border-color: #ffffff2e; } .curate__btn--ghost:hover { background: #ffffff24; } .curate__btn--primary { background: var(--sb-yellow); color: var(--sb-black); font-weight: 600; } .curate__btn--primary:hover { background: var(--sb-yellow-2); } .curate__buses { display: flex; gap: 8px; padding: 14px 22px; overflow-x: auto; border-bottom: 1px solid var(--sb-line-strong); background: var(--sb-bone); } .curate__bus { flex: none; cursor: pointer; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--sb-line-strong); background: var(--sb-paper); font-size: 14px; font-weight: 500; color: var(--sb-ink); display: inline-flex; align-items: center; gap: 7px; transition: border-color 120ms ease, background 120ms ease; } .curate__bus:hover { border-color: var(--sb-black); } .curate__bus.is-active { background: var(--sb-black); color: var(--sb-paper); border-color: var(--sb-black); } .curate__bus-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; background: var(--sb-yellow); color: var(--sb-black); border-radius: 9px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; } .curate__bus.is-active .curate__bus-count { background: var(--sb-yellow); } .curate__toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 22px; border-bottom: 1px solid var(--sb-line); } .curate__search { flex: 1; min-width: 200px; padding: 10px 14px; border-radius: 8px; border: 1.5px solid var(--sb-line-strong); background: var(--sb-paper); font-family: var(--font-body); font-size: 14px; color: var(--sb-ink); } .curate__search:focus { outline: none; border-color: var(--sb-black); } .curate__cats { display: flex; gap: 6px; flex-wrap: wrap; } .curate__cat { cursor: pointer; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--sb-line-strong); background: var(--sb-paper); font-size: 13px; color: var(--sb-mute); } .curate__cat.is-active { background: var(--sb-ink); color: var(--sb-paper); border-color: var(--sb-ink); } .curate__count-note { font-family: var(--font-mono); font-size: 12px; color: var(--sb-mute); } .curate__reset { cursor: pointer; background: none; border: none; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--sb-amber); } .curate__reset:hover { text-decoration: underline; } .curate__list { flex: 1; overflow-y: auto; padding: 8px 22px 22px; } .curate__row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--sb-line); } .curate__row.is-hidden { opacity: 0.45; } .curate__thumb { width: 64px; height: 48px; flex: none; border-radius: 6px; background: var(--sb-bone) center/contain no-repeat; border: 1px solid var(--sb-line-strong); display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; color: var(--sb-mute); } .curate__meta { flex: 1; min-width: 0; } .curate__name { font-size: 15px; font-weight: 500; color: var(--sb-ink); margin-bottom: 4px; } .curate__sub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .curate__sku { font-family: var(--font-mono); font-size: 11px; color: var(--sb-mute); } .curate__tag { font-size: 11px; padding: 2px 7px; border-radius: 4px; background: var(--sb-bone); color: var(--sb-mute); } .curate__seg { display: flex; gap: 4px; flex: none; background: var(--sb-bone); padding: 4px; border-radius: 10px; } .curate__seg-btn { cursor: pointer; border: none; background: transparent; padding: 7px 12px; border-radius: 7px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--sb-mute); position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 52px; } .curate__seg-btn:hover { color: var(--sb-ink); } .curate__seg-guess { font-size: 9px; opacity: 0.6; text-transform: uppercase; } .curate__seg-btn.is-active { background: var(--sb-paper); color: var(--sb-ink); box-shadow: 0 1px 3px rgba(0,0,0,0.12); font-weight: 600; } .curate__seg-btn--exact.is-active { background: var(--sb-yellow); color: var(--sb-black); } .curate__seg-btn--also.is-active { background: var(--sb-ink); color: var(--sb-paper); } .curate__seg-btn--hide.is-active { background: var(--sb-amber); color: #fff; } .curate__empty { padding: 40px; text-align: center; color: var(--sb-mute); } .curate__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-top: 1px solid var(--sb-line-strong); background: var(--sb-bone); font-size: 13px; color: var(--sb-ink); flex-wrap: wrap; } .curate__footer-hint { color: var(--sb-mute); } @media (max-width: 640px) { .curate__row { flex-wrap: wrap; } .curate__seg { width: 100%; justify-content: space-between; } } /* ====== Shared chrome additions (site-chrome.js) ====== */ /* A menu item whose page is not built yet: shown, but not a link, so the nav never contains a dead end. */ .nav__soon { color: var(--sb-mute); opacity: 0.55; cursor: default; } .nav a[aria-current="page"] { color: var(--sb-black); box-shadow: inset 0 -2px 0 var(--sb-yellow); } .foot__addr { color: #777; font-size: 13px; line-height: 1.6; } /* Mobile nav. styles.css hides .nav below 820px and there was no alternative, so a phone visitor on any nav destination had only the footer to navigate with. The panel is absolutely positioned, so opening it does not shift the page. */ .site-header { position: relative; } /* The coach guides' download bar now holds a print button rather than a link to a PDF that was never uploaded. Match the anchor styling the fragment expects. */ .sb-download-bar button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; } .sb-download-bar button:hover { opacity: 0.75; } @media print { .site-header, .foot, .gd-back, .sb-download-bar { display: none !important; } } /* ---- Installation guide card (results panel) ---- Sits between the fitment summary and the product grid: by the time it appears the user has told us bus, state and mount, which is exactly the key the guides are filed under. */ .guidecard { border: 1.5px solid var(--sb-black); background: var(--sb-paper); margin: 0 0 26px; } .guidecard__row { display: flex; gap: 20px; align-items: stretch; } .guidecard__thumb { flex: 0 0 200px; display: block; background: var(--sb-bone); border-right: 1.5px solid var(--sb-black); overflow: hidden; } .guidecard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .guidecard__tx { flex: 1 1 auto; min-width: 0; padding: 20px 22px 20px 2px; } .guidecard__eyebrow { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sb-mute); margin-bottom: 8px; } .guidecard__title { font-family: var(--font-display); font-size: 21px; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 7px; } .guidecard__sub { font-size: 14px; color: var(--sb-mute); margin: 0 0 16px; max-width: 60ch; text-wrap: pretty; } .guidecard__acts { display: flex; gap: 10px; flex-wrap: wrap; } .guidecard__btn { display: inline-flex; align-items: center; gap: 9px; background: var(--sb-black); color: var(--sb-yellow); text-decoration: none; padding: 11px 18px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; min-height: 44px; } .guidecard__btn:hover { color: var(--sb-yellow); background: #1c1c1c; } .guidecard__toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1.5px solid var(--sb-line-strong); color: var(--sb-ink); padding: 11px 16px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer; min-height: 44px; } .guidecard__toggle:hover { border-color: var(--sb-black); background: var(--sb-yellow); } .guidecard__toggle svg { transition: transform 0.15s; } /* Inline guide. Fixed viewport height with the iframe scrolling internally, so the embedded guide cannot push the product grid thousands of pixels down the page. */ .guidecard__embed { position: relative; border-top: 1.5px solid var(--sb-black); } .guidecard__embed iframe { display: block; width: 100%; height: min(78vh, 900px); border: 0; background: #fff; } .guidecard__pop { position: absolute; top: 12px; right: 14px; z-index: 2; background: var(--sb-black); color: var(--sb-yellow); text-decoration: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 12px; } .guidecard__pop:hover { color: var(--sb-yellow); } @media (max-width: 720px) { .guidecard__row { flex-direction: column; } .guidecard__thumb { flex: 0 0 auto; aspect-ratio: 16/9; border-right: none; border-bottom: 1.5px solid var(--sb-black); } .guidecard__tx { padding: 18px 18px 20px; } .guidecard__embed iframe { height: 70vh; } } /* ---- Site header, replicating safebus.com.au ---- Three tiers, as on the live site: a dark utility strip (address / phone / email), a brand row with the logo, phone and cart, then the menu bar with dropdowns. */ .topbar { background: var(--sb-black); color: rgba(255,255,255,0.82); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; } .topbar__inner { max-width: 1240px; margin: 0 auto; padding: 8px 24px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .topbar__item { display: inline-flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.82); text-decoration: none; } .topbar__item:hover { color: var(--sb-yellow); } .topbar__item svg { opacity: 0.6; flex: 0 0 auto; } .topbar__spacer { flex: 1 1 auto; } @media (max-width: 900px) { .topbar__item--hours { display: none; } } @media (max-width: 620px) { .topbar__inner { gap: 14px; font-size: 11px; } .topbar__item:first-child { display: none; } } .site-header__inner { max-width: 1240px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 16px; } .brand__logo { height: 38px; width: auto; display: block; } .hdr-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 17px; letter-spacing: -0.01em; color: var(--sb-ink); text-decoration: none; white-space: nowrap; } .hdr-phone:hover { color: var(--sb-black); } .hdr-phone svg { color: var(--sb-amber); flex: 0 0 auto; } @media (max-width: 720px) { .hdr-phone { display: none; } } /* Hamburger. Lives in the shared block because both stylesheets need it — when it sat only in styles.css, shop.html and product.html rendered a native UA button and the only route to navigation below 1011px was a 30px-tall grey box. */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; background: none; border: 1.5px solid var(--sb-line-strong); border-radius: 10px; color: var(--sb-ink); cursor: pointer; } .nav-toggle:hover { border-color: var(--sb-black); background: var(--sb-yellow); } /* Menu bar */ .navbar { border-top: 1px solid var(--sb-line); background: var(--sb-paper); } .nav { max-width: 1240px; margin: 0 auto; padding: 0 24px; display: flex; align-items: stretch; gap: 2px; } .nav__item { position: relative; display: flex; } .nav__item > a, .nav .nav__soon { display: inline-flex; align-items: center; gap: 6px; padding: 13px 12px; font-size: 14.5px; font-weight: 500; color: var(--sb-ink); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; } .nav__item > a:hover { color: var(--sb-black); border-bottom-color: var(--sb-yellow); background: var(--sb-bone); } .nav__item > a[aria-current="page"] { border-bottom-color: var(--sb-black); font-weight: 600; } .nav__caret { opacity: 0.45; flex: 0 0 auto; } .nav__item--has-sub:hover .nav__caret { opacity: 1; } /* Dropdown. Opens on hover AND focus-within so it is keyboard reachable. */ .nav__sub { position: absolute; top: 100%; left: 0; z-index: 200; min-width: 250px; background: var(--sb-paper); border: 1.5px solid var(--sb-black); box-shadow: 0 16px 34px rgba(10,10,10,0.16); padding: 6px; display: none; flex-direction: column; } .nav__item--has-sub:hover .nav__sub, .nav__item--has-sub:focus-within .nav__sub { display: flex; } .nav__sub a { display: block; padding: 10px 13px; font-size: 14px; color: var(--sb-ink); text-decoration: none; min-height: 40px; line-height: 20px; } .nav__sub a:hover { background: var(--sb-yellow); color: var(--sb-black); } /* Mobile: the bar becomes a panel under the header. */ @media (max-width: 1010px) { .navbar { border-top: none; } .nav { display: none; } .nav.is-open { display: flex; flex-direction: column; gap: 0; padding: 6px 24px 16px; border-top: 1px solid var(--sb-line); border-bottom: 1.5px solid var(--sb-black); } .nav.is-open .nav__item { display: block; } .nav.is-open .nav__item > a { display: flex; justify-content: space-between; min-height: 46px; font-size: 16px; border-bottom: 1px solid var(--sb-line); border-left: none; padding: 0 2px; } .nav.is-open .nav__sub { display: none; position: static; border: none; box-shadow: none; padding: 0 0 8px 14px; min-width: 0; } .nav.is-open .nav__item.is-expanded .nav__sub { display: flex; } .nav.is-open .nav__sub a { min-height: 44px; display: flex; align-items: center; color: var(--sb-mute); font-size: 15px; } .nav.is-open .nav__item.is-expanded > a .nav__caret { transform: rotate(180deg); } } @media (min-width: 1011px) { .nav-toggle { display: none; } } /* ===== Live-site header replica (www.safebus.com.au) ================== Built from a screenshot of the live header, replacing the earlier three-tier guess. The live chrome is TWO tiers inside a boxed container: one dark charcoal bar holding the logo, a yellow angle-cut "Find out more" panel and the phone + cart beneath it, then a white all-caps Poppins menu bar. There is no address / e-mail utility strip, so the topbar markup is gone from site-chrome.js. */ .site-header { background: #fff; } .hdr-bar { max-width: var(--page-max, 1180px); margin: 0 auto; background: #2d2d2d; display: flex; align-items: stretch; gap: 20px; padding: 0 var(--gutter, 20px); min-height: 106px; overflow: hidden; } .brand { display: flex; align-items: center; gap: 0; flex: 0 0 auto; } .brand__logo { height: 64px; width: auto; display: block; } .hdr-right { margin-left: auto; display: flex; flex-direction: column; align-items: stretch; } .hdr-cta { display: flex; align-items: center; justify-content: center; gap: 13px; margin-right: calc(-1 * var(--gutter, 20px)); padding: 14px 30px 14px 34px; background: var(--sb-yellow); color: #111; font-family: "Poppins", system-ui, sans-serif; font-size: 17px; font-weight: 700; letter-spacing: 0; text-decoration: none; white-space: nowrap; clip-path: polygon(0 0, 100% 0, 100% 100%, 40px 100%); } .hdr-cta:hover { background: #fff; } .hdr-cta svg { flex: 0 0 auto; } .hdr-contact { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: 24px; } .hdr-phone { display: inline-flex; align-items: center; font-family: "Poppins", system-ui, sans-serif; font-size: 23px; font-weight: 700; letter-spacing: 0; color: #fff; text-decoration: none; white-space: nowrap; } .hdr-phone:hover { color: var(--sb-yellow); } .cart-pill { display: inline-flex; align-items: center; gap: 0; padding: 0; background: none; border-radius: 0; color: #fff; font-size: 0; } .cart-pill:hover { color: var(--sb-yellow); } .cart-pill__count { position: relative; top: -9px; left: -5px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--sb-yellow); color: #111; font-family: "Poppins", system-ui, sans-serif; font-size: 10.5px; font-weight: 700; } .nav-toggle { border: 1px solid rgba(255,255,255,0.34); border-radius: 2px; color: #fff; align-self: center; } .nav-toggle:hover { background: var(--sb-yellow); border-color: var(--sb-yellow); color: #111; } .navbar { max-width: var(--page-max, 1180px); margin: 0 auto; background: #fff; border: 0; } .nav { max-width: none; margin: 0; padding: 0 var(--gutter, 20px); gap: 26px; } .nav__item > a, .nav .nav__soon { font-family: "Poppins", system-ui, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #333; padding: 19px 0; gap: 7px; border-bottom: 3px solid transparent; } .nav__item > a:hover { background: none; color: #111; border-bottom-color: var(--sb-yellow); } .nav__item > a[aria-current="page"] { color: #111; font-weight: 700; border-bottom-color: var(--sb-yellow); box-shadow: none; } .nav__caret { opacity: 0.55; } .nav__search { margin-left: auto; display: inline-flex; align-items: center; color: #333; text-decoration: none; } .nav__search:hover { color: var(--sb-yellow-2); } .nav__sub { left: -14px; min-width: 268px; padding: 6px 0; background: #fff; border: 1px solid #ececec; border-radius: 0; box-shadow: 0 14px 34px rgba(0,0,0,0.12); } .nav__sub a { font-family: "Poppins", system-ui, sans-serif; font-size: 13.5px; font-weight: 500; color: #333; padding: 11px 20px; } .nav__sub a:hover { background: #fafafa; color: #111; box-shadow: inset 3px 0 0 var(--sb-yellow); } @media (max-width: 1010px) { .hdr-bar { min-height: 0; padding: 14px 18px; align-items: center; } .brand__logo { height: 46px; } .hdr-right { flex-direction: row; align-items: center; gap: 16px; } .hdr-cta { display: none; } .hdr-phone { font-size: 18px; } .nav { padding: 0 18px; } .nav.is-open { padding: 6px 18px 16px; border-top: 0; border-bottom: 1px solid #ececec; } .nav.is-open .nav__item > a { padding: 0 2px; font-size: 15px; border-bottom: 1px solid #f0f0f0; } .nav.is-open .nav__sub a { color: #666; } .nav__search { display: none; } } @media (max-width: 620px) { .hdr-phone { display: none; } } /* Desktop bar appears at 1011px but the eight items need ~1135px at full size; step the menu down so it never overflows between those widths. */ @media (min-width: 1011px) and (max-width: 1180px) { .nav { gap: 16px; } .nav__item > a, .nav .nav__soon { font-size: 13.5px; letter-spacing: 0; } } /* Emergency exit decals */ .exits{display:flex;flex-direction:column;gap:40px}.exits__note{margin:0;max-width:72ch;font-size:15px;line-height:1.55;color:var(--sb-ink);text-wrap:pretty;padding:14px 16px;background:var(--sb-paper);border:1.5px solid var(--sb-line-strong);border-radius:8px}.exits__note a{color:var(--sb-ink);font-weight:600;text-decoration:underline}.exits__note a:hover{color:var(--sb-black);background:var(--sb-yellow)}.exits__group{display:flex;flex-direction:column;gap:16px}.exits__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding-bottom:10px;border-bottom:1.5px solid var(--sb-black)}.exits__head .t-eyebrow{font-size:13px;font-weight:600;color:var(--sb-ink)}.exits__sub{font-size:14px;color:var(--sb-mute)} .seatbelt__kit{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.5;color:var(--sb-ink);max-width:72ch}