/** * AIverse Theme — Shared dark-mode shell for games & playgrounds. * * Adds the dark deep-space background, starfield, a top navigation bar * with AIverse branding, and constellation cross-link panels so every * page feels like part of the AIverse star map. * * Activation: * * Does NOT override any game-specific layouts or controls. * Layers on top of existing tokens.css → style.css → layout.css chain. * * @version 1.0 * @author Alexander Wolf */ /* ========================================================= 0. THEME TOKENS (scoped to .aiverse-theme) ========================================================= */ .aiverse-theme { --aiv-bg: #060612; --aiv-surface: rgba(20, 18, 40, 0.65); --aiv-surface-solid: #0f0d24; --aiv-text: #e8e0f0; --aiv-text-muted: #a492c9; --aiv-purple: #5b13ec; --aiv-cyan: #00e5ff; --aiv-orange: #ff6b35; --aiv-glass-bg: rgba(20, 18, 40, 0.55); --aiv-glass-border: rgba(255, 255, 255, 0.08); --aiv-radius: 12px; /* Cluster colours (duplicated from landing for independence) */ --cluster-games: #e67e22; --cluster-playground: #3498db; --cluster-learn: #2ecc71; --cluster-challenge: #e74c3c; } /* ========================================================= 1. BODY & BACKGROUND OVERRIDES ========================================================= */ .aiverse-theme { background: var(--aiv-bg) !important; color: var(--aiv-text); } /* Override base token vars so existing components inherit dark colours */ .aiverse-theme { --bg-color: var(--aiv-bg); --color-bg: var(--aiv-bg); --color-bg-light: #0f0d24; --color-surface: rgba(20, 18, 40, 0.75); --color-text: var(--aiv-text); --text-main: var(--aiv-text); --text-muted: var(--aiv-text-muted); --color-text-muted: var(--aiv-text-muted); --color-border: rgba(255, 255, 255, 0.1); --color-border-light: rgba(255, 255, 255, 0.06); --color-shadow: rgba(0, 0, 0, 0.4); --color-sidebar-header: rgba(15, 13, 36, 0.95); --glass-bg: rgba(20, 18, 40, 0.85); } /* ========================================================= 2. STARFIELD (reuse landing classes) ========================================================= */ .aiverse-theme .starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .aiverse-theme .starfield__layer { position: absolute; inset: 0; } .aiverse-theme .starfield__star { position: absolute; border-radius: 50%; background: #fff; } .aiverse-theme .starfield__star--sm { width: 1px; height: 1px; opacity: 0.4; } .aiverse-theme .starfield__star--md { width: 2px; height: 2px; opacity: 0.6; } .aiverse-theme .starfield__star--lg { width: 3px; height: 3px; opacity: 0.8; } .aiverse-theme .starfield__star--twinkle { animation: aiv-twinkle 3s ease-in-out infinite alternate; } @keyframes aiv-twinkle { 0% { opacity: 0.2; } 100% { opacity: 1; } } /* ========================================================= 3. SIDEBAR / HEADER DARK OVERRIDES ========================================================= */ /* viewport-split sidebar */ .aiverse-theme.viewport-split .sidebar { background: var(--aiv-surface-solid); border-right-color: rgba(255, 255, 255, 0.06); box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5); } .aiverse-theme.viewport-split .sidebar-header { background: rgba(15, 13, 36, 0.95); } .aiverse-theme.viewport-split .sidebar-content { color: var(--aiv-text); } /* Control sections within sidebar */ .aiverse-theme .control-section { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); } /* Select & input dark overrides */ .aiverse-theme .viz-select, .aiverse-theme .viz-input { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: var(--aiv-text); } .aiverse-theme .viz-select option { background: #0f0d24; color: var(--aiv-text); } .aiverse-theme .viz-label { color: var(--aiv-text-muted); } /* viewport-split game area */ .aiverse-theme.viewport-split .game-area { background: transparent; position: relative; z-index: 1; } /* Canvas inside dark theme */ .aiverse-theme canvas { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } /* ========================================================= 4. VIEWPORT-FULL (Playground) DARK OVERRIDES ========================================================= */ .aiverse-theme.viewport-full .nav-header, .aiverse-theme.viewport-full .lab-toolbar { background: rgba(15, 13, 36, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .aiverse-theme.viewport-full .viz-toolbar { background: rgba(15, 13, 36, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: var(--aiv-text); } .aiverse-theme.viewport-full .viz-toolbar--dark { background: rgba(15, 13, 36, 0.95); } /* General text in viewport-full */ .aiverse-theme.viewport-full h1, .aiverse-theme.viewport-full .nav-header h1 { color: #fff; } .aiverse-theme.viewport-full .lab-toolbar a, .aiverse-theme.viewport-full .lab-toolbar label, .aiverse-theme.viewport-full .lab-toolbar small { color: var(--aiv-text); } /* Lab grid & content panels */ .aiverse-theme .lab-grid { background: transparent; position: relative; z-index: 1; } .aiverse-theme .game-board, .aiverse-theme .col-game { position: relative; z-index: 1; } /* Main layout / split container */ .aiverse-theme .main-layout, .aiverse-theme .split-container { position: relative; z-index: 1; } /* Viz container (iframe wrapper) */ .aiverse-theme .viz-container { position: relative; z-index: 1; } /* Status / log text */ .aiverse-theme .log-entry { color: var(--aiv-text-muted); border-bottom-color: rgba(255, 255, 255, 0.06); } .aiverse-theme #statusText { color: var(--aiv-text); } /* Inline-style overrides for game pages with hardcoded light backgrounds */ .aiverse-theme .game-area > div[style*="background"] { background: rgba(20, 18, 40, 0.6) !important; color: var(--aiv-text) !important; border: 1px solid var(--aiv-glass-border) !important; } .aiverse-theme #isoCanvas { border-color: rgba(255, 255, 255, 0.12) !important; } /* Hint text on dark background */ .aiverse-theme .game-area p[style*="color"] { color: var(--aiv-text-muted) !important; } /* Info boxes within sidebar */ .aiverse-theme .sidebar-content div[style*="color:#7f8c8d"] { color: var(--aiv-text-muted) !important; } /* ========================================================= 5. SCROLL-MENU (Game Menus) DARK OVERRIDES ========================================================= */ .aiverse-theme.scroll-menu { position: relative; } .aiverse-theme .menu-container { position: relative; z-index: 1; } .aiverse-theme .menu-container h1 { color: #fff; } .aiverse-theme .game-card { background: var(--aiv-glass-bg); border: 1px solid var(--aiv-glass-border); backdrop-filter: blur(12px); color: var(--aiv-text); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); } .aiverse-theme .game-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.15); } .aiverse-theme .game-card h2 { color: #fff; } .aiverse-theme .game-card .tag { background: rgba(91, 19, 236, 0.2); color: var(--aiv-cyan); } /* Back button for dark menus */ .aiverse-theme.scroll-menu .btn-back { color: var(--aiv-text-muted); border-color: rgba(255, 255, 255, 0.2); background: transparent; } .aiverse-theme.scroll-menu .btn-back:hover { color: #fff; border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.05); } /* ========================================================= 6. CONSTELLATION CROSS-LINKS PANEL ========================================================= */ .aiv-crosslinks { position: relative; z-index: 1; margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--aiv-glass-bg); border: 1px solid var(--aiv-glass-border); backdrop-filter: blur(12px); border-radius: var(--aiv-radius); } .aiv-crosslinks__title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--aiv-text-muted); margin: 0 0 0.75rem; font-weight: 600; } .aiv-crosslinks__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .aiv-crosslinks__link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; text-decoration: none; color: var(--aiv-text); border-radius: 8px; font-size: 0.88rem; transition: background 0.2s, color 0.2s; } .aiv-crosslinks__link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .aiv-crosslinks__link-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .aiv-crosslinks__link-dot--games { background: var(--cluster-games); } .aiv-crosslinks__link-dot--playground { background: var(--cluster-playground); } .aiv-crosslinks__link-dot--learn { background: var(--cluster-learn); } .aiv-crosslinks__link-dot--challenge { background: var(--cluster-challenge); } .aiv-crosslinks__link-label { flex: 1; } .aiv-crosslinks__link-arrow { color: var(--aiv-text-muted); font-size: 1rem; transition: transform 0.2s; } .aiv-crosslinks__link:hover .aiv-crosslinks__link-arrow { transform: translateX(3px); color: #fff; } /* Inline crosslinks for viewport-split pages (inside sidebar) */ .aiverse-theme .sidebar-content .aiv-crosslinks { margin-top: auto; padding: 0.75rem 0; background: none; border: none; border-top: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: none; border-radius: 0; } /* Inline crosslinks for viewport-full pages (below toolbar) */ .aiverse-theme .aiv-crosslinks--toolbar { position: absolute; top: 100%; right: 0; width: 280px; margin: 0; border-radius: 0 0 var(--aiv-radius) var(--aiv-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); transform: translateY(-4px); opacity: 0; visibility: hidden; transition: opacity 0.25s, transform 0.25s, visibility 0.25s; } .aiv-crosslinks--toolbar.aiv-crosslinks--open { opacity: 1; visibility: visible; transform: translateY(0); } /* Fixed bottom-bar cross-links for viewport-full & lab pages */ .aiv-crosslinks--bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 1rem; background: rgba(6, 6, 18, 0.92); backdrop-filter: blur(10px); border-top: 1px solid var(--aiv-glass-border); z-index: 200; flex-wrap: wrap; } .aiv-crosslinks--bar .aiv-crosslinks__title { margin: 0; font-size: 0.7rem; white-space: nowrap; } .aiv-crosslinks--bar .aiv-crosslinks__link { padding: 0.25rem 0.5rem; font-size: 0.8rem; } /* ========================================================= 7. BUTTONS INSIDE DARK THEME ========================================================= */ .aiverse-theme .primary-btn, .aiverse-theme .btn-action { background: linear-gradient(135deg, var(--aiv-purple), #8b5cf6); color: #fff; box-shadow: 0 4px 16px rgba(91, 19, 236, 0.3); } .aiverse-theme .primary-btn:hover, .aiverse-theme .btn-action:hover { filter: brightness(1.1); } .aiverse-theme .btn-restart { background: rgba(241, 196, 15, 0.15); border: 1px solid rgba(241, 196, 15, 0.3); color: #f1c40f; } .aiverse-theme .btn-danger { background: rgba(231, 76, 60, 0.15); border: 1px solid rgba(231, 76, 60, 0.3); color: #e74c3c; } /* ========================================================= 8. STATS & MISC OVERRIDES ========================================================= */ .aiverse-theme .stats-display { color: var(--aiv-text); } .aiverse-theme .col-tree { background: rgba(20, 18, 40, 0.75); border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } .aiverse-theme .panel-header { background: rgba(15, 13, 36, 0.85); border-bottom-color: rgba(255, 255, 255, 0.06); color: #fff; } /* Knights tour specific */ .aiverse-theme .knights-tour .cell { border-color: rgba(255, 255, 255, 0.12); } /* ========================================================= 9. RESPONSIVE ========================================================= */ @media (max-width: 768px) { .aiv-crosslinks--toolbar { width: 100%; right: 0; border-radius: 0; } .aiverse-theme .sidebar-content .aiv-crosslinks { padding: 0.5rem 0; } }