/* ========================================================================== STILE FUMETTO — livello grafico di tutto il sito (settembre 2026) -------------------------------------------------------------------------- Si accende con SSS_STILE = 'fumetto' in functions.php, che mette la classe .stile-fumetto sul e carica questo file DOPO style.css. Rimettendo 'classico' questo file non viene nemmeno caricato e il sito torna esattamente com'era: qui dentro non c'e' una riga che modifichi il tema vecchio, ogni regola e' agganciata a body.stile-fumetto. L'idea: il sito diventa un albo a fumetti. Carta e inchiostro, retini, riquadri squadrati con l'ombra piena (mai sfocata), il giallo delle didascalie, rosso e blu pieni. Niente aloni, niente sfumature viola: quelle erano la parte che sapeva di template. Palette: carta #F4EFE6 · inchiostro #111 · rosso #E62B2B blu #1F4BD8 · giallo #FFD23F Font: Anton (titoli) · Bangers (bottoni ed etichette) · Rajdhani (testo) ========================================================================== */ /* -------------------------------------------------------------------------- 1. I COLORI DEL TEMA, RIMAPPATI Il tema usa ovunque var(--red), var(--cyan), var(--white)... Ridefinendo quelle variabili qui, tutto il sito cambia palette in un colpo solo e le pagine che non ho toccato a mano restano comunque coerenti. -------------------------------------------------------------------------- */ body.stile-fumetto { --f-carta: #F4EFE6; --f-inchiostro: #111111; --f-rosso: #E62B2B; --f-rosso-scuro: #B01F1F; --f-blu: #1F4BD8; --f-giallo: #FFD23F; --f-fondo: #0D0D0D; /* rimappatura delle variabili storiche */ --red: #E62B2B; --red-dark: #B01F1F; --red-glow: #FFD23F; --magenta: #1F4BD8; --magenta-dark: #15379E; --cyan: #FFD23F; --cyan-dark: #E0B32A; --black: #0D0D0D; --black-light: #131313; --black-card: #171717; --white: #F4EFE6; --grey: #CBC5B9; /* era #9A948C: troppo spento, le etichette non si leggevano */ --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif; background: var(--f-fondo); color: var(--f-carta); } /* -------------------------------------------------------------------------- 2. LO SFONDO — retino da stampa al posto dei puntini viola -------------------------------------------------------------------------- */ body.stile-fumetto .web-bg { opacity: 1; background-color: var(--f-fondo); background-image: radial-gradient(rgba(244, 239, 230, 0.055) 1.1px, transparent 1.5px); background-size: 7px 7px; } /* -------------------------------------------------------------------------- 3. TIPOGRAFIA — i titoli passano ad Anton, i bottoni a Bangers -------------------------------------------------------------------------- */ body.stile-fumetto h1, body.stile-fumetto h2, body.stile-fumetto h3, body.stile-fumetto .home-section-title, body.stile-fumetto .sv-page-hero h1, body.stile-fumetto .home-serie-title, body.stile-fumetto .home-cta-title, body.stile-fumetto .news-card-title, body.stile-fumetto .section-header h2 { font-family: 'Anton', Impact, 'Arial Narrow', sans-serif; font-weight: 400; letter-spacing: 0.5px; } body.stile-fumetto .home-section-title, body.stile-fumetto .section-header h2 { color: var(--f-carta); text-transform: uppercase; text-shadow: 5px 5px 0 var(--f-blu); letter-spacing: 1px; } body.stile-fumetto .home-section-sub, body.stile-fumetto .sv-page-hero p { font-family: 'Rajdhani', sans-serif; font-weight: 600; color: rgba(244, 239, 230, 0.78); } /* Le "occhiello" diventano etichette adesive gialle, storte quel tanto */ body.stile-fumetto .sv-page-hero-eyebrow, body.stile-fumetto .home-serie-eyebrow, body.stile-fumetto .section-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--f-giallo); color: var(--f-inchiostro); border: 3px solid var(--f-inchiostro); box-shadow: 5px 5px 0 var(--f-inchiostro); padding: 7px 13px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; transform: rotate(-2deg); border-radius: 0; } /* -------------------------------------------------------------------------- 4. LA BARRA IN ALTO -------------------------------------------------------------------------- */ body.stile-fumetto .navbar { background: var(--f-inchiostro); border-bottom: 4px solid var(--f-carta); box-shadow: none; backdrop-filter: none; } body.stile-fumetto .navbar.scrolled { background: var(--f-inchiostro); box-shadow: 0 6px 0 rgba(31, 75, 216, 0.35); } body.stile-fumetto .nav-logo span, body.stile-fumetto .nav-logo { font-family: 'Anton', Impact, sans-serif; color: var(--f-carta); letter-spacing: 1px; } /* Il logo resta viola: e' il marchio, non fa parte della palette fumetto, e il rosso pieno accanto al ragno viola dell'icona stonava. #A855F7 e' il viola brillante del tema, scelto sul #8B2FE0 perche' su inchiostro quasi nero ha molto piu' contrasto. */ body.stile-fumetto .nav-logo span { color: #A855F7; } body.stile-fumetto .nav-links a { color: rgba(244, 239, 230, 0.72); } body.stile-fumetto .nav-links a:hover, body.stile-fumetto .nav-links a.active { color: var(--f-giallo); } body.stile-fumetto .nav-links a.active::after, body.stile-fumetto .nav-links a::after { background: var(--f-giallo) !important; box-shadow: none !important; } body.stile-fumetto .nav-tracker { background: var(--f-giallo) !important; color: var(--f-inchiostro) !important; border: 3px solid var(--f-inchiostro) !important; box-shadow: 4px 4px 0 var(--f-inchiostro); border-radius: 0 !important; font-family: 'Bangers', Impact, sans-serif !important; letter-spacing: 1.5px !important; } body.stile-fumetto .nav-registrati { background: var(--f-giallo) !important; color: var(--f-inchiostro) !important; border: 3px solid var(--f-inchiostro) !important; box-shadow: 4px 4px 0 var(--f-inchiostro); border-radius: 0 !important; font-family: 'Bangers', Impact, sans-serif !important; font-size: 0.95rem !important; letter-spacing: 1.5px !important; } body.stile-fumetto .nav-area-riservata { background: var(--f-inchiostro) !important; color: var(--f-carta) !important; border: 3px solid var(--f-carta) !important; border-radius: 0 !important; font-family: 'Bangers', Impact, sans-serif !important; font-size: 0.95rem !important; letter-spacing: 1.5px !important; } body.stile-fumetto .nav-registrati:hover, body.stile-fumetto .nav-tracker:hover { transform: translate(-2px, -2px); } body.stile-fumetto .hamburger span { background: var(--f-carta); border-radius: 0; height: 4px; } /* menu aperto sul telefono: pannello a inchiostro */ body.stile-fumetto .nav-links.active, body.stile-fumetto .nav-links.open { background: var(--f-inchiostro); border-left: 4px solid var(--f-carta); } /* -------------------------------------------------------------------------- 5. LA TESTATA DELLE PAGINE INTERNE (.sv-page-hero) -------------------------------------------------------------------------- */ body.stile-fumetto .sv-page-hero { background: var(--f-rosso); border-bottom: 4px solid var(--f-carta); position: relative; overflow: hidden; } body.stile-fumetto .sv-page-hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(17, 17, 17, 0.55) 1.4px, transparent 1.9px); background-size: 6px 6px; pointer-events: none; } body.stile-fumetto .sv-page-hero h1 { color: var(--f-carta); -webkit-text-stroke: 2px var(--f-inchiostro); text-shadow: 8px 8px 0 var(--f-blu); text-transform: uppercase; } body.stile-fumetto .sv-page-hero p { color: rgba(255, 255, 255, 0.92); } /* -------------------------------------------------------------------------- 6. I BOTTONI — squadrati, ombra piena, Bangers -------------------------------------------------------------------------- */ body.stile-fumetto .cta-btn, body.stile-fumetto .sss-btn, body.stile-fumetto .news-write-btn, body.stile-fumetto .home-section-link, body.stile-fumetto .btn-primary, body.stile-fumetto .btn-ghost { border-radius: 0 !important; font-family: 'Bangers', Impact, 'Arial Narrow', sans-serif; font-size: 22px; letter-spacing: 1.5px; border: 3px solid var(--f-carta); box-shadow: none; transition: transform 0.12s ease; } body.stile-fumetto .cta-btn-primary, body.stile-fumetto .btn-primary, body.stile-fumetto .news-write-btn { background: var(--f-giallo) !important; color: var(--f-inchiostro) !important; border-color: var(--f-inchiostro) !important; box-shadow: 5px 5px 0 var(--f-carta); } body.stile-fumetto .cta-btn-ghost, body.stile-fumetto .btn-ghost { background: var(--f-inchiostro) !important; color: var(--f-carta) !important; border-color: var(--f-carta) !important; } body.stile-fumetto .cta-btn:hover, body.stile-fumetto .sss-btn:hover, body.stile-fumetto .news-write-btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--f-carta); } body.stile-fumetto .home-section-link { display: inline-block; border: none; color: var(--f-giallo); font-size: 18px; box-shadow: none; } body.stile-fumetto .home-section-link:hover { color: var(--f-carta); transform: none; } /* -------------------------------------------------------------------------- 7. LE CARD — riquadri di albo: bordo netto, ombra piena, angoli vivi -------------------------------------------------------------------------- */ body.stile-fumetto .news-card, body.stile-fumetto .about-card, body.stile-fumetto .member-card, body.stile-fumetto .social-card, body.stile-fumetto .gallery-item, body.stile-fumetto .foto-item, body.stile-fumetto .counter-cell, body.stile-fumetto .storia-card, body.stile-fumetto .serie-card, body.stile-fumetto .evento-card { background: var(--f-inchiostro); border: 3px solid var(--f-carta); border-radius: 0 !important; box-shadow: 6px 6px 0 rgba(31, 75, 216, 0.9); transition: transform 0.14s ease, box-shadow 0.14s ease; } body.stile-fumetto .news-card:hover, body.stile-fumetto .about-card:hover, body.stile-fumetto .member-card:hover, body.stile-fumetto .gallery-item:hover, body.stile-fumetto .storia-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--f-rosso); } body.stile-fumetto .news-card-cover, body.stile-fumetto .news-card-cover img, body.stile-fumetto .gallery-item img, body.stile-fumetto .foto-item img { border-radius: 0 !important; } body.stile-fumetto .news-card-cover { border-bottom: 3px solid var(--f-carta); } body.stile-fumetto .news-card-title { color: var(--f-carta); letter-spacing: 0.5px; } body.stile-fumetto .news-card-excerpt { color: rgba(244, 239, 230, 0.7); } /* le etichette sulle copertine diventano didascalie da vignetta */ body.stile-fumetto .news-card-source, body.stile-fumetto .news-card-it, body.stile-fumetto .badge-chip, body.stile-fumetto .news-tab { border-radius: 0 !important; font-family: 'Oswald', sans-serif; letter-spacing: 2px; border: 2px solid var(--f-inchiostro); } body.stile-fumetto .news-card-source-community { background: var(--f-giallo); color: var(--f-inchiostro); } body.stile-fumetto .news-card-source-spider { background: var(--f-rosso); color: #fff; border-color: var(--f-inchiostro); } body.stile-fumetto .news-card-it { background: var(--f-blu); color: #fff; } body.stile-fumetto .news-tab { background: var(--f-inchiostro); color: rgba(244, 239, 230, 0.8); border: 3px solid var(--f-carta); } body.stile-fumetto .news-tab.active { background: var(--f-giallo); color: var(--f-inchiostro); border-color: var(--f-inchiostro); box-shadow: 4px 4px 0 var(--f-carta); } /* -------------------------------------------------------------------------- 8. IL CONTATORE — numeri grossi da copertina -------------------------------------------------------------------------- */ body.stile-fumetto .home-counter { border-top: none; border-bottom: none; } body.stile-fumetto .counter-cell { padding: 22px 14px; } body.stile-fumetto .counter-num { font-family: 'Anton', Impact, sans-serif; color: var(--f-giallo); text-shadow: 4px 4px 0 var(--f-inchiostro); letter-spacing: 0; } body.stile-fumetto .counter-label { font-family: 'Oswald', sans-serif; letter-spacing: 3px; color: rgba(244, 239, 230, 0.75); } body.stile-fumetto .counter-icon svg { fill: var(--f-rosso); } /* -------------------------------------------------------------------------- 9. BANNER SERIE, SPOTLIGHT, RICHIAMO FINALE -------------------------------------------------------------------------- */ body.stile-fumetto .home-serie { border-top: 4px solid var(--f-carta); border-bottom: 4px solid var(--f-carta); } body.stile-fumetto .home-serie-grad { background: linear-gradient(90deg, rgba(13, 13, 13, 0.94) 0%, rgba(13, 13, 13, 0.82) 45%, rgba(230, 43, 43, 0.55) 100%); } body.stile-fumetto .home-serie-title { color: var(--f-carta); text-shadow: 6px 6px 0 var(--f-rosso); text-transform: uppercase; } body.stile-fumetto .spotlight-text h3 { color: var(--f-carta); text-shadow: 4px 4px 0 var(--f-blu); text-transform: uppercase; } body.stile-fumetto .spotlight-image { border: 3px solid var(--f-carta); border-radius: 0 !important; box-shadow: 8px 8px 0 var(--f-blu); } body.stile-fumetto .home-cta { background: var(--f-rosso); border-top: 4px solid var(--f-carta); border-bottom: 4px solid var(--f-carta); position: relative; overflow: hidden; } body.stile-fumetto .home-cta::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(17, 17, 17, 0.5) 1.4px, transparent 1.9px); background-size: 6px 6px; pointer-events: none; } body.stile-fumetto .home-cta-inner { position: relative; z-index: 1; } body.stile-fumetto .home-cta-title { color: var(--f-carta); -webkit-text-stroke: 2px var(--f-inchiostro); text-shadow: 8px 8px 0 var(--f-blu); } body.stile-fumetto .home-cta-sub { color: #fff; font-weight: 600; } body.stile-fumetto .home-cta .cta-btn-ghost { border-color: var(--f-inchiostro) !important; box-shadow: 5px 5px 0 var(--f-inchiostro); } /* -------------------------------------------------------------------------- 10. IL FONDO PAGINA -------------------------------------------------------------------------- */ body.stile-fumetto .site-footer { background: var(--f-inchiostro); border-top: 4px solid var(--f-carta); } body.stile-fumetto .footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 3px solid var(--f-carta); border-radius: 0; background: var(--f-inchiostro); } body.stile-fumetto .footer-social a svg { fill: var(--f-carta); } body.stile-fumetto .footer-social a:hover { background: var(--f-giallo); } body.stile-fumetto .footer-social a:hover svg { fill: var(--f-inchiostro); } body.stile-fumetto .footer-legal-links a { color: rgba(244, 239, 230, 0.8); } body.stile-fumetto .footer-legal-links a:hover { color: var(--f-giallo); } body.stile-fumetto .footer-disclaimer { color: rgba(244, 239, 230, 0.55); } /* -------------------------------------------------------------------------- 11. MODULI E CAMPI (contatti, area membri, ricerca) -------------------------------------------------------------------------- */ body.stile-fumetto input[type="text"], body.stile-fumetto input[type="email"], body.stile-fumetto input[type="search"], body.stile-fumetto input[type="password"], body.stile-fumetto textarea, body.stile-fumetto select { background: var(--f-inchiostro); color: var(--f-carta); border: 3px solid var(--f-carta); border-radius: 0; font-family: 'Rajdhani', sans-serif; } body.stile-fumetto input:focus, body.stile-fumetto textarea:focus, body.stile-fumetto select:focus { outline: none; border-color: var(--f-giallo); box-shadow: 4px 4px 0 var(--f-blu); } /* -------------------------------------------------------------------------- 12. SUL TELEFONO — ombre piu' corte, bordi piu' sottili -------------------------------------------------------------------------- */ @media (max-width: 820px) { body.stile-fumetto .home-section-title, body.stile-fumetto .section-header h2 { text-shadow: 4px 4px 0 var(--f-blu); } body.stile-fumetto .sv-page-hero h1 { text-shadow: 5px 5px 0 var(--f-blu); -webkit-text-stroke: 1.5px var(--f-inchiostro); } body.stile-fumetto .home-cta-title { text-shadow: 5px 5px 0 var(--f-blu); -webkit-text-stroke: 1.5px var(--f-inchiostro); } body.stile-fumetto .news-card, body.stile-fumetto .about-card, body.stile-fumetto .member-card, body.stile-fumetto .gallery-item, body.stile-fumetto .counter-cell { box-shadow: 4px 4px 0 rgba(31, 75, 216, 0.9); } body.stile-fumetto .spotlight-image { box-shadow: 5px 5px 0 var(--f-blu); } body.stile-fumetto .cta-btn, body.stile-fumetto .sss-btn { font-size: 20px; } } /* -------------------------------------------------------------------------- 13. RIFINITURE sui pezzi che erano rimasti "vetro viola" -------------------------------------------------------------------------- */ /* il pannello del contatore: era vetro sfocato con bordo viola */ body.stile-fumetto .home-counter-grid { background: var(--f-inchiostro); border: 4px solid var(--f-carta); border-radius: 0; box-shadow: 10px 10px 0 var(--f-rosso); backdrop-filter: none; -webkit-backdrop-filter: none; } body.stile-fumetto .counter-cell { border-width: 2px; box-shadow: 4px 4px 0 rgba(31, 75, 216, 0.9); } /* il trattino sotto i titoli di sezione: era un gradiente viola-magenta allineato a sinistra sotto un titolo centrato */ body.stile-fumetto .home-section-title::after, body.stile-fumetto .news-related-title::after { width: 90px; height: 6px; margin: 12px auto 0; border-radius: 0; background: var(--f-giallo); } body.stile-fumetto .home-section-head { position: relative; } /* -------------------------------------------------------------------------- 14. BARRA DEI COOKIE e menu: gli ultimi pezzi "vetro" -------------------------------------------------------------------------- */ body.stile-fumetto .sss-cookie-banner { background: var(--f-inchiostro); border-top: 4px solid var(--f-carta); border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } body.stile-fumetto .sss-cookie-text { color: rgba(244, 239, 230, 0.85); } body.stile-fumetto .sss-cookie-btn { border-radius: 0; font-family: 'Bangers', Impact, sans-serif; font-size: 18px; letter-spacing: 1.5px; border: 3px solid var(--f-inchiostro); } body.stile-fumetto .sss-cookie-btn.primary { background: var(--f-giallo); color: var(--f-inchiostro); box-shadow: 4px 4px 0 var(--f-carta); } /* le voci del menu non vanno mai a capo a meta' parola */ body.stile-fumetto .nav-links a { white-space: nowrap; } /* -------------------------------------------------------------------------- 15. MENU che non deve mai uscire dallo schermo I bottoni squadrati sono piu' larghi di quelli tondi di prima: sotto i 1400px il menu si stringe invece di far uscire "Accedi" dalla pagina. -------------------------------------------------------------------------- */ @media (max-width: 1400px) { body.stile-fumetto .nav-links a { padding-left: 13px; padding-right: 13px; } body.stile-fumetto .nav-tracker, body.stile-fumetto .nav-registrati, body.stile-fumetto .nav-area-riservata { font-size: 0.85rem !important; padding: 7px 12px !important; margin-left: 6px; } } @media (max-width: 1150px) { body.stile-fumetto .nav-links a { padding-left: 9px; padding-right: 9px; font-size: 0.78rem; } } /* -------------------------------------------------------------------------- 16. DETTAGLI: icone tonde viola, news in evidenza, riquadri della galleria -------------------------------------------------------------------------- */ body.stile-fumetto .about-card .icon { background: var(--f-giallo); border: 3px solid var(--f-inchiostro); border-radius: 0; width: 62px; height: 62px; } body.stile-fumetto .about-card .icon svg { fill: var(--f-inchiostro); } /* news fissate: cornice gialla invece dell'alone magenta */ body.stile-fumetto .news-card-pinned { border: 3px solid var(--f-giallo); box-shadow: 6px 6px 0 var(--f-giallo); } body.stile-fumetto .news-card-pinned:hover { border-color: var(--f-giallo); box-shadow: 9px 9px 0 var(--f-rosso); } body.stile-fumetto .news-card-pin { background: var(--f-giallo); color: var(--f-inchiostro); border: 2px solid var(--f-inchiostro); border-radius: 0; font-family: 'Oswald', sans-serif; font-weight: 600; letter-spacing: 2px; transform: rotate(-2deg); } /* la galleria: le foto sono gia' immagini, basta la cornice */ body.stile-fumetto .gallery-overlay { background: linear-gradient(0deg, rgba(17,17,17,.85), rgba(17,17,17,0) 60%); } body.stile-fumetto .lightbox-content { border: 4px solid var(--f-carta); border-radius: 0; } body.stile-fumetto .lightbox-close, body.stile-fumetto .lightbox-prev, body.stile-fumetto .lightbox-next { background: var(--f-inchiostro); color: var(--f-carta); border: 3px solid var(--f-carta); border-radius: 0; } /* -------------------------------------------------------------------------- 17. L'etichetta gialla deve restare LEGGIBILE Alcune pagine (tracker) danno all'occhiello un colore proprio: su fondo giallo diventava giallo su giallo. -------------------------------------------------------------------------- */ body.stile-fumetto .sv-page-hero-eyebrow, body.stile-fumetto .sv-page-hero-eyebrow *, body.stile-fumetto .home-serie-eyebrow, body.stile-fumetto .home-serie-eyebrow * { color: var(--f-inchiostro) !important; } body.stile-fumetto .sv-page-hero-eyebrow img.emoji { filter: none; } /* -------------------------------------------------------------------------- 18. ULTIME LIMATURE — angoli vivi dove erano rimasti tondi -------------------------------------------------------------------------- */ body.stile-fumetto .home-cta, body.stile-fumetto .home-cta-inner, body.stile-fumetto .home-counter-grid, body.stile-fumetto .home-serie, body.stile-fumetto .sv-page-hero { border-radius: 0 !important; } body.stile-fumetto .home-cta-logo { border-radius: 0; border: 3px solid var(--f-inchiostro); } @media (max-width: 820px) { body.stile-fumetto .home-counter-grid { box-shadow: 6px 6px 0 var(--f-rosso); border-width: 3px; } } /* -------------------------------------------------------------------------- 19. ANGOLI VIVI OVUNQUE Nel fumetto non esistono angoli stondati: questa regola prende tutti i riquadri del tema (card, box, pannelli, riquadri) senza dover elencare pagina per pagina. Tocca solo il raggio degli angoli, niente altro. -------------------------------------------------------------------------- */ body.stile-fumetto [class*="-card"], body.stile-fumetto [class*="-box"], body.stile-fumetto [class*="-panel"], body.stile-fumetto [class*="-cta"], body.stile-fumetto [class*="-chip"], body.stile-fumetto [class*="-badge"], body.stile-fumetto [class*="-tag"] { border-radius: 0; } /* le due schede della pagina Contatti, che avevano un raggio proprio */ body.stile-fumetto .contact-email-card, body.stile-fumetto .contact-cta { border: 3px solid var(--f-carta); border-radius: 0; box-shadow: 6px 6px 0 rgba(31, 75, 216, 0.9); background: var(--f-inchiostro); } /* -------------------------------------------------------------------------- 20. CHI SIAMO A SEZIONI — vestito da albo Le sezioni richiudibili diventano riquadri di carta con l'ombra piena, e le schede del team le figurine dei personaggi: foto, nome in Anton, ruolo nell'etichetta gialla. -------------------------------------------------------------------------- */ body.stile-fumetto .cs-sez { background: var(--f-inchiostro); border: 3px solid var(--f-carta); border-radius: 0; box-shadow: 6px 6px 0 rgba(31, 75, 216, 0.9); } body.stile-fumetto .cs-sez[open] { border-color: var(--f-carta); box-shadow: 6px 6px 0 var(--f-rosso); } body.stile-fumetto .cs-sez > summary:hover { background: rgba(255, 210, 63, 0.12); } body.stile-fumetto .cs-sez > summary::after { border-color: var(--f-giallo); } body.stile-fumetto .cs-sez-titolo { font-family: 'Anton', Impact, sans-serif; color: var(--f-carta); text-shadow: 3px 3px 0 var(--f-blu); letter-spacing: 1px; } body.stile-fumetto .cs-team-intro { color: rgba(244, 239, 230, 0.75); } body.stile-fumetto .cs-membro { background: var(--f-inchiostro); border: 3px solid var(--f-carta); border-radius: 0; box-shadow: 5px 5px 0 var(--f-blu); } body.stile-fumetto .cs-membro:hover { transform: translate(-3px, -3px); border-color: var(--f-carta); box-shadow: 8px 8px 0 var(--f-rosso); } body.stile-fumetto .cs-membro-foto { border-bottom: 3px solid var(--f-carta); } body.stile-fumetto .cs-membro-ruolo { background: var(--f-giallo); color: var(--f-inchiostro); border: 2px solid var(--f-inchiostro); border-radius: 0; transform: rotate(-2deg); font-family: 'Oswald', sans-serif; font-weight: 600; } body.stile-fumetto .cs-membro-nome { font-family: 'Anton', Impact, sans-serif; color: var(--f-carta); text-transform: uppercase; } body.stile-fumetto .cs-membro-ig { color: var(--f-giallo); } body.stile-fumetto .cs-membro-ig:hover { color: var(--f-carta); } /* la scheda aperta, vestita da albo */ body.stile-fumetto .cs-zoom { background: rgba(13, 13, 13, 0.92); } body.stile-fumetto .cs-zoom-corpo { background: var(--f-inchiostro); border: 4px solid var(--f-carta); border-radius: 0; box-shadow: 12px 12px 0 var(--f-rosso); } body.stile-fumetto .cs-zoom-foto { border-right: 4px solid var(--f-carta); } body.stile-fumetto .cs-zoom-ruolo { background: var(--f-giallo); color: var(--f-inchiostro); border: 2px solid var(--f-inchiostro); border-radius: 0; transform: rotate(-2deg); font-family: 'Oswald', sans-serif; font-weight: 600; } body.stile-fumetto .cs-zoom-nome { font-family: 'Anton', Impact, sans-serif; text-transform: uppercase; color: var(--f-carta); text-shadow: 4px 4px 0 var(--f-blu); } body.stile-fumetto .cs-zoom-bio { color: rgba(244, 239, 230, 0.88); } body.stile-fumetto .cs-zoom-sotto { color: rgba(244, 239, 230, 0.6); } body.stile-fumetto .cs-zoom-chiudi { background: var(--f-inchiostro); color: var(--f-carta); border: 3px solid var(--f-carta); border-radius: 0; } body.stile-fumetto .cs-zoom-chiudi:hover { background: var(--f-giallo); color: var(--f-inchiostro); } @media (max-width: 820px) { body.stile-fumetto .cs-zoom-corpo { border: 0; box-shadow: none; } body.stile-fumetto .cs-zoom-foto { border-right: 0; border-bottom: 4px solid var(--f-carta); } } /* Il testo delle schede era grigio tenue: su fondo inchiostro si leggeva male. Piu' chiaro e un filo piu' grande, senza toccare il tema classico. */ body.stile-fumetto .about-card p, body.stile-fumetto .mission-text p, body.stile-fumetto .about-intro p { color: rgba(244, 239, 230, 0.88); font-size: 1rem; line-height: 1.7; } body.stile-fumetto .about-card h3 { color: var(--f-carta); } body.stile-fumetto .cs-team-intro { color: rgba(244, 239, 230, 0.88); } /* la presentazione nella scheda, veste fumetto */ body.stile-fumetto .cs-membro-bio { color: rgba(244, 239, 230, 0.82); } body.stile-fumetto .cs-membro-piu { color: var(--f-giallo); font-family: 'Oswald', sans-serif; border-bottom-color: var(--f-giallo); } body.stile-fumetto .cs-membro-piu:hover { color: var(--f-carta); border-bottom-color: var(--f-carta); } /* le immagini negli articoli, con la cornice dell'albo */ body.stile-fumetto .news-single-content img { border-radius: 0; border: 3px solid var(--f-carta); box-shadow: 6px 6px 0 var(--f-blu); } body.stile-fumetto .news-help-immagini { background: var(--f-inchiostro); border: 3px solid var(--f-giallo); border-left-width: 3px; border-radius: 0; color: rgba(244, 239, 230, 0.88); } /* -------------------------------------------------------------------------- 21. TESTI SECONDARI CHE SI LEGGONO Etichette dei campi, sottotitoli, segnaposto, note e briciole erano grigi al 40-50%: su inchiostro sparivano. Qui si alzano tutti insieme. -------------------------------------------------------------------------- */ body.stile-fumetto ::placeholder { color: rgba(244, 239, 230, 0.55); opacity: 1; } body.stile-fumetto .news-field > span, body.stile-fumetto .news-field-label, body.stile-fumetto .form-row label, body.stile-fumetto label { color: rgba(244, 239, 230, 0.9); } body.stile-fumetto .news-write-sub, body.stile-fumetto .news-help, body.stile-fumetto .form-hint, body.stile-fumetto small, body.stile-fumetto .news-card-meta, body.stile-fumetto .news-card-date, body.stile-fumetto .news-write-breadcrumb a, body.stile-fumetto .footer-legal-links a { color: rgba(244, 239, 230, 0.78); } body.stile-fumetto .news-write-breadcrumb span { color: rgba(244, 239, 230, 0.4); } body.stile-fumetto .footer-disclaimer { color: rgba(244, 239, 230, 0.7); } /* -------------------------------------------------------------------------- 22. LOGIN E REGISTRAZIONE (wp-login.php) Il tema le veste con uno