/* QCI v2 — Quitos Central Intelligence Palette: black + glowing red + greys Cinematic "secure terminal / HUD" aesthetic */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); /* Paper Site: Caveat (titles), Kalam (handwritten body), Courier Prime (typed figures) — one request for the three; the font files load only where the theme uses them. */ @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Kalam:wght@300;400;700&family=Courier+Prime:wght@400;700&display=swap'); :root{ --bg0:#04050a; --bg1:#070912; --panel: rgba(18,20,28,.86); --line: rgba(255,255,255,.10); --text:#eef1f7; --muted:#aab2bf; --red:#ff2b2b; --red2:#ff5a5a; --shadow: 0 0 48px rgba(255,43,43,.18); --shadow2: 0 0 90px rgba(255,43,43,.28); --radius: 22px; --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* ── Semantic tokens ───────────────────────────────────────────────────── Generated from the literals that already existed: in Crimson Hive each token is worth exactly the colour it replaced, so this theme changes nothing. The light themes redefine them in the :root[data-theme="red_quito"] and :root[data-theme="blue_quito"] blocks at the end of this file. --ov-NN light overlay on the background (borders, separators, hover) --sink-NN recessed background (inputs, terminal) — lightens in light themes --sh-NN drop shadow — stays dark in light themes --red-NN the accent, at various opacities --rc-* the header reactor New colours must use these tokens; a literal only works in one theme. */ --amber-40: rgba(255,230,0,0.4); --amber-45: rgba(255,230,0,0.45); --amber-90: rgba(255,230,0,0.9); --amber-100: rgba(255,230,0,1.0); --amber-b-25: rgba(255,220,0,0.25); --amber-b-65: rgba(255,220,0,0.65); --amber-bg-70: rgba(40,32,0,0.7); --amber-c-10: rgba(255,200,0,0.1); --amber-d-90: rgba(255,235,0,0.9); --amber-solid: #ffaa55; --black: #000000; --blue-btn-10: rgba(0,140,255,0.1); --blue-btn-12: rgba(0,140,255,0.12); --blue-btn-20: rgba(0,140,255,0.2); --blue-btn-22: rgba(0,140,255,0.22); --blue-btn-38: rgba(0,140,255,0.38); --blue-btn-40: rgba(0,140,255,0.4); --blue-btn2-18: rgba(0,160,255,0.18); --blue-btn2-22: rgba(0,160,255,0.22); --blue-btn2-40: rgba(0,160,255,0.4); --blue-btn2-65: rgba(0,160,255,0.65); --blue-btn3-28: rgba(0,180,255,0.28); --blue-btn3-35: rgba(0,180,255,0.35); --blue-btn4-95: rgba(0,200,255,0.95); --danger: #f87171; --danger-09: rgba(248,113,113,0.09); --danger-15: rgba(248,113,113,0.15); --danger-30: rgba(248,113,113,0.3); --deep-98: rgba(8,10,18,0.98); --deep-b-90: rgba(10,16,26,0.9); --deep-c-97: rgba(10,10,18,0.97); --deep-d-97: rgba(6,8,18,0.97); --deep-e-97: rgba(10,6,6,0.97); --deep-solid: #0a0c14; --deep-solid2: #06070c; --error-text: #ffd6d6; --green-btn-22: rgba(0,210,100,0.22); --green-btn-65: rgba(0,210,100,0.65); --green-btn2-28: rgba(0,230,110,0.28); --green-btn2-35: rgba(0,230,110,0.35); --green-btn3-22: rgba(0,190,90,0.22); --green-btn4-12: rgba(0,180,80,0.12); --green-btn5-95: rgba(0,255,120,0.95); --green-btn6-20: rgba(0,200,90,0.2); --grey-07: rgba(160,170,185,0.07); --grey-13: rgba(160,170,185,0.13); --grey-28: rgba(160,170,185,0.28); --grey-35: rgba(160,170,185,0.35); --grey-a: #555555; --grey-b: #666666; --grey-c: #444444; --info-07: rgba(96,165,250,0.07); --info-25: rgba(96,165,250,0.25); --info-b-08: rgba(80,170,255,0.08); --info-b-30: rgba(80,170,255,0.3); --info-b-solid: #50aaff; --info-c-12: rgba(100,200,255,0.12); --info-c-25: rgba(100,200,255,0.25); --info-c-solid: #60a5fa; --info-solid: #64c8ff; --label: #c8cfda; --muted-2: #6b7685; --muted-3: #444e5e; --muted-4: #999999; /* The verdict wash on a KPI tile — deliberately weaker than --ok-08/--danger-09, which measured 4,24:1 for the tile's own label on MacOS 27's glass. */ --verdict-ok-bg: rgba(110,255,170,.07); --verdict-bad-bg: rgba(248,113,113,.08); --ok-05: rgba(110,255,170,0.05); --ok-08: rgba(110,255,170,0.08); --ok-12: rgba(110,255,170,.12); --ok-20: rgba(110,255,170,0.2); --ok-25: rgba(110,255,170,0.25); --ok-30: rgba(110,255,170,0.3); --ok-40: rgba(110,255,170,0.4); --ok-b-12: rgba(74,222,128,0.12); --ok-b-25: rgba(74,222,128,0.25); --ok-b-solid: #4ade80; --ok-c-12: rgba(60,220,100,0.12); --ok-c-25: rgba(60,220,100,0.25); --ok-c-solid: #3cdc64; --ok-d-solid: #9fe7b6; --ok-solid: #6effaa; --option-bg: #0d0f16; --ov-01: rgba(255,255,255,0.01); --ov-02: rgba(255,255,255,0.02); --ov-03: rgba(255,255,255,0.03); --ov-04: rgba(255,255,255,0.04); --ov-05: rgba(255,255,255,0.05); --ov-06: rgba(255,255,255,0.06); --ov-07: rgba(255,255,255,0.07); --ov-08: rgba(255,255,255,0.08); --ov-09: rgba(255,255,255,0.09); --ov-10: rgba(255,255,255,0.1); --ov-12: rgba(255,255,255,0.12); --ov-15: rgba(255,255,255,0.15); --ov-25: rgba(255,255,255,0.25); --ov-35: rgba(255,255,255,0.35); --ov-45: rgba(255,255,255,0.45); --ov-50: rgba(255,255,255,0.5); --ov-85: rgba(255,255,255,0.85); --panel-solid: #0d0f18; --qv-up: #2962ff; --purple-10: rgba(160,80,255,0.1); --purple-25: rgba(160,80,255,0.25); --purple-solid: #b060ff; --rc-a-15: rgba(220,20,0,0.15); --rc-a-60: rgba(220,20,0,0.6); --rc-a-85: rgba(220,20,0,0.85); --rc-b-35: rgba(180,0,0,0.35); --rc-b-50: rgba(180,0,0,0.5); --rc-c-18: rgba(255,40,20,0.18); --rc-c-95: rgba(255,40,20,0.95); --rc-cold: #550000; --rc-d-12: rgba(255,80,40,0.12); --rc-d-70: rgba(255,80,40,0.7); --rc-e-90: rgba(255,60,20,0.9); --rc-f-50: rgba(255,30,10,0.5); --rc-g-100: rgba(255,80,30,1.0); --rc-h-80: rgba(220,30,0,0.8); --rc-hot: #ffccaa; --rc-mid: #ff3300; --red-03: rgba(255,43,43,0.03); --red-04: rgba(255,43,43,0.04); --red-05: rgba(255,43,43,0.05); --red-06: rgba(255,43,43,0.06); --red-07: rgba(255,43,43,0.07); --red-08: rgba(255,43,43,0.08); --red-10: rgba(255,43,43,0.1); --red-12: rgba(255,43,43,0.12); --red-14: rgba(255,43,43,0.14); --red-16: rgba(255,43,43,0.16); --red-18: rgba(255,43,43,0.18); --red-20: rgba(255,43,43,0.2); --red-22: rgba(255,43,43,0.22); --red-28: rgba(255,43,43,0.28); --red-30: rgba(255,43,43,0.3); --red-35: rgba(255,43,43,0.35); --red-40: rgba(255,43,43,0.4); --red-45: rgba(255,43,43,0.45); --red-55: rgba(255,43,43,0.55); --red-60: rgba(255,43,43,0.6); --red-70: rgba(255,43,43,0.7); --red-95: rgba(255,43,43,0.95); --red-b-10: rgba(255,60,60,0.1); --red-b-25: rgba(255,60,60,0.25); --red-b-50: rgba(255,60,60,0.5); --red-c-20: rgba(255,90,90,0.2); --red-c-35: rgba(255,90,90,0.35); --red-d-15: rgba(255,40,40,0.15); --red-dark-18: rgba(200,30,30,0.18); --red-dark-60: rgba(200,30,30,0.6); --red-dark2-35: rgba(180,30,30,0.35); --red-e-85: rgba(255,80,80,0.85); --sh-50: rgba(0,0,0,0.5); --sh-55: rgba(0,0,0,0.55); --sh-60: rgba(0,0,0,0.6); --sh-70: rgba(0,0,0,0.7); --sink-06: rgba(0,0,0,0.06); --sink-15: rgba(0,0,0,0.15); --sink-18: rgba(0,0,0,0.18); --sink-20: rgba(0,0,0,0.2); --sink-22: rgba(0,0,0,0.22); --sink-24: rgba(0,0,0,0.24); --sink-30: rgba(0,0,0,0.3); --sink-40: rgba(0,0,0,0.4); --success-text: #d9ffe9; --tag-text: #cfd6e0; --term-text: #d9d9d9; --text-b: #e8eaf0; --text-c: #c0c8d4; --text-d: #c0c8d6; --warn-07: rgba(250,204,21,0.07); --warn-12: rgba(250,204,21,0.12); --warn-25: rgba(250,204,21,0.25); --warn-b-08: rgba(255,200,50,0.08); --warn-b-10: rgba(255,200,50,0.1); --warn-b-25: rgba(255,200,50,0.25); --warn-b-30: rgba(255,200,50,0.3); --warn-b-solid: #ffc832; --warn-solid: #facc15; --white: #ffffff; /* Tokens for the colours that lived in style= attributes and PHP/JS helpers. Same rule: the value here is the literal they replaced. */ --amber-c-20: rgba(255,200,0,.2); --amber-c-85: rgba(255,200,0,.85); --amber-f-solid: #fb923c; --green-btn-90: rgba(0,210,100,.9); --info-d-85: rgba(80,180,255,.85); --info-d-solid: #55aaff; --neutral-75: rgba(195,195,195,.75); --ok-e-85: rgba(0,220,100,.85); --ok-e-90: rgba(0,220,100,.9); --ok-e-solid: #22e07a; --purple-b-85: rgba(200,120,255,.85); --purple-c-solid: #a78bfa; --purple-d-solid: #c06fff; --red-15: rgba(255,43,43,.15); --red-25: rgba(255,43,43,.25); --red-b-85: rgba(255,60,60,.85); --red-e-90: rgba(255,80,80,.9); --red-e-95: rgba(255,80,80,.95); --red-f-solid: #ff4b4b; --sink-35: rgba(0,0,0,.35); --sink-75: rgba(0,0,0,.75); --teal-85: rgba(0,200,160,.85); --ok-c-70: rgba(60,220,100,.7); --red-b-70: rgba(255,60,60,.7); --blue-btn5-70: rgba(60,140,255,.7); --amber-e-70: rgba(255,180,30,.7); --purple-70: rgba(160,80,255,.7); --ok-deep-solid: #1a8c3a; --red-deep-solid: #8c1a1a; } *{ box-sizing:border-box; } html, body{ height:100%; } body{ margin:0; font-family: var(--font); color: var(--text); background: radial-gradient(1000px 520px at 72% 18%, var(--red-20), transparent 58%), radial-gradient(820px 420px at 12% 86%, var(--red-10), transparent 62%), linear-gradient(180deg, var(--bg0), var(--bg1)); overflow-x:hidden; } /* Light grid + scanlines */ body::before{ content:""; position:fixed; inset:-60px; pointer-events:none; background: linear-gradient(to right, var(--ov-06) 1px, transparent 1px), linear-gradient(to bottom, var(--ov-06) 1px, transparent 1px); background-size: 64px 64px; opacity:.07; transform: skewY(-1.5deg); animation: qci-grid 18s linear infinite; } body::after{ content:""; position:fixed; inset:-60px; pointer-events:none; background: repeating-linear-gradient( to bottom, var(--ov-05), var(--ov-05) 1px, transparent 2px, transparent 7px ), radial-gradient(760px 260px at 30% 12%, var(--red-16), transparent 62%), radial-gradient(980px 360px at 78% 84%, var(--red-12), transparent 62%); opacity:.24; filter: blur(.2px); } @keyframes qci-grid{ 0%{ background-position: 0 0, 0 0; } 100%{ background-position: 240px 140px, 240px 140px; } } @media (prefers-reduced-motion: reduce){ body::before{ animation:none; } } /* ---------- Helpers ---------- */ .qci-muted{ color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .qci-wrap{ width: 95%; margin: 0 auto; padding: 28px; } .qci-top{ display:flex; justify-content:space-between; align-items:center; gap: 12px; margin-bottom: 16px; } .qci-title{ margin:0; font-size: 28px; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 0 12px var(--red-20), 0 0 28px var(--red-12); } /* ---------- Card ---------- */ .qci-card{ position:relative; border: 1px solid var(--ov-10); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow2); backdrop-filter: blur(10px); padding: 24px; margin-bottom: 20px; } /* HUD corners */ .qci-card::before, .qci-card::after{ content:""; position:absolute; width: 60px; height: 60px; border: 1px solid var(--red-55); opacity:.62; pointer-events:none; } .qci-card::before{ left: 10px; top: 10px; border-right:none; border-bottom:none; border-top-left-radius: 14px; } .qci-card::after{ right: 10px; bottom: 10px; border-left:none; border-top:none; border-bottom-right-radius: 14px; } .qci-glowbar{ height: 2px; background: linear-gradient(90deg, transparent, var(--red-95), transparent); opacity:.62; margin: 10px 0 14px; } /* Sweep */ .qci-sweep{ position:absolute; inset:-120px; background: linear-gradient(135deg, transparent 40%, var(--red-14) 50%, transparent 60%); transform: translateX(-60%); animation: qci-sweep 10s ease-in-out infinite; pointer-events:none; opacity:.35; } @keyframes qci-sweep{ 0%, 100%{ transform: translateX(-60%); } 50%{ transform: translateX(30%); } } @media (prefers-reduced-motion: reduce){ .qci-sweep{ animation:none; opacity:.20; } } /* ---------- Buttons ---------- */ .qci-btn{ display:inline-block; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--red-70); color:var(--white); text-decoration:none; letter-spacing: .12em; text-transform: uppercase; font-weight: 900; font-size: .85rem; cursor: pointer; font-family: var(--font); background: radial-gradient(80px 34px at 20% 20%, var(--red-c-35), transparent 60%), linear-gradient(180deg, var(--red-28), var(--sink-24)); box-shadow: 0 0 12px var(--red-22), 0 0 30px var(--red-14); transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease; } .qci-btn:hover{ border-color: var(--red-95); box-shadow: 0 0 15px var(--red-30), 0 0 45px var(--red-18); transform: translateY(-1px); } .qci-btn:active{ transform: translateY(0); } /* Inert button (e.g. up/down at the top/bottom of a list). :hover alone is not enough — without this a disabled button looks identical to an active one. */ .qci-btn:disabled, .qci-btn:disabled:hover{ opacity: .35; cursor: default; transform: none; } .qci-btn-block{ display:block; width:100%; text-align:center; } /* Neutral/secondary button */ .qci-btn-ghost{ background: var(--ov-04); border-color: var(--ov-15); box-shadow: none; color: var(--muted); } .qci-btn-ghost:hover{ border-color: var(--ov-35); box-shadow: none; color: var(--text); } /* Blue button (Quitos Hive) */ .qci-btn-blue{ border-color: var(--blue-btn2-65); background: radial-gradient(80px 34px at 20% 20%, var(--blue-btn3-28), transparent 60%), linear-gradient(180deg, var(--blue-btn-22), var(--sink-24)); box-shadow: 0 0 12px var(--blue-btn2-22), 0 0 30px var(--blue-btn-12); } .qci-btn-blue:hover{ border-color: var(--blue-btn4-95); box-shadow: 0 0 15px var(--blue-btn3-35), 0 0 45px var(--blue-btn-20); } .qci-btn-green{ border-color: var(--green-btn-65); background: radial-gradient(80px 34px at 20% 20%, var(--green-btn2-28), transparent 60%), linear-gradient(180deg, var(--green-btn3-22), var(--sink-24)); box-shadow: 0 0 12px var(--green-btn-22), 0 0 30px var(--green-btn4-12); } .qci-btn-green:hover{ border-color: var(--green-btn5-95); box-shadow: 0 0 15px var(--green-btn2-35), 0 0 45px var(--green-btn6-20); } /* Danger button */ .qci-btn-danger{ background: radial-gradient(80px 34px at 20% 20%, var(--red-c-20), transparent 60%), linear-gradient(180deg, var(--red-dark2-35), var(--sink-24)); border-color: var(--red-dark-60); box-shadow: 0 0 10px var(--red-dark-18); } .qci-btn-danger:hover{ border-color: var(--red-95); box-shadow: 0 0 18px var(--red-30); } /* Small button */ .qci-btn-sm{ padding: 5px 8px; font-size: .75rem; border-radius: 8px; } .qci-tag{ display:inline-block; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--ov-10); background: var(--sink-22); color:var(--tag-text); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .qci-tag-red{ border-color: var(--red-40); background: var(--red-10); color: var(--red2); } .qci-tag-green{ border-color: var(--ok-30); background: var(--ok-08); color: var(--ok-solid); } .qci-tag-yellow{ border-color: var(--warn-b-30); background: var(--warn-b-08); color: var(--warn-b-solid); } .qci-tag-blue{ border-color: var(--info-b-30); background: var(--info-b-08); color: var(--info-b-solid); } /* A count on a topnav button (src/partials/topnav.php, $qciNavBadges) — today the CSOC's unacknowledged critical/high alerts. The --danger family, not the accent: it means "needs attention" in every theme, and it is defined in all of them. */ .qci-nav-badge{ display:inline-block; min-width: 1.6em; margin-left: 6px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--danger-30); background: var(--danger-15); color: var(--danger); font-size: 10px; line-height: 1.5; letter-spacing: 0; text-align: center; vertical-align: 1px; } /* ---------- Inputs ---------- */ .qci-label{ display:block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color:var(--label); margin: 12px 0 6px; } .qci-input, .qci-textarea, select.qci-input{ width: 100%; padding: 12px 12px; border-radius: 12px; border: 1px solid var(--ov-10); background: var(--sink-30); color: var(--text); font-family: var(--font); font-size: .9rem; outline: none; } .qci-textarea{ min-height: 140px; resize: vertical; } select.qci-input option{ background: var(--option-bg); } .qci-input:focus, .qci-textarea:focus, select.qci-input:focus{ border-color: var(--red-70); box-shadow: 0 0 0 4px var(--red-14); } /* ---------- Terminal ---------- */ .qci-terminal{ border-radius: 18px; border: 1px solid var(--ov-08); background: var(--sink-22); padding: 14px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color:var(--term-text); } /* ---------- Messages ---------- */ .qci-error{ border:1px solid var(--red-35); background: var(--red-10); color:var(--error-text); padding:10px 12px; border-radius: 12px; margin: 10px 0; font-size: 13px; } .qci-success{ border:1px solid var(--ok-25); background: var(--ok-08); color:var(--success-text); padding:10px 12px; border-radius: 12px; margin: 10px 0; font-size: 13px; } /* ---------- Glitch title ---------- */ .qci-glitch{ position:relative; display:inline-block; text-shadow: 0 0 16px var(--red-20); } .qci-glitch::before, .qci-glitch::after{ content: attr(data-text); position:absolute; left:0; top:0; width:100%; overflow:hidden; opacity:.22; pointer-events:none; } .qci-glitch::before{ transform: translateX(1px); clip-path: inset(0 0 55% 0); animation: qci-glitch1 2.8s infinite linear; } .qci-glitch::after{ transform: translateX(-1px); clip-path: inset(55% 0 0 0); animation: qci-glitch2 2.4s infinite linear; } @keyframes qci-glitch1{ 0%, 100%{ filter: blur(0); opacity:.18; } 45%{ filter: blur(.25px); opacity:.26; } 46%{ filter: blur(0); opacity:.10; transform: translateX(2px); } 47%{ transform: translateX(1px); opacity:.22; } } @keyframes qci-glitch2{ 0%, 100%{ filter: blur(0); opacity:.16; } 30%{ opacity:.24; } 31%{ transform: translateX(-2px); opacity:.10; } 32%{ transform: translateX(-1px); opacity:.18; } } @media (prefers-reduced-motion: reduce){ .qci-glitch::before, .qci-glitch::after{ animation:none; opacity:.12; } } /* ---------- Nav ---------- */ .qci-nav{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 8px; margin-bottom: 20px; } .qci-nav-left, .qci-nav-right{ display:flex; align-items:center; gap: 6px; flex-wrap:wrap; } /* ---------- Help modal ---------- A small "?" button next to a card's title opens a plain-language explanation of that card, aimed at someone with no trading or technical background. One modal shell is shared by every card on the page; each button just points it at a different hidden template via data-help-target. Tokens only, per the theme rules — a modal that only worked in one theme would be worse than no modal. */ .qci-help-btn{ display:inline-flex; align-items:center; justify-content:center; width: 22px; height: 22px; margin-left: 8px; border-radius: 50%; border: 1px solid var(--ov-25); background: var(--ov-04); color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; transition: color .15s ease, border-color .15s ease, background .15s ease; } .qci-help-btn:hover{ color: var(--red2); border-color: var(--red-25); background: var(--red-08); } .qci-help-tpl{ display:none; } .qci-modal{ display:none; position: fixed; inset: 0; z-index: 1000; background: var(--sh-60); overflow-y: auto; padding: 6vh 16px; } .qci-modal.open{ display:block; } .qci-modal-box{ max-width: 560px; margin: 0 auto; background: var(--panel-solid); border: 1px solid var(--ov-15); border-radius: var(--radius); box-shadow: var(--shadow2); padding: 24px; position: relative; } .qci-modal-close{ position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--ov-15); background: var(--ov-04); color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; } .qci-modal-close:hover{ color: var(--red2); border-color: var(--red-25); } .qci-modal-title{ font-family: var(--mono); font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; color: var(--text); margin: 0 32px 14px 0; } .qci-modal-body{ color: var(--text); font-size: 14px; line-height: 1.7; } .qci-modal-body p{ margin: 0 0 12px; } .qci-modal-body p:last-child{ margin-bottom: 0; } .qci-modal-body strong{ color: var(--text); } .qci-modal-body .qci-muted{ font-size: 12.5px; } /* A small table of measurements inside an explanation modal — three or four rows of numbers that a paragraph would bury. Scrolls on its own so a narrow phone never widens the modal. */ .qci-modal-table{ display: block; overflow-x: auto; width: 100%; margin: 0 0 12px; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; white-space: nowrap; } .qci-modal-table th, .qci-modal-table td{ padding: 5px 12px 5px 0; text-align: left; border-bottom: 1px solid var(--ov-08); } .qci-modal-table th{ color: var(--muted-2); font-weight: 600; } .qci-modal-table tr:last-child td{ border-bottom: 0; } /* ---------- Tabs (page sections) ---------- Used by quitos_trading_strategies.php. Server-side tabs, in the same shape as admin.php's ?section= links — the state lives in the URL, so a tab is bookmarkable and survives a POST redirect. Tokens only: a literal here would be illegible in the light themes. */ .qci-tabs{ display:flex; align-items:stretch; gap: 4px; flex-wrap:wrap; margin: 4px 0 18px; border-bottom: 1px solid var(--ov-08); } .qci-tab{ display:inline-block; padding: 10px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-decoration:none; border: 1px solid transparent; border-bottom: none; border-radius: 10px 10px 0 0; transition: color .15s ease, background .15s ease; } .qci-tab:hover{ color: var(--text); background: var(--ov-03); } .qci-tab.is-current{ color: var(--red2); background: var(--red-08); border-color: var(--red-25); box-shadow: inset 0 -2px 0 var(--red); } /* ---------- Table ---------- */ .qci-table{ width:100%; border-collapse:collapse; font-size: 13px; } .qci-table th{ background: var(--red-08); color: var(--muted); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 12px; text-align:left; border-bottom: 1px solid var(--ov-06); font-weight: 600; } .qci-table td{ padding: 10px 12px; border-bottom: 1px solid var(--ov-04); vertical-align: middle; } .qci-table tr:last-child td{ border-bottom:none; } .qci-table tr:hover td{ background: var(--ov-02); } .qci-table-totals td{ background: var(--red-14); font-weight: 700; border-top: 2px solid var(--red-35); border-bottom: none; } .qci-table tr.qci-table-totals:hover td{ background: var(--red-14); } .qci-table-totals td:first-child{ letter-spacing: .08em; text-transform: uppercase; font-size: 11px; color: var(--muted); } /* ---------- Stats grid ---------- */ .qci-stats{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; } .qci-stat{ background: var(--red-06); border: 1px solid var(--red-18); border-radius: 16px; padding: 18px 20px; } .qci-stat-label{ font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .qci-stat-value{ font-size: 2rem; font-weight: 900; line-height: 1; color: var(--text); } .qci-stat-sub{ font-size: 11px; color: var(--muted-3); letter-spacing: .1em; margin-top: 6px; text-transform: uppercase; } /* Pulse dot */ .qci-pulse{ display:inline-block; width:7px; height:7px; border-radius:50%; background: var(--ok-solid); box-shadow: 0 0 6px var(--ok-solid); animation: qci-pulse 2s ease-in-out infinite; margin-right: 5px; vertical-align: middle; } @keyframes qci-pulse{ 0%,100%{ box-shadow: 0 0 4px var(--ok-solid); } 50%{ box-shadow: 0 0 14px var(--ok-solid), 0 0 24px var(--ok-40); } } /* ---------- Row actions ---------- */ .qci-actions{ display:flex; gap: 6px; flex-wrap:wrap; align-items:center; } .qci-inline-form{ display:inline-flex; gap:5px; align-items:center; } .qci-inline-select{ background: var(--sink-40); border: 1px solid var(--ov-10); border-radius: 7px; color: var(--text); font-size: .75rem; padding: 4px 6px; outline:none; } .qci-inline-select:focus{ border-color: var(--red-60); } .qci-inline-select option{ background:var(--option-bg); } /* ---------- Dropdown (nav) ---------- */ /* Consolidated from the 13 pages, where it was duplicated. Pure CSS: it opens on :hover and on :focus-within (keyboard), with no JavaScript. */ .qci-dropdown { position: relative; } .qci-dropdown-menu { display: none; position: absolute; top: 100%; right: 0; min-width: 240px; background: var(--panel-solid); border: 1px solid var(--red-35); border-radius: 8px; padding-top: 6px; overflow: hidden; z-index: 100; box-shadow: 0 8px 32px var(--sh-60), 0 0 20px var(--red-08); } .qci-dropdown:focus-within .qci-dropdown-menu, .qci-dropdown:hover .qci-dropdown-menu { display: block; } /* Invisible bridge between the button and the menu, so the mouse does not lose :hover. */ .qci-dropdown-menu::before { content: ""; position: absolute; top: -6px; left: 0; right: 0; height: 6px; } /* The items can be either links or buttons in a
(theme switching); they have to be visually indistinguishable. */ .qci-dropdown-menu a, .qci-dropdown-menu button, .qci-dropdown-menu .qci-dropdown-placeholder { display: block; width: 100%; text-align: left; padding: 10px 16px; font-size: .78rem; font-family: var(--mono); letter-spacing: .06em; color: var(--text); text-decoration: none; border: none; border-bottom: 1px solid var(--ov-05); background: none; cursor: pointer; transition: background .15s, color .15s; } .qci-dropdown-menu a:last-child, .qci-dropdown-menu form:last-child button, .qci-dropdown-menu .qci-dropdown-placeholder:last-child { border-bottom: none; } .qci-dropdown-menu a:hover, .qci-dropdown-menu button:hover { background: var(--red-10); color: var(--red2); } /* Active theme: marked with a ✓ added by CSS, so the button's text stays just the theme's name. */ .qci-dropdown-menu button.is-current { color: var(--red2); } .qci-dropdown-menu button.is-current::after { content: ' ✓'; } /* Placeholder item: same layout as the links, but not clickable (no exchange/page of its own yet). */ .qci-dropdown-menu .qci-dropdown-placeholder { color: var(--muted-2); cursor: default; } .qci-dropdown-menu .qci-dropdown-placeholder:hover { background: none; color: var(--muted-2); } /* Nested submenu (side flyout, opens on :hover/:focus-within, same pattern as the top dropdown) — for grouping items inside a dropdown. */ .qci-dropdown-submenu { position: relative; } .qci-dropdown-submenu-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 10px 16px; font-size: .78rem; font-family: var(--mono); letter-spacing: .06em; color: var(--text); border-bottom: 1px solid var(--ov-05); cursor: default; } .qci-dropdown-submenu:last-child .qci-dropdown-submenu-label { border-bottom: none; } .qci-dropdown-submenu:hover .qci-dropdown-submenu-label, .qci-dropdown-submenu:focus-within .qci-dropdown-submenu-label { background: var(--red-10); color: var(--red2); } .qci-dropdown-submenu-flyout { display: none; position: absolute; top: -6px; left: 100%; min-width: 300px; background: var(--panel-solid); border: 1px solid var(--red-35); border-radius: 8px; padding-top: 6px; overflow: hidden; z-index: 101; box-shadow: 0 8px 32px var(--sh-60), 0 0 20px var(--red-08); } .qci-dropdown-submenu:hover .qci-dropdown-submenu-flyout, .qci-dropdown-submenu:focus-within .qci-dropdown-submenu-flyout { display: block; } .qci-dropdown-submenu-flyout a { display: block; width: 100%; text-align: left; padding: 10px 16px; font-size: .78rem; font-family: var(--mono); letter-spacing: .06em; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--ov-05); background: none; cursor: pointer; transition: background .15s, color .15s; } .qci-dropdown-submenu-flyout a:last-child { border-bottom: none; } .qci-dropdown-submenu-flyout a:hover { background: var(--red-10); color: var(--red2); } /* .qci-dropdown-menu has overflow:hidden (to round the list's corners), which clips the submenu's flyout — and that needs to escape the box (left:100%). The overflow is only released when a submenu is actually open, so the rounded clipping is not lost the rest of the time. */ .qci-dropdown-menu:has(.qci-dropdown-submenu:hover), .qci-dropdown-menu:has(.qci-dropdown-submenu:focus-within) { overflow: visible; } .qci-btn-dropdown::after { content: ' ▾'; font-size: .7em; opacity: .7; } /* Theme selector: it lives in the header, next to the USER/QCIADMINS pills, so the trigger looks like a pill rather than a button. The menu it opens is the same .qci-dropdown-menu as the rest of the nav. */ .qci-theme-pick { display: inline-block; } .qci-theme-pick > button.qci-tag { font-family: var(--font); font-weight: 400; line-height: inherit; cursor: pointer; transition: border-color .12s, color .12s; } .qci-theme-pick > button.qci-tag:hover { border-color: var(--red-40); color: var(--red2); } /* ---------- Header reactor ---------- */ /* Also consolidated from the 13 pages. */ .qci-reactor { position: relative; flex-shrink: 0; width: 52px; height: 52px; } .qci-reactor-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; } .qci-reactor-ring:nth-child(1) { border-top-color: var(--rc-c-95); border-right-color: var(--rc-c-18); animation: qr-spin 2s linear infinite; box-shadow: 0 0 6px var(--rc-f-50); } .qci-reactor-ring:nth-child(2) { inset: 7px; border-bottom-color: var(--rc-a-85); border-left-color: var(--rc-a-15); animation: qr-spin 1.4s linear infinite reverse; } .qci-reactor-ring:nth-child(3) { inset: 14px; border-top-color: var(--rc-d-70); border-right-color: var(--rc-d-12); animation: qr-spin 3s linear infinite; } .qci-reactor-core { position: absolute; inset: 19px; border-radius: 50%; background: radial-gradient(circle, var(--rc-hot) 0%, var(--rc-mid) 40%, var(--rc-cold) 100%); box-shadow: 0 0 6px 2px var(--rc-e-90), 0 0 16px 5px var(--rc-a-60), 0 0 32px 8px var(--rc-b-35); animation: qr-core 2s ease-in-out infinite; } @keyframes qr-spin { to { transform: rotate(360deg); } } @keyframes qr-core { 0%,100% { box-shadow: 0 0 6px 2px var(--rc-e-90), 0 0 16px 5px var(--rc-a-60), 0 0 32px 8px var(--rc-b-35); } 50% { box-shadow: 0 0 10px 4px var(--rc-g-100), 0 0 24px 8px var(--rc-h-80), 0 0 50px 14px var(--rc-b-50); } } /* ═══════════════════════════════════════════════════════════════════════════ THEME — Crimson Indigo Crimson Hive with the accent in indigo instead of red. Unlike the three light themes, this one derives from :root — it inherits the black background, the grid, the scanlines, the glow and the whole HUD look. That is why it does NOT join the grouped light-theme selectors further down: it merely redefines the accent family (--red-*), the reactor (--rc-*) and the two shadows, which are the only red that exists in :root. Each token keeps exactly the Crimson Hive alpha; only the RGB triple changes, preserving each family's relative luminosity (-b lighter than the base, -dark darker, the reactor going from cold #1a0a55 to hot #d5ccff). --error-text follows the accent because .qci-error paints border and background with --red-35/--red-10: leaving it pink gave reddish text on indigo. .qci-btn-danger stays red, as in the other themes — there the colour means "destructive action", it is not the accent. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="crimson_indigo"]{ --red:#6c5cff; --red2:#9a8cff; --shadow: 0 0 48px rgba(108,92,255,.18); --shadow2: 0 0 90px rgba(108,92,255,.28); --deep-e-97: rgba(6,6,14,0.97); --error-text: #dcd8ff; --rc-a-15: rgba(92,44,224,0.15); --rc-a-60: rgba(92,44,224,0.6); --rc-a-85: rgba(92,44,224,0.85); --rc-b-35: rgba(68,20,184,0.35); --rc-b-50: rgba(68,20,184,0.5); --rc-c-18: rgba(122,72,255,0.18); --rc-c-95: rgba(122,72,255,0.95); --rc-cold: #1a0a55; --rc-d-12: rgba(150,112,255,0.12); --rc-d-70: rgba(150,112,255,0.7); --rc-e-90: rgba(132,86,255,0.9); --rc-f-50: rgba(112,60,255,0.5); --rc-g-100: rgba(146,106,255,1.0); --rc-h-80: rgba(96,48,224,0.8); --rc-hot: #d5ccff; --rc-mid: #6633ff; --red-03: rgba(108,92,255,0.03); --red-04: rgba(108,92,255,0.04); --red-05: rgba(108,92,255,0.05); --red-06: rgba(108,92,255,0.06); --red-07: rgba(108,92,255,0.07); --red-08: rgba(108,92,255,0.08); --red-10: rgba(108,92,255,0.1); --red-12: rgba(108,92,255,0.12); --red-14: rgba(108,92,255,0.14); --red-16: rgba(108,92,255,0.16); --red-18: rgba(108,92,255,0.18); --red-20: rgba(108,92,255,0.2); --red-22: rgba(108,92,255,0.22); --red-28: rgba(108,92,255,0.28); --red-30: rgba(108,92,255,0.3); --red-35: rgba(108,92,255,0.35); --red-40: rgba(108,92,255,0.4); --red-45: rgba(108,92,255,0.45); --red-55: rgba(108,92,255,0.55); --red-60: rgba(108,92,255,0.6); --red-70: rgba(108,92,255,0.7); --red-95: rgba(108,92,255,0.95); --red-b-10: rgba(124,110,255,0.1); --red-b-25: rgba(124,110,255,0.25); --red-b-50: rgba(124,110,255,0.5); --red-c-20: rgba(150,138,255,0.2); --red-c-35: rgba(150,138,255,0.35); --red-d-15: rgba(105,88,255,0.15); --red-dark-18: rgba(86,70,205,0.18); --red-dark-60: rgba(86,70,205,0.6); --red-dark2-35: rgba(76,62,186,0.35); --red-e-85: rgba(142,130,255,0.85); --red-15: rgba(108,92,255,.15); --red-25: rgba(108,92,255,.25); --red-b-85: rgba(124,110,255,.85); --red-e-90: rgba(142,130,255,.9); --red-e-95: rgba(142,130,255,.95); --red-f-solid: #7d6cff; --red-b-70: rgba(124,110,255,.7); --red-deep-solid: #2e2a8c; } /* ═══════════════════════════════════════════════════════════════════════════ THEME — Blueprint 1:1 Technical drawing: cyan ink on navy paper. It is not a dark theme with the accent swapped, nor one of the light ones: it is a change of category. The site stops being a panel and becomes a drawing sheet — millimetre grid, dimension lines, registration marks, title block and compass. It lives in two parts, like the ZX Spectrum: this token block, and the structural section at the end of the file (all scoped to :root[data-theme="blueprint"]). Choices worth recording: - --panel is translucent AND the card's backdrop-filter is switched off, so the grid passes THROUGH the cards instead of being blurred behind them. That is what paper does: the grid is the paper, the drawing sits on top. - The state colours (--ok*, --warn*, --info*, --danger*) are NOT touched. They were already calibrated for a dark background and stay legible on the navy; there the colour means state, not accent. - --shadow/--shadow2 go to zero. Paper is flat — what separates is the hairline. - --font and --mono both become JetBrains Mono, which was already loaded and has normal metrics. It was deliberate not to repeat the VT323 trap, which by diverging in metrics forced three layers of size correction to catch the 1173 inline style= attributes across the pages. The drafting font (Share Tech Mono) enters only in the titles, which are sized by classes from here. ZX Spectrum has followed the same rule since 2026-09-09: its body font is a normal-metric one and VT323 is title-only, so those three layers are gone. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="blueprint"]{ /* ── Papel e tinta ── */ --bg0:#0c2846; --bg1:#081e37; --panel: rgba(18,52,88,.55); --line: rgba(127,212,255,.28); --text:#dceeff; --muted:#8fb3d4; --muted-2:#6a8fb0; --muted-3:#4a6a88; --muted-4:#7fa0bd; --label:#a8c8e4; --term-text:#cfe6fb; --option-bg:#0c2846; /* Paper is flat: separation is done with the stroke, not with shadow. */ --shadow: 0 0 0 0 transparent; --shadow2: 0 0 0 0 transparent; /* Squared off: the shared radius goes to zero. The 16 fixed radii on the classes are handled one by one in the structural section. */ --radius: 0px; --font: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* ── Accent, overlays and recessed backgrounds ── Generated from the :root literals: each token keeps exactly the Crimson Hive alpha, only the RGB triple changes. */ --red:#7fd4ff; --red2:#9ee2ff; --deep-e-97: rgba(6,14,26,0.97); --error-text: #d6ecff; --ov-01: rgba(170,220,255,0.01); --ov-02: rgba(170,220,255,0.02); --ov-03: rgba(170,220,255,0.03); --ov-04: rgba(170,220,255,0.04); --ov-05: rgba(170,220,255,0.05); --ov-06: rgba(170,220,255,0.06); --ov-07: rgba(170,220,255,0.07); --ov-08: rgba(170,220,255,0.08); --ov-09: rgba(170,220,255,0.09); --ov-10: rgba(170,220,255,0.1); --ov-12: rgba(170,220,255,0.12); --ov-15: rgba(170,220,255,0.15); --ov-25: rgba(170,220,255,0.25); --ov-35: rgba(170,220,255,0.35); --ov-45: rgba(170,220,255,0.45); --ov-50: rgba(170,220,255,0.5); --ov-85: rgba(170,220,255,0.85); --rc-a-15: rgba(90,170,225,0.15); --rc-a-60: rgba(90,170,225,0.6); --rc-a-85: rgba(90,170,225,0.85); --rc-b-35: rgba(60,130,185,0.35); --rc-b-50: rgba(60,130,185,0.5); --rc-c-18: rgba(127,212,255,0.18); --rc-c-95: rgba(127,212,255,0.95); --rc-cold: #0d3b66; --rc-d-12: rgba(175,232,255,0.12); --rc-d-70: rgba(175,232,255,0.7); --rc-e-90: rgba(150,222,255,0.9); --rc-f-50: rgba(110,200,250,0.5); --rc-g-100: rgba(190,240,255,1.0); --rc-h-80: rgba(95,175,228,0.8); --rc-hot: #ffffff; --rc-mid: #7fd4ff; --red-03: rgba(127,212,255,0.03); --red-04: rgba(127,212,255,0.04); --red-05: rgba(127,212,255,0.05); --red-06: rgba(127,212,255,0.06); --red-07: rgba(127,212,255,0.07); --red-08: rgba(127,212,255,0.08); --red-10: rgba(127,212,255,0.1); --red-12: rgba(127,212,255,0.12); --red-14: rgba(127,212,255,0.14); --red-16: rgba(127,212,255,0.16); --red-18: rgba(127,212,255,0.18); --red-20: rgba(127,212,255,0.2); --red-22: rgba(127,212,255,0.22); --red-28: rgba(127,212,255,0.28); --red-30: rgba(127,212,255,0.3); --red-35: rgba(127,212,255,0.35); --red-40: rgba(127,212,255,0.4); --red-45: rgba(127,212,255,0.45); --red-55: rgba(127,212,255,0.55); --red-60: rgba(127,212,255,0.6); --red-70: rgba(127,212,255,0.7); --red-95: rgba(127,212,255,0.95); --red-b-10: rgba(158,226,255,0.1); --red-b-25: rgba(158,226,255,0.25); --red-b-50: rgba(158,226,255,0.5); --red-c-20: rgba(190,238,255,0.2); --red-c-35: rgba(190,238,255,0.35); --red-d-15: rgba(120,208,255,0.15); --red-dark-18: rgba(74,150,205,0.18); --red-dark-60: rgba(74,150,205,0.6); --red-dark2-35: rgba(62,128,180,0.35); --red-e-85: rgba(175,232,255,0.85); --sink-06: rgba(4,14,28,0.06); --sink-15: rgba(4,14,28,0.15); --sink-18: rgba(4,14,28,0.18); --sink-20: rgba(4,14,28,0.2); --sink-22: rgba(4,14,28,0.22); --sink-24: rgba(4,14,28,0.24); --sink-30: rgba(4,14,28,0.3); --sink-40: rgba(4,14,28,0.4); --red-15: rgba(127,212,255,.15); --red-25: rgba(127,212,255,.25); --red-b-85: rgba(158,226,255,.85); --red-e-90: rgba(175,232,255,.9); --red-e-95: rgba(175,232,255,.95); --red-f-solid: #8ddaff; --sink-35: rgba(4,14,28,.35); --sink-75: rgba(4,14,28,.75); --red-b-70: rgba(158,226,255,.7); --red-deep-solid: #1e5a8c; } /* ═══════════════════════════════════════════════════════════════════════════ THEME — Aurora Hive Real frosted glass over drifting northern lights. It derives from :root like Crimson Indigo — inheriting the dark structure — but changes what makes the card: instead of a near-opaque panel with a token blur, it is real glass, and behind it passes light that moves. The accent is violet-magenta and NOT green, even though the aurora is. Green collides with --ok (which means "success") and cyan with Blueprint. What takes the emerald and the cyan are the ribbons in the background, in the structural section; the accent stays violet and is confused with no state at all. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="aurora_hive"]{ /* ── Meia-noite ── */ --bg0:#050914; --bg1:#070d1c; /* Glass. See the .tg-time-col note in the structural section: this value is translucent on purpose, and there is one place in the site that relied on it to cover content. */ --panel: rgba(255,255,255,.055); --line: rgba(255,255,255,.14); /* Vidro pede canto mais mole. */ --radius: 26px; /* The shadow stops being a neon halo and becomes a real drop, so the card lifts off the background instead of glowing. */ --shadow: 0 8px 24px rgba(0,0,0,.35); --shadow2: 0 20px 60px rgba(0,0,0,.45); /* ── Accent ── Generated from the :root literals: each token keeps exactly the Crimson Hive alpha, only the RGB triple changes. */ --red:#c084fc; --red2:#d8b4fe; --deep-e-97: rgba(8,6,16,0.97); --error-text: #f0e0ff; --rc-a-15: rgba(168,85,247,0.15); --rc-a-60: rgba(168,85,247,0.6); --rc-a-85: rgba(168,85,247,0.85); --rc-b-35: rgba(124,58,237,0.35); --rc-b-50: rgba(124,58,237,0.5); --rc-c-18: rgba(192,132,252,0.18); --rc-c-95: rgba(192,132,252,0.95); --rc-cold: #2e1065; --rc-d-12: rgba(216,180,254,0.12); --rc-d-70: rgba(216,180,254,0.7); --rc-e-90: rgba(200,150,253,0.9); --rc-f-50: rgba(180,110,250,0.5); --rc-g-100: rgba(232,121,249,1.0); --rc-h-80: rgba(160,80,240,0.8); --rc-hot: #f5d0fe; --rc-mid: #c084fc; --red-03: rgba(192,132,252,0.03); --red-04: rgba(192,132,252,0.04); --red-05: rgba(192,132,252,0.05); --red-06: rgba(192,132,252,0.06); --red-07: rgba(192,132,252,0.07); --red-08: rgba(192,132,252,0.08); --red-10: rgba(192,132,252,0.1); --red-12: rgba(192,132,252,0.12); --red-14: rgba(192,132,252,0.14); --red-16: rgba(192,132,252,0.16); --red-18: rgba(192,132,252,0.18); --red-20: rgba(192,132,252,0.2); --red-22: rgba(192,132,252,0.22); --red-28: rgba(192,132,252,0.28); --red-30: rgba(192,132,252,0.3); --red-35: rgba(192,132,252,0.35); --red-40: rgba(192,132,252,0.4); --red-45: rgba(192,132,252,0.45); --red-55: rgba(192,132,252,0.55); --red-60: rgba(192,132,252,0.6); --red-70: rgba(192,132,252,0.7); --red-95: rgba(192,132,252,0.95); --red-b-10: rgba(205,152,253,0.1); --red-b-25: rgba(205,152,253,0.25); --red-b-50: rgba(205,152,253,0.5); --red-c-20: rgba(218,178,254,0.2); --red-c-35: rgba(218,178,254,0.35); --red-d-15: rgba(188,126,252,0.15); --red-dark-18: rgba(150,95,205,0.18); --red-dark-60: rgba(150,95,205,0.6); --red-dark2-35: rgba(130,80,180,0.35); --red-e-85: rgba(212,165,253,0.85); --red-15: rgba(192,132,252,.15); --red-25: rgba(192,132,252,.25); --red-b-85: rgba(205,152,253,.85); --red-e-90: rgba(212,165,253,.9); --red-e-95: rgba(212,165,253,.95); --red-f-solid: #cba6fc; --red-b-70: rgba(205,152,253,.7); --red-deep-solid: #5b21b6; } /* ═══════════════════════════════════════════════════════════════════════════ THEME — Outrun 1986 Synthwave: banded sun, grid in perspective, chrome on the titles. It derives from :root. The accent is hot pink and cyan comes in as a second voice — in the grid lines and in the chromatic aberration on the titles, which here stops being a HUD defect and becomes exactly the effect the genre asks for. The --rc-* family (the reactor) was mapped to the sun's gradient, magenta to amber, instead of to the accent's pink: that is what makes the header reactor read as a small sun rather than a pink dot. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="outrun"]{ /* ── Noite violeta ── */ --bg0:#1a0b2e; --bg1:#0d0518; --panel: rgba(28,12,52,.78); --line: rgba(255,46,136,.22); --text:#f6eaff; --muted:#b39ad0; --muted-2:#8a70a8; --shadow: 0 0 48px rgba(255,46,136,.22); --shadow2: 0 0 90px rgba(255,46,136,.30); /* ── Accent ── Alphas untouched, only the RGB triple changes. */ --red:#ff2e88; --red2:#ff6bb0; --deep-e-97: rgba(14,5,26,0.97); --error-text: #ffd9ec; --rc-a-15: rgba(236,72,153,0.15); --rc-a-60: rgba(236,72,153,0.6); --rc-a-85: rgba(236,72,153,0.85); --rc-b-35: rgba(157,23,110,0.35); --rc-b-50: rgba(157,23,110,0.5); --rc-c-18: rgba(255,46,136,0.18); --rc-c-95: rgba(255,46,136,0.95); --rc-cold: #3b0a5c; --rc-d-12: rgba(255,160,80,0.12); --rc-d-70: rgba(255,160,80,0.7); --rc-e-90: rgba(255,110,90,0.9); --rc-f-50: rgba(255,60,140,0.5); --rc-g-100: rgba(255,190,90,1.0); --rc-h-80: rgba(210,50,130,0.8); --rc-hot: #ffe9a8; --rc-mid: #ff2e88; --red-03: rgba(255,46,136,0.03); --red-04: rgba(255,46,136,0.04); --red-05: rgba(255,46,136,0.05); --red-06: rgba(255,46,136,0.06); --red-07: rgba(255,46,136,0.07); --red-08: rgba(255,46,136,0.08); --red-10: rgba(255,46,136,0.1); --red-12: rgba(255,46,136,0.12); --red-14: rgba(255,46,136,0.14); --red-16: rgba(255,46,136,0.16); --red-18: rgba(255,46,136,0.18); --red-20: rgba(255,46,136,0.2); --red-22: rgba(255,46,136,0.22); --red-28: rgba(255,46,136,0.28); --red-30: rgba(255,46,136,0.3); --red-35: rgba(255,46,136,0.35); --red-40: rgba(255,46,136,0.4); --red-45: rgba(255,46,136,0.45); --red-55: rgba(255,46,136,0.55); --red-60: rgba(255,46,136,0.6); --red-70: rgba(255,46,136,0.7); --red-95: rgba(255,46,136,0.95); --red-b-10: rgba(255,90,165,0.1); --red-b-25: rgba(255,90,165,0.25); --red-b-50: rgba(255,90,165,0.5); --red-c-20: rgba(255,130,190,0.2); --red-c-35: rgba(255,130,190,0.35); --red-d-15: rgba(255,40,132,0.15); --red-dark-18: rgba(200,30,105,0.18); --red-dark-60: rgba(200,30,105,0.6); --red-dark2-35: rgba(175,25,95,0.35); --red-e-85: rgba(255,110,178,0.85); --red-15: rgba(255,46,136,.15); --red-25: rgba(255,46,136,.25); --red-b-85: rgba(255,90,165,.85); --red-e-90: rgba(255,110,178,.9); --red-e-95: rgba(255,110,178,.95); --red-f-solid: #ff4d9c; --red-b-70: rgba(255,90,165,.7); --red-deep-solid: #7a1050; } /* ═══════════════════════════════════════════════════════════════════════════ THEME — Iridium Near-black with holographic foil on the edges. This is the only one of the nine with a DELIBERATELY neutral accent. The --red-* family becomes pearl — cool greys — and the colour lives only in the animated foil on the borders. That restraint is what makes it distinct: a monochrome interface where the only coloured thing is the edge, and that edge is always changing. In compensation the --rc-* family (the reactor) takes the full iridescent palette: teal, indigo, magenta and amber. The reactor becomes the most colourful object on the page, which makes sense — it is the living piece of the header. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="iridium"]{ /* ── Quase-preto ── */ --bg0:#07070c; --bg1:#050508; /* More opaque than the other dark themes on purpose: the foil is painted in border-box behind the panel, and a transparent panel let the colour spill into the card instead of staying trapped on the edge. */ --panel: rgba(16,16,24,.92); --line: rgba(255,255,255,.10); --shadow: 0 8px 24px rgba(0,0,0,.5); --shadow2: 0 20px 60px rgba(0,0,0,.6); /* ── Pearl accent ── Alphas untouched, only the RGB triple changes. */ --red:#d5d8e8; --red2:#e2e5f2; --deep-e-97: rgba(6,6,10,0.97); --error-text: #e8eaf5; --rc-a-15: rgba(129,140,248,0.15); --rc-a-60: rgba(129,140,248,0.6); --rc-a-85: rgba(129,140,248,0.85); --rc-b-35: rgba(79,70,229,0.35); --rc-b-50: rgba(79,70,229,0.5); --rc-c-18: rgba(45,212,191,0.18); --rc-c-95: rgba(45,212,191,0.95); --rc-cold: #0b1220; --rc-d-12: rgba(232,121,249,0.12); --rc-d-70: rgba(232,121,249,0.7); --rc-e-90: rgba(251,191,36,0.9); --rc-f-50: rgba(129,140,248,0.5); --rc-g-100: rgba(244,114,182,1.0); --rc-h-80: rgba(45,212,191,0.8); --rc-hot: #f8fafc; --rc-mid: #818cf8; --red-03: rgba(213,216,232,0.03); --red-04: rgba(213,216,232,0.04); --red-05: rgba(213,216,232,0.05); --red-06: rgba(213,216,232,0.06); --red-07: rgba(213,216,232,0.07); --red-08: rgba(213,216,232,0.08); --red-10: rgba(213,216,232,0.1); --red-12: rgba(213,216,232,0.12); --red-14: rgba(213,216,232,0.14); --red-16: rgba(213,216,232,0.16); --red-18: rgba(213,216,232,0.18); --red-20: rgba(213,216,232,0.2); --red-22: rgba(213,216,232,0.22); --red-28: rgba(213,216,232,0.28); --red-30: rgba(213,216,232,0.3); --red-35: rgba(213,216,232,0.35); --red-40: rgba(213,216,232,0.4); --red-45: rgba(213,216,232,0.45); --red-55: rgba(213,216,232,0.55); --red-60: rgba(213,216,232,0.6); --red-70: rgba(213,216,232,0.7); --red-95: rgba(213,216,232,0.95); --red-b-10: rgba(226,229,242,0.1); --red-b-25: rgba(226,229,242,0.25); --red-b-50: rgba(226,229,242,0.5); --red-c-20: rgba(238,240,250,0.2); --red-c-35: rgba(238,240,250,0.35); --red-d-15: rgba(208,212,229,0.15); --red-dark-18: rgba(150,155,178,0.18); --red-dark-60: rgba(150,155,178,0.6); --red-dark2-35: rgba(128,133,158,0.35); --red-e-85: rgba(232,234,246,0.85); --red-15: rgba(213,216,232,.15); --red-25: rgba(213,216,232,.25); --red-b-85: rgba(226,229,242,.85); --red-e-90: rgba(232,234,246,.9); --red-e-95: rgba(232,234,246,.95); --red-f-solid: #dde0ee; --red-b-70: rgba(226,229,242,.7); --red-deep-solid: #4a4f66; } /* ═══════════════════════════════════════════════════════════════════════════ THEME — MacOS 27 (Dark) The night half of the macOS pair: dark Liquid Glass over the dark version of the wallpaper. The light half, and the note on how the two share one structural section, are further down with the light themes. It derives from :root like Crimson Indigo and Aurora Hive — it inherits the dark state colours, which were calibrated for a dark surface — and redefines the accent family, the surfaces and the --mac-* chrome tokens. Everything that is not a token lives in the "MACOS 27" structural section at the end of the file, which both halves share. The accent is International Orange lifted to #ff6b35 — the one warm thing on an indigo wallpaper — which holds 6:1 on the dark glass; --red2, the accent-as-text, is #ff9466 (6.0:1 over the wallpaper's brightest region). Each token keeps exactly the Crimson Hive alpha; only the RGB triple changes. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="macos27_dark"]{ --red:#ff6b35; --red2:#ff9466; --deep-e-97: rgba(14,8,6,0.97); --error-text: #ffe0d2; --rc-a-15: rgba(232,80,20,0.15); --rc-a-60: rgba(232,80,20,0.6); --rc-a-85: rgba(232,80,20,0.85); --rc-b-35: rgba(190,56,8,0.35); --rc-b-50: rgba(190,56,8,0.5); --rc-c-18: rgba(255,110,50,0.18); --rc-c-95: rgba(255,110,50,0.95); --rc-cold: #5a1c05; --rc-d-12: rgba(255,150,100,0.12); --rc-d-70: rgba(255,150,100,0.7); --rc-e-90: rgba(255,124,64,0.9); --rc-f-50: rgba(255,96,36,0.5); --rc-g-100: rgba(255,140,84,1.0); --rc-h-80: rgba(226,80,24,0.8); --rc-hot: #ffd9c2; --rc-mid: #ff6b35; --red-03: rgba(255,107,53,0.03); --red-04: rgba(255,107,53,0.04); --red-05: rgba(255,107,53,0.05); --red-06: rgba(255,107,53,0.06); --red-07: rgba(255,107,53,0.07); --red-08: rgba(255,107,53,0.08); --red-10: rgba(255,107,53,0.1); --red-12: rgba(255,107,53,0.12); --red-14: rgba(255,107,53,0.14); --red-16: rgba(255,107,53,0.16); --red-18: rgba(255,107,53,0.18); --red-20: rgba(255,107,53,0.2); --red-22: rgba(255,107,53,0.22); --red-28: rgba(255,107,53,0.28); --red-30: rgba(255,107,53,0.3); --red-35: rgba(255,107,53,0.35); --red-40: rgba(255,107,53,0.4); --red-45: rgba(255,107,53,0.45); --red-55: rgba(255,107,53,0.55); --red-60: rgba(255,107,53,0.6); --red-70: rgba(255,107,53,0.7); --red-95: rgba(255,107,53,0.95); --red-b-10: rgba(255,128,82,0.1); --red-b-25: rgba(255,128,82,0.25); --red-b-50: rgba(255,128,82,0.5); --red-c-20: rgba(255,156,118,0.2); --red-c-35: rgba(255,156,118,0.35); --red-d-15: rgba(255,100,45,0.15); --red-dark-18: rgba(212,80,34,0.18); --red-dark-60: rgba(212,80,34,0.6); --red-dark2-35: rgba(188,70,30,0.35); --red-e-85: rgba(255,142,100,0.85); --red-15: rgba(255,107,53,.15); --red-25: rgba(255,107,53,.25); --red-b-85: rgba(255,128,82,.85); --red-e-90: rgba(255,142,100,.9); --red-e-95: rgba(255,142,100,.95); --red-f-solid: #ff7d4d; --red-b-70: rgba(255,128,82,.7); --red-deep-solid: #8c3a1a; } :root[data-theme="macos27_dark"]{ /* The desktop is the wallpaper, painted by body::before; both --bg tokens are its own deep indigo (the image averages #23263a), so nothing can gradient between them and the fallback is the right colour while the JPEG loads. */ --bg0: #181a28; --bg1: #181a28; /* A window body: dark glass, translucent enough to take the wallpaper's colour through the blur and opaque enough that the light state colours keep their contrast. 80% and not lower: the wallpaper's brightest region is a mid blue, #6679a0, and over it the glass composites to #2c303d — where --danger is 4.7:1 (at 74% it was 4.4). --panel-solid is what a surface with nothing behind it uses (menus, the calendar's sticky column). */ --panel: rgba(30,30,36,.80); --panel-solid: #232328; --line: rgba(255,255,255,.12); --text: #f5f5f7; --muted: #a9adb8; /* :root's --muted-2 (#6b7685) is 2.8:1 on that same composite — it was tuned for Crimson Hive's near-black. Lifted to 4.7:1; --muted-3, which :root keeps decorative, to 4.2:1. */ --muted-2: #949caa; --muted-3: #8b93a1; --option-bg: #232328; /* Windows float: a hairline to separate glass from glass, and a real drop. */ --shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25); --shadow2: 0 0 0 .5px rgba(0,0,0,.6), 0 18px 50px rgba(0,0,0,.45); /* ── The Liquid Glass palette, for this theme's chrome only ────────────── Same names as the light half; the structural section reads only these. */ --mac-wall: url('/assets/macos27_dark.jpg?v=1'); --mac-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 104'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%230c0c16'/%3E%3Cstop offset='1' stop-color='%231d1d33'/%3E%3C/linearGradient%3E%3ClinearGradient id='g0' x1='.2' y1='0' x2='.8' y2='1'%3E%3Cstop offset='0' stop-color='%2334345a'/%3E%3Cstop offset='1' stop-color='%2314141f'/%3E%3C/linearGradient%3E%3ClinearGradient id='g1' x1='.2' y1='0' x2='.8' y2='1'%3E%3Cstop offset='0' stop-color='%232a2c4e'/%3E%3Cstop offset='1' stop-color='%230d0d18'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='.2' y1='0' x2='.8' y2='1'%3E%3Cstop offset='0' stop-color='%233f4a78'/%3E%3Cstop offset='1' stop-color='%2315182a'/%3E%3C/linearGradient%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='3.2'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='104' height='104' fill='url%28%23b%29'/%3E%3Cpath d='M-6 70 C22 66 30 34 50 22 C66 12 82 10 110 -4 L110 110 L-6 110Z' fill='%23000' opacity='.28' transform='translate%280 -3%29' filter='url%28%23s%29'/%3E%3Cpath d='M-6 70 C22 66 30 34 50 22 C66 12 82 10 110 -4 L110 110 L-6 110Z' fill='url%28%23g0%29'/%3E%3Cpath d='M-6 70 C22 66 30 34 50 22 C66 12 82 10 110 -4' fill='none' stroke='%238f92ea' stroke-opacity='.95' stroke-width='1.3'/%3E%3Cpath d='M-6 96 C26 92 40 66 58 52 C74 40 90 36 110 22 L110 110 L-6 110Z' fill='%23000' opacity='.28' transform='translate%280 -3%29' filter='url%28%23s%29'/%3E%3Cpath d='M-6 96 C26 92 40 66 58 52 C74 40 90 36 110 22 L110 110 L-6 110Z' fill='url%28%23g1%29'/%3E%3Cpath d='M-6 96 C26 92 40 66 58 52 C74 40 90 36 110 22' fill='none' stroke='%238f92ea' stroke-opacity='.95' stroke-width='1.3'/%3E%3Cpath d='M22 110 C34 92 52 84 70 76 C86 69 98 62 110 50 L110 110Z' fill='%23000' opacity='.28' transform='translate%280 -3%29' filter='url%28%23s%29'/%3E%3Cpath d='M22 110 C34 92 52 84 70 76 C86 69 98 62 110 50 L110 110Z' fill='url%28%23g2%29'/%3E%3Cpath d='M22 110 C34 92 52 84 70 76 C86 69 98 62 110 50' fill='none' stroke='%238f92ea' stroke-opacity='.95' stroke-width='1.3'/%3E%3C/svg%3E"); /* 72%, not lower: --muted on it has to hold AA over the wallpaper's brightest blue (4.8:1; at 58% it was 4.0). */ --mac-bar: rgba(38,38,46,.72); --mac-blur: blur(30px) saturate(170%); --mac-edge: rgba(255,255,255,.14); --mac-edge-top: rgba(255,255,255,.22); --mac-hair: rgba(0,0,0,.55); --mac-ctl: rgba(255,255,255,.10); --mac-ctl-hot: rgba(255,255,255,.17); --mac-ctl-down: rgba(255,255,255,.06); --mac-ctl-edge: rgba(255,255,255,.10); --mac-ctl-shadow: inset 0 .5px 0 rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.30); --mac-ctl-on: rgba(255,255,255,.22); /* An accent-filled control. White on #cf4512 is 4.65:1. */ --mac-fill: #cf4512; --mac-fill-hot: #dd4d17; --mac-fill-down: #b93a0e; --mac-on-fill: #ffffff; --mac-field: rgba(0,0,0,.26); --mac-field-edge: rgba(255,255,255,.14); --mac-focus: 0 0 0 3.5px rgba(255,107,53,.40); --mac-well: rgba(0,0,0,.22); /* See the light half: the segmented control is near-opaque, not glass. */ --mac-seg: #23232b; --mac-seg-edge: rgba(255,255,255,.12); --mac-tile: rgba(255,255,255,.06); --mac-head: rgba(255,255,255,.05); --mac-rule: rgba(255,255,255,.09); --mac-rule-strong:rgba(255,255,255,.18); --mac-row-hover: rgba(255,255,255,.05); --mac-menu: rgba(44,44,52,.97); --mac-menu-edge: rgba(255,255,255,.14); --mac-menu-shadow: 0 0 0 .5px rgba(0,0,0,.7), 0 12px 38px rgba(0,0,0,.55); --mac-sheet: rgba(36,36,42,.90); --mac-desk-ink: #ffffff; --mac-desk-shadow: 0 1px 3px rgba(0,0,0,.75); --mac-disabled: rgba(255,255,255,.30); } /* ═══════════════════════════════════════════════════════════════════════════ THEME — IBM 3270 A 3279 colour display on a black CRT: green phosphor for the body, the intensified white-green for what the terminal would have intensified, and the other 3270 colours kept for what they meant — red for errors, yellow for warnings, turquoise for information. It derives from :root like Crimson Indigo, Aurora Hive and MacOS 27 (Dark), and for once that is not only economy: the dark state colours are already the 3279 palette in everything but name (--ok a mint green, --amber a yellow, --info a cyan, --danger a red), so they are inherited rather than restated. What changes here is the accent family — the whole ladder in phosphor green — the surfaces, the overlays and the two faces. Three intensities, which is what the terminal had: · dim green #1fae5a (7.3:1) protected text, captions · normal green #33e878 (12.9:1) the body · intensified #e8fff2 (20:1) labels, table heads, what you must read The accent is #33ff66 (15.6:1), used where the other themes use their red. Everything that is not a token lives in the "IBM 3270 — structural section" further down. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="ibm3270"]{ /* The screen is off until the phosphor lights it: flat black, no gradient, and a panel that is barely a tint — a card here is a framed region of the screen, not a pane of glass over a background. */ --bg0:#000000; --bg1:#000000; --panel: rgba(0,26,12,.42); --panel-solid:#020a05; --option-bg:#02120a; --line: rgba(51,255,102,.22); /* Nothing on a CRT casts a shadow. What looks like one is the bloom. */ --shadow: 0 0 22px rgba(51,255,102,.05); --shadow2: 0 0 34px rgba(51,255,102,.07); --radius: 0px; /* The faces are the two this file already loads — Share Tech Mono for Blueprint, VT323 for the ZX title — so the theme costs no extra request. IBM Plex Mono would be the authentic one and is deliberately NOT here: a sixth @import is paid by every page in every theme, and Share Tech Mono is a terminal face with normal metrics. VT323 stays exactly where the ZX theme learned it belongs — the title, never the 10-13px body. */ --font: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --mono: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Phosphor. --white is the intensified green too: it is the button text, and a pure white one would be the only non-phosphor thing on the screen. */ --text:#33e878; --muted:#1fae5a; --muted-2:#178a47; --muted-3:#12793c; --muted-4:#1fae5a; --label:#e8fff2; --tag-text:#8fe8b4; --term-text:#33e878; --text-b:#e8fff2; --text-c:#8fe8b4; --text-d:#8fe8b4; --white:#e8fff2; /* CLAUDE.md says green is out as an accent because it collides with --ok, and it is right everywhere but here: this is the one theme where green is not a signal but the colour of the screen itself, so a green number no longer reads as "good" on its own. The 3270 answer to that is intensity, not hue — an intensified field is how the terminal said "look at this" — so the --ok solids, and only the solids, become the intensified white-green. The backgrounds and borders of the --ok ladder keep their alphas, and --danger (red), --warn (yellow) and --info (turquoise) are untouched: those three already ARE the 3279 palette and they still carry the meaning. */ --ok-solid:#b6ffd2; --ok-b-solid:#b6ffd2; --ok-c-solid:#b6ffd2; --ok-d-solid:#d7ffe8; --ok-e-solid:#b6ffd2; /* The accent: intensified phosphor. Alphas untouched, only the RGB triple. */ --red: #33ff66; --red2: #8cffb0; --red-03: rgba(51,255,102,0.03); --red-04: rgba(51,255,102,0.04); --red-05: rgba(51,255,102,0.05); --red-06: rgba(51,255,102,0.06); --red-07: rgba(51,255,102,0.07); --red-08: rgba(51,255,102,0.08); --red-10: rgba(51,255,102,0.1); --red-12: rgba(51,255,102,0.12); --red-14: rgba(51,255,102,0.14); --red-16: rgba(51,255,102,0.16); --red-18: rgba(51,255,102,0.18); --red-20: rgba(51,255,102,0.2); --red-22: rgba(51,255,102,0.22); --red-28: rgba(51,255,102,0.28); --red-30: rgba(51,255,102,0.3); --red-35: rgba(51,255,102,0.35); --red-40: rgba(51,255,102,0.4); --red-45: rgba(51,255,102,0.45); --red-55: rgba(51,255,102,0.55); --red-60: rgba(51,255,102,0.6); --red-70: rgba(51,255,102,0.7); --red-95: rgba(51,255,102,0.95); --red-b-10: rgba(140,255,176,0.1); --red-b-25: rgba(140,255,176,0.25); --red-b-50: rgba(140,255,176,0.5); --red-c-20: rgba(180,255,205,0.2); --red-c-35: rgba(180,255,205,0.35); --red-d-15: rgba(51,255,102,0.15); --red-dark-18: rgba(24,160,70,0.18); --red-dark-60: rgba(24,160,70,0.6); --red-dark2-35: rgba(18,130,56,0.35); --red-e-85: rgba(160,255,190,0.85); --red-15: rgba(51,255,102,.15); --red-25: rgba(51,255,102,.25); --red-b-85: rgba(140,255,176,.85); --red-e-90: rgba(160,255,190,.9); --red-e-95: rgba(160,255,190,.95); --red-f-solid: #5cff8f; --red-b-70: rgba(140,255,176,.7); --red-deep-solid: #0d7a33; /* The reactor, which this theme turns into the cursor. */ --rc-a-15: rgba(51,255,102,0.15); --rc-a-60: rgba(51,255,102,0.6); --rc-a-85: rgba(51,255,102,0.85); --rc-b-35: rgba(0,180,80,0.35); --rc-b-50: rgba(0,180,80,0.5); --rc-c-18: rgba(140,255,176,0.18); --rc-c-95: rgba(140,255,176,0.95); --rc-cold: #00331a; --rc-d-12: rgba(90,255,140,0.12); --rc-d-70: rgba(90,255,140,0.7); --rc-e-90: rgba(51,255,102,0.9); --rc-f-50: rgba(51,255,102,0.5); --rc-g-100: rgba(160,255,190,1.0); --rc-h-80: rgba(0,200,90,0.8); --rc-hot: #ccffdd; --rc-mid: #00ff66; /* Overlays: on a terminal every hairline is phosphor, not white. */ --ov-01: rgba(51,255,102,0.01); --ov-02: rgba(51,255,102,0.02); --ov-03: rgba(51,255,102,0.03); --ov-04: rgba(51,255,102,0.04); --ov-05: rgba(51,255,102,0.05); --ov-06: rgba(51,255,102,0.06); --ov-07: rgba(51,255,102,0.07); --ov-08: rgba(51,255,102,0.08); --ov-09: rgba(51,255,102,0.09); --ov-10: rgba(51,255,102,0.1); --ov-12: rgba(51,255,102,0.12); --ov-15: rgba(51,255,102,0.15); --ov-25: rgba(51,255,102,0.25); --ov-35: rgba(51,255,102,0.35); --ov-45: rgba(51,255,102,0.45); --ov-50: rgba(51,255,102,0.5); --ov-85: rgba(51,255,102,0.85); /* Shared with the Blue and Red variants: the structural section paints with these instead of literals (2026-09-21), so the three differ only here. */ --i3270-rgb: 51,255,102; --i3270-hi: #e8fff2; --i3270-menu: #010803; --i3270-err: #ffb4b4; } /* ═══════════════════════════════════════════════════════════════════════════ THEME — IBM 3270 (Blue) and IBM 3270 (Red) The same terminal on the 3279's other two guns. Token blocks only, generated from the green one role by role; the structural section is shared with the green theme ([data-theme^="ibm3270"]) and paints with the --i3270-* tokens. ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="ibm3270_blue"]{ /* Generated from the green block with the same roles: every colour was re-derived for this hue at a target contrast on black (i3270 palette, 2026-09-21) — accent 8.5:1, body 9.5:1, captions 6:1, small print 4.6:1, intensified 18.5:1 — so the screen keeps its colour instead of the pastel an equal-luminance copy of the green gives. */ --bg0:#000000; --bg1:#000000; --panel: rgba(0,9,31,.42); --panel-solid:#000511; --option-bg:#00091f; --line: rgba(123,163,255,.22); /* Nothing on a CRT casts a shadow. What looks like one is the bloom. */ --shadow: 0 0 22px rgba(123,163,255,.05); --shadow2: 0 0 34px rgba(123,163,255,.07); --radius: 0px; /* The faces are the two this file already loads — Share Tech Mono for Blueprint, VT323 for the ZX title — so the theme costs no extra request. IBM Plex Mono would be the authentic one and is deliberately NOT here: a sixth @import is paid by every page in every theme, and Share Tech Mono is a terminal face with normal metrics. VT323 stays exactly where the ZX theme learned it belongs — the title, never the 10-13px body. */ --font: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --mono: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Phosphor. --white is the intensified blue too: it is the button text, and a pure white one would be the only non-phosphor thing on the screen. */ --text:#8aadff; --muted:#5685f1; --muted-2:#366def; --muted-3:#2461ed; --muted-4:#5685f1; --label:#eaf1ff; --tag-text:#b0c8ff; --term-text:#8aadff; --text-b:#eaf1ff; --text-c:#b0c8ff; --text-d:#b0c8ff; --white:#eaf1ff; /* The accent: intensified phosphor. Alphas untouched, only the RGB triple. */ --red: #7ba3ff; --red2: #aac3ff; --red-03: rgba(123,163,255,0.03); --red-04: rgba(123,163,255,0.04); --red-05: rgba(123,163,255,0.05); --red-06: rgba(123,163,255,0.06); --red-07: rgba(123,163,255,0.07); --red-08: rgba(123,163,255,0.08); --red-10: rgba(123,163,255,0.1); --red-12: rgba(123,163,255,0.12); --red-14: rgba(123,163,255,0.14); --red-16: rgba(123,163,255,0.16); --red-18: rgba(123,163,255,0.18); --red-20: rgba(123,163,255,0.2); --red-22: rgba(123,163,255,0.22); --red-28: rgba(123,163,255,0.28); --red-30: rgba(123,163,255,0.3); --red-35: rgba(123,163,255,0.35); --red-40: rgba(123,163,255,0.4); --red-45: rgba(123,163,255,0.45); --red-55: rgba(123,163,255,0.55); --red-60: rgba(123,163,255,0.6); --red-70: rgba(123,163,255,0.7); --red-95: rgba(123,163,255,0.95); --red-b-10: rgba(170,195,255,0.1); --red-b-25: rgba(170,195,255,0.25); --red-b-50: rgba(170,195,255,0.5); --red-c-20: rgba(176,200,255,0.2); --red-c-35: rgba(176,200,255,0.35); --red-d-15: rgba(123,163,255,0.15); --red-dark-18: rgba(86,133,241,0.18); --red-dark-60: rgba(86,133,241,0.6); --red-dark2-35: rgba(36,97,237,0.35); --red-e-85: rgba(170,195,255,0.85); --red-15: rgba(123,163,255,.15); --red-25: rgba(123,163,255,.25); --red-b-85: rgba(170,195,255,.85); --red-e-90: rgba(170,195,255,.9); --red-e-95: rgba(170,195,255,.95); --red-f-solid: #97b6ff; --red-b-70: rgba(170,195,255,.7); --red-deep-solid: #003ac3; /* The reactor, which this theme turns into the cursor. */ --rc-a-15: rgba(123,163,255,0.15); --rc-a-60: rgba(123,163,255,0.6); --rc-a-85: rgba(123,163,255,0.85); --rc-b-35: rgba(86,133,241,0.35); --rc-b-50: rgba(86,133,241,0.5); --rc-c-18: rgba(170,195,255,0.18); --rc-c-95: rgba(170,195,255,0.95); --rc-cold: #001d61; --rc-d-12: rgba(151,182,255,0.12); --rc-d-70: rgba(151,182,255,0.7); --rc-e-90: rgba(123,163,255,0.9); --rc-f-50: rgba(123,163,255,0.5); --rc-g-100: rgba(170,195,255,1.0); --rc-h-80: rgba(123,163,255,0.8); --rc-hot: #d4e1ff; --rc-mid: #7ba3ff; /* Overlays: on a terminal every hairline is phosphor, not white. */ --ov-01: rgba(123,163,255,0.01); --ov-02: rgba(123,163,255,0.02); --ov-03: rgba(123,163,255,0.03); --ov-04: rgba(123,163,255,0.04); --ov-05: rgba(123,163,255,0.05); --ov-06: rgba(123,163,255,0.06); --ov-07: rgba(123,163,255,0.07); --ov-08: rgba(123,163,255,0.08); --ov-09: rgba(123,163,255,0.09); --ov-10: rgba(123,163,255,0.1); --ov-12: rgba(123,163,255,0.12); --ov-15: rgba(123,163,255,0.15); --ov-25: rgba(123,163,255,0.25); --ov-35: rgba(123,163,255,0.35); --ov-45: rgba(123,163,255,0.45); --ov-50: rgba(123,163,255,0.5); --ov-85: rgba(123,163,255,0.85); /* Shared with the Blue and Red variants: the structural section paints with these instead of literals (2026-09-21), so the three differ only here. */ --i3270-rgb: 123,163,255; --i3270-hi: #eaf1ff; --i3270-menu: #00030b; --i3270-err: #ffb4b4; /* Blue is the screen here, so the state that IS blue collides: --info. The 3270 answer is the one the green theme uses for --ok — intensity, not hue — so the info solids become the intensified white-blue. --ok (green), --warn (yellow) and --danger (red) keep their colours and their meaning. */ --info-solid: #d4e1ff; --info-b-solid: #d4e1ff; --info-c-solid: #d4e1ff; } :root[data-theme="ibm3270_red"]{ /* Generated from the green block with the same roles: every colour was re-derived for this hue at a target contrast on black (i3270 palette, 2026-09-21) — accent 8.5:1, body 9.5:1, captions 6:1, small print 4.6:1, intensified 18.5:1 — so the screen keeps its colour instead of the pastel an equal-luminance copy of the green gives. */ --bg0:#000000; --bg1:#000000; --panel: rgba(30,1,0,.42); --panel-solid:#130100; --option-bg:#1e0100; --line: rgba(255,126,121,.22); /* Nothing on a CRT casts a shadow. What looks like one is the bloom. */ --shadow: 0 0 22px rgba(255,126,121,.05); --shadow2: 0 0 34px rgba(255,126,121,.07); --radius: 0px; /* The faces are the two this file already loads — Share Tech Mono for Blueprint, VT323 for the ZX title — so the theme costs no extra request. IBM Plex Mono would be the authentic one and is deliberately NOT here: a sixth @import is paid by every page in every theme, and Share Tech Mono is a terminal face with normal metrics. VT323 stays exactly where the ZX theme learned it belongs — the title, never the 10-13px body. */ --font: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --mono: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Phosphor. --white is the intensified red too: it is the button text, and a pure white one would be the only non-phosphor thing on the screen. */ --text:#ff8e8a; --muted:#f0514b; --muted-2:#e81a13; --muted-3:#d61811; --muted-4:#f0514b; --label:#ffecec; --tag-text:#ffb5b2; --term-text:#ff8e8a; --text-b:#ffecec; --text-c:#ffb5b2; --text-d:#ffb5b2; --white:#ffecec; /* The accent: intensified phosphor. Alphas untouched, only the RGB triple. */ --red: #ff7e79; --red2: #ffafac; --red-03: rgba(255,126,121,0.03); --red-04: rgba(255,126,121,0.04); --red-05: rgba(255,126,121,0.05); --red-06: rgba(255,126,121,0.06); --red-07: rgba(255,126,121,0.07); --red-08: rgba(255,126,121,0.08); --red-10: rgba(255,126,121,0.1); --red-12: rgba(255,126,121,0.12); --red-14: rgba(255,126,121,0.14); --red-16: rgba(255,126,121,0.16); --red-18: rgba(255,126,121,0.18); --red-20: rgba(255,126,121,0.2); --red-22: rgba(255,126,121,0.22); --red-28: rgba(255,126,121,0.28); --red-30: rgba(255,126,121,0.3); --red-35: rgba(255,126,121,0.35); --red-40: rgba(255,126,121,0.4); --red-45: rgba(255,126,121,0.45); --red-55: rgba(255,126,121,0.55); --red-60: rgba(255,126,121,0.6); --red-70: rgba(255,126,121,0.7); --red-95: rgba(255,126,121,0.95); --red-b-10: rgba(255,175,172,0.1); --red-b-25: rgba(255,175,172,0.25); --red-b-50: rgba(255,175,172,0.5); --red-c-20: rgba(255,181,178,0.2); --red-c-35: rgba(255,181,178,0.35); --red-d-15: rgba(255,126,121,0.15); --red-dark-18: rgba(240,81,75,0.18); --red-dark-60: rgba(240,81,75,0.6); --red-dark2-35: rgba(214,24,17,0.35); --red-e-85: rgba(255,175,172,0.85); --red-15: rgba(255,126,121,.15); --red-25: rgba(255,126,121,.25); --red-b-85: rgba(255,175,172,.85); --red-e-90: rgba(255,175,172,.9); --red-e-95: rgba(255,175,172,.95); --red-f-solid: #ff9c99; --red-b-70: rgba(255,175,172,.7); --red-deep-solid: #9a0500; /* The reactor, which this theme turns into the cursor. */ --rc-a-15: rgba(255,126,121,0.15); --rc-a-60: rgba(255,126,121,0.6); --rc-a-85: rgba(255,126,121,0.85); --rc-b-35: rgba(240,81,75,0.35); --rc-b-50: rgba(240,81,75,0.5); --rc-c-18: rgba(255,175,172,0.18); --rc-c-95: rgba(255,175,172,0.95); --rc-cold: #500300; --rc-d-12: rgba(255,156,153,0.12); --rc-d-70: rgba(255,156,153,0.7); --rc-e-90: rgba(255,126,121,0.9); --rc-f-50: rgba(255,126,121,0.5); --rc-g-100: rgba(255,175,172,1.0); --rc-h-80: rgba(255,126,121,0.8); --rc-hot: #ffd8d6; --rc-mid: #ff7e79; /* Overlays: on a terminal every hairline is phosphor, not white. */ --ov-01: rgba(255,126,121,0.01); --ov-02: rgba(255,126,121,0.02); --ov-03: rgba(255,126,121,0.03); --ov-04: rgba(255,126,121,0.04); --ov-05: rgba(255,126,121,0.05); --ov-06: rgba(255,126,121,0.06); --ov-07: rgba(255,126,121,0.07); --ov-08: rgba(255,126,121,0.08); --ov-09: rgba(255,126,121,0.09); --ov-10: rgba(255,126,121,0.1); --ov-12: rgba(255,126,121,0.12); --ov-15: rgba(255,126,121,0.15); --ov-25: rgba(255,126,121,0.25); --ov-35: rgba(255,126,121,0.35); --ov-45: rgba(255,126,121,0.45); --ov-50: rgba(255,126,121,0.5); --ov-85: rgba(255,126,121,0.85); /* Shared with the Blue and Red variants: the structural section paints with these instead of literals (2026-09-21), so the three differ only here. */ --i3270-rgb: 255,126,121; --i3270-hi: #ffecec; --i3270-menu: #0e0000; --i3270-err: #ffecec; /* Red is the screen here, so the state that IS red collides: --danger. As the green theme does for --ok, the danger solid becomes the intensified white-red, and .qci-error's text (--i3270-err) with it: an error reads as a lit field, not as more of the same red. --ok (green), --warn (yellow) and --info (turquoise) keep their colours and their meaning. */ --danger: #ffd8d6; --error-text: #ffd8d6; } /* ═══════════════════════════════════════════════════════════════════════════ THEME — Red Quito Light, in red / white / black / greys, after Fujitsu's look. It works by redefining the :root tokens. An attribute selector ([data-theme]) has higher specificity than a class, so these rules beat those in the pages'