/* ============================================================ Brian theme overrides — selected via [data-theme="..."] on . Cookie is read in layoutTop.php / themes.js. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&family=Orbitron:wght@400;600;700&display=swap'); /* Theme switcher — positioned at the top-right of the PAGE (scrolls away with the breadcrumbs, not sticky to the viewport) */ .brian-theme-switcher { position: absolute !important; top: 6px; right: 14px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px; background: rgba(0,0,0,0.78); border: 1px solid var(--brand); border-radius: var(--radius-sm); box-shadow: 0 4px 16px -4px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset; backdrop-filter: blur(6px); } .brian-theme-switcher label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--brand); font-family: 'JetBrains Mono', monospace; cursor: pointer; } .brian-theme-switcher select { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; outline: none; transition: border-color 0.15s, box-shadow 0.15s; width: auto; } .brian-theme-switcher select:focus, .brian-theme-switcher select:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); } /* Tablet / narrow widths: drop the absolute positioning so the switcher flows inline with the breadcrumbs (and wraps onto a second line if there isn't room) instead of overlapping them. */ @media (max-width: 1024px) { .brian-theme-switcher { position: relative !important; top: auto !important; right: auto !important; margin: 4px 4px 4px 8px; vertical-align: middle; } } /* ============================================================ HACKERMAN — clean cybernetic technolust Tron / Mr. Robot / Ghost-in-the-Shell crispness ============================================================ */ :root[data-theme="hackerman"] { --bg: #000810; --bg-grad: radial-gradient(1400px 700px at 80% -10%, rgba(0,217,255,0.10), transparent 60%), radial-gradient(1000px 500px at -10% 110%, rgba(255,42,212,0.06), transparent 60%); --surface: #04101a; --surface-2: #071a28; --border: #102838; --border-strong: #1a3a52; --brand: #00d9ff; --brand-lt: #66ecff; --brand-soft: rgba(0,217,255,0.14); --text: #d8f4ff; --muted: #5c7e92; --ok: #00ff9c; --err: #ff2bd6; --live: #00d9ff; --wait: #ffd166; --idle: #5c7e92; --shadow: 0 1px 0 rgba(0,217,255,0.08) inset, 0 20px 60px -20px rgba(0,217,255,0.30); } :root[data-theme="hackerman"] body { font-family: 'JetBrains Mono', 'Share Tech Mono', monospace; background-image: var(--bg-grad), linear-gradient(rgba(0,217,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,217,255,0.04) 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; background-attachment: fixed; } /* CRT scanline overlay */ :root[data-theme="hackerman"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: repeating-linear-gradient( 0deg, rgba(0,217,255,0.03) 0, rgba(0,217,255,0.03) 1px, transparent 1px, transparent 3px ); mix-blend-mode: screen; } :root[data-theme="hackerman"] .topbar h1 { font-family: 'Orbitron', 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand); text-shadow: 0 0 12px rgba(0,217,255,0.5), 0 0 28px rgba(0,217,255,0.25); } :root[data-theme="hackerman"] .topbar .subtitle::after { content: ' ▮'; color: var(--brand); animation: hackermanBlink 1s steps(2, end) infinite; } @keyframes hackermanBlink { 50% { opacity: 0; } } :root[data-theme="hackerman"] .tag { border: 1px solid var(--brand); color: var(--brand); background: rgba(0,217,255,0.08); text-shadow: 0 0 6px rgba(0,217,255,0.6); } :root[data-theme="hackerman"] .tag::before { content: '>_'; margin-right: 6px; font-family: 'JetBrains Mono', monospace; opacity: 0.85; } :root[data-theme="hackerman"] .card { background: linear-gradient(180deg, rgba(0,217,255,0.025), transparent 30%), var(--surface); box-shadow: var(--shadow), inset 0 0 0 1px rgba(0,217,255,0.04); } :root[data-theme="hackerman"] .card::before { display: none; } :root[data-theme="hackerman"] .card-header { color: var(--brand); letter-spacing: 0.16em; border-bottom-color: rgba(0,217,255,0.20); } :root[data-theme="hackerman"] .btn-primary { background: linear-gradient(180deg, #66ecff 0%, #00d9ff 100%); color: #000; border-color: #00d9ff; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; box-shadow: 0 0 12px rgba(0,217,255,0.4); } :root[data-theme="hackerman"] .btn-primary:hover:not(:disabled) { box-shadow: 0 8px 28px -4px rgba(0,217,255,0.7), 0 0 18px rgba(0,217,255,0.5); } :root[data-theme="hackerman"] .pill { font-family: 'JetBrains Mono', monospace; } :root[data-theme="hackerman"] .pill.proc { color: #ff2bd6; border-color: rgba(255,43,214,0.5); background: rgba(255,43,214,0.10); } :root[data-theme="hackerman"] body > a { font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.1em; color: #9fdbf0; } :root[data-theme="hackerman"] body > a:hover { color: var(--brand); text-shadow: 0 0 8px rgba(0,217,255,0.7); } /* ============================================================ FALLOUT NV — Pip-Boy amber CRT, wasteland iconography ============================================================ */ :root[data-theme="falloutnv"] { --bg: #110a04; --bg-grad: radial-gradient(1200px 600px at 50% 100%, rgba(255,140,40,0.18), transparent 60%), radial-gradient(800px 400px at 10% 10%, rgba(255,182,65,0.05), transparent 60%); --surface: #1b1208; --surface-2: #261a0c; --border: #4a3418; --border-strong: #6e4d24; --brand: #ffb641; --brand-lt: #ffd070; --brand-soft: rgba(255,182,65,0.15); --text: #ffcb83; --muted: #8c6d3d; --ok: #c8e360; --err: #ff6a3d; --live: #ffd070; --wait: #ff9a3d; --idle: #6e562c; --radius: 0px; --radius-sm: 0px; --shadow: 0 1px 0 rgba(255,182,65,0.10) inset, 0 20px 60px -20px rgba(0,0,0,0.9); } :root[data-theme="falloutnv"] { background: #0a0602; } :root[data-theme="falloutnv"] body { font-family: 'VT323', 'Courier New', monospace; font-size: 17px; color: var(--text); text-shadow: 0 0 2px rgba(255,182,65,0.35); /* No CRT scanlines / vignette — image content stays unmodified. */ } :root[data-theme="falloutnv"] .topbar h1 { font-family: 'VT323', monospace; font-size: 38px; color: var(--brand); text-transform: uppercase; letter-spacing: 0.06em; text-shadow: 0 0 8px rgba(255,182,65,0.55), 0 0 18px rgba(255,140,40,0.30); } :root[data-theme="falloutnv"] .topbar h1::before { content: 'VAULT-TEC '; font-size: 14px; color: var(--muted); letter-spacing: 0.2em; display: block; margin-bottom: -4px; } :root[data-theme="falloutnv"] .topbar .subtitle { color: var(--brand); opacity: 0.7; } :root[data-theme="falloutnv"] .tag { font-family: 'VT323', monospace; font-size: 14px; border: 1px solid var(--brand); color: var(--brand); background: rgba(255,182,65,0.10); border-radius: 0; letter-spacing: 0.08em; padding: 4px 12px; } :root[data-theme="falloutnv"] .tag::before { content: '☢'; margin-right: 6px; display: inline-block; animation: falloutPulse 2.2s ease-in-out infinite; } @keyframes falloutPulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); text-shadow: 0 0 10px var(--brand); } } :root[data-theme="falloutnv"] .card, :root[data-theme="falloutnv"] .modal-card, :root[data-theme="falloutnv"] .progress-card, :root[data-theme="falloutnv"] input[type=text], :root[data-theme="falloutnv"] input[type=number], :root[data-theme="falloutnv"] select, :root[data-theme="falloutnv"] .btn, :root[data-theme="falloutnv"] .pill { border-radius: 0; } :root[data-theme="falloutnv"] .card-header { font-family: 'VT323', monospace; font-size: 14px; color: var(--brand); letter-spacing: 0.18em; background: linear-gradient(180deg, rgba(255,182,65,0.10), rgba(255,182,65,0.02)); border-bottom: 1px solid var(--brand); } :root[data-theme="falloutnv"] .btn { font-family: 'VT323', monospace; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); background: rgba(255,182,65,0.06); border-color: var(--brand); } :root[data-theme="falloutnv"] .btn:hover:not(:disabled) { background: rgba(255,182,65,0.18); box-shadow: inset 0 0 0 1px var(--brand); } :root[data-theme="falloutnv"] .btn-primary { background: linear-gradient(180deg, #ffd070 0%, #ffb641 100%); color: #1a0f05; font-weight: 700; text-shadow: none; border: 1px solid #ffb641; box-shadow: 0 0 12px rgba(255,182,65,0.45); } :root[data-theme="falloutnv"] .btn-primary:hover:not(:disabled) { box-shadow: 0 8px 28px -4px rgba(255,182,65,0.6); } :root[data-theme="falloutnv"] .pill { font-family: 'VT323', monospace; font-size: 13px; letter-spacing: 0.08em; } :root[data-theme="falloutnv"] body > a { font-family: 'VT323', monospace; font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; color: #ffcb83; text-shadow: 0 0 4px rgba(255,182,65,0.4); } :root[data-theme="falloutnv"] body > a:hover { color: var(--brand); text-shadow: 0 0 8px rgba(255,182,65,0.7); background: transparent; } /* Wasteland decoration on the right of the topbar — bottle cap */ :root[data-theme="falloutnv"] .topbar::after { content: '⚙'; position: absolute; right: 12px; top: 8px; font-size: 22px; color: var(--brand); opacity: 0.55; animation: falloutSpin 18s linear infinite; } :root[data-theme="falloutnv"] .topbar { position: relative; } @keyframes falloutSpin { to { transform: rotate(360deg); } } /* ============================================================ MATRIX — phosphor green rain ============================================================ */ :root[data-theme="matrix"] { --bg: #000000; --bg-grad: none; --surface: rgba(0,18,4,0.78); --surface-2: rgba(0,30,8,0.78); --border: rgba(0,255,65,0.20); --border-strong: rgba(0,255,65,0.40); --brand: #00ff41; --brand-lt: #66ff85; --brand-soft: rgba(0,255,65,0.14); --text: #00ff41; --muted: #2f8a4a; --ok: #00ff41; --err: #ff3a3a; --live: #88ffaa; --wait: #d6ff00; --idle: #2f8a4a; --shadow: 0 1px 0 rgba(0,255,65,0.08) inset, 0 20px 60px -20px rgba(0,0,0,0.95); } :root[data-theme="matrix"] { background: #000; } :root[data-theme="matrix"] body { background: transparent; font-family: 'Share Tech Mono', 'JetBrains Mono', monospace; color: var(--brand); text-shadow: 0 0 4px rgba(0,255,65,0.55); } #brianMatrixCanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; background: #000; } :root[data-theme="matrix"] .app, :root[data-theme="matrix"] body > a, :root[data-theme="matrix"] .brian-theme-switcher { position: relative; z-index: 2; } :root[data-theme="matrix"] .topbar h1 { font-family: 'Share Tech Mono', monospace; font-weight: 400; letter-spacing: 0.06em; color: var(--brand); text-shadow: 0 0 8px rgba(0,255,65,0.7), 0 0 22px rgba(0,255,65,0.35); } :root[data-theme="matrix"] .topbar h1::after { content: '_'; margin-left: 6px; animation: matrixBlink 1.1s steps(2, end) infinite; } @keyframes matrixBlink { 50% { opacity: 0; } } :root[data-theme="matrix"] .tag { border: 1px solid var(--brand); background: rgba(0,255,65,0.08); color: var(--brand); text-shadow: 0 0 4px rgba(0,255,65,0.6); font-family: 'Share Tech Mono', monospace; } :root[data-theme="matrix"] .tag::before { content: '◉ '; } :root[data-theme="matrix"] .card { background: var(--surface); backdrop-filter: blur(2px); border-color: var(--border); } :root[data-theme="matrix"] .card-header { color: var(--brand); background: rgba(0,30,8,0.6); border-bottom-color: rgba(0,255,65,0.20); } :root[data-theme="matrix"] .btn-primary { background: linear-gradient(180deg, #66ff85 0%, #00ff41 100%); color: #000; border-color: #00ff41; font-weight: 700; letter-spacing: 0.08em; box-shadow: 0 0 12px rgba(0,255,65,0.5); } :root[data-theme="matrix"] .btn-primary:hover:not(:disabled) { box-shadow: 0 8px 28px -4px rgba(0,255,65,0.7); } :root[data-theme="matrix"] .btn { font-family: 'Share Tech Mono', monospace; } :root[data-theme="matrix"] .pill { font-family: 'Share Tech Mono', monospace; } :root[data-theme="matrix"] input[type=text], :root[data-theme="matrix"] input[type=number], :root[data-theme="matrix"] select { background: rgba(0,12,4,0.85); color: var(--brand); border-color: var(--border-strong); } :root[data-theme="matrix"] body > a { font-family: 'Share Tech Mono', monospace; letter-spacing: 0.08em; color: #00ff41; background: rgba(0,0,0,0.75); border: 1px solid rgba(0,255,65,0.30); text-shadow: 0 0 6px rgba(0,255,65,0.7), 0 0 2px #000; } :root[data-theme="matrix"] body > a:hover { color: #b6ffc7; background: rgba(0,40,10,0.85); border-color: rgba(0,255,65,0.7); text-shadow: 0 0 12px rgba(0,255,65,0.9), 0 0 2px #000; } /* ============================================================ Tablet/mobile (≤ 1024px): tighten breadcrumb spacing + shrink the theme switcher so links + selector fit on a single line for every theme. Themed fonts (VT323, Share Tech Mono) and letter-spacing make breadcrumbs noticeably wider than default — without this they wrap to a second line on tablets. Placed at the end of the file so it overrides earlier theme-specific rules via source order. ============================================================ */ @media (max-width: 1024px) { body > a { padding: 4px 6px; margin: 2px 0; font-size: 12px; } :root[data-theme="hackerman"] body > a, :root[data-theme="matrix"] body > a { letter-spacing: 0.04em; } :root[data-theme="falloutnv"] body > a { font-size: 15px; letter-spacing: 0.04em; padding: 2px 5px; } .brian-theme-switcher { padding: 3px 6px; } .brian-theme-switcher label { display: none; } .brian-theme-switcher select { padding: 3px 8px; font-size: 11px; } }