/* ============================================================================ Little Collie Shepherd — design system (T-041) One source of truth for the whole app's look. Every colour, type size, space, radius, and elevation is a CSS custom property declared here; page templates consume the tokens and never hardcode a value. Restyling the app is editing this token block, not hunting across templates. Brand: warm, protective, humanistic — built *for* targeted/marginalised creators. A collie, not a Cerberus. The palette + type are propagated from the littlecollie.com house reference (warm sand ground, terracotta accent, Newsreader serif + Inter sans), not invented here. Themes: light is the default (matches the reference) and is what every first visit gets, whatever the OS is set to. Dark is derived and first-class — same warm family, not a cold inversion — but opt-in: it applies only when [data-theme="dark"] is on , set by the theme toggle in base.html and remembered in localStorage. ========================================================================= */ /* ---- Webfonts — vendored, not linked (T-108) ------------------------------ Newsreader and Inter ship *with* the app. Until T-108 they were named in the type tokens below and nothing loaded them, so the brand type appeared only on a machine that happened to have the families installed system-wide and every other visitor silently got the fallback stack. Naming a family is not shipping it; these rules are what ship it. Self-hosted rather than pulled from a font service, deliberately: a CDN link is a third-party request on every page load carrying the visitor's IP to a party this app otherwise never contacts, and it would owe the T-046 consent registry an entry. Vendored files cost bytes once, then cache. Variable files, weight axis 400–700 (the sheet uses 400/500/600/700), latin + latin-ext only — the catalogue is en-only; a locale needing Cyrillic or Greek adds its subsets then. No italic file: the sheet's one italic rule (.qc-summary--empty) synthesises, as it already did. Licences sit beside the files (both SIL OFL 1.1). src paths are relative to *this stylesheet*, so they resolve under /static/. They cannot go through asset_url() — CSS has no access to the Jinja helper — so a future font revision wants a new filename, not new bytes under the old one. tests/test_webfonts.py fails if a token names a family with no rule here, or if a src points at a file that is not in the repo. ------------------------------------------------------------------------ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/newsreader-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/newsreader-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- Light theme (default) — seeded from the littlecollie.com reference --- */ :root { /* Surfaces (warm sand ground → lighter as they rise toward the viewer) */ --lc-bg: #f0e8dc; /* page ground */ --lc-surface: #faf7f3; /* cards, tables, nav */ --lc-surface-2: #f4ece1; /* table headers, insets, subtle raise */ --lc-surface-3: #ebe0d0; /* pressed / hover wells */ /* Ink */ --lc-text: #15110f; /* primary text */ --lc-text-muted: #6b5d4f; /* secondary text, labels (AA on all surfaces) */ --lc-text-subtle: #776654; /* tertiary, timestamps (AA 4.5:1 on bg+surface) */ /* Lines */ --lc-border: #e0d4c2; /* default hairline */ --lc-border-strong: #cbba9f; /* emphasised edge, focus rings on fields */ /* Brand accent — terracotta (primary action, focus, active). Three roles, split for AA: `--lc-accent` is the brand fill/border/ring hue (non-text UI, needs only 3:1); `--lc-accent-text` is a darkened terracotta for accent-coloured *text/icons* (≥4.5:1 on bg, surface, and the weak tint); `--lc-accent-strong` is a fill deep enough for white `--lc-on-accent` text (primary buttons) to clear 4.5:1. Same hue family — a legibility split, not a redesign (T-042; brand look is T-041). */ --lc-accent: #c66b4f; --lc-accent-hover: #b1573b; --lc-accent-text: #9e4429; /* accent as text/icon (5.0–5.9:1 on light) */ --lc-accent-strong: #a85436; /* accent fill under white text (5.1:1) */ --lc-accent-weak: #f3e2d9; /* tint fill behind accent content */ --lc-on-accent: #fffaf5; /* text/icons on an accent-strong fill */ /* Semantic — calm, not neon. Each pairs a readable fg with a soft tint bg. fg values are tuned to clear AA 4.5:1 on both their weak tint and surface. */ --lc-success: #457353; --lc-success-weak: #e4eee2; --lc-danger: #b3402f; --lc-danger-weak: #f6e2dd; --lc-warning: #8c6016; --lc-warning-weak: #f4e9d2; --lc-info: #3a6a8c; --lc-info-weak: #e0eaf0; /* Source hues (kept distinct but pulled toward the warm palette) */ --lc-youtube: #b83c2a; --lc-youtube-weak: #f6e2dd; --lc-wordpress: #3a6a8c; --lc-wordpress-weak: #e0eaf0; --lc-patreon: #755d8f; --lc-patreon-weak: #ece5f2; --lc-instagram: #a02a6e; --lc-instagram-weak: #f7e3ee; --lc-facebook: #2f4f9e; --lc-facebook-weak: #e3e8f6; /* Type */ --lc-font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --lc-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --lc-font-mono: "SFMono-Regular", ui-monospace, "Consolas", monospace; /* Type scale (1.20 minor-third, base 15px) */ --lc-text-xs: 0.694rem; --lc-text-sm: 0.833rem; --lc-text-base: 1rem; --lc-text-md: 1.2rem; --lc-text-lg: 1.44rem; --lc-text-xl: 1.728rem; --lc-text-2xl: 2.074rem; /* Space scale (4px base) */ --lc-space-1: 4px; --lc-space-2: 8px; --lc-space-3: 12px; --lc-space-4: 16px; --lc-space-5: 24px; --lc-space-6: 32px; --lc-space-7: 48px; --lc-space-8: 64px; /* Radius */ --lc-radius-sm: 6px; --lc-radius: 10px; --lc-radius-lg: 16px; --lc-radius-pill: 999px; /* Elevation — soft, warm-tinted shadows (protective, not harsh) */ --lc-shadow-sm: 0 1px 2px rgba(60, 40, 24, 0.06); --lc-shadow: 0 2px 8px rgba(60, 40, 24, 0.08); --lc-shadow-lg: 0 12px 40px rgba(40, 26, 14, 0.18); /* Motion */ --lc-motion: 0.15s ease; /* ---- Legacy aliases ----------------------------------------------------- The pre-T-041 templates reference these names directly. Mapping them onto the new tokens re-skins every existing page for free and keeps this task visual-only; page-by-page rollout then removes the aliases in favour of the semantic names. Do not add new uses of these. */ --bg: var(--lc-bg); --bg2: var(--lc-surface); --bg3: var(--lc-surface-2); --border: var(--lc-border); --text: var(--lc-text); --muted: var(--lc-text-muted); --primary: var(--lc-accent); --primary-hover: var(--lc-accent-hover); --green: var(--lc-success); --red: var(--lc-danger); --yellow: var(--lc-warning); --orange: #a0551b; /* AA 4.5:1 on warning-weak + surface */ --radius: var(--lc-radius-sm); --font: var(--lc-font-sans); --mono: var(--lc-font-mono); } /* ---- Dark theme — derived, same warm family (a dim room, not a cold one) -- */ /* Applied only when the toggle sets [data-theme="dark"]. The OS preference deliberately does NOT select it: light is the default for every first visit, dark is an explicit opt-in (see the head script in base.html). */ :root[data-theme="dark"] { --lc-bg: #17120e; --lc-surface: #211a15; --lc-surface-2: #2b221b; --lc-surface-3: #362a21; --lc-text: #f0e8dc; --lc-text-muted: #b3a493; --lc-text-subtle: #9a8b7d; /* AA 4.5:1 on dark surface/bg */ --lc-border: #372c23; --lc-border-strong: #4d3f33; --lc-accent: #db8a6f; --lc-accent-hover: #e8a288; --lc-accent-text: #db8a6f; /* light terracotta already clears 4.5:1 on dark */ --lc-accent-strong: #db8a6f; /* dark on-accent ink on it clears 4.5:1 */ --lc-accent-weak: #3a271e; --lc-on-accent: #17120e; --lc-success: #7fae8c; --lc-success-weak: #223026; --lc-danger: #e18472; --lc-danger-weak: #3a231d; --lc-warning: #d6a445; --lc-warning-weak: #362a17; --lc-info: #7fabc8; --lc-info-weak: #1f2c34; --lc-youtube: #e6836f; --lc-youtube-weak: #3a231d; --lc-wordpress: #7fabc8; --lc-wordpress-weak: #1f2c34; --lc-patreon: #b299cf; --lc-patreon-weak: #2a2333; --lc-instagram: #e08cbb; --lc-instagram-weak: #38202d; --lc-facebook: #93aae8; --lc-facebook-weak: #1e2436; --lc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --lc-shadow: 0 2px 8px rgba(0, 0, 0, 0.40); --lc-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55); --orange: #d68a3f; } /* ============================================================================ Base ========================================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; } body { font-family: var(--lc-font-sans); background: var(--lc-bg); color: var(--lc-text); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Flex column so the site footer (T-078) pins to the viewport bottom on short pages via `margin-top: auto`; content lanes are unaffected. */ min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3, h4 { font-family: var(--lc-font-serif); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } /* Inline/prose links are underlined by default so they never rely on colour alone (WCAG 1.4.1). Component links that are already distinct by shape or placement — nav items, tabs, buttons, pills, cards, icon controls — opt out below. Accent-as-text uses the darkened `--lc-accent-text` for AA contrast. */ a { color: var(--lc-accent-text); text-decoration: underline; text-underline-offset: 0.15em; } a:hover { text-decoration: underline; } .nav-brand, .nav-links a, .tab, .sort-tab, .btn, .settings-tile, .badge, .cat-label, .icon-link, .icon-btn, .theme-toggle, .health-toggle, .pagination a, .stat-card--link, .video-group-title a, /* `.th-sort` is a