/* ============================================================================ PWN-ALL · shared tool-page CHROME — identical header + footer on every /tools page. Linked (absolute) as /tools/theme.css; pairs with /tools/theme.js. Self-contained --pwn-* tokens so the chrome looks identical on every page regardless of that page's own palette. Driven by [data-theme] on (set by theme.js). Header/footer rules are scoped under .pwn-bar / .pwn-foot so they override whatever a page's own styles.css defines for .lang-switcher etc. ============================================================================ */ :root { --pwn-page:#f6f8fc; --pwn-surface:#ffffff; --pwn-sunken:#eef2f8; --pwn-strong:#0b1220; --pwn-body:#3a4a63; --pwn-muted:#566480; --pwn-faint:#7d8aa3; --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:'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:#6f757e; --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"]) { --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); } } /* ---- Header ---- */ .pwn-bar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:16px; padding:14px clamp(16px,4vw,24px); background:var(--pwn-surface); border-bottom:1px solid var(--pwn-border); font-family:var(--pwn-font); } .pwn-bar *, .pwn-foot * { box-sizing:border-box; } /* Grid: row1 = [img | -ALL], row2 = small spanning under both. .lk passes through (display:contents) so its / become direct grid items. */ .pwn-logo { display:inline-grid; grid-template-columns:auto auto; align-items:center; column-gap:1px; color:var(--pwn-strong); text-decoration:none; } .pwn-bar .pwn-logo:hover, .pwn-foot .foot-logo:hover { text-decoration:none; } .pwn-logo .lk { display:contents; } .pwn-logo img { display:block; height:32px; width:auto; grid-row:1; grid-column:1; } .pwn-logo b { grid-row:1; grid-column:2; font-weight:700; font-size:22px; line-height:1; letter-spacing:-.01em; white-space:nowrap; } .pwn-logo small { grid-row:2; grid-column:1 / -1; font-size:9.5px; font-weight:600; color:var(--pwn-muted); letter-spacing:.12em; text-transform:uppercase; margin-top:3px; line-height:1; } .pwn-div { width:1px; height:22px; background:var(--pwn-border-2); flex:none; } .pwn-title { font-size:18px; font-weight:600; color:var(--pwn-strong); } .pwn-spacer { flex:1; } .pwn-actions { display:inline-flex; align-items:center; gap:10px; margin-inline-start:auto; } /* ---- Theme toggle (global; index reuses it too) ---- */ .theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:none; cursor:pointer; border-radius:50%; background:transparent; border:1px solid var(--pwn-border-2); color:var(--pwn-body); transition:background .15s, color .15s; } .theme-toggle:hover { background:var(--pwn-sunken); color:var(--pwn-strong); } .theme-toggle svg { width:18px; height:18px; display:block; } /* ---- Language switcher (design globe dropdown) — scoped to .pwn-bar ---- */ /* display:inline-block beats each page's own `@media{.lang-switcher{display:none}}` so the switcher stays visible on mobile (the chrome rule is more specific than the page's). */ .pwn-bar .lang-switcher { position:relative; display:inline-block; border:0; margin:0; padding:0; background:none; } .pwn-bar .lang-switcher > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 12px; border:1px solid var(--pwn-border-2); border-radius:6px; background:var(--pwn-surface); color:var(--pwn-strong); font:500 13px/1 var(--pwn-font); box-shadow:var(--pwn-shadow-xs); } .pwn-bar .lang-switcher > summary::-webkit-details-marker { display:none; } .pwn-bar .lang-switcher > summary::marker { content:""; } /* neutralise leaky per-tool accordion markers (e.g. global `summary::after{content:"+"}`) */ .pwn-bar .lang-switcher > summary::before, .pwn-bar .lang-switcher > summary::after { content:none; } .pwn-bar .lang-switcher > summary:hover, .pwn-bar .lang-switcher[open] > summary { background:var(--pwn-sunken); } .pwn-bar .lang-switcher > summary > svg:first-of-type { width:16px; height:16px; color:var(--pwn-muted); } .pwn-bar .lang-switcher .cur { max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pwn-bar .lang-switcher > summary > svg:last-of-type { width:15px; height:15px; color:var(--pwn-faint); transition:transform .14s; } .pwn-bar .lang-switcher[open] > summary > svg:last-of-type { transform:rotate(180deg); } @keyframes pwn-langpop { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } } .pwn-bar .lang-menu { position:absolute; inset-inline-end:0; top:calc(100% + 6px); z-index:60; display:grid; gap:2px; max-height:64vh; overflow:auto; min-width:188px; padding:6px; border:1px solid var(--pwn-border-2); border-radius:10px; background:var(--pwn-surface); box-shadow:var(--pwn-shadow-lg); animation:pwn-langpop 140ms cubic-bezier(.16,1,.3,1); } .pwn-bar .lang-menu a { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:6px; color:var(--pwn-body); font:500 13px/1 var(--pwn-font); white-space:nowrap; text-decoration:none; } .pwn-bar .lang-menu a .ln { flex:1; } .pwn-bar .lang-menu a .lc { font:500 11px/1 var(--pwn-mono); color:var(--pwn-faint); text-transform:uppercase; } .pwn-bar .lang-menu a svg { width:15px; height:15px; color:var(--accent); } .pwn-bar .lang-menu a:hover { background:var(--pwn-sunken); } .pwn-bar .lang-menu a[aria-current="true"] { background:var(--accent-soft); color:var(--accent); font-weight:600; } .pwn-bar .lang-menu a[aria-current="true"] .lc { color:var(--accent); } /* one-time attention pulse after an automatic first-visit locale redirect (theme.js) */ @keyframes pwn-pulse { 0% { box-shadow:0 0 0 0 var(--pwn-pulse-ring); } 70% { box-shadow:0 0 0 9px transparent; } 100% { box-shadow:0 0 0 0 transparent; } } .pwn-bar .lang-switcher.pwn-pulse > summary { --pwn-pulse-ring:color-mix(in srgb, var(--accent) 45%, transparent); border-color:var(--accent); animation:pwn-pulse 1s ease-out 3; } /* ---- 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(1120px,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-logo img, .pwn-foot .foot-logo img { filter:grayscale(1) brightness(.8) contrast(1.1); } :root[data-theme="dark"] .pwn-logo img, :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-logo img, :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; 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); } /* ---- Homepage header variant: centred nav links + CTA + mobile hamburger ---- */ .pwn-bar.pwn-fixed { position:fixed; top:0; left:0; right:0; } .pwn-nav { display:flex; align-items:center; gap:28px; margin-inline:auto; } .pwn-nav a:not(.pwn-cta) { color:var(--pwn-body); font:500 14px/1 var(--pwn-font); text-decoration:none; white-space:nowrap; transition:color .15s; } .pwn-nav a:not(.pwn-cta):hover { color:var(--pwn-strong); } .pwn-cta { display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 16px; border-radius:8px; background:var(--accent); color:#fff; font:600 13px/1 var(--pwn-font); text-decoration:none; white-space:nowrap; transition:background .15s; } .pwn-cta:hover { background:var(--accent-hover); } /* Dark: --accent is a light grey (bad with white text) → use the fixed dark button color. */ :root[data-theme="dark"] .pwn-cta { background:#373b42; color:#fff; } :root[data-theme="dark"] .pwn-cta:hover { background:#43474f; } @media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .pwn-cta { background:#373b42; color:#fff; } :root:not([data-theme="light"]) .pwn-cta:hover { background:#43474f; } } .pwn-cta-m { display:none; } .pwn-burger { display:none; align-items:center; justify-content:center; width:38px; height:38px; flex:none; cursor:pointer; border-radius:50%; background:transparent; border:1px solid var(--pwn-border-2); color:var(--pwn-body); } .pwn-burger:hover { background:var(--pwn-sunken); color:var(--pwn-strong); } .pwn-burger svg { width:18px; height:18px; display:block; } @media (max-width:860px) { .pwn-burger { display:inline-flex; } .pwn-cta-bar { display:none; } .pwn-cta-m { display:inline-flex; } .pwn-nav { position:absolute; inset-inline-end:0; top:100%; z-index:60; display:none; flex-direction:column; align-items:stretch; gap:2px; min-width:220px; margin:0; padding:10px; background:var(--pwn-surface); border:1px solid var(--pwn-border); border-radius:12px; box-shadow:var(--pwn-shadow-lg); } .pwn-bar.nav-open .pwn-nav { display:flex; } .pwn-nav a:not(.pwn-cta) { padding:10px 12px; border-radius:8px; font-size:15px; } .pwn-nav a:not(.pwn-cta):hover { background:var(--pwn-sunken); } .pwn-nav .pwn-cta-m { margin-top:6px; } } /* ---- Mobile: theme + language stay on the right; title collapses ---- */ @media (max-width:560px) { .pwn-title, .pwn-div { display:none; } .pwn-bar .lang-switcher .cur { display:none; } .pwn-foot .foot-cols { grid-template-columns:repeat(2,1fr); gap:22px 16px; } }