/* ============================================================ Tema dark "eco" per l'intera piattaforma (non più solo gallery.html, vedi memoria di progetto ecosystem-redesign per l'origine). Caricato dopo css/styles.css (Tailwind compilato) in ogni pagina, cosi' vince sulle utility gia' presenti nel markup senza doverle riscrivere una per una — stesso principio gia' validato su gallery.html, qui condiviso una sola volta invece che duplicato in ogni file (la duplicazione andava bene per CSS di componente specifico di una pagina, non per un tema trasversale a tutte). Nessun toggle chiaro/scuro: il dark è l'unico tema, come già per gallery.html. ============================================================ */ :root { --eco-bg: #0a0c16; --eco-card: #151829; --eco-card-2: #1a1e33; --eco-border: rgba(255,255,255,.08); --eco-text: #f4f5fa; --eco-text-dim: #9aa0b8; --eco-text-faint: #6b7189; --eco-grad-brand: linear-gradient(135deg, #6d5ef8, #b45cf8 55%, #ec5cc4); --wed-grad: linear-gradient(135deg, #f0b86e, #f472b6); } /* body[class] invece di solo "body": ogni pagina porta già una classe Tailwind bg-*/text-gray-900 sul tag (specificità di una singola classe, 0-1-0), che altrimenti vince su un semplice selettore "body" (0-0-1) anche a parità di !important — la specificità decide quando l'importanza è a pari merito. */ body[class] { background: var(--eco-bg) !important; color: var(--eco-text) !important; } /* Chrome di pagina condiviso (header sticky in ogni pagina, bottom nav): un selettore di elemento/ID invece della classe bg-white/90 o bg-white/95 stessa, perché quella classe è condivisa anche da elementi che devono restare chiari a bella posta (es. l'icona "play" su .aftermovie-play in gallery.html) — così scurisco solo il contenitore giusto senza toccare la classe Tailwind. */ header { background-color: rgba(21,24,41,.9) !important; border-color: var(--eco-border) !important; } /* Fase Foundation: #bottomNav ora imposta bg/border nativamente sui token nuovi (bg-background/90, border-border/60) in bottom-nav.js — le regole !important che la scurivano da qui (e il fix su .text-black, classe non piu' emessa dal componente) sono state rimosse perche' ridondanti, non perche' sostituite da qualcos'altro qui. */ /* Fase E2 (audit mobile 12/07): con viewport-fit=cover il contenuto puo' estendersi sotto notch/status bar in alto e home indicator in basso su iOS. header e' sempre sticky top-0 (tranne gallery.html, che non ha un

e quindi non e' toccata da questa regola), bottomNav e' sempre fixed bottom-0: basta un padding aggiuntivo sul lato interessato per tenere il contenuto (titolo, tab) fuori dall'area non sicura, mentre lo sfondo di entrambi resta esteso fino al bordo vero (edge-to-edge). */ header { padding-top: env(safe-area-inset-top, 0px); } #bottomNav { padding-bottom: env(safe-area-inset-bottom, 0px); } /* Testo/bordo/sfondo utility Tailwind neutri: stesso pattern già validato su gallery.html, qui esteso con le lacune trovate (bg-white generico, hover, text-black, ring, shadow — vedi memoria di progetto). */ .text-gray-900, .text-black { color: var(--eco-text) !important; } .text-gray-800, .text-gray-700 { color: var(--eco-text-dim) !important; } .text-gray-600, .text-gray-500 { color: var(--eco-text-dim) !important; } .text-gray-400, .text-gray-300 { color: var(--eco-text-faint) !important; } .hover\:text-gray-600:hover, .hover\:text-gray-700:hover, .hover\:text-gray-900:hover, .hover\:text-black:hover { color: var(--eco-text) !important; } .border-gray-100, .border-gray-200, .border-gray-300 { border-color: var(--eco-border) !important; } .border-gray-900 { border-color: var(--eco-text) !important; } .bg-gray-50, .bg-gray-100, .bg-gray-200 { background-color: var(--eco-card-2) !important; } .bg-gray-900 { background-color: var(--eco-text) !important; color: var(--eco-bg) !important; } .hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover, .hover\:bg-gray-200:hover { background-color: var(--eco-card) !important; } .hover\:bg-gray-700:hover { background-color: var(--eco-text-dim) !important; } .text-purple-600, .text-purple-700, .text-purple-800 { color: #b45cf8 !important; } .hover\:text-purple-600:hover, .hover\:text-purple-700:hover, .hover\:text-purple-800:hover { color: #c98bff !important; } .border-purple-300, .border-purple-400 { border-color: #8b5cf6 !important; } .hover\:border-purple-300:hover { border-color: #8b5cf6 !important; } .bg-purple-600, .bg-purple-700 { background: var(--eco-grad-brand) !important; } .bg-purple-50, .bg-purple-100 { background-color: var(--eco-card-2) !important; } .hover\:bg-purple-50:hover, .hover\:bg-purple-700:hover { background-color: var(--eco-card-2) !important; } .bg-pink-50, .bg-pink-100 { background-color: var(--eco-card-2) !important; } .hover\:bg-pink-100:hover { background-color: var(--eco-card) !important; } .border-pink-200 { border-color: rgba(244,114,182,.35) !important; } .text-pink-700 { color: #f472b6 !important; } .bg-amber-50, .bg-amber-100 { background-color: var(--eco-card-2) !important; } .hover\:bg-amber-100:hover { background-color: var(--eco-card) !important; } .text-amber-600, .text-amber-700 { color: #f0b86e !important; } .hover\:bg-red-50:hover { background-color: rgba(239,68,68,.14) !important; } /* Superfici "bianche" vere di pagina (card/pannelli/modal/dropdown/select/riga) diventano scure di default: le uniche eccezioni reali sono i pulsanti "a contrasto su foto" già noti (Download nel lightbox di gallery.html, share button del carosello "In evidenza" di index.html), scoped qui sotto con selettori più specifici che vincono sulla regola generica. */ .bg-white { background-color: var(--eco-card) !important; } #downloadBtn { background-color: #fff !important; color: #111827 !important; } .featured-slide button { background-color: #fff !important; color: #111827 !important; } .ring-gray-50 { --tw-ring-color: var(--eco-bg) !important; } .ring-gray-900, .ring-black { --tw-ring-color: var(--eco-text) !important; } .ring-offset-2 { --tw-ring-offset-color: var(--eco-card-2) !important; } /* Le ombre chiare pensate per superfici bianche non hanno senso su sfondo scuro (diventano un alone quasi invisibile o sbagliato): le card si distinguono già dal fondo tramite --eco-card/--eco-card-2, stesso principio già usato in gallery.html per .highlight-card (box-shadow: none). */ .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-purple-200 { box-shadow: none !important; } /* Input/textarea/select senza una classe bg-* esplicita nel markup: di default renderebbero bianco (default browser). Selettore a bassa specificità: le utility esplicite come bg-transparent restano intatte e vincono comunque. */ main input, main textarea, main select { background-color: var(--eco-card-2); color: var(--eco-text); } main input::placeholder, main textarea::placeholder { color: var(--eco-text-faint); opacity: 1; }