/* ========================================================================== ZONAR THEME · WBCHILD MOBILE (<1024px) = app ZONAR scura (faro, top bar, tab bar) DESKTOP (>=1024px)= tema chiaro professionale (bianco) + accento blu Caricare PER ULTIMO nel . ========================================================================== */ /* ================= GLOBALE (brand, entrambe le viste) ================= */ :root, html, [data-kt-theme-mode="light"], [data-kt-theme-mode="dark"], .light, .dark { --zonar-blue:#2E7BFF; --zonar-cyan:#22D3EE; --zonar-deep:#1746C8; --zonar-ink:#05080F; --color-primary:#2E7BFF !important; --color-primary-foreground:#fff !important; --primary:#2E7BFF !important; --color-ring:#2E7BFF !important; --wbc-primary:#2E7BFF !important; --wbc-emerald:#2E7BFF !important; --wbc-green:#2E7BFF !important; --comunita-primary:#2E7BFF !important; --wbc-gold:#2E7BFF !important; --wbc-gold2:#22D3EE !important; } .kt-btn-primary,.btn-primary{ background:#2E7BFF !important; border-color:#2E7BFF !important; color:#fff !important; } .kt-btn-primary:hover,.btn-primary:hover{ background:#1746C8 !important; border-color:#1746C8 !important; } .text-primary{ color:#2E7BFF !important; } .bg-primary{ background-color:#2E7BFF !important; } .border-primary{ border-color:#2E7BFF !important; } a{ color:#2E7BFF; } a:hover{ color:#1746C8; } .form-control:focus,.kt-input:focus,.form-select:focus{ border-color:#2E7BFF !important; box-shadow:0 0 0 .2rem rgba(46,123,255,.20) !important; } .kt-menu-item-active > .kt-menu-link{ box-shadow:inset 3px 0 0 #2E7BFF; border-radius:8px; } .wbc-grad{ background:linear-gradient(135deg,#22D3EE,#2E7BFF) !important; color:#fff !important; } .wbc-grad-text{ background:none !important; -webkit-text-fill-color:#2E7BFF !important; color:#2E7BFF !important; } .wbc-grad, .kt-btn-primary, .btn-primary{ color:#fff !important; } .wbc-grad *{ color:#fff !important; -webkit-text-fill-color:#fff !important; } .wbc-burger{ background:rgba(46,123,255,.14) !important; border-color:rgba(46,123,255,.45) !important; color:#2E7BFF !important; } .wbc-burger i{ color:#2E7BFF !important; } .wbc-bottomnav{ display:none !important; } /* vecchia bottom-nav oro OFF */ ::selection{ background:rgba(46,123,255,.25); } main#content .grid{ gap:20px !important; } /* card più distanziate */ body{ background:transparent !important; } /* la top bar / tab bar app esistono solo nel media mobile qui sotto */ .zonar-topbar{ display:none; } .zonar-appbar{ display:none; } /* ====================================================================== MOBILE (<1024px) — APP ZONAR SCURA ====================================================================== */ @media (max-width:1023px){ html{ background:var(--zonar-ink) !important; } body::before{ content:""; position:fixed; inset:0; z-index:-2; background:linear-gradient(180deg,rgba(5,8,15,.80),rgba(5,8,15,.90) 55%,rgba(5,8,15,.95)), url("../media/zonar-hero-mobile.jpg") center center/cover no-repeat scroll; } body::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(120% 55% at 50% -8%,rgba(46,123,255,.22),transparent 60%); } /* nasconde chrome classico */ .kt-header, .kt-sidebar, .wbc-burger{ display:none !important; } /* TOP BAR ZONAR */ .zonar-topbar{ display:flex; align-items:center; gap:12px; position:fixed; top:0; left:0; right:0; z-index:70; padding:calc(env(safe-area-inset-top) + 10px) 14px 10px; background:rgba(6,10,20,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid rgba(46,123,255,.18); } .zonar-tb-ava{ width:46px; height:46px; border-radius:14px; flex:0 0 auto; background:linear-gradient(135deg,#22D3EE,#2E7BFF); display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff; text-decoration:none; box-shadow:0 6px 16px -6px rgba(46,123,255,.6); } .zonar-tb-ava img{ width:100%; height:100%; object-fit:cover; } .zonar-tb-ava svg{ width:24px; height:24px; } .zonar-tb-ini{ font-weight:800; font-size:16px; } .zonar-tb-hello{ display:flex; flex-direction:column; line-height:1.1; min-width:0; flex:1; } .zonar-tb-sub{ font-size:12px; color:#8b97ad; } .zonar-tb-name{ font-size:19px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .zonar-tb-actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; } .zonar-tb-pill{ display:flex; align-items:center; gap:6px; height:40px; padding:0 12px; border-radius:20px; border:1px solid rgba(46,123,255,.45); color:#cfe0ff; font-weight:700; text-decoration:none; } .zonar-tb-pill svg{ width:18px; height:18px; } .zonar-tb-bell{ position:relative; width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); color:#cfe0ff; text-decoration:none; } .zonar-tb-bell svg{ width:22px; height:22px; } .zonar-tb-dot{ position:absolute; top:10px; right:11px; width:8px; height:8px; border-radius:50%; background:#22D3EE; } main#content{ padding-top:calc(env(safe-area-inset-top) + 74px) !important; padding-bottom:92px !important; } /* TAB BAR */ .zonar-appbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70; justify-content:space-around; align-items:flex-end; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); background:rgba(6,10,20,.94); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid rgba(46,123,255,.22); } .zonar-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:#9aa4b8; text-decoration:none; font-size:11px; font-weight:600; padding:4px 2px; } .zonar-tab-ico svg{ width:24px; height:24px; display:block; } .zonar-tab.is-active{ color:#2E7BFF; } .zonar-tab-center .zonar-tab-ico{ width:56px; height:56px; margin-top:-26px; border-radius:18px; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,#22D3EE,#2E7BFF); box-shadow:0 10px 24px -6px rgba(46,123,255,.6); border:3px solid rgba(6,10,20,.94); } .zonar-tab-center .zonar-tab-ico svg{ width:26px; height:26px; } /* leggibilità: dentro card scuro, fuori (su faro) chiaro */ main#content .text-mono{ color:#EAF2FF !important; } main#content .text-secondary-foreground{ color:#cbd5e1 !important; } main#content .text-muted-foreground{ color:#c7d2e6 !important; } main#content .kt-card .text-mono, main#content .kt-card h1, main#content .kt-card h2, main#content .kt-card h3, main#content .kt-card h4{ color:#0f172a !important; } main#content .kt-card .text-secondary-foreground, main#content .kt-card .text-muted-foreground{ color:#5b6b86 !important; } .kt-card,.card{ border:1px solid rgba(46,123,255,.14) !important; box-shadow:0 12px 34px -14px rgba(5,8,15,.45) !important; } /* esplora: tile scure */ .zonar-esplora-title{ color:#fff; } .zonar-esplora-sub{ color:#9aa4b8; } .zonar-esplora-sec{ color:#8b97ad; } .zonar-mod-ico{ background:rgba(255,255,255,.05); border:1px solid rgba(46,123,255,.16); color:#4a9bff; } .zonar-mod-lbl{ color:#c7d2e6; } } /* ====================================================================== DESKTOP (>=1024px) — CHIARO PROFESSIONALE (bianco) ====================================================================== */ @media (min-width:1024px){ html{ background:#f4f6fb !important; } /* fondo chiaro pro */ body::before, body::after{ display:none !important; } /* niente faro */ .zonar-topbar, .zonar-appbar{ display:none !important; } /* header e sidebar bianchi, netti */ .kt-header{ background:#ffffff !important; backdrop-filter:none !important; border-bottom:1px solid rgba(15,23,42,.08) !important; } .kt-sidebar{ background:#ffffff !important; backdrop-filter:none !important; border-inline-end:1px solid rgba(15,23,42,.08) !important; } /* card pulite, ombra morbida professionale */ .kt-card,.card{ background:#fff !important; border:1px solid rgba(15,23,42,.07) !important; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 26px -20px rgba(15,23,42,.28) !important; border-radius:16px !important; } /* NIENTE forzatura colori testo: resta il nativo scuro su bianco (leggibile) */ /* pagina Esplora (se aperta da desktop): tile chiare */ .zonar-esplora-title{ color:#0f172a; } .zonar-esplora-sub{ color:#64748b; } .zonar-esplora-sec{ color:#94a3b8; } .zonar-mod-ico{ background:#fff; border:1px solid rgba(46,123,255,.16); color:#2E7BFF; box-shadow:0 6px 18px -12px rgba(15,23,42,.35); } .zonar-mod-lbl{ color:#334155; } .zonar-mod:hover .zonar-mod-ico{ background:#2E7BFF; border-color:#2E7BFF; color:#fff; } } /* ===== ESPLORA · layout griglia ===== */ .zonar-esplora{ max-width:960px; margin:0 auto; } .zonar-esplora-title{ font-family:'Outfit',sans-serif; font-size:26px; font-weight:800; margin:0; } .zonar-esplora-sub{ margin:.25rem 0 1rem; } .zonar-esplora-sec{ text-transform:uppercase; letter-spacing:.06em; font-size:12px; font-weight:700; margin:18px 4px 10px; } .zonar-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } @media (min-width:640px){ .zonar-grid{ grid-template-columns:repeat(6,1fr); } } .zonar-mod{ display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; } .zonar-mod-ico{ width:100%; aspect-ratio:1/1; border-radius:18px; display:flex; align-items:center; justify-content:center; transition:.15s; } .zonar-mod-ico i{ font-size:26px; } .zonar-mod-lbl{ font-size:12px; font-weight:600; text-align:center; line-height:1.15; } /* bottoni pieni blu/gradiente: testo sempre bianco leggibile (no gradient-text trasparente) */ a.wbc-grad, button.wbc-grad, .kt-btn.wbc-grad, a.bg-primary, button.bg-primary, .kt-btn-primary, .btn-primary{ color:#fff !important; } a.wbc-grad *, button.wbc-grad *, .bg-primary *, .kt-btn-primary *, .btn-primary *, .wbc-grad .wbc-grad-text{ color:#fff !important; -webkit-text-fill-color:#fff !important; background:none !important; } /* i bottoni chiari (kt-btn-light/outline/ghost) restano con testo scuro */ .kt-btn-light, .kt-btn-outline, .kt-btn-ghost, .btn-light, .btn-outline{ color:#1e293b !important; -webkit-text-fill-color:#1e293b !important; background:#eef2f7 !important; } .kt-btn-light *, .kt-btn-outline *, .kt-btn-ghost *{ color:#1e293b !important; -webkit-text-fill-color:#1e293b !important; } .kt-btn-outline{ background:transparent !important; border:1px solid rgba(46,123,255,.5) !important; color:#2E7BFF !important; -webkit-text-fill-color:#2E7BFF !important; } /* Hero scuri "custom" (es. Arte&Game .ag-hero): NON schiarire su desktop. Ripristino il loro fondo scuro anche se sono dentro una .kt-card. */ @media (min-width:1024px){ .ag-hero, .kt-card .ag-hero, .card .ag-hero{ background: radial-gradient(1200px 500px at 15% -10%,rgba(34,211,238,.28),transparent 60%), radial-gradient(900px 500px at 100% 120%,rgba(139,92,246,.30),transparent 55%), linear-gradient(135deg,#0b0d12 0%,#161022 55%,#241534 100%) !important; color:#fff !important; border:none !important; box-shadow:none !important; } .ag-hero *{ color:#fff; } /* testo hero bianco */ .ag-hero .kt-btn-light, .ag-hero .kt-btn-outline{ color:#fff !important; -webkit-text-fill-color:#fff !important; background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.3) !important; } }