diff --git a/static/app.js b/static/app.js index 9ea516f..99789d2 100644 --- a/static/app.js +++ b/static/app.js @@ -173,7 +173,7 @@ function renderGradeBlock(g, opts = {}) { }).join(''); return ` -
A photo can't show surface scratches, print lines, or light edge wear the +
A photo can't show surface scratches, print lines, or light edge wear the way a grader's raking light does — and a seller's listing photo is often lit to hide them. Treat this as a rough screen, not a prediction of what it comes back as.
${renderSlab(g, opts)}
diff --git a/static/icon.svg b/static/icon.svg index c10c806..349bcc7 100644 --- a/static/icon.svg +++ b/static/icon.svg @@ -1,6 +1,9 @@ - - - + + + + + diff --git a/static/index.html b/static/index.html index 17b9f93..c5c3a2c 100644 --- a/static/index.html +++ b/static/index.html @@ -23,13 +23,23 @@
-
- -

Card Grader

-
-
- - +
+
+ + +

Card Grader

+
+
+ + +
diff --git a/static/style.css b/static/style.css index 7e34f1f..fb71059 100644 --- a/static/style.css +++ b/static/style.css @@ -90,24 +90,34 @@ main { .topbar { position: sticky; top: 0; z-index: 20; - display: flex; align-items: center; justify-content: space-between; - gap: 16px; flex-wrap: wrap; - padding: 14px 24px; background: rgba(8, 12, 20, .82); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--hairline); } +/* The bar spans the viewport, but its CONTENTS line up with the page + column — the logo sitting hard against a 3440px screen edge while the + panels floated in a narrow centre column was the single thing making + this read as unfinished rather than designed. */ +.topbar-inner { + max-width: 940px; margin: 0 auto; + display: flex; align-items: center; justify-content: space-between; + gap: 16px; flex-wrap: wrap; + padding: 13px 24px; +} /* Holo-foil edge: the rainbow sweep you get tilting a refractor. Purely decorative and it encodes nothing, so it's free to be vivid here where no - number lives. Kept from the light theme — it's the app's signature. */ + number lives — but dialled back from the original full-strength stripe, + which was the loudest thing on an otherwise restrained page. */ .topbar::after { - content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; + content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: linear-gradient(90deg, #ff5f8f, #ffb347, #ffe66d, #3ddcc0, #4d9bff, #a97bff, #ff5f8f); - opacity: .9; + opacity: .5; +} +.topbar h1 { + color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -.005em; } -.topbar h1 { color: #fff; letter-spacing: .005em; } .topbar .btn { background: var(--accent-2); color: #04231d; @@ -120,41 +130,34 @@ main { } .topbar .btn-quiet:hover { background: rgba(255, 255, 255, .13); filter: none; } -.brand { display: flex; align-items: center; gap: 12px; } +.brand { display: flex; align-items: center; gap: 11px; } -/* Brand mark: a graded slab, drawn in plain CSS. A rounded card outline with - a check — "this one's been looked at" — rather than any single game's - iconography, since this grades anything PSA does. */ -.brand-mark { - position: relative; flex: none; - width: 30px; height: 30px; border-radius: 8px; - background: linear-gradient(150deg, var(--accent-2), var(--accent) 70%, #a97bff); - box-shadow: - inset 0 0 0 1.5px rgba(255, 255, 255, .34), - 0 2px 10px rgba(77, 155, 255, .45); -} -.brand-mark::after { - content: ''; position: absolute; left: 8px; top: 8px; - width: 9px; height: 5.5px; - border-left: 2.2px solid #04231d; border-bottom: 2.2px solid #04231d; - transform: rotate(-45deg); -} +/* Brand mark: a graded slab — case, label, and the card sealed inside. + Drawn as flat two-tone geometry rather than the gradient-blob-with-a- + checkmark it replaced: that read as a generic app badge and said nothing + about grading. Thin strokes and no glow keep it legible at 22px. */ +.brand-mark { flex: none; width: 21px; height: 26px; display: block; } +.brand-mark .mark-case { stroke: var(--accent); } +.brand-mark .mark-label { fill: var(--accent-2); } +.brand-mark .mark-card { fill: var(--accent); opacity: .34; } .topbar-actions { display: flex; gap: 9px; flex-wrap: wrap; } /* ------------------------------------------------------------ controls */ +/* Flat accent fill with a plain shadow. The previous gradient-plus-coloured- + glow made every button feel like the page's main event, which flattened + the hierarchy — the grade result should be the loudest thing here, not + the controls. */ .btn { - font: inherit; font-weight: 550; font-size: 14.5px; - padding: 9px 17px; border-radius: 10px; cursor: pointer; - background: linear-gradient(180deg, - color-mix(in srgb, var(--accent) 92%, #fff), - var(--accent)); + font: inherit; font-weight: 600; font-size: 14.5px; + padding: 9px 17px; border-radius: 9px; cursor: pointer; + background: var(--accent); color: #04121f; border: 1px solid transparent; text-decoration: none; display: inline-block; line-height: 1.4; white-space: nowrap; - box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(77, 155, 255, .22); + box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: filter .13s ease, transform .13s ease, background .13s ease; } .btn:hover { filter: brightness(1.08); } @@ -217,9 +220,15 @@ textarea { resize: vertical; min-height: 64px; } box-shadow: var(--shadow); } +/* A rule under the heading gives each panel a real header band instead of + a title floating above loose content — the cheapest structural cue there + is, and what most separates "designed" from "stacked divs". Suppressed + inside modals, which set their own tighter header treatment below. */ .panel-head { display: flex; align-items: baseline; justify-content: space-between; - gap: 12px; flex-wrap: wrap; margin-bottom: 6px; + gap: 12px; flex-wrap: wrap; + padding-bottom: 13px; margin-bottom: 4px; + border-bottom: 1px solid var(--hairline); } .hint { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .search-status { @@ -341,7 +350,7 @@ textarea { resize: vertical; min-height: 64px; } line under the title. Pin it: title takes the slack, × stays top-right. */ .modal .panel-head { flex-wrap: nowrap; align-items: flex-start; gap: 16px; - margin-bottom: 14px; + padding-bottom: 0; margin-bottom: 12px; border-bottom: none; } .modal .panel-head h2 { flex: 1; min-width: 0; } .modal .close { flex: none; margin-top: 1px; } @@ -365,12 +374,17 @@ textarea { resize: vertical; min-height: 64px; } } .spacer { flex: 1; } +/* Informational by default — accent, not amber. The shooting guidance + ("front straight-on is the minimum") is instruction, not a caution, and + colouring it like a warning spent the page's only alarm colour on + something that never needed it. Genuine cautions opt into .note-warn. */ .note { font-size: 13px; line-height: 1.55; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--hairline); - border-left: 3px solid var(--warning); + border-left: 3px solid var(--accent); border-radius: 8px; padding: 12px 14px; margin-top: 14px; } +.note-warn { border-left-color: var(--warning); } .note-flag { border-left-color: var(--critical); color: var(--critical);