:root { --bg: #fafafa; --fg: #1a1a1a; --muted: #666; --border: #e2e2e2; --accent: #2a4d7a; --accent-soft: #eef3fa; --card: #fff; --surface: #fff; /* header bar, inputs, selects */ --on-accent: #fff; /* text/icons on an accent-filled background */ --unfilled: #9a6b00; /* "not filled in yet" amber */ --warn-bg: #fff7e0; --warn-border: #f0d97d; --warn-fg: #6b5500; } /* Dark theme tokens. Applied in two cases: 1. OS prefers dark AND the visitor hasn't forced light (the no-JS baseline — the page just follows the system setting, fully usable with scripting off, so the progressive-enhancement invariant holds); 2. the visitor explicitly chose dark via the header toggle (data-theme="dark" on , persisted in localStorage by static/js/theme.js). Forcing light is simply the absence of these — the :root base below is light, so [data-theme="light"] needs no re-declaration. Only the tokens flip; every rule reads them through var(). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #16181c; --fg: #e4e6eb; --muted: #9aa1ab; --border: #2d3138; --accent: #5b9df0; --accent-soft: #1e2a3d; --card: #1e2127; --surface: #1e2127; --on-accent: #fff; --unfilled: #e6cf8a; --warn-bg: #38301a; --warn-border: #6b5e2e; --warn-fg: #e6cf8a; } } :root[data-theme="dark"] { --bg: #16181c; --fg: #e4e6eb; --muted: #9aa1ab; --border: #2d3138; --accent: #5b9df0; --accent-soft: #1e2a3d; --card: #1e2127; --surface: #1e2127; --on-accent: #fff; --unfilled: #e6cf8a; --warn-bg: #38301a; --warn-border: #6b5e2e; --warn-fg: #e6cf8a; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.55; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } header.site { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0.85rem 1.5rem; display: flex; align-items: baseline; gap: 1.5rem; } header.site .wordmark { font-weight: 700; font-size: 1.25rem; color: var(--fg); letter-spacing: -0.01em; } header.site nav a { margin-right: 1rem; color: var(--accent); font-weight: 500; } /* Theme toggle: hidden by default so no-JS visitors never see a dead control; static/js/theme.js unhides it (removes [hidden]) and wires the click. */ .theme-toggle { margin-left: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.35rem 0.55rem; } .theme-toggle:hover { border-color: var(--accent); } .theme-toggle .theme-icon { display: block; } main { max-width: 960px; margin: 0 auto; padding: 1.75rem 1.5rem 3rem; } h1 { margin-top: 0; font-size: 1.6rem; } h2 { margin-top: 2rem; font-size: 1.2rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3rem; } h3 { margin: 1.25rem 0 0.4rem; font-size: 1.05rem; } .muted { color: var(--muted); } .empty { color: var(--muted); font-style: italic; } .unfilled { color: var(--unfilled); font-style: italic; } form.search { display: flex; gap: 0.5rem; margin: 1rem 0 1.5rem; max-width: 560px; } form.search input[type=search] { flex: 1; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; background: var(--surface); color: inherit; } form.search input[type=search]:focus { outline: 2px solid var(--accent); outline-offset: -1px; } form.search button { background: var(--accent); color: var(--on-accent); border: 0; padding: 0.55rem 1.1rem; border-radius: 6px; font: inherit; cursor: pointer; } form.search button:hover { filter: brightness(1.07); } ul.plain { list-style: none; padding: 0; margin: 0; } ul.plain > li { margin-bottom: 0.3rem; } .card-list { display: grid; gap: 0.6rem; padding: 0; list-style: none; margin: 0.6rem 0; } .card-list > li { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 0.7rem 0.9rem; } .card-list .lemmas { font-weight: 500; } .card-list .lemmas .lang { color: var(--muted); font-weight: 400; font-size: 0.85em; margin-right: 0.25rem; } .card-list .descr { color: var(--muted); font-size: 0.92em; margin-top: 0.2rem; } .card-list .meta { color: var(--muted); font-size: 0.85em; margin-top: 0.2rem; } .card-list .card-variants { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 0 0 0.5rem 0; } .card-list .card-variants > li { width: 160px; } .card-list .card-variants .sign-video { width: 160px; max-width: 100%; margin: 0; } .card-list .card-variants .region { font-size: 0.8em; margin-top: 0.2rem; } .chip { display: inline-block; background: var(--accent-soft); color: var(--accent); border-radius: 4px; padding: 0.05rem 0.45rem; font-size: 0.8em; margin-left: 0.4rem; white-space: nowrap; } .notice { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-fg); border-radius: 6px; padding: 0.55rem 0.8rem; margin: 1rem 0; } /* Two-section search: the "similar results" block is visually separated from the exact-match results above it by a top border and extra breathing room. */ .similar-results { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .sign-video { display: block; max-width: 100%; background: #000; border-radius: 6px; margin: 0.6rem 0; } .sign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin: 1rem 0; padding: 0; list-style: none; } .sign-grid > li { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 0.6rem; } .sign-grid .meta { color: var(--muted); font-size: 0.85em; margin-top: 0.3rem; } .lang-group { margin: 0.7rem 0; } .lang-group .lang-label { font-weight: 600; color: var(--muted); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; } .lang-group .lemmas-line { font-size: 1.05rem; } .pagination { display: flex; gap: 1rem; margin: 1.5rem 0; align-items: center; } .pagination a, .pagination span { color: var(--accent); } .pagination span.disabled { color: var(--muted); } /* Sign detail: words-first title */ h1.sign-title { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } h1.sign-title .lang-acronym { font-size: 0.7em; font-weight: 500; background: var(--accent-soft); color: var(--accent); border-radius: 4px; padding: 0.05rem 0.5rem; } h1.sign-title .title-extra { font-size: 0.6em; font-weight: 400; } /* Sign detail: per-meaning sections */ section.meaning { margin: 1.2rem 0 1.6rem; } section.meaning h3 { margin-bottom: 0.4rem; } section.meaning .lemma-line { font-size: 1.05rem; margin: 0.15rem 0; } section.meaning .lemma-line .pos { font-size: 0.8em; } section.meaning .lemma-line .lang-tag { color: var(--muted); font-size: 0.85em; margin-left: 0.3rem; } section.meaning .descr { color: var(--muted); font-size: 0.95em; margin: 0.4rem 0; } /* Sign detail: no-JS video angle switch (radio + CSS) */ .video-switch { margin: 0.6rem 0; } .video-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .video-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; } .video-tabs label { cursor: pointer; border: 1px solid var(--border); border-radius: 6px; padding: 0.3rem 0.8rem; background: var(--card); color: var(--accent); font-size: 0.9rem; } .video-pane { display: none; } #angle-main:checked ~ .pane-main { display: block; } #angle-side:checked ~ .pane-side { display: block; } #angle-main:checked ~ .video-tabs label[for="angle-main"], #angle-side:checked ~ .video-tabs label[for="angle-side"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* Sign detail: sibling-sign variant cards */ .variants { margin-top: 0.8rem; } .variants h4 { margin: 0.6rem 0 0.4rem; font-size: 0.95rem; color: var(--muted); } .variant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.7rem; margin: 0; padding: 0; list-style: none; } .variant-card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem; } .variant-card .sign-video { margin: 0; } .variant-card .meta { color: var(--muted); font-size: 0.85em; margin-top: 0.3rem; } .clips { margin-top: 0.8rem; } .clips h4 { margin: 0.6rem 0 0.4rem; font-size: 0.95rem; color: var(--muted); } .clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; } .clip-grid .sign-video.clip { margin: 0; } /* Topic browse: tree index, breadcrumb, subtopic list */ .topic-tree { list-style: none; padding-left: 0; margin: 0.6rem 0; } .topic-tree ul { list-style: none; padding-left: 1.1rem; margin: 0.2rem 0; border-left: 1px solid var(--border); } .topic-tree li { margin: 0.25rem 0; } .breadcrumb { color: var(--muted); font-size: 0.9em; margin-bottom: 0.6rem; } .breadcrumb span { color: var(--fg); } .subtopics { margin: 0.8rem 0 1.2rem; } .subtopics h2 { font-size: 1rem; color: var(--muted); margin: 0 0 0.3rem; } /* Anki deck download links (ADR-0008) */ .anki-links { color: var(--muted); font-size: 0.9em; } .topic-tree .anki-links { margin-left: 0.5rem; font-size: 0.85em; } .anki-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.9em; margin: 0.6rem 0; } .anki-form label { color: var(--muted); } .anki-form select { font: inherit; border: 1px solid var(--border); border-radius: 6px; padding: 0.2rem 0.4rem; background: var(--surface); color: inherit; margin-left: 0.25rem; } .anki-form button { font: inherit; border: 1px solid var(--accent); border-radius: 6px; padding: 0.25rem 0.8rem; background: var(--card); color: var(--accent); cursor: pointer; } .anki-form button:hover { background: var(--accent-soft); } /* Export basket (ADR-0008 Phase 2) */ .basket-form { display: inline-block; margin: 0.3rem 0 0; } .basket-btn { background: var(--card); color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 0.25rem 0.7rem; font: inherit; font-size: 0.85em; cursor: pointer; } .basket-btn:hover { background: var(--accent-soft); } .basket-btn.in-basket { background: var(--accent-soft); border-color: var(--border); color: var(--muted); } .badge { display: inline-block; min-width: 1.3em; text-align: center; background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 0 0.35em; font-size: 0.75em; vertical-align: 0.15em; } .badge.hidden { display: none; } .chip.warn { background: var(--warn-bg); color: var(--warn-fg); margin-left: 0; } .basket-actions { margin: 1.2rem 0; display: grid; gap: 0.6rem; justify-items: start; } .basket-actions .download { background: var(--accent); color: var(--on-accent); border-radius: 6px; padding: 0.55rem 1.1rem; font-weight: 500; } .basket-actions .download:hover { text-decoration: none; filter: brightness(1.07); } .basket-form-all { margin-top: 0.6rem; } .anki-push { margin: 0.3rem 0 0.8rem; } .anki-push-btn { background: var(--card); color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 0.35rem 0.9rem; font: inherit; font-size: 0.9em; cursor: pointer; } .anki-push-btn:hover { background: var(--accent-soft); } .anki-push-status { margin: 0.4rem 0 0; font-size: 0.85em; max-width: 36em; }