/* ==========================================================================
tpl_autoscuola — foglio di stile principale
Tutti i colori/font/dimensioni personalizzabili vengono iniettati come
variabili CSS da component.php, in base ai parametri scelti nel pannello
admin del template. Qui sotto ci sono solo i valori di FALLBACK, usati se
per qualche motivo la variabile non fosse disponibile.
========================================================================== */
:root {
--color-primary: #C0392B;
--color-secondary: #2C3E50;
--color-bg: #FFFFFF;
--color-text: #222222;
--color-link: #C0392B;
--font-heading: Georgia, 'Times New Roman', serif;
--font-body: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--font-size-base: 16px;
--container-width: 1200px;
--bg-image: none;
--bg-position: center center;
--bg-size: cover;
--bg-repeat: no-repeat;
--bg-attachment: scroll;
}
/* ---- Reset di base ---- */
*, *::before, *::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--color-text);
background-color: var(--color-bg);
background-image: var(--bg-image);
background-position: var(--bg-position);
background-size: var(--bg-size);
background-repeat: var(--bg-repeat);
background-attachment: var(--bg-attachment);
/* Necessario per l'opzione "A tutto schermo" della hero articolo qui
sotto (.article-hero--full-bleed): quella tecnica usa temporaneamente
una larghezza pari a tutto il viewport (100vw) per far uscire
l'immagine dal contenitore centrato del sito, ma su molti browser
100vw include anche lo spazio occupato dalla barra di scorrimento
verticale, risultando leggermente più largo della pagina visibile e
creando una scomoda barra orizzontale. Questa riga la nasconde. */
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
line-height: var(--heading-line-height, 1.25);
letter-spacing: var(--heading-letter-spacing, normal);
margin: 0 0 0.6em;
color: var(--color-secondary);
}
p {
margin: 0 0 1.2em;
}
a {
color: var(--color-link);
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: underline;
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul, ol {
padding-left: 1.4em;
}
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 1.2em;
}
table th,
table td {
padding: 0.5em 0.75em;
border: 1px solid rgba(0, 0, 0, 0.1);
text-align: left;
}
blockquote {
margin: 1.5em 0;
padding: 0.5em 1.2em;
border-left: 4px solid var(--color-primary);
color: var(--color-secondary);
font-style: italic;
}
.btn,
input[type="submit"] {
display: inline-block;
padding: 0.6em 1.4em;
background-color: var(--button-color, var(--color-primary));
color: #fff;
border: none;
border-radius: 4px;
font-family: var(--font-body);
font-size: 1em;
cursor: pointer;
text-decoration: none;
}
.btn:hover,
input[type="submit"]:hover {
background-color: var(--button-hover-color, var(--color-primary));
filter: none;
text-decoration: none;
}
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
textarea,
select {
width: 100%;
padding: 0.5em 0.75em;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
font-family: var(--font-body);
font-size: 1em;
margin-bottom: 1em;
}
/* ---- Layout generale ---- */
.container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 20px;
}
/* "Larghezza piena": nessun limite massimo, si estende da bordo a bordo. */
.container-fluid {
width: 100%;
padding: 0 20px;
}
.container--no-padding {
padding-left: 0;
padding-right: 0;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--color-primary);
color: #fff;
padding: 10px 16px;
z-index: 1000;
}
.skip-link:focus {
left: 10px;
}
/* Classe di utilità usata da molti moduli "core" di Joomla (ricerca, menu,
ecc.) per etichette pensate solo per gli screen reader. Senza questa
regola, quelle etichette restano visibili invece di essere nascoste. */
.visually-hidden,
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ---- Header ---- */
.site-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
background-color: var(--header-bg, var(--color-bg));
}
body.has-sticky-header .site-header {
position: sticky;
top: 0;
z-index: 500;
}
.site-header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
padding: 16px 20px;
}
.site-header__logo {
flex: 0 0 auto;
font-family: var(--font-heading);
font-size: var(--logo-font-size, 28px);
font-weight: bold;
}
.site-header__logo a {
/* Wired to the same --menu-link-color custom property the menu links
use (mod_menustyle's "Colore testo menu e logo" field already sets
it, including the scroll-triggered change in overlay mode) - it just
wasn't actually applied here before, despite the field's own name
promising it. */
color: var(--menu-link-color, var(--color-secondary));
}
.site-header__logo img {
max-height: calc(var(--logo-font-size, 28px) * 1.8);
width: auto;
}
@media (max-width: 900px) {
.site-header__logo {
/* Senza questo limite il logo restava alla dimensione desktop
configurata (--logo-font-size) anche su schermi stretti, non
ridimensionandosi mai. "--logo-font-size-mobile" (impostabile da
mod_menustyle, "Dimensione logo su mobile") permette un valore
dedicato; altrimenti si limita comunque a un massimo ragionevole. */
font-size: min(var(--logo-font-size, 28px), var(--logo-font-size-mobile, 20px));
}
body.rvs-logo-mobile-hide .site-header__logo {
display: none;
}
/* Di norma l'hamburger sta dopo il logo (ordine naturale del markup).
mod_menustyle può invertirli con questa classe. */
body.rvs-hamburger-first .menu-toggle {
order: 1;
}
body.rvs-hamburger-first .site-header__logo {
order: 2;
}
}
.site-header__slogan {
font-family: var(--font-body);
font-size: 0.55em;
font-weight: normal;
color: var(--slogan-color, #777777);
margin-top: 2px;
}
.site-header__menu {
flex: 1 1 auto;
background-color: var(--menu-bar-bg, transparent);
border-radius: 8px;
}
.site-header__menu ul {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: var(--menu-justify, flex-start);
gap: var(--menu-item-gap, 24px);
margin: 0;
padding: 0;
}
.site-header__menu li {
position: relative;
}
.site-header__menu a {
color: var(--menu-link-color, var(--color-secondary));
font-size: var(--menu-font-size, inherit);
font-weight: var(--menu-font-weight, 600);
text-transform: var(--menu-text-transform, none);
letter-spacing: var(--menu-letter-spacing, normal);
}
.site-header__menu a:hover {
color: var(--menu-link-hover-color, var(--color-primary));
}
/* Voce attiva (pagina corrente): Joomla aggiunge la classe "current" al
, ed "active" agli antenati di un sottomenu aperto sulla voce
corrente. */
.site-header__menu li.current > a,
.site-header__menu li.active > a {
color: var(--menu-active-color, var(--menu-link-hover-color, var(--color-primary)));
}
/* ---- Effetto hover/attivo sulle voci di primo livello ----
La classe è sul (vedi index.php), scelta in Aspetto → Menu. */
.menu-hover-underline .site-header__menu > ul > li > a {
position: relative;
padding-bottom: 4px;
}
.menu-hover-underline .site-header__menu > ul > li > a::after {
content: '';
position: absolute;
left: 0;
right: 100%;
bottom: 0;
height: 2px;
background: var(--menu-hover-effect-color, var(--menu-link-hover-color, var(--color-primary)));
transition: right 0.2s ease;
}
.menu-hover-underline .site-header__menu > ul > li > a:hover::after,
.menu-hover-underline .site-header__menu > ul > li.current > a::after {
right: 0;
}
.menu-hover-background .site-header__menu > ul > li > a {
padding: 6px 10px;
border-radius: 6px;
transition: background-color 0.2s ease;
}
.menu-hover-background .site-header__menu > ul > li > a:hover,
.menu-hover-background .site-header__menu > ul > li.current > a {
background-color: var(--menu-hover-effect-color, rgba(0, 0, 0, 0.06));
}
.menu-hover-scale .site-header__menu > ul > li > a {
display: inline-block;
transition: transform 0.15s ease;
}
.menu-hover-scale .site-header__menu > ul > li > a:hover {
transform: scale(1.08);
}
/* Sottomenu (qualsiasi livello annidato): nascosti finché non attivati.
Senza questa regola, Joomla stampa TUTTO l'albero del menu appiattito
nella pagina, dando l'effetto "esploso" che vedi se manca questo CSS. */
.site-header__menu ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
flex-direction: column;
gap: 0;
min-width: 220px;
background: var(--menu-dropdown-bg, #FFFFFF);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--menu-dropdown-radius, 6px);
padding: 8px 0;
z-index: 200;
}
/* Intensità ombra sottomenu: classe sul , scelta in Aspetto → Menu. */
.menu-dropdown-shadow-none .site-header__menu ul ul {
box-shadow: none;
}
.menu-dropdown-shadow-soft .site-header__menu ul ul {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.menu-dropdown-shadow-medium .site-header__menu ul ul {
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.menu-dropdown-shadow-strong .site-header__menu ul ul {
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}
.site-header__menu ul ul ul {
top: -9px;
left: 100%;
}
.site-header__menu ul ul li a {
display: block;
padding: 8px 18px;
white-space: nowrap;
font-weight: 500;
color: var(--menu-dropdown-text, var(--color-secondary));
border-radius: var(--menu-dropdown-radius, 6px);
}
.site-header__menu ul ul li a:hover {
background-color: var(--menu-dropdown-hover-bg, transparent);
}
/* Desktop: apri al passaggio del mouse o quando un link interno ha il focus. */
.site-header__menu li:hover > ul,
.site-header__menu li:focus-within > ul {
display: flex;
}
/* Aggiunta da JS a chi ha sottovoci: piccola freccia cliccabile. */
.submenu-toggle {
display: none;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
padding: 6px 10px;
font-size: 1.1em;
line-height: 1;
color: var(--menu-link-color, var(--color-secondary));
}
/* Il pulsante toggle che Joomla stampa nativamente accanto alle voci con
sottomenu (".mod-menu__toggle-sub") non è collegato al nostro CSS/JS
(che usa la classe "submenu-open" sul
): lo sostituiamo sempre con
".submenu-toggle" sopra, quindi va nascosto per non avere due pulsanti
sovrapposti di cui uno non funzionante. */
.site-header__menu .mod-menu__toggle-sub {
display: none !important;
}
/* Mobile: il click sulla freccia (non il :hover, inutilizzabile a dito)
apre/chiude il sottomenu tramite la classe "is-open" gestita da JS. */
@media (max-width: 900px) {
.site-header__menu ul ul {
display: none;
position: static;
box-shadow: none;
border: none;
/* Prima era "transparent": il sottomenu finiva per mostrare lo
sfondo del pannello menu mobile (--mobile-menu-bg) invece del
colore "Sfondo sottomenu" impostato in Aspetto → Menu, che è lo
stesso usato per il sottomenu a tendina desktop. Ripristinato
qui così il colore coincide su entrambe le versioni. */
background: var(--menu-dropdown-bg, #FFFFFF);
border-radius: 6px;
/* Rese esplicite (invece di ereditare solo "padding-left" sopra al
padding "8px 0" del desktop): prima il rientro a sinistra si
perdeva perché i link sotto sovrascrivevano il proprio padding
orizzontale, e lo spazio sotto era eccessivo per via del bordo
ripetuto su ogni voce (vedi sotto) sommato al padding della lista. */
padding: 4px 0;
margin: 0 0 4px 16px;
}
.site-header__menu ul ul li a {
padding: 10px 14px;
/* La regola generale ".site-header__menu a" (mobile) aggiunge un
bordo superiore a OGNI link, incluse le voci di sottomenu: qui lo
annulliamo esplicitamente per non sommare un bordo a ogni riga
del sottomenu oltre al rientro. */
border-top: none;
/* Esplicito (oltre alla regola desktop già valida anche qui): il
testo del sottomenu deve usare lo stesso colore "Testo sottomenu"
del desktop, non il colore generico del menu mobile. */
color: var(--menu-dropdown-text, var(--color-secondary));
}
.site-header__menu ul ul li:first-child a {
padding-top: 6px;
}
/* Riga voce di menu = link + freccetta sulla stessa linea, con il
sottomenu che va comunque a capo sotto (su tutta la larghezza)
quando aperto. Prima il
non era un contenitore flessibile: il
link, essendo "display: block" qui sotto, occupava già da solo
l'intera riga e spingeva la freccetta ".submenu-toggle" (elemento
successivo nello stesso
) a capo su una riga propria, spaginando
il menu. */
.site-header__menu li {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.site-header__menu li > a {
flex: 1 1 auto;
min-width: 0;
}
.site-header__menu li > .submenu-toggle {
flex: 0 0 auto;
}
.site-header__menu li > ul {
flex: 1 1 100%;
width: 100%;
}
/* Il bordo divisorio tra le voci passa dal link (che ora non occupa più
da solo l'intera riga) al
, così resta largo quanto tutta la
riga indipendentemente dal layout flessibile qui sopra. */
.site-header__menu > ul > li {
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.site-header__menu ul ul li {
border-top: none;
}
/* Evidenzia la voce attiva nel pannello menu mobile. */
.site-header__menu li.current > a {
background-color: var(--mobile-menu-active-bg, transparent);
}
.site-header__menu li.submenu-open > ul {
display: flex;
}
.site-header__menu li:hover > ul {
display: none;
}
.site-header__menu li.submenu-open:hover > ul {
display: flex;
}
.submenu-toggle {
display: flex;
}
}
.site-header__search {
flex: 0 0 auto;
}
/* Il pulsante hamburger integrato di Joomla (layout Collapsible) non serve:
usiamo il nostro. */
.site-header__menu .navbar-toggler {
display: none !important;
}
/* ---- Icone social ---- */
.social-icons {
display: flex;
gap: 10px;
}
.social-icons__item {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
color: inherit;
font-size: 0.68em;
font-weight: 700;
text-decoration: none;
}
.social-icons__item:hover {
background: rgba(255, 255, 255, 0.3);
text-decoration: none;
}
/* ---- Breaking news ---- */
.breaking-news {
background-color: var(--color-secondary);
color: #fff;
}
.breaking-news__inner {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 20px;
}
.breaking-news__label {
flex: 0 0 auto;
background-color: var(--color-primary);
color: #fff;
padding: 4px 10px;
border-radius: 3px;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: var(--label-letter-spacing, 0.05em);
}
.breaking-news__content {
flex: 1 1 auto;
overflow: hidden;
white-space: nowrap;
}
.breaking-news a {
color: #fff;
}
/* ---- Hero ---- */
.hero {
/* Solo sotto: lo spazio sopra va rimosso perché con l'header trasparente
(mod_menustyle, modalità overlay) l'immagine hero deve arrivare fino
in cima alla pagina, dietro l'header, senza lasciare una striscia
vuota tra i due. */
padding: 0 0 40px;
background-color: rgba(0, 0, 0, 0.02);
}
/* "Immagine a tutto schermo senza margini" nella riga Hero: quando sono
attivi insieme "Larghezza piena" e "Rimuovi spaziatura laterale" (in
Aspetto → Larghezze Avanzate dei Blocchi → Hero), il contenitore diventa
già edge-to-edge (container-fluid + niente padding laterale) — ma
un'eventuale immagine inserita come contenuto del modulo (page builder)
restava comunque alla sua dimensione naturale invece di riempire quello
spazio. Qui la facciamo espandere per riempire tutta la larghezza
disponibile quando entrambe le opzioni sono attive. */
.hero > .container-fluid.container--no-padding img {
display: block;
width: 100%;
height: auto;
}
/* Stessa idea quando è attiva solo "Larghezza piena" (senza rimuovere il
padding laterale): l'immagine riempie comunque tutta la larghezza del
contenitore fluido, semplicemente rispettando i 20px di margine laterale
che ".container-fluid" mantiene di suo. */
.hero > .container-fluid img {
display: block;
width: 100%;
height: auto;
}
/* ---- Layout principale (contenuto + sidebar) ---- */
.main-layout {
display: grid;
gap: 40px;
padding: 40px 20px;
grid-template-columns: 1fr;
/* Esposto come variabile (invece di un "40px" ripetuto altrove) così
l'opzione "Attaccata al menu" della hero articolo qui sotto può
annullare esattamente questo stesso spazio con un margine negativo,
anche se in futuro questo padding dovesse cambiare. */
--rvs-main-top-gap: 40px;
}
body.site-sidebar-left .main-layout {
grid-template-columns: 300px 1fr;
}
body.site-sidebar-right .main-layout {
grid-template-columns: 1fr 300px;
}
body.site-sidebar-both .main-layout {
grid-template-columns: 260px 1fr 260px;
}
.content {
min-width: 0;
}
.sidebar {
min-width: 0;
}
/* ---- Card (sidebar modules) ---- */
.card-module {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
padding: 20px;
margin-bottom: 24px;
}
.card-module__title {
font-size: 1.1em;
margin-bottom: 0.8em;
padding-bottom: 0.5em;
border-bottom: 2px solid var(--color-primary);
}
/* ---- Footer ---- */
.site-footer {
background-color: var(--color-secondary);
color: rgba(255, 255, 255, 0.85);
margin-top: 60px;
}
.footer-columns {
padding: 40px 20px;
}
.footer-columns .module-block {
margin: 0;
}
.site-footer a {
color: #fff;
}
.site-footer__copyright {
padding: 16px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
font-size: 0.85em;
text-align: center;
}
/* ---- Vista singolo articolo (override com_content/article/default.php) E
intestazione categoria/blog (override com_content/category/blog.php,
opzione "Hero Categoria"): stesso identico componente visivo, riusato
su entrambe le viste con selettori condivisi (".article-hero*,
.category-hero*") così restano sempre in sincrono — cambi qui si
applicano automaticamente a tutte e due. ---- */
.article-hero,
.category-hero {
margin-bottom: 50px;
}
.article-hero__header,
.category-hero__header {
position: relative;
overflow: hidden;
background-color: var(--color-secondary);
padding: 90px 0 60px;
color: #fff;
}
/* Opzione "A tutto schermo (nessun margine laterale)": la hero vive dentro
il contenitore centrato del sito (.main-layout, larghezza massima
impostata in Layout → Larghezza contenitore), quindi normalmente non
può mai arrivare davvero a bordo schermo. Questa è la tecnica CSS
standard per farla "sfondare" quel contenitore: la allarga a tutta la
larghezza della finestra e la ricentra, indipendentemente da quanto è
stretto il contenitore attorno. Il testo/titolo resta comunque
leggibile perché l'elemento "__inner" al suo interno mantiene la
propria larghezza massima. */
.article-hero--full-bleed .article-hero__header,
.category-hero--full-bleed .category-hero__header {
width: 100vw;
max-width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}
/* Opzione "Attaccata al menu (nessuno spazio sopra)": lo spazio vuoto che
normalmente resta sopra la hero non è suo — è il padding superiore di
".main-layout" (il contenitore di tutta l'area contenuto + sidebar). Qui
lo si annulla con un margine negativo di pari misura, così la hero
risale fino a toccare l'header/menu, esattamente come fa già la Hero
del page builder (che vive fuori da quel contenitore). */
.article-hero--attach-header,
.category-hero--attach-header {
margin-top: calc(-1 * var(--rvs-main-top-gap, 40px));
}
/* Opzione "Altezza della hero": quando impostata su fissa/percentuale
schermo/tutto schermo, l'intestazione diventa un contenitore flessibile
alto quanto richiesto, con il testo ancorato in basso; in modalità
"Automatica" (nessuna di queste classi) resta come prima, dimensionata
solo dal padding verticale. */
.article-hero__header--sized,
.category-hero__header--sized {
display: flex;
align-items: flex-end;
min-height: var(--hero-min-height, auto);
}
/* Livello immagine: separato dal testo così la sua opacità (opzione
"Opacità immagine") non sbiadisce anche il titolo/i metadati sopra. */
.article-hero.has-image .article-hero__header::before,
.category-hero.has-image .category-hero__header::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--hero-bg-image);
background-size: cover;
background-position: center;
opacity: var(--hero-image-opacity, 1);
}
/* Velo scuro sopra l'immagine (opzione "Intensità overlay scuro"), per
mantenere leggibile il testo bianco indipendentemente dall'opacità
scelta per l'immagine. */
.article-hero.has-image .article-hero__header::after,
.category-hero.has-image .category-hero__header::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.75) 100%);
opacity: var(--hero-overlay-opacity, 1);
}
.article-hero__inner,
.category-hero__inner {
position: relative;
z-index: 1;
max-width: 800px;
width: 100%;
}
.article-hero__eyebrow,
.category-hero__eyebrow {
display: inline-block;
margin-bottom: 18px;
font-size: 0.85em;
text-transform: uppercase;
letter-spacing: var(--label-letter-spacing, 0.08em);
font-weight: 700;
color: #fff;
background-color: var(--color-primary);
padding: 5px 14px;
border-radius: 3px;
}
.article-hero__eyebrow a,
.category-hero__eyebrow a {
color: inherit;
}
.article-hero__title,
.category-hero__title {
color: #fff;
font-size: 2.6em;
margin-bottom: 0.5em;
}
.article-hero__meta,
.category-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
font-size: 0.9em;
color: rgba(255, 255, 255, 0.8);
}
.article-hero__meta span:not(:last-child)::after,
.category-hero__meta span:not(:last-child)::after {
content: '\2022';
margin-left: 20px;
opacity: 0.6;
}
/* La descrizione della categoria dentro la hero (quando mostrata) deve
leggersi come il resto del testo bianco sovrapposto all'immagine. */
.category-hero__desc {
color: rgba(255, 255, 255, 0.9);
margin-top: 1em;
max-width: 65ch;
}
.category-hero__desc :is(a) {
color: #fff;
text-decoration: underline;
}
.article-body-wrap {
max-width: var(--article-body-width, 760px);
margin: 0 auto;
padding: 50px 20px;
}
/* Testo della descrizione categoria (html/com_content/category/blog.php):
stessa tipografia del corpo articolo (.article-body), così il testo
"giornalistico" ha lo stesso aspetto ovunque appaia sul sito, invece di
affidarsi ai default nudi del browser. */
.category-desc {
font-size: 1.1em;
line-height: var(--body-line-height, 1.8);
color: var(--color-text);
margin-bottom: 40px;
}
.category-desc p {
margin-bottom: 1.4em;
}
.category-desc p:last-child {
margin-bottom: 0;
}
.article-body {
font-size: 1.1em;
line-height: var(--body-line-height, 1.8);
color: var(--color-text);
text-align: var(--article-text-align, left);
}
.article-body p {
margin-bottom: 1.4em;
font-family: var(--p-font, var(--font-body));
font-size: var(--p-size, 1em);
font-weight: var(--p-weight, 400);
color: var(--p-color, var(--color-text));
}
/* Capolettera decorativa sul primo paragrafo: un piccolo tocco da rivista. */
.article-body > p:first-of-type::first-letter {
font-family: var(--font-heading);
font-size: 3.6em;
line-height: 0.8;
float: left;
padding-right: 12px;
padding-top: 4px;
color: var(--color-primary);
}
.article-body img {
/* Prima mancava del tutto: un'immagine inserita dall'editor con una
larghezza fissa (es. width="800" nell'HTML, comune quando si carica
una foto ad alta risoluzione) sfondava il contenitore su schermi più
stretti di quella misura invece di restringersi. max-width:100% la
vincola sempre alla larghezza disponibile, height:auto mantiene le
proporzioni originali invece di deformarla. */
max-width: 100%;
height: auto;
border-radius: 6px;
margin: 1.6em 0;
}
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
margin-top: 1.6em;
}
/* Tipografia delle intestazioni dentro il testo dell'articolo (quelle che
l'autore inserisce nell'editor): famiglia, dimensione, peso e colore per
ciascun livello, impostabili dal tab "Tipografia" del template. I valori
di fallback (2em, 1.5em, 1.17em, 1em, peso 700) riproducono le dimensioni
predefinite del browser, già in uso prima di questa opzione: lasciando
tutto vuoto l'aspetto non cambia. Volutamente limitato a .article-body,
così non tocca titoli di card, hero o altri H1/H2 del resto del sito. */
.article-body h1 {
font-family: var(--h1-font, var(--font-heading));
font-size: var(--h1-size, 2em);
font-weight: var(--h1-weight, 700);
color: var(--h1-color, var(--color-secondary));
}
.article-body h2 {
font-family: var(--h2-font, var(--font-heading));
font-size: var(--h2-size, 1.5em);
font-weight: var(--h2-weight, 700);
color: var(--h2-color, var(--color-secondary));
}
.article-body h3 {
font-family: var(--h3-font, var(--font-heading));
font-size: var(--h3-size, 1.17em);
font-weight: var(--h3-weight, 700);
color: var(--h3-color, var(--color-secondary));
}
.article-body h4 {
font-family: var(--h4-font, var(--font-heading));
font-size: var(--h4-size, 1em);
font-weight: var(--h4-weight, 700);
color: var(--h4-color, var(--color-secondary));
}
.article-tags {
margin-top: 44px;
padding-top: 24px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.share-buttons {
display: flex;
align-items: center;
gap: 12px;
margin-top: 30px;
}
.share-buttons__label {
font-size: 0.85em;
font-weight: 700;
color: var(--color-secondary);
text-transform: uppercase;
letter-spacing: var(--label-letter-spacing, 0.05em);
}
.share-buttons__item {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--color-secondary);
color: #fff;
font-size: 0.8em;
font-weight: 700;
text-decoration: none;
transition: transform 0.15s ease, background-color 0.15s ease;
}
.share-buttons__item:hover {
transform: translateY(-2px);
text-decoration: none;
color: #fff;
}
.share-buttons__item--facebook:hover { background-color: #1877F2; }
.share-buttons__item--x:hover { background-color: #000000; }
.share-buttons__item--whatsapp:hover { background-color: #25D366; }
.share-buttons__item--linkedin:hover { background-color: #0A66C2; }
.share-buttons__item--email:hover { background-color: var(--color-primary); }
.article-back {
margin-top: 30px;
font-weight: 600;
}
@media (max-width: 700px) {
.article-hero__header,
.category-hero__header {
padding: 60px 0 40px;
}
.article-hero__title,
.category-hero__title {
font-size: 1.8em;
}
}
/* ---- Pagine di errore / offline ---- */
.error-page,
.offline-page {
padding: 80px 20px;
text-align: center;
}
.error-page__code {
font-size: 4em;
color: var(--color-primary);
}
.offline-page__login {
max-width: 320px;
margin: 30px auto 0;
text-align: left;
}
/* ---- Contenuti articoli (markup generato da com_content, non sovrascritto) ---- */
.item-page img,
.category-list img {
border-radius: 4px;
}
.page-header {
margin-bottom: 1.2em;
}
/* Joomla marca sempre i link dei tag con rel="tag": qui li ripristiniamo
come piccole "pillole" discrete, invece di farli apparire come i grandi
pulsanti CTA del sito (che usano la stessa classe .btn di base). */
a[rel="tag"] {
display: inline-block;
background: rgba(0, 0, 0, 0.06);
color: var(--color-secondary);
padding: 3px 12px;
border-radius: 20px;
font-size: 0.78em;
font-weight: 600;
margin: 2px 6px 2px 0;
}
a[rel="tag"]:hover {
background: rgba(0, 0, 0, 0.1);
text-decoration: none;
}
/* ---- Griglia articoli (blog.php): numero di colonne dal pannello admin ---- */
.articles-grid {
display: grid;
gap: var(--card-article-gap, 40px);
margin-bottom: 40px;
}
.articles-grid--1 {
grid-template-columns: 1fr;
}
.articles-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
.articles-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.articles-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
.article-cell {
min-width: 0;
}
@media (max-width: 900px) {
.articles-grid--2,
.articles-grid--3,
.articles-grid--4 {
grid-template-columns: 1fr;
}
}
/* ---- Articolo in stile editoriale (override blog_item.php) ---- */
.featured-article {
display: flex;
align-items: stretch;
gap: var(--card-gap-image-text, 50px);
margin-bottom: var(--card-article-gap, 60px);
padding-bottom: var(--card-article-gap, 60px);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.featured-article:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
/* Con 2 o più colonne l'articolo passa da "riga larga" a "card impilata":
immagine sopra, testo sotto, più compatto. Nessuna logica PHP necessaria:
basta guardare quante colonne ha la griglia che lo contiene. */
.articles-grid--2 .featured-article,
.articles-grid--3 .featured-article,
.articles-grid--4 .featured-article {
flex-direction: column;
gap: 20px;
height: 100%;
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.articles-grid--2 .featured-article__media,
.articles-grid--3 .featured-article__media,
.articles-grid--4 .featured-article__media {
flex: 0 0 auto;
}
.articles-grid--2 .featured-article__media img,
.articles-grid--3 .featured-article__media img,
.articles-grid--4 .featured-article__media img {
max-height: 220px;
}
.articles-grid--2 .featured-article__body,
.articles-grid--3 .featured-article__body,
.articles-grid--4 .featured-article__body {
justify-content: flex-start;
}
.articles-grid--2 .featured-article__title,
.articles-grid--3 .featured-article__title,
.articles-grid--4 .featured-article__title {
font-size: 1.3em;
}
.articles-grid--3 .featured-article__title,
.articles-grid--4 .featured-article__title {
font-size: 1.15em;
}
.featured-article__media {
flex: 0 0 var(--card-image-width, 45%);
overflow: hidden;
border-radius: 6px;
}
.featured-article__media img {
width: 100%;
height: 100%;
max-height: 420px;
object-fit: cover;
border-radius: 6px;
transition: transform 0.4s ease, filter 0.4s ease;
}
/* Posizione immagine: a sinistra (predefinita), a destra o sopra il testo. */
.featured-article--img-right {
flex-direction: row-reverse;
}
.featured-article--img-top {
flex-direction: column;
}
.featured-article--img-top .featured-article__media {
flex: 0 0 auto;
width: 100%;
}
/* Proporzioni immagine: "automatica" mantiene l'altezza massima fissa di
sempre; le altre forzano un rapporto larghezza/altezza con aspect-ratio. */
.featured-article--ratio-square .featured-article__media img,
.featured-article--ratio-widescreen .featured-article__media img,
.featured-article--ratio-portrait .featured-article__media img {
height: auto;
max-height: none;
}
.featured-article--ratio-square .featured-article__media img {
aspect-ratio: 1 / 1;
}
.featured-article--ratio-widescreen .featured-article__media img {
aspect-ratio: 16 / 9;
}
.featured-article--ratio-portrait .featured-article__media img {
aspect-ratio: 3 / 4;
}
/* Effetto al passaggio del mouse sull'immagine. */
.featured-article--hover-zoom .featured-article__media:hover img {
transform: scale(1.06);
}
.featured-article--hover-grayscale .featured-article__media img {
filter: grayscale(100%);
}
.featured-article--hover-grayscale .featured-article__media:hover img {
filter: grayscale(0%);
}
.featured-article--hover-brighten .featured-article__media img {
filter: brightness(0.82);
}
.featured-article--hover-brighten .featured-article__media:hover img {
filter: brightness(1);
}
.featured-article__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.featured-article__eyebrow {
display: block;
font-size: 0.85em;
font-style: italic;
color: var(--color-primary);
margin-bottom: 12px;
}
.featured-article__eyebrow a {
color: inherit;
}
.featured-article__title {
font-size: 2em;
margin-bottom: var(--card-gap-title-next, 0.5em);
}
.featured-article__title a {
color: var(--color-secondary);
}
.featured-article__title a:hover {
text-decoration: none;
color: var(--color-primary);
}
.featured-article__meta {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
font-size: 0.85em;
color: #777;
margin-bottom: var(--card-gap-meta-text, 1em);
}
.featured-article__meta span:not(:last-child)::after {
content: '\2022';
margin-left: 16px;
opacity: 0.5;
}
.featured-article__meta--icons span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.featured-article__meta-icon {
flex-shrink: 0;
color: var(--color-primary);
opacity: 0.85;
}
.featured-article__text {
color: #555;
margin-bottom: var(--card-gap-text-button, 1.6em);
}
.featured-article__text p:last-child {
margin-bottom: 0;
}
.featured-article--text-justify .featured-article__text {
text-align: justify;
/* Evita che l'ultima riga di un paragrafo giustificato (spesso corta,
es. "...sacri." seguita dai puntini di troncamento) venga allargata
in modo innaturale: hyphens:auto aiuta inoltre a spezzare meglio le
parole lunghe quando il testo è giustificato su colonne strette. */
text-align-last: left;
hyphens: auto;
}
.featured-article__cta {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
background-color: var(--color-secondary);
color: #fff;
padding: 14px 26px;
text-transform: uppercase;
font-size: 0.8em;
font-weight: 700;
letter-spacing: var(--label-letter-spacing, 0.06em);
border-radius: 3px;
/* Ancora il pulsante al fondo della card: .featured-article__body è già
un flex column (vedi sopra), quindi "spingere" questo elemento con un
margine automatico lo mette sempre sull'ultima riga disponibile,
indipendentemente da quanto testo precede — così "Leggi tutto" risulta
sempre allineato tra card affiancate anche quando gli estratti hanno
lunghezze leggermente diverse, invece di "ballare" riga per riga. */
margin-top: auto;
}
.featured-article__cta:hover {
background-color: var(--button-hover-color, var(--color-primary));
color: #fff;
text-decoration: none;
}
/* Posizione del pulsante "Leggi Tutto": "inline" (predefinita) non ha
bisogno di nessuna regola extra, è il comportamento di sempre. */
.featured-article--cta-right .featured-article__cta {
align-self: flex-end;
}
.featured-article--cta-full .featured-article__cta {
align-self: stretch;
justify-content: center;
text-align: center;
}
@media (max-width: 700px) {
.featured-article {
flex-direction: column;
gap: 24px;
}
.featured-article__media {
flex: 0 0 auto;
width: 100%;
}
.featured-article__media img {
max-height: 280px;
}
}
/* ---- Header topbar (header-2a/b/c) ---- */
.header-topbar {
background-color: var(--color-secondary);
color: rgba(255, 255, 255, 0.85);
font-size: 0.85em;
}
.header-topbar a {
color: #fff;
}
.inline-block {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 6px 20px;
align-items: center;
justify-content: space-between;
}
.inline-block__item {
flex: 0 0 auto;
}
/* ---- Menu hamburger ---- */
.menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 0;
background: none;
border: none;
cursor: pointer;
}
.menu-toggle__bar {
display: block;
width: 26px;
height: 3px;
border-radius: 2px;
/* Falls back to the same color as the menu text/logo (mod_menustyle's
"Colore testo menu e logo") unless a dedicated hamburger color is set
("Colore hamburger" fields), so by default everything stays in sync
but can be overridden independently. */
background-color: var(--hamburger-color, var(--menu-link-color, var(--color-secondary)));
transition: transform 0.2s ease, opacity 0.2s ease, background-color var(--rvs-header-transition-ms, 250ms) ease;
}
.menu-toggle.is-active .menu-toggle__bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.menu-toggle.is-active .menu-toggle__bar:nth-child(2) {
opacity: 0;
}
.menu-toggle.is-active .menu-toggle__bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* ---- Varianti icona hamburger (mod_menustyle: "Icona hamburger") ---- */
body.rvs-hamburger-dots .menu-toggle__bar {
width: 6px;
height: 6px;
border-radius: 50%;
}
body.rvs-hamburger-dots-h .menu-toggle {
flex-direction: row;
}
body.rvs-hamburger-dots-h .menu-toggle__bar {
width: 6px;
height: 6px;
border-radius: 50%;
}
/* La "X" di apertura non ha senso per i puntini: restano fermi, si limita
ad aprire/chiudere il menu (nessuna animazione di trasformazione). */
body.rvs-hamburger-dots .menu-toggle.is-active .menu-toggle__bar,
body.rvs-hamburger-dots-h .menu-toggle.is-active .menu-toggle__bar {
transform: none;
opacity: 1;
}
body.rvs-hamburger-dots .menu-toggle.is-active .menu-toggle__bar:nth-child(2),
body.rvs-hamburger-dots-h .menu-toggle.is-active .menu-toggle__bar:nth-child(2) {
opacity: 0.4;
}
.menu-toggle__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* ---- Righe multi-colonna (module-block: top-1, top-2, bottom-1, bottom-2) ---- */
.module-block {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin: 30px 0;
}
.module-block__col {
flex: 1 1 220px;
min-width: 0;
}
/* ---- Footer (menu footer) ---- */
.site-footer__menu {
padding: 0 20px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
padding-top: 16px;
}
.site-footer__menu ul {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 0;
padding: 0;
justify-content: center;
}
/* ---- Responsive ---- */
@media (max-width: 900px) {
body.site-sidebar-left .main-layout,
body.site-sidebar-right .main-layout,
body.site-sidebar-both .main-layout {
grid-template-columns: 1fr;
}
.site-header__inner {
flex-wrap: wrap;
}
.menu-toggle {
display: flex;
order: 2;
}
.site-header__logo {
order: 1;
}
.site-header__search {
order: 3;
}
.site-header__menu {
display: none;
width: 100%;
order: 4;
background-color: var(--mobile-menu-bg, #FFFFFF);
}
.site-header__menu.is-open {
display: block;
}
.site-header__menu ul {
flex-direction: column;
gap: 0;
}
.site-header__menu a {
display: block;
padding: 12px 0;
/* Il bordo divisorio ora è sul
(vedi ".site-header__menu > ul >
li" sopra), non più qui: da quando il
è un contenitore
flessibile (link + freccetta sulla stessa riga), un bordo messo
sul link da solo coprirebbe solo la sua parte di riga invece di
tutta la larghezza. */
color: var(--mobile-menu-text, var(--color-secondary));
}
}
/* =======================================================================
Impaginazione categoria/blog (com_content, vista "blog")
Joomla stampa sempre lo stesso markup in stile Bootstrap
(