/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #130a06 #3c2f26 #faf3ea #8a4a2c #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #faf3ea; --surface: #fdfaf6; --surface-2: #eee7df; --border: #dad2ca; --border-strong: #b5ada6; --ink: #3c2f26; --muted: #736a62; --accent: #8a4a2c; --accent-hover: #753f25; --accent-ink: #ffffff; --accent-text: #8a4a2c; --accent-strong: #8a4a2c; --accent-soft: #eadbcf; --accent-border: #c8a795; --success: #15803d; --success-ink: #ffffff; --success-soft: #dfe5d5; --success-strong: #116d34; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #f2e0cf; --warning-strong: #994607; --danger: #b5573f; --danger-ink: #ffffff; --danger-soft: #f2e0d5; --danger-strong: #9a4a35;} /* ==================================================================== * app.css — THIS APP'S OWN CSS. Yours to write. Ships empty. * * design.css is a FLOOR, not a ceiling. * * For a long time it was both, and the cost was measurable: an app could * not write a single CSS rule, so every app built here had the same 10px * radius, the same Public Sans at the same 15px, the same 1px borders and * the same soft shadow. Only fourteen COLOUR tokens ever differed. Three * apps in a row came out looking like the same product in three coats of * paint, which is what this file exists to end. * * It loads AFTER design.css and theme.css, so anything here wins. * * ---- THE FIRST LEVER: RETUNE THE SYSTEM --------------------------- * * A :root block here re-tunes every component at once — nothing is * restyled one class at a time. These are the tokens that decide an app's * CHARACTER, and they are the fastest way to make two apps look nothing * alike: * * --radius-sm --radius --radius-lg 0 is brutal, 4 is crisp, 18 is soft * --font-sans --font-mono a display face changes more than colour * --t-xs … --t-5xl the type scale, and how far it ramps * --lh --lh-tight --track-tight density and tone * --s-1 … --s-12 the spacing scale: tight or generous * --shadow --shadow-raised flat, or lifted * --border --border-strong widths hairline, or heavy and drawn * --dur-1 --dur-2 --ease brisk, or languid * --content-max --measure a wide dashboard or a narrow reading page * * COLOUR IS THE ONE EXCEPTION, and it is not a technicality: the owner * picked the palette on the approval card before you built anything, and * it is the only part of the look they chose themselves. theme.css holds * it. Write var(--accent), var(--ink), var(--canvas) — never a hex, an * rgb() or an hsl(), here or anywhere. The validator refuses those. * * ---- THE SECOND LEVER: WRITE WHAT IS NOT THERE --------------------- * * design.css covers the ordinary furniture. It does NOT cover the one * screen that makes this app itself — a timer's dial, a board's columns, * a chart, a seating plan, a game grid. Write those here, in full, and * name them for what they are (.dial, .board-col), never .card-2. * * Compose the primitives where they fit and write your own where they do * not. An app that used only the frozen classes and added nothing shipped * 160 component classes and zero rules of its own — and read as generated, * because the system's ceiling had become the app's ceiling. * * Keep using the tokens in what you write. A rule built on var(--s-4) and * var(--radius) stays consistent with everything around it and follows the * app when its character changes; one built on 16px and 10px does not. * ==================================================================== */ /* Marginalia — a well-loved reading journal, not a dashboard. Soft radii, a slower rhythm, and generous space around very little. Only Public Sans and IBM Plex Mono are bundled, so the "journal" feel comes from spacing, softness and using the mono face for numbers and small labels — the card-catalog touch — rather than from a serif we do not have. */ :root { --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--ink) 5%, transparent); --shadow-raised: 0 4px 14px color-mix(in srgb, var(--ink) 10%, transparent), 0 16px 40px color-mix(in srgb, var(--ink) 8%, transparent); --content-max: 1180px; } /* Card-catalog numerals: page counts, stat values and progress percentages read like a librarian's stamp, not a spreadsheet cell. */ .stat-value, .book-card .t-xs.muted, .nums { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Every book card carries a thin coloured spine down its left edge, like a book standing on a shelf — the one piece of furniture this app needed that the system does not have. On this warm paper palette --surface sits only a shade off --canvas, so the default border and shadow alone are not enough to keep one card from reading as a continuation of the next: give each card a real edge and a shadow that actually lifts it off the page. */ .book-card { border: 1px solid var(--border-strong); border-left: 3px solid var(--accent-border); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent), 0 10px 24px color-mix(in srgb, var(--ink) 10%, transparent); } /* The hero band and the currently-reading cards get a slightly heavier lift than the rest of the app — they are the one place the eye should land first. */ .card-raised.book-card { border-left: 3px solid var(--accent); box-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 10%, transparent), 0 16px 36px color-mix(in srgb, var(--ink) 14%, transparent); } /* A touch more air between cards than the default grid gives, so the shadow above has room to read as a gap rather than a smudge against the neighbour. */ .grid-auto-md { gap: var(--s-7); } /* Tabs and search sit close together in the card head on small screens. */ .card-head form { min-width: 0; flex: 1 1 220px; } .card-head form .input { width: 100%; } @media (max-width: 640px) { .card-head { flex-direction: column; align-items: stretch; } .card-head form { flex: 0 0 auto; } }