/* * SYNTHWAVE / 80s theme — applied when * Original styles.css is untouched; everything here is additive overrides. */ /* ── variables ─────────────────────────────────────────────── */ body.theme-synth { --ink: #08000f; --panel: #0e0020; --panel-2: #160030; --line: #3d0066; --rock: #ff1060; --metal: #ff7700; --indie: #00ffcc; --electronic: #00bbff; --pop: #ee00ff; --other: #7755aa; --synth-pink: rgba(255,0,170,.5); --synth-glow: rgba(255,0,170,.18); --synth-muted: #9966cc; } /* ── scanlines (VHS) ────────────────────────────────────────── */ body.theme-synth::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0,0,0,.15) 3px, rgba(0,0,0,.15) 4px ); } /* ── noise grain (VHS) ──────────────────────────────────────── */ body.theme-synth::after { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .35; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); animation: synth-noise .14s steps(1) infinite; } @keyframes synth-noise { 0% { background-position: 0 0 } 25% { background-position: -5% -10% } 50% { background-position: 10% 5% } 75% { background-position: -5% 10% } 100% { background-position: 5% -5% } } /* ── hide/show synthwave-only decorations ───────────────────── */ .synth-rec, #synthDecorations { display: none; } body.theme-synth .synth-rec { display: flex; } body.theme-synth #synthDecorations { display: block; } /* ── REC indicator ──────────────────────────────────────────── */ .synth-rec { align-items: center; gap: 6px; font-family: "Share Tech Mono", monospace; font-size: 10px; letter-spacing: .14em; color: #ff2244; text-transform: uppercase; } .synth-rec-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff2244; box-shadow: 0 0 7px #ff2244, 0 0 14px rgba(255,34,68,.5); flex-shrink: 0; animation: synth-blink 1.1s ease-in-out infinite; } @keyframes synth-blink { 0%,100%{opacity:1} 50%{opacity:.08} } /* ── VHS corner labels ──────────────────────────────────────── */ .synth-vhs-tl, .synth-vhs-br { position: fixed; z-index: 5000; pointer-events: none; font-family: "Share Tech Mono", monospace; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(200,100,255,.45); text-shadow: 0 0 8px rgba(200,100,255,.3); } .synth-vhs-tl { top: 68px; left: 358px; } .synth-vhs-br { bottom: 10px; right: 10px; } /* ── synthwave map overlay (grid + sun + horizon) ───────────── */ .synth-map-overlay { position: fixed; /* sits over the visible map area, under sidebar (z 900) and header (z 1000) */ top: 60px; left: 350px; right: 0; bottom: 0; z-index: 850; pointer-events: none; overflow: hidden; } /* retro sun: a semi-circle at the horizon, soft glow only */ .synth-sun { position: absolute; bottom: 48%; left: 50%; transform: translateX(-50%); width: 200px; height: 100px; border-radius: 200px 200px 0 0; background: linear-gradient(to top, rgba(255,180,0,.18), rgba(255,80,30,.08), transparent); overflow: hidden; filter: blur(2px); } /* horizontal stripe mask on the sun */ .synth-sun::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( to top, transparent 0px, transparent 12px, rgba(8,0,15,.55) 12px, rgba(8,0,15,.55) 16px ); mask-image: linear-gradient(to top, transparent 0%, black 70%); border-radius: inherit; } /* horizon line */ .synth-horizon { position: absolute; left: 0; right: 0; bottom: 48%; height: 1px; background: linear-gradient( to right, transparent, rgba(255,80,160,.45), rgba(80,200,255,.45), rgba(255,80,160,.45), transparent ); box-shadow: 0 0 8px 2px rgba(255,80,160,.18), 0 0 20px 4px rgba(255,80,160,.07); } /* perspective grid */ .synth-grid-wrap { position: absolute; bottom: 0; left: -20%; right: -20%; height: 50%; overflow: hidden; perspective: 280px; } .synth-grid-inner { position: absolute; inset: 0; transform: rotateX(48deg); transform-origin: top center; background-image: linear-gradient(to right, rgba(155,50,220,.16) 1px, transparent 1px), linear-gradient(to bottom, rgba(155,50,220,.16) 1px, transparent 1px); background-size: 90px 65px; animation: synth-grid 5s linear infinite; /* fade in from horizon */ mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 100%); } @keyframes synth-grid { from { background-position: 0 0; } to { background-position: 0 65px; } } /* ── header ─────────────────────────────────────────────────── */ body.theme-synth header { border-bottom: 1px solid rgba(255,0,170,.55); box-shadow: 0 0 18px rgba(255,0,170,.22), 0 0 50px rgba(255,0,170,.07); } /* ── logo — full chromatic aberration restored ──────────────── */ body.theme-synth .logo { font-family: "Orbitron", monospace; letter-spacing: .14em; font-size: 24px; color: rgba(0,229,255,.95); text-shadow: 0 0 6px rgba(0,229,255,.7), 0 0 22px rgba(0,229,255,.35), 0 0 50px rgba(0,229,255,.15); filter: drop-shadow( 2px 0 0 rgba(255,0,170,.65)) drop-shadow(-2px 0 0 rgba(0,229,255,.65)); } body.theme-synth .logo span { color: #ff00aa; text-shadow: 0 0 6px rgba(255,0,170,.7), 0 0 22px rgba(255,0,170,.35), 0 0 50px rgba(255,0,170,.15); } body.theme-synth .tagline { font-family: "Share Tech Mono", monospace; font-size: 11px; letter-spacing: .1em; } body.theme-synth .src-badge { font-family: "Share Tech Mono", monospace; border-radius: 4px; background: rgba(191,0,255,.07); border-color: rgba(191,0,255,.3); box-shadow: 0 0 10px rgba(191,0,255,.12); } body.theme-synth .src-badge b { color: rgba(0,229,255,.95); } /* ── sidebar ────────────────────────────────────────────────── */ body.theme-synth aside { border-right: 1px solid rgba(255,0,170,.5); box-shadow: 4px 0 28px rgba(255,0,170,.12); } body.theme-synth .panel-section h2 { font-family: "Orbitron", monospace; font-size: 8px; color: #ff00aa; letter-spacing: .28em; text-shadow: 0 0 12px rgba(255,0,170,.55); } /* ── inputs ─────────────────────────────────────────────────── */ body.theme-synth input[type=text], body.theme-synth input[type=month], body.theme-synth select { font-family: "Share Tech Mono", monospace; border-color: #5a0099; background: rgba(22,0,48,.8); } body.theme-synth input:focus, body.theme-synth select:focus { outline-color: rgba(0,229,255,.75); box-shadow: 0 0 0 2px rgba(0,229,255,.14), 0 0 14px rgba(0,229,255,.18); } /* ── load button ────────────────────────────────────────────── */ body.theme-synth .btn { background: transparent; border: 1.5px solid #ff00aa; color: #ff00aa; font-family: "Orbitron", monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border-radius: 4px; text-shadow: 0 0 10px rgba(255,0,170,.6); box-shadow: 0 0 12px rgba(255,0,170,.22), inset 0 0 12px rgba(255,0,170,.06); transition: all .15s; } body.theme-synth .btn:hover { background: rgba(255,0,170,.12); box-shadow: 0 0 22px rgba(255,0,170,.4), inset 0 0 18px rgba(255,0,170,.1); text-shadow: 0 0 14px #ff00aa; } body.theme-synth .btn:disabled { background: transparent; border-color: var(--line); color: var(--synth-muted); box-shadow: none; text-shadow: none; } /* ── genre chips ─────────────────────────────────────────────── */ body.theme-synth .chip { font-family: "Share Tech Mono", monospace; font-size: 11px; border-radius: 3px; } body.theme-synth .chip.on { text-shadow: 0 0 8px var(--c, transparent); box-shadow: 0 0 10px rgba(255,255,255,.05), 0 0 6px var(--c, transparent); } /* ── show cards ─────────────────────────────────────────────── */ body.theme-synth .card .band { font-family: "Orbitron", monospace; font-size: 11.5px; letter-spacing: .07em; } body.theme-synth .card .meta, body.theme-synth .card .date { font-family: "Share Tech Mono", monospace; font-size: 11px; } body.theme-synth .card::before { box-shadow: 0 0 8px 1px var(--c, transparent); } body.theme-synth .card:hover, body.theme-synth .card.active { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.06); } body.theme-synth .card .date { text-shadow: 0 0 8px var(--c, transparent); } /* ── map markers — stronger neon pulse ──────────────────────── */ body.theme-synth .gig-dot .core { box-shadow: 0 0 14px 3px var(--c); } body.theme-synth .gig-dot .halo { border-width: 2px; opacity: .75; } /* ── sidebar toggle ─────────────────────────────────────────── */ body.theme-synth .side-toggle { border-color: rgba(255,0,170,.55); color: #ff00aa; border-radius: 4px; box-shadow: 0 0 10px rgba(255,0,170,.2); text-shadow: 0 0 8px #ff00aa; } /* ── status ─────────────────────────────────────────────────── */ body.theme-synth .status { font-family: "Share Tech Mono", monospace; font-size: 11px; letter-spacing: .05em; } body.theme-synth .status strong { color: rgba(0,229,255,.95); } /* ── popups ─────────────────────────────────────────────────── */ body.theme-synth .leaflet-popup-content-wrapper { border-color: rgba(100,0,180,.6); background: var(--panel); box-shadow: 0 0 24px rgba(180,0,255,.2); } body.theme-synth .pop .band { font-family: "Orbitron", monospace; font-size: 18px; } /* ── theme toggle button ─────────────────────────────────────── */ .theme-btn { font-family: "Space Grotesk", sans-serif; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 6px; } .theme-btn:hover { border-color: var(--rock); color: var(--text); } .theme-btn .theme-icon { font-style: normal; font-size: 13px; } body.theme-synth .theme-btn { font-family: "Orbitron", monospace; font-size: 9px; border-color: rgba(0,229,255,.5); color: rgba(0,229,255,.85); border-radius: 4px; background: rgba(0,229,255,.05); box-shadow: 0 0 10px rgba(0,229,255,.12); text-shadow: 0 0 8px rgba(0,229,255,.45); } body.theme-synth .theme-btn:hover { background: rgba(0,229,255,.1); box-shadow: 0 0 18px rgba(0,229,255,.22); } /* ── Leaflet controls ────────────────────────────────────────── */ body.theme-synth .leaflet-control-zoom a { border-color: var(--line) !important; }