/* Questing design system (see design/ canvas). Three user-selectable themes, switched by (User.theme): - terminal "Terminal Quest" (default): green-on-black, mono uppercase labels, sharp corners. Palette: bg #0c110e · panel #121a15 · borders #24352b/#2c4436 · text #d3ded6 · dim #7c8f84 · accent #49d47e · anon #8f9fd4 · mod gold #d4b25c · live red #ff9d94. - hearthside "E · Hearthside": warm dim espresso, ember accent, rounded, Lora prose + Nunito Sans chrome. - storybook "F · Storybook": linen light, terracotta accent, rounded cards with soft shadows, Crimson Pro prose + Quicksand chrome. Every themable value is a :root token overridden per theme below; rules never hardcode theme colors. Hacker-vs-plain label text is handled by the {% themed %} template tag (core/templatetags/themetags.py) + the .th-hack / .th-soft visibility rules at the end of the token section. */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/jetbrains-mono-latin.b636a65da4f0.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin.b2c9031d9fd6.woff2") format("woff2"); } /* Soft-theme faces: declared always, downloaded by the browser only when the active theme actually uses them. */ @font-face { font-family: "Lora"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/lora-latin.9577af3ccda5.woff2") format("woff2"); } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/nunito-sans-latin.14ea133c476f.woff2") format("woff2"); } @font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/crimson-pro-latin.de9c1d8bbc46.woff2") format("woff2"); } @font-face { font-family: "Quicksand"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/quicksand-latin.9d503278216c.woff2") format("woff2"); } :root { /* Terminal Quest — the default theme. */ --bg: #0c110e; --panel: #121a15; --border: #24352b; --border-bright: #2c4436; --text: #d3ded6; --dim: #7c8f84; --dimmer: #5c6f64; --accent: #49d47e; --accent-hover: #7ce3a4; --accent-contrast: #06130b; /* text on accent-filled controls */ --accent-soft: #9db8a8; --primary-hover: #5fdd90; --hover-bg: #1a2820; --anon: #8f9fd4; --gold: #d4b25c; --live-fg: #ff9d94; --live-bg: #351b1b; --live-border: #63302c; --overlay: rgba(6, 10, 8, 0.75); --font-ui: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-prose: var(--font-body); /* story text */ --font-display: var(--font-body); /* big headings */ --font-brand: var(--font-ui); /* the nav wordmark */ --prose-size: 16px; --brand-size: 15px; --nav-size: 12px; /* Label affect: mono + uppercase + tracking in terminal, plain semibold sans in the soft themes. */ --label-case: uppercase; --label-track: .08em; --label-track-sm: .06em; --ui-weight: 400; --yours-label: "✓ YOURS"; --radius: 0px; /* panels, cards */ --radius-sm: 0px; /* inputs, option rows */ --radius-pill: 0px; /* buttons, badges, tags */ --radius-avatar: 0px; --shadow: none; } html[data-theme="hearthside"] { --bg: #221b16; --panel: #2b231d; --border: #3d332a; --border-bright: #55402b; --text: #e8ddd1; --dim: #a08d7b; --dimmer: #7d6f5f; --accent: #e2a26a; --accent-hover: #f0bd8d; --accent-contrast: #221b16; --accent-soft: #c9b39a; --primary-hover: #f0bd8d; --hover-bg: #362b22; --anon: #9d8fc4; --gold: #d8b45e; --live-fg: #f0bd8d; --live-bg: #3a2c1e; --live-border: #55402b; --overlay: rgba(16, 11, 7, 0.75); --font-ui: "Nunito Sans", "Segoe UI", system-ui, sans-serif; --font-body: "Nunito Sans", "Segoe UI", system-ui, sans-serif; --font-prose: "Lora", Georgia, serif; --font-display: "Lora", Georgia, serif; --font-brand: "Lora", Georgia, serif; --prose-size: 17px; --brand-size: 18px; --nav-size: 13.5px; --label-case: none; --label-track: 0; --label-track-sm: 0; --ui-weight: 600; --yours-label: "✓ yours"; --radius: 12px; --radius-sm: 10px; --radius-pill: 999px; --radius-avatar: 999px; --shadow: none; } html[data-theme="storybook"] { --bg: #faf6ef; --panel: #fffdf8; --border: #e7dfd2; --border-bright: #d8cdb9; --text: #3d372e; --dim: #8d8272; --dimmer: #a89b85; --accent: #c26d5a; --accent-hover: #a6543f; --accent-contrast: #fffdf8; --accent-soft: #6f8a67; --primary-hover: #a6543f; --hover-bg: #f6efe2; --anon: #7a76a8; --gold: #b08a3e; --live-fg: #a6543f; --live-bg: #fbeae4; --live-border: #eccfc4; --overlay: rgba(61, 55, 46, 0.45); --font-ui: "Quicksand", "Trebuchet MS", system-ui, sans-serif; --font-body: "Quicksand", "Trebuchet MS", system-ui, sans-serif; --font-prose: "Crimson Pro", Georgia, serif; --font-display: "Crimson Pro", Georgia, serif; --font-brand: "Quicksand", "Trebuchet MS", system-ui, sans-serif; --prose-size: 19px; --brand-size: 18px; --nav-size: 13.5px; --label-case: none; --label-track: 0; --label-track-sm: 0; --ui-weight: 600; --yours-label: "✓ yours"; --radius: 14px; --radius-sm: 12px; --radius-pill: 999px; --radius-avatar: 999px; --shadow: 0 2px 10px rgba(92, 66, 34, 0.06); } /* {% themed "Cast vote" %} renders both spellings; the active theme shows one. */ html[data-theme="terminal"] .th-soft { display: none; } html:not([data-theme="terminal"]) .th-hack { display: none; } * { box-sizing: border-box; } /* Anchor jumps (resume link, chapter jumps, chat reply refs) land below the pinned header instead of hidden underneath it. */ html { scroll-padding-top: 64px; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); max-width: 76rem; margin: 0 auto; padding: 0 14px 14px 14px; font-size: 15px; line-height: 1.6; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } h1, h2, h3 { font-weight: 600; line-height: 1.25; } h1 { font-size: 22px; font-family: var(--font-display); } h2 { font-size: 17px; } h3 { font-size: 15px; } img, video { max-width: 100%; height: auto; border: 1px solid var(--border); } audio { width: 100%; } /* --- chrome --- */ /* The top bar stays pinned while the page scrolls. Opaque background so content doesn't show through; z-index below the dashboard overlay (40) but above sticky page elements like the chat column. */ header { position: sticky; top: 0; z-index: 30; background: var(--bg); margin-bottom: 14px; } header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); font-family: var(--font-ui); font-size: var(--nav-size); font-weight: var(--ui-weight); } header nav a { color: var(--text); } header nav a:first-child { font-weight: 600; font-family: var(--font-brand); font-size: var(--brand-size); color: var(--accent); margin-right: auto; } header nav a:hover { color: var(--accent); } footer { margin-top: 40px; padding-top: 12px; border-top: 1px solid var(--border); font-family: var(--font-ui); font-size: 11px; color: var(--dimmer); } footer a { color: var(--dim); } .messages { font-family: var(--font-ui); font-size: 12px; background: var(--panel); border: 1px solid var(--border-bright); border-radius: var(--radius-sm); color: var(--accent-soft); padding: 10px 14px; list-style: none; margin: 0 0 14px 0; } /* --- panels & labels --- */ .panel, .poll, .dice, .writein { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px; margin-bottom: 14px; } /* Interaction blocks nested inside a post panel: inset, slightly darker */ .post .poll, .post .dice, .post .writein { background: var(--bg); box-shadow: none; margin-bottom: 0; } article > section > h2 { font-family: var(--font-ui); font-size: 12px; letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--accent-soft); margin: 22px 0 10px 0; } .label, .smallhead, main h2 { font-family: var(--font-ui); font-size: 11px; font-weight: var(--ui-weight); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--dim); } main h2 { color: var(--text); font-weight: 600; font-size: 13px; } small, .muted { color: var(--dim); } mark { font-family: var(--font-ui); font-size: 11px; background: var(--live-bg); border: 1px solid var(--live-border); border-radius: var(--radius-pill); color: var(--live-fg); padding: 3px 8px; } mark:empty { display: none; } /* --- controls --- */ button, input[type="submit"] { font-family: var(--font-ui); font-size: 12px; font-weight: var(--ui-weight); background: var(--panel); border: 1px solid var(--border-bright); border-radius: var(--radius-pill); color: var(--accent); padding: 10px 16px; cursor: pointer; min-height: 40px; } button:hover { background: var(--hover-bg); } button.primary, form button[type="submit"]:only-of-type { background: var(--accent); color: var(--accent-contrast); font-weight: 600; border-color: var(--accent); } button.primary:hover, form button[type="submit"]:only-of-type:hover { background: var(--primary-hover); } input, textarea, select { font-family: var(--font-ui); font-size: 13px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 10px 12px; max-width: 100%; min-height: 40px; } textarea { width: 100%; font-family: var(--font-body); font-size: 14px; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); } input::placeholder, textarea::placeholder { color: var(--dimmer); } label { font-size: 13.5px; } form p { margin: 0 0 12px 0; display: flex; flex-direction: column; gap: 5px; } form p label { font-family: var(--font-ui); font-size: 11px; text-transform: var(--label-case); letter-spacing: var(--label-track-sm); color: var(--dim); } .helptext { font-size: 12px; color: var(--dimmer); } .errorlist { color: var(--live-fg); font-size: 12.5px; list-style: none; padding: 0; margin: 4px 0; } details > summary { font-family: var(--font-ui); font-size: 11px; font-weight: var(--ui-weight); text-transform: var(--label-case); letter-spacing: var(--label-track-sm); color: var(--accent-soft); cursor: pointer; padding: 6px 0; } table { border-collapse: collapse; width: 100%; overflow-x: auto; display: block; font-size: 13.5px; } th { font-family: var(--font-ui); font-size: 11px; text-transform: var(--label-case); letter-spacing: var(--label-track-sm); color: var(--dim); font-weight: var(--ui-weight); } th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); } /* --- story list --- */ .list-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 14px; } .list-controls input[type="search"] { flex-grow: 1; min-width: 200px; } /* Sort options are plain text ("Sort: updated") —