/* ===================================================== RADIOTELEFONI TRÄNARE – TEMAN Aktiveras med data-theme="xxx" på . ===================================================== */ /* ── RadioTrainer mörk — brand navy / night operations ─ */ :root[data-theme="dark"] { --bg: #050c18; --panel: #0a1626; --card: #0f2035; --border: #243b57; --green: #54d99b; --green-dim: #09271d; --amber: #f5c313; --amber-dim: #352a05; --red: #ff7d85; --blue: #66adff; --text: #edf4fb; --text-dim: #91a8c0; --radio: #45c6f4; --tmpl: #74dfac; --r: 8px; --radio-glow: rgba(69,198,244,.2); --border-hi: rgba(255,255,255,.065); --card-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.25); } [data-theme="dark"] body { background-image: radial-gradient(circle at 50% -20%, rgba(15,98,173,.2), transparent 42%), radial-gradient(ellipse 130% 100% at 50% 50%, transparent 52%, rgba(0,0,0,.48) 100%), radial-gradient(circle, rgba(102,173,255,.025) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 30px 30px; } [data-theme="dark"] .menu-brand-lockup { display:block; width:min(390px,78vw); height:auto; margin:2px auto 14px; padding:12px 18px; border:1px solid rgba(255,255,255,.18); border-radius:16px; background:rgba(255,255,255,.96); box-shadow:0 18px 46px rgba(0,0,0,.28),0 0 0 1px rgba(69,198,244,.08); } [data-theme="dark"] .menu-header h1 { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } [data-theme="dark"] .air-card { background:linear-gradient(145deg, rgba(18,39,64,.98), rgba(8,20,35,.96)); border-color:rgba(102,173,255,.22); } [data-theme="dark"] .air-card:hover { box-shadow:var(--card-shadow),0 16px 42px rgba(0,0,0,.3); } [data-theme="dark"] .freq-display { border-color:rgba(69,198,244,.38); color:var(--radio); text-shadow:0 0 14px rgba(69,198,244,.3); box-shadow:inset 0 0 16px rgba(0,0,0,.72),0 0 22px rgba(69,198,244,.06); } [data-theme="dark"] .template-box { background:rgba(69,198,244,.045); border-bottom-color:rgba(69,198,244,.16); } [data-theme="dark"] .template-box::before { background:linear-gradient(180deg, transparent 5%, #f5c313 30%, #f5c313 70%, transparent 95%); } [data-theme="dark"] .opt-btn.selected, [data-theme="dark"] .plane-type-btn.selected, [data-theme="dark"] .speech-mode-btn.selected { border-color:var(--radio); color:var(--text); background:rgba(69,198,244,.12); } [data-theme="dark"] .btn-start, [data-theme="dark"] .route-start-btn, [data-theme="dark"] .rbtn-primary { background:linear-gradient(135deg, #0f62ad, #1589c9); color:#fff; border-color:rgba(102,173,255,.42); } [data-theme="dark"] .theme-picker { background:rgba(5,12,24,.66); border-color:rgba(102,173,255,.18); } @media(max-width:640px){ [data-theme="dark"] .menu-brand-lockup { width:min(310px,86vw); margin-bottom:10px; padding:9px 13px; border-radius:13px; } } /* ── 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: 32px; height: 32px; 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); }