/* Gaming / Esports theme swatch — based on ggprompts.com/styles/gaming-esports.html Toggled via [data-theme="gaming"] on (see theme-switcher.js). Inert unless that attribute is set, so this file can always be linked in . */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Rajdhani:wght@600;700&family=Exo+2:wght@400;500;600;700&display=swap'); :root[data-theme="gaming"] { --bg: #0a0a0f; --surface: #10101a; --surface-raised: #171726; --border: #2a2a45; --text: #eef2ff; --text-muted: #8888ad; --accent: #00f0ff; --accent-dim: #00f0ff26; --success: #00ff66; --success-dim: #00ff6622; --danger: #ff00aa; --danger-dim: #ff00aa22; --blocked: #aa00ff; --radius: 2px; --mono: 'Rajdhani', var(--mono); --display: 'Orbitron', sans-serif; --body: 'Exo 2', sans-serif; } /* Angular corner-cut, used on buttons/cards/panels throughout */ [data-theme="gaming"] .btn, [data-theme="gaming"] .card, [data-theme="gaming"] .stat, [data-theme="gaming"] .day-entry-card, [data-theme="gaming"] .week-day-col, [data-theme="gaming"] dialog { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); border-radius: 0; } [data-theme="gaming"] body { background: linear-gradient(180deg, rgba(0,240,255,0.04), transparent 200px), var(--bg); } /* --- Sidebar: neon edge, glowing active state --- */ [data-theme="gaming"] .sidebar { background: linear-gradient(180deg, #12121e 0%, #0a0a0f 100%); border-right: 1px solid var(--accent); box-shadow: 0 0 24px -4px var(--accent-dim); } [data-theme="gaming"] .brand { font-family: var(--display); letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 0 0 12px var(--accent-dim); } [data-theme="gaming"] .nav-link { text-transform: uppercase; font-family: var(--mono); font-weight: 600; letter-spacing: 0.04em; font-size: 12.5px; border-left: 2px solid transparent; } [data-theme="gaming"] .nav-link:hover { border-left-color: var(--accent); text-shadow: 0 0 8px var(--accent-dim); } [data-theme="gaming"] .nav-link.active { border-left-color: var(--accent); box-shadow: inset 0 0 16px -8px var(--accent); } /* --- Titles --- */ [data-theme="gaming"] .page-title { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.03em; text-shadow: 0 0 16px var(--accent-dim); } [data-theme="gaming"] .page-subtitle { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.05em; font-size: 11.5px; } /* --- Cards / stat tiles: gradient top stripe + glow border --- */ [data-theme="gaming"] .card, [data-theme="gaming"] .stat, [data-theme="gaming"] .day-entry-card, [data-theme="gaming"] .week-day-col { position: relative; border-color: var(--border); box-shadow: 0 0 0 1px #000, 0 4px 20px -8px var(--accent-dim); } [data-theme="gaming"] .card::before, [data-theme="gaming"] .stat::before, [data-theme="gaming"] .week-day-col::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--blocked), var(--success)); } [data-theme="gaming"] .stat-value { font-family: var(--display); text-shadow: 0 0 10px var(--accent-dim); } /* --- Buttons: RGB glow on hover --- */ [data-theme="gaming"] .btn { font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; border-color: var(--border); background: var(--surface-raised); transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } [data-theme="gaming"] .btn:hover { border-color: var(--accent); box-shadow: 0 0 16px -2px var(--accent), inset 0 0 12px -6px var(--accent); color: var(--accent); } [data-theme="gaming"] .btn-primary { background: linear-gradient(135deg, var(--accent), var(--blocked)); border-color: transparent; color: #05050a; text-shadow: none; } [data-theme="gaming"] .btn-primary:hover { box-shadow: 0 0 24px -2px var(--accent); } [data-theme="gaming"] .btn-danger { color: var(--danger); } [data-theme="gaming"] .btn-danger:hover { border-color: var(--danger); box-shadow: 0 0 16px -2px var(--danger); color: var(--danger); } /* --- Inputs: neon focus ring --- */ [data-theme="gaming"] input, [data-theme="gaming"] select, [data-theme="gaming"] textarea { background: #0d0d16; border-color: var(--border); font-family: var(--body); } [data-theme="gaming"] .btn:focus-visible, [data-theme="gaming"] a:focus-visible, [data-theme="gaming"] input:focus-visible, [data-theme="gaming"] select:focus-visible, [data-theme="gaming"] textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim), 0 0 16px -4px var(--accent); } /* --- Table headers --- */ [data-theme="gaming"] th { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; color: var(--accent); border-bottom: 1px solid var(--accent-dim); } /* --- Calendar day cells: HUD-style selected/today states --- */ [data-theme="gaming"] .calendar-day.is-today { border-color: var(--accent); box-shadow: 0 0 10px -2px var(--accent); } [data-theme="gaming"] .calendar-day.is-selected { background: linear-gradient(135deg, var(--accent), var(--blocked)); color: #05050a; box-shadow: 0 0 18px -2px var(--accent); } [data-theme="gaming"] .calendar-day.has-time:not(.is-selected)::after { background: var(--accent); box-shadow: 0 0 6px var(--accent); } /* --- Ticket key chips --- */ [data-theme="gaming"] .ticket-key { font-family: var(--mono); font-weight: 700; color: var(--accent); text-shadow: 0 0 6px var(--accent-dim); }