/* ============================================================ app-overrides.css — our additions ON TOP of Paces (loads last). Scope: layout chrome, cross-cutting a11y, and bridge rules between the legacy widgets (clip facade) and the Paces skin. ============================================================ */ /* Paces compiles Bootstrap utilities to LITERAL colors and emits NO --bs-* root tokens (verified live: every var(--bs-*) resolved to nothing). Define the tokens this stylesheet uses, with values probed from Paces' own compiled utility classes, so var() never silently fails again. Light theme only for now. */ :root, [data-bs-theme="light"] { --bs-primary: #236dc9; --bs-secondary: #7b70ef; --bs-info: #5bc3e1; --bs-danger: #f7577e; --bs-warning: #f9bf59; --bs-success: #02bc9c; --bs-dark: #313a46; --bs-white: #fff; --bs-body-bg: #fff; --bs-emphasis-color: #313a46; --bs-secondary-color: #7a8089; --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --bs-font-monospace: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --bs-border-color: #e7e9eb; --bs-border-radius: 0.375rem; --bs-box-shadow: 0 .25rem .75rem rgba(49, 58, 70, .12); --bs-secondary-bg: #eef2f7; --bs-tertiary-bg: #eef2f7; --bs-primary-bg-subtle: #dee9f7; --bs-danger-bg-subtle: #fee6ec; --bs-success-bg-subtle: #d9f5f0; --bs-warning-bg-subtle: #fef5e6; --bs-info-bg-subtle: #def3f9; --bs-primary-border-subtle: #bdd3ef; --bs-danger-border-subtle: #fcccd8; --bs-success-text-emphasis: #02a085; --bs-warning-text-emphasis: #d4a24c; } /* legacy app.css paints cream; keep the page surface uniform under Paces */ html { background-color: var(--bs-body-bg, #fff); } /* ---- Brand (text logo — deliberately NOT Paces' .logo-topbar, which display:none's itself at small widths and expects images) ---- */ .pc-brand { font-weight: 800; font-size: 1.15rem; letter-spacing: .01em; color: var(--bs-emphasis-color); text-decoration: none; white-space: nowrap; } .pc-brand span { color: var(--bs-primary); } .pc-brand:hover { color: var(--bs-emphasis-color); } /* ---- Public/operator nav (CSS-only mobile menu: works identically on static SSR and InteractiveServer pages — no Bootstrap JS, no circuit) ---- */ .app-topbar .topbar-menu { position: relative; min-height: var(--theme-topbar-height, 65px); } .pc-nav { display: flex; gap: 1.5rem; align-items: center; } .pc-nav a { color: var(--bs-secondary-color); text-decoration: none; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; } .pc-nav a:hover { color: var(--bs-primary); } .pc-nav-toggle { position: absolute; opacity: 0; pointer-events: none; } .pc-nav-burger { display: none; margin-bottom: 0; } @media (max-width: 767.98px) { .pc-nav-burger { display: inline-flex; align-items: center; justify-content: center; } .pc-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); box-shadow: var(--bs-box-shadow); padding: .5rem 1rem; z-index: 1030; } .pc-nav a { padding: .35rem .25rem; } .pc-nav-toggle:checked ~ .pc-nav { display: flex; } } /* ---- Operator chrome accent: unmistakably not the public site ---- */ .wrapper--operator .app-topbar { background: var(--bs-dark); border-bottom: 3px solid var(--bs-warning); } .wrapper--operator .pc-brand { color: var(--bs-white); } .wrapper--operator .pc-nav a { color: rgba(255, 255, 255, .75); } .wrapper--operator .pc-nav a:hover { color: var(--bs-white); } .wrapper--operator .pc-nav__public { opacity: .6; } @media (max-width: 767.98px) { .wrapper--operator .pc-nav { background: var(--bs-dark); } } /* ---- Cross-cutting a11y (AUDIT M13/m7/p2 follow-ups in the new palette) ---- */ :focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; } /* ---- Portraits inside Paces avatars (4:5 source crops in round/square frames) ---- */ .avatar-xs, .avatar-sm, .avatar-md, .avatar-lg, .avatar-xl, .avatar-xxl { object-fit: cover; } /* ---- Legacy-widget bridge: pages not yet migrated still render their own components from app.css untouched; rules get deleted per page in Step 5. ---- */ /* ============================================================ Homepage ("The Outrage Index", Step 4) ============================================================ */ /* The video receipt: the REAL .clip-facade button (clip.js contract untouched), reskinned to the Paces button language. Specificity (.pc-watch.clip-facade, 0-2-0) deliberately beats app.css's .clip-facade / .clip-facade--inline (0-1-0); this file also loads last. */ .pc-watch.clip-facade { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: auto; max-width: none; aspect-ratio: auto; min-height: 44px; background: transparent; border: 1px solid var(--bs-primary); border-radius: var(--bs-border-radius); color: var(--bs-primary); font-family: var(--bs-body-font-family); font-size: .875rem; font-weight: 500; padding: .35rem .9rem; cursor: pointer; } .pc-watch.clip-facade::after { content: none; } .pc-watch.clip-facade:hover { background: var(--bs-primary); color: var(--bs-white); } .pc-watch--primary.clip-facade { background: var(--bs-danger); border-color: var(--bs-danger); color: var(--bs-white); } .pc-watch--primary.clip-facade:hover { background: var(--bs-danger); filter: brightness(.92); } .pc-watch--full.clip-facade { width: 100%; } /* Where the swapped-in player lands (clip.js replaces the facade with a block .clip): give it room and never let it exceed its column. */ .pc-home .clip { margin: .5rem 0; max-width: 100%; } .pc-receipt { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; } .pc-receipt .clip { flex-basis: 100%; } /* Hero score dial — conditional color: warning 5–7, danger ≥8 (pc-dial--hot). */ .pc-dial { width: 7rem; height: 7rem; border: .45rem solid var(--bs-warning); } .pc-dial--hot { border-color: var(--bs-danger); } /* Tabular score chips so columns of scores align. */ .pc-score { font-variant-numeric: tabular-nums; min-width: 3rem; } /* ============================================================ /how-it-works — the animated pipeline infographic. Desktop-first zigzag timeline; collapses to a left-rail single column under 768px. reveal.js adds .in-view per [data-reveal]; reduced-motion gets everything visible with no animation. ============================================================ */ .hiw { max-width: 72rem; margin: 0 auto; } /* reveal transition base */ .hiw [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; } .hiw [data-reveal].in-view { opacity: 1; transform: none; } .hiw-hero { padding: 3.5rem 1rem 2rem; } .hiw-scrollcue { font-size: 1.6rem; color: var(--bs-secondary-color); animation: hiw-bob 1.6s ease-in-out infinite; } @keyframes hiw-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* ---- pipeline rail ---- */ .hiw-pipe { position: relative; padding: 1.5rem 0 1rem; } .hiw-pipe::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: repeating-linear-gradient(to bottom, var(--bs-primary-border-subtle) 0 10px, transparent 10px 20px); animation: hiw-flow 1.2s linear infinite; } @keyframes hiw-flow { to { background-position-y: 20px; } } .hiw-step { position: relative; display: grid; grid-template-columns: 1fr 5rem 1fr; align-items: start; margin-bottom: 3.2rem; } .hiw-step__rail { grid-column: 2; display: flex; justify-content: center; } .hiw-step__orb { width: 3.6rem; height: 3.6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.5rem; border: 3px solid var(--bs-body-bg); box-shadow: 0 0 0 3px var(--bs-border-color); transform: scale(.4); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .15s; } .hiw-step.in-view .hiw-step__orb { transform: scale(1); } .hiw-step__body { grid-column: 1; text-align: right; padding-right: .5rem; } .hiw-step--flip .hiw-step__body { grid-column: 3; grid-row: 1; text-align: left; padding-right: 0; padding-left: .5rem; } .hiw-step__num { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--bs-secondary-color); font-weight: 600; } .hiw-step__body h2 { font-size: 1.35rem; font-weight: 700; margin: .15rem 0 .5rem; } .hiw-step__body p { color: var(--bs-secondary-color); font-size: .95rem; } .hiw-step .hiw-art { display: inline-block; text-align: left; } .hiw-tech { display: inline-block; font-family: var(--bs-font-monospace); font-size: .72rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-radius: 99px; padding: .15rem .6rem; white-space: nowrap; } /* ---- per-step art ---- */ .hiw-art { margin-top: .6rem; } .hiw-chip-art { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .4rem .7rem; margin: 0 .3rem .3rem 0; font-size: .85rem; background: var(--bs-body-bg); } /* step 2: waveform → text (static staggered bars + a pulse; bars stay visible even with no JS/animation — only the pulse is decorative) */ .hiw-art--wave { display: inline-flex; align-items: center; gap: .8rem; } .hiw-wave { display: inline-flex; align-items: center; gap: 4px; height: 2.6rem; } .hiw-wave span { display: inline-block; width: 5px; border-radius: 3px; background: var(--bs-info); height: 12px; } .hiw-wave span:nth-child(2n) { height: 26px; } .hiw-wave span:nth-child(3n) { height: 34px; } .hiw-wave span:nth-child(4n) { height: 20px; } .hiw-wave span:nth-child(5n) { height: 38px; } .in-view .hiw-wave span { animation: hiw-pulse 1.1s ease-in-out infinite alternate; } .in-view .hiw-wave span:nth-child(2n) { animation-delay: .15s; } .in-view .hiw-wave span:nth-child(3n) { animation-delay: .3s; } @keyframes hiw-pulse { from { transform: scaleY(.45); } to { transform: scaleY(1.1); } } .hiw-textlines { display: inline-flex; flex-direction: column; gap: 5px; width: 9rem; } .hiw-textlines span { display: block; height: 6px; border-radius: 3px; background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); transform-origin: left; transform: scaleX(0); transition: transform .5s ease; } .in-view .hiw-textlines span { transform: scaleX(1); } .in-view .hiw-textlines span:nth-child(1) { transition-delay: .3s; } .in-view .hiw-textlines span:nth-child(2) { transition-delay: .5s; } .in-view .hiw-textlines span:nth-child(3) { transition-delay: .7s; } .in-view .hiw-textlines span:nth-child(4) { transition-delay: .9s; } /* step 3: chapters snap in */ .hiw-chapter { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--bs-border-color); border-radius: .4rem; padding: .35rem .6rem; margin-bottom: .35rem; font-size: .85rem; background: var(--bs-body-bg); opacity: 0; transform: translateX(-14px); transition: opacity .45s ease, transform .45s ease; } .hiw-step--flip .hiw-chapter { transform: translateX(14px); } .in-view .hiw-chapter { opacity: 1; transform: none; } .in-view .hiw-chapter:nth-child(1) { transition-delay: .25s; } .in-view .hiw-chapter:nth-child(2) { transition-delay: .45s; } .in-view .hiw-chapter:nth-child(3) { transition-delay: .65s; } .hiw-ts { margin-left: auto; font-family: var(--bs-font-monospace); font-size: .75rem; color: var(--bs-danger); } /* step 4: meter + split */ .hiw-meter { width: 14rem; height: 8px; border-radius: 4px; background: var(--bs-secondary-bg); overflow: hidden; } .hiw-meter__fill { height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--bs-warning), var(--bs-success)); transition: width 1.1s ease-out .2s; } .in-view .hiw-meter__fill { width: 82%; } .hiw-split { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; } .hiw-split__branch { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; border-radius: .4rem; padding: .3rem .6rem; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; } .hiw-split__branch--ok { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); } .hiw-split__branch--review { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); } .in-view .hiw-split__branch--ok { opacity: 1; transform: none; transition-delay: .9s; } .in-view .hiw-split__branch--review { opacity: 1; transform: none; transition-delay: 1.1s; } /* step 5: two bars sliding into alignment */ .hiw-syncbar { display: block; height: 10px; border-radius: 5px; width: 13rem; } .hiw-syncbar--a { background: var(--bs-primary-bg-subtle); border: 1px solid var(--bs-primary-border-subtle); } .hiw-syncbar--b { background: var(--bs-danger-bg-subtle); border: 1px solid var(--bs-danger-border-subtle); margin-top: 4px; transform: translateX(2.6rem); transition: transform 1s cubic-bezier(.2, .8, .2, 1) .3s; } .in-view .hiw-syncbar--b { transform: translateX(0); } /* step 6: dial pop */ .hiw-dial { width: 6rem; height: 6rem; border-radius: 50%; border: .4rem solid var(--bs-danger); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bs-body-bg); transform: scale(.5); opacity: 0; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .2s, opacity .3s ease .2s; margin-bottom: .4rem; } .in-view .hiw-dial { transform: scale(1); opacity: 1; } .hiw-dial__num { font-size: 1.6rem; font-weight: 800; color: var(--bs-danger); line-height: 1; } /* step 7: audit log lines */ .hiw-logline { font-family: var(--bs-font-monospace); font-size: .74rem; color: var(--bs-secondary-color); border-left: 3px solid var(--bs-border-color); padding: .2rem 0 .2rem .6rem; margin-bottom: .25rem; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease; } .in-view .hiw-logline:nth-child(1) { opacity: 1; transform: none; transition-delay: .3s; } .in-view .hiw-logline:nth-child(2) { opacity: 1; transform: none; transition-delay: .55s; } .in-view .hiw-logline:nth-child(3) { opacity: 1; transform: none; transition-delay: .8s; } .hiw-stack { padding: 2rem 1rem; border-top: 1px solid var(--bs-border-color); } .hiw-cta { padding: 2.5rem 1rem 3.5rem; } /* ---- mobile: simple left-rail single column (no zigzag, art keeps its reveal) ---- */ @media (max-width: 767.98px) { .hiw-pipe::before { left: 1.75rem; } .hiw-step { grid-template-columns: 3.5rem 1fr; margin-bottom: 2.2rem; } .hiw-step__rail { grid-column: 1; } .hiw-step__orb { width: 2.8rem; height: 2.8rem; font-size: 1.15rem; } .hiw-step__body, .hiw-step--flip .hiw-step__body { grid-column: 2; grid-row: 1; text-align: left; padding: 0 0 0 .4rem; } .hiw-art--wave { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { .hiw [data-reveal], .hiw-step__orb, .hiw-chapter, .hiw-split__branch, .hiw-dial, .hiw-logline, .hiw-textlines span, .hiw-meter__fill, .hiw-syncbar--b { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } .hiw-meter__fill { width: 82%; } .hiw-scrollcue, .hiw-pipe::before { animation: none !important; } }