/* ============================================================ TyreStretch — UI prototype High-end automotive editorial · dark default + light toggle ============================================================ */ /* Fonts (Clash Display + Satoshi via Fontshare, Space Mono via Google) are loaded via in the page (see build-all.js renderPage) — no @import here, which would be a render-blocking duplicate fetch. */ /* ---- Theme tokens ---- */ :root { --font-display: "Clash Display", sans-serif; --font-ui: "Satoshi", sans-serif; --font-mono: "Space Mono", ui-monospace, monospace; --accent: #ff3980; --accent-ink: #fff; --accent-soft: rgba(255, 57, 128, 0.14); --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-pill: 999px; --maxw: 1180px; --gap: clamp(14px, 2.4vw, 22px); --ease: cubic-bezier(0.4, 0, 0.1, 1); } /* Dark (default) */ :root, [data-theme="dark"] { color-scheme: dark; --bg: #0b0b0d; --bg-2: #101014; --surface: #15151a; --surface-2: #1c1c22; --surface-hi: #24242c; --border: rgba(255, 255, 255, 0.09); --border-hi: rgba(255, 255, 255, 0.16); --text: #f4f4f6; --text-2: #b6b6c0; --muted: #7c7c88; --shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.85); --img-frame: rgba(255, 255, 255, 0.06); --grain-op: 0.035; } /* Light */ [data-theme="light"] { color-scheme: light; --bg: #f2f1ec; --bg-2: #eceae3; --surface: #ffffff; --surface-2: #f6f5f1; --surface-hi: #eeece6; --border: rgba(20, 18, 14, 0.10); --border-hi: rgba(20, 18, 14, 0.20); --text: #16150f; --text-2: #46443c; --muted: #85837a; --shadow: 0 18px 44px -22px rgba(40, 35, 20, 0.35); --img-frame: rgba(0, 0, 0, 0.06); --grain-op: 0.02; } /* ---- Reset / base ---- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-ui); background: var(--bg); color: var(--text); line-height: 1.5; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; min-height: 100dvh; /* space for the floating mobile nav + the iOS home-bar safe area */ padding-bottom: calc(84px + env(safe-area-inset-bottom)); transition: background 0.4s var(--ease), color 0.4s var(--ease); } /* subtle atmospheric background */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(90% 55% at 100% -10%, rgba(255, 57, 128, 0.05), transparent 55%), radial-gradient(80% 50% at -10% 0%, rgba(57, 123, 255, 0.04), transparent 50%), var(--bg); transition: background 0.4s var(--ease); } /* film grain */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain-op); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } ::selection { background: var(--accent); color: #fff; } /* thin themed scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; } /* keyboard focus */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); } /* Image-detail page: a narrow centred column (subhead + feed-card + more-of). Side padding comes from .wrap, so this just constrains + centres the column. */ .image-col { max-width: 780px; margin-inline: auto; } /* ---- Type ---- */ .h-display { font-family: var(--font-display); font-weight: 700; line-height: 0.98; letter-spacing: -0.03em; } .eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; color: var(--muted); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: clamp(38px, 6vw, 68px) 0 20px; } .section-head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -0.02em; } .section-head a { font-size: 13px; color: var(--text-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; } .section-head a:hover { color: var(--accent); } /* ============================================================ Top bar ============================================================ */ .topbar { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(18px) saturate(1.2); background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom: 1px solid var(--border); } .topbar-inner { height: 64px; display: flex; align-items: center; gap: 18px; } .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; font-size: 17px; text-transform: uppercase; color: var(--text); } .brand-logo { width: 32px; height: 32px; flex: 0 0 auto; } [data-theme="light"] .brand-logo { filter: brightness(0); } .top-nav { display: none; gap: 4px; margin-left: 10px; } .top-nav a { padding: 8px 14px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--text-2); transition: background 0.2s, color 0.2s; } .top-nav a:hover { background: var(--surface-2); color: var(--text); } .top-nav a.active { color: var(--text); background: var(--surface-2); } .top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* Mobile: the Submit CTA is icon-only so the top bar doesn't overflow the viewport (label restored at >=720px below). */ .top-submit { padding: 11px; } .top-submit .btn-label { display: none; } /* Search is available in the bottom tab bar on mobile, so drop the redundant top-bar search icon there (restored at >=720px below). */ .top-actions .icon-btn { display: none; } .icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); transition: border-color 0.2s, transform 0.15s, background 0.2s; } .icon-btn:hover { border-color: var(--border-hi); transform: translateY(-1px); } .icon-btn svg { width: 18px; height: 18px; } /* theme toggle knob */ .theme-toggle { position: relative; width: 62px; height: 34px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-2); display: inline-flex; align-items: center; padding: 3px; transition: background 0.3s; } .theme-toggle .knob { width: 26px; height: 26px; border-radius: 50%; background: var(--text); color: var(--bg); display: grid; place-items: center; transform: translateX(0); transition: transform 0.35s var(--ease), background 0.3s; } [data-theme="dark"] .theme-toggle .knob { transform: translateX(28px); } .theme-toggle .knob svg { width: 15px; height: 15px; } .theme-toggle .sun { display: none; } [data-theme="light"] .theme-toggle .sun { display: block; } [data-theme="light"] .theme-toggle .moon { display: none; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border-radius: var(--r-pill); font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; border: 1px solid transparent; transition: transform 0.15s var(--ease), box-shadow 0.2s, background 0.2s, border-color 0.2s; } .btn svg { width: 17px; height: 17px; } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.6); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.7); } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } .btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); } .btn-ghost:hover { border-color: var(--border-hi); transform: translateY(-1px); } /* ============================================================ Hero (home) ============================================================ */ .hero { position: relative; margin-top: clamp(14px, 3vw, 26px); border-radius: var(--r-lg); overflow: hidden; min-height: min(76svh, 620px); display: flex; align-items: flex-end; border: 1px solid var(--border); box-shadow: var(--shadow); /* dark base so the white hero copy always has contrast — even in light mode, or before/if the hero photo loads (no washed-out hero) */ background: linear-gradient(135deg, #1a1a20, #0b0b0d); } .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 58%; /* zoom past the source image's baked-in corner label/watermark */ transform: scale(1.16); } .hero-scrim { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 34%, rgba(0, 0, 0, 0.15) 66%, rgba(0, 0, 0, 0.35) 100% ); } .hero-body { position: relative; padding: clamp(22px, 4vw, 44px); width: 100%; color: #fff; } .hero-body .eyebrow { color: rgba(255, 255, 255, 0.75); } .hero h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: 1px; line-height: 0.96; font-size: clamp(38px, 8vw, 62px); margin: 14px 0 10px; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5); } .hero h1 .hero-sub { display: inline-block; font-size: 0.55em; font-weight: 600; opacity: 0.9; } .hero h1 em { font-style: normal; color: var(--accent); } .hero p { max-width: 46ch; color: rgba(255, 255, 255, 0.8); font-size: clamp(15px, 2vw, 18px); } /* ---- Search / filter console ---- */ .console { /* Always sits below the hero/subhead with clear breathing room (never floats up over it — that overlapped the intro text on non-image pages). */ margin-top: clamp(20px, 3vw, 32px); position: relative; z-index: 5; } .console-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; } .field { flex: 1 1 130px; min-width: 110px; display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid transparent; transition: border-color 0.2s, background 0.2s; cursor: pointer; } .field:hover { border-color: var(--border-hi); } .field label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .field .val { font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .field .val svg { width: 14px; height: 14px; color: var(--muted); } .console .btn-primary { flex: 0 0 auto; padding-inline: 26px; } /* ============================================================ Filter bar (grid + feed pages) — always available ============================================================ */ .subhead { padding: 22px 0 6px; } .subhead .eyebrow { margin-bottom: 8px; } .subhead h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 5vw, 44px); letter-spacing: 1px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .subhead h1 .mono { font-family: var(--font-mono); font-weight: 700; font-size: 0.5em; color: var(--accent); letter-spacing: 0; } /* Compact title scale for doc / utility / detail pages (privacy, terms, image-usage, stats, submit, search, image). Landing pages keep the larger default .subhead h1 size above. */ .subhead h1.compact { font-size: clamp(24px, 4.5vw, 38px); } .subhead .lede { color: var(--text-2); margin-top: 6px; max-width: 60ch; } .filterbar { position: sticky; top: 64px; z-index: 40; margin-top: 16px; padding: 12px 0; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); } /* filter bar: scrolling chips on the left, pinned view toggle on the right */ .filter-bar-inner { display: flex; align-items: center; gap: 10px; } .filter-row { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .filter-row::-webkit-scrollbar { display: none; } .filter-bar-inner .seg { flex: 0 0 auto; } .chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.12s; } .chip:hover { border-color: var(--border-hi); color: var(--text); } .chip svg { width: 14px; height: 14px; } .chip.active { background: var(--text); color: var(--bg); border-color: var(--text); } .chip.strong { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 700; } .chip .count { font-family: var(--font-mono); font-size: 11px; opacity: 0.7; } .chip.active .count { opacity: 0.85; } .pill .count { margin-left: 6px; font-family: var(--font-mono); font-size: 11px; opacity: 0.7; } .fr-label { flex: 0 0 auto; align-self: center; margin-right: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); } .logo-card.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .filter-spacer { flex: 1 1 auto; } .seg { flex: 0 0 auto; display: inline-flex; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); } .seg button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 11px; border-radius: var(--r-pill); color: var(--muted); transition: color 0.2s, background 0.2s; } .seg button svg { width: 15px; height: 15px; } .seg button.active { background: var(--surface-hi); color: var(--text); } /* ============================================================ Manufacturer chips row (home) ============================================================ */ .logo-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .logo-row::-webkit-scrollbar { display: none; } .logo-card { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); font-weight: 700; font-size: 15px; transition: transform 0.15s var(--ease), border-color 0.2s, box-shadow 0.2s; } .logo-card:hover { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: var(--shadow); } .logo-card .dot { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-hi); display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; color: var(--accent); } /* Full manufacturer index: the .logo-card pills laid out as a wrapping grid (the .logo-row is the horizontal-scroll variant used on the homepage). */ .logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 22px; } /* Index cards get a larger, more legible logo than the compact .logo-row pills. */ .logo-grid .logo-card { padding: 16px 18px; gap: 15px; } .logo-grid .logo-img { width: 46px; height: 46px; } /* Index cards stack the brand name over a tyre-icon fitment count. */ .logo-grid .lc-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .logo-grid .lc-name { font-weight: 700; font-size: 15px; line-height: 1.2; } .logo-grid .logo-card .meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-2); } .logo-grid .fitment-tyres { display: inline-flex; align-items: center; gap: 1px; color: var(--accent); } .logo-grid .fitment-tyres .tyre-ico { width: 12px; height: 12px; } /* ============================================================ Size cards (home "popular sizes") ============================================================ */ .size-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); } .size-card { position: relative; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); padding: 12px 13px; overflow: hidden; transition: transform 0.16s var(--ease), border-color 0.2s, box-shadow 0.2s; } .size-card:hover { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: var(--shadow); } .size-card::after { content: ""; position: absolute; right: -34px; top: -34px; width: 84px; height: 84px; border-radius: 50%; background: rgba(255, 57, 128, 0.10); filter: blur(10px); opacity: 0; transition: opacity 0.3s; } .size-card:hover::after { opacity: 0.6; } .size-card .big { font-family: var(--font-mono); font-weight: 700; /* one line, compact on mobile (tight 2-col grid) → fuller on desktop */ font-size: clamp(12px, 3.1vw, 20px); letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .size-card .big .dia { color: var(--muted); font-size: 0.9em; } .size-card .meta { margin-top: 8px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); } .size-card .meta svg { width: 14px; height: 14px; color: var(--accent); } /* ============================================================ Tile grid (size page) — WATERMARK CROPPED ============================================================ */ .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); margin-top: 24px; } /* An ad injected between tiles should span the full grid width, not steal a cell. */ .tiles > .ad-slot { grid-column: 1 / -1; } .tile { position: relative; border-radius: var(--r); overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); aspect-ratio: 4 / 5; transition: transform 0.16s var(--ease), box-shadow 0.25s, border-color 0.2s; } .tile:hover { transform: translateY(-3px); border-color: var(--border-hi); box-shadow: var(--shadow); } /* the crop: zoom into the wheel so the top label + bottom watermark band + black frame all fall outside the visible area */ .tile img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; transform: scale(1.22); transition: transform 0.5s var(--ease); } .tile:hover img { transform: scale(1.28); } .tile .tile-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent 46%); opacity: 0.9; } .tile .tile-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 13px 14px; color: #fff; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; } .tile .brand-line { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; min-width: 0; flex: 1; /* clamp the brand text to one line — no clipped/escaping titles */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile .brand-line small { white-space: normal; display: block; font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.7); margin-top: 2px; } .tile .likes { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: var(--r-pill); background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(6px); } .tile .likes svg { width: 13px; height: 13px; } .tile .clean-badge { position: absolute; top: 11px; left: 11px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.18); padding: 3px 8px; border-radius: var(--r-pill); backdrop-filter: blur(6px); } /* ------------------------------------------------------------ Missing-photo fallback (dev + prod) — see feed.js showPlaceholder A dead fitment photo becomes an intentional, branded state with a contribution CTA, never a broken-image icon. ------------------------------------------------------------ */ /* Grid tile with no photo: branded surface + spec overlay stays, a small "No photo yet" chip, still links through to the detail. */ .tile.is-noimg { background: radial-gradient( 120% 90% at 50% 28%, var(--surface-hi), var(--surface-2) 72% ); } .tile.is-noimg::before { content: "No photo yet"; position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); background: rgba(0, 0, 0, 0.28); border: 1px solid var(--border); padding: 3px 8px; border-radius: var(--r-pill); } /* Detail-page placeholder: icon + spec + "add your photo" CTA. */ .frame.is-noimg { line-height: normal; } .img-missing { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: clamp(40px, 9vw, 80px) 24px; background: radial-gradient( 120% 80% at 50% 22%, var(--surface-hi), var(--surface-2) 72% ); color: var(--text); } .img-missing .im-icon { width: 46px; height: 46px; color: var(--accent); opacity: 0.9; } .img-missing .im-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 3vw, 24px); letter-spacing: -0.01em; } .img-missing .im-spec { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); max-width: 42ch; } .img-missing .im-cta { margin-top: 6px; } /* Subtle always-on contribution nudge under the detail actions row. */ .contribute-line { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 11px 14px; border: 1px dashed var(--border-hi); border-radius: var(--r); font-size: 13px; color: var(--muted); transition: border-color 0.2s, color 0.2s, background 0.2s; } .contribute-line:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); } .contribute-line svg { width: 17px; height: 17px; flex: none; color: var(--accent); } .contribute-line b { color: var(--accent); font-weight: 700; } /* ------------------------------------------------------------ Local-preview mark: image was pulled from the live site (dev only — the fallback in feed.js never fires on production) ------------------------------------------------------------ */ .has-remote-img { position: relative; } .has-remote-img::after { content: "live"; position: absolute; top: 8px; right: 8px; z-index: 3; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; background: rgba(255, 57, 128, 0.6); border: 1px solid rgba(255, 255, 255, 0.28); padding: 2px 6px; border-radius: var(--r-pill); backdrop-filter: blur(4px); pointer-events: none; } /* ============================================================ Vertical card FEED (image viewer) — watermark VISIBLE ============================================================ */ .feed { max-width: 560px; margin: 22px auto 0; display: flex; flex-direction: column; gap: 30px; } .feed-card { /* square top (matches the photo's own straight crop), rounded bottom */ border-radius: 0 0 var(--r-lg) var(--r-lg); border: 1px solid var(--border); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); scroll-margin-top: 130px; } .feed-card .frame { position: relative; background: var(--surface-2); padding: 0; line-height: 0; } /* image sits flush — it already carries its own baked-in black border, so we don't round or double-frame it (that was clipping the photo) */ .feed-card .frame img { width: 100%; height: auto; border-radius: 0; display: block; } /* watermark stays visible; a tiny note explains the difference */ .feed-card .wm-note { position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.2); padding: 4px 9px; border-radius: var(--r-pill); backdrop-filter: blur(6px); } .feed-card .body { padding: 16px 18px 18px; } .feed-card .title-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .feed-card .title-line h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; } .feed-card .title-line .credit { font-size: 12px; color: var(--muted); margin-top: 3px; } /* spec strip — the instrument-cluster row */ .spec-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 15px 0 4px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; } .spec-strip .cell { background: var(--surface-2); padding: 11px 12px; text-align: center; } .spec-strip .cell .k { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .spec-strip .cell .v { font-family: var(--font-mono); font-weight: 700; font-size: 18px; margin-top: 3px; letter-spacing: -0.02em; } .spec-strip .cell .v span { font-size: 11px; color: var(--muted); } .tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .tag { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); } .tag.accent { color: var(--accent); background: var(--accent-soft); border-color: transparent; } .actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--border); } .act { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: border-color 0.2s, color 0.2s, transform 0.12s, background 0.2s; } .act:hover { border-color: var(--border-hi); color: var(--text); transform: translateY(-1px); } .act svg { width: 16px; height: 16px; } .act.liked { color: var(--accent); border-color: transparent; background: var(--accent-soft); } .act.liked svg { fill: var(--accent); } .act-spacer { flex: 1; } /* feed section divider (related sizes) */ .feed-divider { max-width: 560px; margin: 8px auto -8px; display: flex; align-items: center; gap: 14px; color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .feed-divider::before, .feed-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ============================================================ Mobile bottom nav ============================================================ */ .tabbar { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; display: flex; gap: 2px; padding: 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); backdrop-filter: blur(20px) saturate(1.3); box-shadow: var(--shadow); } .tabbar a { display: grid; place-items: center; width: 52px; height: 46px; border-radius: var(--r-pill); color: var(--muted); gap: 3px; font-size: 9.5px; font-weight: 600; transition: color 0.2s, background 0.2s; } .tabbar a svg { width: 20px; height: 20px; } .tabbar a.active { color: var(--accent); } /* ---- Mobile "More" menu sheet ---- */ .menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 96; background: var(--surface); border-top: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(105%); transition: transform 0.4s var(--ease); padding: 8px 18px calc(30px + env(safe-area-inset-bottom)); box-shadow: var(--shadow); } .menu.open { transform: translateY(0); } .menu .grabber { width: 40px; height: 4px; border-radius: 999px; background: var(--border-hi); margin: 10px auto 16px; } .menu h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 6px 2px 12px; } .menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .menu-link { display: flex; align-items: center; gap: 12px; padding: 15px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); font-weight: 600; font-size: 14px; color: var(--text); transition: border-color 0.2s, transform 0.12s; } .menu-link:hover { border-color: var(--border-hi); transform: translateY(-1px); } .menu-link svg { width: 19px; height: 19px; color: var(--accent); flex: 0 0 auto; } /* ============================================================ Filter drawer (advanced) ============================================================ */ .drawer-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 0.3s; } .drawer-scrim.open { opacity: 1; pointer-events: auto; } .drawer { position: fixed; z-index: 95; background: var(--surface); border: 1px solid var(--border); transition: transform 0.4s var(--ease); /* mobile: bottom sheet */ left: 0; right: 0; bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(105%); max-height: 86dvh; overflow-y: auto; padding: 8px 20px calc(28px + env(safe-area-inset-bottom)); } .drawer.open { transform: translateY(0); } .drawer .grabber { width: 40px; height: 4px; border-radius: 999px; background: var(--border-hi); margin: 10px auto 18px; } .drawer h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 4px; } .drawer .muted { color: var(--muted); font-size: 13px; margin-bottom: 18px; } .filter-group { margin-bottom: 22px; } .filter-group > label { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 11px; } .pill-set { display: flex; flex-wrap: wrap; gap: 8px; } .pill { padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-2); font-size: 13.5px; font-weight: 600; color: var(--text-2); transition: all 0.15s; } .pill:hover { border-color: var(--border-hi); color: var(--text); } .pill.on { background: var(--accent); border-color: var(--accent); color: #fff; } .range-row { display: flex; align-items: center; gap: 12px; } .range-row input[type="range"] { flex: 1; accent-color: var(--accent); } .range-row .rv { font-family: var(--font-mono); font-weight: 700; font-size: 14px; min-width: 62px; text-align: right; } .drawer-foot { position: sticky; bottom: 0; background: var(--surface); padding-top: 14px; padding-bottom: env(safe-area-inset-bottom); margin-top: 6px; border-top: 1px solid var(--border); display: flex; gap: 10px; } .drawer-foot .btn { flex: 1; } /* ============================================================ Footer note ============================================================ */ .proto-note { margin: 60px auto 0; padding: 16px 18px; border: 1px dashed var(--border-hi); border-radius: var(--r); color: var(--muted); font-size: 12.5px; display: flex; gap: 10px; align-items: flex-start; } .proto-note b { color: var(--text-2); } .proto-note svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent); margin-top: 1px; } /* ---- Callout — reusable dashed info box (tips, empty states, notes) ---- */ .callout { display: flex; gap: 13px; align-items: flex-start; padding: 16px 18px; border: 1.5px dashed var(--border-hi); border-radius: var(--r); background: color-mix(in srgb, var(--surface) 55%, transparent); } .callout .ic { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); } .callout .ic svg { width: 18px; height: 18px; } .callout .txt { font-size: 13.5px; color: var(--text-2); line-height: 1.55; } .callout .txt b { color: var(--text); font-weight: 700; } .callout.accent { border-style: solid; border-color: transparent; background: var(--accent-soft); } /* ============================================================ Responsive — desktop up ============================================================ */ @media (min-width: 720px) { body { padding-bottom: 0; } .tabbar { display: none; } .menu { display: none; } /* Feed is a mobile viewing mode — desktop is always grid */ .filterbar .seg { display: none; } .top-nav { display: flex; } /* Desktop hero: shorter (less empty sky above the text) with the copy held in a tidy left-aligned column instead of stretching the full width. */ .hero { /* svh (not dvh): the hero must NOT resize as the mobile address bar hides/shows on scroll — dvh made the page jump when scrolling stopped. */ min-height: min(60svh, 480px); } .hero-body { max-width: 760px; padding: clamp(28px, 3.5vw, 48px); } .hero h1 { margin-top: 16px; } .top-submit { padding: 11px 18px; } .top-submit .btn-label { display: inline; } .top-actions .icon-btn { display: grid; } .size-grid { grid-template-columns: repeat(3, 1fr); } .tiles { grid-template-columns: repeat(3, 1fr); } .drawer { /* desktop: right-side panel */ left: auto; top: 0; bottom: 0; right: 0; width: 400px; max-height: none; border-radius: var(--r-lg) 0 0 var(--r-lg); transform: translateX(105%); padding: 24px 26px 28px; } .drawer.open { transform: translateX(0); } .drawer .grabber { display: none; } } @media (min-width: 1000px) { .size-grid { grid-template-columns: repeat(4, 1fr); } .tiles { grid-template-columns: repeat(4, 1fr); } } /* reduced motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } /* .rise starts at opacity:0 and reveals via animation — with animation disabled it would stay invisible. Force the resting (visible) state so content isn't stuck dim/hidden for reduced-motion users. */ .rise { opacity: 1 !important; transform: none !important; } } /* page-load stagger */ .rise { opacity: 0; transform: translateY(14px); animation: rise 0.6s var(--ease) forwards; } @keyframes rise { to { opacity: 1; transform: none; } } /* ============================================================ Brand logo images (used in logo-row cards + manufacturer hero) ============================================================ */ .logo-img { width: 28px; height: 28px; object-fit: contain; flex: 0 0 auto; /* force white in dark mode regardless of source PNG colour */ filter: brightness(0) invert(1); opacity: 0.9; } [data-theme="light"] .logo-img { /* force dark in light mode */ filter: brightness(0); opacity: 0.92; } .b-logo img { width: 46px; height: 46px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.9; } [data-theme="light"] .b-logo img { filter: brightness(0); opacity: 0.75; } /* ============================================================ Upload page ============================================================ */ .step-strip { display: flex; align-items: center; margin: 24px 0 10px; } .step { display: flex; align-items: center; gap: 9px; } .step .sn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); flex: 0 0 auto; } .step .sl { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; } .step.active .sn { background: var(--accent); border-color: var(--accent); color: #fff; } .step.active .sl { color: var(--text); } .step.done .sn { background: var(--surface-hi); border-color: transparent; color: var(--text-2); } .step.done .sl { color: var(--muted); } .step-sep { flex: 1 1 auto; height: 1px; background: var(--border); margin: 0 10px; min-width: 20px; } .upload-zone { border: 2px dashed var(--border-hi); border-radius: var(--r-lg); padding: 52px 28px; text-align: center; background: var(--surface); cursor: pointer; transition: border-color 0.2s, background 0.2s; margin-top: 24px; } .upload-zone:hover { border-color: var(--accent); background: color-mix(in srgb, var(--surface) 70%, var(--accent-soft)); } .upload-ic { width: 60px; height: 60px; border-radius: var(--r); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 18px; } .upload-ic svg { width: 30px; height: 30px; } .upload-zone h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; } .upload-zone p { color: var(--muted); font-size: 14px; max-width: 36ch; margin: 0 auto; } .upload-zone .or { margin: 18px 0 14px; color: var(--muted); font-size: 12px; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; position: relative; } .form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 20px; margin-top: 16px; } .form-card > h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; margin-bottom: 18px; } .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .form-field input, .form-field select, .form-field textarea { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 11px 14px; font-family: var(--font-ui); font-size: 15px; color: var(--text); width: 100%; transition: border-color 0.2s; -webkit-appearance: none; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); } .form-field textarea { resize: vertical; min-height: 78px; } .form-full { grid-column: 1 / -1; } .form-sep { grid-column: 1 / -1; height: 1px; background: var(--border); margin: 6px 0; } @media (min-width: 720px) { .form-grid.four { grid-template-columns: repeat(4, 1fr); } } /* ============================================================ Stats page ============================================================ */ .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); margin-top: 24px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 18px; transition: border-color 0.2s; } .stat-card:hover { border-color: var(--border-hi); } .stat-card .sc-ico { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 14px; } .stat-card .sc-ico svg { width: 17px; height: 17px; } .stat-card .sc-v { font-family: var(--font-mono); font-weight: 700; font-size: clamp(30px, 6vw, 44px); letter-spacing: -0.04em; line-height: 1; } .stat-card .sc-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 7px; } @media (min-width: 720px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } } .rank-list { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; } .rank-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); transition: border-color 0.15s; } .rank-row:hover { border-color: var(--border-hi); } .rank-row .rn { font-family: var(--font-mono); font-weight: 700; font-size: 12px; color: var(--muted); min-width: 20px; } .rank-row .rl { flex: 1; font-weight: 600; font-size: 14px; } .rank-row .rc { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; } .rank-bar-wrap { height: 3px; background: var(--surface-hi); border-radius: 999px; margin-top: 7px; } .rank-bar { height: 3px; background: var(--accent); border-radius: 999px; opacity: 0.55; } .two-col-ranks { display: grid; grid-template-columns: 1fr; gap: var(--gap); } @media (min-width: 720px) { .two-col-ranks { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ Manufacturer / brand page ============================================================ */ .brand-hero { display: flex; align-items: center; gap: 20px; padding: 26px 0 8px; } .b-logo { flex: 0 0 auto; width: 68px; height: 68px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--accent); } .b-info h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 5vw, 42px); letter-spacing: 1px; } .b-type { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 5px; } /* ============================================================ Terms / document page ============================================================ */ .doc-wrap { max-width: 68ch; padding: 28px 0 64px; } .doc-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 30px; } .doc-toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; margin-bottom: 38px; } .doc-toc .toc-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .doc-toc ol { padding-left: 18px; color: var(--text-2); font-size: 14px; line-height: 2; } .doc-toc ol a { color: var(--text-2); transition: color 0.15s; } .doc-toc ol a:hover { color: var(--accent); } .doc-section { margin-bottom: 44px; } .doc-section h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 3vw, 26px); letter-spacing: -0.02em; margin-bottom: 14px; scroll-margin-top: 80px; } .doc-section p { color: var(--text-2); line-height: 1.78; font-size: 15px; margin-bottom: 12px; } .doc-section ul { color: var(--text-2); line-height: 1.78; font-size: 15px; padding-left: 20px; margin-bottom: 12px; } .doc-section ul li { margin-bottom: 5px; }