/* ===================================================================== Factory Terminal — shared CRT / hackertyper design system --------------------------------------------------------------------- One stylesheet, four surfaces. Drop this in alongside the existing liquid-glass.css and opt a page into the look with: full-screen surface

…

a bordered terminal panel Everything is prefixed `term-` (mirrors the `lg-` convention) so it never collides with a surface's existing classes; you can migrate a page piece by piece. Pure CSS, no deps. Honors prefers-reduced-motion. ===================================================================== */ :root { --term-fg: #9adaea; /* cyan accent — drives the WHOLE theme */ --term-bg: color-mix(in srgb, var(--term-fg) 8%, #000); /* near-black, tinted by --term-fg */ --term-bg-soft: color-mix(in srgb, var(--term-fg) 14%, #000); --term-dim: color-mix(in srgb, var(--term-fg) 55%, #000); /* muted, follows --term-fg */ --term-amber: #ffb000; /* warnings / highlights */ --term-red: #ff4040; /* errors / denied */ --term-cyan: #36e0e6; /* links / accents */ --term-line: color-mix(in srgb, var(--term-fg) 28%, transparent); /* borders */ --term-font: "JetBrains Mono", "Fira Code", "DM Mono", "Cascadia Code", Consolas, "Courier New", monospace; --term-glow: 0 0 4px color-mix(in srgb, var(--term-fg) 55%, transparent), 0 0 12px color-mix(in srgb, var(--term-fg) 22%, transparent); } /* ── base surface ──────────────────────────────────────────────────── */ .term { background: var(--term-bg); color: var(--term-fg); font-family: var(--term-font); text-shadow: var(--term-glow); letter-spacing: .02em; } .term ::selection { background: var(--term-fg); color: var(--term-bg); text-shadow: none; } /* ── CRT overlay: scanlines + vignette + faint flicker ─────────────── */ .crt::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9000; background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 1px, rgba(0,0,0,.28) 2px, rgba(0,0,0,.28) 3px); mix-blend-mode: multiply; } .crt::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9001; background: radial-gradient(120% 120% at 50% 50%, transparent 54%, rgba(0,0,0,.6) 100%); animation: term-flicker 4s infinite steps(50); } @keyframes term-flicker { 0%,96%{opacity:1} 97%{opacity:.78} 98%{opacity:.96} 99%{opacity:.86} 100%{opacity:1} } /* sweeping scan beam (added to the DOM by terminal.js) */ .term-beam { position: fixed; left: 0; right: 0; top: 0; height: 140px; z-index: 9002; pointer-events: none; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--term-fg) 10%, transparent) 50%, transparent); animation: term-sweep 5.5s linear infinite; } @keyframes term-sweep { 0%{transform:translateY(-160px)} 100%{transform:translateY(100vh)} } /* matrix code-rain backdrop */ #term-rain { position: absolute; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; opacity: .4; } /* ── window / panel ────────────────────────────────────────────────── */ .term-window { background: linear-gradient(180deg, var(--term-bg-soft), var(--term-bg)); border: 1px solid var(--term-line); border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 18px 60px rgba(0,0,0,.7), inset 0 0 60px color-mix(in srgb, var(--term-fg) 5%, transparent); overflow: hidden; } .term-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; font-size: 12px; color: var(--term-dim); border-bottom: 1px solid var(--term-line); background: color-mix(in srgb, var(--term-fg) 5%, transparent); text-transform: lowercase; letter-spacing: .08em; } .term-titlebar .term-dots { display:flex; gap:6px; } .term-titlebar .term-dots i { width:9px; height:9px; border-radius:50%; display:inline-block; border:1px solid var(--term-dim); opacity:.8; } .term-body { padding: 22px 26px 26px; } /* ── typewriter boot text ──────────────────────────────────────────── */ .term-boot { margin: 0 0 18px; white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.55; color: var(--term-dim); min-height: 1em; } .term-boot .ok { color: var(--term-fg); } .term-boot .warn { color: var(--term-amber); } /* ── prompt + input ────────────────────────────────────────────────── */ .term-prompt-label { display:block; font-size:12px; color: var(--term-dim); text-transform: lowercase; letter-spacing:.08em; margin-bottom:6px; } .term-prompt { display:flex; align-items:center; gap:10px; border:1px solid var(--term-line); border-radius:3px; padding:10px 12px; background: rgba(0,0,0,.35); } .term-prompt:focus-within { border-color: var(--term-fg); box-shadow: 0 0 12px color-mix(in srgb, var(--term-fg) 25%, transparent); } .term-prompt-sigil { color: var(--term-fg); font-weight:700; } .term-input { flex:1; background: transparent; border:0; outline:0; color: var(--term-fg); font-family: var(--term-font); font-size:15px; letter-spacing:.14em; text-shadow: var(--term-glow); caret-color: var(--term-fg); } .term-input::placeholder { color: var(--term-dim); opacity:.6; letter-spacing:.14em; } /* ── blinking block cursor ─────────────────────────────────────────── */ .term-cursor { display:inline-block; width:.6ch; height:1.05em; background: var(--term-fg); vertical-align:-2px; margin-left:2px; box-shadow:0 0 8px var(--term-fg); animation: term-blink 1s steps(1) infinite; } @keyframes term-blink { 50%{opacity:0} } /* ── button ────────────────────────────────────────────────────────── */ .term-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:16px; padding:11px 16px; background: transparent; color: var(--term-fg); border:1px solid var(--term-fg); border-radius:3px; font-family: var(--term-font); font-size:14px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; text-shadow: var(--term-glow); cursor:pointer; transition: background .12s, color .12s, box-shadow .12s; } .term-btn::before { content:"[ "; opacity:.55; } .term-btn::after { content:" ]"; opacity:.55; } .term-btn:hover:not(:disabled) { background: var(--term-fg); color: var(--term-bg); text-shadow:none; box-shadow:0 0 18px color-mix(in srgb, var(--term-fg) 50%, transparent); } .term-btn:disabled { opacity:.5; cursor:progress; border-color: var(--term-dim); color: var(--term-dim); } /* ── status line (reused by the app's #login-message) ──────────────── */ .login-message { min-height:1.2em; margin-top:14px; font-size:12.5px; color: var(--term-dim); } .login-message-info, .login-message.info { color: var(--term-dim); } .login-message-success, .login-message.success { color: var(--term-fg); } .login-message-error, .login-message.error { color: var(--term-red); text-shadow:0 0 6px rgba(255,64,64,.5); } .login-message::before { content:"» "; opacity:.7; } .login-message:empty::before { content:""; } /* ── links / footer ────────────────────────────────────────────────── */ .term-link { color: var(--term-cyan); text-decoration:none; } .term-link:hover { text-shadow:0 0 8px var(--term-cyan); } .term-footer { margin-top:18px; text-align:center; font-size:12px; } /* ── forward-looking components (admin tables / website panels) ─────── */ .term-panel { border:1px solid var(--term-line); border-radius:4px; padding:18px; background: linear-gradient(180deg, var(--term-bg-soft), var(--term-bg)); } .term-table { width:100%; border-collapse:collapse; font-size:13px; } .term-table th, .term-table td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--term-line); } .term-table th { color: var(--term-dim); text-transform:uppercase; letter-spacing:.08em; font-weight:700; } .term-table tbody tr:hover { background: color-mix(in srgb, var(--term-fg) 6%, transparent); } .term-dim { color: var(--term-dim); } .term-amber { color: var(--term-amber); } .term-red { color: var(--term-red); } .term-ok { color: var(--term-fg); } /* ── login overlay: re-skin the app's #login-screen in place ─────────── High-specificity overrides so this wins over retail.css regardless of load order. Markup keeps every id retail.js relies on. */ #login-screen.term-screen { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: var(--term-bg); background-image: radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--term-fg) 6%, transparent), transparent 60%); font-family: var(--term-font); } #login-screen.term-screen .login-window { position: relative; z-index: 2; /* above the code-rain backdrop */ width: 460px; max-width: 92vw; } #login-screen.term-screen .term-input { width: 100%; } /* ===================================================================== GLOBAL SKIN — opt a whole surface in with --------------------------------------------------------------------- Repaint ONLY (colour / font / border / background / shadow). No layout property is touched, so every surface keeps its structure and all JS wiring. Semantic colours are preserved (danger=red, on=green, off=red). Shared across App retail, the website, and the admin panel. ===================================================================== */ body.term-skin { background: var(--term-bg) !important; color: var(--term-fg); font-family: var(--term-font) !important; } /* neutralise liquid-glass layers AND all native backdrop-filter/blur across every component — stat-card, product-card, sidebar, navbar, modal, etc. */ body.term-skin *, body.term-skin *::before, body.term-skin *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.term-skin .lg-glass-filter, body.term-skin .lg-glass-overlay, body.term-skin .lg-glass-specular, body.term-skin .lg-glass-distortion-overlay { filter: none !important; background: transparent !important; } body.term-skin [class*="lg-glass"] { --lg-bg: color-mix(in srgb, var(--term-fg) 5%, transparent); --lg-text: var(--term-fg); --lg-highlight: color-mix(in srgb, var(--term-fg) 25%, transparent); } /* type */ body.term-skin h1, body.term-skin h2, body.term-skin h3, body.term-skin h4, body.term-skin h5, body.term-skin h6 { font-family: var(--term-font) !important; color: var(--term-fg); text-shadow: var(--term-glow); letter-spacing: .03em; } body.term-skin a { color: var(--term-cyan); } body.term-skin a:hover { text-shadow: 0 0 8px var(--term-cyan); } body.term-skin .muted, body.term-skin small, body.term-skin .text-muted { color: var(--term-dim) !important; } body.term-skin code, body.term-skin pre, body.term-skin kbd { font-family: var(--term-font) !important; color: var(--term-amber); } body.term-skin ::selection { background: var(--term-fg); color: var(--term-bg); text-shadow: none; } /* surfaces → terminal panels */ body.term-skin .card, body.term-skin .panel, body.term-skin .modal-content, body.term-skin .modal-panel, body.term-skin .auth-container, body.term-skin .feature-card, body.term-skin .download-card, body.term-skin .action-card, body.term-skin .status-card, body.term-skin .table-container, body.term-skin .version-panel, body.term-skin .navbar, body.term-skin .dashboard-sidebar, body.term-skin .dashboard-section, body.term-skin .empty-state { background: linear-gradient(180deg, var(--term-bg-soft), var(--term-bg)) !important; border: 1px solid var(--term-line) !important; border-radius: 4px !important; box-shadow: inset 0 0 40px color-mix(in srgb, var(--term-fg) 4%, transparent), 0 0 0 1px rgba(0,0,0,.5) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.term-skin .card-header, body.term-skin .modal-header { border-bottom: 1px solid var(--term-line) !important; background: color-mix(in srgb, var(--term-fg) 5%, transparent) !important; } body.term-skin .card-header h1, body.term-skin .card-header h2, body.term-skin .card-header h3, body.term-skin .modal-header h1, body.term-skin .modal-header h2, body.term-skin .modal-header h3 { color: var(--term-fg); } /* inputs */ body.term-skin .form-input, body.term-skin .form-control, body.term-skin .form-select, body.term-skin input[type="text"], body.term-skin input[type="email"], body.term-skin input[type="password"], body.term-skin input[type="search"], body.term-skin input[type="number"], body.term-skin textarea, body.term-skin select { background: rgba(0,0,0,.35) !important; color: var(--term-fg) !important; border: 1px solid var(--term-line) !important; border-radius: 3px !important; font-family: var(--term-font) !important; caret-color: var(--term-fg); } body.term-skin .form-input:focus, body.term-skin .form-control:focus, body.term-skin .form-select:focus, body.term-skin input:focus, body.term-skin textarea:focus, body.term-skin select:focus { border-color: var(--term-fg) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--term-fg) 25%, transparent) !important; outline: none; } body.term-skin ::placeholder { color: var(--term-dim) !important; opacity: .7; } body.term-skin label, body.term-skin .form-label { color: var(--term-dim) !important; font-family: var(--term-font); } /* buttons — keep primary/danger/secondary semantics */ body.term-skin .btn, body.term-skin button.btn, body.term-skin .icon-btn, body.term-skin .btn-login { background: transparent !important; color: var(--term-fg) !important; border: 1px solid var(--term-fg) !important; border-radius: 3px !important; font-family: var(--term-font) !important; letter-spacing: .08em; text-transform: uppercase; box-shadow: none !important; text-shadow: var(--term-glow); transition: background .12s, color .12s, box-shadow .12s; } body.term-skin .btn:hover { background: var(--term-fg) !important; color: var(--term-bg) !important; text-shadow: none; } body.term-skin .btn-danger { border-color: var(--term-red) !important; color: var(--term-red) !important; } body.term-skin .btn-danger:hover { background: var(--term-red) !important; color: #000 !important; } body.term-skin .btn-secondary { border-color: var(--term-dim) !important; color: var(--term-dim) !important; } body.term-skin .btn-secondary:hover { background: var(--term-dim) !important; color: var(--term-bg) !important; } /* tables → TUI grid */ body.term-skin .data-table, body.term-skin table { border-collapse: collapse; color: var(--term-fg); } body.term-skin .data-table th, body.term-skin table th { color: var(--term-dim) !important; border-bottom: 1px solid var(--term-line) !important; text-transform: uppercase; letter-spacing: .06em; background: color-mix(in srgb, var(--term-fg) 5%, transparent) !important; } body.term-skin .data-table td, body.term-skin table td { border-bottom: 1px solid var(--term-line) !important; } body.term-skin .data-table tbody tr:hover, body.term-skin table tbody tr:hover { background: color-mix(in srgb, var(--term-fg) 6%, transparent) !important; } /* nav / sidebar items */ body.term-skin .nav-item { border-radius: 3px; color: var(--term-dim); } body.term-skin .nav-item.active, body.term-skin .nav-item:hover { background: color-mix(in srgb, var(--term-fg) 8%, transparent) !important; color: var(--term-fg) !important; } /* badges — keep on/off meaning */ body.term-skin .badge { border: 1px solid var(--term-line); border-radius: 3px; font-family: var(--term-font); } body.term-skin .badge-on { color: var(--term-fg) !important; border-color: var(--term-fg) !important; } body.term-skin .badge-off { color: var(--term-red) !important; border-color: var(--term-red) !important; } /* scrollbars */ body.term-skin ::-webkit-scrollbar { width: 10px; height: 10px; } body.term-skin ::-webkit-scrollbar-track { background: var(--term-bg); } body.term-skin ::-webkit-scrollbar-thumb { background: var(--term-dim); } body.term-skin ::-webkit-scrollbar-thumb:hover { background: var(--term-fg); } /* ── system-logs panel: terminal print-in effect + live cursor ──────── */ body.term-skin .log-display { font-family: var(--term-font); color: var(--term-fg); background: rgba(0,0,0,.32); border: 1px solid var(--term-line); border-radius: 4px; } body.term-skin .log-entry { font-family: var(--term-font); animation: term-log-in .22s ease-out; /* each line "prints" in */ } @keyframes term-log-in { from { opacity: 0; transform: translateX(-7px); text-shadow: 0 0 12px var(--term-fg); } to { opacity: 1; transform: none; } } body.term-skin .log-entry::before { color: var(--term-dim); } /* the [timestamp] */ body.term-skin .log-entry.info { color: var(--term-cyan); } body.term-skin .log-entry.error { color: var(--term-red); text-shadow: 0 0 6px color-mix(in srgb, var(--term-red) 45%, transparent); } body.term-skin .log-entry.system { color: var(--term-amber); } body.term-skin .log-entry.action { color: var(--term-fg); } body.term-skin .log-entry.apl { color: var(--term-cyan); } body.term-skin .log-entry.hotkey { color: var(--term-amber); } body.term-skin .log-entry.brand-green { color: var(--term-fg); } body.term-skin .log-entry.brand-blue { color: var(--term-cyan); } body.term-skin .log-display::after { content: "▮"; display: block; color: var(--term-fg); line-height: 1; animation: term-blink 1s steps(1) infinite; } /* ── colour-picker swatch in Settings (terminal style) ──────────────── */ body.term-skin input[type="color"] { -webkit-appearance: none; appearance: none; width: 34px; height: 22px; padding: 0; cursor: pointer; vertical-align: middle; background: transparent; border: 1px solid var(--term-line); border-radius: 3px; } body.term-skin input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; } body.term-skin input[type="color"]::-webkit-color-swatch { border: none; border-radius: 2px; } /* ── ACCESS GRANTED flash (login success) ──────────────────────────── */ .term-access { position: fixed; inset: 0; z-index: 11000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.82); animation: term-access-in .16s ease-out; } .term-access-text { font-family: var(--term-font); font-weight: 800; letter-spacing: .14em; font-size: clamp(28px, 7vw, 92px); color: var(--term-fg); text-align: center; text-shadow: 0 0 18px var(--term-fg), 0 0 52px color-mix(in srgb, var(--term-fg) 50%, transparent); animation: term-access-pulse 1s ease-in-out infinite; } .term-access.term-access-out { opacity: 0; transition: opacity .3s ease; } @keyframes term-access-in { from { opacity: 0; } to { opacity: 1; } } @keyframes term-access-pulse { 0%,100% { opacity: 1; } 50% { opacity: .68; } } /* ── reduced motion: kill flicker + blink ──────────────────────────── */ @media (prefers-reduced-motion: reduce) { .crt::before { animation: none; } .term-cursor { animation: none; } .term-beam { display: none; } .term-access-text { animation: none; } body.term-skin .log-entry { animation: none; } body.term-skin .log-display::after { animation: none; } body.term-skin .term-accent-fab { transition: none; } } /* ===================================================================== CYBER-DECK LAYER — "ethical hacking" card aesthetic (ref 2026-06-10) ===================================================================== */ body.term-skin { background: radial-gradient(90% 60% at 50% -8%, color-mix(in srgb, var(--term-fg) 12%, transparent), transparent 64%), radial-gradient(45% 45% at 100% 0%, color-mix(in srgb, var(--term-cyan) 7%, transparent), transparent 60%), var(--term-bg) !important; background-attachment: fixed !important; } body.term-skin .panel, body.term-skin .card, body.term-skin .feature-card, body.term-skin .download-card, body.term-skin .action-card, body.term-skin .status-card, body.term-skin .version-panel, body.term-skin .dashboard-section, body.term-skin .table-container, body.term-skin .term-card { position: relative; border-top: 1px solid color-mix(in srgb, var(--term-fg) 38%, transparent) !important; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } body.term-skin .panel:hover, body.term-skin .card:hover, body.term-skin .feature-card:hover, body.term-skin .download-card:hover, body.term-skin .action-card:hover { border-color: color-mix(in srgb, var(--term-fg) 55%, transparent) !important; box-shadow: inset 0 0 42px color-mix(in srgb, var(--term-fg) 7%, transparent), 0 0 0 1px color-mix(in srgb, var(--term-fg) 18%, transparent), 0 16px 44px rgba(0,0,0,.55) !important; } body.term-skin .panel::after, body.term-skin .card::after, body.term-skin .feature-card::after, body.term-skin .download-card::after, body.term-skin .action-card::after, body.term-skin .version-panel::after, body.term-skin .term-card::after { content: ""; position: absolute; inset: 7px; pointer-events: none; z-index: 1; --tk: color-mix(in srgb, var(--term-fg) 60%, transparent); background: linear-gradient(var(--tk), var(--tk)) 0 0 / 13px 1px no-repeat, linear-gradient(var(--tk), var(--tk)) 0 0 / 1px 13px no-repeat, linear-gradient(var(--tk), var(--tk)) 100% 0 / 13px 1px no-repeat, linear-gradient(var(--tk), var(--tk)) 100% 0 / 1px 13px no-repeat, linear-gradient(var(--tk), var(--tk)) 0 100% / 13px 1px no-repeat, linear-gradient(var(--tk), var(--tk)) 0 100% / 1px 13px no-repeat, linear-gradient(var(--tk), var(--tk)) 100% 100% / 13px 1px no-repeat, linear-gradient(var(--tk), var(--tk)) 100% 100% / 1px 13px no-repeat; } body.term-skin aside h1, body.term-skin .panel > h1, body.term-skin .nav-brand a, body.term-skin .term-grad { background: linear-gradient(110deg, var(--term-fg), var(--term-cyan) 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; } body.term-skin .panel > .label:first-child::before { content: ""; display: inline-block; width: 10px; height: 1px; vertical-align: middle; margin-right: 8px; background: var(--term-fg); box-shadow: 0 0 6px var(--term-fg); } .term-kicker { display: flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--term-font); font-size: 11px; font-weight: 600; letter-spacing: .36em; text-transform: uppercase; color: var(--term-dim); margin: 0 0 16px; text-shadow: none; } .term-kicker::before, .term-kicker::after { content: ""; height: 1px; width: clamp(28px, 8vw, 70px); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--term-fg) 50%, transparent)); } .term-kicker::after { transform: scaleX(-1); } .term-title { margin: 0 0 10px; text-align: center; letter-spacing: -.01em; line-height: 1.04; font-family: "Inter", system-ui, sans-serif; font-weight: 800; font-size: clamp(24px, 4.4vw, 46px); color: color-mix(in srgb, var(--term-fg) 16%, #f3fff6); text-shadow: none; } .term-title .hl { background: linear-gradient(110deg, var(--term-fg), var(--term-cyan) 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .term-subtitle { text-align: center; color: var(--term-dim); font-size: 13.5px; margin: 0 auto 26px; max-width: 62ch; line-height: 1.55; } .term-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--term-font); font-size: 10.5px; letter-spacing: .06em; text-transform: lowercase; color: var(--term-dim); border: 1px solid var(--term-line); border-radius: 3px; padding: 2px 7px; background: color-mix(in srgb, var(--term-fg) 4%, transparent); text-shadow: none; } .term-tag.is-on { color: var(--term-fg); border-color: color-mix(in srgb, var(--term-fg) 45%, transparent); } .term-tag.is-warn { color: var(--term-amber); border-color: color-mix(in srgb, var(--term-amber) 45%, transparent); } .term-tag.is-off { color: var(--term-red); border-color: color-mix(in srgb, var(--term-red) 45%, transparent); } .term-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 7px; font-family: var(--term-font); font-weight: 700; font-size: 12px; color: var(--term-fg); text-shadow: none; border: 1px solid color-mix(in srgb, var(--term-fg) 35%, transparent); background: radial-gradient(120% 120% at 30% 0%, color-mix(in srgb, var(--term-fg) 16%, transparent), transparent 70%), color-mix(in srgb, var(--term-fg) 7%, transparent); box-shadow: inset 0 0 14px color-mix(in srgb, var(--term-fg) 12%, transparent); } .term-legend { display: flex; align-items: center; justify-content: center; gap: 34px; flex-wrap: wrap; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--term-line); font-family: var(--term-font); font-size: 12px; color: var(--term-dim); } .term-legend b { color: var(--term-fg); font-weight: 600; } .term-accent-fab { position: fixed; right: 16px; bottom: 16px; z-index: 9500; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; background: linear-gradient(180deg, var(--term-bg-soft), var(--term-bg)); border: 1px solid var(--term-line); box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.6); font-family: var(--term-font); transition: box-shadow .15s ease, border-color .15s ease; } .term-accent-fab:hover { border-color: var(--term-fg); box-shadow: 0 0 16px color-mix(in srgb, var(--term-fg) 30%, transparent); } .term-accent-fab input[type="color"] { -webkit-appearance: none; appearance: none; width: 26px; height: 20px; padding: 0; cursor: pointer; vertical-align: middle; background: transparent; border: 1px solid var(--term-line); border-radius: 3px; } .term-accent-fab input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; } .term-accent-fab input[type="color"]::-webkit-color-swatch { border: none; border-radius: 2px; } .term-accent-fab button { background: transparent; color: var(--term-dim); border: 0; cursor: pointer; font-family: var(--term-font); font-size: 10.5px; letter-spacing: .08em; text-transform: lowercase; padding: 0 2px; } .term-accent-fab button:hover { color: var(--term-fg); text-shadow: var(--term-glow); } /* ── hidden 'ciao' easter-egg overlay (type: c i a o) ──────────────── */ #term-ciao { --term-fg: #33ff66; /* easter egg stays classic matrix-green regardless of accent */ position: fixed; inset: 0; z-index: 12000; overflow-x: hidden; overflow-y: auto; background: #020a04; color: var(--term-fg); font: 15px/1.5 var(--term-font); padding: 26px 30px; cursor: default; text-shadow: 0 0 4px rgba(51,255,102,.55), 0 0 12px rgba(51,255,102,.25); } #term-ciao .c-screen { white-space: pre-wrap; word-break: break-word; max-width: 1100px; margin: 0 auto; } #term-ciao .c-dim { color: var(--term-dim); } #term-ciao .c-amber { color: var(--term-amber); text-shadow: 0 0 6px rgba(255,176,0,.5); } #term-ciao .c-red { color: var(--term-red); text-shadow: 0 0 6px rgba(255,64,64,.6); } #term-ciao .c-strike { color: var(--term-dim); text-decoration: line-through; } #term-ciao .c-banner { color: var(--term-fg); font-weight: bold; text-shadow: 0 0 8px var(--term-fg), 0 0 22px color-mix(in srgb, var(--term-fg) 40%, transparent); } #term-ciao .c-cursor { display: inline-block; width: .6ch; height: 1.05em; background: var(--term-fg); vertical-align: -2px; margin-left: 1px; box-shadow: 0 0 8px var(--term-fg); animation: term-blink 1s steps(1) infinite; } #term-ciao::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px, rgba(0,0,0,.18) 4px); mix-blend-mode: multiply; } #term-ciao .c-hint { position: fixed; left: 0; right: 0; bottom: 10px; text-align: center; color: var(--term-dim); font-size: 12px; z-index: 3; } #term-ciao .c-pop { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5; font-size: 8vw; font-weight: bold; letter-spacing: .1em; background: rgba(0,0,0,.78); } #term-ciao .c-pop.grant { color: var(--term-fg); text-shadow: 0 0 24px var(--term-fg); } #term-ciao .c-pop.deny { color: var(--term-red); text-shadow: 0 0 24px var(--term-red); } /* ── server accent picker: the repurposed navbar "theme" button ────── */ body.term-skin .theme-menu { background: linear-gradient(180deg, var(--term-bg-soft), var(--term-bg)) !important; border: 1px solid var(--term-line) !important; border-radius: 4px !important; color: var(--term-fg) !important; padding: 12px !important; min-width: 210px !important; box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 14px 40px rgba(0,0,0,.65) !important; } body.term-skin .accent-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; cursor: pointer; font-family: var(--term-font); font-size: 12px; color: var(--term-fg); text-shadow: none; } body.term-skin .accent-row input[type="color"] { -webkit-appearance: none; appearance: none; width: 30px; height: 22px; padding: 0; border: 1px solid var(--term-line); border-radius: 3px; background: transparent; cursor: pointer; } body.term-skin .accent-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; } body.term-skin .accent-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 2px; } body.term-skin .accent-reset { width: 100%; background: transparent; color: var(--term-dim); border: 1px solid var(--term-line); border-radius: 3px; padding: 7px; font-family: var(--term-font); font-size: 11px; letter-spacing: .06em; text-transform: lowercase; cursor: pointer; transition: color .12s, border-color .12s; } body.term-skin .accent-reset:hover { color: var(--term-fg); border-color: var(--term-fg); text-shadow: var(--term-glow); }