/*! * City Discovery — Map / Explore Themes * ------------------------------------------------------------ * 6 teme în stil "hartă/explorare": fundal cu degradeu + strat * de grilă topografică și un "radar" discret. Tema setează * --gradient-bg (fundal + butoane) și --accent (borduri, focus, * logo) astfel încât întreaga paletă rămâne coerentă. * * Comutare: atributul data-theme pe (vezi base.html). * Implicit (înainte de JS): tema "nocturn" via :root. */ :root { /* Valori implicite = tema Nocturn (evită flash înainte de JS) */ --gradient-bg: linear-gradient(160deg, #0f2027 0%, #203a43 55%, #2c5364 100%); --accent: #2a9d8f; --accent-rgb: 42, 157, 143; --grid: rgba(255, 255, 255, 0.045); --radar: rgba(120, 200, 210, 0.55); --radar-glow: rgba(120, 200, 210, 0.14); /* Leagă accentele Bootstrap de tema curentă (link-uri, .text-primary, focus pe input-uri etc. urmează --accent / --accent-rgb) */ --primary: var(--accent); --bs-primary: var(--accent); --bs-primary-rgb: var(--accent-rgb); --bs-link-color: var(--accent); --bs-link-color-rgb: var(--accent-rgb); --bs-link-hover-color: var(--accent); --bs-link-hover-color-rgb: var(--accent-rgb); } /* ============================================================ Definițiile temelor — schimbă doar variabilele ============================================================ */ :root[data-theme="nocturn"] { --gradient-bg: linear-gradient(160deg, #0f2027 0%, #203a43 55%, #2c5364 100%); --accent: #1f7a8c; --accent-rgb: 31, 122, 140; --grid: rgba(255, 255, 255, 0.045); --radar: rgba(120, 200, 210, 0.55); --radar-glow: rgba(120, 200, 210, 0.14); } :root[data-theme="topografic"] { --gradient-bg: linear-gradient(160deg, #0b2818 0%, #16432b 55%, #1f5e3a 100%); --accent: #2e8b57; --accent-rgb: 46, 139, 87; --grid: rgba(180, 255, 200, 0.05); --radar: rgba(120, 230, 160, 0.5); --radar-glow: rgba(120, 230, 160, 0.14); } :root[data-theme="harta-veche"] { --gradient-bg: linear-gradient(160deg, #3a2c18 0%, #5c4524 55%, #7a5c30 100%); --accent: #b07d2b; --accent-rgb: 176, 125, 43; --grid: rgba(255, 240, 210, 0.07); --radar: rgba(240, 210, 150, 0.5); --radar-glow: rgba(240, 210, 150, 0.15); } :root[data-theme="grafit"] { --gradient-bg: linear-gradient(160deg, #1a1c22 0%, #2a2e38 55%, #3a3f4d 100%); --accent: #5b6577; --accent-rgb: 91, 101, 119; --grid: rgba(255, 255, 255, 0.05); --radar: rgba(200, 200, 210, 0.45); --radar-glow: rgba(200, 200, 210, 0.1); } :root[data-theme="indigo"] { --gradient-bg: linear-gradient(160deg, #13112e 0%, #241d4d 55%, #352a6e 100%); --accent: #6c5ce7; --accent-rgb: 108, 92, 231; --grid: rgba(200, 190, 255, 0.05); --radar: rgba(160, 140, 250, 0.5); --radar-glow: rgba(160, 140, 250, 0.16); } :root[data-theme="amurg"] { --gradient-bg: linear-gradient(160deg, #2b1410 0%, #4a241a 55%, #6e3a2a 100%); --accent: #d2603a; --accent-rgb: 210, 96, 58; --grid: rgba(255, 220, 200, 0.06); --radar: rgba(250, 170, 130, 0.5); --radar-glow: rgba(250, 170, 130, 0.16); } /* ============================================================ Fundal + straturi de hartă ============================================================ */ body { background: var(--gradient-bg) !important; background-attachment: fixed; } /* Grilă topografică fină (peste fundal, sub conținut) */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 42px), repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 42px); } /* "Radar" / busolă discretă în colțul din dreapta-sus */ body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; width: 280px; height: 280px; top: 6%; right: 5%; border-radius: 50%; border: 1px dashed var(--radar); background: radial-gradient(circle, var(--radar-glow), transparent 70%); opacity: 0.55; } @media (max-width: 768px) { body::after { width: 180px; height: 180px; top: 4%; right: -4%; } } /* Respectă preferința de mișcare redusă (nimic de animat aici, dar lăsăm hook) */ @media (prefers-reduced-motion: reduce) { body { background-attachment: scroll; } } /* ============================================================ Butoane — păstrează tema la hover (fără flash mov) ============================================================ */ .btn-primary:hover, .btn-primary:focus { background: var(--gradient-bg) !important; filter: brightness(1.12); } /* ============================================================ Selector de temă (în header, lângă logo) ============================================================ */ .theme-switch { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; padding: 8px 14px; border-radius: 30px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease; -webkit-tap-highlight-color: transparent; } .theme-switch:hover { background: rgba(255, 255, 255, 0.22); } .theme-switch:active { transform: scale(0.96); } .theme-switch .theme-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gradient-bg); border: 1px solid rgba(255, 255, 255, 0.6); flex-shrink: 0; } .theme-switch .theme-label { white-space: nowrap; } @media (max-width: 768px) { .theme-switch .theme-label { display: none; } .theme-switch { padding: 9px; } }