/* Self-hosted Space Mono — no third-party request (a compliance tool shouldn't leak visitor IPs to Google Fonts; this also loads faster). */ @font-face { font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('./fonts/space-mono-400.woff2') format('woff2'); } @font-face { font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('./fonts/space-mono-700.woff2') format('woff2'); } :root { --ink:#f4f4f7; --muted:#8b8c98; --green:#54d895; --red:#ff8a7a; --amber:#f0c674; --accent:#8b7dff; --bg:#0a0a0d; --panel:#131319; --panel2:#1a1a22; --line:#26262f; --font:'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* ===== PostHog-style warm "paper" theme (opt-in: ) ===== */ /* Marketing surfaces use this; the checker app stays dark by default. */ body.paper { --ink:#211e17; --muted:#6e6a5c; --green:#1f9d5b; --red:#cf3a25; --amber:#b9821a; --accent:#6342f0; --bg:#edeee4; --panel:#fbfaf2; --panel2:#f1efe2; --line:#d9d4c2; --ink-soft:#3c3830; --paper-dot:#dcd7c4; color-scheme:light; background: radial-gradient(circle at center, var(--paper-dot) 1px, transparent 1.4px) 0 0 / 22px 22px, var(--bg); } body.paper.cream-tight { background:var(--bg); } body.paper a { color:color-mix(in srgb, var(--accent) 88%, #000); } body.paper ::selection { background:var(--accent); color:#fff; } body.paper .cursor-glow { display:none; } /* buttons/CTAs get white text on the violet accent in light mode */ body.paper button, body.paper .btn-primary, body.paper .cta a.btn, body.paper .lnav .cta { color:#fff !important; box-shadow:3px 3px 0 var(--ink) !important; border:1.5px solid var(--ink); } body.paper .btn-ghost { border:1.5px solid var(--ink); color:var(--ink); box-shadow:3px 3px 0 rgba(33,30,23,.18); } /* …but secondary/ghost app buttons (transparent or light bg) need readable text on cream, not the white above — otherwise they vanish on the now-cream checker/score pages */ body.paper .copy { color:var(--accent) !important; border:none !important; box-shadow:none !important; } body.paper .linkbtn { color:var(--muted) !important; border:none !important; box-shadow:none !important; } body.paper .share .shbtn:not(.shbtn-primary) { color:var(--ink) !important; box-shadow:none !important; } body.paper .btn.rw { color:var(--accent) !important; box-shadow:none !important; } body.paper .navtoggle { color:var(--ink) !important; border:none !important; box-shadow:none !important; } body.paper .wl-x { color:var(--muted) !important; box-shadow:none !important; border:none !important; } /* ===== Tactile press states — every button reacts to a click ===== */ button, .btn, .btn-primary, .btn-ghost, .shbtn, .wl-go, .navcta, .hero-scan button, .pcbtn a, .cta a.btn, .copy { transition:transform .07s ease, box-shadow .07s ease, filter .12s ease, background .15s ease; } button:active, .btn:active, .btn-primary:active, .btn-ghost:active, .shbtn:active, .wl-go:active, .navcta:active, .hero-scan button:active, .pcbtn a:active, .cta a.btn:active, .copy:active { transform:translateY(1px); filter:brightness(.96); } /* paper neo-brutalist press — the button slides into its own offset shadow */ body.paper button:active, body.paper .btn-primary:active, body.paper .btn-ghost:active, body.paper .navcta:active, body.paper .hero-scan button:active, body.paper .pcbtn .solid:active, body.paper .pcbtn .ghost:active, body.paper .shbtn:active, body.paper .wl-go:active { transform:translate(3px,3px); box-shadow:0 0 0 var(--ink) !important; } /* panels become paper cards with a hand-inked border + offset shadow */ body.paper .fcard, body.paper .stepc, body.paper .pc, body.paper .faqwrap details, body.paper .rulechip { border:1.5px solid var(--ink); box-shadow:4px 4px 0 rgba(33,30,23,.12); background:var(--panel); } /* dark "app screenshot" mockups stay dark on cream — they read as real screenshots */ body.paper .winmock, body.paper .fixcard, body.paper .alertmock { border:1.5px solid var(--ink); box-shadow:6px 6px 0 rgba(33,30,23,.18); } /* ===== Hand-drawn "annotation" doodle toolkit ===== */ .doodle { position:relative; } .scribble { position:absolute; pointer-events:none; z-index:2; } .scribble path, .scribble line, .scribble circle, .scribble ellipse { fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; } .scribble.accent path, .scribble.accent line, .scribble.accent ellipse, .scribble.accent circle { stroke:var(--accent); } .hl { background:linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--amber) 55%, transparent) 55%); padding:0 .1em; } .circled { position:relative; white-space:nowrap; } .circled::after { content:""; position:absolute; inset:-6px -10px; border:2.5px solid var(--accent); border-radius:48% 52% 50% 50% / 60% 55% 45% 40%; transform:rotate(-2deg); pointer-events:none; } .tape { position:relative; } .tape::before { content:""; position:absolute; top:-11px; left:50%; transform:translateX(-50%) rotate(-3deg); width:74px; height:22px; background:color-mix(in srgb, var(--amber) 40%, #fff); opacity:.6; border:1px dashed rgba(0,0,0,.12); } /* framed contextual scenes (shared across all pages) */ .scene { position:relative; } .scene img { width:100%; height:auto; display:block; border:2.5px solid var(--ink); border-radius:16px; box-shadow:6px 6px 0 rgba(33,30,23,.18); } .scene-split { display:grid; grid-template-columns:1.02fr .98fr; gap:34px; align-items:center; margin:4px 0 8px; } .scene-split.rev .scene { order:2; } @media (max-width:860px){ .scene-split { grid-template-columns:1fr; gap:22px; } .scene-split.rev .scene { order:0; } } * { box-sizing:border-box; } html { color-scheme:dark; } body { margin:0; font:15px/1.6 var(--font); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; } ::selection { background:var(--accent); color:#0a0a0d; } a { color:var(--accent); } /* Trailing cursor glow */ .cursor-glow { position:fixed; top:0; left:0; width:360px; height:360px; margin:-180px 0 0 -180px; border-radius:50%; pointer-events:none; z-index:9999; background:radial-gradient(circle, var(--accent), transparent 62%); opacity:.16; filter:blur(34px); mix-blend-mode:screen; will-change:transform; } .wrap { max-width:760px; margin:0 auto; padding:24px 20px 90px; } .topnav { display:flex; gap:16px; margin-bottom:20px; font-size:14px; align-items:center; flex-wrap:wrap; } .topnav a { color:var(--muted); text-decoration:none; font-weight:600; } .topnav a:hover { color:var(--ink); } .topnav a.cur { color:var(--accent); } .topnav .sib { margin-left:auto; } .brandchip { display:inline-flex; align-items:center; gap:7px; font-weight:700; color:var(--ink) !important; } .brandchip .ic { width:22px; height:22px; border-radius:6px; background:var(--accent); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 18px -2px var(--accent); } .brandchip .ic svg { width:15px; height:15px; color:#0a0a0d; } /* ===== Unified site nav — full-width sticky bar, persistent CTA, on every page ===== */ .sitenav { position:sticky; top:0; z-index:60; backdrop-filter:blur(12px); background:color-mix(in srgb, var(--bg) 84%, transparent); border-bottom:1px solid var(--line); } .sitenav-in { max-width:1040px; margin:0 auto; padding:0 22px; display:flex; align-items:center; gap:18px; height:60px; position:relative; } .sitenav .brandchip { font-size:16px; } .sitenav .navlinks { margin-left:auto; display:flex; gap:20px; align-items:center; } .sitenav .navlinks a { color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; white-space:nowrap; } .sitenav .navlinks a:hover { color:var(--ink); } .sitenav .navlinks a.cur { color:var(--accent); } .sitenav .navcta { background:var(--accent); color:#fff !important; padding:9px 15px; border-radius:9px; box-shadow:0 0 22px -6px var(--accent); } body.paper .sitenav { background:color-mix(in srgb, var(--bg) 88%, transparent); border-bottom:1.5px solid var(--ink); } body.paper .sitenav .navcta { border:1.5px solid var(--ink); box-shadow:3px 3px 0 var(--ink); } .freshness { font-size:14px; line-height:1.55; background:color-mix(in srgb, var(--accent) 8%, transparent); border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius:12px; padding:13px 16px; margin:20px 0 8px; } body.paper .freshness { border:1.5px solid var(--ink); box-shadow:3px 3px 0 rgba(33,30,23,.12); } .subnav { font-size:13px; margin:18px 0 4px; display:flex; gap:9px; align-items:center; flex-wrap:wrap; } .subnav a { color:var(--muted); text-decoration:none; font-weight:600; } .subnav a:hover { color:var(--accent); } .subnav span { color:var(--line); } .navtoggle { display:none; margin-left:auto; background:none; border:none; font-size:22px; line-height:1; color:var(--ink); cursor:pointer; padding:6px 8px; border-radius:8px; } .navtoggle:hover { background:var(--panel2); } @media (max-width:760px){ .navtoggle { display:block; } .sitenav .navlinks { display:none; position:absolute; top:60px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--panel); border-bottom:1px solid var(--line); padding:6px 22px 16px; box-shadow:0 18px 30px -16px rgba(0,0,0,.5); } .sitenav .navlinks.open { display:flex; } .sitenav .navlinks a { padding:12px 2px; font-size:15px; border-bottom:1px solid var(--line); } .sitenav .navlinks a.navcta { margin-top:12px; text-align:center; border-radius:9px; padding:12px; border-bottom:none; } body.paper .sitenav .navlinks { border:1.5px solid var(--ink); } } /* Tool switcher — chips to hop between all 6 verticals, on every checker/generator. */ .toolswitch { display:flex; flex-wrap:wrap; gap:8px; margin:-6px 0 22px; } .toolswitch .tool { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; font-size:12.5px; font-weight:600; text-decoration:none; color:var(--muted); background:var(--panel); border:1px solid var(--line); transition:color .15s, border-color .15s; } .toolswitch .tool .d { width:7px; height:7px; border-radius:50%; flex:none; opacity:.85; } .toolswitch .tool:hover { color:var(--ink); border-color:color-mix(in srgb, var(--c) 60%, var(--line)); } .toolswitch .tool.cur { color:var(--c); border-color:var(--c); background:color-mix(in srgb, var(--c) 12%, var(--panel)); box-shadow:0 0 18px -8px var(--c); } .toolswitch .tool.cur .d { opacity:1; } h1 { font-size:30px; line-height:1.18; margin:0 0 12px; letter-spacing:-.01em; } .sub { color:var(--muted); margin:0 0 24px; } form { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; } label.q { display:block; font-weight:700; font-size:13.5px; margin:14px 0 6px; color:var(--ink); } textarea, select, input[type=text], input[type=email] { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:9px; font:inherit; background:var(--panel2); color:var(--ink); } textarea { min-height:84px; resize:vertical; } textarea::placeholder, input::placeholder { color:var(--muted); } select:focus, input:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .row { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:560px){ .row{ grid-template-columns:1fr; } } button { margin-top:18px; width:100%; padding:13px; border:0; border-radius:9px; background:var(--accent); color:#08080b; font:700 15px var(--font); cursor:pointer; box-shadow:0 0 24px -6px var(--accent); } button:hover { filter:brightness(1.08); } .trust { color:var(--muted); font-size:13px; margin-top:14px; } .trust span { display:inline-block; margin-right:14px; } #result { margin-top:26px; } .emptypane { display:flex; gap:11px; align-items:flex-start; padding:20px; border:1.5px dashed var(--line); border-radius:12px; color:var(--muted); font-size:14px; line-height:1.5; } .emptypane { font-size:20px; } .emptypane span { font-size:14px; } .verdict { border-radius:12px; padding:16px 18px; font-weight:700; font-size:18px; border:1px solid; } .goose-react { font-weight:700; font-size:14.5px; color:var(--accent); margin:14px 0 2px; line-height:1.42; } .working { display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; color:var(--accent); padding:30px 4px; } .working span { animation:work-pulse 1s ease-in-out infinite; } @keyframes work-pulse { 0%,100% { opacity:.5 } 50% { opacity:1 } } /* post-score CTA — two co-equal actions (email lead + Rule-Watch waitlist) */ .cta-actions { display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; align-items:stretch; } .cta-actions .wl { margin-top:0; flex:1 1 260px; } .cta-actions .wl button { white-space:nowrap; } .btn.rw { flex:1 1 220px; width:auto; margin:0; text-align:center; background:transparent; color:var(--accent) !important; border:1px solid var(--accent); box-shadow:none; padding:12px 18px; border-radius:9px; font:700 14px var(--font); } .btn.rw:hover { background:color-mix(in srgb, var(--accent) 14%, transparent); filter:none; } /* Quick Scan */ .scanbox { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin:6px 0 18px; } .scanbox h2 { margin:0 0 4px; font-size:17px; } .scanbox > p { margin:0 0 12px; color:var(--muted); font-size:14px; } .beta { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:1px 7px; vertical-align:middle; margin-left:6px; } .scanrow { display:flex; gap:10px; flex-wrap:wrap; } .scanrow input { flex:1; min-width:200px; padding:11px 13px; border:1px solid var(--line); border-radius:9px; font:inherit; background:var(--panel2); color:var(--ink); } .scanrow button { margin:0; width:auto; padding:11px 18px; white-space:nowrap; } .scanresult { margin-top:14px; } .scanfinds { list-style:none; padding:0; margin:10px 0; } .scanfinds li { padding:7px 0; border-bottom:1px solid var(--line); font-size:13.5px; line-height:1.5; } .scanfinds li .muted { display:block; font-size:12.5px; } body.paper .scanbox { border:1.5px solid var(--ink); box-shadow:4px 4px 0 rgba(33,30,23,.12); } body.paper .scanrow input { background:#fff; } .verdict.at_risk { background:color-mix(in srgb, var(--red) 13%, transparent); color:var(--red); border-color:color-mix(in srgb, var(--red) 38%, transparent); } .verdict.needs_fixes { background:color-mix(in srgb, var(--amber) 14%, transparent); color:var(--amber); border-color:color-mix(in srgb, var(--amber) 40%, transparent); } .verdict.compliant { background:color-mix(in srgb, var(--green) 13%, transparent); color:var(--green); border-color:color-mix(in srgb, var(--green) 38%, transparent); } .finding { display:flex; gap:10px; padding:13px 0; border-bottom:1px solid var(--line); } .finding .icon { flex:0 0 auto; font-size:17px; line-height:1.5; } .finding .problem { font-weight:700; } .finding .fix { color:var(--muted); font-size:13.5px; margin-top:3px; } .cta { margin-top:26px; background:linear-gradient(180deg, var(--panel), var(--bg)); border:1px solid var(--line); border-radius:14px; padding:20px; } .cta a.btn { display:inline-block; margin-top:12px; padding:11px 18px; border-radius:9px; background:var(--accent); color:#08080b !important; font-weight:700; text-decoration:none; box-shadow:0 0 24px -6px var(--accent); } .cta .or { color:var(--muted); font-size:13px; margin:14px 0 2px; } .wl { display:flex; gap:8px; margin-top:6px; flex-wrap:wrap; } .wl input[type=email] { flex:1 1 220px; } .wl button { margin:0; width:auto; padding:10px 16px; } .hp { position:absolute; left:-9999px; } #wl-msg { margin-top:10px; color:var(--green); font-weight:700; } /* ===== Rule-Watch waitlist modal (waitlist.mjs) ===== */ .wl-overlay { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(8,8,11,.62); backdrop-filter:blur(3px); animation:wl-fade .18s ease; } .wl-overlay[hidden] { display:none; } @keyframes wl-fade { from { opacity:0; } to { opacity:1; } } .wl-card { position:relative; width:100%; max-width:430px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:18px; padding:30px 28px 26px; box-shadow:0 30px 80px -20px rgba(0,0,0,.6); animation:wl-pop .22s cubic-bezier(.2,.9,.3,1.2); } @keyframes wl-pop { from { transform:translateY(14px) scale(.97); opacity:0; } to { transform:none; opacity:1; } } body.paper .wl-card { border:2px solid var(--ink); box-shadow:8px 8px 0 rgba(33,30,23,.22); } .wl-x { position:absolute; top:12px; right:14px; width:32px; height:32px; padding:0; border:none; background:transparent; color:var(--muted); font-size:24px; line-height:1; cursor:pointer; border-radius:8px; } .wl-x:hover { color:var(--ink); background:var(--panel2); } body.paper .wl-x { box-shadow:none !important; border:none !important; } .wl-goose { font-size:34px; line-height:1; margin-bottom:8px; display:inline-block; transform-origin:70% 90%; } @media (prefers-reduced-motion: no-preference) { .wl-overlay:not([hidden]) .wl-goose { animation:waddle .55s ease; } } @keyframes waddle { 0%{transform:rotate(0)} 22%{transform:rotate(-13deg)} 52%{transform:rotate(10deg)} 78%{transform:rotate(-5deg)} 100%{transform:rotate(0)} } .wl-card h2 { margin:0 0 8px; font-size:21px; } .wl-sub { margin:0 0 16px; font-size:14px; line-height:1.55; color:var(--muted); } .wl-card .wl-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .wl-row { display:flex; gap:8px; flex-wrap:wrap; } .wl-row input[type=email] { flex:1 1 200px; min-width:0; padding:12px 14px; font:14px var(--font); border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--ink); } body.paper .wl-row input[type=email] { background:#fff; border:1.5px solid var(--ink); } .wl-row input[type=email]:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } .wl-go { flex:0 0 auto; padding:12px 18px; border-radius:10px; border:none; background:var(--accent); color:#fff; font-weight:700; font-size:14px; cursor:pointer; } .wl-go:hover { filter:brightness(1.08); } .wl-go:disabled { opacity:.7; cursor:default; } body.paper .wl-go { border:1.5px solid var(--ink); box-shadow:3px 3px 0 var(--ink); } .wl-fine { margin:12px 0 0; font-size:12px; color:var(--muted); } .wl-card .wl-msg { margin:14px 0 0; font-size:14px; line-height:1.5; } .wl-card .wl-msg.ok { color:var(--green); } .wl-card .wl-msg.err { color:var(--red); } #fixit { background:var(--green); color:#06120b; box-shadow:0 0 24px -6px var(--green); } .fixbox { margin-top:16px; } .fh { font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:18px 0 6px; } .fixbox ul { margin:0; padding-left:18px; } .fixbox li { margin:6px 0; } .fixbox textarea { min-height:80px; } .copy { font-size:12px; color:var(--accent); cursor:pointer; font-weight:700; float:right; background:none; border:none; padding:2px 6px; border-radius:6px; font-family:inherit; width:auto; margin:0; box-shadow:none; } .copy:hover { background:color-mix(in srgb, var(--accent) 16%, transparent); filter:none; } .copy:focus-visible { outline:2px solid var(--accent); outline-offset:1px; } body.paper .copy { box-shadow:none !important; } .muted { color:var(--muted); font-size:13px; } .asof { color:var(--muted); font-size:12px; margin-top:18px; } .pass { color:var(--green); } .badge { display:inline-block; background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius:999px; padding:4px 11px; font-weight:700; font-size:13px; margin-bottom:8px; } .pro-wrap { margin-top:10px; } .pro-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .pro-input { flex:1 1 180px; width:auto; padding:9px 11px; } .pro-btn { margin:0; width:auto; padding:9px 14px; border:0; border-radius:8px; background:var(--accent); color:#08080b; font:700 14px var(--font); cursor:pointer; } .pro-link { color:var(--accent); font-weight:700; text-decoration:none; font-size:14px; } .pro-active { color:var(--green); font-weight:700; } .pro-note { color:var(--red); font-size:13px; margin-top:6px; } /* Hub */ .hero { text-align:center; padding:48px 0 16px; } .hero h1 { font-size:42px; max-width:18ch; margin:16px auto 14px; letter-spacing:-.02em; } @media (max-width:560px){ .hero h1{ font-size:30px; } } .hero .tag { font-size:18px; color:var(--ink); font-weight:700; max-width:40ch; margin:0 auto 8px; } .hero .lede { color:var(--muted); max-width:56ch; margin:0 auto; } .start { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; margin:26px 0 8px; } .start h2 { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 4px; } .start p { color:var(--muted); margin:0 0 14px; font-size:14px; } .start label { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); cursor:pointer; font-size:15px; } .start label:last-child { border-bottom:0; } .start input { margin-top:4px; accent-color:var(--accent); } .grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; } @media (max-width:680px){ .grid{ grid-template-columns:1fr; } } .card { display:block; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; text-decoration:none; color:var(--ink); transition:transform .14s, box-shadow .14s, border-color .14s; } .card:hover { transform:translateY(-3px); border-color:color-mix(in srgb, var(--c) 55%, var(--line)); box-shadow:0 16px 40px -12px var(--c); } .card.dim { opacity:.32; } .card.match { border-color:var(--c); box-shadow:0 0 0 1px var(--c), 0 16px 40px -12px var(--c); } .card .bar { height:5px; background:var(--c); } .card .b { padding:18px 20px; } .card .ic { width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:10px; } .card .ic svg { width:21px; height:21px; } .card h3 { margin:0 0 2px; font-size:18px; } .card .rule { font-size:12.5px; font-weight:700; margin:0 0 8px; } .card p { margin:0 0 14px; color:var(--muted); font-size:14px; } .card .go { font-weight:700; font-size:14px; } footer { text-align:center; color:var(--muted); font-size:13px; padding:30px 0 60px; } /* --- RuleProof Score page (/score) ----------------------------------------- */ .vblock { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--c); border-radius:14px; padding:18px 20px; margin:14px 0; } .vblock .vhead { display:flex; align-items:center; gap:9px; margin-bottom:12px; font-size:15px; } .vblock .vhead .d { width:10px; height:10px; border-radius:50%; flex:none; } .scorehead { display:flex; gap:22px; align-items:center; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; } .scorehead svg { flex:none; } .bandtag { display:inline-block; border:1px solid; border-radius:999px; padding:3px 12px; font-weight:700; font-size:13px; } .breakdown { margin-top:16px; display:flex; flex-direction:column; gap:8px; } .srow { display:block; padding:13px 16px; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--c); border-radius:11px; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .1s; } .srow:hover { border-color:var(--c); transform:translateX(2px); } .srow-top { display:flex; align-items:center; gap:12px; } .srow-issues { margin:9px 0 0 21px; display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--muted); } .srow-issues .more { color:var(--c); font-weight:700; } .srow-pen { margin:8px 0 0 21px; font-size:12px; font-weight:700; color:var(--red); display:inline-block; } /* on cream the row is an , so keep its body text dark ink — color lives in the dot/border/Fix chevron */ body.paper .srow, body.paper .srow .sname, body.paper .srow .sscore { color:var(--ink); } .exposure-note { font-size:12.5px; line-height:1.5; color:var(--muted); margin:14px 0 0; padding:11px 14px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb, var(--red) 6%, transparent); } .exposure-note a { color:var(--accent); font-weight:700; } .srow .d { width:9px; height:9px; border-radius:50%; flex:none; } .srow .sname { flex:1; font-weight:700; font-size:14px; min-width:0; } .srow .sname .muted { font-weight:400; } .srow .sverd { font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; flex:none; } .srow .sverd.at_risk { background:color-mix(in srgb, var(--red) 15%, transparent); color:var(--red); } .srow .sverd.needs_fixes { background:color-mix(in srgb, var(--amber) 16%, transparent); color:var(--amber); } .srow .sverd.compliant { background:color-mix(in srgb, var(--green) 15%, transparent); color:var(--green); } .srow .sscore { font-weight:700; font-size:15px; flex:none; } .srow .sscore .muted { font-weight:400; font-size:12px; } .srow .sgo { color:var(--c); font-weight:700; font-size:13px; flex:none; } @media (max-width:560px){ .srow .sname .muted { display:none; } .srow .sgo { margin-left:auto; } } /* RuleProof Score — share panel */ .share { margin-top:18px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; } .share .sharehd { font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; } .share .sharebtns { display:flex; gap:10px; flex-wrap:wrap; } .share .shbtn { margin:0; width:auto; padding:10px 16px; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--ink); font:700 14px var(--font); cursor:pointer; box-shadow:none; } .share .shbtn:hover { border-color:var(--accent); } .share .shbtn-primary { display:inline-block; background:var(--accent); color:#fff; border-color:var(--accent); padding:12px 20px; box-shadow:0 0 24px -8px var(--accent); } .share .shbtn-primary:hover { filter:brightness(1.08); border-color:var(--accent); } .share .share-more { font-size:12px; color:var(--muted); margin:14px 0 8px; } /* Score report header/note — shown only when printing */ .report-meta, .report-note { display:none; } @media print { .cursor-glow, .topnav, .toolswitch, .start, #qform, #calc, .share, #lead, #lead-msg, .or, footer, .cta .btn, .cta strong, .cta br, .srow .sgo, #form, #go, .trust, #fixit, .faq, .wl, .pro-wrap { display:none !important; } body { background:#fff !important; color:#000 !important; } .wrap { max-width:100%; padding:0; } h1, .sub { display:none; } /* Checker result blocks */ .verdict { color:#000 !important; border:1px solid #999 !important; background:#fff !important; } .finding { border-bottom:1px solid #ddd !important; } .finding .problem, .fixbox, .fixbox textarea { color:#000 !important; } .fixbox textarea { border:1px solid #ccc !important; background:#fff !important; } .report-meta { display:flex !important; justify-content:space-between; align-items:baseline; border-bottom:2px solid #111; padding-bottom:10px; margin-bottom:20px; } .report-meta .rm-brand { font-weight:800; font-size:18px; color:#000; } .report-meta .rm-date { color:#555; font-size:12px; } .report-note { display:block !important; color:#555; font-size:11px; margin-top:18px; } .poweredby { display:block !important; color:#888 !important; } .scorehead, .srow { background:#fff !important; border:1px solid #ccc !important; box-shadow:none !important; color:#000 !important; } .scorehead h2, .srow .sname, .srow .sname .muted, .scorehead .muted { color:#000 !important; } .scorehead svg text { fill:#000 !important; } .scorehead svg circle:first-of-type { stroke:#e5e5e5 !important; } .srow .sname .muted { display:inline !important; } .cta { border:0 !important; background:none !important; padding:0 !important; } } /* --- Accessibility ---------------------------------------------------------- */ /* Visible keyboard focus on all interactive elements (WCAG 2.4.7). */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; } /* Skip link — hidden until focused. */ .skip-link { position:absolute; left:8px; top:-44px; z-index:10000; background:var(--accent); color:#08080b; padding:9px 14px; border-radius:8px; font-weight:700; text-decoration:none; transition:top .15s; } .skip-link:focus { top:8px; } /* Screen-reader-only text. */ .visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* Hub FAQ */ .faq { margin:40px 0 8px; } .faq h2 { font-size:22px; margin:0 0 14px; } .faq details { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 18px; margin-bottom:10px; } .faq summary { font-weight:700; cursor:pointer; list-style:none; } .faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:"+"; float:right; color:var(--accent); font-weight:700; } .faq details[open] summary::after { content:"–"; } .faq details p { color:var(--muted); margin:12px 0 0; font-size:14.5px; } /* Scroll-reveal (JS opt-in via .rv; content visible without JS) */ .rv { opacity:0; transform:translateY(12px); transition:opacity .5s ease var(--rv-d,0ms), transform .5s cubic-bezier(.2,.7,.2,1) var(--rv-d,0ms); } .rv.rv-in { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce) { .rv { opacity:1 !important; transform:none !important; } } /* Hub trust strip */ .truststrip { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; padding:0; margin:16px 0 0; } .truststrip li { color:var(--muted); font-size:13px; font-weight:600; } /* Score "since last check" delta */ .delta { font-weight:700; } .delta.up { color:var(--green); } .delta.down { color:var(--red); } /* Hub card effective-date status pill */ .card { position:relative; } .statuspill { position:absolute; top:14px; right:14px; font-size:11px; font-weight:700; letter-spacing:.02em; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:3px 9px; } /* Shared site footer */ .sitefooter { border-top:1px solid var(--line); margin-top:50px; } .sitefooter .wrap { padding-top:28px; padding-bottom:40px; } .footlinks { display:flex; flex-wrap:wrap; gap:10px 20px; margin-bottom:14px; } .footlinks a { color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; } .footlinks a:hover { color:var(--ink); } .sitefooter p { color:var(--muted); font-size:12.5px; margin:0; } /* Score breakdown row effective-date status */ .srow-status { display:inline-block; margin-left:8px; font-size:10.5px; font-weight:700; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:1px 7px; vertical-align:middle; white-space:nowrap; } @media (max-width:560px){ .srow-status { display:none; } } /* Subtle text-style button (e.g. Start over) */ .linkbtn { margin:0; width:auto; padding:6px 10px; background:none; border:0; box-shadow:none; color:var(--muted); font:600 13px var(--font); cursor:pointer; } .linkbtn:hover { color:var(--ink); filter:none; } /* Landing — stats band, platform row, differentiator band */ .statsband { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } @media (max-width:680px){ .statsband { grid-template-columns:1fr 1fr; } } .statsband .stat { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; text-align:center; } .statsband .sv { font-size:38px; font-weight:800; color:var(--accent); letter-spacing:-.02em; } .statsband .sl { color:var(--muted); font-size:13.5px; margin-top:4px; } .platformrow { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; } .platformrow .plat { background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-weight:700; font-size:14px; color:var(--ink); } .diffband { display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:28px; } /* Score "how is this scored?" explainer */ .howscored { margin-top:16px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 18px; } .howscored summary { font-weight:700; cursor:pointer; list-style:none; font-size:14px; } .howscored summary::-webkit-details-marker { display:none; } .howscored summary::after { content:"+"; float:right; color:var(--accent); font-weight:700; } .howscored[open] summary::after { content:"–"; } .howscored p { color:var(--muted); margin:12px 0 0; font-size:14px; } /* Checker effective-status pill near the heading */ .statusline { display:inline-block; margin:-8px 0 16px; font-size:12px; font-weight:700; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:3px 11px; }