/* ========================================================================== Libanima monochrome design system — "a temple of learning". Strict black-and-white chrome with straight edges everywhere; only book content (scene images, maps, reading text) keeps its own colour. How theming works ----------------- Every colour in the UI resolves through two grey ramps of RGB triples: --g50..--g950 the neutral ramp (all of Tailwind's grey palettes map here) --a50..--a950 the "accent" ramp (Tailwind amber/emerald/red map here) — the brightest tones, so primary actions read as ink stamps. Dark mode is the base; light mode simply INVERTS both ramps (50 <-> 950, 100 <-> 900, ...), which preserves every foreground/background contrast pair in the templates without editing them. The toggle is one attribute: . Semantic aliases: --ink the foreground triple (white-ish in dark mode, black-ish in light) --paper the background triple --app-bg the page background LAYER (a future seam, see below) Future background themes (wooden table, forest, ...) ---------------------------------------------------- The page background is deliberately its own variable so a theme can swap the backdrop while the elements stay strict monochrome, e.g.: :root[data-bg-theme="wood"] { --app-bg: rgb(var(--paper) / 0.85) url("/static/img/bg-wood.jpg") center / cover fixed; } set alongside data-theme and nothing else needs to change. ========================================================================== */ :root { color-scheme: dark; --g50: 250 250 250; --g100: 245 245 245; --g200: 229 229 229; --g300: 212 212 212; --g400: 163 163 163; --g500: 115 115 115; --g600: 82 82 82; --g700: 64 64 64; --g800: 38 38 38; --g900: 23 23 23; --g950: 10 10 10; --a50: 255 255 255; --a100: 255 255 255; --a200: 250 250 250; --a300: 212 212 212; --a400: 229 229 229; --a500: 245 245 245; --a600: 255 255 255; --a700: 229 229 229; --a800: 212 212 212; --a900: 163 163 163; --a950: 115 115 115; --ink: var(--g50); --paper: var(--g950); --app-bg: rgb(var(--paper)); /* Typography: engraved capitals for headings (temple pediment), typewriter monospace for controls and labels (card catalogue). */ --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif; --font-ui: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; } :root[data-theme="light"] { color-scheme: light; --g50: 10 10 10; --g100: 23 23 23; --g200: 38 38 38; --g300: 64 64 64; --g400: 82 82 82; --g500: 115 115 115; --g600: 163 163 163; --g700: 212 212 212; --g800: 229 229 229; --g900: 245 245 245; --g950: 250 250 250; --a50: 0 0 0; --a100: 0 0 0; --a200: 10 10 10; --a300: 64 64 64; --a400: 38 38 38; --a500: 23 23 23; --a600: 0 0 0; --a700: 38 38 38; --a800: 64 64 64; --a900: 115 115 115; --a950: 163 163 163; } /* ---- Strict straight edges: nothing in this interface is round. ---- */ *, *::before, *::after { border-radius: 0 !important; } body { background: var(--app-bg); } /* ---- Typography ---- */ h1, h2, h3, .masthead-brand { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; } /* Dictionary headwords are case-sensitive content, not chrome. */ #def-word { text-transform: none; letter-spacing: 0.02em; } /* `body` prefix outranks Tailwind preflight's `button { text-transform: none; font-family: inherit }`, which the CDN injects after this stylesheet. */ body button, body select, body summary, body label, body input, .nav-link, .btn { font-family: var(--font-ui); } body button, body summary, .btn { text-transform: uppercase; letter-spacing: 0.08em; } body button, .btn { border: 1px solid rgb(var(--ink) / 0.35); } /* ---- Focus, selection, native widgets ---- */ :focus-visible { outline: 2px solid rgb(var(--ink)); outline-offset: 2px; } ::selection { background: rgb(var(--ink)); color: rgb(var(--paper)); } input[type="checkbox"] { accent-color: rgb(var(--ink)); } /* Square-thumbed sliders. */ input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; background: rgb(var(--g600)); cursor: pointer; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: rgb(var(--ink)); border: 1px solid rgb(var(--paper)); } input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; background: rgb(var(--ink)); border: 1px solid rgb(var(--paper)); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: rgb(var(--g900)); } *::-webkit-scrollbar-thumb { background: rgb(var(--g600)); border: 2px solid rgb(var(--g900)); } /* ---- Masthead: double-ruled like a ledger heading. ---- */ .masthead { border-bottom: 6px double rgb(var(--ink) / 0.8); } .masthead-brand { display: inline-flex; align-items: center; gap: 0.65rem; } .temple-mark { flex: 0 0 auto; } .nav-link { padding: 0.25rem 0.5rem; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; } .nav-link:hover { background: rgb(var(--ink)); color: rgb(var(--paper)); } /* ---- Blocky card: hard shadow straight down, so the card reads centered rather than lit from the upper left. ---- */ .block-card { border: 2px solid rgb(var(--ink)); box-shadow: 0 6px 0 rgb(var(--ink) / 0.85); transition: transform 0.12s ease, box-shadow 0.12s ease; } .block-card:hover { transform: translateY(-2px); box-shadow: 0 8px 0 rgb(var(--ink) / 0.85); } /* ---- Library cover thumbnail: a fixed-width spine down the card's left edge. The book's own cover keeps its colour; the fallback temple mark sits in muted ink when no cover could be extracted or found. ---- */ .cover-thumb { width: 104px; align-self: stretch; position: relative; } .cover-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .cover-thumb .cover-fallback { width: 100%; height: 100%; min-height: 140px; align-items: center; justify-content: center; color: rgb(var(--g500)); } /* ---- Stamp: a small bordered uppercase token (statuses, badges). ---- */ .stamp { display: inline-block; border: 1px solid currentColor; padding: 0 0.45em; font-family: var(--font-ui); font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.12em; vertical-align: middle; }