/* ── Pack sperimentale «off-topic» per il pannello ──────────────────────────── * Si attiva solo quando . Il tema normale * resta il predefinito: senza l'attributo questo foglio non applica niente. * Estetica ripresa dal pack sezioni (accent terracotta, Courgette/Caveat, * cornici organiche tondeggianti con bordi spezzati). Per rimuoverlo basta * togliere il in panel.html e il file panel-pack.js. */ @font-face{font-family:Pack_courgette;src:url('/assets/fonts/pack-courgette.ttf');font-display:swap} @font-face{font-family:Pack_caveat;src:url('/assets/fonts/pack-caveat.ttf');font-display:swap} /* Font dei pack rimanenti: caricati solo quando il pack li usa. */ @font-face{font-family:Pack_kaushanscript;src:url('/assets/fonts/pack-kaushanscript.ttf');font-display:swap} @font-face{font-family:Pack_cinzeldecorative;src:url('/assets/fonts/pack-cinzeldecorative.ttf');font-display:swap} @font-face{font-family:Pack_righteous;src:url('/assets/fonts/pack-righteous.ttf');font-display:swap} @font-face{font-family:Pack_teko;src:url('/assets/fonts/pack-teko.ttf');font-display:swap} @font-face{font-family:Pack_audiowide;src:url('/assets/fonts/pack-audiowide.ttf');font-display:swap} @font-face{font-family:Pack_bangers;src:url('/assets/fonts/pack-bangers.ttf');font-display:swap} @font-face{font-family:Pack_blackopsone;src:url('/assets/fonts/pack-blackopsone.ttf');font-display:swap} @font-face{font-family:Pack_orbitron;src:url('/assets/fonts/pack-orbitron.ttf');font-display:swap} @font-face{font-family:Pack_oxanium;src:url('/assets/fonts/pack-oxanium.ttf');font-display:swap} @font-face{font-family:Pack_vt323;src:url('/assets/fonts/pack-vt323.ttf');font-display:swap} @font-face{font-family:Pack_spacegrotesk;src:url('/assets/fonts/pack-spacegrotesk.ttf');font-display:swap} @font-face{font-family:Pack_cormorantgaramond;src:url('/assets/fonts/pack-cormorantgaramond.ttf');font-display:swap} @font-face{font-family:Pack_marcellus;src:url('/assets/fonts/pack-marcellus.ttf');font-display:swap} @font-face{font-family:Pack_spectral;src:url('/assets/fonts/pack-spectral.ttf');font-display:swap} @font-face{font-family:Pack_playfairdisplay;src:url('/assets/fonts/pack-playfairdisplay.ttf');font-display:swap} @font-face{font-family:Pack_pirataone;src:url('/assets/fonts/pack-pirataone.ttf');font-display:swap} @font-face{font-family:Pack_satisfy;src:url('/assets/fonts/pack-satisfy.ttf');font-display:swap} @font-face{font-family:Pack_architectsdaughter;src:url('/assets/fonts/pack-architectsdaughter.ttf');font-display:swap} @font-face{font-family:Pack_almendra;src:url('/assets/fonts/pack-almendra.ttf');font-display:swap} @font-face{font-family:Pack_josefinsans;src:url('/assets/fonts/pack-josefinsans.ttf');font-display:swap} @font-face{font-family:Pack_rye;src:url('/assets/fonts/pack-rye.ttf');font-display:swap} @font-face{font-family:Pack_russoone;src:url('/assets/fonts/pack-russoone.ttf');font-display:swap} @font-face{font-family:Pack_robotoslab;src:url('/assets/fonts/pack-robotoslab.ttf');font-display:swap} @font-face{font-family:Pack_nunito;src:url('/assets/fonts/pack-nunito.ttf');font-display:swap} @font-face{font-family:Pack_quicksand;src:url('/assets/fonts/pack-quicksand.ttf');font-display:swap} @font-face{font-family:Pack_rajdhani;src:url('/assets/fonts/Rajdhani-SemiBold.ttf');font-display:swap} @font-face{font-family:Pack_sharetech;src:url('/assets/fonts/ShareTechMono-Regular.woff2');font-display:swap} /* ══════════════════════════════════════════════════════════════════════════ * Motore generico dei pack del pannello. * Ogni valore di html[data-panel-pack] eredita questa struttura: i singoli * pack definiscono solo le variabili --pp-* (e le variabili base del tema, * cosi' anche gli stili inline che usano var(--surface2), var(--neon-cyan) * ecc. si tingono automaticamente). I blocchi specifici dei pack scritti * dopo questo motore possono rifinire ogni dettaglio. * ═══════════════════════════════════════════════════════════════════════ */ html[data-panel-pack]{ --pp-ink:var(--text); --pp-ink-dim:var(--text-dim); --pp-accent:var(--neon-cyan); --pp-accent-ink:#0a0a12; --pp-line:var(--border); --pp-line-acc:var(--pp-accent); --pp-surface3:var(--surface2); --pp-font-title:var(--pp-font-cmd,inherit); --pp-font-cmd:inherit; --pp-font-body:inherit; --pp-font-list:var(--pp-font-body,inherit); --pp-hero:none; --pp-hero-pos:top center; --pp-hero-size:100% auto; --pp-veil:linear-gradient(rgba(10,10,18,.88) 0,rgba(10,10,18,.94) 340px,rgba(10,10,18,.97) 100%); --pp-radius:10px; --pp-radius-sm:8px; --pp-btn-radius:var(--pp-radius-sm); --pp-field-radius:var(--pp-radius-sm); --pp-nav-radius:var(--pp-radius-sm); --pp-border-style:solid; --pp-card-border:1px var(--pp-border-style) var(--pp-line); --pp-side-bg:linear-gradient(180deg,var(--surface),var(--bg) 60%,var(--surface)); --pp-side-border:1px var(--pp-border-style) var(--pp-line); --pp-orn-space:0px; --pp-orn-img:none; --pp-orn-bg-size:cover; --pp-orn-pos:center; --pp-orn-opacity:.4; --pp-title-transform:none; --pp-title-weight:400; --pp-btn-transform:none; --pp-btn-spacing:.04em; } /* Fondale: l'illustrazione del pack dietro il contenuto. */ html[data-panel-pack] body{ background:var(--bg) var(--pp-hero) var(--pp-hero-pos)/var(--pp-hero-size) no-repeat fixed; } html[data-panel-pack] #main-screen{background:transparent} html[data-panel-pack] #content{background:var(--pp-veil)} /* Sidebar: palette e ornamento del pack. */ html[data-panel-pack] #sidebar{background:var(--pp-side-bg);border-right:var(--pp-side-border)} html[data-panel-pack] .sidebar-logo{ font-family:var(--pp-font-title);font-weight:var(--pp-title-weight);font-size:22px; color:var(--pp-accent);letter-spacing:.06em;text-transform:var(--pp-title-transform); text-shadow:0 2px 10px #0008; } html[data-panel-pack] #nav-links li{ border-radius:var(--pp-nav-radius);margin:2px 8px; border:1px solid transparent;transition:background .15s,border-color .15s; } html[data-panel-pack] #nav-links li:hover{background:var(--pp-surface3);border-color:var(--pp-line)} html[data-panel-pack] #nav-links li.active, html[data-panel-pack] #nav-links li[aria-current]{ background:var(--pp-surface3);border-color:var(--pp-line-acc);color:var(--pp-accent); } html[data-panel-pack] .sidebar-footer{ border-top:1px var(--pp-border-style) var(--pp-line); position:relative;padding-bottom:calc(14px + var(--pp-orn-space)); } html[data-panel-pack] .sidebar-footer::after{ content:'';position:absolute;left:50%;bottom:8px;transform:translateX(-50%); width:64px;height:56px;background-image:var(--pp-orn-img); background-size:var(--pp-orn-bg-size);background-position:var(--pp-orn-pos); background-repeat:no-repeat;border-radius:var(--pp-radius-sm); opacity:var(--pp-orn-opacity);pointer-events:none; filter:drop-shadow(0 2px 3px #000a); } /* Testate: il titolo nel carattere del pack. */ html[data-panel-pack] #content header h1{ font-family:var(--pp-font-title);font-weight:var(--pp-title-weight);font-size:30px; color:var(--pp-accent);letter-spacing:.05em;text-transform:var(--pp-title-transform); text-shadow:0 2px 10px #000a; } html[data-panel-pack] #status{font-family:var(--pp-font-body);color:var(--pp-ink-dim)} html[data-panel-pack] .page-header h2{ font-family:var(--pp-font-title)!important;font-weight:var(--pp-title-weight); color:var(--pp-accent)!important;font-size:28px;letter-spacing:.06em; text-transform:var(--pp-title-transform); } /* Schede, riquadri, dialog e superfici del File Manager/Galleria. */ html[data-panel-pack] .foa-card, html[data-panel-pack] #page section, html[data-panel-pack] .channel-step, html[data-panel-pack] .channel-intro, html[data-panel-pack] .channel-notice, html[data-panel-pack] .fm-quick, html[data-panel-pack] .fm-selbar, html[data-panel-pack] .fm-info-card, html[data-panel-pack] .foa-avviso, html[data-panel-pack] .forum-transfer-progress, html[data-panel-pack] .gal-toolbar, html[data-panel-pack] .gal-selbar, html[data-panel-pack] .gal-detail, html[data-panel-pack] dialog:not(.channel-dialog), html[data-panel-pack] .channel-dialog{ border:var(--pp-card-border)!important;border-radius:var(--pp-radius)!important; } html[data-panel-pack] .fm-side, html[data-panel-pack] .fm-toolbar, html[data-panel-pack] .fm-letter-bar{ border:var(--pp-card-border)!important;border-radius:var(--pp-radius)!important; background:var(--surface2)!important; } html[data-panel-pack] .gal-side{ border:var(--pp-card-border)!important;border-radius:var(--pp-radius)!important; background:var(--pp-side-bg)!important; } html[data-panel-pack] .gal-sec{ font-family:var(--pp-font-cmd);color:var(--pp-accent)!important; } html[data-panel-pack] .fm-toolbar{padding:12px} html[data-panel-pack] .fm-toolbar-search input{font-family:var(--pp-font-list)} html[data-panel-pack] .fm-toolbar-actions button{ font-family:var(--pp-font-cmd)!important;letter-spacing:var(--pp-btn-spacing); text-transform:var(--pp-btn-transform); } html[data-panel-pack] .fm-side-title, html[data-panel-pack] .fm-sect{ font-family:var(--pp-font-cmd);color:var(--pp-accent)!important; letter-spacing:.1em;text-transform:uppercase; } html[data-panel-pack] .foa-card h4, html[data-panel-pack] .channel-step h3, html[data-panel-pack] .channel-intro h2, html[data-panel-pack] #page h2, html[data-panel-pack] #page h3, html[data-panel-pack] .gal-dname{ font-family:var(--pp-font-title);font-weight:var(--pp-title-weight); color:var(--pp-accent);letter-spacing:.04em; } html[data-panel-pack] .channel-number{ background:var(--pp-accent);color:var(--pp-accent-ink); border-radius:var(--pp-radius-sm);font-family:var(--pp-font-cmd); } html[data-panel-pack] .channel-notice{border-left:3px var(--pp-border-style) var(--pp-accent)!important} /* Pulsanti: il carattere dei comandi del pack. */ html[data-panel-pack] .foa-tab, html[data-panel-pack] .foa-b, html[data-panel-pack] #page button:not(.channel-close), html[data-panel-pack] .channel-guide button, html[data-panel-pack] .btn-small, html[data-panel-pack] .gal-btn, html[data-panel-pack] .gal-vbtn, html[data-panel-pack] dialog:not(.channel-dialog) button, html[data-panel-pack] .channel-dialog button:not(.channel-close){ font-family:var(--pp-font-cmd);letter-spacing:var(--pp-btn-spacing); text-transform:var(--pp-btn-transform); border-radius:var(--pp-btn-radius); background:var(--surface2);border:1px var(--pp-border-style) var(--pp-line); color:var(--pp-ink); } html[data-panel-pack] .foa-tab.active, html[data-panel-pack] .foa-b.pri, html[data-panel-pack] .channel-guide button.btn-primary, html[data-panel-pack] #page button.pri, html[data-panel-pack] .btn-neon, html[data-panel-pack] .gal-vbtn.on{ background:var(--pp-accent)!important;color:var(--pp-accent-ink)!important; border-color:var(--pp-accent)!important; } html[data-panel-pack] .gal-btn:hover{border-color:var(--pp-accent);color:var(--pp-accent)} html[data-panel-pack] .foa-b.male, html[data-panel-pack] .btn-danger{background:#3d1416;color:#f0c8c5;border-color:#5c1e20} /* Campi di input. */ html[data-panel-pack] input, html[data-panel-pack] select, html[data-panel-pack] textarea{ background:var(--bg)!important;color:var(--pp-ink)!important; border:1px var(--pp-border-style) var(--pp-line)!important; border-radius:var(--pp-field-radius)!important; font-family:var(--pp-font-body); } html[data-panel-pack] input:focus, html[data-panel-pack] select:focus, html[data-panel-pack] textarea:focus{ border-color:var(--pp-accent)!important;outline:none; box-shadow:0 0 0 1px var(--pp-accent); } /* Tabelle e liste di file: il registro del pack. */ html[data-panel-pack] .foa-tab-t th, html[data-panel-pack] .maintenance-table th, html[data-panel-pack] .fm-list thead th{ color:var(--pp-accent)!important;font-family:var(--pp-font-cmd); letter-spacing:.08em;text-transform:uppercase; border-bottom:2px var(--pp-border-style) var(--pp-line-acc)!important; } html[data-panel-pack] .foa-tab-t td, html[data-panel-pack] .maintenance-table td, html[data-panel-pack] .fm-row, html[data-panel-pack] .fm-card-row, html[data-panel-pack] [data-folder-row]{ font-family:var(--pp-font-list); } html[data-panel-pack] [data-folder-row][data-active="1"]{color:var(--pp-accent)!important} html[data-panel-pack] .fm-card, html[data-panel-pack] .drive-row, html[data-panel-pack] .share-row, html[data-panel-pack] .gal-card{ border-radius:var(--pp-radius-sm)!important; } html[data-panel-pack] .fm-card{ border-style:var(--pp-border-style)!important;border-color:var(--pp-line)!important; } /* Percorso (breadcrumb) del File Manager. */ html[data-panel-pack] .fm-crumb{font-family:var(--pp-font-cmd);font-size:13px} html[data-panel-pack] .fm-crumb-root{color:var(--pp-accent)!important;letter-spacing:.05em} /* Filtri alfabetici: le schede dell'indice. */ html[data-panel-pack] .fm-letter, html[data-panel-pack] .gal-lett{ font-family:var(--pp-font-cmd)!important;font-size:13px!important; letter-spacing:.06em;padding:3px 9px!important; border-radius:var(--pp-btn-radius)!important; border:1px var(--pp-border-style) var(--pp-line)!important; background:var(--bg)!important;color:var(--pp-ink-dim)!important; } html[data-panel-pack] .fm-letter.fm-letter-on, html[data-panel-pack] .fm-letter:hover, html[data-panel-pack] .gal-lett.on, html[data-panel-pack] .gal-lett:hover{ background:var(--pp-accent)!important;color:var(--pp-accent-ink)!important; border-color:var(--pp-accent)!important; } /* Pulsanti pillola del File Manager (cronologia, file logici). */ html[data-panel-pack] .fm-pill{ font-family:var(--pp-font-cmd)!important;letter-spacing:.05em; border-radius:var(--pp-btn-radius)!important; } html[data-panel-pack] .fm-pill.fm-pill-on{ background:var(--pp-accent)!important;color:var(--pp-accent-ink)!important; border-color:var(--pp-accent)!important; } /* Menu contestuale del File Manager. */ html[data-panel-pack] .fm-context-menu{ background:var(--surface)!important;border:var(--pp-card-border)!important; border-radius:var(--pp-radius-sm)!important;box-shadow:0 10px 30px #000a; } html[data-panel-pack] .fm-context-item{ font-family:var(--pp-font-body);color:var(--pp-ink)!important; } html[data-panel-pack] .fm-context-item:hover{background:var(--pp-surface3)!important} /* Galleria: testi e controlli nel tono del pack. */ html[data-panel-pack] .gal-crumb, html[data-panel-pack] .gal-dmeta, html[data-panel-pack] .gal-empty, html[data-panel-pack] .gal-chip, html[data-panel-pack] .gal-tagchip{font-family:var(--pp-font-body)} html[data-panel-pack] .gal-item{border-radius:var(--pp-radius-sm)!important} /* Il ciano di serie (logo sfumato, pulsante upload, selezioni) segue il pack. */ html[data-panel-pack] .gal-logo{ font-family:var(--pp-font-title);font-weight:var(--pp-title-weight); background:none!important;color:var(--pp-accent)!important; -webkit-background-clip:initial!important;background-clip:initial!important; letter-spacing:.08em;text-transform:var(--pp-title-transform); } html[data-panel-pack] .gal-upbtn{ background:var(--pp-accent)!important;color:var(--pp-accent-ink)!important; font-family:var(--pp-font-cmd);letter-spacing:var(--pp-btn-spacing); text-transform:var(--pp-btn-transform);border-radius:var(--pp-btn-radius)!important; box-shadow:0 4px 18px #0006!important; } html[data-panel-pack] .gal-item.on{ background:var(--pp-surface3)!important;border-color:var(--pp-line-acc)!important; color:var(--pp-accent); } html[data-panel-pack] .gal-chip.on{ background:var(--pp-accent)!important;color:var(--pp-accent-ink)!important; border-color:transparent!important;box-shadow:0 4px 14px #0006!important; } html[data-panel-pack] .gal-vbtn.on, html[data-panel-pack] .gal-tagchip.on, html[data-panel-pack] .gal-lett.on, html[data-panel-pack] .gal-crumb-it.on{ border-color:var(--pp-accent)!important;color:var(--pp-accent)!important; background:var(--pp-surface3)!important; } html[data-panel-pack] .gal-card:hover{border-color:var(--pp-line-acc)!important} html[data-panel-pack] .gal-card.sel{ border-color:var(--pp-accent)!important; box-shadow:0 0 0 2px var(--pp-line-acc),0 8px 22px #0007!important; } html[data-panel-pack] .gal-selbar{border-color:var(--pp-line-acc)!important;background:var(--surface2)!important} /* Avanzamento, badge, stati vuoti e selettore. */ html[data-panel-pack] progress{accent-color:var(--pp-accent)} html[data-panel-pack] .forum-transfer-progress{border-left:4px solid var(--pp-accent)} html[data-panel-pack] .badge, html[data-panel-pack] .tag{ font-family:var(--pp-font-cmd);letter-spacing:.08em; text-transform:uppercase;border-radius:var(--pp-radius-sm); } html[data-panel-pack] #page p.muted{ font-family:var(--pp-font-body);color:var(--pp-ink-dim);text-align:center; } html[data-panel-pack] .panel-pack-box select{ border:1px var(--pp-border-style) var(--pp-line-acc)!important; background:var(--pp-surface3)!important;color:var(--pp-accent)!important; font-family:var(--pp-font-cmd);letter-spacing:.05em; } html[data-panel-pack="off-topic"]{ --pp-accent:#ef9a83; /* terracotta del pack */ --pp-accent-ink:#241008; --pp-surface:#10201e; /* verde bosco scuro dei messaggi */ --pp-surface2:#20342f; /* verde dei comandi */ --pp-line:#836f5e; /* bordo caldo delle schede */ --pp-line2:#7b7360; /* bordo tratteggiato dei messaggi */ /* Mappatura sul motore generico */ --bg:#0a1513; --surface:#10201e; --surface2:#20342f; --border:#46584f; --text:#f3e6dd; --text-dim:#a99e8f; --neon-cyan:#ef9a83; --neon-yellow:#e8c47c; --radius:14px; --pp-ink:#f3e6dd; --pp-ink-dim:#a99e8f; --pp-line-acc:#ef9a83; --pp-surface3:#2a4239; --pp-font-title:Pack_courgette,cursive; --pp-font-cmd:Pack_caveat,cursive; --pp-font-body:Pack_quicksand,sans-serif; --pp-font-list:Pack_quicksand,sans-serif; --pp-hero:url('/assets/ui/sections/off-topic.png'); --pp-hero-pos:top center; --pp-hero-size:100% auto; --pp-veil:linear-gradient(#0a1513d8 0,#0a1513ee 420px,#0a1513f4 100%); --pp-radius:26px 8px 24px 10px; --pp-radius-sm:20px 7px 20px 8px; --pp-btn-radius:20px 9px 20px 11px; --pp-field-radius:14px 6px 14px 7px; --pp-nav-radius:22px 9px 22px 11px; --pp-border-style:dashed; --pp-card-border:2px solid var(--pp-line); --pp-side-border:2px dashed var(--pp-line); --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/sections/off-topic-kit.png'); --pp-orn-bg-size:600% 400%; --pp-orn-pos:0% 0%; } /* Il bosco dietro: la testata del pack fa da fondale tenue al contenuto. */ html[data-panel-pack="off-topic"] body{ background:#0a1513 url('/assets/ui/sections/off-topic.png') top center/100% auto no-repeat fixed; } html[data-panel-pack="off-topic"] #main-screen{background:transparent} html[data-panel-pack="off-topic"] #content{ background:linear-gradient(#0a1513d8 0,#0a1513ee 420px,#0a1513f4 100%); } /* ── Sidebar ────────────────────────────────────────────────────────────── */ html[data-panel-pack="off-topic"] #sidebar{ background:linear-gradient(180deg,#0c1a17,#10201e 60%,#0c1a17); border-right:2px dashed var(--pp-line); } html[data-panel-pack="off-topic"] .sidebar-logo{ font-family:Pack_courgette,cursive;font-size:22px;color:var(--pp-accent); letter-spacing:.4px;text-shadow:0 2px 10px #0008; } html[data-panel-pack="off-topic"] #nav-links li{ border-radius:22px 9px 22px 11px;margin:2px 8px; border:1px solid transparent;transition:background .15s,border-color .15s; } html[data-panel-pack="off-topic"] #nav-links li:hover{ background:var(--pp-surface2);border-color:var(--pp-line2); } html[data-panel-pack="off-topic"] #nav-links li.active, html[data-panel-pack="off-topic"] #nav-links li[aria-current]{ background:var(--pp-surface2);border:1px dashed var(--pp-accent); color:var(--pp-accent); } html[data-panel-pack="off-topic"] .sidebar-footer{border-top:1px dashed var(--pp-line)} /* ── Testata pagina ─────────────────────────────────────────────────────── */ html[data-panel-pack="off-topic"] #content header h1{ font-family:Pack_courgette,cursive;font-weight:400;font-size:34px; color:var(--pp-accent);text-shadow:0 2px 12px #000a; } /* Il titolo interno delle pagine (FILE MANAGER e simili): stesso carattere. */ html[data-panel-pack="off-topic"] .page-header h2{ font-family:Pack_courgette,cursive;font-weight:400; color:var(--pp-accent)!important;font-size:32px;text-shadow:0 2px 10px #000a; } /* ── Schede, riquadri, passi: le cornici organiche del pack ─────────────── */ html[data-panel-pack="off-topic"] .foa-card, html[data-panel-pack="off-topic"] #page section, html[data-panel-pack="off-topic"] .channel-step, html[data-panel-pack="off-topic"] .channel-intro, html[data-panel-pack="off-topic"] .channel-notice, html[data-panel-pack="off-topic"] .fm-card, html[data-panel-pack="off-topic"] .foa-avviso, html[data-panel-pack="off-topic"] .forum-transfer-progress, html[data-panel-pack="off-topic"] dialog:not(.channel-dialog), html[data-panel-pack="off-topic"] .channel-dialog{ background:var(--pp-surface); border:2px solid var(--pp-line); border-radius:26px 8px 24px 10px; } html[data-panel-pack="off-topic"] .foa-card h4, html[data-panel-pack="off-topic"] .channel-step h3, html[data-panel-pack="off-topic"] .channel-intro h2, html[data-panel-pack="off-topic"] #page h2, html[data-panel-pack="off-topic"] #page h3{ font-family:Pack_courgette,cursive;font-weight:400;color:var(--pp-accent); letter-spacing:.3px; } html[data-panel-pack="off-topic"] .channel-number{ background:var(--pp-surface2);border:1px dashed var(--pp-accent); border-radius:12px 6px 12px 7px;color:var(--pp-accent); } html[data-panel-pack="off-topic"] .channel-notice{border-left:3px solid var(--pp-accent)} /* ── Tab e pulsanti: Caveat, come i comandi del pack ────────────────────── */ html[data-panel-pack="off-topic"] .foa-tab, html[data-panel-pack="off-topic"] .foa-b, html[data-panel-pack="off-topic"] #page button:not(.channel-close), html[data-panel-pack="off-topic"] .channel-guide button, html[data-panel-pack="off-topic"] .btn-small, html[data-panel-pack="off-topic"] dialog:not(.channel-dialog) button, html[data-panel-pack="off-topic"] .channel-dialog button:not(.channel-close){ font-family:Pack_caveat,cursive;font-size:19px;font-weight:600; border-radius:20px 9px 20px 11px; background:var(--pp-surface2);border:1px dashed var(--pp-line2); color:#f0e2d8; } html[data-panel-pack="off-topic"] .foa-tab.active, html[data-panel-pack="off-topic"] .foa-b.pri, html[data-panel-pack="off-topic"] .channel-guide button.btn-primary, html[data-panel-pack="off-topic"] #page button.pri{ background:var(--pp-accent);color:var(--pp-accent-ink); border:1px solid var(--pp-accent); } html[data-panel-pack="off-topic"] .foa-b.male, html[data-panel-pack="off-topic"] .btn-danger{background:#5a2e26;color:#ffd9cf} /* ── Campi e tabelle ────────────────────────────────────────────────────── */ html[data-panel-pack="off-topic"] input, html[data-panel-pack="off-topic"] select, html[data-panel-pack="off-topic"] textarea{ background:#0c1a17!important;border:1px solid var(--pp-line)!important; border-radius:14px 6px 14px 7px!important;color:var(--pp-ink,#f3e6dd)!important; } html[data-panel-pack="off-topic"] .foa-tab-t th, html[data-panel-pack="off-topic"] .maintenance-table th{ color:var(--pp-accent);border-bottom:2px dashed var(--pp-line); font-family:Pack_courgette,cursive;font-weight:400; } html[data-panel-pack="off-topic"] .foa-tab-t td, html[data-panel-pack="off-topic"] .maintenance-table td{ border-bottom:1px dashed #3a4a42; } html[data-panel-pack="off-topic"] .foa-tab-t tr:hover td{background:#162a26} /* Righe di file/condivisioni/trasferimenti: il tratteggio dei messaggi. */ html[data-panel-pack="off-topic"] .fm-row, html[data-panel-pack="off-topic"] .drive-row, html[data-panel-pack="off-topic"] .share-row, html[data-panel-pack="off-topic"] .gal-card{ border:1px dashed var(--pp-line2);border-radius:20px 7px 20px 8px; background:var(--pp-surface); } /* ── Il selettore stesso, in testata a destra ───────────────────────────── */ #content header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} #content header .header-titles{min-width:0;flex:1} .panel-pack-box{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim);flex:none;margin-top:4px} .panel-pack-box:before{content:'\1F3A8';font-size:13px} .panel-pack-box select{font-size:11px;padding:4px 8px;border-radius:8px;background:var(--surface,#121522);color:inherit;border:1px solid var(--border,#2d3248)} html[data-panel-pack="off-topic"] .panel-pack-box select{ border:1px dashed var(--pp-accent)!important;background:var(--pp-surface2)!important; color:var(--pp-accent)!important;font-family:Pack_caveat,cursive;font-size:15px; } /* ══════════════════════════════════════════════════════════════════════════ * Pack «dylan-dog» — noir londinese: rosso sangue, macchina da scrivere, * bordi netti da tavola a fumetti e icone dal kit dello Studio. * Font: Special Elite (testi/indagini) + Bebas Neue (comandi/pulsanti). * Sprite kit: /assets/ui/studio/dylan-dog-kit.png, griglia 6x4 → * background-size:600% 400%, posizione = colonna%20 riga%33.333. * ═══════════════════════════════════════════════════════════════════════ */ @font-face{font-family:Pack_specialelite;src:url('/assets/fonts/pack-specialelite.ttf');font-display:swap} @font-face{font-family:Pack_bebasneue;src:url('/assets/fonts/pack-bebasneue.ttf');font-display:swap} html[data-panel-pack="dylan-dog"]{ --dd-accent:#e75a60; /* rosso sangue del pack */ --dd-accent-ink:#1a0505; --dd-ink:#ece4d6; /* avorio della carta */ --dd-ink-dim:#a99e8f; --dd-surface:#151210; /* nero fumo delle vignette */ --dd-surface2:#1f1a16; /* cartone delle schede */ --dd-surface3:#282019; --dd-line:#4d4138; /* bordo sottile delle tavole */ --dd-line-red:#8c3438; /* bordo rosso spento */ --dd-kit:url('/assets/ui/studio/dylan-dog-kit.png'); /* Mappatura sul motore generico: il noir prende anche i riquadri inline. */ --bg:#0b0908; --surface:#151210; --surface2:#1f1a16; --border:#4d4138; --text:#ece4d6; --text-dim:#a99e8f; --neon-cyan:#e75a60; --neon-yellow:#d9b98c; --radius:3px; --pp-accent:#e75a60; --pp-accent-ink:#1a0505; --pp-ink:#ece4d6; --pp-ink-dim:#a99e8f; --pp-line:#4d4138; --pp-line-acc:#8c3438; --pp-surface3:#282019; --pp-font-title:Pack_specialelite,monospace; --pp-font-cmd:Pack_bebasneue,sans-serif; --pp-font-body:Pack_nunito,sans-serif; --pp-font-list:Pack_specialelite,monospace; --pp-hero:url('/assets/ui/studio/dylan-dog-hero.png'); --pp-hero-pos:top right; --pp-hero-size:min(1100px,85%) auto; --pp-veil:linear-gradient(#0b0908e6 0,#0b0908f2 300px,#0b0908f8 100%); --pp-radius:3px; --pp-radius-sm:2px; --pp-btn-radius:2px; --pp-field-radius:2px; --pp-nav-radius:2px; --pp-border-style:solid; --pp-card-border:1px solid var(--pp-line); --pp-side-border:1px solid var(--pp-line); --pp-side-bg:linear-gradient(180deg,#0d0a09,#151210 55%,#0d0a09); --pp-title-transform:uppercase; --pp-btn-transform:uppercase; --pp-btn-spacing:.12em; } /* La Londra di Craven Road dietro il contenuto. */ html[data-panel-pack="dylan-dog"] body{ background:#0b0908 url('/assets/ui/studio/dylan-dog-hero.png') top right/min(1100px,85%) auto no-repeat fixed; } html[data-panel-pack="dylan-dog"] #main-screen{background:transparent} html[data-panel-pack="dylan-dog"] #content{ background:linear-gradient(#0b0908e6 0,#0b0908f2 300px,#0b0908f8 100%); } /* ── Sidebar: l'archivio dell'investigatore ─────────────────────────────── */ html[data-panel-pack="dylan-dog"] #sidebar{ background:linear-gradient(180deg,#0d0a09,#151210 55%,#0d0a09); border-right:1px solid var(--dd-line);position:relative; } html[data-panel-pack="dylan-dog"] .sidebar-logo{ font-family:Pack_bebasneue,sans-serif;font-size:24px;color:var(--dd-accent); letter-spacing:.16em;text-transform:uppercase;text-shadow:0 2px 8px #000; } /* Icone dal kit al posto delle emoji: il testo delle voci resta, i caratteri emoji si azzerano e l'icona sprite li sostituisce. */ html[data-panel-pack="dylan-dog"] #nav-links li{ font-size:0;margin:1px 8px;padding-left:34px;position:relative; border-left:3px solid transparent;transition:background .15s,border-color .15s; } html[data-panel-pack="dylan-dog"] #nav-links li>*{font-size:14px} html[data-panel-pack="dylan-dog"] #nav-links li::before{ content:'';position:absolute;left:8px;top:50%;transform:translateY(-50%); width:20px;height:20px;background-image:var(--dd-kit); background-size:600% 400%;background-position:var(--dd-ix,0%) var(--dd-iy,0%); background-repeat:no-repeat;filter:drop-shadow(0 1px 2px #000a); } html[data-panel-pack="dylan-dog"] #nav-links li[data-page="files"]{--dd-ix:0%;--dd-iy:0%} /* scatola archivio */ html[data-panel-pack="dylan-dog"] #nav-links li[data-page="drive"]{--dd-ix:80%;--dd-iy:100%} /* cartella sigillata */ html[data-panel-pack="dylan-dog"] #nav-links li[data-page="gallery"]{--dd-ix:40%;--dd-iy:33.333%} /* ritratto incorniciato */ html[data-panel-pack="dylan-dog"] #nav-links li[data-page="shares"]{--dd-ix:80%;--dd-iy:33.333%} /* freccia rossa */ html[data-panel-pack="dylan-dog"] #nav-links li[data-page="transfers"]{--dd-ix:60%;--dd-iy:0%} /* grafico */ html[data-panel-pack="dylan-dog"] #nav-links li[data-page="channel"]{--dd-ix:20%;--dd-iy:66.667%} /* megafono */ html[data-panel-pack="dylan-dog"] #nav-links li[data-page="admin"]{--dd-ix:60%;--dd-iy:33.333%} /* ingranaggio */ html[data-panel-pack="dylan-dog"] #nav-links li[data-page="maintenance"]{--dd-ix:60%;--dd-iy:100%}/* lanterna */ html[data-panel-pack="dylan-dog"] #nav-links li:has(> a){--dd-ix:40%;--dd-iy:100%} /* mappamondo */ html[data-panel-pack="dylan-dog"] #nav-links li:hover{background:var(--dd-surface2)} html[data-panel-pack="dylan-dog"] #nav-links li.active, html[data-panel-pack="dylan-dog"] #nav-links li[aria-current]{ background:var(--dd-surface2);border-left-color:var(--dd-accent); color:var(--dd-accent); } /* La banda delle silhouette degli investigatori chiude la sidebar. */ html[data-panel-pack="dylan-dog"] .sidebar-footer{ border-top:1px solid var(--dd-line);position:relative;padding-bottom:76px; } html[data-panel-pack="dylan-dog"] .sidebar-footer::after{ content:'';position:absolute;left:50%;bottom:8px;transform:translateX(-50%); width:60px;height:60px; background-image:var(--dd-kit);background-size:600% 400%; background-position:20% 100%;background-repeat:no-repeat; opacity:.6;pointer-events:none; filter:drop-shadow(0 2px 3px #000c); } /* ── Testata: il titolo dattiloscritto del dossier ──────────────────────── */ html[data-panel-pack="dylan-dog"] #content header h1{ font-family:Pack_specialelite,monospace;font-weight:400;font-size:30px; color:var(--dd-accent);text-shadow:0 2px 10px #000c; border-bottom:2px solid var(--dd-line-red);display:inline-block; padding-bottom:6px; } html[data-panel-pack="dylan-dog"] #status{color:var(--dd-ink-dim)} /* Il titolo interno delle pagine (FILE MANAGER e simili): dattiloscritto. */ html[data-panel-pack="dylan-dog"] .page-header h2{ font-family:Pack_specialelite,monospace!important;font-weight:400; color:var(--dd-accent)!important;font-size:26px; border-bottom:2px solid var(--dd-line-red);display:inline-block; padding-bottom:6px;letter-spacing:.06em;text-transform:uppercase; } /* La toolbar del File Manager: la scrivania dell'investigatore. */ html[data-panel-pack="dylan-dog"] .fm-toolbar, html[data-panel-pack="dylan-dog"] .fm-toolbar-search, html[data-panel-pack="dylan-dog"] .fm-toolbar-actions, html[data-panel-pack="dylan-dog"] .fm-toolbar-data{ background:transparent; } html[data-panel-pack="dylan-dog"] .fm-toolbar{ background:var(--dd-surface2);border:1px solid var(--dd-line); border-radius:3px;padding:12px; } html[data-panel-pack="dylan-dog"] .fm-toolbar input[type="text"], html[data-panel-pack="dylan-dog"] .fm-toolbar input:not([type]){ font-family:Pack_specialelite,monospace; } html[data-panel-pack="dylan-dog"] .fm-toolbar-actions button{ font-family:Pack_bebasneue,sans-serif!important;font-size:14px!important; letter-spacing:.1em;text-transform:uppercase; } /* ── Schede e riquadri: fascicoli con bordi netti ───────────────────────── */ html[data-panel-pack="dylan-dog"] .foa-card, html[data-panel-pack="dylan-dog"] #page section, html[data-panel-pack="dylan-dog"] .channel-step, html[data-panel-pack="dylan-dog"] .channel-intro, html[data-panel-pack="dylan-dog"] .channel-notice, html[data-panel-pack="dylan-dog"] .fm-card, html[data-panel-pack="dylan-dog"] .foa-avviso, html[data-panel-pack="dylan-dog"] .forum-transfer-progress, html[data-panel-pack="dylan-dog"] dialog:not(.channel-dialog), html[data-panel-pack="dylan-dog"] .channel-dialog{ background:var(--dd-surface); border:1px solid var(--dd-line); border-radius:3px; box-shadow:0 0 0 1px #000, 0 8px 24px #0006; } html[data-panel-pack="dylan-dog"] .foa-card h4, html[data-panel-pack="dylan-dog"] .channel-step h3, html[data-panel-pack="dylan-dog"] .channel-intro h2, html[data-panel-pack="dylan-dog"] #page h2, html[data-panel-pack="dylan-dog"] #page h3{ font-family:Pack_bebasneue,sans-serif;font-weight:400;color:var(--dd-accent); letter-spacing:.14em;text-transform:uppercase; } html[data-panel-pack="dylan-dog"] .channel-number{ background:var(--dd-accent);border:none;color:var(--dd-accent-ink); border-radius:2px;font-family:Pack_bebasneue,sans-serif; } html[data-panel-pack="dylan-dog"] .channel-notice{border-left:4px solid var(--dd-accent)} /* ── Pulsanti e tab: Bebas Neue maiuscolo, spigoli da tavola ────────────── */ html[data-panel-pack="dylan-dog"] .foa-tab, html[data-panel-pack="dylan-dog"] .foa-b, html[data-panel-pack="dylan-dog"] #page button:not(.channel-close), html[data-panel-pack="dylan-dog"] .channel-guide button, html[data-panel-pack="dylan-dog"] .btn-small, html[data-panel-pack="dylan-dog"] dialog:not(.channel-dialog) button, html[data-panel-pack="dylan-dog"] .channel-dialog button:not(.channel-close){ font-family:Pack_bebasneue,sans-serif;font-size:15px;font-weight:400; letter-spacing:.12em;text-transform:uppercase; border-radius:2px; background:var(--dd-surface2);border:1px solid var(--dd-line); color:var(--dd-ink); } html[data-panel-pack="dylan-dog"] .foa-tab.active, html[data-panel-pack="dylan-dog"] .foa-b.pri, html[data-panel-pack="dylan-dog"] .channel-guide button.btn-primary, html[data-panel-pack="dylan-dog"] #page button.pri, html[data-panel-pack="dylan-dog"] .btn-neon{ background:var(--dd-accent)!important;color:var(--dd-accent-ink)!important; border:1px solid var(--dd-accent)!important; } html[data-panel-pack="dylan-dog"] .foa-b.male, html[data-panel-pack="dylan-dog"] .btn-danger{background:#3d1416;color:#f0c8c5;border-color:#5c1e20} /* ── Campi, tabelle, liste di file ──────────────────────────────────────── */ html[data-panel-pack="dylan-dog"] input, html[data-panel-pack="dylan-dog"] select, html[data-panel-pack="dylan-dog"] textarea{ background:#0d0a09!important;border:1px solid var(--dd-line)!important; border-radius:2px!important;color:var(--dd-ink)!important; } html[data-panel-pack="dylan-dog"] input:focus, html[data-panel-pack="dylan-dog"] select:focus, html[data-panel-pack="dylan-dog"] textarea:focus{ border-color:var(--dd-accent)!important;outline:none; box-shadow:0 0 0 1px var(--dd-accent); } html[data-panel-pack="dylan-dog"] .foa-tab-t th, html[data-panel-pack="dylan-dog"] .maintenance-table th{ color:var(--dd-accent);border-bottom:2px solid var(--dd-line-red); font-family:Pack_bebasneue,sans-serif;font-weight:400; letter-spacing:.12em;text-transform:uppercase;font-size:14px; } html[data-panel-pack="dylan-dog"] .foa-tab-t td, html[data-panel-pack="dylan-dog"] .maintenance-table td{ border-bottom:1px solid #2a241f; } html[data-panel-pack="dylan-dog"] .foa-tab-t tr:hover td{background:#1c1613} /* Righe di file/drive: il registro dattiloscritto del caso. */ html[data-panel-pack="dylan-dog"] .fm-row, html[data-panel-pack="dylan-dog"] .drive-row, html[data-panel-pack="dylan-dog"] .share-row, html[data-panel-pack="dylan-dog"] .gal-card{ border:1px solid var(--dd-line);border-radius:2px; background:var(--dd-surface); } html[data-panel-pack="dylan-dog"] .fm-row:hover, html[data-panel-pack="dylan-dog"] .drive-row:hover, html[data-panel-pack="dylan-dog"] .share-row:hover{border-color:var(--dd-line-red)} html[data-panel-pack="dylan-dog"] .fm-row td:first-child, html[data-panel-pack="dylan-dog"] .drive-row td:first-child, html[data-panel-pack="dylan-dog"] .share-row td:first-child, html[data-panel-pack="dylan-dog"] .fm-name, html[data-panel-pack="dylan-dog"] .drive-name{ font-family:Pack_specialelite,monospace;color:var(--dd-ink); } /* Barra delle lettere: le schede dell'indice del fascicolo. */ html[data-panel-pack="dylan-dog"] .fm-letter-bar{ gap:3px!important;padding:6px 8px;background:var(--dd-surface2); border:1px solid var(--dd-line);border-radius:3px; } html[data-panel-pack="dylan-dog"] .fm-letter{ font-family:Pack_bebasneue,sans-serif!important;font-size:13px!important; letter-spacing:.08em;padding:3px 9px!important;border-radius:2px!important; border:1px solid var(--dd-line)!important;background:#0d0a09!important; color:var(--dd-ink-dim)!important; } html[data-panel-pack="dylan-dog"] .fm-letter.fm-letter-on, html[data-panel-pack="dylan-dog"] .fm-letter:hover{ background:var(--dd-accent)!important;color:var(--dd-accent-ink)!important; border-color:var(--dd-accent)!important; } /* Stati vuoti: il facsimile della scatola d'archivio. */ html[data-panel-pack="dylan-dog"] #page .muted:empty::before, html[data-panel-pack="dylan-dog"] #page p.muted::before{ content:'';display:block;width:56px;height:56px;margin:14px auto 8px; background-image:var(--dd-kit);background-size:600% 400%; background-position:0% 0%;background-repeat:no-repeat;opacity:.6; } html[data-panel-pack="dylan-dog"] #page p.muted{ font-family:Pack_specialelite,monospace;text-align:center; color:var(--dd-ink-dim); } /* Barre di avanzamento: il rosso che avanza. */ html[data-panel-pack="dylan-dog"] progress{accent-color:var(--dd-accent)} html[data-panel-pack="dylan-dog"] .forum-transfer-progress{border-left:4px solid var(--dd-accent)} /* Badge e etichette di stato. */ html[data-panel-pack="dylan-dog"] .badge, html[data-panel-pack="dylan-dog"] .tag{ font-family:Pack_bebasneue,sans-serif;letter-spacing:.1em; text-transform:uppercase;border-radius:2px; } /* ── Il selettore in tinta noir ─────────────────────────────────────────── */ html[data-panel-pack="dylan-dog"] .panel-pack-box select{ border:1px solid var(--dd-line-red)!important;background:var(--dd-surface2)!important; color:var(--dd-accent)!important;font-family:Pack_bebasneue,sans-serif; font-size:13px;letter-spacing:.08em;text-transform:uppercase; } /* ══════════════════════════════════════════════════════════════════════════ * Pack rimanenti — solo variabili: la resa e' del motore generico sopra. * Per ogni pack: palette superfici/testo, caratteri per titoli/comandi/ * testi/liste, fondale (hero), ornamento della sidebar (prima icona del kit). * ═══════════════════════════════════════════════════════════════════════ */ /* ── Anime: rosa neon su prugna, corsivo pennello + comandi condensati ── */ html[data-panel-pack="anime"]{ --bg:#140b11; --surface:#1b1019; --surface2:#261627; --border:#4d2440; --text:#f5e3ee; --text-dim:#a98ba0; --neon-cyan:#ff3278; --neon-yellow:#ffd166; --radius:14px; --pp-accent:#ff3278; --pp-accent-ink:#2a0713; --pp-ink:#f5e3ee; --pp-ink-dim:#a98ba0; --pp-surface3:#311c33; --pp-line:#4d2440; --pp-line-acc:#ff5c96; --pp-font-title:Pack_kaushanscript,cursive; --pp-font-cmd:Pack_teko,sans-serif; --pp-font-body:Pack_quicksand,sans-serif; --pp-font-list:Pack_quicksand,sans-serif; --pp-hero:url('/assets/ui/sections/anime.png'); --pp-veil:linear-gradient(#140b11d8 0,#140b11ee 420px,#140b11f5 100%); --pp-radius:14px; --pp-radius-sm:10px; --pp-btn-radius:14px 6px 14px 6px; --pp-field-radius:10px; --pp-nav-radius:12px; --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/sections/anime-kit.png'); --pp-orn-bg-size:600% 400%; --pp-orn-pos:0% 0%; } /* ── Film: oro da marchesina su seppia, titoli solenni + slab ── */ html[data-panel-pack="film"]{ --bg:#14100a; --surface:#1a140c; --surface2:#241b0f; --border:#57451f; --text:#efe4cd; --text-dim:#a89a7c; --neon-cyan:#edbb65; --neon-yellow:#f2e3b0; --radius:8px; --pp-accent:#edbb65; --pp-accent-ink:#241703; --pp-ink:#efe4cd; --pp-ink-dim:#a89a7c; --pp-surface3:#2e2214; --pp-line:#57451f; --pp-line-acc:#8a6c33; --pp-font-title:Pack_cinzeldecorative,serif; --pp-font-cmd:Pack_bebasneue,sans-serif; --pp-font-body:Pack_robotoslab,serif; --pp-font-list:Pack_robotoslab,serif; --pp-hero:url('/assets/ui/sections/film.png'); --pp-veil:linear-gradient(#14100ad8 0,#14100aee 420px,#14100af5 100%); --pp-radius:8px; --pp-radius-sm:6px; --pp-btn-radius:4px; --pp-field-radius:6px; --pp-nav-radius:8px; --pp-title-transform:uppercase; --pp-btn-transform:uppercase; --pp-btn-spacing:.12em; --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/sections/film-kit.png'); --pp-orn-bg-size:600% 400%; --pp-orn-pos:0% 0%; } /* ── Serie TV: ciano-acqua su petrolio, geometrico amichevole ── */ html[data-panel-pack="serie-tv"]{ --bg:#0b1516; --surface:#0f1c1e; --surface2:#142628; --border:#244a4e; --text:#def0f0; --text-dim:#8aa5a8; --neon-cyan:#72d7d9; --neon-yellow:#b8e8e4; --radius:12px; --pp-accent:#72d7d9; --pp-accent-ink:#07272a; --pp-ink:#def0f0; --pp-ink-dim:#8aa5a8; --pp-surface3:#1a3235; --pp-line:#244a4e; --pp-line-acc:#3f7a80; --pp-font-title:Pack_righteous,sans-serif; --pp-font-cmd:Pack_teko,sans-serif; --pp-font-body:Pack_nunito,sans-serif; --pp-font-list:Pack_nunito,sans-serif; --pp-hero:url('/assets/ui/sections/serie-tv.png'); --pp-veil:linear-gradient(#0b1516d8 0,#0b1516ee 420px,#0b1516f5 100%); --pp-radius:12px; --pp-radius-sm:9px; --pp-btn-radius:10px; --pp-field-radius:9px; --pp-nav-radius:12px; --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/sections/serie-tv-kit.png'); --pp-orn-bg-size:600% 400%; --pp-orn-pos:0% 0%; } /* ── Programmi: blu elettrico, display font + terminale per le liste ── */ html[data-panel-pack="programmi"]{ --bg:#0a0f16; --surface:#0e141d; --surface2:#141c29; --border:#243a55; --text:#d8e5f5; --text-dim:#7d94b3; --neon-cyan:#6bafff; --neon-yellow:#9ec8ff; --radius:6px; --pp-accent:#6bafff; --pp-accent-ink:#061224; --pp-ink:#d8e5f5; --pp-ink-dim:#7d94b3; --pp-surface3:#1a2537; --pp-line:#243a55; --pp-line-acc:#3f6194; --pp-font-title:Pack_audiowide,sans-serif; --pp-font-cmd:Pack_oxanium,sans-serif; --pp-font-body:Pack_spacegrotesk,sans-serif; --pp-font-list:Pack_sharetech,monospace; --pp-hero:url('/assets/ui/sections/programmi.png'); --pp-veil:linear-gradient(#0a0f16d8 0,#0a0f16ee 420px,#0a0f16f5 100%); --pp-radius:6px; --pp-radius-sm:4px; --pp-btn-radius:3px; --pp-field-radius:4px; --pp-nav-radius:4px; --pp-btn-transform:uppercase; --pp-btn-spacing:.1em; --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/sections/programmi-kit.png'); --pp-orn-bg-size:600% 400%; --pp-orn-pos:0% 0%; } /* ── Tutorial: appunti dattiloscritti su carta scura ── */ html[data-panel-pack="tutorial"]{ --bg:#130f09; --surface:#1a140c; --surface2:#231b10; --border:#4d3d1f; --text:#efe6d2; --text-dim:#a69a7d; --neon-cyan:#e7b56b; --neon-yellow:#f2ddab; --radius:10px; --pp-accent:#e7b56b; --pp-accent-ink:#241703; --pp-ink:#efe6d2; --pp-ink-dim:#a69a7d; --pp-surface3:#2e2314; --pp-line:#4d3d1f; --pp-line-acc:#8a6c33; --pp-font-title:Pack_specialelite,monospace; --pp-font-cmd:Pack_caveat,cursive; --pp-font-body:Pack_quicksand,sans-serif; --pp-font-list:Pack_specialelite,monospace; --pp-hero:url('/assets/ui/sections/tutorial.png'); --pp-veil:linear-gradient(#130f09d8 0,#130f09ee 420px,#130f09f5 100%); --pp-radius:10px; --pp-radius-sm:8px; --pp-btn-radius:12px 5px 12px 6px; --pp-field-radius:8px; --pp-nav-radius:10px; --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/sections/tutorial-kit.png'); --pp-orn-bg-size:600% 400%; --pp-orn-pos:0% 0%; } /* ── Musica: viola da club su fondo notte ── */ html[data-panel-pack="musica"]{ --bg:#110b16; --surface:#170f1f; --surface2:#20142c; --border:#46305f; --text:#ece0f5; --text-dim:#9d87b3; --neon-cyan:#d68bff; --neon-yellow:#e8c8ff; --radius:14px; --pp-accent:#d68bff; --pp-accent-ink:#22082f; --pp-ink:#ece0f5; --pp-ink-dim:#9d87b3; --pp-surface3:#2b1a3a; --pp-line:#46305f; --pp-line-acc:#7450a0; --pp-font-title:Pack_righteous,sans-serif; --pp-font-cmd:Pack_teko,sans-serif; --pp-font-body:Pack_nunito,sans-serif; --pp-font-list:Pack_nunito,sans-serif; --pp-hero:url('/assets/ui/sections/musica.png'); --pp-veil:linear-gradient(#110b16d8 0,#110b16ee 420px,#110b16f5 100%); --pp-radius:14px; --pp-radius-sm:10px; --pp-btn-radius:20px; --pp-field-radius:10px; --pp-nav-radius:12px; --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/sections/musica-kit.png'); --pp-orn-bg-size:600% 400%; --pp-orn-pos:0% 0%; } /* ── Fumetti: arancio pop, lettere in grassetto da copertina ── */ html[data-panel-pack="fumetti"]{ --bg:#150f08; --surface:#1c130a; --surface2:#271a0e; --border:#5c4018; --text:#f5e9d2; --text-dim:#b0a187; --neon-cyan:#ffb148; --neon-yellow:#ffd98c; --radius:12px; --pp-accent:#ffb148; --pp-accent-ink:#2e1a02; --pp-ink:#f5e9d2; --pp-ink-dim:#b0a187; --pp-surface3:#32220f; --pp-line:#5c4018; --pp-line-acc:#8a6226; --pp-font-title:Pack_bangers,cursive; --pp-font-cmd:Pack_bangers,cursive; --pp-font-body:Pack_quicksand,sans-serif; --pp-font-list:Pack_quicksand,sans-serif; --pp-hero:url('/assets/ui/sections/fumetti.png'); --pp-veil:linear-gradient(#150f08d8 0,#150f08ee 420px,#150f08f5 100%); --pp-radius:12px; --pp-radius-sm:8px; --pp-btn-radius:8px; --pp-field-radius:8px; --pp-nav-radius:10px; --pp-btn-transform:uppercase; --pp-btn-spacing:.1em; --pp-title-transform:uppercase; --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/sections/fumetti-kit.png'); --pp-orn-bg-size:600% 400%; --pp-orn-pos:0% 0%; } /* ── Videogiochi: verde fosforo, arcade in testa e terminale nelle liste ── */ html[data-panel-pack="videogiochi"]{ --bg:#0a120d; --surface:#0f1a13; --surface2:#14241a; --border:#1f4d33; --text:#dcf5e2; --text-dim:#7fa38c; --neon-cyan:#85ef91; --neon-yellow:#b8f5c4; --radius:4px; --pp-accent:#85ef91; --pp-accent-ink:#062412; --pp-ink:#dcf5e2; --pp-ink-dim:#7fa38c; --pp-surface3:#1a2f22; --pp-line:#1f4d33; --pp-line-acc:#357a52; --pp-font-title:Pack_blackopsone,sans-serif; --pp-font-cmd:Pack_orbitron,sans-serif; --pp-font-body:Pack_spacegrotesk,sans-serif; --pp-font-list:Pack_vt323,monospace; --pp-hero:url('/assets/ui/sections/videogiochi.png'); --pp-veil:linear-gradient(#0a120dd8 0,#0a120dee 420px,#0a120df5 100%); --pp-radius:4px; --pp-radius-sm:3px; --pp-btn-radius:3px; --pp-field-radius:3px; --pp-nav-radius:4px; --pp-btn-transform:uppercase; --pp-btn-spacing:.1em; --pp-title-transform:uppercase; --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/sections/videogiochi-kit.png'); --pp-orn-bg-size:600% 400%; --pp-orn-pos:0% 0%; } /* ── Teatro: crema su borgogna, eleganza editoriale ── */ html[data-panel-pack="teatro"]{ --bg:#140c0d; --surface:#1b1113; --surface2:#261619; --border:#53302c; --text:#f0e4d4; --text-dim:#ac9684; --neon-cyan:#e9c89f; --neon-yellow:#d9a86c; --radius:16px; --pp-accent:#e9c89f; --pp-accent-ink:#2a1508; --pp-ink:#f0e4d4; --pp-ink-dim:#ac9684; --pp-surface3:#31201f; --pp-line:#53302c; --pp-line-acc:#7a4a3c; --pp-font-title:Pack_cormorantgaramond,serif; --pp-font-cmd:Pack_marcellus,serif; --pp-font-body:Pack_spectral,serif; --pp-font-list:Pack_spectral,serif; --pp-hero:url('/assets/ui/studio/teatro-hero.png'); --pp-hero-pos:top right; --pp-hero-size:min(1100px,85%) auto; --pp-veil:linear-gradient(#140c0de6 0,#140c0df2 300px,#140c0df8 100%); --pp-radius:18px 6px 16px 8px; --pp-radius-sm:12px 5px 12px 6px; --pp-btn-radius:16px 6px 16px 7px; --pp-field-radius:10px; --pp-nav-radius:16px 6px 16px 7px; --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/studio/teatro-kit.png'); --pp-orn-bg-size:600% 400%; --pp-orn-pos:0% 0%; } /* ── Manga: inchiostro su carta, bordi da vignetta ── */ html[data-panel-pack="manga"]{ --bg:#100d0a; --surface:#171310; --surface2:#211b16; --border:#4d3f27; --text:#f0e8d8; --text-dim:#a89f8a; --neon-cyan:#f1d8b8; --neon-yellow:#e8b87c; --radius:6px; --pp-accent:#f1d8b8; --pp-accent-ink:#241703; --pp-ink:#f0e8d8; --pp-ink-dim:#a89f8a; --pp-surface3:#2b241c; --pp-line:#4d3f27; --pp-line-acc:#7a6440; --pp-font-title:Pack_pirataone,serif; --pp-font-cmd:Pack_bangers,cursive; --pp-font-body:Pack_nunito,sans-serif; --pp-font-list:Pack_robotoslab,serif; --pp-hero:url('/assets/ui/studio/manga-hero.png'); --pp-hero-pos:top right; --pp-hero-size:min(1100px,85%) auto; --pp-veil:linear-gradient(#100d0ae6 0,#100d0af2 300px,#100d0af8 100%); --pp-radius:6px; --pp-radius-sm:4px; --pp-btn-radius:4px; --pp-field-radius:4px; --pp-nav-radius:6px; --pp-btn-transform:uppercase; --pp-btn-spacing:.08em; --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/studio/manga-kit.png'); --pp-orn-bg-size:600% 400%; --pp-orn-pos:0% 0%; } /* ── Fan-art: turchese tenue, tratto a matita ── */ html[data-panel-pack="fan-art"]{ --bg:#0c1313; --surface:#111a19; --surface2:#172422; --border:#2b4d48; --text:#dff0ec; --text-dim:#8faea8; --neon-cyan:#91d4cb; --neon-yellow:#c8e8de; --radius:14px; --pp-accent:#91d4cb; --pp-accent-ink:#0a2420; --pp-ink:#dff0ec; --pp-ink-dim:#8faea8; --pp-surface3:#1e302d; --pp-line:#2b4d48; --pp-line-acc:#47807a; --pp-font-title:Pack_satisfy,cursive; --pp-font-cmd:Pack_architectsdaughter,cursive; --pp-font-body:Pack_quicksand,sans-serif; --pp-font-list:Pack_quicksand,sans-serif; --pp-hero:url('/assets/ui/studio/fan-art-hero.png'); --pp-hero-pos:top right; --pp-hero-size:min(1100px,85%) auto; --pp-veil:linear-gradient(#0c1313e6 0,#0c1313f2 300px,#0c1313f8 100%); --pp-radius:14px; --pp-radius-sm:10px; --pp-btn-radius:14px 7px 14px 8px; --pp-field-radius:9px; --pp-nav-radius:12px; --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/studio/fan-art-kit.png'); --pp-orn-bg-size:600% 400%; --pp-orn-pos:0% 0%; } /* ── Ebooks: salvia su verde notte, grazia da stampa antica ── */ html[data-panel-pack="ebooks"]{ --bg:#0f110b; --surface:#151810; --surface2:#1d2115; --border:#3a4528; --text:#ecead6; --text-dim:#9aa084; --neon-cyan:#cbd7b2; --neon-yellow:#d9d3a8; --radius:16px; --pp-accent:#cbd7b2; --pp-accent-ink:#1b200d; --pp-ink:#ecead6; --pp-ink-dim:#9aa084; --pp-surface3:#252b1a; --pp-line:#3a4528; --pp-line-acc:#5a6a40; --pp-font-title:Pack_almendra,serif; --pp-font-cmd:Pack_josefinsans,sans-serif; --pp-font-body:Pack_spectral,serif; --pp-font-list:Pack_spectral,serif; --pp-hero:url('/assets/ui/studio/ebooks-hero.png'); --pp-hero-pos:top right; --pp-hero-size:min(1100px,85%) auto; --pp-veil:linear-gradient(#0f110be6 0,#0f110bf2 300px,#0f110bf8 100%); --pp-radius:16px; --pp-radius-sm:10px; --pp-btn-radius:14px 8px 14px 8px; --pp-field-radius:9px; --pp-nav-radius:14px; --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/studio/ebooks-kit.png'); --pp-orn-bg-size:600% 400%; --pp-orn-pos:0% 0%; } /* ── Steampunk: ottone e ingranaggi, vittoriano tecnico ── */ html[data-panel-pack="steampunk"]{ --bg:#130e07; --surface:#1a1309; --surface2:#241a0e; --border:#5a4520; --text:#f0e4c8; --text-dim:#b09f7d; --neon-cyan:#dfb86c; --neon-yellow:#f2d78c; --radius:4px; --pp-accent:#dfb86c; --pp-accent-ink:#2a1a03; --pp-ink:#f0e4c8; --pp-ink-dim:#b09f7d; --pp-surface3:#2e2110; --pp-line:#5a4520; --pp-line-acc:#8a6c33; --pp-font-title:Pack_rye,serif; --pp-font-cmd:Pack_marcellus,serif; --pp-font-body:Pack_robotoslab,serif; --pp-font-list:Pack_robotoslab,serif; --pp-hero:url('/assets/ui/studio/steampunk-hero.png'); --pp-hero-pos:top right; --pp-hero-size:min(1100px,85%) auto; --pp-veil:linear-gradient(#130e07e6 0,#130e07f2 300px,#130e07f8 100%); --pp-radius:4px; --pp-radius-sm:3px; --pp-btn-radius:3px; --pp-field-radius:3px; --pp-nav-radius:4px; --pp-btn-transform:uppercase; --pp-btn-spacing:.08em; --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/studio/steampunk-kit.png'); --pp-orn-bg-size:600% 400%; --pp-orn-pos:0% 0%; } /* ── Ghibli: verde muschio e crema, dolcezza di campagna ── */ html[data-panel-pack="ghibli"]{ --bg:#0d120a; --surface:#131a0f; --surface2:#1a2413; --border:#3a4d28; --text:#eef0e0; --text-dim:#9aa284; --neon-cyan:#b8cf86; --neon-yellow:#d8cf9c; --radius:16px; --pp-accent:#b8cf86; --pp-accent-ink:#1b240f; --pp-ink:#eef0e0; --pp-ink-dim:#9aa284; --pp-surface3:#222e17; --pp-line:#3a4d28; --pp-line-acc:#5a7440; --pp-font-title:Pack_cormorantgaramond,serif; --pp-font-cmd:Pack_josefinsans,sans-serif; --pp-font-body:Pack_nunito,sans-serif; --pp-font-list:Pack_nunito,sans-serif; --pp-hero:url('/assets/ui/studio/ghibli-hero.png'); --pp-hero-pos:top right; --pp-hero-size:min(1100px,85%) auto; --pp-veil:linear-gradient(#0d120ae6 0,#0d120af2 300px,#0d120af8 100%); --pp-radius:16px 6px 14px 8px; --pp-radius-sm:12px 5px 12px 6px; --pp-btn-radius:16px 7px 16px 8px; --pp-field-radius:10px; --pp-nav-radius:14px; --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/studio/ghibli-kit.png'); --pp-orn-bg-size:600% 400%; --pp-orn-pos:0% 0%; } /* ── Sport: menta da scoreboard, condensato atletico (kit 6x6) ── */ html[data-panel-pack="sport"]{ --bg:#0a1210; --surface:#0e1a15; --surface2:#12211a; --border:#1f4536; --text:#e2f2ea; --text-dim:#86ab9c; --neon-cyan:#62d6ad; --neon-yellow:#a8e8cd; --radius:6px; --pp-accent:#62d6ad; --pp-accent-ink:#062117; --pp-ink:#e2f2ea; --pp-ink-dim:#86ab9c; --pp-surface3:#182d24; --pp-line:#1f4536; --pp-line-acc:#357a60; --pp-font-title:Pack_teko,sans-serif; --pp-font-cmd:Pack_russoone,sans-serif; --pp-font-body:Pack_rajdhani,sans-serif; --pp-font-list:Pack_rajdhani,sans-serif; --pp-hero:url('/assets/ui/studio/sport-hero.png'); --pp-hero-pos:top right; --pp-hero-size:min(1100px,85%) auto; --pp-veil:linear-gradient(#0a1210e6 0,#0a1210f2 300px,#0a1210f8 100%); --pp-radius:6px; --pp-radius-sm:4px; --pp-btn-radius:3px; --pp-field-radius:4px; --pp-nav-radius:6px; --pp-title-transform:uppercase; --pp-btn-transform:uppercase; --pp-btn-spacing:.12em; --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/studio/sport-kit.png'); --pp-orn-bg-size:600% 600%; --pp-orn-pos:0% 0%; } /* ── Halloween: zucca su viola strega, gotico giocoso (kit 6x6) ── */ html[data-panel-pack="halloween"]{ --bg:#120a12; --surface:#180e18; --surface2:#221324; --border:#4d2a45; --text:#f0e2d8; --text-dim:#a88f9e; --neon-cyan:#ff9a44; --neon-yellow:#ffc47c; --radius:12px; --pp-accent:#ff9a44; --pp-accent-ink:#2e1400; --pp-ink:#f0e2d8; --pp-ink-dim:#a88f9e; --pp-surface3:#2c1a2e; --pp-line:#4d2a45; --pp-line-acc:#7a4668; --pp-font-title:Pack_almendra,serif; --pp-font-cmd:Pack_pirataone,serif; --pp-font-body:Pack_quicksand,sans-serif; --pp-font-list:Pack_quicksand,sans-serif; --pp-hero:url('/assets/ui/studio/halloween-hero.png'); --pp-hero-pos:top right; --pp-hero-size:min(1100px,85%) auto; --pp-veil:linear-gradient(#120a12e6 0,#120a12f2 300px,#120a12f8 100%); --pp-radius:12px; --pp-radius-sm:9px; --pp-btn-radius:12px 6px 14px 6px; --pp-field-radius:9px; --pp-nav-radius:12px; --pp-orn-space:64px; --pp-orn-img:url('/assets/ui/studio/halloween-kit.png'); --pp-orn-bg-size:600% 600%; --pp-orn-pos:0% 0%; }