/* ========================================= 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; } @media (min-width: 820px) { .nav { display: flex; } } .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); } @media (max-width: 560px) { .followup__opts--three { 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: 560px; 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; } @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; gap: 8px; } .picker__option { display: flex; align-items: center; gap: 12px; width: 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 .thumb { width: 44px; height: 44px; border-radius: 6px; background: var(--sb-paper) center/cover no-repeat; border: 1px solid var(--sb-line-strong); flex-shrink: 0; } .picker__option .label { flex: 1; } .picker__option .code { font-family: var(--font-mono); font-size: 11px; color: var(--sb-mute); letter-spacing: 0.08em; text-transform: uppercase; } .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: 10px; } @media (min-width: 520px) { .picker__grid { grid-template-columns: repeat(3, 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: 4/3; 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; aspect-ratio: 4/3; 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; } .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; } }