/* The Daily Next — main app. Design tokens (palette, gold, radii, glass, type, motion) live in tokens.css, loaded before this file and shared with the login page. */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Base ground lives on so the ambient wash (body::before/::after, z-index:-1) can paint above it but behind all content. */ html { background: var(--bg); } body { color: var(--text); font-family: var(--font-sans); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Scroll lock while a modal/detail overlay is open. iOS Safari ignores `overflow:hidden` on , so we pin the body with position:fixed; app.js sets `top: -px` inline to hold the visual position and restores the scroll offset on unlock. The fixed overlays (own overflow-y:auto) still scroll internally; the ambient-wash pseudo-elements are viewport-fixed and unaffected. */ body.scroll-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } /* ── AMBIENT WASH ───────────────────────────────────── A near-invisible warm tonal layer behind ALL app content so the page never reads as flat dead black and glass surfaces have something to refract. Two overlapping fields of soft gold radials drift very slowly at different speeds and directions — light in a room, not an animation. Behind everything (z-index:-1), pointer-inert, pure CSS (transform-only anim, no per-frame JS). Default is "pronounced"; still tunable down via . */ :root { --wash-a: 0.088; --wash-b: 0.068; --wash-c: 0.048; } /* pronounced (default) */ html[data-wash="1"] { --wash-a: 0.028; --wash-b: 0.022; --wash-c: 0.016; } /* barely-there */ html[data-wash="2"] { --wash-a: 0.05; --wash-b: 0.042; --wash-c: 0.03; } /* moderate */ html[data-wash="3"] { --wash-a: 0.088; --wash-b: 0.068; --wash-c: 0.048; } /* pronounced */ body::before, body::after { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none; transform: translateZ(0); backface-visibility: hidden; } body::before { background: radial-gradient(38% 42% at 24% 30%, rgba(201, 169, 110, var(--wash-a)) 0%, transparent 60%), radial-gradient(44% 46% at 80% 66%, rgba(201, 169, 110, var(--wash-b)) 0%, transparent 62%); animation: washA 72s ease-in-out infinite alternate; } body::after { background: radial-gradient(34% 34% at 64% 12%, rgba(196, 168, 130, var(--wash-c)) 0%, transparent 56%), radial-gradient(40% 40% at 12% 84%, rgba(201, 169, 110, var(--wash-c)) 0%, transparent 58%); animation: washB 94s ease-in-out infinite alternate-reverse; } @keyframes washA { from { transform: translate3d(-2.5%, -1.5%, 0) scale(1.06); } to { transform: translate3d(2.5%, 2%, 0) scale(1.14); } } @keyframes washB { from { transform: translate3d(2%, 1.5%, 0) scale(1.12); } to { transform: translate3d(-2%, -2%, 0) scale(1.04); } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } } /* Freeze the drift on phones. The animated fixed layer forces per-frame recompositing that, on long list pages, is brutal on mobile Safari — and the drift is barely perceptible anyway. The static wash stays (cheap: painted once). */ @media (max-width: 720px) { body::before, body::after { animation: none; } } /* ── AUTH ───────────────────────────────────────────── */ .auth-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(12,12,14,.96); backdrop-filter: blur(16px); } .auth-overlay[hidden] { display: none; } .auth-card { width: 420px; max-width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 34px; box-shadow: 0 24px 80px rgba(0,0,0,.45); } .auth-wordmark { font-family: Georgia, 'Times New Roman', serif; text-transform: uppercase; letter-spacing: .14em; font-size: 22px; font-weight: 700; margin-bottom: 10px; } .auth-sub { color: var(--muted); margin-bottom: 22px; } .auth-form { display: grid; gap: 12px; } .auth-form[hidden] { display: none; } .auth-form input { width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 13px 14px; font: inherit; } .auth-form input:focus { outline: none; border-color: var(--accent); } .auth-form .btn-gold { width: 100%; margin-top: 4px; } .auth-forgot { justify-self: center; margin-top: 2px; background: transparent; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 13px; text-decoration: underline; } .auth-forgot:hover { color: var(--text); } .auth-error { min-height: 20px; color: var(--red); font-size: 13px; margin-bottom: 10px; } .auth-toggle { display: block; margin: 18px auto 0; background: transparent; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: 14px; } .auth-toggle:hover { color: var(--text); } /* ── THE DAILY NEXT — TOP HEADER ────────────────── */ .tdn-header { display: flex; align-items: center; padding: 0 32px; height: 56px; background: rgba(12,12,14,.72); border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; z-index: 100; -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); } .tdn-wordmark { font-size: 22px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); flex: 0 0 auto; font-family: var(--font-serif); } /* ── SUB NAV ───────────────────────────────────────── */ .tdn-subnav { /* Glass, matching the header above it (was solid --surface = opaque strip). */ background: rgba(12, 12, 14, 0.72); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--border-soft); position: sticky; top: 56px; z-index: 99; } .tdn-subnav-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 20px; } .tdn-subnav-category { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; padding: 12px 0; } .tdn-subnav-category span { color: var(--accent); } .tdn-subnav-tabs { display: flex; gap: 2px; } /* ── NAV (sub-nav tabs) ─────────────────────────────────── */ nav { /* subnav — not sticky, lives inside .tdn-subnav */ display: flex; align-items: center; justify-content: space-between; padding: 0; height: auto; } .logo { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; color: var(--accent); } .logo span { color: var(--text); } .nav-tabs { display: flex; gap: 4px; } .nav-tab { padding: 7px 16px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--muted); cursor: pointer; border: none; background: transparent; transition: all 0.15s; } .nav-tab-icon { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; } .nav-tab:hover { color: var(--text); background: var(--surface2); } .nav-tab.active { color: var(--accent); background: var(--surface2); } .add-watch-link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; white-space: nowrap; opacity: 0.8; transition: opacity 0.15s; } .add-watch-link:hover { opacity: 1; } /* ── LAYOUT ─────────────────────────────────────────── */ .main { max-width: 1200px; margin: 0 auto; padding: 40px 32px; } .page-header { margin-bottom: 36px; } .page-header h1 { font-family: var(--font-serif); font-size: 30px; font-weight: 500; letter-spacing: 0; margin-bottom: 6px; } .page-header p { color: var(--muted); font-size: 14px; } /* ── FILTERS ────────────────────────────────────────── */ .filter-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; } .filter-chip { padding: 6px 14px; border: 1px solid var(--border); border-radius: 20px; font-size: 13px; color: var(--muted); cursor: pointer; background: transparent; transition: all 0.15s; } .filter-chip:hover { border-color: var(--accent-dim); color: var(--text); } .filter-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); } .filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--accent-glow); color: var(--accent); font-size: 11px; font-weight: 700; } .filter-search { margin-left: auto; padding: 7px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; width: 220px; outline: none; transition: border 0.15s; } .filter-search:focus { border-color: var(--accent-soft); box-shadow: var(--ring); } .filter-search::placeholder { color: var(--muted); } /* ── DISCOVER ADVANCED FILTERS ──────────────────────── */ .filter-bar.discover-advanced { align-items: center; gap: 14px; margin-top: -14px; margin-bottom: 28px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } /* Country dropdown (multi-select style) */ .ms-dropdown { position: relative; display: inline-block; } .ms-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color 0.15s, color 0.15s; white-space: nowrap; } .ms-toggle:hover { border-color: var(--accent-dim); } .ms-toggle.has-value { border-color: var(--accent-dim); color: var(--accent); } .ms-caret { font-size: 10px; color: var(--muted); margin-left: 2px; } .ms-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 220px; max-height: 320px; overflow-y: auto; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--accent-line); border-radius: var(--radius); box-shadow: var(--shadow-raise); padding: 6px 0; } .ms-menu[hidden] { display: none; } .ms-menu .ms-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 14px; background: transparent; border: none; color: var(--text); font-size: 13px; cursor: pointer; transition: background 0.12s, color 0.12s; } .ms-menu .ms-item:hover { background: var(--surface2); color: var(--accent); } .ms-menu .ms-item.selected { color: var(--accent); background: rgba(201,169,110,0.08); } .ms-menu .ms-item .ms-check { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: 0 0 14px; border: 1px solid var(--muted); border-radius: 3px; font-size: 11px; line-height: 1; color: var(--accent); background: var(--surface); } .ms-menu .ms-item.selected .ms-check { border-color: var(--accent); background: rgba(201,169,110,0.18); } .ms-menu .ms-item .ms-count { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 600; } /* Sort select */ .sort-select { padding: 7px 32px 7px 12px; background: var(--surface2); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; transition: border-color 0.15s; } .sort-select:hover { border-color: var(--accent-dim); } .sort-select:focus { border-color: var(--accent-soft); box-shadow: var(--ring); } .sort-select.has-value { border-color: var(--accent-dim); color: var(--accent); } .sort-select option { background: var(--surface); color: var(--text); } /* ── GRID ───────────────────────────────────────────── */ .watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } .watch-card { background: var(--card-grad); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card); transition: border-color 0.2s, transform 0.2s var(--ease-out), box-shadow 0.2s; cursor: pointer; } .watch-card:hover { border-color: var(--accent-line); transform: translateY(-3px); box-shadow: var(--shadow-raise); } .watch-card.liked { border-color: rgba(34,197,94,0.4); } .watch-card.disliked { border-color: rgba(239,68,68,0.25); } .watch-card.owned { border-color: var(--accent); } /* ── CARD IMAGE ─────────────────────────────────────── */ .card-img { width: 100%; aspect-ratio: 3/2; background: var(--surface2); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .card-img img, .card-img .watch-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; transition: opacity 0.3s, transform 0.3s; } .watch-card:hover .card-img img { opacity: 1; transform: scale(1.03); } /* Padded product-card catalogue shots: zoom so the watch fills the frame */ .card-img img.product-shot { transform: scale(1.4); } .watch-card:hover .card-img img.product-shot { transform: scale(1.45); } /* Skeleton loading */ /* .card-img img.loading { opacity: 0; } */ .card-img.skeleton { animation: shimmer 1.4s infinite; } @keyframes shimmer { 0% { background-color: var(--surface2); } 50% { background-color: #252529; } 100% { background-color: var(--surface2); } } /* Placeholder clock */ .watch-placeholder { width: 90px; height: 90px; border-radius: 50%; border: 5px solid var(--border); position: relative; display: flex; align-items: center; justify-content: center; } .watch-placeholder::before { content: ''; position: absolute; width: 2px; height: 24px; background: var(--accent); bottom: 50%; left: 50%; transform: translateX(-50%); transform-origin: bottom; border-radius: 2px; } .watch-placeholder::after { content: ''; position: absolute; width: 2px; height: 18px; background: var(--muted); top: 50%; left: 50%; transform: translateX(-50%) rotate(90deg); transform-origin: top; border-radius: 2px; } /* ── CARD BADGES / OVERLAYS ─────────────────────────── */ .card-badge { position: absolute; top: 12px; right: 12px; padding: 3px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; pointer-events: none; } .badge-owned { background: var(--accent); color: #000; } .badge-liked { background: rgba(34,197,94,0.15); color: var(--green); border: 1px solid rgba(34,197,94,0.3); } .badge-new { background: rgba(99,102,241,0.15); color: #818cf8; border: 1px solid rgba(99,102,241,0.3); } .card-delete { position: absolute; top: 10px; left: 10px; width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(239,68,68,0.3); background: rgba(239,68,68,0.08); color: var(--red); font-size: 13px; cursor: pointer; display: none; align-items: center; justify-content: center; transition: background 0.15s; } .watch-card:hover .card-delete { display: flex; } .card-delete:hover { background: rgba(239,68,68,0.2); } /* ── CARD BODY ──────────────────────────────────────── */ .card-body { padding: 16px; } .card-brand { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .card-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; line-height: 1.3; } .card-ref { font-size: 12px; color: var(--muted); margin-bottom: 10px; font-family: 'Courier New', monospace; } .card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; } .tag { padding: 3px 8px; background: var(--surface2); border-radius: 4px; font-size: 11px; color: var(--muted); } .card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border); } .card-price { font-size: 14px; font-weight: 600; } .vote-btns { display: flex; gap: 6px; } .vote-btn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.15s; color: var(--muted); } .vote-btn:hover { background: var(--surface2); color: var(--text); } .vote-btn.up.active { background: rgba(34,197,94,0.1); border-color: var(--green); color: var(--green); } .vote-btn.down.active { background: rgba(239,68,68,0.1); border-color: var(--red); color: var(--red); } .vote-btn.star.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); } /* ── WATCH DETAIL PANEL ─────────────────────────────── */ .detail-overlay { /* Lighter scrim + gentler pre-blur so real content stays visible BEHIND the panel — the panel's own blur then frosts it into glass (was scrim .62 + blur 6px, which flattened the panel's backdrop to solid dark → no glass). */ display: none; position: fixed; inset: 0; background: rgba(8, 8, 11, 0.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 300; align-items: flex-start; justify-content: flex-end; } #detail-overlay { z-index: 400; } .detail-overlay.open { display: flex; } .detail-panel { /* Translucent glass — same recipe as the login card so the frosted backdrop reads through it, instead of the old near-opaque .86 flat panel, while staying legible even over a bright product image behind it. */ background: rgba(18, 18, 22, 0.66); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-left: 1px solid var(--accent-line); width: 520px; max-width: 100vw; height: 100vh; overflow-y: auto; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; animation: slideIn 0.28s var(--ease-out); } @keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .detail-img { width: 100%; aspect-ratio: 1/1; background: var(--surface2); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; flex-shrink: 0; } /* Center via auto-size + margin auto inside the flex square. WebKit (iOS Safari) mis-positions an that combines object-fit:contain with padding, pushing it off-center (looked right-aligned); this pattern centers reliably in both WebKit and Blink. The 32px = the old 16px inset on each side. */ .detail-img img { max-width: calc(100% - 32px); max-height: calc(100% - 32px); width: auto; height: auto; margin: auto; display: block; object-fit: contain; } /* Default: X is absolutely positioned inside its parent (e.g. .detail-img for the watch panel, which has position: relative). */ .detail-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; z-index: 5; } .detail-close:hover { background: rgba(0,0,0,0.75); } /* Brand panel: the X sits at panel root and the panel itself scrolls, so we make it sticky-pinned to the top-right of the panel viewport. We wrap it so the sticky positioning works cleanly inside the flex column. */ .brand-panel > .detail-close { position: sticky; top: 14px; right: 14px; align-self: flex-end; margin: 14px 14px -46px auto; /* negative bottom margin reclaims layout space */ background: rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); flex-shrink: 0; } .brand-panel > .detail-close:hover { background: rgba(0,0,0,0.85); } .detail-body { padding: 28px; flex: 1; } .detail-brand { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); flex: 1; } .detail-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .detail-name { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; margin-bottom: 6px; } .detail-title-row .detail-vote-btn.star { flex: 0 0 auto; width: 32px; height: 32px; min-width: unset; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; } .detail-ref { font-size: 13px; color: var(--muted); font-family: 'Courier New', monospace; margin-bottom: 20px; } .detail-price { font-size: 20px; font-weight: 700; color: var(--accent); } .detail-price-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .detail-purchased-btn { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 12px; font-weight: 600; padding: 4px 10px; cursor: pointer; transition: all 0.15s; white-space: nowrap; } .detail-purchased-btn:hover { border-color: var(--accent); color: var(--accent); } .detail-purchased-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); } .detail-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; } .detail-actions { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; } .detail-vote-btn { flex: 1; min-width: 80px; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: transparent; cursor: pointer; font-size: 18px; transition: all 0.15s; color: var(--muted); text-align: center; } .detail-vote-btn:hover { background: var(--surface2); color: var(--text); } .detail-vote-btn.up.active { background: rgba(34,197,94,0.1); border-color: var(--green); } .detail-vote-btn.down.active { background: rgba(239,68,68,0.1); border-color: var(--red); } .detail-vote-btn.star.active { background: var(--accent-glow); border-color: var(--accent); } .detail-vote-btn.collect.active { background: rgba(201,169,110,0.18); border-color: var(--accent); color: var(--accent); font-size: 13px; font-weight: 600; } .detail-vote-label { font-size: 11px; color: var(--muted); margin-top: 4px; } .detail-blurb { font-size: 14px; line-height: 1.7; color: var(--text); margin: 16px 0 20px; opacity: 0.85; min-height: 44px; } .dp-blurb-loading { color: var(--muted); font-style: italic; } .detail-buy-inline { padding: 4px 12px; border-radius: 6px; background: var(--accent, #f5c518); color: #000; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: opacity 0.15s; } .detail-buy-inline:hover { opacity: 0.8; } .detail-movement { font-size: 12px; color: var(--muted); margin: 10px 0 12px; font-family: 'Courier New', monospace; } /* ── MODALS ─────────────────────────────────────────── */ .modal-overlay { display: none; position: fixed; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 200; align-items: center; justify-content: center; } .modal-overlay.open { display: flex; } .modal { background: var(--glass); border: 1px solid var(--accent-line); border-radius: var(--radius-xl); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--shadow-pop); padding: 32px; width: 480px; max-width: 95vw; max-height: 90vh; overflow-y: auto; animation: rise .5s var(--ease-out) both; } @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .modal h2 { font-size: 21px; font-weight: 600; margin-bottom: 6px; font-family: var(--font-serif); } .modal .modal-sub { color: var(--muted); font-size: 14px; margin-bottom: 24px; } .form-row { margin-bottom: 16px; } .form-row label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; } .form-row input, .form-row select, .form-row textarea { width: 100%; padding: 11px 13px; background: rgba(10,10,12,.55); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); font-family: inherit; } .form-row textarea { resize: vertical; min-height: 72px; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--accent-soft); box-shadow: var(--ring); background: rgba(10,10,12,.75); } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; } .btn-ghost { padding: 10px 20px; background: rgba(255,255,255,.045); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 14px; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); } .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--accent-soft); } .btn-primary { padding: 10px 20px; background: var(--gold-grad); border: none; border-radius: var(--radius-sm); color: var(--gold-ink); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 18px rgba(201,169,110,.16), 0 1px 0 rgba(255,255,255,.22) inset; transition: filter var(--t-fast), transform .06s; } .btn-primary:hover { filter: brightness(1.05); } .btn-primary:active { transform: translateY(1px); } .btn-primary.btn-danger { background: var(--red); color: #fff; box-shadow: none; } .btn-primary.btn-danger:hover { filter: brightness(1.06); } /* Confirm dialog — narrower than the add-watch modal */ .modal.confirm-modal { max-width: 420px; } /* ── SEARCH RESULTS ─────────────────────────────────── */ .search-result-item { padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 14px; border-radius: 6px; transition: background 0.12s; } .search-result-item:hover { background: var(--surface2); } .search-result-item.selected { background: var(--accent-glow); border-color: var(--accent-dim); color: var(--accent); } #search-results { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 6px; } #search-results:empty { border: none; } /* ── EMPTY ──────────────────────────────────────────── */ .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); } .empty-state .emoji { font-size: 40px; margin-bottom: 12px; } .empty-state h3 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .empty-state p { font-size: 14px; } /* ── TOAST ──────────────────────────────────────────── */ .toast { position: fixed; bottom: 24px; right: 24px; padding: 12px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-size: 14px; z-index: 999; opacity: 0; transform: translateY(8px); transition: all 0.2s; pointer-events: none; } .toast.show { opacity: 1; transform: translateY(0); } /* ── SECTION LABEL ──────────────────────────────────── */ .section-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; } /* ── BRANDS DIRECTORY ─────────────────────────────── */ .brands-search-bar { margin-bottom: 32px; } .brands-search { width: 280px; margin-left: 0; } .brands-letter-group { margin-bottom: 16px; } .brands-letter { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .brands-grid { display: grid; /* Max 3 columns; each column at least ~220px, collapses to 2 then 1 as viewport shrinks */ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 16px; } @media (max-width: 720px) { .brands-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } } @media (max-width: 480px) { .brands-grid { grid-template-columns: 1fr; } } .brands-grid .brand-card-wrap { margin-right: 0; } .brands-grid .brand-card { width: 100%; } .brand-card { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 0; background: none; border: none; text-decoration: none; color: var(--text); font-size: 13px; font-weight: 500; transition: color 0.15s; } .brand-card:hover { color: var(--accent); } .brand-name { display: inline-flex; align-items: center; gap: 4px; } .brand-country { color: var(--muted); font-size: 11px; font-weight: 400; } .brand-fav-heart { color: var(--green); font-size: 12px; line-height: 1; margin-right: 4px; display: inline-block; vertical-align: baseline; } .brand-indicators { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; } .brand-indicator { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; line-height: 1; } /* Iconic round badges (e.g. ✓ owned) */ .brand-indicator.owned { width: 13px; height: 13px; border-radius: 999px; font-size: 10px; color: var(--accent); background: var(--accent-glow); } /* Text pill (e.g. "liked: 4") */ .brand-indicator.liked { padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: var(--green); background: rgba(34,197,94,0.12); text-transform: lowercase; white-space: nowrap; } .brands-empty { color: var(--muted); font-size: 14px; padding: 40px 0; text-align: center; } @media (max-width: 640px) { nav { padding: 0 16px; } .nav-tabs { gap: 2px; } .nav-tab { padding: 6px 10px; font-size: 13px; } .main { padding: 24px 16px; } .watch-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .card-name { font-size: 13px; } .filter-search { width: 100%; margin-left: 0; } .detail-panel { width: 100vw; } /* Header + subnav mobile */ .tdn-header { padding: 0 16px; } .tdn-subnav-inner { padding: 0 16px; gap: 10px; } .tdn-subnav-category { font-size: 9px; } .tdn-wordmark { font-size: 18px; } } @media (max-width: 480px) { .watch-grid { grid-template-columns: 1fr 1fr; } .nav-tab { padding: 5px 8px; font-size: 12px; } .page-header h1 { font-size: 22px; } } /* ── WISHLIST TABLE ───────────────────────────────────────────────────────── */ .wishlist-table { width: 100%; border-collapse: collapse; font-size: 14px; } .wishlist-table thead th { text-align: left; padding: 8px 12px; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); } .wishlist-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.12s; cursor: grab; user-select: none; -webkit-user-select: none; } .wishlist-table tbody tr:active { cursor: grabbing; } .wishlist-table tbody tr.drag-over { background: rgba(var(--accent-rgb,255,200,0), 0.08); border-top: 2px solid var(--accent, #f5c518); } .wishlist-table tbody tr.dragging { opacity: 0.35; } /* drag-handle hint in the rank cell on mobile */ .wl-rank::before { content: '☰'; display: none; color: var(--muted); font-size: 14px; margin-right: 4px; vertical-align: middle; } @media (max-width: 600px) { .wl-rank::before { display: inline; } } .wishlist-table tbody tr:last-child { border-bottom: none; } .wishlist-table td { padding: 10px 12px; vertical-align: middle; } .wl-rank { width: 36px; color: var(--muted); font-size: 13px; font-weight: 700; } .wl-img { width: 104px; } .wl-img img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; display: block; } .wl-img .wl-thumb-placeholder { width: 96px; height: 96px; border-radius: 8px; background: var(--card); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 32px; } .wl-name { } .wl-name .wl-brand { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .wl-name .wl-model { font-weight: 600; font-size: 14px; margin-top: 2px; cursor: pointer; } .wl-name .wl-model:hover { color: var(--accent); } .wl-price { color: var(--muted); font-size: 13px; white-space: nowrap; } /* Shown only on mobile, where the price column is dropped for width (see media query). */ .wl-price-mobile { display: none; color: var(--muted); font-size: 12px; margin-top: 3px; } .wl-actions { width: 60px; text-align: right; white-space: nowrap; } .wl-btn { background: none; border: none; cursor: pointer; padding: 4px 6px; color: var(--muted); font-size: 13px; border-radius: 4px; line-height: 1; transition: color 0.15s, background 0.15s; text-decoration: none; display: inline-block; } .wl-btn:hover { color: var(--text); background: var(--border); } .wl-btn.remove:hover { color: #e55; } .wl-btn.bought { color: var(--accent); font-size: 13px; } .wl-btn.bought:hover { color: #fff; background: rgba(201,169,110,0.28); } .wl-btn.buy { color: var(--muted); font-size: 13px; } .wl-btn.buy:hover { color: var(--text); background: var(--border); } .wishlist-empty { color: var(--muted); font-size: 14px; padding: 48px 0; text-align: center; } @media (max-width: 640px) { .wishlist-table { font-size: 13px; } .wishlist-table thead th { padding: 6px 8px; } .wishlist-table td { padding: 8px 6px; } .wl-rank { width: 24px; font-size: 12px; } .wl-img { width: 80px; } .wl-img img, .wl-img .wl-thumb-placeholder { width: 72px; height: 72px; } .wl-price { display: none; } .wl-price-mobile { display: block; } .wl-actions { width: auto; } .wl-actions th { display: none; } .wl-name .wl-model { font-size: 13px; } } /* ── BRAND ENRICHMENT ──────────────────────────────── */ .brand-badge { display: inline-flex; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; letter-spacing: 0.3px; } .brand-badge.waitlist { color: #f59e0b; background: rgba(245,158,11,0.12); } .brand-badge.sold-out { color: var(--muted); background: rgba(100,100,100,0.12); text-decoration: line-through; } .brand-url-invalid { opacity: 0.5; text-decoration: line-through; } /* Brand count badge next to the page title */ .brands-count-badge { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); background: var(--surface2, rgba(255,255,255,0.04)); border: 1px solid var(--border, rgba(255,255,255,0.08)); line-height: 1.4; white-space: nowrap; } .brands-count-badge.filtered { color: var(--accent); border-color: var(--accent); } .brand-card-wrap { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; min-width: 0; } /* ── BRAND PANEL ──────────────────────────────────── */ .brand-panel { padding: 0; display: flex; flex-direction: column; } /* The X is now sticky/in-flow at the top of the panel — the header can use its normal right padding again since the heart no longer competes with an absolutely-positioned X. */ .bp-header { padding: 8px 24px 0; } /* inline-flex so the heart sits right after the last character of the title, not pushed to the right edge of the row. flex-wrap lets the heart drop to the next line on very narrow viewports rather than overflow. */ .bp-name-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; } .bp-name { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.2; min-width: 0; } .bp-heart-btn { background: transparent; border: none; color: var(--muted, #888); cursor: pointer; font-size: 22px; line-height: 1; padding: 0 2px; transition: color 0.15s, transform 0.15s; flex-shrink: 0; } .bp-heart-btn:hover { color: var(--green); transform: scale(1.15); } .bp-heart-btn.active { color: var(--green); } .bp-meta { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 16px; } .bp-blurb { font-size: 13px; color: var(--text); line-height: 1.65; padding: 0 24px 16px; opacity: 0.85; } .bp-blurb p { margin-bottom: 10px; } .bp-blurb p:last-child { margin-bottom: 0; } .bp-tradeoffs { margin: 0 24px 18px; padding: 12px 14px; background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.22); border-radius: 8px; font-size: 12.5px; line-height: 1.6; color: var(--text); opacity: 0.9; } .bp-tradeoffs-label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #f59e0b; margin-bottom: 5px; } .bp-site-link { display: inline-flex; align-items: center; gap: 5px; margin: 0 24px 20px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; border: 1px solid var(--accent); border-radius: 6px; padding: 7px 14px; width: max-content; transition: background 0.15s, color 0.15s; } .bp-site-link:hover { background: var(--accent); color: #000; } .bp-watches-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0 24px 10px; border-top: 1px solid var(--border); padding-top: 16px; } /* 2-column card grid with large thumbnails */ .bp-watches-list { overflow-y: auto; flex: 1; padding: 4px 20px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; /* max-content rows: size each row to the card's full height so the square thumbnail + name/price aren't clipped (auto rows under-count aspect-ratio). */ grid-auto-rows: max-content; align-content: start; } .bp-loading, .bp-empty { color: var(--muted); font-size: 13px; padding: 16px 4px; grid-column: 1 / -1; } .bp-watch-row { display: flex; flex-direction: column; align-items: stretch; padding: 0; border-radius: 12px; overflow: hidden; background: var(--surface2); border: 1px solid var(--border); text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.15s cubic-bezier(.2,.9,.3,1.4), border-color 0.15s, box-shadow 0.15s; } .bp-watch-row:hover, .bp-watch-row:focus-visible { border-color: var(--accent-dim); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.4); outline: none; } .bp-watch-img { width: 100%; aspect-ratio: 1 / 1; flex-shrink: 0; overflow: hidden; background: var(--surface); display: flex; align-items: center; justify-content: center; } .bp-watch-img img { width: 100%; height: 100%; object-fit: contain; padding: 12px; box-sizing: border-box; } .bp-watch-placeholder { width: 100%; height: 100%; background: var(--border); } .bp-watch-info { padding: 12px 13px 14px; } .bp-watch-name { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bp-watch-price { font-size: 12.5px; color: var(--muted); margin-top: 5px; } .bp-watch-arrow { display: none; } /* ── DAILY-DROP DISCOVER HOME (ported from demo.css) ───────────────── */ .tdn-wordmark-btn { background: transparent; border: 0; cursor: pointer; text-align: left; } .tdn-wordmark-btn:hover { color: var(--accent-bright); } .tdn-drop-status { margin-left: auto; text-align: right; color: var(--muted); font-size: 12px; line-height: 1.35; } .tdn-drop-status b { color: var(--accent-bright); } .daily-home { max-width: 1240px; padding-top: 0; } .daily-empty { color: var(--muted); padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; } /* ── TODAY'S DROP HERO ── */ .drop { padding: 52px 0 40px; } /* Editorial mosaic — shared by today's drop and every feed day. grid-auto-rows (not a fixed 2-row template) lets the hero span a computed number of rows so any pick count tiles cleanly. */ .drop-grid, .feed-grid { display: grid; gap: 18px; grid-template-columns: 1.6fr 1fr 1fr; grid-auto-rows: 280px; } .drop-card { position: relative; overflow: hidden; cursor: pointer; background: var(--card-grad); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: transform .25s var(--ease-out), border-color .2s, box-shadow .25s; } .drop-card:hover { transform: translateY(-4px) scale(1.01); border-color: var(--accent-line); box-shadow: var(--shadow-raise); } .drop-card.feature { grid-row: span var(--feat-span, 2); } .drop-card.wide { grid-column: span 2; } .drop-img { position: relative; width: 100%; height: 100%; background: radial-gradient(120% 90% at 50% 35%, #202026 0%, #121215 70%); display: flex; align-items: center; justify-content: center; } .drop-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; display: block; position: absolute; inset: 0; } .drop-card:hover img { transform: scale(1.04); } .drop-card .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(5,5,7,.88) 100%); } .drop-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; } .drop-card.feature .drop-meta { padding: 26px 28px; } .dm-brand { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 5px; } .dm-name { font-size: 15px; font-weight: 600; line-height: 1.25; margin-bottom: 6px; } .drop-card.feature .dm-name { font-family: 'Fraunces', Georgia, serif; font-size: 26px; font-weight: 450; } .dm-row { display: flex; align-items: center; gap: 10px; } .dm-price { font-size: 13px; color: rgba(242,240,236,.85); font-weight: 500; } .match { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--accent-bright); background: rgba(201,169,110,.16); border: 1px solid rgba(201,169,110,.35); padding: 3px 9px; border-radius: 999px; backdrop-filter: blur(4px); } .btn-gold { background: var(--gold-grad); color: var(--gold-ink); border: none; cursor: pointer; font-size: 14px; font-weight: 600; letter-spacing: .01em; padding: 12px 26px; border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(201,169,110,.2), 0 1px 0 rgba(255,255,255,.25) inset; transition: filter var(--t-fast), transform .06s, box-shadow .2s; } .btn-gold:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(201,169,110,.28), 0 1px 0 rgba(255,255,255,.25) inset; } .btn-gold:active { transform: translateY(0); } /* ── DAY FEED ── */ /* Generous space ABOVE the header detaches it from the previous day's grid; the tight margin below hugs it to its own grid — so each date clearly heads the section beneath it rather than trailing the one above. */ .day-group { padding-top: 56px; margin-bottom: 0; } .day-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .day-name { font-family: 'Fraunces', Georgia, serif; font-size: 22px; } .day-sub { font-size: 12px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; } /* Feed days share the mosaic layout (see .drop-grid, .feed-grid above); slightly shorter rows than today's headline drop. */ .feed-grid { grid-auto-rows: 236px; } /* always-visible compact vote row in the card footer */ .wvotes { display: flex; gap: 6px; } .wvotes .vbtn-sm { width: 30px; height: 30px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); color: var(--muted); transition: transform .15s, color .15s, border-color .15s, background .15s; } .wvotes .vbtn-sm svg { width: 14px; height: 14px; } .wvotes .vbtn-sm:hover { transform: scale(1.12); color: var(--text); } .wvotes .vbtn-sm.like:hover, .wvotes .vbtn-sm.like.liked { color: var(--green); border-color: var(--green); background: rgba(52,211,153,.1); } .wvotes .vbtn-sm.pass:hover, .wvotes .vbtn-sm.pass.on { color: var(--red); border-color: var(--red); background: rgba(248,113,113,.1); } .wvotes .vbtn-sm.wish:hover, .wvotes .vbtn-sm.wish.liked { color: var(--accent-bright); border-color: var(--accent); background: rgba(201,169,110,.1); } .wbrand { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .wname { font-size: 14.5px; font-weight: 600; line-height: 1.3; margin-bottom: 7px; } .wprice { font-size: 13.5px; font-weight: 600; color: rgba(242,240,236,.92); } /* like burst */ @keyframes burst { 0% { transform: scale(.4); opacity: 0; } 45% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } .burst { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: var(--green); opacity: 0; } .burst.go { animation: burst .65s ease forwards; } .burst svg { width: 64px; height: 64px; filter: drop-shadow(0 4px 18px rgba(52,211,153,.5)); } /* ── WISHLIST PODIUM ── */ .wl { padding: 10px 0 70px; } .wl-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } .wl-title { font-family: 'Fraunces', Georgia, serif; font-size: 28px; } .wl-total { font-size: 13px; color: var(--muted); } .wl-total b { color: var(--accent-bright); font-size: 16px; font-weight: 600; } .wl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .wl-card { position: relative; display: flex; gap: 16px; align-items: center; background: var(--card-grad); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 16px; cursor: grab; transition: border-color .2s, transform .2s var(--ease-out), box-shadow .2s; } .wl-card:hover { border-color: var(--accent-line); transform: translateY(-3px); box-shadow: var(--shadow-raise); } .wl-card.first { border-color: var(--accent-soft); background: linear-gradient(140deg, rgba(201,169,110,.1), #15151a 55%); box-shadow: var(--shadow-raise); } .wl-rank { position: absolute; top: -10px; left: -10px; width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', Georgia, serif; font-size: 14px; background: var(--surface2); border: 1px solid var(--border); color: var(--muted); } .wl-card.first .wl-rank { background: var(--accent); color: #15120b; border-color: var(--accent); font-weight: 700; } .wl-thumb { width: 76px; height: 76px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--surface2); } .wl-thumb img { width: 100%; height: 100%; object-fit: cover; } .wl-info .wbrand { margin-bottom: 2px; } .wl-info .wname { font-size: 14px; margin-bottom: 4px; } .wl-info .wprice { font-size: 12.5px; color: var(--muted); font-weight: 500; } /* ── RATE MODE OVERLAY ── */ .rm-overlay { position: fixed; inset: 0; z-index: 500; display: none; align-items: center; justify-content: center; background: rgba(6,6,8,.92); backdrop-filter: blur(10px); } .rm-overlay.open { display: flex; } .rm-stage { width: min(440px, 92vw); text-align: center; } .rm-progress { font-size: 12px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; } .rm-progress b { color: var(--accent-bright); } .rm-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); transition: transform .28s ease, opacity .28s ease; } .rm-card.out-left { transform: translateX(-120px) rotate(-6deg); opacity: 0; } .rm-card.out-right { transform: translateX(120px) rotate(6deg); opacity: 0; } .rm-card { cursor: grab; touch-action: pan-y; user-select: none; } .rm-card:active { cursor: grabbing; } .rm-card.swipe-like { border-color: var(--green); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 2px var(--green) inset; } .rm-card.swipe-pass { border-color: var(--red); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 2px var(--red) inset; } .rm-card img { pointer-events: none; } .rm-img { aspect-ratio: 1/1; background: radial-gradient(120% 90% at 50% 35%, #202026 0%, #121215 75%); } .rm-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .rm-body { padding: 20px 24px 24px; } .rm-brand { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; } .rm-name { font-family: 'Fraunces', Georgia, serif; font-size: 24px; margin-bottom: 6px; } .rm-price { font-size: 14px; color: var(--muted); } .rm-actions { display: flex; justify-content: center; align-items: flex-start; gap: 26px; margin-top: 24px; } .rm-action { display: flex; flex-direction: column; align-items: center; gap: 7px; } .rm-action-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .rm-btn { width: 58px; height: 58px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); color: var(--muted); transition: transform .15s, color .15s, border-color .15s, background .15s; } .rm-btn svg { width: 24px; height: 24px; } .rm-btn.pass.on { color: var(--red); border-color: var(--red); background: rgba(248,113,113,.1); } .rm-btn.like.on { color: var(--green); border-color: var(--green); background: rgba(52,211,153,.1); } .rm-btn.wish { width: 48px; height: 48px; align-self: center; } .rm-btn.wish svg { width: 19px; height: 19px; } /* Hover feedback only on real pointer devices. On touch (iOS/Android) a tapped button keeps a sticky :hover, and since the rate buttons persist across cards that stale highlight would carry the previous watch's rating onto the next. */ @media (hover: hover) { .rm-btn:hover { transform: scale(1.12); } .rm-btn.pass:hover { color: var(--red); border-color: var(--red); background: rgba(248,113,113,.1); } .rm-btn.like:hover { color: var(--green); border-color: var(--green); background: rgba(52,211,153,.1); } .rm-btn.wish:hover { color: var(--accent-bright); border-color: var(--accent); } } .rm-keys { margin-top: 20px; font-size: 12px; color: var(--muted); } .rm-keys kbd { display: inline-block; padding: 2px 8px; margin: 0 3px; background: var(--surface2); border: 1px solid var(--border); border-radius: 5px; font-family: inherit; font-size: 11px; color: var(--text); } .rm-close { position: absolute; top: 22px; right: 26px; width: 40px; height: 40px; border-radius: 999px; cursor: pointer; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 18px; transition: color .15s, border-color .15s; } .rm-close:hover { color: var(--text); border-color: var(--muted); } .rm-done { padding: 60px 20px; } .rm-done .rm-name { font-size: 30px; margin-bottom: 10px; } .rm-done p { color: var(--muted); font-size: 14px; } /* ── FOOTER ── */ .ft { border-top: 1px solid var(--border); padding: 34px 0 60px; text-align: center; color: var(--muted); font-size: 12.5px; } .ft em { font-family: 'Fraunces', Georgia, serif; color: var(--accent); font-size: 14px; } /* ── RESPONSIVE ── */ @media (max-width: 1000px) { .drop-grid, .feed-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; } .drop-card { min-height: 230px; } .drop-card.feature { grid-column: 1 / -1; grid-row: auto; min-height: 340px; } .drop-card.wide { grid-column: 1 / -1; } .wl-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .wrap { padding: 0 14px; } /* hero */ .drop { padding: 30px 0 26px; } .drop-grid, .feed-grid { grid-template-columns: 1fr; gap: 12px; } .drop-card { min-height: 0; } .drop-card.feature { grid-column: auto; min-height: 0; } .drop-card.wide { grid-column: auto; } .drop-card .drop-img { aspect-ratio: 4/3; position: relative; } .drop-card.feature .drop-img { aspect-ratio: 1/1; } .drop-card img { position: absolute; inset: 0; } .drop-card.feature .dm-name { font-size: 21px; } .drop-meta { padding: 14px 16px; } .drop-card.feature .drop-meta { padding: 18px; } .btn-gold { width: 100%; padding: 14px; font-size: 15px; } /* feed */ .day-group { padding-top: 40px; margin-bottom: 0; } .day-name { font-size: 19px; } .day-sub { font-size: 10.5px; } /* bigger touch targets for footer votes */ .wvotes { gap: 5px; } .wvotes .vbtn-sm { width: 34px; height: 34px; } .wvotes .vbtn-sm svg { width: 15px; height: 15px; } /* wishlist */ .wl { padding: 6px 0 44px; } .wl-title { font-size: 22px; } .wl-card { padding: 13px; gap: 13px; } .wl-thumb { width: 62px; height: 62px; } /* rate mode */ .rm-stage { width: 100vw; padding: 0 16px; } .rm-card { border-radius: 16px; } .rm-img { aspect-ratio: auto; height: min(50vh, 92vw); } .rm-body { padding: 16px 18px 18px; } .rm-name { font-size: 20px; } .rm-actions { margin-top: 18px; gap: 24px; } .rm-btn { width: 60px; height: 60px; } .rm-keys { display: none; } .rm-close { top: max(14px, env(safe-area-inset-top)); right: 16px; } .ft { padding: 24px 0 44px; font-size: 11.5px; } } @media (max-width: 400px) { .drop-grid, .feed-grid { grid-template-columns: 1fr; } } /* ── INLINE COUNTDOWN (hero, single line) ── */ .cd-inline { font-family: 'Fraunces', Georgia, serif; font-size: 16px; color: var(--accent-bright); font-variant-numeric: tabular-nums; font-weight: 500; } .cd-inline span { color: var(--muted); font-size: 12px; } /* ── RATE MODE: watch + brand info ── */ .rm-stage { max-height: 94vh; overflow-y: auto; scrollbar-width: none; } .rm-img { aspect-ratio: 4/3; } .rm-info { margin-top: 16px; text-align: left; display: grid; gap: 12px; border-top: 1px solid var(--border); padding-top: 16px; } .rm-info-label { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; } .rm-info-block p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0; } /* "About the brand" reused inside the watch detail popup — match the "about the watch" blurb text styling (.detail-blurb) so the two read the same. */ .detail-brand-info { margin-top: 4px; padding-top: 18px; } .detail-brand-info .rm-info-block p { font-size: 14px; line-height: 1.7; color: var(--text); opacity: .85; } /* ── RATE MODE: done screen actions ── */ .rm-done { padding: 40px 28px 32px; } .rm-done-sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; } .rm-done-actions { display: grid; gap: 10px; text-align: left; } .rm-done-btn { display: flex; align-items: center; gap: 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px; color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s, background .15s; } .rm-done-btn:hover { border-color: var(--accent); transform: translateX(3px); } .rm-done-btn .rdb-icon { font-size: 20px; width: 28px; text-align: center; flex: none; } .rm-done-btn b { display: block; font-size: 14px; font-weight: 600; } .rm-done-btn small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; } /* ── RATE MODE: side-by-side on wide viewports ── */ @media (min-width: 900px) { .rm-stage { width: min(880px, 92vw); } .rm-card:not(.rm-done) { display: flex; align-items: stretch; text-align: left; } .rm-card:not(.rm-done) .rm-img { width: 50%; flex: none; aspect-ratio: auto; min-height: 440px; } .rm-card:not(.rm-done) .rm-img img { height: 100%; } .rm-card:not(.rm-done) .rm-body { width: 50%; flex: none; padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; } } /* ── RATE MODE: brand heart, price range, brand link ── */ .rm-brand { display: flex; align-items: center; gap: 8px; } .brand-heart { width: 22px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; transition: color .15s, transform .15s; } .brand-heart svg { width: 14px; height: 14px; fill: none; } .brand-heart:hover { color: var(--accent-bright); transform: scale(1.2); } .brand-heart.on { color: var(--accent-bright); } .brand-heart.on svg { fill: currentColor; } .rm-brand-range { font-size: 12px; color: var(--text); margin-top: 8px; font-weight: 500; } .rm-brand-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--accent-bright); text-decoration: none; transition: color .15s; } .rm-brand-link:hover { color: var(--text); } .rm-brand-link svg { width: 12px; height: 12px; } /* ── RATE MODE: readability + brand link inline with label ── */ /* #b9b7c1 on --surface #141417 ≈ 8.6:1 (WCAG AA/AAA for body text) */ .rm-info-block p { color: #b9b7c1; } .rm-brand-range { color: #b9b7c1; font-weight: 400; } .rm-info-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .rm-info-label .rm-brand-link { margin-top: 0; text-transform: none; letter-spacing: 0; font-size: 12px; } /* ── PROFILE PAGE ── */ .pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; } @media (max-width: 800px) { .pf-grid { grid-template-columns: 1fr; } } .pf-card { background: var(--card-grad); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 24px 26px; display: flex; flex-direction: column; } .pf-account-name { font-size: 18px; font-weight: 700; color: var(--text); margin-top: 6px; } .pf-account-email { color: var(--muted); margin-top: 4px; } .pf-logout { margin-top: 18px; align-self: flex-start; } .pf-verify { margin-top: 12px; font-size: 13px; } .pf-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; } .pf-badge.ok { background: rgba(52,211,153,.13); color: var(--green); } .pf-badge.warn { background: rgba(248,113,113,.13); color: var(--red); } .pf-verify a { color: var(--accent-bright); margin-left: 8px; font-size: 12px; } .pf-input { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 14px; margin-top: 8px; font-family: inherit; } .pf-input:focus { outline: none; border-color: var(--accent-soft); box-shadow: var(--ring); } .pf-row-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; } /* Passkeys list */ .pf-passkey-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .pf-passkey-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; } .pf-passkey-name { font-size: 13.5px; color: var(--text); } .pf-passkey-del { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; transition: all .15s; white-space: nowrap; } .pf-passkey-del:hover { border-color: var(--red); color: var(--red); } .pf-likes-text { width:100%; min-height:180px; resize:vertical; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius); padding:13px 14px; font:inherit; line-height:1.6; color:var(--text); box-sizing:border-box; } .pf-likes-text:focus { outline:none; border-color:var(--accent-soft); box-shadow: var(--ring); } .pf-likes-actions { display:flex; align-items:center; gap:10px; margin-top:14px; } .pf-likes-edit-actions { display:flex; gap:8px; } .pf-likes-edit-actions[hidden] { display:none; } .btn-ghost:disabled { opacity:0.6; cursor:default; } .pf-label { font-family: 'Fraunces', Georgia, serif; font-size: 20px; margin-bottom: 6px; } .pf-help { color: #b9b7c1; font-size: 13px; line-height: 1.55; margin-bottom: 20px; } .pf-price { margin-bottom: 16px; } .pf-amount { font-family: 'Fraunces', Georgia, serif; font-size: 28px; color: var(--accent-bright); display: block; margin-bottom: 10px; font-variant-numeric: tabular-nums; } .pf-range, #pf-range { width: 100%; accent-color: var(--accent); height: 4px; cursor: pointer; } .pf-marks { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 6px; } .pf-toggle { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #b9b7c1; margin: 18px 0 22px; cursor: pointer; } .pf-toggle input { accent-color: var(--accent); width: 16px; height: 16px; } .pf-saved { margin-left: 14px; color: var(--green); font-size: 13px; font-weight: 600; } .pf-taste .pf-muted, .pf-muted { color: var(--muted); } /* "What you like" — short rich-text taste summary */ .pf-taste-summary { font-size: 14px; line-height: 1.6; color: var(--text); margin: 0 0 12px; } .pf-taste-dims { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .pf-taste-dims li { font-size: 13.5px; line-height: 1.5; color: #c7c5cf; padding-left: 14px; position: relative; } .pf-taste-dims li::before { content: "·"; position: absolute; left: 3px; color: var(--accent); font-weight: 700; } .pf-taste-dims strong { color: var(--accent); font-weight: 600; } .pf-stat-row { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; } .pf-stat b { font-family: 'Fraunces', Georgia, serif; font-size: 26px; color: var(--accent-bright); display: block; } .pf-stat span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .pf-zone { font-size: 14px; color: var(--text); padding: 14px 0; border-top: 1px solid var(--border); } .pf-block { margin-top: 18px; } .pf-mini { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .pf-chips { display: flex; flex-wrap: wrap; gap: 8px; } .pf-chip { background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px; font-size: 12.5px; color: #d8d6dd; } .pf-chip.on { border-color: var(--accent); color: var(--accent-bright); } .pf-chip em { color: var(--muted); font-style: normal; font-size: 11px; } /* keep classic Wishlist table rank cells from inheriting the demo podium badge */ #page-wishlist .wl-rank { position: static; width: auto; height: auto; border-radius: 0; display: table-cell; font-family: inherit; font-size: inherit; background: transparent; border: 0; color: var(--muted); } #page-wishlist .wishlist-table .wl-rank { text-align: center; } /* ── FLASH BANNER (under sub-nav) ── */ .flash-banner { display: flex; align-items: center; gap: 12px; background: rgba(52,211,153,.10); border: 1px solid rgba(52,211,153,.32); color: #aef0d3; padding: 11px 18px; border-radius: 10px; margin: 14px 0 24px; font-size: 14px; } .flash-banner[hidden] { display: none !important; } .flash-banner .fb-ico { background: var(--green); color: #062017; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; } .flash-banner .fb-close { margin-left: auto; background: none; border: none; color: #aef0d3; font-size: 20px; cursor: pointer; line-height: 1; opacity: .7; } .flash-banner .fb-close:hover { opacity: 1; } /* ── PROFILE: compact save button, account links, modals ── */ .btn-compact { padding: 7px 18px; font-size: 13px; } .pf-account-links { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); } .pf-link { color: var(--accent-bright); font-size: 14px; text-decoration: none; padding: 4px 0; } .pf-link:hover { color: var(--text); } .pf-modal { position: fixed; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 1000; } .pf-modal[hidden] { display: none; } .pf-modal-box { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--accent-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); padding: 28px 30px; width: min(420px, 92vw); position: relative; } .pf-modal-box h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 22px; margin: 0 0 16px; color: var(--text); } .pf-modal-x { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; } .pf-modal-x:hover { color: var(--text); } /* ── RATE MODE: prior-selection banner and wish-on state ── */ .rm-prior { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; margin: 0 auto 14px; width: fit-content; } .rm-prior span { font-size: 14px; } .rm-prior-like { background: rgba(52,211,153,.14); color: var(--green); border: 1px solid rgba(52,211,153,.32); } .rm-prior-pass { background: rgba(248,113,113,.14); color: var(--red); border: 1px solid rgba(248,113,113,.32); } .rm-prior-wish { background: rgba(201,169,110,.14); color: var(--accent-bright); border: 1px solid rgba(201,169,110,.32); } .rm-btn.wish.on { color: var(--accent-bright); border-color: var(--accent); background: rgba(201,169,110,.1); } /* ── REVIEW QUEUE ── */ .review-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--accent); color: #15120b; font-size: 11px; font-weight: 700; vertical-align: middle; } .review-badge[hidden] { display: none; } #review-list { display: flex; flex-direction: column; gap: 28px; max-width: 1080px; } /* Pending brand = the site preview */ .rv-brand { background: var(--card-grad); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; transition: opacity .2s; } .rv-brand-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 24px; border-bottom: 1px solid var(--border); } .rv-brand-info { min-width: 0; } .rv-brand-name { font-family: 'Fraunces', Georgia, serif; font-size: 26px; color: var(--text); } .rv-brand-meta { font-size: 12.5px; color: var(--muted); margin-top: 5px; } .rv-site { color: var(--accent-bright); text-decoration: none; } .rv-site:hover { text-decoration: underline; } .rv-missing { color: var(--red); opacity: .8; } .rv-brand-desc { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 12px 0 0; max-width: 68ch; } .rv-brand-desc.rv-missing { color: var(--red); } .rv-brand-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .rv-count { font-size: 12px; color: var(--muted); margin-right: 4px; white-space: nowrap; } .rv-held { color: #f0b429; } .rv-btn { border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text); transition: transform .12s, background .15s, border-color .15s, color .15s; white-space: nowrap; } .rv-btn:hover { transform: translateY(-1px); } .rv-btn.approve { background: var(--accent); color: #15120b; border-color: var(--accent); } .rv-btn.reject:hover { color: var(--red); border-color: var(--red); } .rv-btn.duplicate { color: var(--muted); } .rv-btn.duplicate:hover { color: var(--red); border-color: var(--red); } /* Full captured-spec table (review card + watch detail panel). */ .specs-grid { margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size: 12.5px; } .specs-grid .spec-row { display: grid; grid-template-columns: 40% 60%; background: var(--surface); } /* min-width:0 stops grid items defaulting to content-width and letting a long label ("Strap/bracelet") spill across into the value column on narrow cards. */ .specs-grid dt { padding: 5px 9px; color: var(--muted); margin: 0; min-width: 0; overflow-wrap: anywhere; } .specs-grid dd { padding: 5px 9px; margin: 0; color: var(--text); min-width: 0; overflow-wrap: anywhere; } .detail-body .specs-grid { margin-top: 14px; } /* Watches grid */ .rv-watch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; padding: 22px 24px; } .rv-watch { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .rv-watch-img { aspect-ratio: 1/1; background: var(--surface); display: flex; align-items: center; justify-content: center; } .rv-watch-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; } .rv-watch-img.rv-noimg::after { content: 'no image'; color: var(--muted); font-size: 11px; } .rv-watch-body { padding: 11px 13px 13px; } .rv-watch-name { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.3; } .rv-watch-price { font-size: 13px; color: var(--accent-bright); font-weight: 600; margin-top: 4px; } .rv-watch-specs { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: 12px; color: var(--muted); margin-top: 5px; } .rv-watch-specs .rv-spec-sep { opacity: .5; } .rv-watch-specs.incomplete { color: #f0b429; } .rv-spec-warn { color: #f0b429; font-size: 13px; } .rv-spec-missing { color: var(--red); font-weight: 600; } .rv-watch-blocked { display: inline-block; margin-top: 5px; font-size: 11px; font-weight: 600; color: var(--red); background: rgba(220, 38, 38, .1); border: 1px solid rgba(220, 38, 38, .35); border-radius: 4px; padding: 1px 6px; } .rv-watch-about { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 7px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rv-watch-link { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--accent-bright); text-decoration: none; } .rv-watch-link:hover { text-decoration: underline; } .rv-nowatch { color: var(--muted); font-size: 13px; padding: 4px; grid-column: 1 / -1; } .rv-empty { color: var(--muted); font-size: 14px; padding: 32px 4px; } /* Flagging */ .rv-watch { position: relative; } .rv-flag-btn { border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--muted); transition: transform .12s, color .15s, border-color .15s; white-space: nowrap; } /* Open (form showing) and flagged (a flag was saved) are real, class-based states — not :hover, which sticks on touch then clears while typing. */ .rv-flag-btn.active, .rv-flag-btn.flagged { color: #f0b429; border-color: #f0b429; } /* NB: NO backdrop-filter here. These buttons render once PER WATCH CARD, so on a long review queue (hundreds of cards) they created hundreds of compositing layers, each re-sampling the animated ambient wash every frame — which crashed mobile Safari. A near-opaque solid background reads fine over the thumbnail. */ .rv-watch-flag { position: absolute; top: 8px; right: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; border: 1px solid var(--border); background: rgba(14,14,18,.9); color: var(--muted); font-size: 13px; display: grid; place-items: center; transition: color .15s, border-color .15s, background .15s; } .rv-watch-flag.active, .rv-watch-flag.flagged { color: #f0b429; border-color: #f0b429; background: rgba(14,14,18,.95); } /* Delete-duplicate button, mirrored top-left of the flag button. */ .rv-watch-del { position: absolute; top: 8px; left: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; border: 1px solid var(--border); background: rgba(14,14,18,.9); color: var(--muted); font-size: 13px; display: grid; place-items: center; transition: color .15s, border-color .15s, background .15s; } /* Hover feedback only on real pointer devices (see rate-button note above). */ @media (hover: hover) { .rv-flag-btn:hover { transform: translateY(-1px); color: #f0b429; border-color: #f0b429; } .rv-watch-flag:hover { color: #f0b429; border-color: #f0b429; background: rgba(10,10,12,.85); } .rv-watch-del:hover { color: var(--red); border-color: var(--red); background: rgba(10,10,12,.85); } } .rv-flagform { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; } .rv-flagform[hidden] { display: none; } .rv-flag-input { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 13px; resize: vertical; } .rv-flag-input:focus { outline: none; border-color: var(--accent); } .rv-flagform-actions { display: flex; gap: 8px; } .rv-btn.ghost { color: var(--muted); } .rv-btn.flag { background: #f0b429; color: #15120b; border-color: #f0b429; } .rv-flags { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .rv-flag { font-size: 12.5px; line-height: 1.45; color: #f0c869; background: rgba(240,180,41,.10); border: 1px solid rgba(240,180,41,.28); border-radius: 7px; padding: 6px 10px; display: flex; align-items: center; gap: 8px 10px; justify-content: space-between; flex-wrap: wrap; } .rv-flag .rv-flag-txt { flex: 1 1 auto; min-width: 0; } .rv-flag.resolved { color: var(--muted); background: rgba(120,120,130,.08); border-color: var(--border); } .rv-flag.resolved .rv-flag-txt { text-decoration: line-through; opacity: .75; } .rv-flag-toggle { flex-shrink: 0; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; border: 1px solid rgba(240,180,41,.4); background: transparent; color: #f0c869; border-radius: 5px; padding: 2px 8px; } .rv-flag.resolved .rv-flag-toggle { color: var(--muted); border-color: var(--border); } .rv-flag-toggle:hover { color: var(--text); } /* Pending / Rejected switcher */ .rv-modes { display: flex; gap: 8px; margin-bottom: 20px; } .rv-mode { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; transition: color .15s, border-color .15s, background .15s; } .rv-mode.on { color: var(--text); border-color: var(--accent); background: rgba(201,169,110,.10); } .rv-mode-n { color: var(--muted); font-weight: 700; margin-left: 4px; } .rv-mode.on .rv-mode-n { color: var(--accent-bright); } .rv-btn.requeue { background: var(--accent); color: #15120b; border-color: var(--accent); } .rv-brand.rv-rejected { opacity: .92; } .rv-brand.rv-rejected .rv-brand-name::after { content: 'rejected'; font-family: inherit; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--red); background: rgba(239,68,68,.12); border-radius: 4px; padding: 2px 6px; margin-left: 10px; vertical-align: middle; } /* On narrow screens the brand header's action row can't sit beside the info without squeezing the text column to ~0 width (one word per line) and overlapping the title. Stack the actions below the info and let them wrap. */ @media (max-width: 640px) { .rv-brand-head { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; } .rv-brand-actions { flex-wrap: wrap; justify-content: flex-start; } .rv-watch-grid { padding: 18px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } /* ── iOS focus-zoom guard ────────────────────────────────────────────────── iOS Safari zooms the whole page when a form control with font-size < 16px is focused — and once zoomed you can pan/scroll sideways past the viewport (the reported "zoom in then scroll horizontally" bug). Force every focusable control to 16px at mobile widths. We deliberately do NOT disable pinch-zoom via the viewport meta (user-scalable=no / maximum-scale=1) — that's an a11y anti-pattern. Listed after the base rules so equal-specificity class selectors win by order. */ @media (max-width: 720px) { input, textarea, select, .filter-search, .brands-search, .sort-select, .pf-input, .rv-flag-input, .form-row input, .form-row select, .form-row textarea, .auth-form input { font-size: 16px; } } /* ── METRICS DASHBOARD ───────────────────────────────────────────────────── Dense admin data surface. Deliberately FLAT + OPAQUE: no backdrop-filter / var(--blur) on any of these repeated tiles/cards (that crashed mobile Safari on long lists). Palette + type come from tokens.css to match the restyle. */ .metrics-modes { margin-bottom: 22px; } .metrics-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; } .metrics-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; } .metrics-tile-value { font-family: var(--font-serif); font-size: 30px; font-weight: 500; line-height: 1.05; color: var(--text); } .metrics-tile-label { margin-top: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .metrics-tile-sub { margin-top: 4px; font-size: 12px; color: var(--accent); font-weight: 600; } .metrics-charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 30px; } .metrics-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px 12px; } .metrics-card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; gap: 8px; } .metrics-card-title { font-size: 13px; font-weight: 600; color: var(--text); } .metrics-card-total { font-size: 15px; font-weight: 700; color: var(--accent-bright); white-space: nowrap; } .metrics-card-total-sub { font-size: 11px; font-weight: 500; color: var(--muted-2); } .metrics-chart { display: block; width: 100%; height: 60px; } .metrics-bar { fill: var(--accent); } .metrics-card:hover .metrics-bar { fill: var(--accent-bright); } .metrics-section-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 12px; } .metrics-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .metrics-table { width: 100%; border-collapse: collapse; font-size: 14px; } .metrics-table thead th { text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); padding: 0 12px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } .metrics-table th.num, .metrics-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .metrics-table tbody td { padding: 12px; border-bottom: 1px solid var(--border-soft, var(--border)); color: var(--text); } .metrics-table tbody tr:last-child td { border-bottom: none; } .metrics-u-who { display: flex; flex-direction: column; gap: 2px; } .metrics-u-name { font-weight: 600; } .metrics-u-email { font-size: 12px; color: var(--muted-2); } .metrics-u-date { color: var(--muted); white-space: nowrap; } .metrics-u-total { font-weight: 700; color: var(--accent-bright); } .metrics-u-empty { color: var(--muted); padding: 24px 12px; text-align: center; } .metrics-foot { margin-top: 16px; font-size: 12px; color: var(--muted-2); } @media (max-width: 720px) { .metrics-tiles { grid-template-columns: repeat(2, 1fr); } .metrics-charts { grid-template-columns: 1fr; } .metrics-tile-value { font-size: 26px; } }