/* ========================================================================== A-NET ONLINE — full re-skin of webv4 Auto-loaded by root/index.xjs when this file exists. Loaded LAST, after bootstrap.min.css, offcanvas.css, style.css, checkbox.css. Targets BS3 markup directly so unmodified stock pages also re-skin. ========================================================================== */ /* ========================================================================== THEME SYSTEM The site supports two themes selected via an `html.theme-*` class: theme-underground (DEFAULT) — gritty street/comic vibe; warm dark palette with orange-red primary, amber-gold accent, deep red highlight. Inspired by A-Net's underground BBS art and street typography. theme-neon — clean cyberpunk; cool dark palette with neon teal/green/purple. Original re-skin. anet-enhance.js applies the saved theme class on before first paint (FOUC-free). All color/glow/shadow values come from CSS variables — every downstream rule (button, hero, sidebar, gallery, etc.) automatically swaps. To add a new theme: add another `html.theme-NAME { ... }` block redefining the variables. ========================================================================== */ /* Shared structural tokens */ :root { --anet-radius: 14px; --anet-radius-sm: 9px; --anet-font-display: 'Inter', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif; --anet-font-mono: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', Menlo, Consolas, monospace; --anet-font-display-bold-stack: 'Bebas Neue', 'Oswald', 'Impact', var(--anet-font-display); } /* ============== THEME: UNDERGROUND (default) ============== */ :root, html.theme-underground { --anet-bg-0: #0d0604; --anet-bg-1: #160a05; --anet-bg-2: #1f0e07; --anet-card-1: #1f100a; --anet-card-2: #2a160c; --anet-card-3: #3d1f0f; --anet-line: rgba(255, 107, 53, 0.20); --anet-line-strong: rgba(255, 107, 53, 0.42); --anet-text: #f4ead0; --anet-text-dim: #c4a878; --anet-text-muted: #8a7050; --anet-cyan: #ff6b35; /* PRIMARY — warm orange-red */ --anet-green: #ffb627; /* SECONDARY — amber gold */ --anet-purple: #c8102e; /* TERTIARY — deep red */ --anet-pink: #ffd166; /* ACCENT — soft yellow */ --anet-yellow: #ffce47; /* warning yellow */ /* Theme-specific: sub-tone gradients used in hero/cards */ --anet-grad-bg-a: rgba(255, 107, 53, 0.08); --anet-grad-bg-b: rgba(200, 16, 46, 0.10); --anet-grad-bg-c: linear-gradient(180deg, #0a0403 0%, #100604 40%, #100604 100%); --anet-grad-card: linear-gradient(160deg, #1f100a 0%, #2a160c 100%); --anet-grad-hero: linear-gradient(160deg, #1a0907 0%, #2a160c 50%, #3d1f0f 100%); --anet-grad-hero-glow-a: radial-gradient(800px 320px at 80% 0%, rgba(255,107,53,0.22), transparent 60%); --anet-grad-hero-glow-b: radial-gradient(640px 320px at 0% 100%, rgba(200,16,46,0.18), transparent 60%); --anet-grad-primary-btn: linear-gradient(135deg, #ff6b35 0%, #c8102e 100%); --anet-grad-primary-btn-hover: linear-gradient(135deg, #ff8a5c 0%, #e1374a 100%); --anet-grad-pixel-logo: linear-gradient(180deg, #ffd166 0%, #ff6b35 50%, #c8102e 100%); --anet-shadow-glow: 0 0 24px rgba(255, 107, 53, 0.22), 0 6px 30px rgba(0, 0, 0, 0.65); /* Heading style preference for this theme — bigger, blockier */ --anet-heading-tracking: 0.02em; --anet-heading-transform: none; } /* Underground gets a faint grit overlay on the body for street/comic vibe. Falls through unmodified to neon if it's not the active theme. */ html.theme-underground body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.35; mix-blend-mode: overlay; background-image: radial-gradient(circle at 20% 30%, rgba(255, 107, 53, 0.10), transparent 50%), radial-gradient(circle at 80% 70%, rgba(200, 16, 46, 0.08), transparent 50%); } /* ============== THEME: NEON (alternate) ============== */ html.theme-neon { --anet-bg-0: #08090f; --anet-bg-1: #0c0e18; --anet-bg-2: #11142a; --anet-card-1: #1a1d2e; --anet-card-2: #1f2147; --anet-card-3: #2a2d6e; --anet-line: rgba(0, 255, 234, 0.14); --anet-line-strong: rgba(0, 255, 234, 0.32); --anet-text: #e7ecf3; --anet-text-dim: #9aa3c4; --anet-text-muted: #6f7895; --anet-cyan: #00ffea; /* PRIMARY */ --anet-green: #39ff14; /* SECONDARY */ --anet-purple: #b56cff; /* TERTIARY */ --anet-pink: #ff4fa3; /* ACCENT */ --anet-yellow: #ffd166; --anet-grad-bg-a: rgba(0, 255, 234, 0.06); --anet-grad-bg-b: rgba(181, 108, 255, 0.06); --anet-grad-bg-c: linear-gradient(180deg, #06070d 0%, #0a0c1a 40%, #0a0c1a 100%); --anet-grad-card: linear-gradient(160deg, #1a1d2e 0%, #1f2147 100%); --anet-grad-hero: linear-gradient(160deg, #0d1124 0%, #14183a 60%, #1a1f55 100%); --anet-grad-hero-glow-a: radial-gradient(800px 320px at 80% 0%, rgba(181,108,255,0.18), transparent 60%); --anet-grad-hero-glow-b: radial-gradient(640px 320px at 0% 100%, rgba(0,255,234,0.16), transparent 60%); --anet-grad-primary-btn: linear-gradient(135deg, #00ffea 0%, #00b4ff 100%); --anet-grad-primary-btn-hover: linear-gradient(135deg, #5cffe8 0%, #4cc8ff 100%); --anet-grad-pixel-logo: linear-gradient(180deg, #5cffe8 0%, #00ffea 50%, #00b4ff 100%); --anet-shadow-glow: 0 0 24px rgba(0, 255, 234, 0.18), 0 6px 30px rgba(0, 0, 0, 0.55); --anet-heading-tracking: -0.01em; --anet-heading-transform: none; } /* ============== THEME: WASTELAND (heavy grunge / post-apocalyptic) ============== */ html.theme-wasteland { --anet-bg-0: #0e0805; --anet-bg-1: #15100a; --anet-bg-2: #1f1810; --anet-card-1: #251812; --anet-card-2: #36231a; --anet-card-3: #4a3023; --anet-line: rgba(214, 63, 31, 0.22); --anet-line-strong: rgba(214, 63, 31, 0.48); --anet-text: #d4c8a8; /* dirty parchment */ --anet-text-dim: #998873; /* dust */ --anet-text-muted: #6b5e4e; /* shadow brown */ --anet-cyan: #d63f1f; /* PRIMARY — blood red */ --anet-green: #b8821a; /* SECONDARY — rust gold */ --anet-purple: #8b3a1a; /* TERTIARY — dark rust */ --anet-pink: #ffac4c; /* ACCENT — orange flame */ --anet-yellow: #e0a82e; /* warning amber */ --anet-grad-bg-a: rgba(214, 63, 31, 0.10); --anet-grad-bg-b: rgba(139, 58, 26, 0.14); --anet-grad-bg-c: linear-gradient(180deg, #0a0604 0%, #100a06 40%, #100a06 100%); --anet-grad-card: linear-gradient(160deg, #251812 0%, #36231a 100%); --anet-grad-hero: linear-gradient(160deg, #1a0e08 0%, #2a1a12 50%, #4a2a1a 100%); --anet-grad-hero-glow-a: radial-gradient(800px 320px at 80% 0%, rgba(214,63,31,0.25), transparent 60%); --anet-grad-hero-glow-b: radial-gradient(640px 320px at 0% 100%, rgba(139,58,26,0.22), transparent 60%); --anet-grad-primary-btn: linear-gradient(135deg, #d63f1f 0%, #8b3a1a 100%); --anet-grad-primary-btn-hover: linear-gradient(135deg, #ed5a3a 0%, #a84a26 100%); --anet-grad-pixel-logo: linear-gradient(180deg, #ffac4c 0%, #d63f1f 50%, #8b3a1a 100%); --anet-shadow-glow: 0 0 24px rgba(214, 63, 31, 0.28), 0 6px 30px rgba(0, 0, 0, 0.75); --anet-heading-tracking: 0.05em; --anet-heading-transform: uppercase; } /* Wasteland — heavy grit overlay simulating dust / scratched metal */ html.theme-wasteland body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.45; mix-blend-mode: overlay; background-image: radial-gradient(circle at 30% 20%, rgba(214, 63, 31, 0.15), transparent 50%), radial-gradient(circle at 70% 80%, rgba(139, 58, 26, 0.12), transparent 50%), repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(214,63,31,0.02) 4px, rgba(214,63,31,0.02) 5px); } /* Wasteland — hero gets aggressive diagonal grunge stripes */ html.theme-wasteland .anet-hero { background: repeating-linear-gradient(135deg, transparent 0, transparent 80px, rgba(0,0,0,0.20) 80px, rgba(0,0,0,0.20) 84px), var(--anet-grad-hero-glow-a), var(--anet-grad-hero-glow-b), var(--anet-grad-hero); } html.theme-wasteland .anet-hero-title { font-family: var(--anet-font-display-bold-stack); font-weight: 900; text-transform: uppercase; letter-spacing: 0.005em; text-shadow: 3px 3px 0 rgba(0,0,0,0.7), 0 0 30px rgba(214,63,31,0.4); } html.theme-wasteland .anet-hero-eyebrow { letter-spacing: 0.28em; } /* ============== THEME: SYNTHWAVE (80s retro futuristic) ============== */ html.theme-synthwave { --anet-bg-0: #07021a; --anet-bg-1: #0d0521; --anet-bg-2: #1a0a3a; --anet-card-1: #1f0c4a; --anet-card-2: #2a0d6b; --anet-card-3: #3d1a8a; --anet-line: rgba(255, 0, 110, 0.24); --anet-line-strong: rgba(255, 0, 110, 0.50); --anet-text: #fce8ff; --anet-text-dim: #b89eee; --anet-text-muted: #8c75c4; --anet-cyan: #ff006e; /* PRIMARY — hot pink */ --anet-green: #00f0ff; /* SECONDARY — electric cyan */ --anet-purple: #b829ff; /* TERTIARY — vivid purple */ --anet-pink: #ffea00; /* ACCENT — sunset yellow */ --anet-yellow: #ffea00; --anet-grad-bg-a: rgba(255, 0, 110, 0.10); --anet-grad-bg-b: rgba(184, 41, 255, 0.10); --anet-grad-bg-c: linear-gradient(180deg, #050118 0%, #0d0521 30%, #1a0a3a 100%); --anet-grad-card: linear-gradient(160deg, #1f0c4a 0%, #2a0d6b 100%); --anet-grad-hero: linear-gradient(180deg, #ff006e 0%, #b829ff 35%, #2a0d6b 80%, #0d0521 100%); --anet-grad-hero-glow-a: radial-gradient(800px 320px at 80% 0%, rgba(255,234,0,0.18), transparent 60%); --anet-grad-hero-glow-b: radial-gradient(640px 320px at 0% 100%, rgba(0,240,255,0.16), transparent 60%); --anet-grad-primary-btn: linear-gradient(135deg, #ff006e 0%, #b829ff 100%); --anet-grad-primary-btn-hover: linear-gradient(135deg, #ff3a8d 0%, #cc4dff 100%); --anet-grad-pixel-logo: linear-gradient(180deg, #ffea00 0%, #ff006e 50%, #b829ff 100%); --anet-shadow-glow: 0 0 28px rgba(255, 0, 110, 0.32), 0 0 60px rgba(0, 240, 255, 0.18), 0 6px 30px rgba(0, 0, 0, 0.55); --anet-heading-tracking: 0.02em; --anet-heading-transform: none; } /* Synthwave — sunset glow at the top of the page */ html.theme-synthwave body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.55; background-image: radial-gradient(ellipse 1400px 500px at 50% -10%, rgba(255, 0, 110, 0.25), transparent 60%), radial-gradient(ellipse 800px 300px at 50% -15%, rgba(255, 234, 0, 0.18), transparent 70%); } /* Synthwave — perspective grid floor at the bottom */ html.theme-synthwave body::after { content: ""; position: fixed; bottom: 0; left: 0; right: 0; height: 35vh; pointer-events: none; z-index: -1; opacity: 0.18; background-image: linear-gradient(to right, rgba(255,0,110,0.55) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,0,110,0.55) 1px, transparent 1px); background-size: 5vw 4vh; transform: perspective(400px) rotateX(60deg); transform-origin: center bottom; mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 100%); } html.theme-synthwave .anet-hero { background: linear-gradient(180deg, transparent 60%, rgba(13,5,33,0.92) 100%), linear-gradient(180deg, #ff006e 0%, #b829ff 40%, #1a0a3a 80%, #0d0521 100%); border-color: var(--anet-line-strong); } html.theme-synthwave .anet-hero-title { text-shadow: 0 0 20px rgba(255,0,110,0.55), 0 0 40px rgba(184,41,255,0.35), 2px 2px 0 rgba(0,0,0,0.5); color: #fff; } /* ============== THEME: MATRIX (Konami easter egg — phosphor terminal) ============== */ html.theme-matrix { --anet-bg-0: #000000; --anet-bg-1: #000400; --anet-bg-2: #001200; --anet-card-1: #001500; --anet-card-2: #002a00; --anet-card-3: #003c00; --anet-line: rgba(0, 255, 65, 0.22); --anet-line-strong: rgba(0, 255, 65, 0.55); --anet-text: #00ff41; /* phosphor green */ --anet-text-dim: #00b32d; --anet-text-muted: #007a1f; --anet-cyan: #00ff41; --anet-green: #00ff85; --anet-purple: #00cc33; --anet-pink: #00ff41; --anet-yellow: #d6ff5a; --anet-grad-bg-a: rgba(0, 255, 65, 0.04); --anet-grad-bg-b: rgba(0, 255, 65, 0.02); --anet-grad-bg-c: linear-gradient(180deg, #000 0%, #000400 100%); --anet-grad-card: linear-gradient(160deg, #001500 0%, #002a00 100%); --anet-grad-hero: linear-gradient(160deg, #000 0%, #002000 100%); --anet-grad-hero-glow-a: radial-gradient(800px 320px at 50% 0%, rgba(0,255,65,0.15), transparent 60%); --anet-grad-hero-glow-b: radial-gradient(640px 320px at 0% 100%, rgba(0,255,65,0.10), transparent 60%); --anet-grad-primary-btn: linear-gradient(135deg, #00ff41 0%, #00cc33 100%); --anet-grad-primary-btn-hover: linear-gradient(135deg, #5cff7a 0%, #2dd64f 100%); --anet-grad-pixel-logo: linear-gradient(180deg, #d6ff5a 0%, #00ff41 50%, #007a1f 100%); --anet-shadow-glow: 0 0 24px rgba(0, 255, 65, 0.32), 0 0 60px rgba(0, 255, 65, 0.12); --anet-heading-tracking: 0.04em; --anet-heading-transform: uppercase; /* In Matrix, EVERYTHING is monospace */ --anet-font-display: var(--anet-font-mono); } html.theme-matrix * { font-family: var(--anet-font-mono) !important; } html.theme-matrix h1, html.theme-matrix h2, html.theme-matrix h3 { text-transform: uppercase; text-shadow: 0 0 6px rgba(0,255,65,0.6), 0 0 12px rgba(0,255,65,0.3); } /* Matrix code-rain backdrop (canvas drawn by anet-enhance.js) */ html.theme-matrix #anet-matrix-rain { position: fixed; inset: 0; z-index: -1; opacity: 0.45; pointer-events: none; } /* End theme system ------------------------------------------------------ */ /* ========================================================================== CRT SCANLINES — subtle horizontal scanlines on retro themes. The user can toggle them via the keyboard shortcut "L". Off by default for Synthwave and Neon (cleaner aesthetics). Not added to Matrix because the rain itself is the effect. ========================================================================== */ html.theme-underground.anet-crt body::after, html.theme-wasteland.anet-crt body::after, html:not([class*="theme-"]).anet-crt body::after, html.anet-crt-force body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: repeating-linear-gradient( to bottom, transparent 0, transparent 2px, rgba(0, 0, 0, 0.10) 2px, rgba(0, 0, 0, 0.10) 3px ); opacity: 0.6; mix-blend-mode: multiply; } html.theme-matrix.anet-crt body::after, html.theme-matrix body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: repeating-linear-gradient( to bottom, transparent 0, transparent 1px, rgba(0, 0, 0, 0.18) 1px, rgba(0, 0, 0, 0.18) 2px ); opacity: 0.55; mix-blend-mode: multiply; } /* ========================================================================== GLITCH TEXT EFFECT — RGB-split chromatic aberration on hero title in retro themes. Triggered on hover; randomly pulsed every ~25s by anet-enhance.js via the .anet-glitching class. ========================================================================== */ .anet-hero-title.anet-glitch, html.theme-underground .anet-hero-title:hover, html.theme-wasteland .anet-hero-title:hover, html.theme-matrix .anet-hero-title:hover, .anet-hero-title.anet-glitching { position: relative; animation: anet-glitch-shake 0.32s steps(2, end) infinite; } .anet-hero-title.anet-glitch::before, .anet-hero-title.anet-glitching::before, html.theme-underground .anet-hero-title:hover::before, html.theme-wasteland .anet-hero-title:hover::before, html.theme-matrix .anet-hero-title:hover::before { content: attr(data-text); position: absolute; inset: 0; color: var(--anet-cyan); mix-blend-mode: screen; text-shadow: 2px 0 0 var(--anet-cyan); clip-path: polygon(0 18%, 100% 18%, 100% 32%, 0 32%); animation: anet-glitch-1 1.2s steps(3, end) infinite; pointer-events: none; } .anet-hero-title.anet-glitch::after, .anet-hero-title.anet-glitching::after, html.theme-underground .anet-hero-title:hover::after, html.theme-wasteland .anet-hero-title:hover::after, html.theme-matrix .anet-hero-title:hover::after { content: attr(data-text); position: absolute; inset: 0; color: var(--anet-purple); mix-blend-mode: screen; text-shadow: -2px 0 0 var(--anet-purple); clip-path: polygon(0 60%, 100% 60%, 100% 76%, 0 76%); animation: anet-glitch-2 0.9s steps(2, end) infinite; pointer-events: none; } @keyframes anet-glitch-shake { 0%, 100% { transform: translate(0); } 20% { transform: translate(-1px, 1px); } 40% { transform: translate(-1px, -1px); } 60% { transform: translate(1px, 1px); } 80% { transform: translate(1px, -1px); } } @keyframes anet-glitch-1 { 0%, 100% { transform: translate(0); clip-path: polygon(0 18%, 100% 18%, 100% 32%, 0 32%); } 33% { transform: translate(-3px, 0); clip-path: polygon(0 8%, 100% 8%, 100% 18%, 0 18%); } 66% { transform: translate(2px, 0); clip-path: polygon(0 38%, 100% 38%, 100% 50%, 0 50%); } } @keyframes anet-glitch-2 { 0%, 100% { transform: translate(0); clip-path: polygon(0 60%, 100% 60%, 100% 76%, 0 76%); } 50% { transform: translate(3px, 0); clip-path: polygon(0 80%, 100% 80%, 100% 92%, 0 92%); } } /* ========================================================================== LOADING SKELETONS — shimmer placeholder for async content. Apply class "anet-skeleton" to any element to make it shimmer. ========================================================================== */ .anet-skeleton { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.04); border-radius: 6px; color: transparent !important; user-select: none; } .anet-skeleton::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, var(--anet-line-strong) 50%, transparent 100% ); transform: translateX(-100%); animation: anet-shimmer 1.4s infinite; } @keyframes anet-shimmer { 100% { transform: translateX(100%); } } @keyframes anet-blink-caret { 50% { opacity: 0; } } /* ========================================================================== THEME SWITCHER POPOVER — hover the switch, see all themes as clickable swatches with names. Direct-jump instead of cycle-only. ========================================================================== */ .anet-theme-switch-li { position: relative; } .anet-theme-popover { position: absolute; top: calc(100% + 8px); right: 0; background: linear-gradient(180deg, #14172a 0%, #0e1020 100%); border: 1px solid var(--anet-line-strong); border-radius: 12px; padding: 8px; display: none; flex-direction: column; gap: 4px; min-width: 180px; z-index: 1080; box-shadow: 0 20px 50px rgba(0,0,0,0.7); } .anet-theme-switch-li:hover .anet-theme-popover, .anet-theme-switch-li:focus-within .anet-theme-popover { display: flex; } .anet-theme-popover-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--anet-text); font-family: var(--anet-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; text-align: left; width: 100%; transition: background .15s ease, border-color .15s ease; } .anet-theme-popover-item:hover { background: rgba(255,255,255,0.05); border-color: var(--anet-line-strong); } .anet-theme-popover-item.is-active { background: rgba(255,255,255,0.05); border-color: var(--anet-line-strong); color: var(--anet-cyan); } .anet-theme-popover-swatch { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 10px currentColor; } .anet-theme-popover-swatch.t-underground { background: linear-gradient(135deg, #ffd166, #ff6b35, #c8102e); color: #ff6b35; } .anet-theme-popover-swatch.t-wasteland { background: linear-gradient(135deg, #ffac4c, #d63f1f, #8b3a1a); color: #d63f1f; } .anet-theme-popover-swatch.t-synthwave { background: linear-gradient(135deg, #ffea00, #ff006e, #b829ff); color: #ff006e; } .anet-theme-popover-swatch.t-neon { background: linear-gradient(135deg, #5cffe8, #00ffea, #00b4ff); color: #00ffea; } .anet-theme-popover-swatch.t-matrix { background: linear-gradient(135deg, #d6ff5a, #00ff41, #007a1f); color: #00ff41; } .anet-theme-popover-locked { font-size: 10px; color: var(--anet-text-muted); text-transform: none; letter-spacing: 0; font-style: italic; } /* ========================================================================== CALLER MARQUEE — scrolling strip of recent visitors below the hero ========================================================================== */ .anet-marquee { position: relative; margin: -16px 0 22px; padding: 8px 0; overflow: hidden; border-radius: var(--anet-radius-sm); background: rgba(0,0,0,0.25); border: 1px solid var(--anet-line); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .anet-marquee-track { display: flex; gap: 36px; animation: anet-marquee-scroll 50s linear infinite; width: max-content; } .anet-marquee-track:hover { animation-play-state: paused; } .anet-marquee-item { flex: 0 0 auto; font-family: var(--anet-font-mono); font-size: 13px; color: var(--anet-text-dim); white-space: nowrap; } .anet-marquee-alias { color: var(--anet-cyan); font-weight: 700; margin-right: 10px; } .anet-marquee-time { color: var(--anet-text-muted); margin-right: 10px; } .anet-marquee-loc { color: var(--anet-green); } .anet-marquee-sep { color: var(--anet-line-strong); margin: 0 6px; opacity: 0.6; } @keyframes anet-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ========================================================================== HELP OVERLAY (keyboard shortcuts) — toggled by "?" or "/" ========================================================================== */ .anet-help { position: fixed; inset: 0; z-index: 1090; display: none; align-items: center; justify-content: center; padding: 20px; } .anet-help[data-open="1"] { display: flex; } .anet-help-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .anet-help-frame { position: relative; z-index: 1; background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%); border: 1px solid var(--anet-line-strong); border-radius: var(--anet-radius); padding: 24px 28px; max-width: 520px; width: 100%; color: var(--anet-text); box-shadow: 0 30px 80px rgba(0,0,0,0.7); animation: anet-lb-in .22s ease-out both; } .anet-help-frame h2 { margin: 0 0 14px; color: var(--anet-cyan); font-family: var(--anet-font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 16px; } .anet-help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; } .anet-help-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; background: rgba(255,255,255,0.025); border: 1px solid var(--anet-line); border-radius: 8px; } .anet-help-key { display: inline-flex; gap: 4px; } .anet-help-key kbd { font-family: var(--anet-font-mono); font-size: 11px; padding: 3px 8px; background: rgba(0,0,0,0.4); color: var(--anet-cyan); border: 1px solid var(--anet-line-strong); border-radius: 5px; box-shadow: 0 2px 0 rgba(0,0,0,0.6); } .anet-help-desc { font-size: 13px; color: var(--anet-text-dim); } .anet-help-foot { margin-top: 14px; font-size: 12px; color: var(--anet-text-muted); text-align: center; } .anet-help-foot kbd { font-family: var(--anet-font-mono); font-size: 11px; background: rgba(0,0,0,0.4); border: 1px solid var(--anet-line); border-radius: 4px; padding: 1px 5px; color: var(--anet-text-dim); } @media (max-width: 520px) { .anet-help-frame { padding: 18px; } } /* ========================================================================== HELP FAB — persistent floating "?" button (bottom-right). Always visible, pulses on first visit to draw the eye, then settles into the background. ========================================================================== */ .anet-help-fab { position: fixed; right: 22px; bottom: 22px; z-index: 1085; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--anet-line-strong); background: linear-gradient(135deg, rgba(0,0,0,0.85), rgba(20,20,40,0.85)); color: var(--anet-cyan); font-family: var(--anet-font-mono); font-size: 22px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 14px var(--anet-line-strong); transition: transform .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease; text-shadow: 0 0 10px var(--anet-line-strong); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .anet-help-fab:hover { transform: scale(1.08); color: #fff; box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 24px var(--anet-line-strong); } .anet-help-fab:active { transform: scale(0.96); } .anet-help-fab:focus-visible { outline: 2px solid var(--anet-cyan); outline-offset: 4px; } /* First-visit pulse — gentle ring expanding outward */ .anet-help-fab.is-fresh::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--anet-cyan); opacity: 0; animation: anet-fab-pulse 2.4s ease-out infinite; pointer-events: none; } @keyframes anet-fab-pulse { 0% { opacity: 0.7; transform: scale(0.95); } 70% { opacity: 0; transform: scale(1.45); } 100% { opacity: 0; transform: scale(1.45); } } @media (max-width: 480px) { .anet-help-fab { right: 14px; bottom: 14px; width: 40px; height: 40px; font-size: 20px; } } /* ========================================================================== NOW-PLAYING WIDGET (sidebar) ========================================================================== */ .anet-now-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .anet-now-item { padding: 8px 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--anet-line); border-radius: 8px; font-size: 12px; position: relative; } .anet-now-item.is-live { border-color: var(--anet-line-strong); box-shadow: 0 0 16px var(--anet-line); } .anet-now-user { color: var(--anet-cyan); font-weight: 700; font-size: 13px; display: block; } .anet-now-action { color: var(--anet-text-dim); font-family: var(--anet-font-mono); font-size: 11px; margin-top: 2px; display: block; } .anet-now-pulse { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--anet-green); margin-right: 6px; vertical-align: middle; animation: anet-pulse-soft 1.6s ease-in-out infinite; box-shadow: 0 0 6px var(--anet-green); } .anet-now-empty { font-size: 12px; color: var(--anet-text-muted); font-style: italic; padding: 6px 2px; } /* ========================================================================== STATS SPARKLINE WIDGET (sidebar) ========================================================================== */ .anet-spark-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; } .anet-spark-tile { padding: 8px 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--anet-line); border-radius: 8px; } .anet-spark-label { font-size: 10px; color: var(--anet-text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .anet-spark-value { font-family: var(--anet-font-mono); font-size: 18px; font-weight: 800; color: var(--anet-cyan); } .anet-spark-svg { width: 100%; height: 40px; display: block; } .anet-spark-svg path { fill: none; stroke: var(--anet-cyan); stroke-width: 2; } .anet-spark-svg .area { fill: var(--anet-cyan); opacity: 0.18; stroke: none; } /* ========================================================================== DOOR CATALOG (mods/pages/003-games.xjs override) ========================================================================== */ .anet-door-toolbar { position: sticky; top: 94px; z-index: 10; margin: 0 -4px 18px; padding: 12px 14px; background: linear-gradient(180deg, rgba(8,9,15,0.92) 0%, rgba(10,12,26,0.92) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--anet-line); border-radius: var(--anet-radius); box-shadow: 0 12px 30px rgba(0,0,0,0.45); } .anet-door-search input.anet-input { width: 100%; padding: 12px 14px !important; font-size: 14px !important; margin-bottom: 10px; } .anet-door-section { margin: 0 0 28px; } .anet-door-section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--anet-line); } .anet-door-section-head h2 { margin: 0; font-size: 18px; color: #fff; } .anet-door-section-count { background: rgba(0, 255, 234, 0.1); color: var(--anet-cyan); border: 1px solid var(--anet-line-strong); padding: 2px 10px; border-radius: 999px; font-family: var(--anet-font-mono); font-size: 11px; } .anet-door-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .anet-door { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--anet-radius-sm); background: var(--anet-grad-card); border: 1px solid var(--anet-line); color: var(--anet-text); cursor: pointer; text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .anet-door:hover { transform: translateY(-2px); border-color: var(--anet-line-strong); box-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 0 0 1px var(--anet-line-strong); text-shadow: none; } .anet-door-name { font-weight: 700; color: #fff; font-size: 14px; line-height: 1.3; } .anet-door-code { font-family: var(--anet-font-mono); font-size: 10px; color: var(--anet-text-muted); letter-spacing: 0.06em; } .anet-door-play { margin-top: 4px; font-size: 11px; color: var(--anet-cyan); font-family: var(--anet-font-mono); text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; } .anet-door:hover .anet-door-play { opacity: 1; } /* ========================================================================== CONNECTION HELPER (mods/pages/004-connect.xjs) ========================================================================== */ .anet-conn-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding: 4px; background: rgba(0,0,0,0.3); border-radius: 999px; border: 1px solid var(--anet-line); width: fit-content; } .anet-conn-tab { padding: 8px 16px; border-radius: 999px; border: 0; background: transparent; color: var(--anet-text-dim); font-family: var(--anet-font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: all .15s ease; } .anet-conn-tab:hover { color: var(--anet-cyan); } .anet-conn-tab.is-active { background: var(--anet-grad-primary-btn); color: #fff; } .anet-conn-panel { display: none; } .anet-conn-panel.is-active { display: block; } .anet-conn-step { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; padding: 14px; background: var(--anet-grad-card); border: 1px solid var(--anet-line); border-radius: var(--anet-radius-sm); } .anet-conn-step-num { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--anet-grad-primary-btn); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--anet-font-mono); font-weight: 800; font-size: 14px; } .anet-conn-step-body { flex: 1; } .anet-conn-step-body h4 { margin: 0 0 6px; font-size: 16px; color: #fff; } .anet-conn-cmd { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; background: #000; border: 1px solid var(--anet-line); border-radius: 6px; font-family: var(--anet-font-mono); font-size: 13px; } .anet-conn-cmd-prompt { color: var(--anet-green); } .anet-conn-cmd-text { color: #fff; flex: 1; user-select: all; } .anet-conn-copy { border: 0; background: rgba(0, 255, 234, 0.12); color: var(--anet-cyan); font-family: var(--anet-font-mono); font-size: 11px; padding: 4px 10px; border-radius: 5px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.08em; } .anet-conn-copy:hover { background: rgba(0, 255, 234, 0.20); } .anet-conn-clients { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .anet-conn-client { padding: 10px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--anet-line); border-radius: 8px; font-size: 13px; text-decoration: none; color: var(--anet-text); display: block; } .anet-conn-client:hover { border-color: var(--anet-line-strong); background: rgba(0,255,234,0.05); text-shadow: none; } .anet-conn-client-name { color: #fff; font-weight: 700; } .anet-conn-client-os { font-family: var(--anet-font-mono); font-size: 10px; color: var(--anet-text-muted); text-transform: uppercase; letter-spacing: 0.08em; } /* ========================================================================== 404 PAGE ========================================================================== */ .anet-404 { text-align: center; padding: 40px 20px; } .anet-404-art { font-family: var(--anet-font-mono); font-size: clamp(40px, 12vw, 120px); line-height: 0.95; font-weight: 900; background: var(--anet-grad-primary-btn); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; letter-spacing: -0.04em; text-shadow: 0 0 40px rgba(255, 107, 53, 0.4); } .anet-404-msg { font-size: 18px; color: var(--anet-text-dim); margin: 12px 0 24px; } .anet-404-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; } /* ----- Global reset / base ----- */ html, body { background: radial-gradient(1200px 700px at 12% -10%, var(--anet-grad-bg-a), transparent 60%), radial-gradient(900px 600px at 90% 0%, var(--anet-grad-bg-b), transparent 60%), var(--anet-grad-bg-c) !important; background-attachment: fixed !important; color: var(--anet-text); font-family: var(--anet-font-display); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Override any per-page background-image hack from old home page */ body { background-image: none !important; background-size: cover !important; } /* Selection */ ::selection { background: rgba(0, 255, 234, 0.28); color: #fff; } /* Scrollbar */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); } *::-webkit-scrollbar-thumb { background: rgba(0, 255, 234, 0.18); border-radius: 8px; } *::-webkit-scrollbar-thumb:hover { background: rgba(0, 255, 234, 0.34); } /* Headings */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #f4f7ff; font-family: var(--anet-font-display); letter-spacing: -0.01em; } h1, .h1 { font-weight: 800; letter-spacing: -0.02em; } h2, .h2 { font-weight: 700; } h3, .h3 { font-weight: 700; } /* Links */ a { color: var(--anet-cyan); transition: color .18s ease, text-shadow .18s ease; } a:hover, a:focus { color: #baffff; text-shadow: 0 0 10px rgba(0, 255, 234, 0.5); text-decoration: none; } hr { border-color: var(--anet-line); } /* ========================================================================== TOP STRIP (mods/components/header.xjs branded social row) The strip is fixed at top:0 and the navbar is offset down by its height so they stack cleanly. Hidden on very narrow screens to save vertical space. ========================================================================== */ .anet-topstrip { position: fixed; top: 0; left: 0; right: 0; z-index: 1042; background: linear-gradient(90deg, rgba(8,9,15,.94) 0%, rgba(17,20,42,.94) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--anet-line); padding: 6px 14px; height: 34px; box-sizing: border-box; } .anet-topstrip-inner { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: flex-end; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; } .anet-topstrip-link { color: var(--anet-text-dim); text-decoration: none; padding: 2px 6px; border-radius: 6px; transition: color .15s ease, background .15s ease; } .anet-topstrip-link:hover { color: var(--anet-cyan); background: rgba(0,255,234,.06); text-shadow: none; } /* ========================================================================== NAVBAR (override BS3 navbar-default look) ========================================================================== */ .navbar.anet-navbar, .navbar-default { background: linear-gradient(90deg, rgba(10,12,26,.92) 0%, rgba(20,23,55,.92) 100%) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 0 !important; border-bottom: 1px solid var(--anet-line) !important; border-radius: 0 !important; margin-bottom: 0 !important; min-height: 60px !important; box-shadow: 0 6px 28px rgba(0, 0, 0, 0.55); } /* offset fixed navbar by topstrip height */ .navbar-default.navbar-fixed-top, .navbar.anet-navbar.navbar-fixed-top { top: 34px !important; } .navbar.anet-navbar .navbar-brand, .navbar-default .navbar-brand { color: #fff !important; font-weight: 800; letter-spacing: 0.02em; font-size: 18px; height: auto; padding: 18px 16px; display: flex; align-items: center; gap: 10px; } .navbar.anet-navbar .navbar-brand:hover, .navbar-default .navbar-brand:hover { color: var(--anet-cyan) !important; text-shadow: 0 0 12px rgba(0,255,234,.55); } /* Brand mark — pixel-A SVG. Four variants exist (one per theme); CSS shows the one matching the active theme. The base `.anet-brand-mark` rule below does NOT set display, so it doesn't fight with the show/hide rules. */ .anet-brand-mark { width: 32px; height: 32px; transition: filter .2s ease, transform .2s ease; } /* Hide all logo variants by default; show only the one matching active theme. `!important` defeats any framework rule (BS3 has no display rule for these classes, but adding for safety against stale caches and inline styles). */ img.anet-brand-mark-underground, img.anet-brand-mark-wasteland, img.anet-brand-mark-synthwave, img.anet-brand-mark-neon { display: none !important; } html.theme-underground img.anet-brand-mark-underground, html.theme-wasteland img.anet-brand-mark-wasteland, html.theme-synthwave img.anet-brand-mark-synthwave, html.theme-neon img.anet-brand-mark-neon { display: inline-block !important; } html.theme-underground .anet-brand-mark { filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.55)); } html.theme-wasteland .anet-brand-mark { filter: drop-shadow(0 0 6px rgba(214, 63, 31, 0.6)); } html.theme-synthwave .anet-brand-mark { filter: drop-shadow(0 0 8px rgba(255, 0, 110, 0.7)) drop-shadow(0 0 16px rgba(184, 41, 255, 0.4)); } html.theme-neon .anet-brand-mark { filter: drop-shadow(0 0 6px rgba(0, 255, 234, 0.45)); } .navbar-brand:hover .anet-brand-mark { transform: scale(1.05); } html.theme-underground .navbar-brand:hover .anet-brand-mark { filter: drop-shadow(0 0 12px rgba(255, 107, 53, 0.85)); } html.theme-wasteland .navbar-brand:hover .anet-brand-mark { filter: drop-shadow(0 0 12px rgba(214, 63, 31, 0.9)); } html.theme-synthwave .navbar-brand:hover .anet-brand-mark { filter: drop-shadow(0 0 14px rgba(255, 0, 110, 0.9)) drop-shadow(0 0 28px rgba(184, 41, 255, 0.6)); } html.theme-neon .navbar-brand:hover .anet-brand-mark { filter: drop-shadow(0 0 12px rgba(0, 255, 234, 0.85)); } /* Theme switch button (sits next to dark-mode toggle in the navbar) */ .anet-theme-switch-li { display: flex; align-items: center; } .anet-theme-switch { display: inline-flex; align-items: center; gap: 6px; margin: 0 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--anet-line); background: rgba(255, 255, 255, 0.04); color: var(--anet-text); font-family: var(--anet-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .anet-theme-switch:hover { background: var(--anet-line); border-color: var(--anet-line-strong); color: var(--anet-cyan); } .anet-theme-switch-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--anet-grad-primary-btn); box-shadow: 0 0 8px var(--anet-line-strong); flex: 0 0 auto; } .anet-theme-switch-label { white-space: nowrap; } /* ========================================================================== SIDEBAR DRAWER — converts the always-visible right column into a slide-in panel toggled by the navbar "Panel" button. When open: sidebar visible, content gets right padding. When closed: sidebar slides off-screen, content reclaims full width. On screens <992px the drawer overlays content with a dim backdrop. ========================================================================== */ .anet-sb-toggle-li { display: flex; align-items: center; } .anet-sb-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--anet-line); background: rgba(255,255,255,0.04); color: var(--anet-text); font-family: var(--anet-font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } .anet-sb-toggle:hover { background: var(--anet-line); border-color: var(--anet-line-strong); color: var(--anet-cyan); } .anet-sb-toggle-icon { display: inline-flex; flex-direction: column; justify-content: space-between; width: 16px; height: 12px; } .anet-sb-toggle-icon span { display: block; height: 2px; background: var(--anet-cyan); border-radius: 1px; transition: transform .25s ease, opacity .25s ease; } .anet-sb-toggle-icon span:nth-child(1) { width: 100%; } .anet-sb-toggle-icon span:nth-child(2) { width: 70%; } .anet-sb-toggle-icon span:nth-child(3) { width: 100%; } html.anet-sb-closed .anet-sb-toggle-icon span:nth-child(2) { opacity: 0.3; transform: translateX(-4px); } /* Sidebar slide animation. The sidebar lives inside a Bootstrap row column `.col-xs-6.col-sm-3.sidebar-offcanvas` rendered by index.xjs. We slide the #sidebar element itself (it's positioned by BS3 normally) and re-flow the content column to fill freed width. */ #sidebar { transition: transform .3s ease, opacity .3s ease; transform-origin: right top; } html.anet-sb-closed #sidebar { transform: translateX(110%); opacity: 0; pointer-events: none; } /* Reclaim sidebar width when drawer is closed (desktop only). BS3 uses floats, not flexbox, so the only thing that actually matters is `width`. */ @media (min-width: 992px) { html.anet-sb-closed .col-sm-9 { width: 100% !important; } } /* Mobile / narrow: drawer overlays main content with a backdrop */ @media (max-width: 991px) { /* Hide the BS3 default offcanvas toggle since our drawer replaces it */ .container > .row-offcanvas > .col-xs-12 > div > p.pull-left.visible-xs, .container > .row-offcanvas > .col-xs-12 > div > p.pull-right.visible-xs, .container-fluid > .row-offcanvas > .col-xs-12 > div > p.pull-left.visible-xs, .container-fluid > .row-offcanvas > .col-xs-12 > div > p.pull-right.visible-xs { display: none !important; } #sidebar.sidebar-offcanvas { position: fixed !important; top: 94px; right: 0; bottom: 0; width: min(380px, 92vw); max-width: 92vw; z-index: 1050; overflow-y: auto; padding: 14px 12px 24px !important; background: linear-gradient(180deg, rgba(8,9,15,0.96) 0%, rgba(15,12,8,0.96) 100%); border-left: 1px solid var(--anet-line); box-shadow: -10px 0 40px rgba(0,0,0,0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Backdrop overlay when drawer is open (mobile) */ html.anet-sb-open body::after { content: ""; position: fixed; inset: 0; z-index: 1049; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); pointer-events: auto; } } /* Underground theme — backdrop tint */ html.theme-underground.anet-sb-open body::after { background: rgba(20,8,4,0.65); } .navbar-default .navbar-nav > li > a { color: var(--anet-text-dim) !important; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; padding: 22px 14px !important; position: relative; transition: color .15s ease; } /* Hover/focus/open — must override BS3 .navbar-default { color:#555; bg:#e7e7e7 } for the right-side items (Dark / Register / Login) so they don't go white-on-near-white. Every selector permutation, including .navbar-right nested forms. */ .navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li > a:link, .navbar-default .navbar-nav > li > a:visited { color: var(--anet-text-dim) !important; background: transparent !important; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:active, .navbar-default .navbar-nav > li.active > a, .navbar-default .navbar-nav > li.active > a:hover, .navbar-default .navbar-nav > li.active > a:focus, .navbar-default .navbar-nav > li.open > a, .navbar-default .navbar-nav > li.open > a:hover, .navbar-default .navbar-nav > li.open > a:focus, .navbar-default .navbar-nav.navbar-right > li > a:hover, .navbar-default .navbar-nav.navbar-right > li > a:focus, .navbar-default .navbar-nav.navbar-right > li.open > a, .navbar-default .navbar-nav.navbar-right > li.open > a:hover, .navbar-default .navbar-nav.navbar-right > li.open > a:focus { color: var(--anet-cyan) !important; background: rgba(0, 255, 234, 0.08) !important; text-shadow: 0 0 10px rgba(0, 255, 234, 0.4); } .navbar-default .navbar-nav > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 14px; height: 2px; background: linear-gradient(90deg, var(--anet-cyan), var(--anet-purple)); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .navbar-default .navbar-nav > li > a:hover::after, .navbar-default .navbar-nav > .active > a::after, .navbar-default .navbar-nav > .open > a::after { transform: scaleX(1); } /* Dark-mode toggle label inside the navbar — keep readable on hover too */ .navbar .dark-switch label, .navbar .dark-switch .checkbox label { color: var(--anet-text-dim) !important; } .navbar .dark-switch:hover label, .navbar .dark-switch label:hover { color: var(--anet-cyan) !important; } /* checkbox.css ships the toggle pill with `background: rgb(255,255,255)` and the moving knob also white. Reskin to brand colors so nothing in the navbar ever shows a hard white block. */ .checkbox.checbox-switch label span, .checkbox-inline.checbox-switch span { background-color: rgba(255, 255, 255, 0.06) !important; border-color: var(--anet-line-strong) !important; box-shadow: rgba(0, 255, 234, 0.0) 0 0 0 0 inset !important; } .checkbox.checbox-switch label span:before, .checkbox-inline.checbox-switch span:before { background: linear-gradient(135deg, var(--anet-cyan), #00b4ff) !important; box-shadow: 0 0 8px rgba(0, 255, 234, 0.55) !important; } .checkbox.checbox-switch label > input:checked + span, .checkbox-inline.checbox-switch > input:checked + span { background-color: rgba(0, 255, 234, 0.16) !important; border-color: var(--anet-cyan) !important; box-shadow: rgba(0, 255, 234, 0.18) 0 0 0 8px inset !important; } /* Defensive: any element inside the navbar that BS3 / external CSS sets to a hard white background gets neutralized. Targets only `background-color` so our intentional translucent cyan hovers still work. */ .navbar-default *[style*="background:#fff"], .navbar-default *[style*="background-color:#fff"], .navbar-default *[style*="background: #fff"], .navbar-default *[style*="background-color: #fff"] { background-color: transparent !important; } .navbar-default a, .navbar-default a:link, .navbar-default a:visited { background-color: transparent !important; } /* Dropdown menus */ .dropdown-menu, .anet-dropdown { background: linear-gradient(180deg, #14172a 0%, #0e1020 100%) !important; border: 1px solid var(--anet-line) !important; border-radius: var(--anet-radius-sm) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--anet-line); padding: 6px !important; min-width: 200px; } .dropdown-menu > li > a, .dropdown-menu .dropdown-item { color: var(--anet-text) !important; border-radius: 6px; padding: 8px 12px !important; font-weight: 500; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu .dropdown-item:hover { background: rgba(0, 255, 234, 0.08) !important; color: var(--anet-cyan) !important; } /* User chip in navbar */ .anet-user { display: flex !important; align-items: center; gap: 8px; } .anet-user-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--anet-cyan), var(--anet-purple)); color: #06070d; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: 0 0 12px rgba(0, 255, 234, 0.35); } /* Login form in dropdown */ .anet-login-form input.form-control, .anet-input { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--anet-line) !important; color: var(--anet-text) !important; border-radius: 8px !important; margin-bottom: 8px !important; } .anet-login-form input.form-control:focus, .anet-input:focus { outline: none; border-color: var(--anet-cyan) !important; box-shadow: 0 0 0 3px rgba(0, 255, 234, 0.16) !important; } /* Badge */ .badge.scanned, .anet-badge { background: linear-gradient(135deg, var(--anet-cyan), var(--anet-purple)) !important; color: #06070d !important; font-weight: 800; border-radius: 999px; padding: 2px 7px; font-size: 11px; } /* Toggle button (mobile hamburger) */ .navbar-default .navbar-toggle { border: 1px solid var(--anet-line) !important; background: rgba(0, 255, 234, 0.06) !important; } .navbar-default .navbar-toggle .icon-bar { background: var(--anet-cyan) !important; } /* Dark switch in navbar */ .dark-switch label { color: var(--anet-text-dim); } /* Push body content below fixed top-strip (34px) + fixed navbar (60px) */ body { padding-top: 94px; } /* ========================================================================== BUTTONS (override BS3 + add .anet-btn variants) ========================================================================== */ .btn, .anet-btn { border-radius: 10px !important; font-weight: 600 !important; letter-spacing: 0.01em; padding: 10px 18px !important; border: 1px solid var(--anet-line) !important; background: rgba(255, 255, 255, 0.04) !important; color: var(--anet-text) !important; transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; } .btn:hover, .btn:focus, .anet-btn:hover, .anet-btn:focus { background: rgba(0, 255, 234, 0.08) !important; color: var(--anet-cyan) !important; border-color: var(--anet-line-strong) !important; box-shadow: 0 6px 20px rgba(0, 255, 234, 0.15); transform: translateY(-1px); } .btn-primary, .anet-btn-primary { background: var(--anet-grad-primary-btn) !important; color: #fff !important; border: 0 !important; box-shadow: 0 8px 24px var(--anet-line-strong), inset 0 -2px 0 rgba(0,0,0,.18); } .btn-primary:hover, .anet-btn-primary:hover, .btn-primary:focus, .anet-btn-primary:focus { background: var(--anet-grad-primary-btn-hover) !important; color: #fff !important; box-shadow: 0 12px 36px var(--anet-line-strong); } .btn-default { background: rgba(255, 255, 255, 0.04) !important; } .anet-btn-ghost { background: transparent !important; border: 1px solid var(--anet-line-strong) !important; color: var(--anet-text) !important; } .anet-btn-ghost:hover { background: rgba(0, 255, 234, 0.08) !important; color: var(--anet-cyan) !important; } /* ========================================================================== HERO (home page) ========================================================================== */ .anet-hero { position: relative; border-radius: var(--anet-radius); overflow: hidden; padding: clamp(36px, 7vw, 84px) clamp(20px, 4vw, 56px); margin: 6px 0 28px; border: 1px solid var(--anet-line); background: var(--anet-grad-hero-glow-a), var(--anet-grad-hero-glow-b), var(--anet-grad-hero); box-shadow: var(--anet-shadow-glow); } .anet-hero-bg, .anet-hero-grid { position: absolute; inset: 0; pointer-events: none; } .anet-hero-grid { background-image: linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(60% 70% at 50% 30%, #000 0%, transparent 100%); -webkit-mask-image: radial-gradient(60% 70% at 50% 30%, #000 0%, transparent 100%); opacity: .6; } .anet-hero-content { position: relative; z-index: 1; max-width: 880px; } .anet-hero-eyebrow { display: inline-block; font-family: var(--anet-font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--anet-cyan); text-shadow: 0 0 12px rgba(0,255,234,0.5); padding: 4px 10px; border: 1px solid var(--anet-line-strong); border-radius: 999px; margin-bottom: 18px; } .anet-hero-title { font-size: clamp(32px, 5vw, 56px); line-height: 1.05; margin: 0 0 16px; color: #fff; letter-spacing: var(--anet-heading-tracking); } /* In Underground theme, hero title gets a heavier, all-caps street feel */ html.theme-underground .anet-hero-title { font-family: var(--anet-font-display-bold-stack); font-weight: 900; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.0; text-shadow: 0 2px 0 rgba(0,0,0,0.5), 0 0 20px rgba(255,107,53,0.18); } html.theme-underground .anet-hero-eyebrow { letter-spacing: 0.24em; } .anet-hero-accent { background: linear-gradient(90deg, var(--anet-cyan), #4cc8ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .anet-hero-accent2 { background: linear-gradient(90deg, var(--anet-purple), var(--anet-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; } .anet-hero-tagline { font-size: clamp(15px, 1.6vw, 18px); color: var(--anet-text-dim); margin: 0 0 24px; max-width: 60ch; } .anet-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } .anet-hero-meta { display: flex; flex-wrap: wrap; gap: 14px 22px; font-family: var(--anet-font-mono); font-size: 13px; color: var(--anet-text-muted); } .anet-hero-stat strong { color: var(--anet-green); margin-right: 6px; } /* Featured door of the day */ .anet-feat-door .anet-feat-card { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 16px 20px; border-radius: var(--anet-radius-sm); background: linear-gradient(135deg, color-mix(in srgb, var(--anet-cyan) 18%, transparent) 0%, color-mix(in srgb, var(--anet-purple) 18%, transparent) 100%); border: 1px solid var(--anet-line-strong); text-decoration: none; color: var(--anet-text); position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; } .anet-feat-door .anet-feat-card:hover { transform: translateY(-2px); border-color: var(--anet-line-strong); box-shadow: 0 14px 38px rgba(0,0,0,0.55), 0 0 30px var(--anet-line-strong); text-shadow: none; } .anet-feat-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--anet-grad-primary-btn); color: #fff; font-size: 24px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 20px var(--anet-line-strong); flex: 0 0 auto; } .anet-feat-cat { font-family: var(--anet-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--anet-green); margin-bottom: 4px; } .anet-feat-name { font-weight: 800; font-size: 20px; color: #fff; } .anet-feat-desc { font-size: 13px; color: var(--anet-text-dim); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .anet-feat-cta { font-family: var(--anet-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--anet-cyan); white-space: nowrap; } @media (max-width: 640px) { .anet-feat-door .anet-feat-card { grid-template-columns: 1fr; text-align: center; } .anet-feat-icon { margin: 0 auto; } } /* Live ticker — animated terminal-style status line below hero meta */ .anet-ticker { margin-top: 18px; padding: 10px 14px; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--anet-line); border-radius: 8px; font-family: var(--anet-font-mono); font-size: 13px; color: var(--anet-text-dim); display: flex; align-items: center; gap: 8px; max-width: 720px; min-height: 38px; } .anet-ticker-prompt { color: var(--anet-green); font-weight: 700; } .anet-ticker-line { color: #fff; flex: 1; white-space: nowrap; overflow: hidden; } .anet-ticker-caret { color: var(--anet-cyan); animation: anet-blink-caret .8s step-end infinite; } .anet-ticker-line .anet-ticker-num { color: var(--anet-cyan); font-weight: 700; } /* ========================================================================== FEATURE GRID (home) ========================================================================== */ .anet-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 0 0 28px; } .anet-feature { display: block; text-decoration: none; padding: 22px 20px; border-radius: var(--anet-radius); background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%); border: 1px solid var(--anet-line); color: var(--anet-text); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; position: relative; overflow: hidden; } .anet-feature::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 220px at 0% 0%, rgba(0,255,234,0.10), transparent 60%); opacity: 0; transition: opacity .25s ease; } .anet-feature:hover { transform: translateY(-4px); border-color: var(--anet-line-strong); box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--anet-line-strong); text-shadow: none; } .anet-feature:hover::before { opacity: 1; } .anet-feature h3 { margin: 0 0 6px; font-size: 18px; color: #fff; } .anet-feature p { margin: 0; color: var(--anet-text-dim); font-size: 14px; } .anet-feature-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(0,255,234,0.18), rgba(181,108,255,0.18)); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; border: 1px solid var(--anet-line); } /* ========================================================================== SECTIONS (home modules) ========================================================================== */ .anet-section { margin: 0 0 28px; padding: 22px; background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%); border: 1px solid var(--anet-line); border-radius: var(--anet-radius); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); } .anet-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; } .anet-section-head h2 { margin: 0; font-size: 22px; } .anet-section-sub { color: var(--anet-text-muted); font-size: 13px; font-family: var(--anet-font-mono); } /* Live pulse indicator */ .anet-live-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--anet-pink); margin-left: 6px; vertical-align: middle; box-shadow: 0 0 8px var(--anet-pink); animation: anet-pulse-soft 1.6s ease-in-out infinite; } @keyframes anet-pulse-soft { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.3); } } /* Radio iframe */ .anet-radio-frame { border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--anet-line); } .anet-radio-frame iframe { width: 100%; height: 700px; border: 0; display: block; } .anet-radio-fallback { display: none; margin-top: 12px; text-align: center; } .anet-radio-fallback audio { width: 100%; max-width: 880px; border-radius: 8px; } /* ========================================================================== TERMINAL FRAME (around fTelnet) ========================================================================== */ .anet-terminal-frame { border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--anet-line); box-shadow: inset 0 0 60px rgba(0, 255, 234, 0.04); } .anet-terminal-chrome { display: flex; align-items: center; gap: 8px; background: linear-gradient(180deg, #1a1d2e, #11142a); padding: 8px 12px; border-bottom: 1px solid var(--anet-line); font-family: var(--anet-font-mono); font-size: 12px; color: var(--anet-text-dim); } .anet-term-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 4px rgba(0,0,0,.5); } .anet-term-dot-r { background: #ff5f56; } .anet-term-dot-y { background: #ffbd2e; } .anet-term-dot-g { background: #27c93f; } .anet-term-title { margin-left: 8px; } .anet-connect-btnrow { display: flex; justify-content: center; margin: 18px 0 4px; } .fTelnetContainer { background: #000 !important; } /* ========================================================================== QUICKLINKS (home) ========================================================================== */ .anet-ql-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .anet-ql-card { display: block; padding: 16px 18px; border-radius: var(--anet-radius-sm); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--anet-line); text-decoration: none; color: var(--anet-text); position: relative; transition: border-color .18s ease, transform .12s ease, background .18s ease; } .anet-ql-card:hover { transform: translateY(-2px); border-color: var(--anet-line-strong); background: rgba(0,255,234,0.05); text-shadow: none; } .anet-ql-tag { display: inline-block; font-family: var(--anet-font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--anet-green); margin-bottom: 6px; text-transform: uppercase; } .anet-ql-title { font-size: 15px; font-weight: 600; color: #fff; } .anet-ql-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--anet-cyan); font-size: 18px; opacity: .8; } /* ========================================================================== FOOTER ========================================================================== */ .anet-footer { margin-top: 40px; padding: 28px 22px 18px; background: linear-gradient(180deg, rgba(10,12,26,.6), rgba(8,9,15,.95)); border-top: 1px solid var(--anet-line); border-radius: var(--anet-radius); } .anet-footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1.4fr 1fr 1.2fr; gap: 18px; align-items: center; } .anet-footer-brand { display: flex; align-items: center; gap: 10px; } /* No `display` here — show/hide is handled by the brand-mark variant rules. */ .anet-footer-mark { width: 36px; height: 36px; } html.theme-underground .anet-footer-mark { filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.55)); } html.theme-wasteland .anet-footer-mark { filter: drop-shadow(0 0 8px rgba(214, 63, 31, 0.6)); } html.theme-synthwave .anet-footer-mark { filter: drop-shadow(0 0 10px rgba(255, 0, 110, 0.7)) drop-shadow(0 0 18px rgba(184, 41, 255, 0.4)); } html.theme-neon .anet-footer-mark { filter: drop-shadow(0 0 8px rgba(0, 255, 234, 0.5)); } .anet-footer-name { font-weight: 800; letter-spacing: .02em; font-size: 16px; color: #fff; } .anet-footer-links, .anet-footer-social { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; } .anet-footer-links a, .anet-footer-social a { color: var(--anet-text-dim); text-decoration: none; } .anet-footer-links a:hover, .anet-footer-social a:hover { color: var(--anet-cyan); } .anet-footer-meta { font-family: var(--anet-font-mono); font-size: 12px; color: var(--anet-text-muted); display: flex; flex-direction: column; gap: 4px; text-align: right; } @media (max-width: 880px) { .anet-footer-inner { grid-template-columns: 1fr 1fr; } .anet-footer-meta { text-align: left; } } @media (max-width: 520px) { .anet-footer-inner { grid-template-columns: 1fr; } } /* Hide the bare `

© ...

` fallback if it slipped in */ footer > p:only-child { color: var(--anet-text-muted); font-size: 12px; text-align: center; } /* ========================================================================== GENERIC PAGE WIDGETS (forum / files / mail / games inherit these) ========================================================================== */ /* Container background already handled via body bg */ .container, .container-fluid { color: var(--anet-text); } /* Page title (breadcrumb area) */ .breadcrumb { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--anet-line); border-radius: var(--anet-radius-sm) !important; padding: 10px 14px !important; margin-bottom: 16px !important; color: var(--anet-text-dim); } .breadcrumb a { color: var(--anet-cyan); } .breadcrumb > .active { color: #fff !important; } /* Panels (BS3) */ .panel { background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%) !important; border: 1px solid var(--anet-line) !important; border-radius: var(--anet-radius) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); color: var(--anet-text); } .panel-default > .panel-heading, .panel-heading { background: rgba(0,255,234,0.06) !important; border-bottom: 1px solid var(--anet-line) !important; color: #fff !important; border-radius: var(--anet-radius) var(--anet-radius) 0 0 !important; } .panel-body { background: transparent !important; color: var(--anet-text); } .panel-footer { background: rgba(0,0,0,0.25) !important; border-top: 1px solid var(--anet-line) !important; color: var(--anet-text-dim) !important; } /* List groups (forum lists, mail) */ .list-group { border-radius: var(--anet-radius) !important; overflow: hidden; } .list-group-item { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--anet-line) !important; color: var(--anet-text) !important; padding: 12px 14px !important; transition: background .15s ease, border-color .15s ease; } .list-group-item + .list-group-item { border-top-width: 0 !important; } a.list-group-item { color: var(--anet-text) !important; } a.list-group-item:hover, a.list-group-item:focus, li.list-group-item.mail:hover { background: rgba(0, 255, 234, 0.06) !important; color: var(--anet-cyan) !important; border-color: var(--anet-line-strong) !important; text-shadow: none; } a.list-group-item.scanned, .scanned { color: var(--anet-cyan) !important; } a.unread { background: rgba(0, 255, 234, 0.08) !important; } a.read { background: rgba(255, 255, 255, 0.02) !important; color: var(--anet-text-muted) !important; } /* Tables */ .table { color: var(--anet-text); } .table > thead > tr > th { color: var(--anet-cyan); border-bottom-color: var(--anet-line) !important; } .table > tbody > tr > td, .table > tbody > tr > th { border-color: var(--anet-line) !important; } .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th, .striped:nth-of-type(even) { background: rgba(255, 255, 255, 0.025) !important; } .table-hover > tbody > tr:hover { background: rgba(0, 255, 234, 0.05) !important; } /* Forms */ .form-control, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], select, textarea { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--anet-line) !important; color: var(--anet-text) !important; border-radius: 8px !important; box-shadow: none !important; } .form-control:focus, textarea:focus, input:focus, select:focus { border-color: var(--anet-cyan) !important; box-shadow: 0 0 0 3px rgba(0, 255, 234, 0.16) !important; outline: none !important; } label { color: var(--anet-text-dim); } /* Modals */ .modal-content { background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%) !important; border: 1px solid var(--anet-line) !important; border-radius: var(--anet-radius) !important; color: var(--anet-text) !important; box-shadow: 0 24px 64px rgba(0,0,0,.6); } .modal-header { border-bottom-color: var(--anet-line) !important; } .modal-footer { border-top-color: var(--anet-line) !important; } /* ========================================================================== SIDEBAR — collapsible glass panels (anet-enhance.js wraps each widget) Hard-overrides BS3 list-group whiteness for every nested element. ========================================================================== */ #sidebar, .anet-sidebar { padding-top: 8px; } #sidebar h4 { color: var(--anet-cyan); } /* Each widget gets wrapped in .anet-sb-panel by anet-enhance.js */ .anet-sb-panel { background: linear-gradient(160deg, rgba(26,29,46,0.85) 0%, rgba(31,33,71,0.85) 100%); border: 1px solid var(--anet-line); border-radius: var(--anet-radius); margin-bottom: 14px; overflow: hidden; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.04); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .2s ease, box-shadow .2s ease; } .anet-sb-panel:hover { border-color: var(--anet-line-strong); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--anet-line-strong); } .anet-sb-panel-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: linear-gradient(90deg, rgba(0,255,234,0.08) 0%, rgba(181,108,255,0.06) 100%); border: 0; border-bottom: 1px solid var(--anet-line); color: #fff; cursor: pointer; font-family: var(--anet-font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; text-align: left; transition: background .2s ease; } .anet-sb-panel-head:hover { background: linear-gradient(90deg, rgba(0,255,234,0.14) 0%, rgba(181,108,255,0.10) 100%); } .anet-sb-panel-title { color: var(--anet-cyan); text-shadow: 0 0 10px rgba(0,255,234,0.35); } .anet-sb-panel-chev { color: var(--anet-cyan); font-size: 12px; transition: transform .25s ease; } .anet-sb-panel.is-collapsed .anet-sb-panel-chev { transform: rotate(-90deg); } .anet-sb-panel-body { padding: 14px; background: rgba(8, 9, 15, 0.3); max-height: 4000px; transition: max-height .3s ease, padding .3s ease, opacity .25s ease; overflow: hidden; } .anet-sb-panel.is-collapsed .anet-sb-panel-body { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; } /* Force-kill any white BS3 backgrounds anywhere inside the sidebar */ #sidebar h4, #sidebar h5, #sidebar h6 { color: var(--anet-cyan) !important; background: transparent !important; text-shadow: 0 0 10px rgba(0,255,234,0.25); } #sidebar table, #sidebar .table, #sidebar .table tbody, #sidebar .table thead, #sidebar .table tr, #sidebar .table td, #sidebar .table th, #sidebar .list-group, #sidebar .list-group-item, #sidebar .panel, #sidebar .panel-body, #sidebar div[style*="background"] { background: transparent !important; background-image: none !important; border-color: rgba(0,255,234,0.10) !important; color: var(--anet-text) !important; } #sidebar .table-striped > tbody > tr:nth-child(odd) > td, #sidebar .table-striped > tbody > tr:nth-child(odd) > th { background: rgba(255,255,255,0.025) !important; } #sidebar .table > tbody > tr > td, #sidebar .table > tbody > tr > th { border-color: rgba(0,255,234,0.10) !important; padding: 6px 8px !important; font-size: 13px; } #sidebar .table > thead > tr > th { color: var(--anet-cyan) !important; border-bottom-color: var(--anet-line-strong) !important; } #sidebar .list-group-item { background: rgba(255,255,255,0.025) !important; border-color: rgba(0,255,234,0.08) !important; border-radius: 8px !important; margin-bottom: 6px !important; padding: 10px 12px !important; } #sidebar .list-group-item:hover { background: rgba(0,255,234,0.08) !important; border-color: var(--anet-line-strong) !important; color: #fff !important; } /* Sidebar imagery */ #sidebar img { border-radius: 10px; max-width: 100%; height: auto; } /* Tighten heading spacing inside legacy widgets */ #sidebar .anet-sb-panel-body > h4:first-child, #sidebar .anet-sb-panel-body > h5:first-child { margin-top: 0; } /* Old inline-style widgets shipped from sidebar/*.xjs use linear-gradient backgrounds directly. Override their inline-style backgrounds via attribute selector tricks — works for the gradient strings the user has hardcoded. Belt-and-suspenders: even if someone keeps the legacy 001/002/003 files instead of the override versions, theme switching still works. */ #sidebar [style*="linear-gradient"] { background: transparent !important; background-image: none !important; border-radius: var(--anet-radius-sm) !important; box-shadow: none !important; padding: 0 !important; } #sidebar [style*="#00ffea"], #sidebar [style*="#00FFEA"], #sidebar [style*="rgb(0, 255, 234)"] { color: var(--anet-cyan) !important; } #sidebar [style*="#39ff14"], #sidebar [style*="#39FF14"] { color: var(--anet-green) !important; } #sidebar [style*="#23245d"], #sidebar [style*="#22242e"] { background: transparent !important; } #sidebar [style*="#90f"], #sidebar [style*="#9900ff"] { color: var(--anet-purple) !important; } /* New theme-aware sidebar widget classes used by the override files */ .anet-nodelist { display: block; } .anet-nodelist-table { background: transparent !important; } .anet-nodelist-id { color: var(--anet-green); font-family: var(--anet-font-mono); } .anet-nodelist-user { color: var(--anet-cyan); } .anet-recent-visitors { background: transparent !important; padding: 0 !important; border: 0 !important; } .anet-rv-item { background: rgba(255,255,255,0.03) !important; border: 1px solid var(--anet-line) !important; border-radius: 8px !important; margin-bottom: 6px !important; padding: 10px 12px !important; font-size: 13px; line-height: 1.5; } .anet-rv-alias { color: var(--anet-cyan); font-size: 14px; } .anet-rv-time { color: var(--anet-text-muted); font-size: 11px; font-family: var(--anet-font-mono); font-style: normal; } .anet-rv-label { color: var(--anet-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; } .anet-rv-loc { color: var(--anet-text); } .anet-rv-conn { color: var(--anet-green); font-family: var(--anet-font-mono); } .anet-sys-host { text-align: center; margin-bottom: 12px; } .anet-sys-host-name { margin: 0 0 8px; font-family: var(--anet-font-mono); color: var(--anet-cyan); font-size: 16px; text-shadow: 0 0 8px var(--anet-line-strong); } .anet-sys-ports { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-bottom: 10px; font-family: var(--anet-font-mono); font-size: 12px; color: var(--anet-text-dim); } .anet-sys-port strong { color: var(--anet-green); margin-right: 4px; font-weight: 700; } .anet-sys-cta { margin: 0; } .anet-sys-banner { width: 100%; max-width: 220px; height: auto; border-radius: 8px; border: 1px solid var(--anet-line); box-shadow: 0 6px 20px rgba(0,0,0,0.5); transition: border-color .15s ease, box-shadow .15s ease; } .anet-sys-banner:hover { border-color: var(--anet-line-strong); box-shadow: 0 8px 28px var(--anet-line-strong); } .anet-sys-table { background: transparent !important; } .anet-sys-table th[scope="row"] { color: var(--anet-cyan) !important; font-weight: 600; } .anet-sys-stat-on { color: var(--anet-green); } .anet-sys-stat-off { color: var(--anet-cyan); } /* Sidebar list-group host: kill the BS3 list border so the panels stand alone */ #sidebar ul.list-group { background: transparent !important; border: 0 !important; margin-bottom: 0; } #sidebar li.list-group-item.sidebar { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 14px !important; } #sidebar li.list-group-item.sidebar:empty { display: none !important; } /* MRC stats widget (mods/sidebar/004-mrcstats.xjs) */ .anet-mrc-grid { display: flex; flex-direction: column; gap: 6px; } .anet-mrc-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(255,255,255,0.03); border: 1px solid var(--anet-line); border-radius: 8px; font-family: var(--anet-font-mono); font-size: 13px; } .anet-mrc-label { color: var(--anet-text-dim); letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; } .anet-mrc-value { color: var(--anet-green); font-weight: 800; font-size: 16px; text-shadow: 0 0 8px rgba(57,255,20,0.4); } .anet-mrc-foot { margin-top: 6px; font-family: var(--anet-font-mono); font-size: 11px; color: var(--anet-text-muted); text-align: right; } /* Recent-posts widget (mods/sidebar/005-recent-posts.xjs) */ .anet-recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .anet-recent-item { padding: 8px 10px; background: rgba(255,255,255,0.03); border: 1px solid var(--anet-line); border-radius: 8px; transition: background .15s ease, border-color .15s ease; } .anet-recent-item:hover { background: rgba(255,255,255,0.05); border-color: var(--anet-line-strong); } .anet-recent-subj { font-weight: 600; font-size: 13px; color: #fff; line-height: 1.3; margin-bottom: 3px; } .anet-recent-meta { font-family: var(--anet-font-mono); font-size: 11px; color: var(--anet-text-muted); display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; } .anet-recent-from { color: var(--anet-cyan); font-weight: 600; } .anet-recent-sep { opacity: 0.5; } .anet-recent-sub { color: var(--anet-green); } .anet-recent-ago { margin-left: auto; background: rgba(0,0,0,0.3); padding: 1px 6px; border-radius: 999px; border: 1px solid var(--anet-line); } .anet-recent-empty { font-size: 12px; color: var(--anet-text-muted); font-style: italic; padding: 6px 2px; } /* Blockquote (forum messages) */ blockquote { background: rgba(0, 255, 234, 0.04); border-left: 4px solid var(--anet-line-strong) !important; color: var(--anet-text-dim); border-radius: 8px; padding: 10px 14px !important; } div.message { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--anet-line); border-radius: var(--anet-radius-sm); padding: 14px; margin: 12px 0; } /* Pagination */ .pagination > li > a, .pagination > li > span { background: rgba(255, 255, 255, 0.03) !important; border-color: var(--anet-line) !important; color: var(--anet-text) !important; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover { background: var(--anet-cyan) !important; color: #06070d !important; border-color: var(--anet-cyan) !important; } .pagination > li > a:hover { background: rgba(0,255,234,0.08) !important; color: var(--anet-cyan) !important; } /* Alerts */ .alert { border-radius: var(--anet-radius-sm) !important; border: 1px solid var(--anet-line) !important; background: rgba(255, 255, 255, 0.03) !important; color: var(--anet-text); } .alert-info { border-left: 4px solid var(--anet-cyan) !important; } .alert-success { border-left: 4px solid var(--anet-green) !important; } .alert-warning { border-left: 4px solid var(--anet-yellow) !important; } .alert-danger { border-left: 4px solid var(--anet-pink) !important; } /* Glyphicons (BS3) — keep visible */ .glyphicon { color: inherit; } /* Pre/code */ pre, code, kbd, samp { font-family: var(--anet-font-mono); background: rgba(0, 0, 0, 0.4) !important; border: 1px solid var(--anet-line); border-radius: 6px; color: var(--anet-cyan); } pre.ansi { background: #000 !important; } /* ========================================================================== DARK MODE — already-dark theme; prevent BS3 .dark from re-applying weirdly ========================================================================== */ .dark { background-color: transparent !important; color: var(--anet-text) !important; } .dark .navbar { background-color: transparent !important; } .dark .navbar-brand { color: #fff !important; } .dark .dropdown-menu { background-color: #14172a !important; } .dark .list-group-item { background-color: rgba(255,255,255,0.03) !important; color: var(--anet-text) !important; border-color: var(--anet-line) !important; } .dark .breadcrumb { background-color: rgba(255,255,255,0.03) !important; } .dark .modal-content { background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%) !important; color: var(--anet-text) !important; } .dark a.btn, .dark .btn { background-color: rgba(255,255,255,0.04) !important; color: var(--anet-text) !important; } .dark .btn-primary { background: linear-gradient(135deg, var(--anet-cyan), #00b4ff) !important; color: #06070d !important; } .dark input, .dark select, .dark textarea { background: rgba(255,255,255,0.03) !important; color: var(--anet-text) !important; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 991px) { body { padding-top: 94px; } .navbar-default .navbar-nav > li > a { padding: 12px 14px !important; } .navbar-default .navbar-nav > li > a::after { display: none; } .navbar-collapse { background: rgba(10,12,26,0.95); border-top: 1px solid var(--anet-line); } } @media (max-width: 480px) { /* hide topstrip on tiny screens to save vertical space */ .anet-topstrip { display: none; } .navbar-default.navbar-fixed-top, .navbar.anet-navbar.navbar-fixed-top { top: 0 !important; } body { padding-top: 60px; } } /* ========================================================================== COMPACT HERO (used on subpages like the gallery) ========================================================================== */ .anet-hero-compact { padding: 28px 22px; margin-bottom: 18px; } /* ========================================================================== GAME GALLERY (mods/pages/008-gameservers.xjs) ========================================================================== */ .anet-gallery-toolbar { position: sticky; top: 94px; z-index: 10; margin: 0 -4px 18px; padding: 12px 14px; background: linear-gradient(180deg, rgba(8,9,15,0.92) 0%, rgba(10,12,26,0.92) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--anet-line); border-radius: var(--anet-radius); box-shadow: 0 12px 30px rgba(0,0,0,0.45); } .anet-gallery-search { margin-bottom: 10px; } .anet-gallery-search input.anet-input { width: 100%; padding: 12px 14px !important; font-size: 14px !important; } .anet-gallery-filter { display: flex; flex-wrap: wrap; gap: 8px; } .anet-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--anet-line); color: var(--anet-text-dim); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s ease; } .anet-chip:hover { background: rgba(0,255,234,0.08); color: var(--anet-cyan); border-color: var(--anet-line-strong); } .anet-chip.is-active { background: linear-gradient(135deg, var(--anet-cyan), #00b4ff); color: #06070d; border-color: transparent; box-shadow: 0 4px 16px rgba(0,255,234,0.34); } .anet-chip-count { background: rgba(0,0,0,0.25); color: inherit; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-family: var(--anet-font-mono); } .anet-chip.is-active .anet-chip-count { background: rgba(0,0,0,0.35); } .anet-chip-icon { font-size: 14px; } .anet-gal-section { margin: 0 0 30px; } .anet-gal-section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--anet-line); flex-wrap: wrap; } .anet-gal-cat-icon { font-size: 22px; } .anet-gal-section-head h2 { margin: 0; font-size: 20px; color: #fff; } .anet-gal-cat-count { background: rgba(0,255,234,0.1); color: var(--anet-cyan); border: 1px solid var(--anet-line-strong); padding: 2px 10px; border-radius: 999px; font-family: var(--anet-font-mono); font-size: 12px; } .anet-gal-cat-desc { color: var(--anet-text-muted); font-size: 13px; flex: 1; } .anet-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .anet-gal-card { display: block; border-radius: var(--anet-radius); background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%); border: 1px solid var(--anet-line); overflow: hidden; text-decoration: none; color: var(--anet-text); position: relative; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .anet-gal-card:hover { transform: translateY(-3px); border-color: var(--anet-line-strong); box-shadow: 0 14px 38px rgba(0,0,0,0.6), 0 0 0 1px var(--anet-line-strong); text-shadow: none; } .anet-gal-thumb { position: relative; background: #000; aspect-ratio: 16 / 10; overflow: hidden; display: flex; align-items: center; justify-content: center; } .anet-gal-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .35s ease; } .anet-gal-card:hover .anet-gal-thumb img { transform: scale(1.04); } .anet-gal-thumb-shine { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.65) 100%); pointer-events: none; } .anet-gal-meta { padding: 12px 14px; border-top: 1px solid var(--anet-line); } .anet-gal-cat-tag { font-family: var(--anet-font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--anet-green); text-transform: uppercase; margin-bottom: 4px; } .anet-gal-title { font-weight: 600; font-size: 14px; color: #fff; line-height: 1.3; } .anet-gallery-empty { text-align: center; padding: 60px 20px; background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%); border: 1px solid var(--anet-line); border-radius: var(--anet-radius); } .anet-gallery-empty h3 { margin: 12px 0 6px; } .anet-gallery-empty p { color: var(--anet-text-muted); } /* ========================================================================== LIGHTBOX (game gallery) ========================================================================== */ html.anet-lb-open, html.anet-lb-open body { overflow: hidden; } /* Override our display:flex when the [hidden] attribute is set so that lb.hidden = true actually hides the lightbox. Browsers treat [hidden] as display:none by default but our .anet-lightbox display:flex wins without this explicit rule. */ .anet-lightbox[hidden] { display: none !important; } .anet-lightbox { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; } .anet-lightbox-backdrop { position: absolute; inset: 0; background: radial-gradient(800px 500px at 50% 50%, rgba(0,255,234,0.10), rgba(0,0,0,0.85) 60%, rgba(0,0,0,0.95)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .anet-lightbox-frame { position: relative; z-index: 1; max-width: min(1100px, 96vw); max-height: 92vh; width: 100%; display: flex; flex-direction: column; background: linear-gradient(160deg, var(--anet-card-1) 0%, var(--anet-card-2) 100%); border: 1px solid var(--anet-line-strong); border-radius: var(--anet-radius); box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 0 1px var(--anet-line); overflow: hidden; animation: anet-lb-in .22s ease-out both; } @keyframes anet-lb-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .anet-lightbox-chrome { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: linear-gradient(180deg, #1a1d2e, #11142a); border-bottom: 1px solid var(--anet-line); font-family: var(--anet-font-mono); font-size: 13px; color: var(--anet-text-dim); } .anet-lightbox-chrome .anet-term-dot[data-anet-lb-close] { cursor: pointer; } .anet-lightbox-title { flex: 1; margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; } .anet-lightbox-x { background: transparent; border: 0; color: var(--anet-text-dim); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px; } .anet-lightbox-x:hover { color: var(--anet-cyan); } .anet-lightbox-body { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; background: #000; overflow: auto; min-height: 200px; } .anet-lightbox-body img { max-width: 100%; max-height: calc(92vh - 110px); display: block; background: #000; } .anet-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); border: 1px solid var(--anet-line); color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 24px; cursor: pointer; z-index: 1; transition: background .15s ease, border-color .15s ease, transform .12s ease; display: flex; align-items: center; justify-content: center; } .anet-lb-nav:hover { background: rgba(0,255,234,0.14); border-color: var(--anet-line-strong); color: var(--anet-cyan); transform: translateY(-50%) scale(1.06); } .anet-lb-prev { left: 12px; } .anet-lb-next { right: 12px; } .anet-lightbox-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--anet-line); background: rgba(0,0,0,0.25); } .anet-lightbox-counter { font-family: var(--anet-font-mono); font-size: 12px; color: var(--anet-text-muted); } @media (max-width: 640px) { .anet-gallery-toolbar { top: 60px; } .anet-gal-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .anet-gal-thumb { aspect-ratio: 4 / 3; } .anet-gal-meta { padding: 10px; } .anet-gal-title { font-size: 13px; } .anet-lb-nav { width: 38px; height: 38px; font-size: 20px; } } @media (max-width: 420px) { .anet-gal-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .anet-hero { padding: 28px 18px; } .anet-section { padding: 16px; } .anet-feature-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .anet-feature { padding: 14px; } .anet-feature h3 { font-size: 16px; } .anet-radio-frame iframe { height: 520px; } } @media (max-width: 420px) { .anet-feature-grid { grid-template-columns: 1fr; } } /* ========================================================================== FINAL NAVBAR HOVER OVERRIDE — placed last so source-order wins any tie. The Log-in link kept getting a white block because BS3's .navbar-default .navbar-nav > .open > a { background-color: #d5d5d5 } plus its descendant rules layer on the dropdown-toggle. This block is broad: any link/button/dropdown-toggle/list-item inside the navbar in any state gets cyan-on-glass (or transparent for non-interactive states). ========================================================================== */ .navbar-default, .navbar-default ul, .navbar-default li, .navbar-default .nav-item, .navbar-default .navbar-nav, .navbar-default .navbar-collapse, .navbar-default .open, .navbar-default .open > a, .navbar-default .nav-link, .navbar-default .dropdown-toggle, .navbar-default a, .navbar-default a:link, .navbar-default a:visited { background-color: transparent !important; } .navbar-default a:hover, .navbar-default a:focus, .navbar-default a:active, .navbar-default .nav-link:hover, .navbar-default .nav-link:focus, .navbar-default .nav-link:active, .navbar-default .dropdown-toggle:hover, .navbar-default .dropdown-toggle:focus, .navbar-default .dropdown-toggle:active, .navbar-default li:hover > a, .navbar-default li.open > a, .navbar-default li.open > a:hover, .navbar-default li.open > a:focus, .navbar-default li.active > a, .navbar-default li.active > a:hover, .navbar-default li.active > a:focus, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background: rgba(0, 255, 234, 0.10) !important; background-color: rgba(0, 255, 234, 0.10) !important; color: var(--anet-cyan) !important; text-shadow: 0 0 8px rgba(0, 255, 234, 0.4); } /* Dropdown menu itself — make the entire menu (including dim padding zones) immune to BS3's `background-color: #fff` default. */ .navbar-default .dropdown-menu, .navbar-default .dropdown-menu.anet-dropdown, #login-form.dropdown-menu { background: linear-gradient(180deg, #14172a 0%, #0e1020 100%) !important; background-color: #14172a !important; border: 1px solid var(--anet-line) !important; } /* The Login dropdown-toggle specifically (anet-login-toggle class) */ .navbar-default a.anet-login-toggle, .navbar-default a.anet-login-toggle:hover, .navbar-default a.anet-login-toggle:focus, .navbar-default a.anet-login-toggle:active, .navbar-default .open > a.anet-login-toggle { background: transparent !important; background-color: transparent !important; } .navbar-default a.anet-login-toggle:hover, .navbar-default a.anet-login-toggle:focus, .navbar-default .open > a.anet-login-toggle { background: rgba(0, 255, 234, 0.10) !important; background-color: rgba(0, 255, 234, 0.10) !important; color: var(--anet-cyan) !important; } /* ========================================================================== FORUM / FILES / MAIL — polish pass on the inherited stock pages. These pages emit standard BS3 markup (panel + list-group + table). The rules below tighten visual hierarchy: avatars become circular, message bodies get card framing, timestamps go monospace, sub/forum lists get a left accent bar, and replies/quotes use the brand accent. ========================================================================== */ /* Forum: thread/sub list rows */ a.list-group-item.scanned, a.list-group-item.unread { position: relative; padding-left: 18px !important; } a.list-group-item.scanned::before, a.list-group-item.unread::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--anet-cyan); border-radius: 2px; box-shadow: 0 0 8px var(--anet-line-strong); } a.list-group-item.read::before { background: var(--anet-text-muted); box-shadow: none; } /* Sub-board listing: badge counters */ .list-group-item .badge { background: rgba(0,0,0,0.3) !important; border: 1px solid var(--anet-line); color: var(--anet-text-dim) !important; font-family: var(--anet-font-mono); font-weight: 600; } .list-group-item .badge.scanned, .list-group-item .badge.new { background: var(--anet-grad-primary-btn) !important; color: #fff !important; border-color: transparent; } /* Message viewer: header (from/to/date/subject) */ div.message { background: var(--anet-grad-card); border: 1px solid var(--anet-line); border-radius: var(--anet-radius); padding: 0; overflow: hidden; margin: 14px 0; box-shadow: 0 6px 20px rgba(0,0,0,0.35); } div.message > .message-header, div.message > .panel-heading { background: rgba(0,0,0,0.35) !important; padding: 10px 14px !important; border-bottom: 1px solid var(--anet-line) !important; font-family: var(--anet-font-mono); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; } div.message .message-from, div.message [class*="from"] strong { color: var(--anet-cyan); font-weight: 700; } div.message .message-date, div.message [class*="date"] { color: var(--anet-text-muted); font-size: 12px; } div.message > .panel-body, div.message > .message-body { padding: 14px 16px !important; background: transparent !important; font-size: 14px; line-height: 1.55; } /* Avatars (forum/recent visitors) */ div.message img, .message-from img, .list-group-item img:not(.anet-brand-mark) { border-radius: 8px; border: 1px solid var(--anet-line); } .icon, img.icon, img.avatar { width: 40px !important; height: 40px !important; border-radius: 50% !important; object-fit: cover; border: 1px solid var(--anet-line-strong) !important; background: rgba(0,0,0,0.35); } /* Reply/compose form */ .reply, .compose, form.compose { background: var(--anet-grad-card); border: 1px solid var(--anet-line); border-radius: var(--anet-radius); padding: 14px; margin: 18px 0; box-shadow: 0 6px 20px rgba(0,0,0,0.35); } textarea.form-control { font-family: var(--anet-font-mono) !important; min-height: 160px; line-height: 1.5; } /* Quoted text in messages — use a brand-accent bar */ blockquote { background: rgba(255, 255, 255, 0.02) !important; border-left: 3px solid var(--anet-line-strong) !important; position: relative; padding-left: 16px !important; font-style: normal; margin: 8px 0; } .dark blockquote, html.theme-underground blockquote { background: rgba(255, 255, 255, 0.02) !important; } /* Vote buttons (forum reactions) */ .btn-uv, .btn-dv { font-size: 12px; padding: 4px 8px !important; font-family: var(--anet-font-mono); } .upvote-bg { background-color: var(--anet-cyan) !important; color: #06070d !important; } .downvote-bg { background-color: var(--anet-purple) !important; color: #fff !important; } .upvote-fg, .upvote:hover { color: var(--anet-cyan) !important; } .downvote-fg, .downvote:hover { color: var(--anet-purple) !important; } /* Mail list: unread vs read */ li.list-group-item.mail { display: flex; align-items: center; gap: 10px; } a.unread { font-weight: 700; background: rgba(255,255,255,0.05) !important; } a.read { font-weight: 400; opacity: 0.85; } /* Files: directory and file rows */ .list-group-item .glyphicon-folder-open, .list-group-item .glyphicon-folder-close, .list-group-item .glyphicon-file { margin-right: 8px; color: var(--anet-cyan); } .list-group-item .glyphicon-folder-close { color: var(--anet-green); } /* Pagination polish (already styled — tighten spacing) */ .pagination > li > a, .pagination > li > span { padding: 6px 12px !important; margin: 0 2px; border-radius: 8px !important; font-family: var(--anet-font-mono); font-size: 13px; } /* Page header (h1/h2 on subpages) */ .container > h1, .container > h2, .container-fluid > h1, .container-fluid > h2 { margin-top: 12px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--anet-line); } html.theme-underground .container > h1, html.theme-underground .container > h2, html.theme-underground .container-fluid > h1, html.theme-underground .container-fluid > h2 { font-family: var(--anet-font-display-bold-stack); text-transform: uppercase; letter-spacing: 0.02em; } /* ========================================================================== GENERIC .nav HOVER OVERRIDE — BS3 also has a non-navbar-scoped rule: .nav > li > a:focus, .nav > li > a:hover { background-color: #eee } That's the actual source of the "white" highlight on Login (it's #eee, light gray, but reads as white on most monitors). Override it for any .nav inside any .navbar. ========================================================================== */ .navbar .nav > li > a, .navbar .nav > li > a:link, .navbar .nav > li > a:visited { background-color: transparent !important; } .navbar .nav > li > a:hover, .navbar .nav > li > a:focus, .navbar .nav > li > a:active, .navbar .nav > li.open > a, .navbar .nav > li.open > a:hover, .navbar .nav > li.open > a:focus, .navbar .nav > li.active > a, .navbar .nav > li.active > a:hover, .navbar .nav > li.active > a:focus, .anet-navbar .nav > li > a:hover, .anet-navbar .nav > li > a:focus, .anet-navbar .nav > li.open > a, .anet-navbar .nav > li.active > a { background: rgba(0, 255, 234, 0.10) !important; background-color: rgba(0, 255, 234, 0.10) !important; color: var(--anet-cyan) !important; text-shadow: 0 0 8px rgba(0, 255, 234, 0.4); } /* Anet-navbar variant — target the Log-in toggle by its unique class chain. These selectors don't depend on .navbar-default at all. */ .anet-navbar a.anet-login-toggle, .anet-navbar a.anet-nav-link { background-color: transparent !important; } .anet-navbar a.anet-login-toggle:hover, .anet-navbar a.anet-login-toggle:focus, .anet-navbar a.anet-login-toggle:active, .anet-navbar a.anet-nav-link:hover, .anet-navbar a.anet-nav-link:focus, .anet-navbar a.anet-nav-link:active, .anet-navbar li.open > a.anet-login-toggle, .anet-navbar li.open > a.anet-nav-link { background: rgba(0, 255, 234, 0.10) !important; background-color: rgba(0, 255, 234, 0.10) !important; color: var(--anet-cyan) !important; }