/* ====================================================================== METAL MODE — easter egg 🤘 (attivato dal pulsante nella firma) Questo file va incluso DOPO hacker-theme.css / hacker-red-theme.css, sempre attivo (mai disabled): tutte le regole sono scoped su "html.metal-mode ..." quindi finché quella classe non è presente sul tag non ha alcun effetto su dark/light. ====================================================================== */ html.metal-mode{ --bg: #000000; --bg-2: #060606; --bg-3: #0a0a0a; --line: #2a2a2a; --line-soft: #1a1a1a; --fg: #f5f5f5; --fg-muted: #d8d8d8; --dim: #9a9a9a; --orange: #ff2e2e; /* diventa il "colore principale" del tema */ --orange-2: #ff8a00; --orange-dim: #b3001f; --orange-glow: rgba(255,46,46,0.65); --orange-soft: rgba(255,46,46,0.10); --danger: #ff2e2e; --warn: #ffe600; --ok: #39ff14; /* palette multicolore, invariata */ --metal-red: #ff1a1a; --metal-orange: #ff8800; --metal-green: #39ff14; --metal-purple: #b026ff; --metal-magenta: #ff00ea; } /* ---------- sfondo pece: flicker da ampli rotto ---------- */ html.metal-mode body{ background: var(--bg); animation: metal-flicker 6s infinite; } @keyframes metal-flicker{ 0%, 96%, 100% { filter: none; } 97% { filter: brightness(1.15); } 98% { filter: brightness(0.9); } } /* tremore: NON sul body (romperebbe il position:fixed degli overlay GIF, che diventerebbero relativi al body invece che alla finestra), ma sui blocchi di contenuto visibile */ html.metal-mode header, html.metal-mode main, html.metal-mode footer, html.metal-mode .navbar{ animation: metal-tremor 0.4s infinite; } @keyframes metal-tremor{ 0%, 100%{ transform: translate(0,0); } 20%{ transform: translate(-1px, 2px); } 40%{ transform: translate(3px, -1px); } 60%{ transform: translate(-1px, -1px); } 80%{ transform: translate(1px, 1px); } } /* ---------- overlay GIF: sfondo a piastrelle ciclico + fuoco fullscreen ---------- Due
vuoti nell'HTML (vedi istruzioni sotto), popolati via JS con le GIF. Nascosti finché .metal-mode non è sull'. */ #metal-bg-overlay, #metal-fire-overlay{ display: none; position: fixed; inset: 0; pointer-events: none; } html.metal-mode #metal-bg-overlay{ display: block; background-repeat: repeat; background-size: 220px 220px; background-position: center; opacity: .14; mix-blend-mode: screen; z-index: 1; } html.metal-mode #metal-fire-overlay{ display: block; background-size: cover; background-position: center bottom; opacity: .2; mix-blend-mode: screen; z-index: 2; } /* titoli ed elementi in risalto: testo che scorre tra i colori fluo, rallentato molto (era 5s, ora 18s) */ html.metal-mode h1, html.metal-mode h2, html.metal-mode h3, html.metal-mode strong, html.metal-mode b, html.metal-mode .brand, html.metal-mode .kicker, html.metal-mode blockquote{ background: linear-gradient(90deg, var(--metal-red), var(--metal-orange), var(--metal-green), var(--metal-purple), var(--metal-magenta), var(--metal-red)); background-size: 400% auto; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: metal-shift 18s linear infinite; text-shadow: none; } @keyframes metal-shift{ 0%{ background-position: 0% 50%; } 100%{ background-position: 400% 50%; } } /* link */ html.metal-mode a{ color: var(--metal-orange); border-color: rgba(255,136,0,0.4); } html.metal-mode a:hover{ color: var(--metal-magenta); border-color: var(--metal-magenta); text-shadow: 0 0 10px var(--metal-magenta); } /* icone (font-awesome, social-icon, widicons, oss-platforms...) diventano fluo */ html.metal-mode i, html.metal-mode svg, html.metal-mode .social-icon, html.metal-mode .widicons{ filter: drop-shadow(0 0 6px var(--metal-purple)) saturate(2) hue-rotate(10deg); } /* scrollbar e selezione testo coerenti */ html.metal-mode ::-webkit-scrollbar-thumb{ background: var(--metal-purple); } html.metal-mode ::-webkit-scrollbar-thumb:hover{ background: var(--metal-magenta); } html.metal-mode ::selection{ background: var(--metal-magenta); color: #000; } /* ---------- cursore: GIF scelta a caso dallo script (vedi JS), con fallback sull'icona bianca disegnata se non hai ancora configurato nessuna GIF ---------- */ html.metal-mode, html.metal-mode *{ cursor: var(--metal-cursor, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' width='32' height='32'%3E%3Crect x='23' y='3' width='7' height='19' rx='3.5' transform='rotate(8 26.5 12.5)' fill='white'/%3E%3Crect x='8' y='5' width='7' height='18' rx='3.5' transform='rotate(-8 11.5 14)' fill='white'/%3E%3Crect x='9' y='17' width='22' height='16' rx='8' fill='white'/%3E%3Ccircle cx='7' cy='28' r='6' fill='white'/%3E%3C/svg%3E") 6 30, auto) !important; } /* ---------- pulsante toggle nella firma/footer ---------- */ /* icona bianca disegnata al posto dell'emoji: il