/* ============================================================ TEMA NEON — a doua interfață pentru puzzle.joacaincomunitate.ro Se activează cu atributul data-theme="neon" pe , comutat din butonul injectat de theme-switcher.js. Tema clasică rămâne neatinsă (fără atribut). ============================================================ */ /* Paletă restrânsă: DOAR cyan (#00f0ff) + magenta (#ff2d95); verde (#00ff9d) rămâne exclusiv pentru feedback corect/succes. */ html[data-theme="neon"] { --primary: #00f0ff; --primary-dark: #00c4d4; --primary-gradient: linear-gradient(135deg, #ff2d95 0%, #00f0ff 100%); --surface-glass: rgba(15, 2, 30, 0.55); --surface-glass-border: rgba(0, 240, 255, 0.25); --text-primary: #eafcff; --text-secondary: rgba(173, 230, 255, 0.65); --accent: #00f0ff; --shadow-glass: 0 0 30px -5px rgba(0, 240, 255, 0.25); --bg-deep: #050010; } html[data-theme="neon"] body { background: radial-gradient(circle at 15% 25%, rgba(255, 45, 149, 0.16) 0%, transparent 45%), radial-gradient(circle at 85% 75%, rgba(0, 240, 255, 0.14) 0%, transparent 45%), linear-gradient(180deg, #050010 0%, #0a0022 100%); } /* Grilă retro-futuristă subtilă peste fundal, sub conținut */ html[data-theme="neon"] body::before { content: ""; position: fixed; inset: 0; background-image: linear-gradient(rgba(0, 240, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; z-index: -1; } /* Navigația are stiluri inline în index.html — necesită !important */ html[data-theme="neon"] nav { background: rgba(8, 0, 22, 0.85) !important; border-bottom: 1px solid rgba(0, 240, 255, 0.25) !important; box-shadow: 0 0 25px rgba(0, 240, 255, 0.12); } /* Cubul-logo 🧩 din nav (inline: background #7c3aed) */ html[data-theme="neon"] nav > div:first-child > div { background: linear-gradient(135deg, #ff2d95, #00f0ff) !important; box-shadow: 0 0 18px rgba(0, 240, 255, 0.55) !important; } html[data-theme="neon"] .nav-btn:hover { color: #00f0ff; text-shadow: 0 0 10px rgba(0, 240, 255, 0.7); } html[data-theme="neon"] #btn-auth { box-shadow: 0 0 18px rgba(255, 45, 149, 0.45) !important; } html[data-theme="neon"] .nav-btn-h.active { background: #00f0ff !important; color: #050010 !important; box-shadow: 0 0 16px rgba(0, 240, 255, 0.6); } /* Titluri cu gradient neon + glow */ html[data-theme="neon"] .title { background: linear-gradient(to right, #00f0ff, #ff2d95); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 14px rgba(0, 240, 255, 0.35)); } /* Carduri: contur cyan, glow magenta la hover */ html[data-theme="neon"] .card { background: rgba(15, 2, 30, 0.55); border: 1px solid rgba(0, 240, 255, 0.22); box-shadow: 0 0 0 rgba(255, 45, 149, 0); } html[data-theme="neon"] .card:hover { background: rgba(25, 5, 45, 0.7); border-color: rgba(255, 45, 149, 0.55); box-shadow: 0 0 28px rgba(255, 45, 149, 0.3), 0 0 12px rgba(0, 240, 255, 0.2); } html[data-theme="neon"] .card-title { color: #eafcff; } /* Sidebar + grupuri de controale */ html[data-theme="neon"] .sidebar { border-right: 1px solid rgba(0, 240, 255, 0.2); } html[data-theme="neon"] .control-group { background: rgba(0, 240, 255, 0.04); border: 1px solid rgba(0, 240, 255, 0.12); } /* Inputuri și select-uri */ html[data-theme="neon"] input[type="number"], html[data-theme="neon"] input[type="text"], html[data-theme="neon"] input[type="password"], html[data-theme="neon"] select { background: rgba(0, 240, 255, 0.06); border: 1px solid rgba(0, 240, 255, 0.25); color: #eafcff; } html[data-theme="neon"] input:focus { border-color: #ff2d95; background: rgba(255, 45, 149, 0.08); box-shadow: 0 0 12px rgba(255, 45, 149, 0.3); } html[data-theme="neon"] select option { background: #0a0022; } /* Butoane principale — preiau gradientul din variabilă, plus glow */ html[data-theme="neon"] .file-upload-label:hover, html[data-theme="neon"] .nav-btn-h:hover { box-shadow: 0 0 20px rgba(0, 240, 255, 0.45); } /* Tabel utilizatori */ html[data-theme="neon"] .user-table th { background: rgba(0, 240, 255, 0.08); color: #00f0ff; } html[data-theme="neon"] .user-table tr:hover { background: rgba(255, 45, 149, 0.07); } /* Cronometru puzzle (culoare hardcodată în style.css) */ html[data-theme="neon"] .puzzle-timer-overlay { color: #00f0ff; border-color: rgba(0, 240, 255, 0.35); text-shadow: 0 0 10px rgba(0, 240, 255, 0.55); } /* Modale / overlay victorie */ html[data-theme="neon"] .win-overlay { background: rgba(5, 0, 16, 0.6); } html[data-theme="neon"] .btn-reset { background: #00f0ff; color: #050010; box-shadow: 0 0 22px rgba(0, 240, 255, 0.55); } /* Bara de controale embed */ html[data-theme="neon"] .embed-controls-bar { border-color: rgba(0, 240, 255, 0.3); box-shadow: 0 0 24px rgba(0, 240, 255, 0.18); } html[data-theme="neon"] .embed-controls-bar button:hover { background: rgba(255, 45, 149, 0.45); } /* Scrollbar */ html[data-theme="neon"] ::-webkit-scrollbar-thumb { background: rgba(0, 240, 255, 0.35); box-shadow: 0 0 8px rgba(0, 240, 255, 0.4); } /* Slider */ html[data-theme="neon"] input[type="range"]::-webkit-slider-thumb { background: #ff2d95; box-shadow: 0 0 10px rgba(255, 45, 149, 0.6); } /* Tranziție lină la comutarea temei */ body, nav, .card, .sidebar, .control-group { transition: background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease; } /* ============================================================ Butonul de comutare a temei (injectat de theme-switcher.js) — stilizat pentru ambele teme ============================================================ */ #theme-toggle-btn { position: fixed; bottom: 18px; right: 18px; z-index: 9000; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(15, 23, 42, 0.85); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; font-weight: 700; font-size: 0.85rem; font-family: inherit; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); transition: transform 0.2s, box-shadow 0.2s, background 0.45s, color 0.45s, border-color 0.45s; } #theme-toggle-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(124, 58, 237, 0.45); } html[data-theme="neon"] #theme-toggle-btn { border-color: rgba(0, 240, 255, 0.5); background: rgba(8, 0, 22, 0.85); color: #00f0ff; box-shadow: 0 0 18px rgba(0, 240, 255, 0.35); } html[data-theme="neon"] #theme-toggle-btn:hover { box-shadow: 0 0 26px rgba(255, 45, 149, 0.5); } /* ============================================================ SECȚIUNEA 2 — Design system „Direcția A" (restul aplicației): Landing, Zona publică, Hub, jocuri, dashboards, Editor, login. Paginile astea au temă deschisă (crem/alb) pe variabile proprii; aici remapăm variabilele la paleta neon + suprafețele albe hardcodate. Selectorii care nu există pe o pagină sunt ignorați. ============================================================ */ html[data-theme="neon"] { /* paleta „Direcția A" → neon (restrânsă: calde→magenta, reci→cyan) */ --orange: #ff2d95; --amber: #ff2d95; --yellow: #00f0ff; --turq: #00f0ff; --turq-deep: #00c4d4; --purple: #00f0ff; --ink: #eafcff; --ink-60: rgba(173, 230, 255, 0.68); --ink-40: rgba(173, 230, 255, 0.45); --bg: #070016; --card: #150829; --cream: #1b0d33; --tint-orange: rgba(255, 45, 149, 0.14); --tint-turq: rgba(0, 240, 255, 0.10); --tint-yellow: rgba(0, 240, 255, 0.08); --tint-purple: rgba(0, 240, 255, 0.12); --tint-green: rgba(0, 255, 157, 0.10); --line: rgba(0, 240, 255, 0.2); --success: #00ff9d; --success-deep: #00d480; --warn: #ff2d95; --shadow: 0 0 30px -6px rgba(0, 240, 255, 0.35); --shadow-sm: 0 0 18px -6px rgba(0, 240, 255, 0.3); /* Hub — harta comunității, varianta de noapte */ --sky-top: #0b0030; --sky-bot: #1a0a45; --grass-far: #062338; --grass-top: #073049; --grass-bot: #041824; --road: #241043; --road-line: rgba(0, 240, 255, 0.55); } /* Hub: păstrăm gradientul stratificat cer/iarbă (pe variabilele de noapte de mai sus), nu fundalul generic */ html[data-theme="neon"] body.hub-map { background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 30%, var(--grass-far) 41%, var(--grass-top) 50%, var(--grass-bot) 100%); } /* Suprafețe albe hardcodate (background:#fff) → carduri întunecate. Inset box-shadow în loc de border ca să nu schimbe dimensiunile. */ html[data-theme="neon"] .pill, html[data-theme="neon"] .pill-back, html[data-theme="neon"] .iconbtn, html[data-theme="neon"] .diff, html[data-theme="neon"] .wincard, html[data-theme="neon"] .item, html[data-theme="neon"] .slot, html[data-theme="neon"] .letter, html[data-theme="neon"] .front, html[data-theme="neon"] .answers button, html[data-theme="neon"] .cell, html[data-theme="neon"] .pal, html[data-theme="neon"] .tile, html[data-theme="neon"] .card, html[data-theme="neon"] details, html[data-theme="neon"] .toc a, html[data-theme="neon"] .kbox, html[data-theme="neon"] .step, html[data-theme="neon"] .cta, html[data-theme="neon"] .side, html[data-theme="neon"] .btn-ghost, html[data-theme="neon"] .stat, html[data-theme="neon"] .gcard, html[data-theme="neon"] .gcard .gmenu, html[data-theme="neon"] .codebox .copy, html[data-theme="neon"] .qg, html[data-theme="neon"] .tablecard, html[data-theme="neon"] .modal, html[data-theme="neon"] .sharebtn, html[data-theme="neon"] .navlink .badge, html[data-theme="neon"] .navlink.active .badge, html[data-theme="neon"] .search, html[data-theme="neon"] .fselect, html[data-theme="neon"] .rowmenu, html[data-theme="neon"] .order, html[data-theme="neon"] .ctool, html[data-theme="neon"] .slot-card, html[data-theme="neon"] .scene-float, html[data-theme="neon"] .editor-mock, html[data-theme="neon"] .reg.adult, html[data-theme="neon"] .reg .tagm, html[data-theme="neon"] .hero .pill, html[data-theme="neon"] .hero .badge-free, html[data-theme="neon"] .cloud, html[data-theme="neon"] .demo, html[data-theme="neon"] .band .ill, html[data-theme="neon"] .band .ill .qa, html[data-theme="neon"] .playcard, html[data-theme="neon"] .tabs button.on { background: #150829; box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.22), 0 10px 26px -14px rgba(0, 240, 255, 0.35); } /* Bare și benzi albe → translucid întunecat cu blur */ html[data-theme="neon"] .top, html[data-theme="neon"] .topbar, html[data-theme="neon"] .col.left, html[data-theme="neon"] .col.right, html[data-theme="neon"] .strip, html[data-theme="neon"] .games-sec, html[data-theme="neon"] .s3, html[data-theme="neon"] .editor-mock .bar { background: rgba(11, 2, 28, 0.78); } /* Hover-uri cu fundal deschis hardcodat (#FFF3EE etc.) */ html[data-theme="neon"] .pill:hover, html[data-theme="neon"] .pill-back:hover, html[data-theme="neon"] .iconbtn:hover, html[data-theme="neon"] .btn-ghost:hover { background: #22104a; box-shadow: 0 0 0 1px rgba(255, 45, 149, 0.45), 0 0 22px -6px rgba(255, 45, 149, 0.5); } html[data-theme="neon"] .demo:hover, html[data-theme="neon"] .gcard:hover { box-shadow: 0 0 0 1px rgba(255, 45, 149, 0.5), 0 0 30px -8px rgba(255, 45, 149, 0.55); } /* Overlay-ul de victorie din Zona publică (alb aproape opac) */ html[data-theme="neon"] .playcard .win { background: rgba(7, 0, 22, 0.96); } /* Stări și elemente auxiliare cu fundaluri deschise hardcodate (#F6F1E8, #FDEBEE, #F4E…, #FBF… etc.) din jocuri/dashboards */ html[data-theme="neon"] .cell.given { background: #1f0f3a; } html[data-theme="neon"] .cell.bad, html[data-theme="neon"] .letter.bad, html[data-theme="neon"] .answers button.bad { background: rgba(255, 45, 149, 0.3); } html[data-theme="neon"] .cell.okflash, html[data-theme="neon"] .item.done, html[data-theme="neon"] .slot.fill { background: rgba(0, 255, 157, 0.16); } html[data-theme="neon"] .iconbtn.off, html[data-theme="neon"] .mb.off { background: #0e0522; } /* Jocurile de logică noi (tango/queens/pinpoint/scara) */ html[data-theme="neon"] .boardwrap { background: #0e0522; border-color: rgba(0, 240, 255, 0.2); } html[data-theme="neon"] .cluecard, html[data-theme="neon"] .ansbtn, html[data-theme="neon"] .roundlabel, html[data-theme="neon"] .counter { background: #150829; border-color: rgba(0, 240, 255, 0.25); color: var(--ink); box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.18), 0 10px 26px -14px rgba(0, 240, 255, 0.3); } html[data-theme="neon"] .cluecard.hidden-clue { background: #0e0522; color: rgba(173, 230, 255, 0.35); } html[data-theme="neon"] .ansbtn.bad { background: rgba(255, 45, 149, 0.3); } html[data-theme="neon"] .ansbtn.good { background: rgba(0, 255, 157, 0.16); border-color: var(--success); } html[data-theme="neon"] .step.filled { background: rgba(0, 255, 157, 0.14); } html[data-theme="neon"] .dot { background: #1d0c38; } html[data-theme="neon"] .qcell { filter: saturate(0.85) brightness(0.92); border-color: rgba(0, 0, 0, 0.3); } /* Arena — cronometru + clasament (arena.js) */ html[data-theme="neon"] #arena-timer, html[data-theme="neon"] .arena-card { background: #150829; color: var(--ink); box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.22), 0 10px 26px -14px rgba(0, 240, 255, 0.35); } html[data-theme="neon"] .arena-save input { background: #10061f; border-color: rgba(0, 240, 255, 0.25); color: var(--ink); } html[data-theme="neon"] .arena-top li.me { background: rgba(0, 240, 255, 0.12); } html[data-theme="neon"] .arena-card .arena-x { background: #1d0c38; color: var(--ink-60); } html[data-theme="neon"] .ghostbtn, html[data-theme="neon"] .cta .btn.ghost, html[data-theme="neon"] .closex { background: #1d0c38; color: var(--ink); } /* Table de joc (glisare/rotiri/petice/Joc-Puzzle/Zona publică) */ html[data-theme="neon"] .play, html[data-theme="neon"] .board, html[data-theme="neon"] .quilt, html[data-theme="neon"] .puzzle { background: #0e0522; box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.2), 0 0 35px -10px rgba(0, 240, 255, 0.3); } /* Bare de progres (dashboard educatoare) */ html[data-theme="neon"] .bar, html[data-theme="neon"] .tprog .tb { background: #1d0c38; } html[data-theme="neon"] .resblock.warn { background: rgba(255, 45, 149, 0.1); border-color: rgba(255, 45, 149, 0.35); } html[data-theme="neon"] thead th { background: #150829; } html[data-theme="neon"] .tip, html[data-theme="neon"] .note { background: #1d0c38; } /* Hub: sloturi și chip-uri */ html[data-theme="neon"] .slot.empty { background: #1d0c38; } html[data-theme="neon"] .gchip.sel { background: #22104a; border-color: var(--orange); } /* ============================================================ HUB — Harta comunității în varianta de noapte (neon) Elementele SVG au clase adăugate în HTML; CSS-ul `fill`/`stroke` suprascrie atributele de prezentare. ============================================================ */ html[data-theme="neon"] .sky-rect { fill: url(#skyNight); } html[data-theme="neon"] .grass-rect { fill: url(#grassNight); } /* soarele devine lună cu halou cyan */ html[data-theme="neon"] .sun-core { fill: #eafcff; } html[data-theme="neon"] .sun-ring { stroke: #00f0ff; opacity: .55; } html[data-theme="neon"] .clouds { fill: #241453; opacity: .8; } html[data-theme="neon"] .sky-title { fill: #eafcff; opacity: 1; } html[data-theme="neon"] .sky-sub { fill: rgba(173, 230, 255, 0.8); opacity: 1; } html[data-theme="neon"] .sky-loc { fill: #00f0ff; } html[data-theme="neon"] .hill-a { fill: #093150; } html[data-theme="neon"] .hill-b { fill: #072840; } html[data-theme="neon"] .pond ellipse:nth-child(1) { fill: #0b3a52; } html[data-theme="neon"] .pond ellipse:nth-child(2) { fill: #0e4a66; } html[data-theme="neon"] .pond ellipse:nth-child(3) { fill: #00f0ff; opacity: .25; } html[data-theme="neon"] .road-outer { stroke: #1d0c38; } html[data-theme="neon"] .road-mid { stroke: #241043; } html[data-theme="neon"] .road-dash { stroke: rgba(0, 240, 255, 0.6); } /* clădirile primesc glow de noapte (își păstrează culorile ca să rămână recognoscibile pentru copii) */ html[data-theme="neon"] .bldg .art { filter: brightness(.92) drop-shadow(0 0 16px rgba(0, 240, 255, 0.3)) drop-shadow(0 12px 14px rgba(0, 0, 0, 0.45)); } html[data-theme="neon"] .bldg.faded .art { filter: saturate(.4) brightness(.75) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.35)); } /* suprafețe albe specifice Hub-ului */ html[data-theme="neon"] .panel, html[data-theme="neon"] .hint, html[data-theme="neon"] .startcard, html[data-theme="neon"] .gchip, html[data-theme="neon"] .nameplate { background: #150829; color: var(--ink); box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.22), 0 10px 26px -14px rgba(0, 240, 255, 0.35); } html[data-theme="neon"] .bldg.faded .nameplate { background: #0e0522; color: var(--ink-40); } html[data-theme="neon"] .greet .loc, html[data-theme="neon"] .startcard .sub, html[data-theme="neon"] .gtitle { color: var(--ink-60); } html[data-theme="neon"] .gchip { border-color: rgba(0, 240, 255, 0.25); } /* iconița de sunet are fill/stroke hardcodate închise */ html[data-theme="neon"] #soundico path:not([fill="none"]) { fill: #eafcff; } html[data-theme="neon"] #soundico path[fill="none"] { stroke: #eafcff; } /* butonul de sunet (jos-dreapta) nu se mai bate cu comutatorul de temă */ body.hub-map #theme-toggle-btn { bottom: 88px; } /* ============================================================ Ilustrații SVG pe carduri (Zona publică, Landing, g.html) — în neon se sting puțin, ca să nu mai pară „pe lumină" ============================================================ */ html[data-theme="neon"] .demo .scene svg, html[data-theme="neon"] .scene-float svg, html[data-theme="neon"] .band .ill svg, html[data-theme="neon"] .tile svg, html[data-theme="neon"] .crest svg { filter: brightness(.8) saturate(1.2) contrast(1.05); } /* Suprafețe translucide albe rămase (Joc-Puzzle, Dashboard admin) */ html[data-theme="neon"] .pill-ghost { background: rgba(21, 8, 41, 0.85); color: var(--ink); } html[data-theme="neon"] .side .me { background: rgba(0, 240, 255, 0.08); } /* Formulare pe paginile deschise (login, dashboards, editor) */ html[data-theme="neon"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html[data-theme="neon"] textarea { background: #10061f; color: var(--ink, #eafcff); border-color: var(--line, rgba(0, 240, 255, 0.25)); } html[data-theme="neon"] select { background: #10061f; color: var(--ink, #eafcff); border-color: var(--line, rgba(0, 240, 255, 0.25)); } /* Gardă globală (toate temele): pe telefon pagina nu se mai poate trage orizontal. */ @media(max-width:700px){html{overflow-x:hidden;overflow-x:clip}}