/* ============================================================================ PWN-ALL · shared tool-page CHROME — footer + service-CTA band + unified accent tokens on every /tools page. Linked (absolute) as /tools/theme.css; pairs with /tools/theme.js (which only mirrors the OS light/dark preference). Self-contained --pwn-* tokens so the chrome looks identical on every page regardless of that page's own palette, driven by [data-theme] on . The header/nav/language-switcher this file once styled was removed when pages moved to the static pwnc chrome (see /chrome/chrome.html); footer rules are scoped under .pwn-foot. ============================================================================ */ @font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/fonts/Inter-var.woff2') format('woff2'), url('/fonts/Inter-var.ttf') format('truetype'); } :root { --pwn-page:#f6f8fc; --pwn-surface:#ffffff; --pwn-sunken:#eef2f8; --pwn-strong:#0b1220; --pwn-body:#3a4a63; --pwn-muted:#566480; --pwn-faint:#5a6678; /* faint darkened from #7d8aa3 for WCAG AA (4.5:1) on light surfaces */ --pwn-border:#e2e8f1; --pwn-border-2:#d4dce8; /* ONE unified accent for the chrome AND every /tools page's content (loaded last, so it overrides each tool's own --accent family): charcoal in light, soft grey in dark. */ --accent:#323232; --accent-hover:#1f1f1f; --accent-text:#323232; --accent-soft:#ececec; --accent-l:rgba(50,50,50,.08); --accent-2:#4a4f57; --accent-soft-border:rgba(50,50,50,.18); --pwn-shadow-xs:0 1px 2px rgba(11,18,32,.06); --pwn-shadow-lg:0 12px 28px rgba(11,18,32,.10), 0 4px 8px rgba(11,18,32,.05); --pwn-font:'Inter','IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --pwn-mono:'IBM Plex Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace; } [data-theme="dark"] { --pwn-page:#16171a; --pwn-surface:#1d1f23; --pwn-sunken:#25282e; --pwn-strong:#e7e8ec; --pwn-body:#b2b7bf; --pwn-muted:#9aa0aa; --pwn-faint:#9197a0; /* faint lightened from #6f757e for WCAG AA (4.5:1) on dark surfaces */ --pwn-border:#232529; --pwn-border-2:#2c2f36; --pwn-shadow-xs:0 1px 2px rgba(0,0,0,.4); --pwn-shadow-lg:0 28px 60px -26px rgba(0,0,0,.66); } /* Dark accent — :root[data-theme] (specificity 0,2,0) + loaded last beats each tool's own dark block, so the unified accent wins. @media variant covers zero-JS auto-dark. */ :root[data-theme="dark"] { --accent:#c2c7d0; --accent-hover:#d6dae0; --accent-text:#c2c7d0; --accent-soft:#25282e; --accent-l:rgba(255,255,255,.08); --accent-2:#aab2bd; --accent-soft-border:rgba(255,255,255,.18); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Full dark palette for the zero-JS / pre-JS auto-dark path. Previously only the accent was set here, so when the OS was dark and theme.js hadn't set data-theme, the chrome surface stayed light → white .pwn-bar header on a dark page. Mirrors the [data-theme="dark"] block. */ --pwn-page:#16171a; --pwn-surface:#1d1f23; --pwn-sunken:#25282e; --pwn-strong:#e7e8ec; --pwn-body:#b2b7bf; --pwn-muted:#9aa0aa; --pwn-faint:#9197a0; --pwn-border:#232529; --pwn-border-2:#2c2f36; --pwn-shadow-xs:0 1px 2px rgba(0,0,0,.4); --pwn-shadow-lg:0 28px 60px -26px rgba(0,0,0,.66); --accent:#c2c7d0; --accent-hover:#d6dae0; --accent-text:#c2c7d0; --accent-soft:#25282e; --accent-l:rgba(255,255,255,.08); --accent-2:#aab2bd; --accent-soft-border:rgba(255,255,255,.18); } } /* box-sizing for the footer chrome (the header .pwn-bar chrome this file used to also style was removed — live pages use the static pwnc chrome instead). */ .pwn-foot * { box-sizing:border-box; } .pwn-foot .foot-logo:hover { text-decoration:none; } /* ---- Footer (design SiteFooter; no copyright bar) ---- */ .pwn-foot { border-top:1px solid var(--pwn-border); background:var(--pwn-surface); font-family:var(--pwn-font); } .pwn-foot .foot-inner { width:min(1400px,100%); margin:0 auto; padding:56px clamp(16px,4vw,24px) 48px; display:flex; flex-wrap:wrap; gap:40px; } .pwn-foot .foot-brand { flex:0 1 300px; min-width:240px; } .pwn-foot .foot-logo { display:inline-flex; align-items:center; gap:1px; color:var(--pwn-strong); font-weight:700; font-size:22px; letter-spacing:-.01em; white-space:nowrap; text-decoration:none; } .pwn-foot .foot-logo img { display:block; height:32px; width:auto; } /* Emblem recolored to the -ALL text tone (var(--pwn-strong)): grayscale + brightness lands it on near-black (light) / near-white (dark), keeping the weave contours. */ .pwn-foot .foot-logo img { filter:grayscale(1) brightness(.8) contrast(1.1); } :root[data-theme="dark"] .pwn-foot .foot-logo img { filter:grayscale(1) brightness(1.85) contrast(.95); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pwn-foot .foot-logo img { filter:grayscale(1) brightness(1.85) contrast(.95); } } .pwn-foot .foot-tagline { margin:16px 0 0; max-width:32ch; color:var(--pwn-muted); font-size:13.5px; line-height:1.6; } .pwn-foot .foot-loc { display:inline-flex; align-items:center; gap:7px; margin:14px 0 0; color:var(--pwn-body); font-size:13.5px; } .pwn-foot .foot-loc svg { width:15px; height:15px; color:var(--pwn-faint); flex:none; } .pwn-foot .foot-cols { flex:1 1 500px; display:grid; grid-template-columns:repeat(3,minmax(140px,1fr)); gap:28px; } .pwn-foot .foot-col { display:flex; flex-direction:column; gap:12px; min-width:0; } .pwn-foot .foot-h { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--pwn-faint); margin-bottom:2px; } .pwn-foot .foot-col a { display:inline-flex; align-items:center; gap:5px; min-height:15px; width:fit-content; color:var(--pwn-body); font-size:13.5px; text-decoration:none; } .pwn-foot .foot-col a:hover { color:var(--pwn-strong); } .pwn-foot .foot-col a svg { width:13px; height:13px; color:var(--pwn-faint); flex:none; } .pwn-foot .foot-col a:hover svg { color:var(--accent); } [dir="rtl"] .pwn-foot .foot-col a svg { transform:scaleX(-1); } /* Footer social row + text wordmark — parity with the homepage footer. */ .pwn-foot .foot-logo { direction:ltr; } /* keep the PWN-ALL wordmark LTR on RTL pages */ .pwn-foot .foot-logo span { color:var(--pwn-faint); } .pwn-foot .foot-social { display:flex; gap:10px; margin-top:20px; } .pwn-foot .foot-soc { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--pwn-muted); border:1px solid var(--pwn-border); transition:color .16s ease, border-color .16s ease, background .16s ease; } .pwn-foot .foot-soc:hover { color:var(--pwn-strong); border-color:var(--pwn-border-2); background:var(--pwn-sunken); } .pwn-foot .foot-soc svg { display:block; } /* ---- Mobile: footer columns collapse ---- */ @media (max-width:560px) { .pwn-foot .foot-cols { grid-template-columns:repeat(2,1fr); gap:22px 16px; } } /* ── Service CTA band above the footer (tool pages + hubs) ─────────────────── */ .pwn-svc-cta{ border-top:1px solid var(--pwn-border); background:var(--pwn-sunken); } .pwn-svc-cta .svc-cta-inner{ max-width:1080px; margin:0 auto; padding:26px clamp(16px,4vw,28px); display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .pwn-svc-cta .svc-cta-copy{ flex:1 1 380px; min-width:0; } .pwn-svc-cta b{ display:block; font:700 15.5px/1.3 var(--pwn-font); color:var(--pwn-strong); margin-bottom:4px; } .pwn-svc-cta p{ margin:0; font:400 13.5px/1.55 var(--pwn-font); color:var(--pwn-body); max-width:640px; } .pwn-svc-cta .svc-cta-btn{ flex:none; display:inline-flex; align-items:center; gap:8px; text-decoration:none; font:600 13.5px/1 var(--pwn-font); color:var(--pwn-page); background:var(--accent); border-radius:999px; padding:12px 20px; transition:background .15s ease; } .pwn-svc-cta .svc-cta-btn:hover{ background:var(--accent-hover); } .pwn-svc-cta .svc-cta-btn svg{ width:14px; height:14px; }