parththakkar106andClaude Opus 5
3a9090c20a
`frontend/src/index.css` held 2865 lines. It is now an import list, and each section is its own file under `frontend/src/styles/`. The order is unchanged. Two comments in the file already recorded that the cascade depends on it: several selectors in the tome section win only because they come after the base card rules, and the 720px query overrides the whole desktop design. The built CSS bundle is byte-identical before and after, at 56686 bytes. The plan asked for each `@media` block to move next to the rules it overrides. That is not done, and should not be. Moving a rule past a later rule of equal specificity changes which one wins, and there is no frontend test that would catch it. The 720px block is now `responsive.css`, imported last. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014Dix4oGV3njgWRdu7P9t6r
51 lines
1.6 KiB
CSS
51 lines
1.6 KiB
CSS
:root {
|
|
--bg: #0a0a0f;
|
|
--bg-panel: #131320;
|
|
--bg-panel-glass: rgba(19, 19, 32, 0.82);
|
|
--bg-input: #1a1a2a;
|
|
--border: #2b2b3d;
|
|
--border-bright: #3d3d55;
|
|
--text: #e2ddd0;
|
|
--text-dim: #918c7d;
|
|
--accent: #d4a94e;
|
|
--accent-bright: #e8c476;
|
|
--accent-dim: #96773a;
|
|
--accent-glow: rgba(212, 169, 78, 0.25);
|
|
--danger: #d06565;
|
|
--player: #9fc7d1;
|
|
/* Chart hues (analytics dashboard). Deeper and more saturated than --accent
|
|
and --player, which are tuned for text and borders and turn muddy once
|
|
they are a 10px bar: these are checked against --bg-panel for lightness,
|
|
chroma, contrast and colour-blind separation as a set. */
|
|
--chart-1: #b58a30;
|
|
--chart-2: #3d8ac4;
|
|
--chart-3: #a8608f;
|
|
--font-display: 'Cinzel', Georgia, serif;
|
|
--font-story: 'Crimson Pro', Georgia, 'Times New Roman', serif;
|
|
--font-ui: 'Inter', 'Segoe UI', system-ui, sans-serif;
|
|
font-family: var(--font-ui);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background:
|
|
radial-gradient(1200px 700px at 15% -10%, rgba(212, 169, 78, 0.06), transparent 60%),
|
|
radial-gradient(1000px 600px at 90% 110%, rgba(88, 76, 140, 0.08), transparent 55%),
|
|
var(--bg);
|
|
background-attachment: fixed;
|
|
color: var(--text);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
#root { min-height: 100vh; display: flex; flex-direction: column; }
|
|
|
|
h1, h2, h3 { font-weight: 600; letter-spacing: 0.03em; }
|
|
a { color: var(--accent); text-decoration: none; transition: color 0.15s; }
|
|
a:hover { color: var(--accent-bright); }
|
|
|
|
::selection { background: var(--accent-dim); color: #0f0d08; }
|
|
|