/* ============================================================================ WHISPER APP SHELL — shared look for every internal app (copy-per-repo). Copy this file + whisper-shell.js + the two Pilat OTFs + logo-white.png + logo.png into an app, link it in , include the JS before , and use the header markup from header.html. Dark is the default. For a light-defaulting app, set . The theme toggle flips :root[data-theme]. Brand palette only: red #FF000E, pink #FF0097, black, white (+ the gradient as an accent). No greys — "muted" is a white/black tint of the foreground. ============================================================================ */ @font-face{font-family:'Pilat Extended Heavy';src:url('PilatExtended-Heavy.otf') format('opentype');font-weight:400;font-display:swap} @font-face{font-family:'Pilat Extended Book';src:url('PilatExtended-Book.otf') format('opentype');font-weight:400;font-display:swap} :root{ --red:#FF000E; --pink:#FF0097; --grad:linear-gradient(90deg,var(--red),var(--pink)); --bg:#0b0b0b; --fg:#fff; --muted:rgba(255,255,255,.72); --line:rgba(255,255,255,.18); --card:#141414; --head:'Pilat Extended Heavy',Arial,sans-serif; --body:'Pilat Extended Book',Arial,sans-serif; } :root[data-theme="light"]{ --bg:#ffffff; --fg:#0b0b0b; --muted:rgba(0,0,0,.62); --line:rgba(0,0,0,.16); --card:#f5f5f5; } body{margin:0;font-family:var(--body);background:var(--bg);color:var(--fg);min-height:100vh} /* ---- Header (identical across apps) ------------------------------------- */ .wbar{display:flex;align-items:center;gap:14px;padding:16px 24px;position:sticky;top:0;z-index:20; background:var(--bg);border-bottom:3px solid transparent;border-image:var(--grad) 1} .wbar .wlogo{height:26px;width:auto;display:block} .wbar .wtitle{font-family:var(--head);text-transform:uppercase;font-size:13px;letter-spacing:.06em; color:var(--fg);padding-left:14px;margin-left:2px;border-left:1px solid var(--line)} .wbar .wsp{flex:1} .wbar .wuser{font-size:11px;color:var(--muted)} .wbar .wtheme{background:none;border:0;color:var(--fg);font-size:18px;line-height:1;cursor:pointer;padding:2px 6px;opacity:.8} .wbar .wtheme:hover{opacity:1} /* ---- Buttons (identical across apps) ------------------------------------ */ .btn{font-family:var(--head);text-transform:uppercase;letter-spacing:.05em;font-size:11px; background:var(--grad);color:#fff;border:0;padding:9px 16px;border-radius:4px;cursor:pointer} .btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--fg)} .btn.sm{padding:6px 10px;font-size:10px} .btn:disabled{opacity:.5;cursor:default}