/* Code-Projects skins - the three, and only three, looks for every page in X:\Repository ------------------------------------------------------------------------------------ Set 09.05.2026. Same token NAMES in every skin, so a page's rules are written once and never fork. Colors come from the contact page (dark, matrix) and the project-rfp-portals tracker (ink); nothing here is invented. dark Code-Projects brand: deep-space navy, orange primary, cyan secondary. DEFAULT. matrix phosphor terminal: green on near-black, CRT scanlines. Rain is a per-page opt-in. ink navy ink: the status-tracker palette, sky-blue chrome, calm data surfaces. Wiring (see skins.js for the toggle + pre-paint): in , before any body CSS wherever the swatches should sit CPSkins.init({ mount: "skin", onChange: fn }) after DOM ready Status colors (--ok --warn --bad --idle) are the sanctioned extras for data pages, defined in all three skins and kept visually apart from --accent. */ :root, :root[data-skin="dark"]{ --ground:#0A0F1A; --panel-a:#12202C; /* graphite */ --panel-b:#0B1524; /* deep space, one step down */ --panel-edge:#334155; /* steel */ --panel-edge-soft:#1E293B; /* slate hairline */ --phosphor:#EAF7FF; /* primary text (ice) */ --phosphor-soft:#C9E3F2; --dim:#94A3B8; /* secondary text */ --dimmer:#64748B; /* faint / placeholder */ --accent:#FF6A00; /* orange primary */ --accent-hot:#FF8A00; --accent-2:#00E6FF; /* cyan secondary */ --accent-rgb:255,106,0; --accent-2-rgb:0,230,255; --tint-rgb:30,41,59; --body-glow:#102438; --halo:rgba(0,140,255,.15); --hero-glow:0 0 14px rgba(255,106,0,.45), 0 0 42px rgba(255,106,0,.16); --on-signal:#08121D; /* text painted on top of a status color */ --ok:#22C55E; --ok-rgb:34,197,94; --warn:#FACC15; --warn-rgb:250,204,21; --bad:#FF4444; --bad-rgb:255,68,68; --idle:#334155; --idle-rgb:51,65,85; --scanlines:0; } :root[data-skin="matrix"]{ --ground:#04080A; --panel-a:#0A1811; --panel-b:#050D09; --panel-edge:#0F2C1E; --panel-edge-soft:#0A1F15; --phosphor:#CFEAD9; /* soft phosphor-white body text; pure green is the accent */ --phosphor-soft:#8AFFAE; --dim:#6FAE84; --dimmer:#3D6B4F; --accent:#3BFF74; --accent-hot:#8AFFAE; --accent-2:#8AFFAE; --accent-rgb:59,255,116; --accent-2-rgb:138,255,174; --tint-rgb:11,44,28; --body-glow:#0B2418; --halo:rgba(20,107,51,.28); --hero-glow:0 0 12px rgba(59,255,116,.55), 0 0 34px rgba(59,255,116,.22); --on-signal:#04110A; --ok:#3BFF74; --ok-rgb:59,255,116; --warn:#E8A83C; --warn-rgb:232,168,60; --bad:#FF2D55; --bad-rgb:255,45,85; --idle:#0B3D1E; --idle-rgb:11,61,30; --scanlines:1; } :root[data-skin="ink"]{ --ground:#0E1420; --panel-a:#161E2E; --panel-b:#131B29; --panel-edge:#26314A; --panel-edge-soft:#1F293C; --phosphor:#E6ECF5; --phosphor-soft:#C9D3E2; --dim:#8A97AD; --dimmer:#5A687F; --accent:#4CC2FF; --accent-hot:#7ED4FF; --accent-2:#3DD68C; --accent-rgb:76,194,255; --accent-2-rgb:61,214,140; --tint-rgb:38,49,74; --body-glow:#16233B; --halo:rgba(76,194,255,.12); --hero-glow:0 0 14px rgba(76,194,255,.45), 0 0 42px rgba(76,194,255,.16); --on-signal:#0D1420; --ok:#3DD68C; --ok-rgb:61,214,140; --warn:#F5A623; --warn-rgb:245,166,35; --bad:#E5484D; --bad-rgb:229,72,77; --idle:#3B4657; --idle-rgb:59,70,87; --scanlines:0; } :root{ --font-mono:"IBM Plex Mono","Cascadia Code","Cascadia Mono",Consolas,ui-monospace,monospace; --font-body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; --font-display:"Silkscreen","IBM Plex Mono",ui-monospace,monospace; } html{background:var(--ground);color-scheme:dark;} /* skin switch: swatches painted with each skin's real accent, so the control explains itself without a label. Direct select, not a blind flip. */ .skin{display:inline-flex;align-items:center;gap:6px;flex:none;} .skin-dot{ appearance:none;width:12px;height:12px;padding:0;border-radius:3px; border:1px solid rgba(0,0,0,.45);cursor:pointer;opacity:.42; transition:opacity .2s ease, box-shadow .2s ease, transform .2s ease; } .skin-dot[data-skin-choice="dark"]{background:#FF6A00;} .skin-dot[data-skin-choice="matrix"]{background:#3BFF74;} .skin-dot[data-skin-choice="ink"]{background:#4CC2FF;} .skin-dot:hover{opacity:.9;transform:translateY(-1px);} .skin-dot[aria-pressed="true"]{opacity:1;box-shadow:0 0 0 2px rgba(var(--accent-rgb),.32);} .skin-dot:focus-visible{outline:2px solid var(--phosphor);outline-offset:2px;} /* CRT texture: add class "crt" to ; only the matrix skin makes it visible */ body.crt::after{ content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none; background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.22) 3px, rgba(0,0,0,.22) 4px); mix-blend-mode:multiply;opacity:var(--scanlines);transition:opacity .28s ease; } @media (prefers-reduced-motion:reduce){ .skin-dot,body.crt::after{transition:none} }