/* audit-remaster.css — Acrylic Glass system for audit.crocky.host. The token layer + light-theme overrides are ported verbatim from crocky.host's crockyhost-remaster.css (values already WCAG-validated there), scope renamed body.ch-remaster -> body.au-remaster, so the two properties share one visual language. Scoped so it can only affect the landing pages that opt in; the report SPA keeps using audit.css. */ body.au-remaster{ /* Dark (default) palette, cool, near-black, slight green undertone */ --bg: oklch(0.115 0.018 200); --bg-2: oklch(0.155 0.020 200); --bg-3: oklch(0.195 0.022 200); --surface: oklch(0.22 0.022 200); --surface-2: oklch(0.27 0.022 200); --fg: oklch(0.97 0.012 200); --fg-muted: oklch(0.78 0.012 200); --fg-subtle: oklch(0.63 0.012 200); --border: oklch(0.32 0.018 200 / 0.55); --border-strong: oklch(0.45 0.020 200 / 0.65); --acid: oklch(0.80 0.20 148); --acid-text: oklch(0.80 0.20 148); --acid-soft: oklch(0.74 0.16 148); --acid-deep: oklch(0.52 0.14 150); --acid-glow: oklch(0.82 0.20 148 / 0.40); --acid-shadow: oklch(0.50 0.18 150 / 0.30); --glass-fill: linear-gradient(150deg, oklch(0.40 0.04 200 / 0.14) 0%, oklch(0.30 0.03 200 / 0.08) 60%, oklch(0.20 0.02 200 / 0.04) 100%); --glass-fill-strong: linear-gradient(150deg, oklch(0.45 0.08 148 / 0.18) 0%, oklch(0.30 0.03 200 / 0.10) 60%, oklch(0.20 0.02 200 / 0.06) 100%); --glass-edge: linear-gradient(135deg, oklch(0.95 0.04 148 / 0.28) 0%, oklch(0.85 0.02 200 / 0.06) 25%, oklch(0.40 0.02 200 / 0.03) 55%, oklch(0.40 0.02 200 / 0.06) 80%, oklch(0.85 0.06 148 / 0.18) 100%); --glass-top-shine: linear-gradient(180deg, oklch(0.96 0.03 200 / 0.10) 0%, oklch(0.96 0.02 200 / 0.02) 25%, transparent 55%); --glass-shadow: 0 1px 0 oklch(0.96 0.04 200 / 0.07) inset, 0 -1px 0 oklch(0.10 0.02 200 / 0.4) inset, 0 22px 50px -28px oklch(0.05 0.02 200 / 0.5), 0 6px 18px -8px oklch(0.05 0.02 200 / 0.3), 0 0 0 1px oklch(0.95 0.03 200 / 0.03); --sans: "Geist", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --r-sm: 6px; --r-md: 10px; --r: 12px; --r-lg: 16px; --r-xl: 22px; } /* Light theme: ported verbatim from crockyhost-remaster.css. The inline theme script + toggle set/remove .dark on ; html:not(.dark) = light (matches crocky.host's convention exactly). */ html:not(.dark) body.au-remaster{ --bg: oklch(0.97 0.006 200); --bg-2: oklch(0.94 0.008 200); --bg-3: oklch(0.91 0.010 200); --surface: oklch(1 0 0); --surface-2: oklch(0.97 0.006 200); --fg: oklch(0.16 0.012 200); --fg-muted: oklch(0.40 0.012 200); --fg-subtle: oklch(0.52 0.012 200); --border: oklch(0.55 0.020 200 / 0.30); --border-strong: oklch(0.40 0.025 200 / 0.40); --acid: oklch(0.66 0.21 148); --acid-text: oklch(0.53 0.19 148); --acid-soft: oklch(0.72 0.18 148); --acid-deep: oklch(0.48 0.18 150); --acid-glow: oklch(0.72 0.22 148 / 0.45); --acid-shadow: oklch(0.55 0.20 150 / 0.30); --glass-fill: linear-gradient(150deg, oklch(0.85 0.15 148 / 0.22) 0%, oklch(0.97 0.04 200 / 0.55) 55%, oklch(1 0 0 / 0.60) 100%); --glass-fill-strong: linear-gradient(150deg, oklch(0.80 0.18 148 / 0.32) 0%, oklch(0.97 0.04 200 / 0.55) 55%, oklch(1 0 0 / 0.60) 100%); --glass-edge: linear-gradient(135deg, oklch(0.50 0.20 148 / 0.55) 0%, oklch(0.95 0.05 148 / 0.20) 25%, oklch(0.85 0.05 200 / 0.10) 55%, oklch(0.65 0.10 148 / 0.15) 80%, oklch(0.50 0.20 148 / 0.40) 100%); --glass-top-shine: linear-gradient(180deg, oklch(1 0 0 / 0.55) 0%, oklch(1 0 0 / 0.10) 25%, transparent 55%); --glass-shadow: 0 1px 0 oklch(1 0 0 / 0.60) inset, 0 -1px 0 oklch(0.50 0.10 148 / 0.10) inset, 0 22px 48px -28px oklch(0.62 0.09 148 / 0.15), 0 5px 16px -10px oklch(0.60 0.07 148 / 0.09), 0 0 0 1px oklch(0.50 0.18 148 / 0.10); } /* ---- Base layer ------------------------------------------------------ */ body.au-remaster{ margin:0; color:var(--fg); /* Layered depth instead of flat pitch-black: a cool base, a warm-green glow bleeding from the top-right toward the hero, and a subtle lift near the top so the fold doesn't read as a dead void. */ background: radial-gradient(1100px 620px at 82% -8%, oklch(0.30 0.10 152 / 0.22), transparent 60%), radial-gradient(900px 700px at 8% 4%, oklch(0.24 0.05 220 / 0.30), transparent 55%), linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 22%); background-attachment:fixed; font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } html:not(.dark) body.au-remaster{ background: radial-gradient(1100px 620px at 82% -8%, oklch(0.86 0.14 152 / 0.35), transparent 60%), radial-gradient(900px 700px at 8% 4%, oklch(0.90 0.04 220 / 0.5), transparent 55%), linear-gradient(180deg, oklch(0.99 0.008 152) 0%, var(--bg) 24%); background-attachment:fixed; } body.au-remaster *, body.au-remaster *::before, body.au-remaster *::after{ box-sizing:border-box; } body.au-remaster a{ color:inherit; text-decoration:none; } body.au-remaster h1,body.au-remaster h2,body.au-remaster h3{ font-family:var(--sans); font-weight:600; letter-spacing:-0.02em; line-height:1.1; margin:0; } body.au-remaster :focus-visible{ outline:2px solid var(--acid); outline-offset:2px; border-radius:4px; } .au-wrap{ width:min(1180px, calc(100% - 40px)); margin-inline:auto; } /* Visually-hidden. The markup uses .ch-sr-only (from the old audit.css, which the landing no longer loads) so it MUST be redeclared here or every screen-reader label leaks into the layout. */ .au-sr-only, body.au-remaster .ch-sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* Ambient orbs (decorative, aria-hidden) */ .au-orb{ position:fixed; z-index:0; border-radius:50%; pointer-events:none; filter:blur(80px); opacity:0.55; background:radial-gradient(circle at 50% 50%, var(--acid-glow), transparent 70%); animation:au-drift 18s ease-in-out infinite alternate; } .au-orb.a{ width:480px; height:480px; top:-140px; right:-80px; } .au-orb.b{ width:400px; height:400px; top:36%; left:-160px; opacity:0.4; animation-delay:-9s; } @keyframes au-drift{ from{ transform:translate(0,0); } to{ transform:translate(-24px,26px); } } @media (prefers-reduced-motion: reduce){ .au-orb{ animation:none; opacity:0.3; } } /* Buttons */ .au-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; font:600 15px/1 var(--sans); padding:13px 22px; border-radius:12px; border:0; background:var(--acid); color:oklch(0.16 0.03 200); box-shadow:0 6px 18px -6px var(--acid-shadow); transition:transform .15s ease, box-shadow .15s ease; } .au-btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px -8px var(--acid-shadow); } .au-btn--ghost{ background:var(--glass-fill); color:var(--fg); border:1px solid var(--border-strong); box-shadow:var(--glass-shadow); } /* Glass surface recipe reused everywhere */ .au-glass{ position:relative; border-radius:16px; border:1px solid transparent; box-shadow:var(--glass-shadow); background-image:var(--glass-fill), var(--glass-edge); background-origin:border-box; background-clip:padding-box, border-box; isolation:isolate; } .au-glass::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--glass-top-shine); pointer-events:none; z-index:-1; } /* Mono section kicker: "01 · WHAT WE LOOK AT" */ .au-kicker{ font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--acid-text); display:inline-flex; gap:8px; align-items:center; } .au-kicker .n{ color:var(--fg-subtle); } @media (prefers-reduced-motion: reduce){ .au-orb{ opacity:0.3; } } /* ---- Nav ------------------------------------------------------------- */ body.au-remaster .ch-header{ position:sticky; top:0; z-index:20; padding:12px 0; background:transparent; } body.au-remaster .ch-nav{ width:min(1120px, calc(100% - 40px)); margin-inline:auto; display:flex; align-items:center; gap:8px; padding:9px 10px 9px 16px; border-radius:14px; background:color-mix(in oklch, var(--bg-2) 82%, transparent); border:1px solid var(--border); box-shadow:var(--glass-shadow); backdrop-filter:blur(16px) saturate(140%); } body.au-remaster .ch-logo{ display:flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:700; font-size:1.0rem; color:var(--fg); } body.au-remaster .ch-logo-mark{ display:block; width:28px; height:28px; } /* 3-zone nav: logo (left), links (centre, fills the gap), actions (right). */ body.au-remaster .ch-nav-links{ flex:1 1 auto; display:flex; gap:2px; justify-content:center; align-items:center; } body.au-remaster .ch-nav-links > a{ padding:8px 14px; border-radius:9px; color:var(--fg-muted); font-weight:500; font-size:0.9rem; transition:background .15s ease, color .15s ease; } body.au-remaster .ch-nav-links > a:hover{ background:color-mix(in oklch, var(--acid) 12%, transparent); color:var(--fg); } body.au-remaster .ch-nav-actions{ display:flex; align-items:center; gap:6px; } @media (max-width:720px){ body.au-remaster .ch-nav-links{ display:none; } } /* Language toggle: two segments, active one filled acid green. Active state derives from , which the toggle flips. */ body.au-remaster .ch-lang-toggle{ display:inline-flex; align-items:center; gap:0; padding:3px; background:var(--surface); border:1px solid var(--border); border-radius:999px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.02em; cursor:pointer; } body.au-remaster .ch-lang-toggle [data-ch-lang]{ padding:4px 9px; border-radius:999px; color:var(--fg-subtle); transition:color .15s ease, background .15s ease; } html[lang="en"] body.au-remaster .ch-lang-toggle [data-ch-lang="en"], html[lang="ro"] body.au-remaster .ch-lang-toggle [data-ch-lang="ro"]{ background:var(--acid); color:oklch(0.16 0.04 150); box-shadow:0 1px 4px -1px var(--acid-shadow); } body.au-remaster .ch-theme-toggle{ margin-left:6px; padding:8px; background:var(--surface); border:1px solid var(--border); color:var(--fg-muted); border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; transition:color .15s ease, border-color .15s ease; } body.au-remaster .ch-theme-toggle:hover{ color:var(--acid-text); border-color:var(--acid); } body.au-remaster .ch-theme-toggle svg{ width:16px; height:16px; } body.au-remaster .ch-icon-moon{ display:none; } html.dark body.au-remaster .ch-icon-sun{ display:none; } html.dark body.au-remaster .ch-icon-moon{ display:block; } body.au-remaster .ch-skip-link{ position:absolute; left:-9999px; } body.au-remaster .ch-skip-link:focus{ left:16px; top:16px; z-index:50; background:var(--surface); padding:10px 14px; border-radius:8px; } /* ---- Hero ------------------------------------------------------------ */ .au-hero{ position:relative; z-index:1; padding:56px 0 40px; } .au-hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px,4vw,64px); align-items:center; } @media (max-width:900px){ .au-hero-grid{ grid-template-columns:1fr; gap:32px; } .au-hero-left{ order:0; } .au-hero-stage{ order:1; width:min(100%,560px); margin-inline:auto; } } .au-hero-h1{ font-size:clamp(34px,5vw,58px); margin:16px 0 0; } .au-emph{ color:var(--acid-text); font-style:italic; } .au-hero-sub{ color:var(--fg-muted); font-size:clamp(15px,1.5vw,18px); max-width:46ch; margin:16px 0 22px; } .au-sample-link{ margin:16px 0 0; font-size:13.5px; } .au-sample-link a{ color:var(--acid-text); border-bottom:1px solid transparent; transition:border-color .2s ease; } .au-sample-link a:hover{ border-bottom-color:var(--acid-text); } .ch-rotating-text{ color:inherit; } /* Entrance animation. CSS-only + fill-mode:both so it ALWAYS ends at the final visible state - never depends on JS/IntersectionObserver, which could (and did) leave the hero stuck invisible if it failed to fire. */ .au-reveal{ animation:au-fade-up .55s cubic-bezier(.22,1,.36,1) var(--d,0ms) both; } @keyframes au-fade-up{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .au-reveal{ animation:none; } } /* Scroll-reveal for below-the-fold sections. BULLETPROOF: the hidden pre-state applies ONLY under html.js-reveal, a class an inline script sets before first paint and only when JS is live. landing.js then adds .is-visible as each block scrolls in (with a hard safety timeout that force-reveals everything). If JS is disabled OR the observer never fires, the pre-state simply never applies and content stays visible - it can never get stuck invisible the way the old opacity-gated version could. */ html.js-reveal body.au-remaster .ch-reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); will-change:opacity, transform; } /* Keep this selector at least as specific as the hidden rule above (html.js-reveal ... = 2 elements + 3 classes) or the pre-state wins and sections stay invisible even after landing.js adds .is-visible. */ html.js-reveal body.au-remaster .ch-reveal.is-visible{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ html.js-reveal body.au-remaster .ch-reveal{ opacity:1; transform:none; transition:none; } } /* Section-title kicker sits above the h2 with a little air. */ body.au-remaster .ch-section-title .au-kicker{ margin-bottom:12px; } /* ---- Form controls (reworked onto glass tokens; ids/names unchanged) - Input and submit share --au-field-h so they are EXACTLY the same height and sit on one baseline. */ .au-hero-form{ padding:20px; --au-field-h:50px; } body.au-remaster .ch-form-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; } body.au-remaster .ch-input-wrap{ flex:1 1 280px; min-width:0; position:relative; display:flex; } body.au-remaster .ch-input-icon{ position:absolute; left:15px; top:0; bottom:0; display:flex; align-items:center; color:var(--fg-subtle); pointer-events:none; } body.au-remaster .ch-input-icon svg{ display:block; } body.au-remaster .ch-input{ width:100%; height:var(--au-field-h); font:500 15px/1 var(--sans); color:var(--fg); padding:0 14px 0 40px; border-radius:12px; box-sizing:border-box; background:var(--surface); border:1px solid var(--border); transition:border-color .15s ease, box-shadow .15s ease; } body.au-remaster .ch-input::placeholder{ color:var(--fg-subtle); } body.au-remaster .ch-input--plain{ height:var(--au-field-h); padding-left:14px; } body.au-remaster .ch-input:focus, body.au-remaster .ch-input.is-pre-focused{ outline:none; border-color:var(--acid); box-shadow:0 0 0 3px var(--acid-glow); } body.au-remaster #ch-submit-btn{ flex:0 0 auto; height:var(--au-field-h); display:inline-flex; align-items:center; gap:7px; cursor:pointer; font:550 14.5px/1 var(--sans); letter-spacing:0.01em; padding:0 20px; border-radius:12px; border:0; box-sizing:border-box; background:var(--acid); color:oklch(0.18 0.04 150); box-shadow:0 4px 14px -6px var(--acid-shadow); transition:transform .15s ease, box-shadow .15s ease, background .15s ease; } body.au-remaster #ch-submit-btn svg{ width:15px; height:15px; } body.au-remaster #ch-submit-btn:hover{ transform:translateY(-1px); box-shadow:0 9px 22px -8px var(--acid-shadow); } body.au-remaster .ch-mode-line{ border:0; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; font-size:13px; color:var(--fg-muted); } body.au-remaster .ch-mode-line input[type="radio"]{ position:absolute; opacity:0; } body.au-remaster .ch-mode-state{ display:none; align-items:baseline; flex-wrap:wrap; gap:8px; } body.au-remaster .ch-mode-line[data-mode="quick"] .ch-mode-state--quick{ display:flex; } body.au-remaster .ch-mode-line[data-mode="standard"] .ch-mode-state--standard{ display:flex; } body.au-remaster .ch-mode-state-desc{ display:inline-flex; align-items:baseline; gap:7px; flex-wrap:wrap; } body.au-remaster .ch-mode-state strong{ color:var(--fg); font-weight:600; } body.au-remaster .ch-mode-state-sub{ color:var(--fg-subtle); } body.au-remaster .ch-mode-stage{ display:inline-flex; align-items:baseline; gap:6px; } body.au-remaster .ch-mode-line[data-stage="default"] .ch-mode-stage--confirm{ display:none; } body.au-remaster .ch-mode-line[data-stage="confirm"] .ch-mode-stage--default{ display:none; } body.au-remaster .ch-mode-confirm-q{ color:var(--fg); font-weight:600; } body.au-remaster .ch-mode-switch{ background:none; border:0; padding:0; cursor:pointer; color:var(--acid-text); font:inherit; border-bottom:1px solid transparent; } body.au-remaster .ch-mode-switch:hover, body.au-remaster .ch-mode-switch:focus-visible{ border-bottom-color:var(--acid-text); } body.au-remaster .ch-info-btn{ width:16px; height:16px; border-radius:50%; border:1px solid var(--border-strong); background:var(--surface); color:var(--fg-muted); font-size:10px; cursor:pointer; line-height:1; } body.au-remaster .ch-info-pop{ background:var(--surface); color:var(--fg); border:1px solid var(--border); border-radius:12px; padding:14px; box-shadow:var(--glass-shadow); max-width:320px; } body.au-remaster .ch-info-pop-ack{ margin-top:10px; background:var(--acid); color:oklch(0.16 0.03 200); border:0; border-radius:8px; padding:7px 12px; cursor:pointer; font-weight:600; } body.au-remaster .ch-email-row{ margin-top:12px; } body.au-remaster .ch-advanced{ margin-top:12px; font-size:13px; } body.au-remaster .ch-advanced summary{ cursor:pointer; color:var(--fg-muted); } body.au-remaster .ch-advanced summary:hover{ color:var(--fg); } body.au-remaster .ch-advanced-hint{ color:var(--fg-subtle); font-size:12.5px; line-height:1.5; margin:8px 0; } body.au-remaster .ch-advanced-row{ display:flex; gap:8px; flex-wrap:wrap; } body.au-remaster .ch-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } body.au-remaster .ch-fineprint{ color:var(--fg-subtle); font-size:12.5px; margin:12px 0 0; } body.au-remaster .ch-error{ margin-top:10px; color:oklch(0.72 0.17 25); font-size:13px; } /* ---- Hero mini-report mock (resting/final frame; loop states in T4) --- */ .au-mock{ display:block; padding:20px; transform:perspective(1200px) rotateY(-9deg) rotateX(3deg); transform-style:preserve-3d; transition:transform .4s ease; } .au-mock:hover{ transform:perspective(1200px) rotateY(-4deg) rotateX(1deg); } @media (max-width:900px){ .au-mock, .au-mock:hover{ transform:none; } } .au-mock-head{ display:flex; align-items:center; gap:16px; } .au-mock-gauge{ flex:none; } .au-mock-gauge .seg{ fill:none; stroke-width:9; stroke-linecap:round; } .au-mock-gauge .seg--r{ stroke:#DC2626; } .au-mock-gauge .seg--a{ stroke:#F59E0B; } .au-mock-gauge .seg--g{ stroke:var(--acid); } .au-mock-gauge .needle{ stroke:var(--fg); stroke-width:3; stroke-linecap:round; transform:rotate(56deg); transform-origin:60px 62px; transform-box:fill-box; } .au-mock-gauge .pivot{ fill:var(--fg); } .au-mock-gauge .pivot-dot{ fill:var(--acid); } .au-mock-verdict{ line-height:1.1; } .au-mock-score{ font:800 36px/1 var(--sans); color:var(--acid-text); } .au-mock-of{ color:var(--fg-subtle); font-size:15px; } .au-mock-url{ font-family:var(--mono); font-size:11px; color:var(--fg-muted); margin-top:3px; } .au-mock-rings{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:18px 0 4px; } .au-ring{ text-align:center; padding:9px 4px; border-radius:10px; background:var(--surface); border:1px solid var(--border); } .au-ring-v{ display:block; font:700 18px/1 var(--sans); color:var(--fg); } .au-ring-l{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-subtle); margin-top:4px; display:block; } .au-mock-findings{ margin-top:12px; } .au-mockrow{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--fg-muted); padding:5px 0; border-top:1px solid var(--border); } .au-mockrow:first-child{ border-top:0; } .au-mockdot{ width:8px; height:8px; border-radius:50%; flex:none; } .au-mockrow-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .au-mockrow--critical .au-mockdot{ background:#b91c1c; } .au-mockrow--high .au-mockdot{ background:#ea580c; } .au-mockrow--medium .au-mockdot{ background:#ca8a04; } .au-mockrow--low .au-mockdot{ background:#2563eb; } .au-mock-foot{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-subtle); margin-top:14px; text-align:center; } /* ---- Mini-report self-assembly loop (motion only; resting = final) ---- JS toggles data-step 0..3 on the mock. Wrapped in no-preference so reduced-motion users keep the static final frame from the block above. */ @media (prefers-reduced-motion: no-preference){ .au-mock[data-step]{ } /* Needle sweeps red -> green as the audit "runs". */ .au-mock[data-step] .au-mock-gauge .needle{ transition:transform 1.15s cubic-bezier(.22,1,.36,1); } .au-mock[data-step="0"] .au-mock-gauge .needle{ transform:rotate(-110deg); } .au-mock[data-step="1"] .au-mock-gauge .needle{ transform:rotate(-30deg); } /* Verdict number fades in with the needle landing. */ .au-mock[data-step] .au-mock-verdict{ transition:opacity .5s ease; } .au-mock[data-step="0"] .au-mock-verdict{ opacity:0; } /* Score rings pop in at step 2. */ .au-mock[data-step] .au-ring{ transition:opacity .45s ease calc(var(--ri,0)*.08s), transform .45s cubic-bezier(.22,1,.36,1) calc(var(--ri,0)*.08s); } .au-mock[data-step="0"] .au-ring, .au-mock[data-step="1"] .au-ring{ opacity:0; transform:translateY(8px) scale(.96); } /* Finding rows tick in at step 3. */ .au-mock[data-step] .au-mockrow{ transition:opacity .4s ease calc(var(--i,0)*.12s), transform .4s ease calc(var(--i,0)*.12s); } .au-mock[data-step="0"] .au-mockrow, .au-mock[data-step="1"] .au-mockrow, .au-mock[data-step="2"] .au-mockrow{ opacity:0; transform:translateX(8px); } } /* ---- Hero mini-report self-assembly loop (T4) ------------------------ Driven by JS toggling data-step="0..3" on the mock root. Wrapped in a no-preference guard so reduced-motion users keep the resting final frame (needle green, rings shown, rows visible) painted in T3. */ @media (prefers-reduced-motion: no-preference){ .au-mock[data-step]{ } /* Needle: sweep from red (step 0) to green (rest = rotate(56deg)). */ .au-mock[data-step] .au-mock-gauge .needle{ transition:transform 1s cubic-bezier(.22,1,.36,1); } .au-mock[data-step="0"] .au-mock-gauge .needle{ transform:rotate(-118deg); } /* Score numbers fade in at step >=2. */ .au-mock[data-step] .au-mock-score, .au-mock[data-step] .au-ring-v{ transition:opacity .5s ease; } .au-mock[data-step="0"] .au-mock-score, .au-mock[data-step="1"] .au-mock-score, .au-mock[data-step="0"] .au-ring-v, .au-mock[data-step="1"] .au-ring-v{ opacity:0; } /* Ring tiles pop in at step 1. */ .au-mock[data-step] .au-ring{ transition:opacity .45s ease calc(var(--ri,0)*.06s), transform .45s cubic-bezier(.22,1,.36,1) calc(var(--ri,0)*.06s); } .au-mock[data-step="0"] .au-ring{ opacity:0; transform:translateY(8px) scale(.96); } /* Finding rows slide in staggered at step 3. */ .au-mock[data-step] .au-mockrow{ transition:opacity .4s ease calc(var(--i,0)*.14s), transform .4s ease calc(var(--i,0)*.14s); } .au-mock[data-step="0"] .au-mockrow, .au-mock[data-step="1"] .au-mockrow, .au-mock[data-step="2"] .au-mockrow{ opacity:0; transform:translateX(10px); } } /* ---- Checks marquee -------------------------------------------------- */ .au-marquee{ position:relative; z-index:1; overflow:hidden; border-block:1px solid var(--border); padding:14px 0; margin:26px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .au-marquee-track{ display:inline-flex; gap:34px; white-space:nowrap; will-change:transform; animation:au-marq 34s linear infinite; } .au-marquee-track span{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--fg-subtle); display:inline-flex; align-items:center; gap:34px; } .au-marquee-track span::before{ content:"·"; color:var(--acid-text); } @keyframes au-marq{ from{transform:translateX(0);} to{transform:translateX(-50%);} } @media (prefers-reduced-motion: reduce){ .au-marquee-track{ animation:none; } .au-marquee{ -webkit-mask-image:none; mask-image:none; } } /* ---- Sections -------------------------------------------------------- */ body.au-remaster .ch-section{ position:relative; z-index:1; padding:60px 0; } body.au-remaster .ch-section .container{ width:min(1180px, calc(100% - 40px)); margin-inline:auto; } body.au-remaster .ch-section-title{ max-width:640px; margin-bottom:30px; } body.au-remaster .ch-section-title h2{ font-size:clamp(26px,3.4vw,40px); } body.au-remaster .ch-section-title p{ color:var(--fg-muted); font-size:16px; margin:10px 0 0; } body.au-remaster .ch-section-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:10px 18px; border-radius:12px; background:var(--glass-fill); border:1px solid var(--border-strong); color:var(--fg); box-shadow:var(--glass-shadow); font-weight:600; font-size:14px; } body.au-remaster .ch-section-cta:hover{ color:var(--acid-text); } /* Feature / how-it-works list -> glass numbered cards */ body.au-remaster .ch-feature-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; } body.au-remaster .ch-feature-item{ --tone:var(--acid); --tone-text:var(--acid-text); position:relative; display:flex; gap:16px; padding:24px 22px; border-radius:16px; overflow:hidden; border:1px solid transparent; box-shadow:var(--glass-shadow); background-image:var(--glass-fill), var(--glass-edge); background-origin:border-box; background-clip:padding-box, border-box; transition:transform .22s ease, box-shadow .22s ease; } /* A thin tone-tinted bar across the top of each card + a soft radial bloom in the corner that intensifies on hover: cheap depth, lots of variety. */ body.au-remaster .ch-feature-item::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, var(--tone), transparent 78%); opacity:.9; } body.au-remaster .ch-feature-item::after{ content:""; position:absolute; top:-40%; right:-30%; width:60%; height:120%; background:radial-gradient(circle at 70% 30%, color-mix(in oklch, var(--tone) 22%, transparent), transparent 62%); opacity:.5; pointer-events:none; transition:opacity .25s ease; } body.au-remaster .ch-feature-item:hover{ transform:translateY(-3px); box-shadow:0 26px 56px -30px oklch(0.05 0.02 200 / 0.65), var(--glass-shadow); } body.au-remaster .ch-feature-item:hover::after{ opacity:.95; } /* Per-topic hue. Numbers + accents pick it up from --tone-text. */ body.au-remaster .ch-feature-item[data-tone="speed"] { --tone:oklch(0.80 0.20 148); --tone-text:var(--acid-text); } body.au-remaster .ch-feature-item[data-tone="discovery"] { --tone:oklch(0.70 0.15 250); --tone-text:oklch(0.72 0.15 250); } body.au-remaster .ch-feature-item[data-tone="access"] { --tone:oklch(0.70 0.17 300); --tone-text:oklch(0.74 0.16 300); } body.au-remaster .ch-feature-item[data-tone="defense"] { --tone:oklch(0.70 0.19 30); --tone-text:oklch(0.72 0.18 30); } body.au-remaster .ch-feature-item[data-tone="infra"] { --tone:oklch(0.78 0.13 210); --tone-text:oklch(0.76 0.13 210); } body.au-remaster .ch-feature-item[data-tone="stack"] { --tone:oklch(0.80 0.15 85); --tone-text:oklch(0.80 0.14 85); } body.au-remaster .ch-feature-item[data-tone="footprint"] { --tone:oklch(0.78 0.16 165); --tone-text:oklch(0.76 0.16 165); } html:not(.dark) body.au-remaster .ch-feature-item[data-tone="discovery"] { --tone-text:oklch(0.52 0.18 250); } html:not(.dark) body.au-remaster .ch-feature-item[data-tone="access"] { --tone-text:oklch(0.52 0.19 300); } html:not(.dark) body.au-remaster .ch-feature-item[data-tone="defense"] { --tone-text:oklch(0.55 0.20 30); } html:not(.dark) body.au-remaster .ch-feature-item[data-tone="infra"] { --tone-text:oklch(0.50 0.13 210); } html:not(.dark) body.au-remaster .ch-feature-item[data-tone="stack"] { --tone-text:oklch(0.56 0.15 85); } html:not(.dark) body.au-remaster .ch-feature-item[data-tone="footprint"] { --tone-text:oklch(0.50 0.16 165); } body.au-remaster .ch-feature-num{ position:relative; z-index:1; flex:none; font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--tone-text); width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:color-mix(in oklch, var(--tone) 14%, transparent); border:1px solid color-mix(in oklch, var(--tone) 34%, transparent); } body.au-remaster .ch-feature-body{ position:relative; z-index:1; } body.au-remaster .ch-feature-body h3{ font-size:16px; margin:2px 0 6px; } body.au-remaster .ch-feature-body p{ color:var(--fg-muted); font-size:13.5px; line-height:1.6; margin:0; } body.au-remaster .ch-feature-body em, body.au-remaster .ch-feature-body i{ color:var(--fg); font-style:italic; } body.au-remaster .ch-feature-body code{ font-family:var(--mono); font-size:0.88em; background:var(--surface); padding:1px 5px; border-radius:5px; } /* How-it-works variant: 3 big numbered steps. Bigger circular index, and a connector line threading them together on wide screens. */ body.au-remaster .ch-steps{ grid-template-columns:repeat(3,1fr); counter-reset:step; position:relative; } @media (max-width:820px){ body.au-remaster .ch-steps{ grid-template-columns:1fr; } } body.au-remaster .ch-steps .ch-feature-num{ width:44px; height:44px; border-radius:50%; font-size:16px; font-weight:700; background:color-mix(in oklch, var(--acid) 16%, transparent); border:1px solid color-mix(in oklch, var(--acid) 40%, transparent); color:var(--acid-text); } body.au-remaster .ch-steps .ch-feature-item::before{ background:linear-gradient(90deg, var(--acid), transparent 82%); } /* Live counter */ body.au-remaster .ch-counter-section{ position:relative; z-index:1; padding:8px 0 4px; } body.au-remaster .ch-counter-line{ width:min(1180px, calc(100% - 40px)); margin-inline:auto; display:flex; align-items:center; gap:10px; justify-content:center; } body.au-remaster .ch-counter-stat{ display:inline-flex; align-items:center; gap:8px; } body.au-remaster .ch-counter-dot{ width:8px; height:8px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 4px var(--acid-glow); } body.au-remaster .ch-counter-num{ font:800 20px/1 var(--sans); color:var(--fg); font-variant-numeric:tabular-nums; } body.au-remaster .ch-counter-lbl{ color:var(--fg-subtle); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; } /* Report preview - framed like an actual browser window on the report URL */ body.au-remaster .ch-preview-window{ border-radius:16px; overflow:hidden; } body.au-remaster .ch-preview-bar{ display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--border); background:color-mix(in oklch, var(--bg-3) 70%, transparent); } body.au-remaster .ch-preview-dots{ display:inline-flex; gap:6px; flex:none; } body.au-remaster .ch-preview-dots i{ width:10px; height:10px; border-radius:50%; background:var(--border-strong); } body.au-remaster .ch-preview-dots i:nth-child(1){ background:oklch(0.70 0.17 30); } body.au-remaster .ch-preview-dots i:nth-child(2){ background:oklch(0.82 0.14 85); } body.au-remaster .ch-preview-dots i:nth-child(3){ background:var(--acid); } body.au-remaster .ch-preview-addr{ flex:1 1 auto; font-family:var(--mono); font-size:11.5px; color:var(--fg-subtle); background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:4px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body.au-remaster .ch-preview{ display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; padding:26px; } @media (max-width:760px){ body.au-remaster .ch-preview{ grid-template-columns:1fr; } } body.au-remaster .ch-preview-rings{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; } body.au-remaster .ch-preview-ring{ text-align:center; padding:14px 18px; border-radius:12px; background:var(--surface); border:1px solid var(--border); } body.au-remaster .ch-preview-ring-num{ font:800 26px/1 var(--sans); color:var(--acid-text); } body.au-remaster .ch-preview-ring-lbl{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-subtle); margin-top:5px; } body.au-remaster .ch-preview-finding{ display:flex; gap:12px; } body.au-remaster .ch-preview-sev{ flex:none; height:fit-content; font:700 9px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#fff; background:#ea580c; padding:4px 8px; border-radius:6px; } body.au-remaster .ch-preview-finding h4{ font-size:15px; margin:0 0 5px; } body.au-remaster .ch-preview-finding p{ color:var(--fg-muted); font-size:13px; line-height:1.55; margin:0; } body.au-remaster .ch-preview-rec{ margin-top:8px; font-size:12.5px; color:var(--fg-subtle); } body.au-remaster .ch-preview-rec code{ font-family:var(--mono); background:var(--surface); padding:1px 5px; border-radius:5px; color:var(--acid-text); } /* FAQ - two zones: a sticky heading/intro on the left, the accordion on the right. Narrower items than the old full-width bars, with a tone rail that lights up on the open item. */ body.au-remaster .ch-faq-wrap{ width:min(1080px, calc(100% - 40px)); margin-inline:auto; display:grid; grid-template-columns:0.72fr 1fr; gap:clamp(28px,5vw,72px); align-items:start; } @media (max-width:820px){ body.au-remaster .ch-faq-wrap{ grid-template-columns:1fr; gap:24px; } } body.au-remaster .ch-faq-aside{ position:sticky; top:96px; } @media (max-width:820px){ body.au-remaster .ch-faq-aside{ position:static; } } body.au-remaster .ch-faq-aside .au-kicker{ margin-bottom:12px; } body.au-remaster .ch-faq-aside h2{ font-size:clamp(24px,3vw,34px); } body.au-remaster .ch-faq-aside-sub{ color:var(--fg-muted); font-size:14.5px; line-height:1.6; margin:12px 0 0; max-width:34ch; } body.au-remaster .ch-faq-aside-sub a{ color:var(--acid-text); border-bottom:1px solid transparent; } body.au-remaster .ch-faq-aside-sub a:hover{ border-bottom-color:var(--acid-text); } body.au-remaster .ch-faq{ display:grid; gap:8px; } body.au-remaster .ch-faq-item{ position:relative; border-radius:12px; border:1px solid var(--border); background:color-mix(in oklch, var(--surface) 55%, transparent); padding:2px 18px 2px 20px; transition:border-color .2s ease, background .2s ease; } body.au-remaster .ch-faq-item::before{ content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:3px; background:var(--acid); opacity:0; transition:opacity .2s ease; } body.au-remaster .ch-faq-item:hover{ border-color:var(--border-strong); } body.au-remaster .ch-faq-item[open]{ border-color:color-mix(in oklch, var(--acid) 40%, var(--border)); background:var(--glass-fill); } body.au-remaster .ch-faq-item[open]::before{ opacity:1; } body.au-remaster .ch-faq-item summary{ cursor:pointer; padding:14px 0; font-weight:600; font-size:15px; color:var(--fg); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; } body.au-remaster .ch-faq-item summary::-webkit-details-marker{ display:none; } body.au-remaster .ch-faq-item summary::after{ content:""; flex:none; width:16px; height:16px; position:relative; background: linear-gradient(var(--acid-text),var(--acid-text)) center/16px 2px no-repeat, linear-gradient(var(--acid-text),var(--acid-text)) center/2px 16px no-repeat; transition:transform .25s ease; } body.au-remaster .ch-faq-item[open] summary::after{ transform:rotate(135deg); } body.au-remaster .ch-faq-item p{ color:var(--fg-muted); font-size:14px; line-height:1.65; margin:0 0 16px; } /* Footer - real multi-column footer with brand + link columns, sitting on a subtly lifted panel so it reads as the close of the page, not an afterthought. */ body.au-remaster .ch-footer{ position:relative; z-index:1; margin-top:64px; padding:52px 0 68px; border-top:1px solid var(--border); background:linear-gradient(180deg, transparent, color-mix(in oklch, var(--bg-2) 60%, transparent)); } /* Keep the bottom row clear of the fixed "Audited by" pill in the corner. */ body.au-remaster .ch-footer-bottom{ padding-right:200px; } @media (max-width:680px){ body.au-remaster .ch-footer-bottom{ padding-right:0; } } body.au-remaster .ch-footer-inner{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:clamp(28px,5vw,64px); align-items:start; padding-bottom:36px; border-bottom:1px solid var(--border); } @media (max-width:760px){ body.au-remaster .ch-footer-inner{ grid-template-columns:1fr 1fr; gap:28px; } body.au-remaster .ch-footer-brand{ grid-column:1 / -1; } } body.au-remaster .ch-footer-logo{ display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:700; font-size:1.05rem; color:var(--fg); } body.au-remaster .ch-footer-tagline{ color:var(--fg-muted); font-size:14px; line-height:1.65; margin:14px 0 0; max-width:42ch; } body.au-remaster .ch-footer-madeby{ color:var(--fg-subtle); font-size:13px; line-height:1.6; margin:12px 0 0; max-width:42ch; } body.au-remaster .ch-footer-madeby a{ color:var(--acid-text); border-bottom:1px solid transparent; } body.au-remaster .ch-footer-madeby a:hover{ border-bottom-color:var(--acid-text); } body.au-remaster .ch-footer-col{ display:flex; flex-direction:column; gap:11px; } body.au-remaster .ch-footer-h{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-subtle); margin-bottom:3px; } body.au-remaster .ch-footer-col a{ color:var(--fg-muted); font-size:14px; width:fit-content; border-bottom:1px solid transparent; transition:color .15s ease; } body.au-remaster .ch-footer-col a:hover{ color:var(--acid-text); } body.au-remaster .ch-footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding-top:22px; } body.au-remaster .ch-footer-bottom p{ color:var(--fg-subtle); font-size:12.5px; margin:0; } body.au-remaster .ch-footer-loc{ font-family:var(--mono); letter-spacing:.03em; } body.au-remaster .ch-audited-by{ position:fixed; right:16px; bottom:16px; z-index:30; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; background:var(--glass-fill); border:1px solid var(--border-strong); box-shadow:var(--glass-shadow); backdrop-filter:blur(10px); font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--fg-muted); } body.au-remaster .ch-audited-by::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 3px var(--acid-glow); } body.au-remaster .ch-audited-by:hover{ color:var(--fg); } @media (max-width:680px){ .au-hero{ padding:32px 0 24px; } .au-hero-grid{ gap:28px; } .au-hero-h1{ font-size:clamp(32px,10.4vw,40px); } body.au-remaster .ch-section{ padding:48px 0; } body.au-remaster .ch-feature-item{ padding:20px 18px; } body.au-remaster .ch-audited-by{ display:none; } } /* ---- Methodology page ------------------------------------------------ */ body.au-remaster .ch-method-section{ position:relative; z-index:1; padding:44px 0; } body.au-remaster .ch-method-wrap{ width:min(1180px, calc(100% - 40px)); margin-inline:auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:center; } body.au-remaster .ch-method-wrap-vertical{ width:min(1180px, calc(100% - 40px)); margin-inline:auto; } body.au-remaster .ch-method-wrap--rev .ch-method-visual{ order:-1; } @media (max-width:820px){ body.au-remaster .ch-method-wrap{ grid-template-columns:1fr; } body.au-remaster .ch-method-wrap--rev .ch-method-visual{ order:0; } } body.au-remaster .ch-method-num{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--acid-text); display:block; margin-bottom:8px; } body.au-remaster .ch-method-text h2{ font-size:clamp(22px,2.6vw,32px); margin:0 0 10px; } body.au-remaster .ch-method-text p, body.au-remaster .ch-method-text li{ color:var(--fg-muted); font-size:14.5px; line-height:1.65; } body.au-remaster .ch-method-text em, body.au-remaster .ch-method-text i, body.au-remaster .ch-method-text dfn{ color:var(--fg); font-style:italic; } body.au-remaster .ch-method-visual{ padding:22px; border-radius:16px; border:1px solid transparent; box-shadow:var(--glass-shadow); background-image:var(--glass-fill), var(--glass-edge); background-origin:border-box; background-clip:padding-box, border-box; } body.au-remaster .ch-method-visual ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; } body.au-remaster .ch-method-visual li{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 12px; border-radius:9px; background:var(--surface); border:1px solid var(--border); font-size:13px; } body.au-remaster .ch-h-name{ font-family:var(--mono); color:var(--fg); font-size:12.5px; } body.au-remaster .ch-h-status{ font-family:var(--mono); font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; } body.au-remaster .ch-h-ok{ color:var(--acid-text); background:color-mix(in oklch, var(--acid) 14%, transparent); } body.au-remaster .ch-h-bad{ color:oklch(0.72 0.17 25); background:oklch(0.72 0.17 25 / 0.14); } body.au-remaster .ch-vitals{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } body.au-remaster .ch-vital{ text-align:center; padding:12px 6px; border-radius:10px; background:var(--surface); border:1px solid var(--border); } body.au-remaster .ch-vital span{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-subtle); } body.au-remaster .ch-vital strong{ display:block; font:700 16px/1 var(--sans); color:var(--fg); margin-top:5px; } body.au-remaster .ch-tech-pill{ display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; padding:5px 10px; border-radius:999px; border:1px solid var(--border-strong); color:var(--fg-muted); background:var(--surface); } body.au-remaster .ch-tech-eol{ border-color:oklch(0.72 0.17 25 / 0.4); color:oklch(0.72 0.17 25); } body.au-remaster .ch-sev-cell{ padding:10px 12px; border-radius:9px; background:var(--surface); border:1px solid var(--border); font-size:13px; } body.au-remaster .ch-sev-note{ color:var(--fg-subtle); font-size:12.5px; } body.au-remaster .ch-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--acid); } body.au-remaster .ch-dev{ font-family:var(--mono); font-size:12px; color:var(--fg-muted); } body.au-remaster .ch-form-piece{ font-family:var(--mono); font-size:12px; background:var(--surface); padding:2px 7px; border-radius:6px; color:var(--acid-text); } body.au-remaster .ch-url-sep{ color:var(--fg-subtle); } body.au-remaster .ch-method-visual code, body.au-remaster .ch-method-text code{ font-family:var(--mono); font-size:0.9em; background:var(--surface); padding:1px 5px; border-radius:5px; color:var(--acid-text); } /* ---- About page prose ------------------------------------------------ */ body.au-remaster .ch-doc{ width:min(760px, calc(100% - 40px)); margin-inline:auto; } body.au-remaster .ch-doc h2, body.au-remaster .ch-doc h3{ margin:28px 0 10px; font-size:clamp(19px,2.2vw,24px); } body.au-remaster .ch-doc p, body.au-remaster .ch-doc li{ color:var(--fg-muted); font-size:15px; line-height:1.7; } body.au-remaster .ch-doc a{ color:var(--acid-text); border-bottom:1px solid transparent; } body.au-remaster .ch-doc a:hover{ border-bottom-color:var(--acid-text); } body.au-remaster .ch-doc code{ font-family:var(--mono); font-size:0.9em; background:var(--surface); padding:1px 5px; border-radius:5px; } body.au-remaster .ch-doc em, body.au-remaster .ch-doc i{ color:var(--fg); } body.au-remaster .ch-badge{ display:inline-flex; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--acid-text); } /* ---- Compatibility aliases ------------------------------------------- Legacy markup (esp. methodology visuals) still references audit.css token names inline. Map them onto remaster tokens so nothing renders with a broken/black fallback. */ body.au-remaster{ --primary: var(--acid); --primary-hover: var(--acid-soft); --accent-coral: oklch(0.70 0.18 40); --accent-cyan: oklch(0.78 0.12 195); --accent-blue: oklch(0.68 0.15 250); --score-fail: oklch(0.62 0.20 25); --text-primary: var(--fg); --text-secondary: var(--fg-muted); --text-muted: var(--fg-subtle); --bg-card: var(--surface); --border-color: var(--border); } /* Methodology mini score rings */ body.au-remaster .ch-method-perf-rings{ display:flex; gap:22px; justify-content:center; margin-bottom:18px; } body.au-remaster .ch-mini-ring{ text-align:center; } body.au-remaster .ch-mini-ring-svg{ position:relative; width:104px; height:104px; margin-inline:auto; } body.au-remaster .ch-mini-ring-svg svg{ width:100%; height:100%; transform:rotate(-90deg); } body.au-remaster .ch-mini-ring-svg svg circle{ fill:none; stroke-width:8; stroke-linecap:round; } body.au-remaster .ch-mini-ring-svg svg circle.bg{ stroke:var(--border); } body.au-remaster .ch-mr-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:800 24px/1 var(--sans); } body.au-remaster .ch-mr-lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-subtle); margin-top:8px; } body.au-remaster .ch-method-vitals{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }