/* ============================================================================ 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; /* Typography */ --pb-font: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-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); } 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) / / ============================================================================ 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; }