/* ─── Self-hosted brand fonts ─────────────────────────────────────────── Served same-origin from /fonts/ so they load behind Piedmont's firewall (the external CDN was blocked at work → fonts fell back to Playfair/Arial). Neo Sans is brand-approved for logo lockups / headline signage only. */ @font-face{ font-family:'Neo Sans Std Black'; src:url('/fonts/neo-sans-black.woff2') format('woff2'), url('/fonts/neo-sans-black.woff') format('woff'); font-weight:400 900;font-style:normal;font-display:swap; } @font-face{ font-family:'Neo Sans Std Regular'; src:url('/fonts/neo-sans-regular.woff2') format('woff2'), url('/fonts/neo-sans-regular.woff') format('woff'); font-weight:400 700;font-style:normal;font-display:swap; } /** * PACER Piedmont Theme — pacer-theme.css * ───────────────────────────────────── * Edit the variables in :root to make wholesale color/font changes. * Everything else in this file references those variables. * * Sections: * 1. Brand Variables * 2. Typography * 3. Page / Body * 4. Navigation & Header * 5. Buttons * 6. Cards & Panels * 7. Stats & Completion Ring * 8. Inline Style Overrides (catch React's inline colors) * 9. Component Fixes */ /* ═══════════════════════════════════════════════════════ 1. BRAND VARIABLES Change values here to restyle the entire app at once. ═══════════════════════════════════════════════════════ */ :root { /* Primary brand colors */ --color-primary: #BE3527; /* Piedmont Crimson — nav, CTAs, headings */ --color-secondary: #E76E24; /* Piedmont Orange — hover, accents */ --color-amber: #FBB923; /* Piedmont Amber — borders, highlights */ /* Backgrounds */ --color-bg-body: #F0EEE9; /* Piedmont Cream — page background */ --color-bg-card: #ffffff; /* White — card surfaces */ --color-bg-section: #ffffff; /* White — section backgrounds */ /* Text */ --color-text: #333333; /* Charcoal — body copy */ --color-text-light: #666666; /* Gray — secondary text */ --color-text-inverse: #ffffff; /* White — on dark backgrounds */ /* UI details */ --color-border: #e0ddd8; /* Subtle border for cards/dividers */ --radius-btn: 8px; /* Button corner radius */ --radius-card: 8px; /* Card corner radius */ /* Typography */ --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; --font-size-body: 15px; --line-height-body: 1.6; } /* ═══════════════════════════════════════════════════════ 2. TYPOGRAPHY ═══════════════════════════════════════════════════════ */ /* Base UI font: Roboto, inherited by everything. The old blanket `body * { font-family: Roboto !important }` was removed — it overrode Neo Sans on headings and the login wordmark. Playfair/Lora are now killed at the source, so body copy still resolves to Roboto (inherited) while headings pick up Neo Sans via their inline styles + the rules below. */ html, body { font-family: var(--font-body) !important; } input, select, textarea, button { font-family: var(--font-body); } body p, body li, body td, body span:not([class*="icon"]):not([class*="badge"]) { font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-text); } h1, h2, h3 { color: var(--color-primary); font-weight: 700; } h4, h5, h6 { color: var(--color-text); font-weight: 600; } /* Piedmont branding font — Neo Sans for signage-scale headings. Brand-approved for logo lockups / headline signage; body copy stays Roboto. Loaded in index.html . Falls back to Roboto if the CDN face fails. */ h1 { font-family: 'Neo Sans Std Black', var(--font-body) !important; letter-spacing: 0.01em !important; } h2, h3 { font-family: 'Neo Sans Std Regular', var(--font-body) !important; } /* Section header bars — was WMOE gold, now Piedmont crimson with white Neo Sans text. Class added to the section-header template in index.html. The '.pacer-shead *' selector outranks the global Roboto rule so the heading font actually lands on the (div-based) section titles. */ .pacer-shead { background: linear-gradient(135deg, #BE3527 0%, #A62D21 100%) !important; } .pacer-shead, .pacer-shead * { color: #ffffff !important; font-family: 'Neo Sans Std Regular', var(--font-body) !important; } /* Report / checklist task rows — the long task title ({{ t.title }}) was collapsing the 1fr column into a vertical sliver that overlapped the rows above. Force a real minimum width for the title column and let it wrap normally, and top-align so tall titles push the row down instead of over. */ [style*="1fr 150px 148px 96px"] { grid-template-columns: minmax(240px, 1fr) 120px 118px 84px !important; align-items: start !important; } [style*="1fr 150px 148px 96px"] > div:first-child { min-width: 0 !important; align-items: start !important; } [style*="1fr 150px 148px 96px"] > div:first-child > span:last-child { overflow-wrap: anywhere !important; word-break: normal !important; line-height: 1.4 !important; } a { color: var(--color-secondary); } a:hover { color: var(--color-primary); } /* ═══════════════════════════════════════════════════════ 3. PAGE / BODY ═══════════════════════════════════════════════════════ */ html, body { background: var(--color-bg-body) !important; } /* ═══════════════════════════════════════════════════════ 4. NAVIGATION & HEADER ═══════════════════════════════════════════════════════ */ header, nav, [role="navigation"], [role="menubar"] { background: var(--color-primary) !important; color: var(--color-text-inverse) !important; overflow: visible !important; } /* Nav links / tabs */ nav a, nav button, [role="menubar"] a, [role="menubar"] button, [role="tab"], [role="menuitem"] { color: var(--color-text-inverse) !important; } /* Hover state — subtle white wash */ nav a:hover, nav button:hover, [role="menubar"] a:hover, [role="menubar"] button:hover, [role="tab"]:hover, [role="menuitem"]:hover { background: rgba(255, 255, 255, 0.18) !important; } /* Force nav/header to crimson even when React sets inline navy */ header[style*="rgb(32, 49, 103)"], header[style*="rgb(32,49,103)"], header[style*="rgb(42, 65, 122)"], header[style*="rgb(42,65,122)"], nav[style*="rgb(32, 49, 103)"], nav[style*="rgb(32,49,103)"], nav[style*="rgb(42, 65, 122)"], nav[style*="rgb(42,65,122)"], [role="navigation"][style*="rgb(32, 49, 103)"], [role="menubar"][style*="rgb(32, 49, 103)"] { background: var(--color-primary) !important; color: var(--color-text-inverse) !important; } /* User badge pill */ #pacer-user-badge { border: 1.5px solid rgba(255, 255, 255, 0.75) !important; border-radius: 20px !important; box-sizing: border-box !important; } /* Sign-out pill */ #pacer-signout { border: 1px solid rgba(255, 255, 255, 0.65) !important; } /* ═══════════════════════════════════════════════════════ 5. BUTTONS ═══════════════════════════════════════════════════════ */ /* Primary — solid crimson */ button:not([id^="pacer"]):not([class*="secondary"]):not([class*="outline"]), a[role="button"]:not([class*="secondary"]):not([class*="outline"]), [class*="btn-primary"], [class*="button-primary"] { background: var(--color-primary) !important; color: var(--color-text-inverse) !important; border: none !important; border-radius: var(--radius-btn) !important; font-size: 14px !important; font-weight: 500 !important; padding: 10px 20px !important; cursor: pointer !important; transition: background 0.2s !important; } button:not([id^="pacer"]):not([class*="secondary"]):not([class*="outline"]):hover { background: var(--color-secondary) !important; } /* Secondary — outline only */ [class*="btn-secondary"], [class*="button-secondary"], [class*="btn-outline"] { background: transparent !important; color: var(--color-primary) !important; border: 2px solid var(--color-primary) !important; border-radius: var(--radius-btn) !important; font-size: 14px !important; font-weight: 500 !important; padding: 9px 20px !important; cursor: pointer !important; } /* ═══════════════════════════════════════════════════════ 6. CARDS & PANELS ═══════════════════════════════════════════════════════ */ [class*="card"], [class*="panel"], [class*="accordion"] { background: var(--color-bg-card) !important; border-radius: var(--radius-card) !important; border: 1px solid var(--color-border) !important; } /* ═══════════════════════════════════════════════════════ 7. STATS & COMPLETION RING ═══════════════════════════════════════════════════════ */ /* Kill off-brand blue on stat numbers and links */ [style*="color:#2b6cb0"], [style*="color: #2b6cb0"], [style*="color:rgb(43, 108, 176)"], [style*="color:rgb(43,108,176)"], [style*="color:#3182ce"], [style*="color:#4299e1"] { color: var(--color-secondary) !important; } /* Completion ring — ensure visible size */ [class*="ring"], [class*="donut"], [class*="progress-circle"], [class*="circle-progress"] { min-width: 80px !important; min-height: 80px !important; } /* Checkboxes and radios */ input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary) !important; } /* ═══════════════════════════════════════════════════════ 8. INLINE STYLE OVERRIDES Catch colors React sets directly on elements. ═══════════════════════════════════════════════════════ */ /* WMOE Navy → primary crimson (text/border context) */ [style*="203167"] { color: var(--color-primary) !important; border-color: var(--color-primary) !important; } /* WMOE Navy as background → white section */ [style*="background:#203167"], [style*="background: #203167"], [style*="backgroundColor:#203167"], [style*="rgb(32, 49, 103)"], [style*="rgb(32,49,103)"], [style*="rgb(42, 65, 122)"], [style*="rgb(42,65,122)"], [style*="rgb(22, 34, 74)"], [style*="rgb(22,34,74)"], [style*="rgb(28, 35, 51)"], [style*="rgb(28,35,51)"] { background: var(--color-bg-section) !important; color: var(--color-text) !important; } /* Kill black utility bars → cream */ [style*="background:#000"], [style*="background: #000"], [style*="background:#000000"], [style*="background:#111111"], [style*="background:#1a1a1a"], [style*="background:black"], [style*="backgroundColor:#000"], [style*="backgroundColor:#000000"], [style*="backgroundColor:#111111"], [style*="backgroundColor:black"] { background: var(--color-bg-body) !important; color: var(--color-text) !important; } /* WMOE Green CTA → crimson */ [style*="11a851"], [style*="11A851"], [style*="17a84b"], [style*="17A84B"], [style*="17, 168"], [style*="17,168"], [style*="23, 168"], [style*="23,168"] { background-color: var(--color-primary) !important; background: var(--color-primary) !important; color: var(--color-text-inverse) !important; border-color: var(--color-primary) !important; accent-color: var(--color-primary) !important; } /* White text on Piedmont brand backgrounds */ [style*="background:#BE3527"], [style*="background:#E76E24"], [style*="backgroundColor:#BE3527"], [style*="backgroundColor:#E76E24"] { color: var(--color-text-inverse) !important; } /* Gold amber borders */ [style*="rgb(198, 164, 81)"], [style*="rgb(198,164,81)"] { border-color: var(--color-amber) !important; border-left-color: var(--color-amber) !important; } /* ═══════════════════════════════════════════════════════ 9. COMPONENT FIXES ═══════════════════════════════════════════════════════ */ /* Accordion description blocks (injected by pacer-descriptions.js) */ .pacer-desc { font-size: 13px !important; line-height: 1.55 !important; color: #555 !important; margin: 8px 0 4px 0 !important; padding: 8px 14px !important; border-left: 3px solid var(--color-primary) !important; background: rgba(190, 53, 39, 0.04) !important; border-radius: 0 6px 6px 0 !important; font-style: italic !important; } /* ═══════════════════════════════════════════════════════ 10. SPRINT 11 — COMPREHENSIVE BRAND FIX PASS (2026-07-12) ═══════════════════════════════════════════════════════ */ /* ── Progress Bars: solid crimson, strip all green/gold gradients ── */ [role="progressbar"], [class*="progress-bar"], [class*="progressBar"], [class*="Progress-bar"], [class*="ProgressBar"] { background: #BE3527 !important; background-image: none !important; background-color: #BE3527 !important; } [role="progressbar"]::-webkit-progress-value, [class*="progress-bar"]::-webkit-progress-value { background: #BE3527 !important; } /* Kill any inline gradient on progress elements */ [style*="gradient"][role="progressbar"], [style*="gradient"][class*="progress"] { background: #BE3527 !important; background-image: none !important; } /* Backup for the real bare
fill, tagged by addProgressAnimations() in pacer-animations.js — prevents a gold/green flash on first paint before the JS runs. */ [data-pacer-progress] { background: #BE3527 !important; background-image: none !important; } /* ── Section / Accordion Headers: crimson bg, white text ── */ /* Scoped to real accordion-header classes only. The bare button[aria-expanded] match was removed (Sprint 12): it also caught the curriculum sidebar's expand/collapse buttons, painting their labels white-on-white. Those buttons now inherit --color-text (#333). */ [class*="accordion-header"], [class*="accordionHeader"], [class*="section-header"], [class*="sectionHeader"], [class*="group-header"], [class*="groupHeader"] { background: #BE3527 !important; color: #ffffff !important; } [class*="accordion-header"] *, [class*="accordionHeader"] *, [class*="section-header"] *, [class*="sectionHeader"] * { color: #ffffff !important; } /* ── Task Row Shading: subtle amber tint (was crimson, originally green) ── */ /* Crimson read as an alert/error state — wrong signal for "user added progress info." Sprint 12: swapped hue to amber (--color-amber #FBB923) at ~7%, keeping the same light lightness/alpha. Single source of truth for this state. */ [class*="task-row"], [class*="taskRow"], [class*="task-item"], [class*="taskItem"], [class*="checklist-item"], [class*="checklistItem"] { background: rgba(190, 53, 39, 0.10) !important; } [style*="rgba(17, 168"] { background: rgba(190, 53, 39, 0.10) !important; } [style*="rgba(17,168"] { background: rgba(190, 53, 39, 0.10) !important; } /* ── WMOE Gold → Piedmont Goldenrod ── */ [style*="c6a451"], [style*="C6A451"], [style*="e0c583"], [style*="E0C583"] { color: #F89821 !important; border-color: #F89821 !important; } [style*="background:#c6a451"], [style*="background: #c6a451"], [style*="backgroundColor:#c6a451"], [style*="background:#e0c583"], [style*="background: #e0c583"], [style*="backgroundColor:#e0c583"] { background: #F89821 !important; background-color: #F89821 !important; } /* ── Curriculum Sidebar / Category Labels: crimson ── */ [class*="curriculum-label"], [class*="curriculumLabel"], [class*="sidebar-label"], [class*="sidebarLabel"], [class*="nav-section-label"],[class*="category-label"] { color: #BE3527 !important; font-weight: 600 !important; } /* ── Header: force white on all children ── */ header > *, header > * > *, header span:not([id^="pacer"]), header div:not([id^="pacer"]):not([class*="logout"]), header p, header small { color: #ffffff !important; } /* ── Header Stats / Animated Counters: gold ── */ header [class*="stat"], header [class*="Stat"], header [class*="count"], header [class*="Count"], header [class*="number"], header [class*="Number"], header [class*="score"], header [class*="Score"], header [class*="metric"], header [class*="Metric"], header [class*="percent"], header [class*="Percent"], [class*="stat-value"], [class*="statValue"], [class*="counter"], [class*="Counter"] { color: #FBB923 !important; } /* ── Nav Buttons: heavier weight + gold underline on active ── */ nav a, nav button, [role="menubar"] a, [role="menubar"] button, [role="tab"], [role="menuitem"] { font-weight: 700 !important; letter-spacing: 0.01em !important; } [role="tab"][aria-selected="true"], [class*="tab-active"], [class*="tabActive"], [class*="tab--active"], [class*="tab--selected"], nav a.active, nav button.active { border-bottom: 3px solid #FBB923 !important; background: rgba(255, 255, 255, 0.12) !important; } /* ── "Make All Applicable" pill: crimson/readable ── */ [class*="applicable"], [class*="apply-all"], [class*="applyAll"], .pacer-applicable-pill { color: #ffffff !important; background: #BE3527 !important; border: 1px solid #BE3527 !important; opacity: 1 !important; } /* ── Training Profile / Setup tab header ── */ [class*="training-profile"], [class*="trainingProfile"], [class*="profile-section-header"], [class*="setup-header"], .pacer-training-header { background: #BE3527 !important; color: #ffffff !important; } [class*="training-profile"] *, [class*="trainingProfile"] *, .pacer-training-header * { color: #ffffff !important; } /* ── Footer: fix z-index so it sits under everything ── */ #pacer-footer { position: relative !important; z-index: 0 !important; } /* ── Assign Mode action bar: above all overlays ── */ #pacer-assign-bar { z-index: 9600 !important; } /* ── FAB Buttons: no blue, all Piedmont palette ── */ #pacer-campus-toggle { background: #F89821 !important; color: #ffffff !important; box-shadow: 0 3px 10px rgba(248,152,33,0.45) !important; } #pacer-campus-toggle:hover { background: #D67F0F !important; transform: translateY(-1px); } #pacer-dir-toggle { background: #C0452C !important; color: #ffffff !important; box-shadow: 0 3px 10px rgba(192,69,44,0.45) !important; } #pacer-dir-toggle:hover { background: #9E341F !important; transform: translateY(-1px); } /* Mobile FAB: campus goldenrod, directory deeper crimson */ #mob-campus { background: #F89821 !important; color: #fff !important; } #mob-dir { background: #C0452C !important; color: #fff !important; } /* ── Trainee name display: bold gold, no pill background ── */ .pacer-trainee-styled { font-weight: 800 !important; color: #F89821 !important; background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ── Tooltip for Epic section callouts ── */ .pacer-tooltip-wrap { position: relative; display: inline; } .pacer-tooltip-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #BE3527; color: #fff; font-size: 10px; font-weight: 700; cursor: help; margin-left: 5px; vertical-align: middle; font-style: normal; flex-shrink: 0; line-height: 1; } .pacer-tooltip-bubble { display: none; position: absolute; left: 24px; top: -6px; width: 240px; background: #222; color: #fff; font-size: 12px; line-height: 1.5; padding: 8px 11px; border-radius: 6px; z-index: 9999; box-shadow: 0 4px 16px rgba(0,0,0,0.35); pointer-events: none; white-space: normal; font-style: normal; font-weight: 400; } .pacer-tooltip-wrap:hover .pacer-tooltip-bubble { display: block; } /* ── Admin Portal Modal ── */ #pacer-admin-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 9700; align-items: center; justify-content: center; font-family: 'Roboto', sans-serif; } #pacer-admin-overlay.open { display: flex; } #pacer-admin-modal { background: #fff; border-radius: 12px; width: 90%; max-width: 640px; max-height: 82vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 8px 40px rgba(0,0,0,0.3); } #pacer-admin-header { background: #BE3527; color: #fff; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } #pacer-admin-header h2 { margin: 0; font-size: 18px; font-weight: 700; color: #fff !important; } #pacer-admin-close { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1; } #pacer-admin-body { flex: 1; overflow-y: auto; padding: 22px; } /* PIN entry */ #pacer-admin-pin-section { text-align: center; padding: 10px 0; } #pacer-admin-pin-section p { color: #555; margin-bottom: 16px; font-size: 14px; } #pacer-admin-pin-dots { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; } .a-pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #BE3527; background: transparent; transition: background 0.15s; } .a-pin-dot.filled { background: #BE3527; } #pacer-admin-numpad { display: grid; grid-template-columns: repeat(3, 58px); gap: 8px; justify-content: center; } .a-num-btn { width: 58px; height: 50px; border-radius: 8px; border: 1.5px solid #ddd; background: #fafafa; font-size: 18px; font-weight: 600; cursor: pointer; transition: background 0.12s; font-family: 'Roboto', sans-serif; } .a-num-btn:hover { background: #f0ede8; border-color: #BE3527; } #pacer-admin-pin-error { color: #BE3527; font-size: 13px; margin-top: 10px; min-height: 18px; } /* Dashboard */ #pacer-admin-dashboard { display: none; } #pacer-admin-dashboard h3 { color: #BE3527 !important; margin: 0 0 14px 0; font-size: 15px; font-weight: 700; } #pacer-admin-loading { text-align: center; color: #888; padding: 20px; font-size: 14px; } .a-trainee-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid #e8e5e0; border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .a-trainee-row:hover { border-color: #BE3527; background: rgba(190,53,39,0.04); } .a-trainee-avatar { width: 36px; height: 36px; border-radius: 50%; background: #BE3527; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .a-trainee-name { font-weight: 600; font-size: 14px; color: #333; } .a-trainee-meta { font-size: 12px; color: #888; } .a-load-btn { margin-left: auto; background: #BE3527; color: #fff; border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; } .a-load-btn:hover { background: #a02e20; }