/* ===================================================== RADIOTELEFONI TRÄNARE – TEMAN Aktiveras med data-theme="xxx" på . ===================================================== */ /* ── Cockpit / HUD — pure phosphor CRT terminal ─────── */ :root[data-theme="cockpit"] { --bg: #010503; --panel: #020a04; --card: #031308; --border: #0a2e12; --green: #00ff88; --green-dim: #001a08; --amber: #ffe066; --amber-dim: #1e1600; --red: #ff3a4a; --blue: #00ccff; --text: #7dffc0; --text-dim: #4db87e; --radio: #00ff88; --tmpl: var(--radio); --r: 1px; --radio-glow: rgba(0,255,136,.28); --border-hi: rgba(0,255,136,.06); } /* CRT scanlines over the entire page */ [data-theme="cockpit"] body { font-family: 'Share Tech Mono', 'Courier New', monospace; background-image: radial-gradient(ellipse 130% 100% at 50% 50%, transparent 48%, rgba(0,0,0,.65) 100%), repeating-linear-gradient( 0deg, rgba(0,0,0,.14) 0px, rgba(0,0,0,.14) 1px, transparent 1px, transparent 3px ), radial-gradient(circle, rgba(0,255,136,.016) 1px, transparent 1px); background-size: 100% 100%, 100% 3px, 20px 20px; background-position: center, 0 0, 0 0; } /* Glowing phosphor title */ [data-theme="cockpit"] .menu-header h1 { font-family: 'Share Tech Mono', monospace; letter-spacing: .22em; text-transform: uppercase; color: var(--radio); text-shadow: 0 0 14px var(--radio), 0 0 40px rgba(0,255,136,.28), 0 0 80px rgba(0,255,136,.1); } [data-theme="cockpit"] .menu-header h1 span { color: var(--radio) } [data-theme="cockpit"] .menu-header p { font-family: 'Share Tech Mono', monospace; color: var(--text-dim) } /* Sharp-cornered cards with glow badges */ [data-theme="cockpit"] .air-card { border-radius: 1px } [data-theme="cockpit"] .air-card .badge { border-radius: 1px; box-shadow: 0 0 8px currentColor; } /* Intensified freq display */ [data-theme="cockpit"] .freq-display { border-color: rgba(0,255,136,.38); text-shadow: 0 0 8px var(--radio), 0 0 28px rgba(0,255,136,.38), 0 0 60px rgba(0,255,136,.14); box-shadow: inset 0 0 16px rgba(0,0,0,.95), inset 0 1px 0 rgba(0,255,136,.05), 0 0 24px rgba(0,255,136,.1); } /* Template text glows */ [data-theme="cockpit"] .template-box .tmpl { text-shadow: 0 0 7px var(--radio), 0 0 18px rgba(0,255,136,.2); } /* Annunciator badges */ [data-theme="cockpit"] .mode-badge { border-radius: 1px; text-shadow: 0 0 8px currentColor; } /* Selected states glow */ [data-theme="cockpit"] .opt-btn.selected { text-shadow: 0 0 8px var(--radio); } /* Sharp UI elements */ [data-theme="cockpit"] .ptt-btn { border-radius: 1px } [data-theme="cockpit"] .btn-start { border-radius: 1px } [data-theme="cockpit"] .send-btn { border-radius: 1px } [data-theme="cockpit"] .setup-section { border-radius: 1px } [data-theme="cockpit"] .results-card { border-radius: 1px } [data-theme="cockpit"] .rbtn { border-radius: 1px } /* ── Militär / Navigationskarta — warm operational ───── */ :root[data-theme="military"] { --bg: #0f0f09; --panel: #151410; --card: #1b1a13; --border: #373520; --green: #6a9a50; --green-dim: #101d08; --amber: #c8a030; --amber-dim: #221c00; --red: #a83028; --blue: #4a7a90; --text: #d2c99c; --text-dim: #8a7e4a; --radio: #b89040; --tmpl: var(--radio); --r: 2px; --radio-glow: rgba(184,144,64,.18); --border-hi: rgba(255,255,255,.04); } /* Cartographic dot grid — warm tone */ [data-theme="military"] body { background-image: radial-gradient(ellipse 130% 100% at 50% 50%, transparent 48%, rgba(0,0,0,.45) 100%), radial-gradient(circle, rgba(210,200,150,.016) 1px, transparent 1px); background-size: 100% 100%, 28px 28px; } [data-theme="military"] .menu-header h1 { font-family: 'Barlow Condensed', sans-serif; font-variant: small-caps; letter-spacing: .14em; color: var(--radio); text-shadow: none; } [data-theme="military"] .menu-header h1 span { color: var(--radio); opacity: .75 } [data-theme="military"] .air-card { background: linear-gradient(145deg, var(--card), rgba(10,10,7,.9)); } [data-theme="military"] .air-card:hover { box-shadow: inset 0 1px 0 var(--border-hi), 0 8px 28px rgba(184,144,64,.1), 0 2px 8px rgba(0,0,0,.5); } [data-theme="military"] .air-card .badge { border-radius: 1px; letter-spacing: .16em; } [data-theme="military"] .freq-display { border-color: rgba(184,144,64,.35); color: var(--radio); text-shadow: 0 0 5px rgba(184,144,64,.4); box-shadow: inset 0 0 12px rgba(0,0,0,.88); } [data-theme="military"] .template-box { background: rgba(184,144,64,.04); border-bottom-color: rgba(184,144,64,.12); } [data-theme="military"] .template-box::before { background: linear-gradient(180deg, transparent 5%, var(--radio) 30%, var(--radio) 70%, transparent 95%); } [data-theme="military"] .opt-btn.selected { border-color: var(--radio); color: var(--radio); background: rgba(184,144,64,.07); } [data-theme="military"] .btn-start { background: var(--radio); color: #06050001; } [data-theme="military"] .send-btn { background: var(--radio); color: #060500; } [data-theme="military"] .ptt-btn { border-radius: 2px } /* ── Polarnatt — cold aurora / deep Nordic night ─────── */ :root[data-theme="arctic"] { --bg: #050c1c; --panel: #091228; --card: #0d1934; --border: #142542; --green: #00bfa8; --green-dim: #001a16; --amber: #ff8a30; --amber-dim: #281400; --red: #f05c5c; --blue: #58aef5; --text: #d5e8f6; --text-dim: #5a82a8; --radio: #00bfa8; --tmpl: var(--radio); --r: 10px; --radio-glow: rgba(0,191,168,.2); --border-hi: rgba(255,255,255,.055); } /* Aurora-tinted dot grid */ [data-theme="arctic"] body { background-image: radial-gradient(ellipse 140% 110% at 50% 50%, transparent 44%, rgba(0,0,0,.52) 100%), radial-gradient(circle, rgba(88,174,245,.018) 1px, transparent 1px); background-size: 100% 100%, 32px 32px; } [data-theme="arctic"] .menu-header h1 span { background: linear-gradient(90deg, #00bfa8, #58aef5 65%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; } [data-theme="arctic"] .air-card { background: linear-gradient(148deg, var(--card), rgba(6,12,26,.82)); border-radius: 10px; } [data-theme="arctic"] .air-card::before, [data-theme="arctic"] .air-card::after { display: none } [data-theme="arctic"] .air-card:hover { box-shadow: inset 0 1px 0 var(--border-hi), 0 12px 40px rgba(0,191,168,.12), 0 2px 10px rgba(0,0,0,.5); } [data-theme="arctic"] .air-card .badge { border-radius: 999px } [data-theme="arctic"] .freq-display { border-color: rgba(0,191,168,.26); color: var(--radio); text-shadow: 0 0 8px rgba(0,191,168,.55), 0 0 24px rgba(0,191,168,.18); box-shadow: inset 0 0 12px rgba(0,0,0,.85), 0 0 16px rgba(0,191,168,.05); } [data-theme="arctic"] .template-box { background: rgba(0,191,168,.04); border-bottom-color: rgba(0,191,168,.12); } [data-theme="arctic"] .template-box::before { background: linear-gradient(180deg, transparent 5%, var(--radio) 30%, var(--radio) 70%, transparent 95%); } [data-theme="arctic"] .opt-btn.selected { border-color: var(--radio); color: var(--radio); background: rgba(0,191,168,.07); } [data-theme="arctic"] .btn-start { background: linear-gradient(90deg, var(--radio), #58aef5 160%); color: #020d0b; border-radius: 999px; box-shadow: 0 0 0 0 var(--radio-glow); } [data-theme="arctic"] .btn-start:not(:disabled):hover { box-shadow: 0 0 20px var(--radio-glow); } [data-theme="arctic"] .send-btn { background: var(--radio); color: #020d0b; border-radius: 999px; } [data-theme="arctic"] .ptt-btn { border-radius: 999px } [data-theme="arctic"] .setup-section { border-radius: 10px } [data-theme="arctic"] .msg-atc { border-radius: 10px } [data-theme="arctic"] .msg-pilot { border-radius: 10px } [data-theme="arctic"] .callsign-input { color: var(--radio) } /* ── Temaväxlare — placerad i menyrubriken ───────────── */ .theme-picker { display: inline-flex; align-items: center; gap: 8px; justify-content: center; margin-top: 16px; padding: 6px 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; } .theme-dot { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; padding: 0; flex-shrink: 0; } .theme-dot:hover { transform: scale(1.4); border-color: rgba(255,255,255,.65); } .theme-dot.active { transform: scale(1.25); border-color: rgba(255,255,255,.9); box-shadow: 0 0 6px rgba(255,255,255,.28); }