/* JL Price Tracker — Linear/Vercel-inspired, lightweight. */ @font-face { font-family: 'Inter var'; src: url('/fonts/inter-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; } /* ---------- Tokens ---------- */ :root { --bg: #fafafa; --surface: #ffffff; --surface-2: #f4f4f5; --border: #e4e4e7; --border-strong: #d4d4d8; --text: #18181b; --text-2: #52525b; --text-3: #a1a1aa; --good: #067a3d; --good-soft: rgba(6, 122, 61, 0.1); --bad: #b42318; --bad-soft: rgba(180, 35, 24, 0.08); /* Flat-leaning design: the only elevation shadow left is for elements that genuinely float over other content (dropdown menus, the drag ghost). Everything else separates with borders, scrims and backdrop blur. */ --shadow-float: 0 4px 24px rgba(0,0,0,.08); --radius: 10px; --ease: cubic-bezier(.25,.75,.5,1); /* Type scale — every font-size in the app comes from this ramp: xs 11px status pills, kbd hints sm 12px field labels, captions, small meta md 13px buttons, secondary text, dropdown options base 14px body copy, inputs, card titles lg 16px modal & section headings xl 18px page/product titles 2xl 22px prices Weights: 400 body · 500 labels/buttons · 600 headings/prices/emphasis. */ --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --accent: #0070f3; --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent); /* Card image scrim + overlaid text: fades to the surface tone of whichever theme is active, so cards read as part of the page in light AND dark. */ --card-scrim-strong: color-mix(in srgb, var(--surface) 97%, transparent); --card-scrim-mid: color-mix(in srgb, var(--surface) 75%, transparent); --card-scrim-weak: color-mix(in srgb, var(--surface) 18%, transparent); --card-text: var(--text); --card-text-2: var(--text-2); --card-text-shadow: 0 1px 3px rgba(255,255,255,.6); color-scheme: light; } /* Dark theme. The attribute is set by an inline script in (before first paint) from the saved preference — System / Light / Dark, chosen in Settings — so there's no media query here; "System" is resolved to light/dark in JS, which also tracks live OS changes. */ :root[data-theme="dark"] { --bg: #0e0e11; --surface: #17171b; --surface-2: #222227; --border: #2a2a30; --border-strong: #3b3b43; --text: #f4f4f5; --text-2: #a1a1aa; --text-3: #6b6b74; --good: #40bf78; --good-soft: rgba(64, 191, 120, 0.14); --bad: #f0655a; --bad-soft: rgba(240, 101, 90, 0.12); --accent: #3b82f6; --shadow-float: 0 4px 24px rgba(0,0,0,.5); --card-text-shadow: 0 1px 3px rgba(0,0,0,.55); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Inter var', -apple-system, 'Segoe UI', sans-serif; font-size: var(--fs-base); line-height: 1.5; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; } .hidden { display: none !important; } .muted { color: var(--text-2); } .error { color: var(--bad); font-size: var(--fs-md); margin: 8px 0 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font: inherit; font-weight: 500; font-size: var(--fs-md); padding: 7px 14px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .15s var(--ease), opacity .15s var(--ease); user-select: none; } .btn:active { transform: scale(.98); } .btn[disabled] { opacity: .5; cursor: default; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--text); color: var(--bg); } .btn-primary:hover:not([disabled]) { background: color-mix(in srgb, var(--text) 85%, var(--bg)); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover:not([disabled]) { border-color: var(--text-3); } .btn-secondary:active { background: var(--surface-2); } /* Ghost = quieter than secondary, but still visibly a button: hairline border rather than the stronger secondary one. Never borderless text. */ .btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } .btn-icon { padding: 6px 9px; background: transparent; color: var(--text-3); border-radius: 7px; } .btn-icon:hover { background: var(--surface-2); color: var(--text); } .btn-block { width: 100%; justify-content: center; padding: 9px; } .btn-danger { color: var(--bad); } .btn-secondary.btn-danger { border-color: color-mix(in srgb, var(--bad) 30%, transparent); } .btn-secondary.btn-danger:hover:not([disabled]) { border-color: var(--bad); background: var(--bad-soft); } .btn .spin { animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Lock screen ---------- */ .lock { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; } .lock-card { width: 340px; max-width: 100%; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 36px 28px; animation: rise .25s var(--ease); } .lock-logo { font-size: 30px; margin-bottom: 6px; } .lock-card h1 { font-size: var(--fs-xl); font-weight: 600; margin: 0 0 2px; letter-spacing: -0.01em; } .lock-card p { margin: 0 0 20px; font-size: var(--fs-md); } .lock-card input { width: 100%; margin-bottom: 10px; text-align: center; } /* ---------- Top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: transparent; border-bottom: 1px solid transparent; transition: background .2s var(--ease), border-color .2s var(--ease); } .topbar.scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent); } .brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-base); letter-spacing: -0.01em; white-space: nowrap; } .brand-mark { font-size: 17px; } .topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; } .topbar-search { position: relative; display: flex; align-items: center; flex: 0 1 300px; min-width: 120px; margin-left: 6px; } .topbar-search .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } .topbar-search #searchInput { width: 100%; font: inherit; font-size: var(--fs-md); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 30px 6px 34px; outline: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .topbar-search input:hover { border-color: var(--border-strong); } .topbar-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .search-kbd { position: absolute; right: 8px; pointer-events: none; font-family: inherit; font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; line-height: 1.4; } .topbar-search input:focus ~ .search-kbd { opacity: 0; } .search-clear { position: absolute; right: 6px; border: 0; background: transparent; color: var(--text-3); display: inline-flex; align-items: center; cursor: pointer; padding: 4px 6px; border-radius: 5px; } .search-clear:hover { background: var(--surface-2); color: var(--text); } /* ---------- Layout ---------- */ .main { max-width: 1600px; margin: 0 auto; padding: 24px 20px 60px; } .board { display: flex; flex-direction: column; gap: 8px; } .grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } /* ---------- Cards ---------- */ /* The product photo is the card's full background — every edge touches the image, with title/price/status overlaid on top via the scrim + blur. */ .card { /* Narrower column (280px min) at roughly the same rendered height as the old 310px/16:11 card — hence the squarer 4:3 ratio. */ position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; transition: border-color .15s var(--ease), opacity .18s var(--ease); animation: rise .3s var(--ease) backwards; cursor: default; -webkit-touch-callout: none; } .card:hover { border-color: var(--border-strong); } .card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .card.leaving { animation: card-out .18s var(--ease) forwards; } @keyframes card-out { to { opacity: 0; transform: scale(.96); } } .card-img { position: absolute; inset: 0; width: 100%; height: 100%; /* Y above 50% crops more off the top than the bottom, which shifts centered content up within the frame — so the title/price scrim overlaid on the bottom of the card covers less of the product photo. */ object-fit: cover; object-position: 50% 58%; display: block; transition: transform .4s var(--ease), opacity .3s var(--ease); } /* Held invisible until the bitmap has actually loaded (see fadeInWhenLoaded) so images fade in rather than popping when the network delivers. */ .card-img.img-pending { opacity: 0; } .card-img-empty { background: linear-gradient(135deg, var(--surface-2), var(--border)); } .card:hover .card-img { transform: scale(1.045); } /* Desktop (hover-capable, multi-column grid): rest the photos at half strength so the grid reads calmer — the card's --surface-2 backing shows through, which tones the image toward the page in both themes. Hovering a card fades its photo back to full. Kept off touch/mobile, where there's no hover to recover the image. The .img-pending rule is restated after the hover rule so a still-loading image stays fully hidden even under hover. */ @media (hover: hover) and (min-width: 561px) { .card-img { opacity: .5; } .card:hover .card-img, .card:focus-visible .card-img { opacity: 1; } .card-img.img-pending { opacity: 0; } } /* Progressive blur behind the overlaid title/price, on top of the color scrim. */ .card-banner-blur { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); mask-image: linear-gradient(to bottom, transparent, black 75%); -webkit-mask-image: linear-gradient(to bottom, transparent, black 75%); pointer-events: none; } .card-banner-scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--card-scrim-strong) 0%, var(--card-scrim-strong) 18%, var(--card-scrim-mid) 40%, transparent 72%); pointer-events: none; } .card-banner-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px 11px; display: flex; flex-direction: column; gap: 4px; } .card-title { font-weight: 600; font-size: var(--fs-base); letter-spacing: -0.005em; line-height: 1.3; color: var(--card-text); text-shadow: var(--card-text-shadow); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .price-now { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--card-text); text-shadow: var(--card-text-shadow); } .price-was { font-size: var(--fs-md); color: var(--card-text-2); text-decoration: line-through; font-variant-numeric: tabular-nums; } .price-unavailable { font-size: var(--fs-base); color: var(--card-text-2); font-weight: 500; } .card-pills { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 6px; } /* Frosted surface pills (same glass treatment as the neutral status pill and the edit modal's floating close button) with the semantic color carried by the text — sits on the photo without the heavy solid-fill look. */ .pct-pill, .low-pill { font-size: var(--fs-xs); font-weight: 600; padding: 2.5px 9px; border-radius: 20px; font-variant-numeric: tabular-nums; letter-spacing: .01em; background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } .pct-pill { color: var(--good); } .low-pill { color: var(--accent); } /* Stock · last-checked pills, on one line, wrapping hidden if too long. */ .card-status-line { display: flex; align-items: center; gap: 5px; margin-top: 2px; overflow: hidden; } /* ---------- Status pills (stock / checked-ago) — shared by cards + the product detail modal. ---------- */ .status-pill { display: inline-flex; align-items: center; flex: none; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em; padding: 2.5px 8px; border-radius: 20px; white-space: nowrap; font-variant-numeric: tabular-nums; } .status-pill.good { background: var(--good-soft); color: var(--good); } .status-pill.bad { background: var(--bad-soft); color: var(--bad); } .status-pill.neutral { background: var(--surface-2); color: var(--text-2); } .card-status-line .status-pill.neutral { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--card-text-2); } /* Soften pure-white photo backgrounds against the dark grid. */ [data-theme="dark"] .card-img { filter: brightness(.88); } /* ---------- Drag & drop ---------- */ body.dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; } body.dragging * { cursor: grabbing !important; } .drag-ghost { position: fixed; z-index: 100; pointer-events: none; box-shadow: var(--shadow-float); opacity: .95; transform: scale(1.02) rotate(.6deg); transition: none; animation: none; } .drag-source { opacity: .35; } .drag-source, .drag-source * { pointer-events: none; } .flip-move { transition: transform .18s var(--ease); } /* ---------- Empty, skeleton & no-results ---------- */ .empty { text-align: center; padding: 72px 20px; animation: rise .3s var(--ease); } .empty-art { margin-bottom: 14px; } .empty h2 { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; } .empty p { margin: 0 0 20px; } .sk { position: relative; overflow: hidden; border-radius: 6px; background: var(--surface-2); } .sk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, color-mix(in srgb, var(--text) 5%, transparent) 50%, transparent 60%); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; } @keyframes shimmer { to { background-position: -200% 0; } } .sk-banner { position: absolute; inset: 0; border-radius: 0; } .no-results { text-align: center; padding: 64px 20px; color: var(--text-2); animation: rise .25s var(--ease); } .no-results .search-icon-big { color: var(--text-3); margin-bottom: 10px; } .no-results h2 { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 4px; color: var(--text); } .no-results p { margin: 0 0 16px; font-size: var(--fs-md); } /* ---------- Modals ---------- */ .modal { /* Explicit fixed positioning, pinned to the viewport regardless of page scroll — mobile Safari's