/* ============================================
BLACKZine — Dark Theme per Cassiopeia J6
STEP 2: + sidebar, main-top,
articoli, paginazione, form
(ancora SENZA .site-grid — colonne di default)
============================================ */
/* --- BLACKZine (luglio 2026): i due @import di Google Fonts che erano
qui sono stati RIMOSSI e spostati come nell' del
template (index.php di cassiopeia_extended). @import dentro un CSS
costringe il browser a scaricare prima questo file, leggerlo, e SOLO
DOPO scoprire ed avviare le richieste ai font — a cascata, in serie.
Con nell'head invece il browser scopre tutte
le risorse subito e le scarica in parallelo. Le due famiglie
(Oswald/Metal Mania/Barlow) sono state unite in una sola URL Google
Fonts nell'head, con preconnect. Non serve altro qui: le classi CSS
sotto continuano a funzionare invariate, cambia solo COME i font
vengono caricati, non i loro nomi/pesi. --- */
.item-title, .com-content-article h1, .page-header h1 {
font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
}
:root {
--bz-bg: #0a0a0a;
--bz-bg2: #0d0d0d;
--bz-bg3: #111111;
--bz-border: #1e1e1e;
--bz-border2: #141414;
--bz-red: #c8102e;
--bz-red-hover: #e8102e;
--bz-text: #e8e8e0;
--bz-text2: #aaaaaa;
--bz-text3: #666666;
--bz-text4: #333333;
--bz-spotify: #1DB954;
}
/* --- BASE --- */
body {
background: var(--bz-bg) !important;
color: var(--bz-text) !important;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 14px;
line-height: 1.6;
padding-bottom: 180px !important;
}
a { color: var(--bz-text2); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--bz-red); }
/* ============================================
HEADER / NAVBAR
============================================ */
.navbar, header.header, #header, nav.navbar {
background: var(--bz-bg2) !important;
border-bottom: 1px solid var(--bz-border) !important;
padding: 0.6rem 2rem !important;
min-height: 80px;
box-shadow: none !important;
}
.navbar-brand, a.navbar-brand, .brand-logo {
font-size: 28px !important;
font-weight: 500 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--bz-red) !important;
padding: 0 !important;
}
.navbar-brand img, header .logo img, .brand-logo img {
max-height: 78px !important;
width: auto !important;
}
.nav-item a {
color: var(--bz-text3) !important;
font-size: 13px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
padding: 0.5rem 0 !important;
margin: 0 1rem !important;
border-bottom: 1px solid transparent;
display: inline-block !important;
transition: color 0.2s ease, transform 0.2s ease, border-color 0.2s ease !important;
}
.nav-item a:hover,
.nav-item.active a,
.nav-item.current a {
color: var(--bz-red) !important;
border-bottom-color: var(--bz-red) !important;
transform: scale(1.12) !important;
}
.navbar-toggler { border-color: var(--bz-border) !important; }
.navbar-toggler-icon { filter: invert(1); }
.dropdown-menu {
background: var(--bz-bg2) !important;
border: 1px solid var(--bz-border) !important;
border-radius: 4px !important;
}
.dropdown-item {
color: var(--bz-text3) !important;
font-size: 11px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
.dropdown-item:hover {
background: var(--bz-bg3) !important;
color: var(--bz-text) !important;
}
/* ============================================
CONTENUTO (solo colore sfondo, niente colonne)
============================================ */
#content, main {
background: var(--bz-bg) !important;
}
/* Il contenitore è flex in colonna di default (impila tutto).
Passiamo a grid 2 colonne SOLO per affiancare i due main-top;
nav, message-container e main restano a piena larghezza. */
.grid-child.container-component {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 24px !important;
}
.grid-child.container-component > nav,
.grid-child.container-component > #system-message-container,
.grid-child.container-component > main {
grid-column: 1 / -1 !important;
}
@media (max-width: 768px) {
.grid-child.container-component {
grid-template-columns: 1fr !important;
}
}
/* Nascondi breadcrumb e titolo pagina generico (ovunque tranne Home e articoli singoli) */
.breadcrumb-wrapper,
nav[aria-label="breadcrumb"],
.breadcrumb,
.page-header h1 {
display: none !important;
}
/* Mostra il titolo vero dell'articolo nelle pagine singolo articolo */
.item-page .page-header h1,
.com-content-article .page-header h1,
.article-header h1,
.item-title {
display: block !important;
}
/* Stile del titolo articolo (opzionale - lo rendi bello) */
.item-page .page-header h1,
.com-content-article .page-header h1 {
font-size: 28px !important;
font-weight: 600 !important;
color: var(--bz-text) !important;
margin: 0 0 25px 0 !important;
padding-bottom: 12px !important;
border-bottom: 1px solid var(--bz-border2) !important;
letter-spacing: 0.03em !important;
}
/* Il titolo pagina di default nella Home dice "Home" (viene dal
titolo della voce di menu). Lo mostriamo restilizzato ma con
testo "Live Report" visivo, solo nella pagina Event Gallery
(riconosciuta dalla classe "view-events" sul body), senza
toccare il titolo del menu (resta "Home" per tab browser/SEO)
né altre pagine del sito che usano la stessa .page-header. */
body.view-events .page-header h1 {
display: block !important;
font-size: 0 !important;
line-height: 1 !important;
margin: 0 0 12px 0 !important;
padding-bottom: 6px !important;
border-bottom: 1px solid var(--bz-border2) !important;
}
body.view-events .page-header h1::before {
content: "Live Report";
display: block !important;
font-size: 15px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--bz-red) !important;
}
/* === TITOLO ARTICOLO SINGOLO === */
.item-page .page-header h1,
.com-content-article .page-header h1,
.item-title {
display: block !important;
font-size: 26px !important; /* o 28-32px */
font-weight: 600 !important;
color: var(--bz-text) !important;
line-height: 1.3 !important;
margin: 0 0 28px 0 !important;
padding-bottom: 14px !important;
border-bottom: 1px solid var(--bz-border2) !important;
}
/* ============================================
SIDEBAR
============================================ */
#sp-sidebar-right {
background: var(--bz-bg2) !important;
border-left: 1px solid var(--bz-border2) !important;
padding: 1.8rem 1.4rem !important;
}
#sp-sidebar-right h3, #sp-sidebar-right .moduletable h3 {
font-size: 10px !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
color: var(--bz-text4) !important;
margin-bottom: 0.9rem !important;
padding-bottom: 8px !important;
border-bottom: 1px solid var(--bz-border2) !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
#sp-sidebar-right h3::before, #sp-sidebar-right .moduletable h3::before {
content: '';
width: 12px;
height: 1px;
background: var(--bz-red);
display: inline-block;
}
/* ============================================
MAIN-TOP (Vox Profana + Interviste in homepage)
Struttura reale confermata via ispettore:
div.main-top.card > h3.card-header + div.card-body
> ul.mod-articles-items > li > article.mod-articles-item
> div.mod-articles-item-content
> h4.mod-articles-title (link titolo)
> figure.mod-articles-image.item-image > img
============================================ */
.main-top {
width: auto !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.main-top .card-header {
font-size: 15px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--bz-red) !important;
margin-bottom: 8px !important;
padding-bottom: 6px !important;
border-bottom: 1px solid var(--bz-border2) !important;
background: transparent !important;
display: block !important;
}
.main-top .card-body { padding: 0 !important; }
.main-top ul.mod-articles-items {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
grid-auto-rows: 180px !important;
gap: 2px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.main-top ul.mod-articles-items li {
position: relative !important;
overflow: hidden !important;
list-style: none !important;
height: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
cursor: pointer !important;
}
.main-top .mod-articles-item,
.main-top .mod-articles-item-content {
position: relative !important;
display: block !important;
height: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.main-top .mod-articles-image {
position: absolute !important;
inset: 0 !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
}
.main-top .mod-articles-image img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
filter: brightness(0.7) saturate(0.5) !important;
display: block !important;
margin: 0 !important;
transition: all 0.35s !important;
}
.main-top li:hover .mod-articles-image img {
filter: brightness(0.9) saturate(0.7) !important;
transform: scale(1.04) !important;
}
.main-top ul.mod-articles-items li::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 55%) !important;
pointer-events: none !important;
z-index: 1 !important;
}
.main-top .mod-articles-title {
position: absolute !important;
bottom: 0 !important; left: 0 !important; right: 0 !important;
padding: 8px 10px !important;
margin: 0 !important;
z-index: 2 !important;
font-size: 11px !important;
font-weight: 500 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.main-top .mod-articles-title a {
color: #fff !important;
text-decoration: none !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
cursor: pointer !important;
}
@media (max-width: 768px) {
.main-top {
display: block !important;
width: 100% !important;
margin-right: 0 !important;
}
.main-top ul.mod-articles-items {
grid-template-columns: repeat(2, 1fr) !important;
grid-auto-rows: 140px !important;
}
}
/* ============================================
ARTICOLI — VOX PROFANA / INTERVISTE
(regole di griglia/colonne rimosse — layout
gestito nativamente da Joomla via Menu →
Layout blog. Restano solo stile testo,
readmore e pulizia meta-info.)
============================================ */
.com-content-article h2, .com-content-article h3, .blog-item h2, .item-title {
font-size: 16px !important;
font-weight: 500 !important;
color: var(--bz-text2) !important;
line-height: 1.4 !important;
margin: 0 0 4px 0 !important;
transition: color 0.2s !important;
}
.com-content-article:hover h2, .blog-item:hover h2 { color: var(--bz-text) !important; }
.article-info-term, dd.createdby, dd.category-name, .hits, .create,
dd.published, time.created, .article-info time, .article-info dd.published {
display: none !important;
}
.readmore a {
background: transparent !important;
border: 1px solid var(--bz-red) !important;
color: var(--bz-red) !important;
border-radius: 3px !important;
padding: 5px 12px !important;
font-size: 11px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
.readmore a:hover { background: var(--bz-red) !important; color: #fff !important; }
/* Contiene le immagini degli articoli (evita immagini enormi/verticali
che sfondano il layout quando il campo "Immagine intro" dell'articolo
è molto grande o in verticale) */
.com-content-category-blog figure.item-image img,
.com-content-category-blog__item img,
.item-page figure.item-image img {
width: 100% !important;
height: auto !important;
max-height: 340px !important;
object-fit: cover !important;
display: block !important;
cursor: pointer !important;
}
/* ============================================
PAGINAZIONE
============================================ */
.pagination, nav.com-content-category__pagination {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
gap: 4px !important;
margin-top: 1.5rem !important;
padding-top: 1.2rem !important;
border-top: 1px solid var(--bz-border2) !important;
flex-wrap: wrap !important;
}
.pagination .page-item .page-link, .pagination a, .pagination span {
width: 28px !important; height: 28px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid var(--bz-border) !important;
border-radius: 4px !important;
font-size: 11px !important;
color: var(--bz-text4) !important;
background: transparent !important;
transition: all 0.2s !important;
text-decoration: none !important;
}
.pagination .page-item.active .page-link, .pagination .active a {
background: var(--bz-red) !important;
border-color: var(--bz-red) !important;
color: #fff !important;
}
/* ============================================
FOOTER
============================================ */
footer, #footer {
background: var(--bz-bg2) !important;
border-top: 1px solid var(--bz-border) !important;
color: var(--bz-text4) !important;
font-size: 11px !important;
padding: 1.5rem 2rem !important;
text-align: center !important;
letter-spacing: 0.06em !important;
}
footer a { color: var(--bz-text4) !important; }
footer a:hover { color: var(--bz-red) !important; }
/* ============================================
MODULI / CARD / FORM
============================================ */
.moduletable { background: transparent !important; margin-bottom: 1.8rem !important; }
.card, .well, .panel {
background: var(--bz-bg3) !important;
border: 1px solid var(--bz-border) !important;
border-radius: 6px !important;
color: var(--bz-text) !important;
}
input, textarea, select {
background: var(--bz-bg3) !important;
border: 1px solid var(--bz-border) !important;
color: var(--bz-text2) !important;
border-radius: 4px !important;
}
input:focus, textarea:focus, select:focus {
border-color: var(--bz-red) !important;
outline: none !important;
}
.btn-primary {
background: var(--bz-red) !important;
border-color: var(--bz-red) !important;
color: #fff !important;
}
.btn-primary:hover {
background: var(--bz-red-hover) !important;
border-color: var(--bz-red-hover) !important;
}
/* ============================================
SINGOLO ARTICOLO
============================================ */
.com-content-article__body, .article-body, .item-page {
color: var(--bz-text2) !important;
line-height: 1.8 !important;
font-size: 14px !important;
}
/* Forza il colore anche su tag con style inline nero/scuro
ereditato dal contenuto migrato (Word/vecchio sito) */
.com-content-article__body p,
.com-content-article__body span,
.com-content-article__body div,
.com-content-article__body li,
.com-content-article__body td,
.com-content-article__body strong,
.com-content-article__body em,
.com-content-article__body font {
color: var(--bz-text2) !important;
}
.com-content-article__body h1,
.com-content-article__body h2,
.com-content-article__body h3 { color: var(--bz-text) !important; }
.com-content-article__body a { color: var(--bz-red) !important; }
.com-content-article__body blockquote {
border-left: 3px solid var(--bz-red) !important;
padding-left: 1rem !important;
color: var(--bz-text3) !important;
font-style: italic !important;
margin: 1.5rem 0 !important;
}
/* ============================================
RESPONSIVE (senza .site-grid)
============================================ */
@media (max-width: 768px) {
#sp-sidebar-right {
border-left: none !important;
border-top: 1px solid var(--bz-border2) !important;
padding: 1.5rem 1rem !important;
}
.navbar, header.header { padding: 0 1rem !important; }
}
/* ============================================
SPOTIFY — barra fissa in fondo, sempre visibile
(modulo HTML personalizzato, contenuto avvolto in
...iframe...
,
assegnato "Su tutte le pagine")
============================================ */
.bz-spotify-bar {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 9999 !important;
background: var(--bz-bg2) !important;
border-top: 1px solid var(--bz-border) !important;
padding: 8px 12px !important;
box-sizing: border-box !important;
}
.bz-spotify-bar iframe {
display: block !important;
width: 100% !important;
max-width: 500px !important;
margin: 0 auto !important;
border: none !important;
}
@media (max-width: 600px) {
.bz-spotify-bar {
padding: 6px 8px !important;
}
}
.bz-footer {
padding: 50px 20px 30px;
}
footer .bz-footer-text a { color: #e63946 !important; }
footer .bz-footer-text a:hover { text-decoration: underline; }
footer a { color: var(--bz-text4) !important; }
footer a:hover { color: var(--bz-red) !important; }
footer .bz-footer-text a { color: var(--bz-red) !important; }
footer .bz-footer-text a:hover { color: var(--bz-red-hover) !important; text-decoration: underline; }
.bz-footer-main {
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
max-width: 900px;
margin: 0 auto;
}
.bz-footer-logo img {
width: 160px;
height: auto;
display: block;
}
.bz-footer-text p {
margin: 0 0 12px 0;
color: #d0d0d0;
font-size: 15px;
line-height: 1.5;
}
.bz-footer-text p:last-child {
margin-bottom: 0;
}
.bz-footer-text a {
color: #e63946;
text-decoration: none;
}
.bz-footer-text a:hover {
text-decoration: underline;
}
.bz-footer-copyright {
text-align: center;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #888;
font-size: 13px;
}
.bz-footer-logo img {
width: 400px;
height: auto;
display: block;
}
/* Responsive: stack su schermi piccoli */
@media (max-width: 600px) {
.bz-footer-main {
flex-direction: column;
text-align: center;
gap: 24px;
}
}
/* ============================================
FACEBOOK PAGE WIDGET — cornice scura di contenimento
(il contenuto interno resta bianco, è un iframe di Facebook
che non possiamo restilizzare, ma lo "inquadriamo" nel tema dark)
============================================ */
.fb-page {
display: block !important;
border: 1px solid var(--bz-border2) !important;
border-radius: 6px !important;
overflow: hidden !important;
background: var(--bz-bg3) !important;
padding: 4px !important;
}
/* Fix: evita che il breadcrumb si stiri per tutta l'altezza della riga grid,
causando spazio vuoto sopra il player video */
.grid-child.container-component {
align-self: start;
}
.classe-esatta-del-titolo {
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none !important;
}
/* Fix: Event Gallery spezza i titoli a metà parola (es. "OFF VE-NUE")
per via di word-break + hyphens:auto nel CSS nativo del componente */
#events .item .title {
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
-webkit-hyphens: none !important;
-epub-hyphens: none !important;
-o-hyphens: none !important;
min-height: auto !important;
}
/* ============================================
CSS BASE del modulo mod_itcs_teamcard
(normalmente caricato da Joomla solo sulle pagine dove il modulo
è pubblicato - qui incluso sempre così la card funziona identica
anche riusata nelle pagine autore di com_bzteam)
Fonte: media/mod_itcs_teamcard/... - CSS Style licenza GNU/GPL,
risorsa originale da http://littlesnippets.net/
============================================ */
.bz-author-teamcard .teamcard {
width: 100%;
position: relative;
float: left;
}
.bz-author-teamcard .teamcard.tc1 div.tc_main {
width: 480px;
margin-left: auto;
margin-right: auto;
}
.bz-author-teamcard figure.snip0099 {
font-family: 'Raleway', Arial, sans-serif;
display: block;
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
height: 240px;
width: 480px;
background: #000000;
}
.bz-author-teamcard .teamcard.tc1 figure.snip0099 {
display: block;
margin-left: auto;
margin-right: auto;
}
.bz-author-teamcard .teamcard.tc2 figure.snip0099 {
float: left;
}
@media only screen and (min-width: 980px) {
.bz-author-teamcard .teamcard {
text-align: center;
}
.bz-author-teamcard .teamcard.tc2 div.tc_main {
display: inline-block;
text-align: left;
width: calc(480px + 1%);
}
}
@media only screen and (max-width: 980px) {
.bz-author-teamcard .teamcard.tc2 div.tc_main {
float: none;
width: 480px;
margin-left: auto;
margin-right: auto;
}
.bz-author-teamcard .teamcard.tc2 figure.snip0099 {
display: block;
margin-left: auto;
margin-right: auto;
}
}
.bz-author-teamcard figure.snip0099 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.bz-author-teamcard figure.snip0099 > img {
opacity: 1;
filter: blur(0px);
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.bz-author-teamcard figure.snip0099 > img.pr {
min-height: 100%;
width: 50%;
}
.bz-author-teamcard figure.snip0099 > img.ls {
position: absolute;
max-height: 100%;
width: auto;
clip: rect(0px, 242px, 242px, 0px);
left:0;
}
.bz-author-teamcard figure.snip0099.imgr > img {
margin-left: 50%;
}
.bz-author-teamcard figure.snip0099.imgl > img {
margin-right: 50%;
}
.bz-author-teamcard figure.snip0099 figcaption {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: #ffffff;
}
.bz-author-teamcard figure.snip0099.imgr figcaption {
left: 0;
}
.bz-author-teamcard figure.snip0099.imgl figcaption {
right: 0;
}
.bz-author-teamcard figure.snip0099 figcaption h2 ,
.bz-author-teamcard figure.snip0099 figcaption p {
position: absolute;
right: 0;
color: #000000;
text-align: right;
line-height: 1.5em;
padding: 10px 0 10px 0px;
margin: 0 40px 0 20px;
}
.bz-author-teamcard figure.snip0099.imgl figcaption h2 ,
.bz-author-teamcard figure.snip0099.imgl figcaption p {
left: 0px;
text-align: left;
margin: 0 20px 0 40px;
}
.bz-author-teamcard figure.snip0099 figcaption h2 {
font-size: 1.3em;
bottom: 50%;
font-weight: 300;
text-transform: uppercase;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.bz-author-teamcard figure.snip0099 figcaption h2 span {
font-weight: 800;
}
.bz-author-teamcard figure.snip0099 figcaption p {
top: 50%;
font-size: 0.9em;
opacity: 0.8;
}
.bz-author-teamcard figure.snip0099 .icons {
padding: 5px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.bz-author-teamcard figure.snip0099.imgr .icons {
left: 50%;
padding-left: 30px;
}
.bz-author-teamcard figure.snip0099.imgl .icons {
right: 50%;
padding-right: 30px;
}
.bz-author-teamcard figure.snip0099 .icons i {
font-size: 32px;
padding: 10px;
color: #ffffff;
opacity: 0;
top: 50%;
display: inline-block;
-webkit-transition: all 0.35s;
transition: all 0.35s;
}
.bz-author-teamcard figure.snip0099.imgr i {
-webkit-transform: translateX(50px);
transform: translateX(50px);
}
.bz-author-teamcard figure.snip0099.imgl i {
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
}
.bz-author-teamcard figure.snip0099:after {
position: absolute;
top: 50%;
left: 50%;
height: 35px;
width: 35px;
background-color: #000000;
border: 5px double #ffffff;
content: '';
-webkit-transform: rotate(45deg) translate(-50%, -50%);
transform: rotate(45deg) translate(-50%, -50%);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.bz-author-teamcard figure.snip0099:hover > img ,
.bz-author-teamcard figure.snip0099.hover > img {
opacity: 0.5;
filter: blur(5px);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.bz-author-teamcard figure.snip0099:hover i ,
.bz-author-teamcard figure.snip0099.hover i {
opacity: 0.8;
-webkit-transform: translate(0);
transform: translate(0);
}
@media only screen and (max-width: 500px) {
.bz-author-teamcard .teamcard.tc1 div.tc_main ,
.bz-author-teamcard .teamcard.tc2 div.tc_main {
width: 240px;
margin-left: auto;
margin-right: auto;
}
.bz-author-teamcard .teamcard.tc1 figure.snip0099 ,
.bz-author-teamcard .teamcard.tc2 figure.snip0099 {
display: inline-block;
margin: 10px 1%;
height: 480px;
width: 100%;
}
.bz-author-teamcard figure.snip0099 > img.pr {
min-height: 50%;
width: 100%;
}
.bz-author-teamcard figure.snip0099 > img.ls {
position: absolute;
max-height: 50%;
width: auto;
clip: rect(0px, 242px, 242px, 0px);
max-width: none;
}
.bz-author-teamcard figure.snip0099.imgr > img ,
.bz-author-teamcard figure.snip0099.imgl > img {
margin-top: 0;
margin-left: 0;
}
.bz-author-teamcard figure.snip0099 figcaption {
position: absolute;
top: 50%;
width: 100%;
height: 50%;
background: #ffffff;
}
.bz-author-teamcard figure.snip0099.imgr figcaption ,
.bz-author-teamcard figure.snip0099.imgl figcaption {
bottom: 0;
left:0;
}
.bz-author-teamcard figure.snip0099 .icons {
width:100%;
padding: 5px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-200%);
transform: translateY(-200%);
}
.bz-author-teamcard figure.snip0099.imgr .icons ,
.bz-author-teamcard figure.snip0099.imgl .icons {
left: 0%;
padding-left: 25%;
}
}
/* --- fine CSS base mod_itcs_teamcard --- */
/* Allarga la card */
.teamcard.tc2 figure.snip0099 {
width: 650px !important;
height: 220px !important;
position: relative !important;
}
/* Foto: riempiono tutto lo spazio, centrate */
.teamcard.tc2 figure.snip0099 img.pr {
object-fit: cover;
object-position: center center;
width: 50%;
height: 100%;
}
/* Diamante con logo, centrato, dietro al testo */
.teamcard.tc2 figure.snip0099::after {
background-image: url('https://www.blackzine.com/images/logo/diamante.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: transparent !important;
border: none !important;
width: 100px !important;
height: 100px !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
margin: 0 !important;
transform: translate(-50%, -50%) !important;
z-index: 3 !important;
}
.teamcard.tc2 figure.snip0099::before {
display: none !important;
}
/* Il blocco figcaption resta la "metà grigia" della card */
.teamcard.tc2 figure.snip0099 figcaption {
position: absolute !important;
top: 0 !important;
height: 100% !important;
width: 50% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
background: var(--bz-bg3, #333) !important;
z-index: 2 !important;
}
.teamcard.tc2 figure.snip0099.imgl figcaption {
left: 50% !important;
right: auto !important;
padding: 0 20px 0 60px !important;
box-sizing: border-box !important;
}
.teamcard.tc2 figure.snip0099.imgr figcaption {
left: 0 !important;
right: auto !important;
padding: 0 60px 0 20px !important;
box-sizing: border-box !important;
}
/* QUESTA È LA VERA CORREZIONE: neutralizza il position:absolute
originale di h2 e p, che finora ignorava completamente il figcaption */
.teamcard.tc2 figure.snip0099 figcaption h2,
.teamcard.tc2 figure.snip0099 figcaption p {
position: static !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
text-align: center !important;
margin: 0 !important;
padding: 4px 0 !important;
width: 100% !important;
color: #fff !important;
}
/* Ruolo su una riga sola */
.teamcard.tc2 figure.snip0099 figcaption p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
line-height: 1.4;
}
/* Formattazione articolo */
.com-content-article__body p,
.com-content-article__body span,
.com-content-article__body div,
.com-content-article__body li,
.com-content-article__body td,
.com-content-article__body strong,
.com-content-article__body em,
.com-content-article__body font {
font-size: 17px !important;
line-height: 1.75 !important;
}
.com-content-article__body {
max-width: 720px !important;
}
/* Hero sarebbe la scritta banner EXTREME MUSIC WITHOUT COMPROMISE */
.bz-hero {
text-align: center;
padding: 48px 20px 32px;
border-bottom: 1px solid var(--bz-border2);
}
.bz-hero-eyebrow {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--bz-text3);
margin: 0 0 10px 0;
}
.bz-hero-title {
font-family: 'Bebas Neue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 52px;
font-weight: 400;
letter-spacing: 0.03em;
color: var(--bz-red);
margin: 0;
line-height: 1.05;
}
@media (max-width: 768px) {
.bz-hero-title { font-size: 34px; }
.bz-hero { padding: 32px 16px 24px; }
}
/* Google Translate traduttore le pagine in italiano non vengono mai toccate le pagine in inglese vengono tradotte solo nel caso non esistono in inglese ma solo in italiano */
.bz-translate-banner {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
background: var(--bz-bg2);
border: 1px solid var(--bz-border2);
border-left: 3px solid var(--bz-red);
padding: 10px 14px;
margin: 0 0 20px 0;
font-size: 13px;
}
.bz-translate-text {
color: var(--bz-text2);
}
.bz-translate-btn {
color: var(--bz-red) !important;
border: 1px solid var(--bz-red);
border-radius: 3px;
padding: 4px 10px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
.bz-translate-btn:hover {
background: var(--bz-red);
color: #fff !important;
}
.tags, ul.tags, .item-tags, dl.tags, .tag-list {
display: none !important;
}
/* Estende il font Oswald anche ai titoli delle card nelle liste
(Vox Profana, Interview, Live Report) e alla pagina Team */
.com-content-article h2,
.com-content-article h3,
.blog-item h2,
.item-title,
#events .item .title,
.teamcard .snip0099 figcaption h2 {
font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
}
h1.eventgallery-category-headline {
font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
}
.bz-cookie-banner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 10000;
background: var(--bz-bg2);
border-top: 1px solid var(--bz-border);
padding: 16px 20px;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
justify-content: space-between;
transform: translateY(100%);
transition: transform 0.3s ease;
}
.bz-cookie-banner-visible {
transform: translateY(0);
}
.bz-cookie-banner-hide {
transform: translateY(100%);
}
.bz-cookie-text {
color: var(--bz-text2);
font-size: 13px;
line-height: 1.5;
max-width: 700px;
flex: 1 1 400px;
}
.bz-cookie-text strong {
color: var(--bz-text);
}
.bz-cookie-link {
color: var(--bz-red) !important;
text-decoration: underline;
}
.bz-cookie-actions {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.bz-cookie-btn {
border: 1px solid var(--bz-red);
border-radius: 3px;
padding: 8px 16px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
white-space: nowrap;
}
.bz-cookie-reject {
background: transparent;
color: var(--bz-text2);
border-color: var(--bz-border);
}
.bz-cookie-reject:hover {
border-color: var(--bz-text3);
color: var(--bz-text);
}
.bz-cookie-accept {
background: var(--bz-red);
color: #fff;
}
.bz-cookie-accept:hover {
background: var(--bz-red-hover);
}
@media (max-width: 768px) {
.bz-cookie-banner {
padding: 14px 16px;
padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
.bz-cookie-actions {
width: 100%;
}
.bz-cookie-btn {
flex: 1;
}
}
/* --- BLACKZine: pagina 404 personalizzata (luglio 2026) --- */
.bz-error-page {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
padding: 4rem 1.5rem;
text-align: center;
background: #0a0a0a;
}
.bz-error-inner {
max-width: 600px;
}
.bz-error-code {
font-family: 'Bebas Neue', sans-serif;
font-size: 8rem;
line-height: 1;
color: #b30000;
text-shadow: 0 0 20px rgba(179, 0, 0, 0.5);
}
.bz-error-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem;
letter-spacing: 0.05em;
color: #f2f2f2;
margin: 0.5rem 0 1rem;
}
.bz-error-text {
color: #cfcfcf;
font-size: 1.05rem;
line-height: 1.6;
margin-bottom: 2rem;
}
.bz-error-btn {
display: inline-block;
padding: 0.75rem 1.75rem;
border: 1px solid #b30000;
color: #f2f2f2;
text-decoration: none;
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 0.05em;
transition: background 0.2s ease;
}
.bz-error-btn:hover {
background: #b30000;
}
.bz-error-debug {
margin-top: 2.5rem;
font-size: 0.75rem;
color: #555;
font-family: monospace;
}
/* --- fine blocco 404 --- */
/* --- BLACKZine: pagina 404 personalizzata (luglio 2026) --- */
.bz-error-page {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
padding: 4rem 1.5rem;
text-align: center;
background: #0a0a0a;
}
.bz-error-inner {
max-width: 600px;
}
.bz-error-code {
font-family: 'Bebas Neue', sans-serif;
font-size: 8rem;
line-height: 1;
color: #b30000;
text-shadow: 0 0 20px rgba(179, 0, 0, 0.5);
}
.bz-error-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem;
letter-spacing: 0.05em;
color: #f2f2f2;
margin: 0.5rem 0 1rem;
}
.bz-error-text {
color: #cfcfcf;
font-size: 1.05rem;
line-height: 1.6;
margin-bottom: 2rem;
}
.bz-error-divider {
width: 60px;
height: 2px;
background: #b30000;
margin: 2rem auto;
}
.bz-error-btn {
display: inline-block;
padding: 0.75rem 1.75rem;
border: 1px solid #b30000;
color: #f2f2f2;
text-decoration: none;
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 0.05em;
transition: background 0.2s ease;
}
.bz-error-btn:hover {
background: #b30000;
}
.bz-error-debug {
margin-top: 2.5rem;
font-size: 0.75rem;
color: #555;
font-family: monospace;
}
/* --- fine blocco 404 --- */
/* --- Formattazione articoli --- */
body.com_content.view-article .com-content-article.item-page .page-header h1 {
font-family: 'Metal Mania', cursive !important;
font-size: 46px !important;
color: var(--bz-red, #c8102e) !important;
letter-spacing: 1px;
line-height: 1.1;
}
.com-content-article__body,
.com-content-article__body p,
.com-content-article__body span {
font-family: 'Barlow', sans-serif !important;
color: var(--bz-text, #e8e8e0) !important;
font-size: 16px;
line-height: 1.75;
}
.com-content-article__body p:first-of-type::first-letter {
font-family: 'Metal Mania', cursive;
font-size: 58px;
line-height: 0.8;
color: var(--bz-text, #e8e8e0);
float: left;
padding: 6px 10px 0 0;
}
.com-content-article__body span[style*="courier"] {
font-family: 'Barlow', sans-serif !important;
display: block;
border-left: 3px solid var(--bz-red, #c8102e);
padding: 6px 0 6px 18px;
font-style: italic;
margin: 24px 0;
}
/* --- Blocco Team Pagine Singole --- */
/* Aggiungere a blackzine.css - da rifinire con le variabili esistenti */
.bz-author-header::after {
content: "";
display: table;
clear: both;
}
.bz-author-columns {
clear: both;
display: flex;
gap: 32px;
align-items: flex-start;
}
.bz-author-column {
flex: 1 1 0;
min-width: 0;
}
@media (max-width: 768px) {
.bz-author-columns {
flex-direction: column;
}
}
.bz-author-section {
clear: both;
margin-top: 32px;
}
.bz-author-section-title {
color: var(--bz-red, #c00);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 1.1rem;
margin-bottom: 12px;
border-bottom: 1px solid var(--bz-bg2, #222);
padding-bottom: 6px;
}
.bz-author-featured-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.bz-author-featured-grid--2x2 {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
.bz-author-featured-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.bz-author-card {
position: relative;
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--bz-bg2, #111);
}
.bz-author-card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bz-author-card-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 8px 10px;
background: linear-gradient(transparent, rgba(0,0,0,0.85));
display: flex;
flex-direction: column;
gap: 2px;
}
.bz-author-card-title {
color: #fff;
font-weight: 700;
text-transform: uppercase;
font-size: 0.85rem;
}
.bz-author-card-category {
color: var(--bz-red, #c00);
font-size: 0.7rem;
text-transform: uppercase;
font-weight: 600;
}
.bz-author-list {
list-style: none;
margin: 20px 0 0;
padding: 0;
}
.bz-author-list-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid var(--bz-bg2, #222);
}
.bz-author-list-item a {
flex: 1;
min-width: 0;
}
.bz-author-list-category {
color: var(--bz-red, #c00);
font-size: 0.75rem;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
}
.bz-author-name {
font-family: 'Metal Mania', cursive !important;
color: #fff !important;
font-size: 2.6rem !important;
font-weight: 400 !important;
letter-spacing: 0.02em !important;
line-height: 1.1 !important;
margin: 0 0 8px 0 !important;
}
.bz-author-header {
margin-bottom: 24px;
}
/* Il ruolo va a capo invece di essere troncato con "..." */
.teamcard.tc2 figure.snip0099 figcaption p {
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
line-height: 1.6 !important;
margin-top: 10px !important;
text-align: left !important;
}
/* Solo per i ruoli lunghi che vanno su 2 righe (Julien, Alessia):
la seconda riga si sposta sul lato opposto per bilanciare il blocco.
NOTA: legato all'ordine delle card nel modulo Team - se cambi l'ordine
o aggiungi membri con ruolo lungo, questi indici vanno aggiornati. */
.teamcard.tc2 .tc_main:nth-of-type(1) figure.snip0099 figcaption p,
.teamcard.tc2 .tc_main:nth-of-type(2) figure.snip0099 figcaption p {
text-align-last: right !important;
}
/* Un po' più di spazio tra il nome (con la sua linea sotto) e il ruolo */
.teamcard.tc2 figure.snip0099 figcaption h2 {
margin-bottom: 10px !important;
}
/* Nome e cognome attaccati (es. "JULIENCESARINI") - nel markup
il cognome è in uno senza spazio prima, es:
JulienCesarini
*/
.teamcard.tc2 figure.snip0099 figcaption h2 span::before {
content: " ";
}
/* --- Pagina autore: riuso della teamcard senza ripetere il nome (luglio 2026) --- */
.bz-author-teamcard {
margin-top: 16px;
display: flex;
justify-content: center;
}
.bz-author-teamcard .teamcard {
float: none !important;
width: auto !important;
}
/* La regola "seconda riga dal lato opposto" della pagina Team è legata
alla posizione (1° e 2° membro) e non deve applicarsi qui, dove la
card viene riusata per un singolo autore. */
.bz-author-teamcard figure.snip0099 figcaption p {
text-align-last: left !important;
}
/* ...tranne per Julien e Alessia, che sulla pagina Team hanno
quell'effetto (ruolo su 2 righe) - lo ripetiamo identico qui. */
.bz-author-id-151 figure.snip0099 figcaption p,
.bz-author-id-158 figure.snip0099 figcaption p {
text-align-last: right !important;
}
/* --- Pagina autore: layout 3 colonne Nome / Foto / Ruolo (luglio 2026) --- */
.bz-author-header-row {
display: flex;
align-items: center;
gap: 28px;
}
.bz-author-header-row .bz-author-name {
flex: 0 0 auto;
margin: 0 !important;
white-space: nowrap;
}
.bz-author-photo-wrap {
flex: 1 1 auto;
min-width: 0;
max-width: 520px;
aspect-ratio: 16 / 7;
overflow: hidden;
background: var(--bz-bg2, #111);
}
.bz-author-photo-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.bz-author-role {
flex: 0 0 auto;
max-width: 220px;
color: var(--bz-text2, #aaa);
font-size: 0.9rem;
line-height: 1.4;
text-align: right;
}
@media (max-width: 900px) {
.bz-author-header-row {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.bz-author-name {
white-space: normal;
}
.bz-author-photo-wrap {
max-width: 100%;
width: 100%;
}
.bz-author-role {
max-width: 100%;
text-align: left;
}
}
/* --- Card autore in fondo agli articoli Vox Profana/Interview (luglio 2026) --- */
.bz-article-author-card {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--bz-border2, #222);
}
.bz-author-card-link {
display: block;
text-decoration: none;
}
/* --- Live Report (Event Gallery): stessa formattazione testo di Vox Profana/Interview (luglio 2026) --- */
.event .text {
font-family: 'Barlow', sans-serif !important;
color: var(--bz-text, #e8e8e0) !important;
font-size: 16px;
line-height: 1.75;
max-width: 720px;
}
.event .text p,
.event .text span,
.event .text div {
font-family: 'Barlow', sans-serif !important;
color: var(--bz-text, #e8e8e0) !important;
}
.event .text a {
color: var(--bz-red, #c8102e) !important;
}
.event .text p:first-of-type::first-letter {
font-family: 'Metal Mania', cursive;
font-size: 58px;
line-height: 0.8;
color: var(--bz-text, #e8e8e0);
float: left;
padding: 6px 10px 0 0;
}
/* --- Live Report (Event Gallery): stessa formattazione testo di Vox Profana/Interview (luglio 2026) --- */
.event .text,
.event .text p,
.event .text span,
.event .text div,
.event .text li {
font-family: 'Barlow', sans-serif !important;
color: var(--bz-text, #e8e8e0) !important;
font-size: 16px !important;
line-height: 1.75 !important;
}
.event .text::first-letter,
.event .text p:first-of-type::first-letter {
font-family: 'Metal Mania', cursive;
font-size: 58px;
line-height: 0.8;
color: var(--bz-text, #e8e8e0);
float: left;
padding: 6px 10px 0 0;
}
.event .text a { color: var(--bz-red, #c8102e) !important; }
/* --- Byline autore compatto sopra articoli Vox Profana/Interview (luglio 2026) --- */
.bz-author-byline {
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
margin: 4px 0 28px;
padding: 10px 16px;
border: 1px solid var(--bz-border2, #222);
border-radius: 6px;
background: var(--bz-bg2, #111);
transition: border-color 0.2s;
}
.bz-author-byline:hover {
border-color: var(--bz-red, #c8102e);
}
.bz-author-byline-photo {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
display: block;
}
.bz-author-byline-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.bz-author-byline-name {
color: #fff;
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.03em;
transition: color 0.2s;
}
.bz-author-byline:hover .bz-author-byline-name {
color: var(--bz-red, #c8102e);
}
.bz-author-byline-role {
color: var(--bz-text2, #aaa);
font-size: 0.75rem;
}
/* --- BLACKZine (luglio 2026): coerenza visiva Live Report (Event Gallery)
con gli articoli Vox Profana/Interview --- */
/* Share buttons (plg_content_bzsharebuttons): il plugin inietta questo
stesso CSS dinamicamente, ma solo sugli eventi onContentAfterTitle/
onContentAfterDisplay di com_content — eventi che non scattano mai
sulle pagine Event Gallery. Copiato identico qui perché blackzine.css
è caricato staticamente su ogni pagina del sito, gallery incluse. */
.bz-share-buttons{display:flex;align-items:center;gap:10px;margin:0.75rem 0 1.25rem;flex-wrap:wrap}
.bz-share-label{font-size:0.85rem;color:var(--bz-red,#c0161c);margin-right:4px;text-transform:uppercase;letter-spacing:0.04em;font-weight:600}
.bz-share-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--bz-bg2,#1a1a1a);color:var(--bz-text4,#cfcfcf);border:1px solid rgba(255,255,255,0.08);cursor:pointer;transition:background .15s ease,color .15s ease,transform .15s ease;text-decoration:none;padding:0}
.bz-share-btn:hover,.bz-share-btn:focus-visible{color:#fff;transform:translateY(-2px)}
.bz-share-facebook:hover,.bz-share-facebook:focus-visible{background:#1877F2}
.bz-share-twitter:hover,.bz-share-twitter:focus-visible{background:#ffffff;color:#000000}
.bz-share-whatsapp:hover,.bz-share-whatsapp:focus-visible{background:#25D366}
.bz-share-gmail:hover,.bz-share-gmail:focus-visible{background:#EA4335}
.bz-share-copy:hover,.bz-share-copy:focus-visible{background:var(--bz-red,#c0161c)}
.bz-share-copied{font-size:0.8rem;color:var(--bz-red,#c0161c);opacity:0;transition:opacity .2s ease}
.bz-share-copied.is-visible{opacity:1}
/* Titolo evento Event Gallery: stesso stile Metal Mania degli articoli.
Il tag arriva da renderEventHeadTag() del componente, con classe
"displayname" dentro div.event — non coincide con le regole generiche
.page-header h1 già usate per nascondere/sostituire il titolo Joomla
standard sulle pagine di listato. */
.event h1.displayname {
font-family: 'Metal Mania', cursive !important;
font-size: 46px !important;
color: var(--bz-red, #c8102e) !important;
letter-spacing: 1px;
line-height: 1.1;
margin: 0 0 12px 0;
}
@media (max-width: 768px) {
.event h1.displayname {
font-size: 32px !important;
}
}