/* ════════════════════════════════════════════════════════════ ULTIMOKM — TEMA STAGIONALE: HALLOWEEN ════════════════════════════════════════════════════════════ Si attiva da solo dal 20 ottobre al 2 novembre. Vedi js/theme.js per il calendario e TEMI.md per la spiegazione completa. ─── OGNI REGOLA PARTE DA [data-tema="halloween"] ─── Senza quell'attributo sull'elemento questo file non fa assolutamente nulla: si può caricare tutto l'anno, e il 3 novembre il sito torna com'era senza che nessuno debba toccare niente. Volendo si può anche cancellare il file: il sito continua a funzionare. ─── PERCHÉ ARANCIONE FUOCO E NON ARANCIONE ZUCCA ─── Il sito è già quasi nero (#0a0a0a) con testo osso: metà della tavolozza di Halloween c'era già. Quello che mancava era un accento caldo. La scelta è caduta sull'arancione delle torce da stadio invece che su quello delle zucche da supermercato: è lo stesso colore, ma racconta la curva invece del negozio di addobbi. Un sito ultras vestito da festa per bambini perde più di quanto guadagna, e il pubblico se ne accorge. ─── COSA NON TOCCA ─── Non cambia i testi, non cambia il layout, non sposta niente. Solo colori, bagliori e qualche animazione. Se domani non piacesse, si toglie la riga dal calendario e finisce lì. ════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════ 1. LA TAVOLOZZA ═══════════════════════════════════ */ html[data-tema="halloween"] { /* Arancione torcia. Contrasto sul fondo #0a0a0a: 7.4:1, quindi passa WCAG AA anche sul testo piccolo — non è una scelta solo estetica, è il motivo per cui si può usare anche sui prezzi e non solo sui bordi decorativi. */ --hw-fuoco: #ff7a1a; --hw-fuoco-cal: #ff9d4d; /* variante chiara, per i bagliori */ --hw-brace: #c94f10; /* variante scura, per le ombre */ --hw-viola: #6b4a8f; /* accento secondario, usato con parsimonia */ /* I neri diventano appena più caldi: 2-3 punti di rosso in più, non di più. Serve a far sembrare il fondo illuminato da qualcosa, non a farlo notare — se te ne accorgi guardandolo, è troppo. */ --black: #0c0908; --black2: #141010; --black3: #1d1715; /* --accent era dichiarata nel :root e non usata da nessuna parte. Qui torna utile senza dover toccare il CSS di base. */ --accent: var(--hw-fuoco); } /* ═══════════════════════════════════ 2. GLI ACCENTI Pochi punti, quelli che l'occhio guarda per primi. Colorare tutto sarebbe più veloce da scrivere e molto peggio da guardare. ═══════════════════════════════════ */ /* Il tratto sotto il titolo: da bianco a fuoco, con un alone */ html[data-tema="halloween"] .hero-divider { background: linear-gradient(90deg, transparent, var(--hw-fuoco), transparent); box-shadow: 0 0 24px rgba(255, 122, 26, 0.55); } /* Sottotitolo del logo e claim dell'eroe */ html[data-tema="halloween"] .logo-sub, html[data-tema="halloween"] .hero-title span { color: var(--hw-fuoco-cal); } /* Pulsante principale: resta chiaro sul fondo scuro (il contrasto va difeso), ma prende un alone caldo che lo stacca dalla pagina. */ html[data-tema="halloween"] .btn-primary { background: var(--hw-fuoco); color: #1a0d04; box-shadow: 0 0 28px rgba(255, 122, 26, 0.35); } html[data-tema="halloween"] .btn-primary:hover { box-shadow: 0 0 40px rgba(255, 122, 26, 0.55); } /* Filtro attivo e prezzi: i due punti dove l'occhio va a cercare un'informazione, quindi i due punti in cui un accento aiuta davvero invece di distrarre. */ html[data-tema="halloween"] .filter-btn.active { background: var(--hw-fuoco); color: #1a0d04; border-color: var(--hw-fuoco); } html[data-tema="halloween"] .card-price, html[data-tema="halloween"] .product-hero-price { color: var(--hw-fuoco); } html[data-tema="halloween"] .card-price .currency, html[data-tema="halloween"] .product-hero-price .currency { color: var(--hw-fuoco-cal); } /* Etichette sulle card (NUOVO, ULTIMI PEZZI…) */ html[data-tema="halloween"] .card-badge { background: var(--hw-fuoco); color: #1a0d04; } /* Le card si accendono al passaggio: bordo e alone, niente movimento aggiuntivo — il sollevamento c'è già nel tema base. */ html[data-tema="halloween"] .product-card:hover { border-color: rgba(255, 122, 26, 0.45); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 122, 26, 0.15), 0 0 60px rgba(255, 122, 26, 0.08); } /* Una linea di fuoco sotto l'intestazione, come la luce che filtra da sotto una porta. */ html[data-tema="halloween"] .header { border-bottom: 1px solid rgba(255, 122, 26, 0.22); box-shadow: 0 1px 24px rgba(255, 122, 26, 0.12); } /* ═══════════════════════════════════ 3. IL LOGO CHE TREMOLA Come una candela dentro una zucca. È l'unico elemento in movimento permanente della pagina, quindi è volutamente lentissimo e di ampiezza minima: un tremolio che si nota è un tremolio fastidioso. ═══════════════════════════════════ */ @keyframes hw-candela { 0%, 100% { opacity: 1; text-shadow: 0 0 18px rgba(255, 122, 26, 0.45); } 41% { opacity: 0.94; text-shadow: 0 0 10px rgba(255, 122, 26, 0.30); } 43% { opacity: 1; text-shadow: 0 0 26px rgba(255, 122, 26, 0.60); } 67% { opacity: 0.97; text-shadow: 0 0 14px rgba(255, 122, 26, 0.38); } } html[data-tema="halloween"] .logo-text { animation: hw-candela 5.5s ease-in-out infinite; } /* ═══════════════════════════════════ 4. LE BRACI CHE SALGONO Gli elementi li crea js/theme-halloween.js. Qui c'è solo il moto. Sono braci di torcia, non fantasmini: la stessa immagine funziona per Halloween e per la curva, che è esattamente il punto d'incontro dove questo sito vuole stare. ═══════════════════════════════════ */ html[data-tema="halloween"] .hw-braci { position: fixed; inset: 0; pointer-events: none; /* non deve rubare un solo clic */ z-index: 0; /* dietro a tutto il contenuto */ overflow: hidden; } html[data-tema="halloween"] .hw-brace { position: absolute; bottom: -12px; width: 3px; height: 3px; border-radius: 50%; background: var(--hw-fuoco-cal); box-shadow: 0 0 6px 1px rgba(255, 122, 26, 0.7); opacity: 0; animation: hw-salita linear infinite; } @keyframes hw-salita { 0% { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; } 12% { opacity: 0.85; } 70% { opacity: 0.5; } /* Lo spostamento laterale è ciò che distingue una brace che sale in una corrente d'aria da un pallino che scorre in verticale. */ 100% { transform: translateY(-102vh) translateX(28px) scale(1); opacity: 0; } } /* ═══════════════════════════════════ 5. ACCESSIBILITÀ E BUON SENSO ═══════════════════════════════════ */ /* Chi ha chiesto meno animazioni al sistema operativo le ottiene: niente braci, niente candela. Il tema resta, con i suoi colori — che è il punto: il tema non È l'animazione, l'animazione è un contorno. */ @media (prefers-reduced-motion: reduce) { html[data-tema="halloween"] .logo-text { animation: none; } html[data-tema="halloween"] .hw-braci { display: none; } } /* Su schermi stretti le braci si diradano: su un telefono occupano proporzionalmente molto più spazio e diventano rumore, oltre a pesare su una batteria che sta già facendo altro. */ @media (max-width: 700px) { html[data-tema="halloween"] .hw-brace:nth-child(2n) { display: none; } } /* In stampa il tema sparisce del tutto: nessuno vuole un alone arancione su una ricevuta. */ @media print { html[data-tema="halloween"] .hw-braci { display: none; } html[data-tema="halloween"] .logo-text { animation: none; } } /* ════════════════════════════════════════════════════════════ 6. FANTASMI, RAGNATELE, RAGNI E ZUCCHE ════════════════════════════════════════════════════════════ Le sagome sono SVG scritti direttamente dentro il CSS come data URI: nessun file immagine in più da caricare, da mettere in cache o da ricordarsi di cancellare a novembre. Cancellando questo file sparisce tutto insieme. Nota sulla scrittura: dentro un data URI il carattere # va scritto %23, altrimenti il browser lo legge come inizio di un frammento e l'immagine non compare. È l'errore più comune con questa tecnica. */ /* ───────────────────────────────── 6.1 L'AVATAR DIVENTA UN FANTASMINO La lettera resta nell'HTML — non viene toccata da nessuno script — e qui si limita a diventare trasparente. Quando il tema si spegne ricompare da sola: nessuna funzione da ricordarsi di invertire, e chi usa un lettore di schermo continua a sentire l'iniziale in entrambi i casi. ───────────────────────────────── */ html[data-tema="halloween"] .user-avatar, html[data-tema="halloween"] .account-avatar-big, html[data-tema="halloween"] .review-avatar { color: transparent; /* la lettera resta, non si vede */ background-color: rgba(255, 122, 26, 0.14); border-color: rgba(255, 122, 26, 0.35); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9v11l2.3-2 2.3 2 2.4-2 2.4 2 2.3-2 2.3 2V9c0-3.9-3.1-7-7-7z' fill='%23ffe8d6'/%3E%3Ccircle cx='9.3' cy='8.8' r='1.25' fill='%23241009'/%3E%3Ccircle cx='14.7' cy='8.8' r='1.25' fill='%23241009'/%3E%3Cellipse cx='12' cy='12.6' rx='1.5' ry='1' fill='%23241009'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 74%; } /* L'avatar piccolo dell'intestazione ha il fondo pieno chiaro: lì il fantasma va scurito, altrimenti sparisce nel bianco. */ html[data-tema="halloween"] .user-avatar { background-color: var(--hw-fuoco); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9v11l2.3-2 2.3 2 2.4-2 2.4 2 2.3-2 2.3 2V9c0-3.9-3.1-7-7-7z' fill='%231a0d04'/%3E%3Ccircle cx='9.3' cy='8.8' r='1.25' fill='%23ff9d4d'/%3E%3Ccircle cx='14.7' cy='8.8' r='1.25' fill='%23ff9d4d'/%3E%3C/svg%3E"); background-size: 80%; } /* ───────────────────────────────── 6.2 RAGNATELE NEGLI ANGOLI Statiche: non si muovono, quindi restano anche per chi ha chiesto meno animazioni. Una ragnatela ferma non dà fastidio a nessuno, ed è metà dell'atmosfera. Opacità bassa di proposito: devono leggersi come parte dello sfondo. Se le noti prima del contenuto, stanno rubando la scena ai prodotti. ───────────────────────────────── */ html[data-tema="halloween"] .hw-ragnatela { position: fixed; top: 0; width: 190px; height: 190px; pointer-events: none; z-index: 1; opacity: 0.16; background-repeat: no-repeat; background-size: contain; } html[data-tema="halloween"] .hw-ragnatela.sx { left: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23ffd9b8' stroke-width='1.1'%3E%3Cpath d='M0 0L100 0M0 0L100 42M0 0L72 78M0 0L42 100M0 0L0 100'/%3E%3Cpath d='M20 0Q13 13 0 20M43 0Q28 28 0 43M66 0Q43 43 0 66M90 0Q58 58 0 90'/%3E%3C/g%3E%3C/svg%3E"); } html[data-tema="halloween"] .hw-ragnatela.dx { right: 0; transform: scaleX(-1); /* stessa immagine specchiata: metà del peso */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23ffd9b8' stroke-width='1.1'%3E%3Cpath d='M0 0L100 0M0 0L100 42M0 0L72 78M0 0L42 100M0 0L0 100'/%3E%3Cpath d='M20 0Q13 13 0 20M43 0Q28 28 0 43M66 0Q43 43 0 66M90 0Q58 58 0 90'/%3E%3C/g%3E%3C/svg%3E"); } @media (max-width: 700px) { /* Su un telefono una ragnatela da 190px copre un quarto dello schermo: si rimpicciolisce e ne resta una sola. */ html[data-tema="halloween"] .hw-ragnatela { width: 110px; height: 110px; opacity: 0.13; } html[data-tema="halloween"] .hw-ragnatela.dx { display: none; } } /* ───────────────────────────────── 6.3 IL RAGNO CHE SCENDE Uno solo, e non sempre: scende, resta un attimo, risale. Un ragno fermo in un angolo diventa parte dell'arredamento e smette di farsi notare dopo dieci secondi; uno che compare ogni tanto sorprende ancora alla terza visita. ───────────────────────────────── */ html[data-tema="halloween"] .hw-ragno { position: fixed; top: 0; right: 13%; width: 26px; pointer-events: none; z-index: 2; /* Il filo parte dal bordo alto della pagina e scende col ragno: è un bordo sinistro di 1px sull'elemento stesso. */ border-left: 1px solid rgba(255, 217, 184, 0.28); height: 0; animation: hw-discesa 19s ease-in-out infinite; } html[data-tema="halloween"] .hw-ragno::after { content: ''; position: absolute; left: -13px; bottom: -18px; width: 26px; height: 22px; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28'%3E%3Cg stroke='%23e8ddd2' stroke-width='1.5' fill='none' stroke-linecap='round'%3E%3Cpath d='M13 13L4 7M13 15L2 14M13 17L4 22M13 19L7 26M19 13L28 7M19 15L30 14M19 17L28 22M19 19L25 26'/%3E%3C/g%3E%3Cellipse cx='16' cy='16' rx='5.5' ry='6.5' fill='%23161010'/%3E%3Ccircle cx='16' cy='9.5' r='3.2' fill='%23161010'/%3E%3Ccircle cx='14.6' cy='9' r='.9' fill='%23ff7a1a'/%3E%3Ccircle cx='17.4' cy='9' r='.9' fill='%23ff7a1a'/%3E%3C/svg%3E"); } @keyframes hw-discesa { 0%, 8% { height: 0; opacity: 0; } 20% { height: 128px; opacity: 1; } 46% { height: 148px; opacity: 1; } /* piccolo dondolio */ 62% { height: 128px; opacity: 1; } 84%, 100% { height: 0; opacity: 0; } } /* ───────────────────────────────── 6.4 I FANTASMI CHE ATTRAVERSANO Attraversano lo schermo in orizzontale, lentissimi e molto trasparenti. Passano DIETRO al contenuto (z-index 0): un fantasma che passa davanti a un prezzo è un fantasma che ti impedisce di comprare. ───────────────────────────────── */ html[data-tema="halloween"] .hw-fantasma { position: absolute; width: 46px; height: 46px; pointer-events: none; opacity: 0; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.1 2 5 5.1 5 9v11l2.3-2 2.3 2 2.4-2 2.4 2 2.3-2 2.3 2V9c0-3.9-3.1-7-7-7z' fill='%23e8e3d8'/%3E%3Ccircle cx='9.3' cy='8.8' r='1.25' fill='%230a0a0a'/%3E%3Ccircle cx='14.7' cy='8.8' r='1.25' fill='%230a0a0a'/%3E%3Cellipse cx='12' cy='12.8' rx='1.4' ry='.9' fill='%230a0a0a'/%3E%3C/svg%3E"); animation: hw-attraversa linear infinite; } @keyframes hw-attraversa { 0% { transform: translateX(-14vw) translateY(0) scale(.85); opacity: 0; } 14% { opacity: 0.20; } /* Il saliscendi è ciò che rende il moto "fluttuante" invece che "trascinato": senza, sembra un adesivo tirato con uno spago. */ 35% { transform: translateX(28vw) translateY(-26px) scale(1); opacity: 0.26; } 65% { transform: translateX(64vw) translateY(14px) scale(.92); opacity: 0.22; } 86% { opacity: 0.12; } 100% { transform: translateX(114vw) translateY(-10px) scale(.88); opacity: 0; } } /* ───────────────────────────────── 6.5 ZUCCA NELL'ETICHETTA DELL'EROE Un solo tocco, nel punto più visto della home. ───────────────────────────────── */ html[data-tema="halloween"] .hero-badge::before { content: ''; display: inline-block; width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a1a' stroke-width='1.6'%3E%3Cpath d='M12 4.6c0-1 .5-1.9 1.5-2.3' stroke-linecap='round'/%3E%3Cpath d='M12 5.2c-1.2-1-3-1.1-4.4-.2C5.9 6 5 7.9 5 10.2c0 3.9 2.9 7.6 7 7.6s7-3.7 7-7.6c0-2.3-.9-4.2-2.6-5.2-1.4-.9-3.2-.8-4.4.2z' fill='%23ff7a1a'/%3E%3Cpath d='M9.4 6.1C8.5 7.3 8.1 8.9 8.1 10.4c0 1.6.4 3.2 1.3 4.4M14.6 6.1c.9 1.2 1.3 2.8 1.3 4.3 0 1.6-.4 3.2-1.3 4.4' stroke='%23c94f10'/%3E%3C/svg%3E"); } /* ───────────────────────────────── 6.6 LE ECCEZIONI, ANCORA Le ragnatele restano: sono ferme. Spariscono solo il ragno, i fantasmi e le braci, che si muovono. ───────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html[data-tema="halloween"] .hw-ragno, html[data-tema="halloween"] .hw-fantasma { display: none; } } @media print { html[data-tema="halloween"] .hw-ragnatela, html[data-tema="halloween"] .hw-ragno, html[data-tema="halloween"] .hw-fantasma { display: none; } }