diff --git a/.impeccable/design.json b/.impeccable/design.json index 5735401..cc14e9b 100644 --- a/.impeccable/design.json +++ b/.impeccable/design.json @@ -123,7 +123,7 @@ }, "scale": { "displayName": "Type scale", - "purpose": "Seven fixed steps as tokens: --text-2xs 0.6875rem (micro-labels), --text-xs 0.75rem (details, chips), --text-sm 0.8125rem (readouts, controls), --text-base 1rem (body), --text-md 1.0625rem (module names), --text-lg 1.3125rem (master module), --text-xl 1.625rem (wordmark). Components never carry a literal font-size." + "purpose": "Seven fixed steps as tokens: --text-2xs 0.6875rem (micro-labels), --text-xs 0.75rem (details, chips, controls), --text-sm 0.8125rem (readouts), --text-base 1rem (body), --text-md 1.0625rem (module names), --text-lg 1.3125rem (master module), --text-xl 1.625rem (wordmark). Components never carry a literal font-size. One control geometry: buttons and chips share --control-h 2rem and --text-xs, so a season line reads as one system." } }, "shadows": [ @@ -189,7 +189,7 @@ "refersTo": "ground", "description": "The §9.3 column unit: a small machined panel holding one mono value (score, resolution, source, HDR, audio, size, seeders). Fixed rhythm so columns align; never a soft pill.", "html": "2160p", - "css": ".chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 1.375rem; padding: 0 var(--space-2); background: var(--panel-raised); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-readout); font-size: var(--text-xs); color: var(--ink-muted); }" + "css": ".chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-h); padding: 0 var(--space-2); background: var(--panel-raised); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-readout); font-size: var(--text-xs); color: var(--ink-muted); }" }, { "name": "Verdict chip", @@ -229,7 +229,7 @@ "refersTo": "accent", "description": "The interactive element: mono uppercase, phosphor-cyan text, panel ground, ≥44px hit target. Cyan belongs to interaction only — never to status.", "html": "", - "css": ".control { min-height: 2.75rem; padding: 0 var(--space-4); font-family: var(--font-readout); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); background: var(--panel-raised); border: 1px solid var(--line-strong); border-radius: var(--radius); }" + "css": ".control { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); padding: 0 var(--space-4); font-family: var(--font-readout); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); background: var(--panel-raised); border: 1px solid var(--line-strong); border-radius: var(--radius); }" }, { "name": "Rail", diff --git a/web/src/style.css b/web/src/style.css index fd954c3..8f358dc 100644 --- a/web/src/style.css +++ b/web/src/style.css @@ -94,6 +94,7 @@ --space-12: 3rem; --radius: 4px; + --control-h: 2rem; --ease-out: cubic-bezier(0.25, 1, 0.5, 1); } @@ -442,10 +443,13 @@ body { /* ---- controls -------------------------------------------------------- */ .control { - min-height: 2.75rem; + display: inline-flex; + align-items: center; + justify-content: center; + min-height: var(--control-h); padding: 0 var(--space-4); font-family: var(--font-readout); - font-size: var(--text-sm); + font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); @@ -497,7 +501,7 @@ body { .search-input { width: 100%; - min-height: 2.75rem; + min-height: var(--control-h); padding: 0 var(--space-8) 0 var(--space-3); color: var(--ink); background: var(--ground); @@ -634,7 +638,7 @@ body { display: inline-flex; align-items: center; gap: var(--space-1); - min-height: 1.375rem; + min-height: var(--control-h); padding: 0 var(--space-2); background: var(--panel-raised); border: 1px solid var(--line); @@ -996,7 +1000,7 @@ body { .bucket-toggle { margin-left: auto; - min-height: 2.75rem; + min-height: var(--control-h); padding: 0 var(--space-2); font-size: var(--text-xs); text-transform: uppercase; @@ -1175,7 +1179,7 @@ body { } .view-btn { - min-height: 1.75rem; + min-height: var(--control-h); padding: 0 var(--space-2); font-family: var(--font-readout); font-size: var(--text-xs); @@ -1373,7 +1377,6 @@ body { /* the tracked toggle reads as the rule it is; pressed = on */ .season-line .control, .ep-actions .control { - min-height: 2.25rem; padding: 0 var(--space-3); } @@ -1654,7 +1657,6 @@ body { } .movie-controls .control { - min-height: 2.25rem; padding: 0 var(--space-3); }