/* Recentius stylesheets — three files, one convention. base.css tokens (:root), reset, typography, forms, the shared pieces (.btn, .pill/.chip, .eyebrow, .flex-row, .choice, .filter-bar, .card, .code-chip, .slot, .phrase). Every page loads it. style.css the app: character sheet, rosters, dossier, Carta, Speculum, Verba, villa, policy. Every page of the app loads it. forum.css the public Forum shop pages, also embedded in Joomla, which load base.css + forum.css and nothing else. RULES (enforced by scripts/css_lint.py across all three files, which runs after every edit): 1. Colours live in base.css :root. A colour used twice is a token; a colour that already has a token is written as var(--token). Look there first. 2. One component, one name. Before adding a class, grep for a rule with the same declarations — a button, pill, chip, filter bar or caption that exists under another feature's name is the same component: reuse it or give it a neutral name, never a feature-prefixed copy. 3. No per-class [hidden] rules and no !important: the global [hidden] rule in base.css handles hiding; fix specificity at the source instead. 4. New rules go in the section they belong to, not at the end of the file. 5. Breakpoints are 420 / 560 / 760px only, and in style.css they live in the one Responsive block at the end, one @media per width. See CLAUDE.md "CSS" for the longer version. */ :root { /* ---- Base palette ------------------------------------------------------ */ --bg: #f3f6ec; --card: #ffffff; --ink: #232b1a; --muted: #6f7a62; --lime: #8cc63e; /* in the owl logo; optional highlight only */ --lime-tint: #eef5dd; /* flash / toast background */ --accent: #015219; /* primary green — buttons, links, headings (from the LAPIS site gradient) */ --accent-dark: #013912; /* button hover + dark-green accents */ --accent-tint: #f8fbf1; /* selected row / filled slot / quiet pill background */ --line: #d9e1cc; --panel: #fbfcf8; /* card-on-card tint: orders, goal, growth panels, mission cards */ --neutral-bg: #eee; /* grey chip background: closed / no data */ --header-text: #eef4e2; --brand-gradient: linear-gradient(to right, #015219, #3cc063); /* header band — matches lapis.practomime.com */ --code-font: "Courier New", monospace; /* secret codes: fixed-width serif — keep */ /* ---- Semantic colours: use these before inventing a new one ------------ */ --danger: #a8321f; /* destructive actions, errors, required marks */ --danger-dark: #842616; --ok: #2f6b2a; /* success text */ --ok-bg: #e3f3dc; --warn: #d8a415; /* amber: flag buttons, "new" badges */ --warn-dark: #bd8d0c; --warn-contrast: #2c2410; /* text on --warn */ --warn-bg: #fdf3d0; /* amber tint: flagged rows, "needs attention" chips, open trials */ --warn-ink: #7a5a00; --warn-line: #ecd48c; --info: #4a6fb5; /* blue: Manage action, operative chips, FALX tag */ --info-dark: #36548c; --info-ink: #2a4173; --info-line: #c2cee5; --info-bg: #e8eef9; /* ---- Tint + ink pairs for LP bands and any coloured chip ---------------- */ --red-bg: #fde0e0; --red-ink: #8a1414; --purple-bg: #ece0fa; --purple-ink: #4a1d8a; --purple-tint: #f3ecfc; --purple-line: #ddc9f3; /* transmission bubble */ --blue-bg: #d8e8ff; --blue-ink: #143a8a; --green-bg: #dff5d4; --green-ink: #2c5a14; /* ---- Feature palettes: one family per instrument ----------------------- */ --speculum: #1f6f6b; /* teal */ --speculum-dark: #175552; --speculum-ink: #174a47; /* text on a teal tint */ --speculum-line: #b9dcd8; --speculum-tint: #e4f2f0; /* selected / hover fill */ --speculum-tint-faint: #f1f7f6; --verba: #a67c00; /* gold */ --verba-dark: #855f00; --verba-ink: #5c4300; --carta: #4e2d78; /* purple tiles; the purple-* pair above is Carta's chip colour */ --carta-dark: #3c215d; --rec-over: #e0a100; /* Reflection Record: student rated above the LP band */ --rec-under: #6f9fd8; /* ...below */ --foil: #d4b24a; /* Carta foil edge */ /* ---- One-component colours that happen to recur ------------------------ */ --csv: #3e8e41; --csv-dark: #337036; /* .btn-csv: lighter green than --accent */ --impersonate-ink: #5a4400; --tooltip-bg: #2a2a2a; --villa-light: #fff7e8; /* text on token rings */ --parchment-hi: #fff7e0; --parchment: #ecd9a8; --wood: #6f5a3a; --wood-line: #c9b58a; --scroll-line: #d9c69a; --villa-guard: #e0301e; --villa-marcus: #7a2848; } * { box-sizing: border-box; } /* The hidden attribute always wins, whatever display a component sets. Never write a per-class ".x[hidden]" rule — this one covers it. */ [hidden] { display: none !important; } /* Visually hidden, still read by screen readers (labels, honeypots). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Controls that JS replaces (e.g. a submit button a change handler makes redundant). base.html puts class "js" on ; without JS they show. */ .js .js-hide { display: none; } body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); line-height: 1.5; } header { background: var(--brand-gradient); color: var(--header-text); padding: 0.7rem 1.5rem; display: flex; align-items: center; justify-content: space-between; } .brand { font-size: 1.4rem; font-weight: bold; letter-spacing: 0.08em; color: #fff; /* white wordmark on the gradient (lime fails on the bright end) */ text-decoration: none; } main { max-width: 1140px; margin: 1.5rem auto; padding: 0 1rem; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .centered { max-width: 420px; margin: 3rem auto; text-align: center; } .home-logo { width: 200px; max-width: 70%; height: auto; margin: 0 auto 0.5rem; } h1 { margin: 0 0 0.5rem; } h2 { margin: 0 0 0.75rem; color: var(--accent); border-bottom: 2px solid var(--line); padding-bottom: 0.3rem; } .subtitle, .muted { color: var(--muted); } .muted { font-size: 0.92rem; } a { color: var(--accent); } /* forms */ input, select, textarea, button { font-family: inherit; font-size: 1rem; padding: 0.5rem 0.65rem; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); } textarea { width: 100%; resize: vertical; } button { background: var(--accent); color: #fff; border: none; cursor: pointer; padding: 0.55rem 1rem; } button:hover { background: var(--accent-dark); } button:disabled { background: #aab69a; cursor: not-allowed; } /* ---- Button primitive ---------------------------------------------------- One solid button for and