/* ═══════════════════════════════════════════════════════════════════════════ LotLifter LIGHT THEME — the ONE token system for the app-wide light rollout. ARCHITECTURE (traced 2026-07-28): 31 screens each embed an IDENTICAL dark-navy :root block (--bg/--surface/--border/--text/--muted/--accent2/status colors); 3 legacy screens use screens.css. Because every page already speaks the SAME variable names, this file redefines those names with light values — rolling a page = this file, delete the page's own :root, and touch up hardcoded gradients/rgba(255,…) leftovers. The nav.js sidebar stays dark by design. PALETTE — "workshop control panel" (approved on station-setup): paper base, ink text, cobalt primary, warm hairlines, role-tinted washes. TYPE — Space Grotesk (display) · Inter (UI) · JetBrains Mono (codes/links); pages load them via the shared Google-Fonts link (see any converted page). ═══════════════════════════════════════════════════════════════════════════ */ :root { /* base — THREE-LAYER DEPTH: bg (deepest) < inner elements (--surface2) < cards (white). The page is a shade darker than the card, the card lifts white with shadow, and the bubbles INSIDE a card sit on --surface2 so they read as their own layer. */ --bg: #edeae3; /* warm paper page background — layer 0 (deepest) */ --surface: #ffffff; /* cards / panels — layer 1 (lifted, white) */ --surface2:#f6f3ec; /* rows/bubbles INSIDE a card — layer 2 (recessed) */ --border: #e4ded3; /* hairlines */ --border2: #d3cabb; /* stronger hairlines / input borders */ --text: #191c21; /* ink — primary text */ --text2: #4a4f58; /* secondary text */ --muted: #8a8478; /* warm gray — labels, metas */ /* VIVID status hues — the "lit-up" badge colors (brighter than the muted text tones) */ --v-green:#0ba84f; --v-emerald:#059669; --v-blue:#2e64e6; --v-purple:#8b34e0; --v-amber:#e08b00; --v-red:#e5304c; --v-teal:#0d9488; --v-orange:#f0640a; /* accent (primary actions, links, selection) */ --accent2: #2d5be9; /* cobalt (name kept from the dark theme so var users just work) */ --accent-deep: #2148c9; --accent-wash: #eef2fe; /* status / role colors — pill text on wash bg with line border */ --green: #177245; --green-wash:#e4f5eb; --green-line:#bfe5cd; --red: #c03511; --red-wash: #fdeee7; --red-line: #f3c9b4; --yellow: #9a6b15; --yellow-wash:#fdf1d6; --yellow-line:#efd9a4; --orange: #b4530a; --orange-wash:#fff3e8; --orange-line:#f3c9a0; --purple: #6d3fd4; --purple-wash:#f1ecfe; --purple-line:#dcd0f6; --teal: #0f766e; --teal-wash: #e0f2f0; --teal-line: #b8e0dc; --blue: #2456c4; --blue-wash: #e8efff; --blue-line: #c6d6f7; /* depth — cards must clearly LIFT off the deeper page */ --sh-sm: 0 1px 2px rgba(25,20,10,.06); --sh-md: 0 1px 3px rgba(25,20,10,.07), 0 12px 32px -10px rgba(25,20,10,.14); --sh-lg: 0 2px 5px rgba(25,20,10,.08), 0 20px 48px -14px rgba(25,20,10,.20); /* type */ --font-ui: 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-display: 'Space Grotesk',var(--font-ui); --font-mono: 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; } /* ── base primitives every converted page shares ───────────────────────────── */ *,*::before,*::after { box-sizing:border-box; } body.ll-light { margin:0; background: radial-gradient(1100px 480px at 78% -140px, #ffffff 0%, transparent 70%), var(--bg); min-height:100vh; color:var(--text); font-family:var(--font-ui); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; } .ll-light .card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px; box-shadow:var(--sh-md); } .ll-light .card-title, .ll-light h3.eyebrow { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.11em; margin:0 0 12px; } .ll-light .pg-eyebrow { font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2); margin-bottom:8px; } .ll-light .pg-title { font-family:var(--font-display); font-size:30px; font-weight:700; letter-spacing:-.02em; color:var(--text); margin:0; } .ll-light .pg-sub { font-size:13.5px; color:var(--text2); margin:6px 0 26px; max-width:640px; } .ll-light .muted { color:var(--text2); font-size:13px; } .ll-light input[type=text], .ll-light input[type=number], .ll-light input[type=password], .ll-light select, .ll-light textarea { padding:10px 12px; background:#fbfaf7; border:1px solid var(--border2); border-radius:10px; color:var(--text); font-size:14px; font-family:inherit; transition:border-color .15s, box-shadow .15s; } .ll-light input:focus, .ll-light select:focus, .ll-light textarea:focus { outline:none; border-color:var(--accent2); background:#fff; box-shadow:0 0 0 3.5px rgba(45,91,233,.14); } .ll-light .btn, .ll-light button.primary { padding:10px 17px; border:none; border-radius:10px; font-size:13.5px; font-weight:700; cursor:pointer; color:#fff; font-family:var(--font-ui); letter-spacing:.01em; background:linear-gradient(180deg,var(--accent2),var(--accent-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px rgba(41,72,201,.35); transition:transform .12s, box-shadow .12s; } .ll-light .btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 5px 14px rgba(41,72,201,.4); } .ll-light .btn:active:not(:disabled) { transform:translateY(0); box-shadow:inset 0 2px 4px rgba(0,0,0,.18); } .ll-light .btn:disabled { opacity:.45; cursor:not-allowed; } .ll-light .btn-ghost { padding:9px 13px; border-radius:10px; font-size:12px; font-weight:600; cursor:pointer; background:var(--surface); color:var(--text2); border:1px solid var(--border2); box-shadow:var(--sh-sm); font-family:var(--font-ui); transition:.15s; } .ll-light .btn-ghost:hover:not(:disabled) { color:var(--text); border-color:var(--text2); box-shadow:var(--sh-md); } .ll-light .btn-danger { padding:9px 13px; border-radius:10px; font-size:12px; font-weight:600; cursor:pointer; background:var(--surface); color:var(--orange); border:1px solid var(--orange-line); box-shadow:var(--sh-sm); transition:.15s; } .ll-light .btn-danger:hover:not(:disabled) { background:var(--orange-wash); border-color:var(--orange); } /* pills: */ .ll-light .pill { display:inline-flex; align-items:center; gap:6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:3.5px 10px; border-radius:999px; border:1px solid var(--border2); background:var(--bg); color:var(--muted); } .ll-light .pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; } .ll-light .pill.green { background:var(--green-wash); border-color:var(--green-line); color:var(--green); } .ll-light .pill.red { background:var(--red-wash); border-color:var(--red-line); color:var(--red); } .ll-light .pill.yellow { background:var(--yellow-wash); border-color:var(--yellow-line); color:var(--yellow); } .ll-light .pill.orange { background:var(--orange-wash); border-color:var(--orange-line); color:var(--orange); } .ll-light .pill.purple { background:var(--purple-wash); border-color:var(--purple-line); color:var(--purple); } .ll-light .pill.teal { background:var(--teal-wash); border-color:var(--teal-line); color:var(--teal); } .ll-light .pill.blue { background:var(--blue-wash); border-color:var(--blue-line); color:var(--blue); } /* mono id token: — an ID as a designed object, not a string */ .ll-light code.tok, .ll-light .tok { font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.05em; color:#f4f2ec; background:var(--text); padding:3px 9px; border-radius:7px; } /* ═══ DEPTH + GLOW LAYER (applies app-wide; .ll-light prefix outranks page styles, while page-level .sel/hover/state rules — equal specificity, later in cascade — still win) ═══ */ /* layer 2: rows & bubbles INSIDE cards sit on --surface2, clearly distinct from the white card */ .ll-light .item-row, .ll-light .stn, .ll-light .sug, .ll-light .pv-row, .ll-light .member, .ll-light .wh-row, .ll-light .crow, .ll-light .acam, .ll-light .revrow, .ll-light .confirm-row, .ll-light .varRow input, .ll-light .aspect-field input, .ll-light .aspect-field select { background: var(--surface2); } .ll-light .item-row, .ll-light .stn, .ll-light .sug, .ll-light .crow, .ll-light .acam { border-color: var(--border2); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), var(--sh-sm); } .ll-light .empty { background: var(--surface2); border-radius: 12px; border: 1px dashed var(--border2); } /* ── LIT-UP STATUS BADGES: vivid hue, bright text, soft color glow — an "on" indicator ── */ /* the glow recipe: saturated wash bg + white-inset shine + colored halo + bright text */ .ll-light .st-ready, .ll-light .pill-ready, .ll-light .st-listed, .ll-light .st-active, .ll-light .pill-live, .ll-light .pill-liveitem, .ll-light .st-sold, .ll-light .st-ended, .ll-light .st-intake, .ll-light .st-delisted, .ll-light .st-in_variation, .ll-light .pill-draft, .ll-light .pill-set, .ll-light .pill-block, .ll-light .badge-edit { font-weight: 800; letter-spacing: .03em; border-width: 1px; border-style: solid; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); text-shadow: 0 0 8px currentColor; /* the subtle "lit" bloom on the text itself */ } /* LIVE / ACTIVE — green, glowing hardest (it's the money state) */ .ll-light .st-listed, .ll-light .st-active, .ll-light .pill-live, .ll-light .pill-liveitem { color: var(--v-green); background: #e3fbea; border-color: rgba(11,168,79,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 12px rgba(11,168,79,.35); } /* READY — emerald */ .ll-light .st-ready, .ll-light .pill-ready { color: var(--v-emerald); background: #e2f8f0; border-color: rgba(5,150,105,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 10px rgba(5,150,105,.28); } /* SOLD — blue */ .ll-light .st-sold { color: var(--v-blue); background: #e7eeff; border-color: rgba(46,100,230,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 10px rgba(46,100,230,.3); } /* DRAFT / IN-VARIATION — violet */ .ll-light .pill-draft, .ll-light .st-in_variation { color: var(--v-purple); background: #f3e9fe; border-color: rgba(139,52,224,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 10px rgba(139,52,224,.26); } /* ENDED — amber */ .ll-light .st-ended { color: var(--v-amber); background: #fdf3dd; border-color: rgba(224,139,0,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 10px rgba(224,139,0,.26); } /* ALL-SET — teal */ .ll-light .pill-set { color: var(--v-teal); background: #e0f7f4; border-color: rgba(13,148,136,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 10px rgba(13,148,136,.26); } /* BLOCKED / NEEDS — red */ .ll-light .pill-block { color: var(--v-red); background: #fde9ec; border-color: rgba(229,48,76,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 10px rgba(229,48,76,.26); } /* EDITED — orange */ .ll-light .badge-edit { color: var(--v-orange); background: #ffefe2; border-color: rgba(240,100,10,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 10px rgba(240,100,10,.26); } /* INTAKE / DELISTED — neutral, deliberately UNLIT (only real states glow) */ .ll-light .st-intake, .ll-light .st-delisted { color: var(--muted); background: var(--surface2); border-color: var(--border2); text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); } /* gates get a soft glow too — they're the biggest status indicator on a page */ .ll-light .gate-on { box-shadow: 0 0 14px rgba(11,168,79,.22); } .ll-light .gate-off { box-shadow: 0 0 14px rgba(240,100,10,.18); } /* ── META CHIPS: id / category / price as recessed icon bubbles on listing cards ── markup:
z-1004 Tops40.00
Icons are subtle glyphs via ::before — no labels; the symbol signals the field. */ .ll-light .mchips { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; align-items:center; } .ll-light .mchip { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--text2); background:var(--surface2); border:1px solid var(--border2); border-radius:8px; padding:3px 9px; line-height:1.45; white-space:nowrap; } .ll-light .mchip::before { font-size:10px; color:var(--muted); font-weight:700; } .ll-light .mchip.id { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em; } .ll-light .mchip.id::before { content:"#"; } .ll-light .mchip.batch { font-family:var(--font-mono); font-size:10.5px; } .ll-light .mchip.batch::before { content:"⧉"; } .ll-light .mchip.cat::before { content:"▤"; } /* price slightly emphasized — it's money */ .ll-light .mchip.price { background:var(--green-wash); border-color:var(--green-line); color:var(--green); font-weight:800; } .ll-light .mchip.price::before { content:"$"; color:var(--green); font-weight:800; } /* ── ICONS — the shared sprite class (icons.svg, Lucide). 1em scales with the text, the negative vertical-align seats it on the baseline (THE classic emoji-to-SVG failure is floating icons), currentColor means the parent's color styles it. ── */ .ico { width:1em; height:1em; display:inline-block; vertical-align:-0.15em; flex-shrink:0; } /* ── ITEM ID — one treatment, app-wide (item_id.js is the only thing that emits it). The last digits are the part anyone actually tracks while working; the date prefix is context you already know. So the prefix RECEDES to --muted and the sequence takes full ink (--text) with more weight and size. Colour choice: deliberately NOT --accent2 — ids sit on rows that already use accent for links and green/amber/red for status, and a coloured id there would read as a state or a link. Muted→ink is unambiguous, works on every background including the dark board, and matches the printed label. ── */ .iid-fmt { font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace); white-space:nowrap; font-variant-numeric:tabular-nums; } .iid-fmt .iid-pre { color:var(--muted); font-weight:600; font-size:.82em; } .iid-fmt .iid-tail { color:var(--text); font-weight:800; font-size:1.06em; letter-spacing:.01em; } .iid-plain { font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace); } /* PILL — the LARGE-DISPLAY variant (ItemId.html(id, {pill:true})): the last four in a FILLED pill — solid accent background, contrasting text — prefix muted alongside on the SAME line. For heroes and wall boards, where the tail is what someone reads from twenty feet away. Colours are themable per host via --iid-pill-bg / --iid-pill-fg (the dark station board overrides them to amber-on-dark). Sizes are em-based so the pill scales with wherever it's placed. */ .iid-fmt.iid-pill { display:inline-flex; align-items:center; gap:.3em; white-space:nowrap; } .iid-fmt.iid-pill .iid-pre { font-size:.34em; font-weight:700; letter-spacing:.08em; } .iid-fmt.iid-pill .iid-tail { background:var(--iid-pill-bg, var(--accent2)); color:var(--iid-pill-fg, var(--surface, #fff)); font-size:1em; font-weight:900; padding:.02em .24em; border-radius:.18em; letter-spacing:-.01em; } /* STACKED — where there's vertical room, the printed-label layout: date small on top, sequence large below. */ .iid-fmt.iid-stack { display:inline-flex; flex-direction:column; align-items:center; line-height:1.05; white-space:normal; } .iid-fmt.iid-stack .iid-pre { font-size:.42em; letter-spacing:.06em; } .iid-fmt.iid-stack .iid-tail { font-size:1em; letter-spacing:-.01em; } /* ON A COLOURED HOST — some surfaces already colour the id to mean something (the ship dock's sku badge is blue to say "this order maps to one of our items"). Overriding that with muted→ink would delete the signal, so here the emphasis is carried by weight, size and opacity while the host's colour shows through. Same helper, same classes — this is a variant, NOT per-screen formatting. */ .iid-fmt.iid-oncolor .iid-pre { color:inherit; opacity:.6; } .iid-fmt.iid-oncolor .iid-tail { color:inherit; }