/* ============================================================================ PrepareBuddy — Unified Theme Tokens (opt-in) Location: static/css/theme.css Loaded: immediately after bootstrap.min.css in templates/partial/base.html. ARCHITECTURE — strict opt-in. Nothing global re-skins. ---------------------------------------------------------------------------- Layer 1 (always-on, inert): :root { --pb-* } token definitions. CSS variables only. No selectors that match anything on a legacy page. Loading this file alone changes NOTHING visually anywhere. Layer 2 (opt-in only): Every Bootstrap variable override (--bs-*), every body/heading/button/ card/form/badge/table/alert style is scoped under `body`. A page picks up the new design ONLY when its template emits {% block body_class %}pb-themed{% endblock %} on . Why scoped: The product is in production. Unmigrated apps must look pixel-identical to today until each one is deliberately migrated and verified. No global re-skin ships until every app has been migrated and soaked in prod (Phase 5 of plans/site_redesign_blueprint.md). Source values: Tokens come from canonical DESIGN.md §2-§4 and the Claude Design handoff at /tmp/claude-design-extract/.../claude-code-handoff/theme.css (now mirrored at /claude-code-handoff/ in the repo). Identical values; only the scoping is changed. ============================================================================ */ /* ---------------------------------------------------------------------------- Layer 1 — Tokens (always available, no visible effect) ---------------------------------------------------------------------------- */ :root { /* Brand */ --pb-navy: #0B1E4B; --pb-navy-2: #112A66; --pb-blue: #0A6BFF; --pb-blue-600: #0556D6; --pb-blue-700: #0445B0; --pb-blue-50: #EAF2FF; --pb-blue-100: #D5E4FF; --pb-sky: #E8F2FF; /* Neutrals */ --pb-ink: #0D1530; --pb-ink-2: #2B3452; --pb-ink-3: #5B6686; --pb-line: #E5EAF4; --pb-line-2: #EEF2FA; --pb-bg: #FBFCFE; --pb-bg-2: #F4F7FC; --pb-white: #FFFFFF; /* System */ --pb-success: #16B27A; --pb-success-50: #E7F7F0; --pb-warn: #FFB020; --pb-warn-50: #FFF5E1; --pb-danger: #E5484D; --pb-danger-50: #FDECED; /* Extended palette (added May 2026 with the test-page redesign — used by analytical surfaces like test_result.html for coral/amber/mint accents called out in the new claude.ai/design package). */ --pb-coral: #FF6B5C; --pb-amber: #FFB020; /* alias of --pb-warn for grade-B/B+ contexts */ --pb-mint: #A6E3C7; --pb-violet: #7C5CFF; --pb-ink-4: #94A0B5; /* decorative dots only — never readable text */ /* Typography */ --pb-font: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --pb-font-serif: 'Source Serif Pro', Georgia, "Times New Roman", serif; --pb-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Scale */ --pb-r-sm: 8px; --pb-r: 12px; --pb-r-lg: 18px; --pb-r-xl: 24px; --pb-shadow-sm: 0 1px 2px rgba(11,30,75,.06), 0 1px 1px rgba(11,30,75,.04); --pb-shadow-md: 0 10px 30px -10px rgba(11,30,75,.18), 0 4px 10px -4px rgba(11,30,75,.08); --pb-shadow-lg: 0 30px 60px -20px rgba(11,30,75,.28), 0 10px 20px -10px rgba(11,30,75,.12); } /* ---------------------------------------------------------------------------- Layer 2 — Opt-in re-skin (applies only to ) ---------------------------------------------------------------------------- */ body { /* ---------- Semantic tokens ---------- Brand primitives live in :root. App and template CSS should consume these SEMANTIC names instead of the brand primitives directly — so a future re-brand only edits theme.css and apps don't need to know about hex values at all. Mirrors DESIGN.md §2.2 verbatim. */ --surface-page: var(--pb-bg); --surface-section: var(--pb-bg-2); --surface-card: var(--pb-white); --surface-dark: var(--pb-navy); --surface-tint: var(--pb-blue-50); --text-primary: var(--pb-ink); --text-body: var(--pb-ink-2); --text-muted: var(--pb-ink-3); --text-on-dark: #ffffff; --text-on-dark-muted: rgba(255, 255, 255, .72); --border-default: var(--pb-line); --border-subtle: var(--pb-line-2); --border-strong: #CDD5E6; --border-on-dark: rgba(255, 255, 255, .12); --accent: var(--pb-blue); --accent-hover: var(--pb-blue-600); --accent-pressed: var(--pb-blue-700); --accent-tint: var(--pb-blue-50); --accent-tint-border: var(--pb-blue-100); --state-success: var(--pb-success); --state-warn: var(--pb-warn); --state-danger: var(--pb-danger); /* Bootstrap variable overrides — scoped, not global */ --bs-primary: #0A6BFF; --bs-primary-rgb: 10,107,255; --bs-secondary: #5B6686; --bs-secondary-rgb: 91,102,134; --bs-success: #16B27A; --bs-success-rgb: 22,178,122; --bs-danger: #E5484D; --bs-danger-rgb: 229,72,77; --bs-warning: #FFB020; --bs-warning-rgb: 255,176,32; --bs-body-font-family: var(--pb-font); --bs-body-font-size: 16px; --bs-body-color: #0D1530; --bs-body-bg: #FBFCFE; /* Headings inherit color from their parent container. Without this, Bootstrap 5.3's `h1-h6 { color: var(--bs-heading-color) }` resolves to null and h1 falls back to black, ignoring `.hero { color: white }` parents and producing dark-text-on-dark-bg. */ --bs-heading-color: inherit; --bs-border-color: #E5EAF4; --bs-border-radius: 12px; --bs-border-radius-sm: 8px; --bs-border-radius-lg: 18px; --bs-link-color: #0556D6; --bs-link-hover-color: #0445B0; /* Body */ font-family: var(--pb-font); /* --pb-ink-2 (lighter shade) is the body baseline since headings + paragraphs no longer set color directly — they inherit from here. Pages override at ancestor level (e.g. dark-hero { color: white }) and the override cascades into all child text without per-page heading/

color rules. */ color: var(--pb-ink-2); background: var(--pb-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } /* Headings, body text, links — wrapped in :where() so each rule has 0 specificity for the inner selector. Pages override without !important. Key conservatism rules learned the hard way: 1. theme.css must NOT apply layout-affecting properties (text-wrap: pretty, max-width on bare elements, etc) to broad selectors. Subtle re-flowing of paragraphs reaches into page layouts unexpectedly. 2. A bare `` color rule clobbers every link-styled-as-button (Google login, gradient CTAs, etc). Scope link color rules to INSIDE flowing text only; styled as buttons keeps whatever color their class sets. */ /* Headings: typography only, NO color rule. Headings inherit color from their nearest ancestor that sets `color` (default: body's --pb-ink). Why no color: pages with dark-hero parents (e.g. .ur-admin-header { color: white }) contain bare

children. A direct `color: var(--pb-ink)` rule here would beat inheritance and render dark-on-dark. Inheriting fixes that without per-page edits. / body :where(h1, h2, h3, h4, h5, h6) { font-family: var(--pb-font); letter-spacing: -.02em; font-weight: 700; text-wrap: balance; / `color: inherit` restores the natural cascade so headings inherit from their nearest ancestor (e.g. .hero { color: white }). Without this, legacy `static/css/style.css` has a global `h1, h2, ... { color: #00306e }` rule that wins over theme.css and renders dark text inside dark-hero parents. / color: inherit; } body :where(h1) { font-weight: 800; letter-spacing: -.03em; } / Body text: NO color rule.
inherits from nearest ancestor that sets `color`. Default = body's --pb-ink. Dark-hero parents that set `color: white` cascade through to
children automatically. Same reasoning as headings above. / / Text links inside flowing content. outside flowing text (buttons, nav items, gradient CTAs) keeps whatever color its class defines — theme.css does not touch them. This prevents blue text on gradient buttons. / body :where(p, li, td, blockquote, dd, span) :where(a) { color: var(--pb-blue-600); text-decoration: none; transition: .15s; } body :where(p, li, td, blockquote, dd, span) :where(a):hover { color: var(--pb-navy); } / Utility — monospace label and eyebrow / body .pb-mono { font-family: var(--pb-font-mono); } body .pb-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--pb-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--pb-blue-600); text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--pb-blue-100); border-radius: 999px; background: var(--pb-blue-50); } / Buttons — re-skin Bootstrap variants + app-wide button classes / body .btn { border-radius: var(--pb-r); font-weight: 600; font-family: var(--pb-font); transition: .15s ease; padding: 10px 18px; } body .btn-primary { background: var(--pb-ink); border-color: var(--pb-ink); color: #fff; } body .btn-primary:hover, body .btn-primary:focus { background: var(--pb-navy); border-color: var(--pb-navy); transform: translateY(-1px); box-shadow: var(--pb-shadow-md); } body .btn-outline-primary { border-color: var(--pb-line); color: var(--pb-ink); background: #fff; } body .btn-outline-primary:hover { background: var(--pb-bg-2); border-color: var(--pb-ink); color: var(--pb-ink); } body .btn-secondary { background: var(--pb-bg-2); color: var(--pb-ink-2); border-color: var(--pb-line); } body .btn-success { background: var(--pb-success); border-color: var(--pb-success); color: #fff; } body .btn-danger { background: var(--pb-danger); border-color: var(--pb-danger); color: #fff; } / Accent button — solid brand blue. Use for marketing CTAs that promote our own product. DESIGN.md §6.1: "When promoting our own product (CTAs in marketing)". One per screen ideal; equal-weight peers OK. / body .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; } body .btn-accent:hover, body .btn-accent:focus { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--pb-shadow-md); color: #fff; } / Ghost button — transparent with ink text. Use for toolbar actions and in-card actions where a solid button would compete with primary CTAs. / body .btn-ghost { background: transparent; border-color: transparent; color: var(--text-primary); } body .btn-ghost:hover, body .btn-ghost:focus { background: var(--surface-section); color: var(--text-primary); } / Note: .btn-link is NOT one of the canonical button variants implemented in this design system (see /design-system/ reference page — only the 6 visible variants primary / outline-primary / secondary / accent / ghost / success+danger ship). DESIGN.md §6.1 mentions a "link" variant in the spec table, but the implementation intentionally omits it to keep table-row actions using real buttons (outline + ghost) instead of bare text links. Use .btn-outline-primary.btn-sm for primary row actions and .btn-ghost.btn-sm for secondary/overflow row actions. / body .auth-btn, body .nav-cta-button, body .custom-popup { background: var(--pb-ink); color: #fff !important; border-radius: var(--pb-r); font-weight: 600; padding: 10px 20px; transition: .15s; border: 1px solid var(--pb-ink); } body .auth-btn:hover, body .nav-cta-button:hover, body .custom-popup:hover { background: var(--pb-navy); border-color: var(--pb-navy); color: #fff !important; } / Cards / surfaces / body .card, body .widget, body .custom-exam-card, body .course-card, body .instructor-card, body .blog-card { background: #fff; border: 1px solid var(--pb-line); border-radius: var(--pb-r-lg); box-shadow: var(--pb-shadow-sm); } / Forms / body .form-control, body .form-select, body .form-check-input { border-color: var(--pb-line); border-radius: var(--pb-r); font-family: var(--pb-font); color: var(--pb-ink); } body .form-control:focus, body .form-select:focus, body .form-check-input:focus { border-color: var(--pb-blue); box-shadow: 0 0 0 3px var(--pb-blue-50); outline: none; } body .form-label { color: var(--pb-ink-2); font-weight: 600; font-size: 14px; } / Form check inputs (radio + checkbox) — improve visibility over Bootstrap defaults. Bootstrap 5 ships these at 1em with a faint 1px border (~#dee2e6) which on white bg reads as a tiny gray dot. Test-taking flows need clear, immediately-clickable controls. Increase size, strengthen border. Brand colors on focus + checked. / body .form-check-input { width: 1.15em; height: 1.15em; border: 2px solid var(--pb-ink-3); margin-top: .175em; } body .form-check-input:hover { border-color: var(--pb-blue); } body .form-check-input:focus { border-color: var(--pb-blue); box-shadow: 0 0 0 .2rem var(--pb-blue-100); } body .form-check-input:checked { background-color: var(--pb-blue); border-color: var(--pb-blue); } / Badges / body .badge { border-radius: 999px; font-family: var(--pb-font-mono); font-weight: 600; font-size: 11px; letter-spacing: .04em; padding: 4px 10px; } / Bootstrap's .bg-primary/.bg-success/.bg-danger naturally compose with .bg-opacity-* via --bs-bg-opacity. We keep --bs--rgb tokens above re-mapped to PB palette so those utilities produce PB colors automatically. No !important overrides here — they would kill the rgba opacity calc and render solid-on-solid (e.g. bg-primary + bg-opacity-10 + text-primary = blue-on-blue and unreadable). / /* Bootstrap 5.0/5.1 polyfill for .bg-opacity-* utilities (added natively in 5.2+). 48 templates across the site use `bg-white bg-opacity-20` and similar; without this polyfill, the .bg-opacity-* class is silently ignored and a fully-opaque white box renders, hiding white text on top (e.g. test_detail.html "165 minutes" box on green hero). The CSS variable approach matches Bootstrap 5.2+'s API so any future Bootstrap upgrade just works. / .bg-opacity-5 { --bs-bg-opacity: 0.05; } .bg-opacity-10 { --bs-bg-opacity: 0.10; } .bg-opacity-15 { --bs-bg-opacity: 0.15; } .bg-opacity-20 { --bs-bg-opacity: 0.20; } .bg-opacity-25 { --bs-bg-opacity: 0.25; } .bg-opacity-50 { --bs-bg-opacity: 0.50; } .bg-opacity-75 { --bs-bg-opacity: 0.75; } .bg-opacity-100 { --bs-bg-opacity: 1; } / Force the rgba()-based bg utilities so .bg-opacity-* actually composes. Bootstrap 5.0 ships these as solid `background-color: #xxx !important`, which overrides the var() unless we re-declare. / body .bg-white { background-color: rgba(255, 255, 255, var(--bs-bg-opacity, 1)) !important; } body .bg-primary { background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; } body .bg-success { background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; } body .bg-danger { background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; } body .bg-warning { background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; } body .bg-info { background-color: rgba(var(--bs-info-rgb, 13, 202, 240), var(--bs-bg-opacity, 1)) !important; } body .bg-secondary { background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; } body .bg-dark { background-color: rgba(var(--bs-dark-rgb, 33, 37, 41), var(--bs-bg-opacity, 1)) !important; } / Tables / body .table { color: var(--pb-ink); --bs-table-border-color: var(--pb-line-2); } body .table > thead { background: var(--pb-bg-2); color: var(--pb-ink-3); font-family: var(--pb-font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } body .table > thead th { border-bottom: 1px solid var(--pb-line); padding: 12px 16px; font-weight: 600; } body .table > tbody td { padding: 14px 16px; } / Alerts / body .alert { border-radius: var(--pb-r); border-width: 1px; } body .alert-primary { background: var(--pb-blue-50); color: var(--pb-blue-700); border-color: var(--pb-blue-100); } body .alert-success { background: var(--pb-success-50); color: #0B6A43; border-color: #C5ECD9; } body .alert-warning { background: var(--pb-warn-50); color: #8A5A00; border-color: #FCE3AB; } body .alert-danger { background: var(--pb-danger-50); color: #A01F22; border-color: #F7C7C9; } / ============================================================================ COMPONENT PATTERNS — pre-built recipes from DESIGN.md §7. Apps and templates use these instead of re-implementing patterns inline. When migrating an app, rewire markup to these classes; brand changes flow from theme.css automatically. ============================================================================ / / Section header pattern — eyebrow + title + lead. Used on every marketing section and many in-app section openers. DESIGN.md §7.1. / body .pb-section-header { text-align: center; max-width: 720px; margin: 0 auto 48px; } body .pb-section-header .pb-eyebrow { margin-bottom: 16px; } body .pb-section-header h2 { font-size: 40px; line-height: 1.15; margin: 0 0 16px; } body .pb-section-header .pb-lead { font-size: 18px; color: var(--text-body); max-width: 50ch; margin: 0 auto; } body .pb-section-header.left { text-align: left; margin-left: 0; } body .pb-section-header.left .pb-lead { margin-left: 0; margin-right: 0; } / Stat strip — 3-4 metrics on a tinted background. DESIGN.md §7.3. / body .pb-stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; padding: 48px; background: var(--surface-tint); border-radius: var(--pb-r-xl); text-align: center; } body .pb-stat-strip .pb-stat-value { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.04em; color: var(--accent-hover); font-variant-numeric: tabular-nums; margin: 0 0 8px; } body .pb-stat-strip .pb-stat-label { font-family: var(--pb-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0; } / Feature triplet — 3-card row, equal height, no shadow at rest. DESIGN.md §7.2. / body .pb-feature-triplet { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } body .pb-feature-triplet .pb-feature-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--pb-r-lg); padding: 32px; transition: transform 180ms ease-out, box-shadow 180ms ease-out; } body .pb-feature-triplet .pb-feature-card:hover { transform: translateY(-2px); box-shadow: var(--pb-shadow-md); } body .pb-feature-triplet .pb-feature-card .pb-feature-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--pb-r-sm); background: var(--accent-tint); color: var(--accent-hover); margin-bottom: 16px; } body .pb-feature-triplet .pb-feature-card h4 { margin: 0 0 8px; font-size: 22px; } body .pb-feature-triplet .pb-feature-card p { margin: 0; font-size: 14px; line-height: 1.55; } / Empty state — centered illustration + h3 + body + button. DESIGN.md §7.6. No "Oops!" or sad-face emoji — the never-list catches that. / body .pb-empty-state { text-align: center; padding: 64px 24px; max-width: 480px; margin: 0 auto; } body .pb-empty-state .pb-empty-illustration { width: 200px; height: 200px; margin: 0 auto 24px; opacity: .9; } body .pb-empty-state h3 { margin: 0 0 8px; font-size: 24px; } body .pb-empty-state .pb-empty-body { color: var(--text-body); font-size: 18px; margin: 0 0 24px; } / Progress stepper — step circles + connectors. DESIGN.md §7.11. / body .pb-progress-stepper { display: flex; align-items: center; gap: 0; list-style: none; padding: 0; margin: 0; } body .pb-progress-stepper .pb-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; } body .pb-progress-stepper .pb-step + .pb-step::before { content: ""; position: absolute; top: 16px; left: -50%; width: 100%; height: 2px; background: var(--border-default); z-index: 0; } body .pb-progress-stepper .pb-step.is-complete + .pb-step::before { background: var(--accent); } body .pb-progress-stepper .pb-step-circle { width: 32px; height: 32px; border-radius: 999px; background: var(--surface-card); border: 2px solid var(--border-default); display: inline-flex; align-items: center; justify-content: center; font-family: var(--pb-font-mono); font-size: 13px; font-weight: 600; color: var(--text-muted); position: relative; z-index: 1; } body .pb-progress-stepper .pb-step.is-complete .pb-step-circle, body .pb-progress-stepper .pb-step.is-current .pb-step-circle { background: var(--accent); border-color: var(--accent); color: var(--text-on-dark); } body .pb-progress-stepper .pb-step-label { margin-top: 8px; font-size: 13px; color: var(--text-muted); } body .pb-progress-stepper .pb-step.is-current .pb-step-label { color: var(--text-primary); font-weight: 600; } / Elevated card variant — hover lifts more visibly. / body .pb-card-elevated { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--pb-r-lg); padding: 32px; box-shadow: var(--pb-shadow-sm); transition: transform 180ms ease-out, box-shadow 180ms ease-out; } body .pb-card-elevated:hover { transform: translateY(-2px); box-shadow: var(--pb-shadow-md); } / Accent stripe divider — brand signature, used in place of horizontal lines for section dividers. DESIGN.md §6.7. / body .pb-divider-stripe { display: block; width: 28px; height: 4px; background: var(--accent); border-radius: 2px; margin: 0 0 24px; } / Lead paragraph — slightly larger, pretty-wrapped for marketing copy. `text-wrap: pretty` is opt-in via this class; we don't apply it to bare
because it changes line-breaking globally and creates orphan-line surprises on legacy templates. / body :where(.pb-lead) { font-size: 20px; line-height: 1.55; color: var(--text-body); text-wrap: pretty; } / Mono eyebrow utility (also used in header pattern above). DESIGN.md §3.2. / / (defined earlier in the typography section as .pb-eyebrow) / / ============================================================================ Listening task-type chip (Phase 5A, May 2026) ---------------------------------------------------------------------------- A pill-shaped chip rendered above each listening clip's audio player to surface the clip's content_type (PTE Academic: "Write From Dictation", "Select Missing Word"; IELTS: "Conversation", "Lecture"; etc.). Sits inside `.ts-audio-stage` which has a dark navy gradient background and white text — the chip uses an opaque white surface so it stands out regardless of the parent palette, and its own explicit color tokens win over the parent's `color: white` inheritance. ============================================================================ / body.pb-themed .listening-test-shell .ts-task-chip, body .ts-task-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 12px; margin: 0 0 14px; background: var(--surface-card, #ffffff); border-left: 4px solid var(--accent, #e85d04); border-radius: 4px 999px 999px 4px; font-family: var(--pb-font-mono, ui-monospace, monospace); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); } body.pb-themed .listening-test-shell .ts-task-chip .ts-task-chip-eyebrow, body .ts-task-chip .ts-task-chip-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted, #6b7280); } body.pb-themed .listening-test-shell .ts-task-chip .ts-task-chip-sep, body .ts-task-chip .ts-task-chip-sep { color: var(--text-muted, #6b7280); font-weight: 700; / dot middot — keeps visual separation between eyebrow and label even if parent CSS strips the chip's flex/gap layout (e.g. stale browser cache). / } body.pb-themed .listening-test-shell .ts-task-chip .ts-task-chip-label, body .ts-task-chip .ts-task-chip-label { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-primary, #1f2937); } / ============================================================================ OET Speaking role-play card (Phase 3, May 2026) ---------------------------------------------------------------------------- Used by test_speaking.html (test-taking) AND test_result.html (result page) to render an OET Speaking role-play examiner card with SETTING / SCENARIO / TASKS / timing. The patient_brief field on the underlying SpeakingPrompt is examiner-only and intentionally NEVER rendered in either template. The card sits inside `.ts-sp-prompt-card` on the test-taking stage which sets `color: #f4f7fc` (near-white) on its children. Selectors below win on specificity (`body .oet-roleplay-card` = 0,0,2,1) so dark text always shows regardless of the parent stage's color inheritance — same approach as the "Dark-hero text" rule in CLAUDE.md. ============================================================================ / body .oet-roleplay-card { background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border-default); border-left: 6px solid var(--accent); border-radius: var(--pb-r-lg); padding: 24px 28px; margin-top: 12px; box-shadow: var(--pb-shadow-sm); font-family: var(--pb-font-body, inherit); font-size: 15px; line-height: 1.55; } body .oet-roleplay-card .oet-card-eyebrow { color: var(--accent); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; } body .oet-roleplay-card .oet-card-title { color: var(--text-primary); font-size: 20px; font-weight: 700; margin: 0 0 16px; line-height: 1.3; } body .oet-roleplay-card .oet-card-label { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; } body .oet-roleplay-card .oet-card-section { margin-bottom: 16px; } body .oet-roleplay-card .oet-card-setting { color: var(--text-primary); font-size: 18px; font-weight: 600; } body .oet-roleplay-card .oet-card-scenario { color: var(--text-body); } body .oet-roleplay-card .oet-card-scenario p { margin-bottom: 8px; } body .oet-roleplay-card .oet-card-tasks { color: var(--text-primary); margin: 0; padding-left: 20px; } body .oet-roleplay-card .oet-card-tasks li { color: var(--text-primary); margin-bottom: 6px; } body .oet-roleplay-card .oet-card-timing { color: var(--text-body); display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-default); font-size: 14px; } body .oet-roleplay-card .oet-card-timing strong { color: var(--text-primary); font-weight: 700; } body .oet-roleplay-card .oet-card-timing .oet-icon-prep { color: var(--state-success, #10b981); margin-right: 6px; } body .oet-roleplay-card .oet-card-timing .oet-icon-resp { color: var(--state-danger, #dc2626); margin-right: 6px; } / ============================================================================ LEGACY TEMPLATE ACCOMMODATIONS — narrowly-scoped fixes for shared chrome ============================================================================ / / Legacy template accommodations — fix visibility issues on shared chrome used across many pages. Keep narrowly-scoped to specific known classes. / / Page-content container width — match the nav's 1240px so chrome and content align on wide screens. Without this, Bootstrap's default `.container` goes to 1320px at the xxl breakpoint (≥1400px viewport) while nav-two locks to 1240px, making page content overflow the nav by 80px on each side. DESIGN.md §5 specifies 1240px for text-heavy pages (which marketing pages effectively are) and 1440px for wider content. 1240 chosen because the nav is already at 1240; widening would require updating the nav too. Switch to 1440 later if/when nav width is also updated. / body .container { max-width: 1240px; } / breadcrumbs hero subtitle has no color OR width constraint in style.css. On legacy pages it inherits body color (dark gray) and stretches full-width, producing ugly orphan-line wraps on wide screens. After pb-themed sets body color to dark navy, dark-on-dark made it invisible. Fix: white text + constrained line length + balanced wrap (so 2 lines have similar length). `margin: 0 auto` centers the block within the parent's text-align: center; without auto, the
stretches full-width and lines wrap weirdly. / body .breadcrumbs-subtitle { color: #fff; opacity: 0.9; font-size: 18px; max-width: 56ch; margin: 0 auto; text-align: center; text-wrap: balance; } / Selection / focus — scoped so unmigrated pages keep their existing styles / body ::selection { background: var(--pb-blue-100); color: var(--pb-ink); } body :focus-visible { outline: 2px solid var(--pb-blue); outline-offset: 2px; } / ============================================================ STAT WIDGET TYPOGRAPHY POLISH ============================================================ Zero-specificity defaults via :where() so per-page CSS still wins. Only sets typography (no color, no size) — color and font-size stay whatever the page sets. This makes every dashboard's numbers feel intentional: tabular-nums so digits align, tighter letter-spacing, slightly heavier weight. Applies to common stat-widget class names used across dashboards / result cards / kpi rows. ============================================================ / body :where(.metric-value, .stat-value, .kpi-value, .section-score, .score-display, .pp-score .n) { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; font-weight: 800; } / ============================================================ SIGNATURE ELEMENTS — see DESIGN.md §21 ============================================================ Eight visual moments that make a screen unmistakably PrepareBuddy. Reusable site-wide. Reach for these instead of inventing decorative widgets. Live reference: /design-system/ shows all 8. ============================================================ / / 01 · Band Ring — animated arc that fills to a band score / .sig-ring{position:relative;width:280px;height:280px;display:inline-block} .sig-ring svg{width:100%;height:100%;transform:rotate(-90deg)} .sig-ring .track{fill:none;stroke:var(--pb-line);stroke-width:14} .sig-ring .arc{fill:none;stroke-width:14;stroke-linecap:round;stroke-dasharray:760;stroke-dashoffset:232} / Stroke color is set per-page via the SVG `stroke="..."` presentation attribute (e.g. `stroke="url(#sigRingGrad)"` after defining a `` in ), or via the `--on-dark` variant which forces white. We deliberately don't set a default `stroke` in this base rule because CSS would override the inline stroke attribute and break per-page gradient references. / / Percent / unit suffix sitting next to the .num inside .center — properly baseline-aligned mono superscript. Use this instead of inline-styled which collides with tall digits. / .sig-ring .num-pct { font-size: 0.4em; font-family: var(--pb-font-mono); font-weight: 600; letter-spacing: 0.02em; vertical-align: 0.55em; margin-left: 6px; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: var(--pb-blue); } .sig-ring--on-dark .num-pct { color: rgba(255,255,255,0.85); } .sig-ring.animate .arc{stroke-dashoffset:760;animation:sigRingFill 1.6s cubic-bezier(.4,0,.2,1) .2s forwards} @keyframes sigRingFill{to{stroke-dashoffset:232}} .sig-ring .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center} .sig-ring .num{font-size:88px;font-weight:800;letter-spacing:-.04em;line-height:1;background:linear-gradient(135deg,var(--pb-blue),var(--pb-blue-600));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .sig-ring .lbl{font-family:var(--pb-font-mono);font-size:12px;color:var(--pb-ink-3);letter-spacing:.12em;text-transform:uppercase;margin-top:6px;font-weight:600} .sig-ring--sm{width:140px;height:140px} .sig-ring--sm .num{font-size:42px} .sig-ring--sm .lbl{font-size:10px;margin-top:2px} / Hero variant — fits inside a result-page header band, holds the existing .overall-score / .score-number text inside .center so JS animation continues to work (innerHTML replacement targets the inner div, ring SVG sibling stays intact). / .sig-ring--hero{width:240px;height:240px;display:block;margin:0 auto} .sig-ring--hero .center{padding:6px} / On-dark variant: white-stroke ring for navy/blue gradient hero backgrounds. Number color stays whatever the inner text already has (typically white). / .sig-ring--on-dark .track{stroke:rgba(255,255,255,.22)} .sig-ring--on-dark .arc{stroke:#fff} .sig-ring--on-dark .num{ background:none; -webkit-text-fill-color:initial; color:#fff; } / 02 · Voice Waveform — 12 bars, always blue gradient / .sig-wave{display:inline-flex;align-items:flex-end;gap:4px;height:64px} .sig-wave .b{width:6px;height:100%;border-radius:3px;background:linear-gradient(135deg,var(--pb-blue),var(--pb-blue-600));animation:sigWave 1.4s ease-in-out infinite;transform-origin:bottom} @keyframes sigWave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}} .sig-wave .b:nth-child(1){animation-delay:0s} .sig-wave .b:nth-child(2){animation-delay:.08s} .sig-wave .b:nth-child(3){animation-delay:.16s} .sig-wave .b:nth-child(4){animation-delay:.24s} .sig-wave .b:nth-child(5){animation-delay:.32s} .sig-wave .b:nth-child(6){animation-delay:.40s} .sig-wave .b:nth-child(7){animation-delay:.48s} .sig-wave .b:nth-child(8){animation-delay:.40s} .sig-wave .b:nth-child(9){animation-delay:.32s} .sig-wave .b:nth-child(10){animation-delay:.24s} .sig-wave .b:nth-child(11){animation-delay:.16s} .sig-wave .b:nth-child(12){animation-delay:.08s} .sig-wave.static .b{animation:none} .sig-wave.static .b:nth-child(1){height:30%} .sig-wave.static .b:nth-child(2){height:55%} .sig-wave.static .b:nth-child(3){height:80%} .sig-wave.static .b:nth-child(4){height:65%} .sig-wave.static .b:nth-child(5){height:90%} .sig-wave.static .b:nth-child(6){height:100%} .sig-wave.static .b:nth-child(7){height:75%} .sig-wave.static .b:nth-child(8){height:45%} .sig-wave.static .b:nth-child(9){height:70%} .sig-wave.static .b:nth-child(10){height:50%} .sig-wave.static .b:nth-child(11){height:35%} .sig-wave.static .b:nth-child(12){height:20%} / 03 · Annotated Essay — serif passage with AI feedback overlays / .sig-essay{background:#fff;border:1px solid var(--pb-line);border-radius:22px;padding:32px 36px;font-family:Georgia,serif;font-size:18px;line-height:1.7;color:var(--pb-ink);box-shadow:var(--pb-shadow-md);position:relative} .sig-essay::before{content:'Task 2 · sample';position:absolute;top:-13px;left:24px;font-family:var(--pb-font-mono);font-size:11px;color:var(--pb-blue-600);background:var(--pb-blue-50);border:1px solid var(--pb-blue-100);padding:4px 12px;border-radius:999px;letter-spacing:.08em;text-transform:uppercase;font-weight:600} .sig-essay.no-pill::before{content:none;display:none} .sig-essay .ann{position:relative;cursor:help;padding:0 2px;border-radius:4px} .sig-essay .ann.good{background:rgba(22,178,122,.12);border-bottom:2px solid var(--pb-success)} .sig-essay .ann.bad{background:rgba(229,72,77,.10);border-bottom:2px solid var(--pb-danger)} .sig-essay .ann.tip{background:rgba(10,107,255,.10);border-bottom:2px solid var(--pb-blue)} .sig-essay .ann.warn{background:rgba(255,176,32,.14);border-bottom:2px solid #FFB020} .sig-essay .ann .pop{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);background:var(--pb-ink);color:#fff;font-family:var(--pb-font);font-size:12px;font-weight:500;padding:8px 12px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:var(--pb-shadow-md);z-index:5} .sig-essay .ann:hover .pop{opacity:1} .sig-essay .ann .tag{display:inline-block;vertical-align:super;margin-left:3px;font-family:var(--pb-font-mono);font-size:8px;font-weight:700;padding:2px 5px;border-radius:3px;letter-spacing:.08em;color:#fff} .sig-essay .ann.good .tag{background:var(--pb-success)} .sig-essay .ann.bad .tag{background:var(--pb-danger)} .sig-essay .ann.tip .tag{background:var(--pb-blue)} .sig-essay .ann.warn .tag{background:#FFB020} / 04 · Before → After Pillar — "after" is always blue and always larger / .sig-pillars{display:flex;align-items:stretch;gap:24px;justify-content:center;flex-wrap:wrap} .sig-pillar{flex:1;min-width:200px;max-width:280px;padding:28px 24px;border-radius:20px;text-align:center;background:#fff;border:2px solid var(--pb-line)} .sig-pillar.win{background:var(--pb-blue);border-color:var(--pb-blue);color:#fff;transform:scale(1.06);box-shadow:var(--pb-shadow-lg)} .sig-pillar .ll{font-family:var(--pb-font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--pb-ink-3);margin-bottom:14px;font-weight:600} .sig-pillar.win .ll{color:var(--pb-blue-100)} .sig-pillar .num{font-size:80px;font-weight:800;letter-spacing:-.04em;line-height:.9} .sig-pillar .meta{font-size:13px;margin-top:10px;color:var(--pb-ink-2);font-weight:500} .sig-pillar.win .meta{color:var(--pb-blue-100)} .sig-arrow{display:grid;place-items:center;font-size:40px;font-weight:800;color:var(--pb-blue)} / 05 · Live Ticker — auto-scrolling band of recent wins / .sig-ticker{overflow:hidden;position:relative;background:#fff;border:1px solid var(--pb-line);border-radius:999px;padding:13px 0;box-shadow:var(--pb-shadow-sm);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .sig-ticker-track{display:inline-flex;gap:42px;white-space:nowrap;animation:sigTicker 40s linear infinite;padding-left:42px} .sig-ticker:hover .sig-ticker-track{animation-play-state:paused} @keyframes sigTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}} .sig-ticker-item{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--pb-ink-2)} .sig-ticker-item .live{width:8px;height:8px;border-radius:999px;background:var(--pb-success);box-shadow:0 0 10px var(--pb-success);animation:sigPulse 2s ease-in-out infinite} @keyframes sigPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}} .sig-ticker-item b{color:var(--pb-ink);font-weight:700} .sig-ticker-item .arrow{color:var(--pb-blue);font-weight:700} .sig-ticker-item .delta{color:var(--pb-success);font-weight:700;font-family:var(--pb-font-mono);font-size:12px} / 06 · Aurora Background — slow animated mesh, MAX ONE PER PAGE / .sig-aurora{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit} .sig-aurora .blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;mix-blend-mode:screen} .sig-aurora .b1{width:480px;height:480px;background:var(--pb-blue);left:-120px;top:-120px;animation:sigFloat1 14s ease-in-out infinite} .sig-aurora .b2{width:520px;height:520px;background:#6E8BFF;right:-160px;top:-80px;animation:sigFloat2 18s ease-in-out infinite} .sig-aurora .b3{width:380px;height:380px;background:#00D4FF;left:30%;bottom:-160px;opacity:.35;animation:sigFloat3 22s ease-in-out infinite} @keyframes sigFloat1{0%,100%{transform:translate(0,0)}33%{transform:translate(80px,60px)}66%{transform:translate(-40px,100px)}} @keyframes sigFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-100px,80px)}} @keyframes sigFloat3{0%,100%{transform:translate(0,0)}50%{transform:translate(120px,-60px)}} / 07 · Big Number — oversized count-up stat with mono kicker / .sig-bignum{text-align:center} .sig-bignum .ll{font-family:var(--pb-font-mono);font-size:11px;color:var(--pb-ink-3);letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;font-weight:600} .sig-bignum .n{font-size:96px;font-weight:800;letter-spacing:-.05em;line-height:.9;background:linear-gradient(135deg,var(--pb-blue),var(--pb-blue-600));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .sig-bignum .body{font-size:14px;color:var(--pb-ink-2);margin-top:8px;font-weight:500} / 08 · Hand-drawn Underline — SVG accent, MAX ONE PER PAGE Default = brand blue on light backgrounds. .hl.on-dark variant = white for use inside dark hero strips (per DESIGN.md §21.8). / .hl{position:relative;display:inline-block;padding:0 4px} .hl svg{position:absolute;left:0;right:0;bottom:-8px;width:100%;height:16px;pointer-events:none;overflow:visible} .hl path{stroke:var(--pb-blue);stroke-width:3;fill:none;stroke-linecap:round;stroke-dasharray:600;stroke-dashoffset:600;animation:sigDraw 1.4s cubic-bezier(.4,0,.2,1) .3s forwards} .hl.on-dark path{stroke:#fff} / Catch-all: any .hl inside a known dark hero is automatically on-dark. Lets pages drop `.hl` without remembering to add `.on-dark` on each instance. / :is(.dashboard-header,.evaluation-header,.assignment-header,.assessment-header,.assign-header,.create-header,.edit-header,.review-header,.feedback-header,.performance-header,.search-header,.submit-header,.submission-header,.teacher-header,.batch-dashboard-header,.batch-header,.batch-results-header,.ledger-header,.rubric-header,.compare-header,.config-header,.overview-header,.references-header,.reference-header,.upload-header,.debug-header,.ai-header,.analytics-header,.clone-header,.evaluate-header,.preview-header,.form-header,.delete-header,.ai-models-header,.comparison-header,.edit-feedback-header,.dark-hero,.cream-hero,.detail-hero,.test-hero,.batch-hero,.dh-hero) .hl path{stroke:#fff} @keyframes sigDraw{to{stroke-dashoffset:0}} / Signature showcase grid — used on landing page + design-system reference / .sig-section{padding:80px 0;background:var(--pb-bg-2)} .sig-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:40px} .sig-card{background:#fff;border:1px solid var(--pb-line);border-radius:22px;padding:36px;box-shadow:var(--pb-shadow-sm)} .sig-card .meta{font-family:var(--pb-font-mono);font-size:11px;color:var(--pb-blue);letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:14px} .sig-card h3{font-size:22px;margin-bottom:8px;color:var(--pb-ink)} .sig-card p{font-size:14.5px;color:var(--pb-ink-2)} .sig-c-ring{grid-column:span 4;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px} .sig-c-essay{grid-column:span 8} .sig-c-pillars{grid-column:span 7} .sig-c-bignum{grid-column:span 5;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;background:var(--pb-ink);color:#fff;border-color:var(--pb-ink)} .sig-c-bignum .meta{color:var(--pb-blue-100)} .sig-c-bignum .body{color:rgba(255,255,255,.7)} .sig-c-bignum h3{color:#fff} @media(max-width:900px){.sig-c-ring,.sig-c-essay,.sig-c-pillars,.sig-c-bignum{grid-column:span 12}} / ============================================================ PB BREADCRUMB — canonical brand breadcrumb header Used at the top of internal pages (dashboards, lists, detail pages, results) to anchor location + page title. Promoted from static/css/modern-breadcrumbs.css so every pb-themed page gets it without per-page imports. See DESIGN.md. Markup pattern:

{{ page_title }}

Home

Section

Current page

The legacy `.breadcrumbs` class is kept as an alias so the ~10 templates still using that name keep rendering correctly without per-page edits. ============================================================ / body.pb-themed .pb-breadcrumb, body.pb-themed .breadcrumbs{ background: linear-gradient(135deg, var(--pb-navy) 0%, var(--pb-blue-600) 100%); padding: 32px 0; margin-bottom: 32px; position: relative; overflow: hidden; } body.pb-themed .pb-breadcrumb::before, body.pb-themed .breadcrumbs::before{ content:''; position:absolute; inset:0; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events:none; } body.pb-themed .pb-breadcrumb .container, body.pb-themed .breadcrumbs .container{ position:relative; z-index:1; } body.pb-themed .pb-breadcrumb-content, body.pb-themed .breadcrumbs-content{ position:relative; z-index:1; } body.pb-themed .pb-breadcrumb .page-title, body.pb-themed .breadcrumbs .page-title{ color:#fff; font-size: 2rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 10px; } body.pb-themed .pb-breadcrumb .breadcrumb-nav, body.pb-themed .breadcrumbs .breadcrumb-nav{ list-style:none; padding:0; margin:0; display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-family: var(--pb-font-mono); font-size: .82rem; letter-spacing: .04em; } body.pb-themed .pb-breadcrumb .breadcrumb-nav li, body.pb-themed .breadcrumbs .breadcrumb-nav li{ display:flex; align-items:center; color: rgba(255,255,255,.85); } body.pb-themed .pb-breadcrumb .breadcrumb-nav li a, body.pb-themed .breadcrumbs .breadcrumb-nav li a{ color: rgba(255,255,255,.85); text-decoration:none; padding: 3px 8px; border-radius: 6px; transition: background .2s ease, color .2s ease; } body.pb-themed .pb-breadcrumb .breadcrumb-nav li a:hover, body.pb-themed .breadcrumbs .breadcrumb-nav li a:hover{ color:#fff; background: rgba(255,255,255,.12); } body.pb-themed .pb-breadcrumb .breadcrumb-nav li:not(:last-child)::after, body.pb-themed .breadcrumbs .breadcrumb-nav li:not(:last-child)::after{ content:'›'; margin: 0 6px; color: rgba(255,255,255,.55); font-size: 1.1rem; font-weight: 300; font-family: var(--pb-font); } body.pb-themed .pb-breadcrumb .breadcrumb-nav li:last-child, body.pb-themed .breadcrumbs .breadcrumb-nav li:last-child{ color:#fff; font-weight: 600; } body.pb-themed .pb-breadcrumb .breadcrumb-nav li i, body.pb-themed .pb-breadcrumb .breadcrumb-nav li .fas, body.pb-themed .pb-breadcrumb .breadcrumb-nav li .far, body.pb-themed .breadcrumbs .breadcrumb-nav li i, body.pb-themed .breadcrumbs .breadcrumb-nav li .fas, body.pb-themed .breadcrumbs .breadcrumb-nav li .far{ margin-right: 5px; font-size: .85rem; } @media (max-width: 768px){ body.pb-themed .pb-breadcrumb, body.pb-themed .breadcrumbs{ padding: 22px 0; } body.pb-themed .pb-breadcrumb .page-title, body.pb-themed .breadcrumbs .page-title{ font-size: 1.45rem; } body.pb-themed .pb-breadcrumb .breadcrumb-nav, body.pb-themed .breadcrumbs .breadcrumb-nav{ font-size: .75rem; } } / Compact variant for tight pages / body.pb-themed .pb-breadcrumb.is-compact, body.pb-themed .breadcrumbs.breadcrumbs-compact{ padding: 16px 0; margin-bottom: 22px; } body.pb-themed .pb-breadcrumb.is-compact .page-title, body.pb-themed .breadcrumbs.breadcrumbs-compact .page-title{ font-size: 1.4rem; margin-bottom: 6px; } / ============================================================================ ASSESSMENT-APP COMPONENT VOCABULARY (May 2026) ---------------------------------------------------------------------------- Patterns ported from the Claude Design assessment-preview bundle. These are the building blocks for the teacher dashboard, assessment-detail, review (essay grading), rubric editor, batch evaluation, teacher calibration, and student-feedback views. All values pull from existing :root tokens — no new hex literals introduced. The few rgba(...) overlays embed brand token RGB values so a theme re-color automatically cascades. Hand-picked variants (story-card.warn etc.) reuse our existing semantic tints (--pb-warn-50, --pb-danger-50). Scope: rules apply globally to . Templates that already define one of these class names locally (e.g. .dash-hero on language_tests dashboard, .criterion-card on assessment/edit_rubric.html) keep their page-specific look because their inline