...
...
...
...
...
------------------------------------------------------------ */
.box-shadow .cont-art-element,
.box-shadow .product {
background-color: var(--bg-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: var(--space-8);
transition: box-shadow var(--transition-base);
}
.box-shadow .cont-art-element:hover,
.box-shadow .product:hover {
box-shadow: var(--shadow-lg);
}
/* ------------------------------------------------------------
STILE 4, 5, ... — aggiungere qui i prossimi stili.
------------------------------------------------------------ */
/* ============================================================
COMPONENTE: Contenitore articoli (section_cont_art)
============================================================ */
.section_cont_art {
padding-block: var(--space-16);
}
.striscia-titolo-ist {
text-align: center;
margin-bottom: var(--space-12);
}
.striscia-titolo-ist .istanza_titolo {
line-height: var(--line-height-heading);
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.striscia-titolo-ist .istanza_sottotitolo {
color: var(--text-secondary);
}
.striscia-titolo-ist .istanza_titolo span,
.striscia-titolo-ist .istanza_sottotitolo span {
display: inline;
font: inherit;
color: inherit;
}
/* ------------------------------------------------------------
READMORE-LINK IN CONTENITORE ARTICOLI
Il CMS aggiunge cta-link-* su tutti i readmore-link
(immagine, titolo, testo, bottone readmore).
Strategia in tre livelli:
1. Neutralizza cta-link-* su TUTTI i readmore-link in in_cont_art
2. Rimuove la freccia → del readmore-link base
3. Riapplica stile bottone SOLO su .item-box.readmore
------------------------------------------------------------ */
/* 1. Neutralizza tutto */
.in_cont_art .readmore-link.cta-link-dark,
.in_cont_art .readmore-link.cta-link-light {
display: inline;
padding: 0;
border: none;
border-radius: 0;
background-color: transparent;
color: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
white-space: normal;
}
.in_cont_art .readmore-link.cta-link-dark:hover,
.in_cont_art .readmore-link.cta-link-light:hover {
background-color: transparent;
border-color: transparent;
color: var(--interactive-text);
text-decoration: none;
}
/* 2. Rimuove freccia → generata da .readmore .readmore-link */
/* .in_cont_art .readmore-link::after {
content: none;
} */
/* 3. Riapplica stile bottone FILLED solo su .item-box.readmore .cta-link-dark */
.in_cont_art .item-box.readmore .readmore-link.cta-link-dark {
display: inline-flex;
padding: var(--space-3) var(--space-6);
border: 1px solid var(--interactive-primary);
border-radius: var(--radius-sm);
background-color: var(--interactive-primary);
color: var(--primitive-white);
font-size: var(--font-size-body-small);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-nav);
line-height: 1;
white-space: nowrap;
margin-top: var(--space-4);
transition: background-color var(--transition-fast),
border-color var(--transition-fast);
}
.in_cont_art .item-box.readmore .readmore-link.cta-link-dark:hover {
background-color: var(--interactive-primary-hover);
border-color: var(--interactive-primary-hover);
color: var(--primitive-white);
}
/* 3b. Riapplica stile bottone OUTLINED solo su .item-box.readmore .cta-link-light */
.in_cont_art .item-box.readmore .readmore-link.cta-link-light {
display: inline-flex;
padding: var(--space-3) var(--space-6);
border: 1px solid var(--interactive-primary);
border-radius: var(--radius-sm);
background-color: transparent;
color: var(--interactive-primary);
font-size: var(--font-size-body-small);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-nav);
line-height: 1;
white-space: nowrap;
margin-top: var(--space-4);
transition: background-color var(--transition-fast),
color var(--transition-fast);
}
.in_cont_art .item-box.readmore .readmore-link.cta-link-light:hover {
background-color: var(--interactive-primary);
color: var(--primitive-white);
}
/* ------------------------------------------------------------
BTN-MORE — bottone "vedi tutti" del contenitore articoli
Supporta varianti dark (filled) e light (outlined)
tramite classe aggiuntiva sul contenitore o sul link:
→ filled di default
→ filled esplicito
→ outlined
------------------------------------------------------------ */
.btn-more {
text-align: center;
margin-top: var(--space-8);
}
/* Base comune */
.btn-more a {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-family-base);
font-size: var(--font-size-body-small);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-nav);
line-height: 1;
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-sm);
border: 1px solid var(--interactive-primary);
text-decoration: none;
white-space: nowrap;
transition: background-color var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast);
}
/* Default e .cta-link-dark → filled */
.btn-more a,
.btn-more.cta-link-dark a {
background-color: var(--interactive-primary);
color: var(--primitive-white);
}
.btn-more a:hover,
.btn-more.cta-link-dark a:hover {
background-color: var(--interactive-primary-hover);
border-color: var(--interactive-primary-hover);
color: var(--primitive-white);
text-decoration: none;
}
/* .cta-link-light → outlined */
.btn-more.cta-link-light a {
background-color: transparent;
color: var(--interactive-primary);
}
.btn-more.cta-link-light a:hover {
background-color: var(--interactive-primary);
color: var(--primitive-white);
text-decoration: none;
}
/* ------------------------------------------------------------
ARTICOLO IN CONTENITORE — sovrascrive proporzioni standalone
------------------------------------------------------------ */
.in_cont_art article.vis-articolo {
padding: 0;
}
.in_cont_art article.vis-articolo.stile1 {
display: flex;
flex-direction: row;
gap: var(--gap-md);
padding: var(--space-2) 0;
}
.in_cont_art article.vis-articolo.stile1 .item-box.first-img-articolo {
flex: 0 0 30%;
}
.in_cont_art article.vis-articolo.stile1 .item-box-content {
flex: 1 1 0;
min-width: 0;
}
.in_cont_art article.vis-articolo .item-box.pub_date {
display: none;
}
.in_cont_art article.vis-articolo .item-box.art_title a,
.in_cont_art article.vis-articolo .item-box.art_subtitle a {
color: var(--text-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
.in_cont_art article.vis-articolo .item-box.art_title a:hover,
.in_cont_art article.vis-articolo .item-box.art_subtitle a:hover {
color: var(--interactive-text);
}
/* Tablet — 992px = --bp-lg */
@media (max-width: 992px) {
.in_cont_art article.vis-articolo.stile1 { gap: var(--gap-sm); }
.in_cont_art article.vis-articolo.stile1 .item-box.first-img-articolo { flex-basis: 35%; }
}
/* Mobile — 768px = --bp-md */
@media (max-width: 768px) {
.in_cont_art article.vis-articolo.stile1 { flex-direction: column; }
.in_cont_art article.vis-articolo.stile1 .item-box.first-img-articolo {
flex-basis: 100%;
order: unset;
}
.in_cont_art article.vis-articolo.stile1 .item-box-content {
flex-basis: 100%;
}
}
/* ------------------------------------------------------------
MODIFICATORE TITOLI SMALL
------------------------------------------------------------ */
article.titoli-sm h1 { font-size: var(--font-size-h2); line-height: var(--line-height-heading); }
article.titoli-sm h2 { font-size: var(--font-size-h3); font-weight: var(--font-weight-regular); }
article.titoli-sm h3 { font-size: var(--font-size-body); font-weight: var(--font-weight-regular); }
/* ============================================================
COMPONENTE: Lista prodotti (prod-list)
============================================================ */
.prod-list:not(.pagina_categoria) {
padding-block: var(--space-16);
}
.prod-list .cont-prodotto {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
height: 100%;
}
.prod-list .fotoProdotto {
display: block;
width: 100%;
margin-bottom: var(--space-6);
}
.prod-list .fotoProdotto a {
display: block;
text-decoration: none;
}
.prod-list .fotoProdotto figure {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
.prod-list .fotoProdotto img {
max-width: 100%;
max-height: 220px;
width: auto;
height: auto;
object-fit: contain;
transition: transform var(--transition-base);
}
.prod-list .fotoProdotto a:hover img {
transform: scale(1.03);
}
.prod-list .cont-prodotto-text {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
width: 100%;
}
.prod-list .nome-prod {
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
margin-bottom: 0;
}
.prod-list .nome-prod a {
color: var(--text-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
.prod-list .nome-prod a:hover { color: var(--interactive-text); }
.prod-list .descr-breve-prod {
font-size: var(--font-size-body-small);
font-weight: var(--font-weight-regular);
color: var(--text-secondary);
margin-bottom: 0;
}
.prod-list .descr-breve-prod a {
color: var(--text-secondary);
text-decoration: none;
}
.prod-list .descr-breve-prod a:hover { color: var(--interactive-text); }
.prod-list .bt-det-prod { margin-top: var(--space-4); }
.prod-list .cont-prodotto-text .clear { display: none; }
.count_products {
border-bottom: solid 1px var(--primitive-border);
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
}
/* ============================================================
COMPONENTE: Megamenu
Si attiva su voci con me_params['in_evidenza']==1
passando megamenu=1 alla funzione {menu}.
RICHIEDE JS:
(function() {
function posizionaMegamenu(panel) {
var header = document.querySelector('.fixed-header');
if (header) panel.style.top = header.offsetHeight + 'px';
}
document.querySelectorAll('.megamenu-trigger > .nav-link').forEach(function(toggle) {
toggle.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
var panel = this.closest('.megamenu-trigger').querySelector('.megamenu-panel');
if (!panel) return;
var isOpen = panel.classList.contains('open');
document.querySelectorAll('.megamenu-panel.open').forEach(function(p) {
p.classList.remove('open');
});
if (!isOpen) { panel.classList.add('open'); posizionaMegamenu(panel); }
});
});
document.addEventListener('click', function() {
document.querySelectorAll('.megamenu-panel.open').forEach(function(p) {
p.classList.remove('open');
});
});
document.querySelectorAll('.megamenu-panel').forEach(function(panel) {
panel.addEventListener('click', function(e) { e.stopPropagation(); });
});
document.querySelectorAll('.megamenu-cat').forEach(function(cat) {
cat.addEventListener('mouseenter', function() {
var target = this.dataset.target;
if (!target) return;
var panel = this.closest('.megamenu-panel');
panel.querySelectorAll('.megamenu-cat').forEach(function(c) { c.classList.remove('active'); });
this.classList.add('active');
panel.querySelectorAll('.megamenu-sub').forEach(function(s) { s.classList.remove('active'); });
var sub = panel.querySelector('.megamenu-sub[data-sub="' + target + '"]');
if (sub) sub.classList.add('active');
});
});
document.querySelectorAll('.megamenu-cat[data-target] > a').forEach(function(link) {
link.addEventListener('click', function(e) {
var cat = this.closest('.megamenu-cat');
if (!cat.classList.contains('active')) {
e.preventDefault();
var panel = this.closest('.megamenu-panel');
panel.querySelectorAll('.megamenu-cat').forEach(function(c) { c.classList.remove('active'); });
cat.classList.add('active');
panel.querySelectorAll('.megamenu-sub').forEach(function(s) { s.classList.remove('active'); });
var sub = panel.querySelector('.megamenu-sub[data-sub="' + cat.dataset.target + '"]');
if (sub) sub.classList.add('active');
}
});
});
})();
============================================================ */
.megamenu-panel {
position: fixed;
left: 0;
right: 0;
width: 100%;
background-color: var(--bg-header-nav);
border-top: 1px solid var(--border-header);
box-shadow: var(--shadow-lg);
padding: var(--space-8) 0;
}
.megamenu-panel.open {
display: flex;
flex-direction: row;
/* Centra con padding calcolato invece di max-width */
padding-inline: max(var(--space-6), calc((100vw - var(--container-max-width)) / 2));
gap: 0;
}
.megamenu-trigger .megamenu-panel { display: none; }
.megamenu-trigger .megamenu-panel.open { display: flex; }
.megamenu-trigger > .nav-link::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
}
.megamenu-trigger.show .megamenu-panel:not(.open) { display: none !important; }
.megamenu-trigger > .dropdown-menu { display: none !important; }
.megamenu-col {
flex: 1 1 25%;
padding-inline: var(--space-8);
border-right: 1px solid var(--border-header);
}
.megamenu-col:last-child { border-right: none; }
.megamenu-label {
font-size: var(--font-size-abstract);
font-weight: var(--font-weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-header-muted);
margin-bottom: var(--space-4);
}
.megamenu-col-categories ul { list-style: none; padding: 0; margin: 0; }
.megamenu-col-categories li { margin-bottom: var(--space-1); }
.megamenu-col-categories .megamenu-cat > a {
display: block;
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
color: var(--text-header);
padding-block: var(--space-1);
text-decoration: none;
transition: color var(--transition-fast);
cursor: pointer;
}
.megamenu-col-categories .megamenu-cat:hover > a,
.megamenu-col-categories .megamenu-cat.active > a {
color: var(--text-header);
font-weight: var(--font-weight-medium);
}
.megamenu-col-categories .megamenu-cat:hover > a, .megamenu-col-categories .megamenu-cat.active > a, .megamenu-col-sub a:hover, .megamenu-col-sub2 a:hover {
box-shadow: inset 2px 0 0 var(--text-accent);
}
.megamenu-col-categories .megamenu-cat > a {
color: var(--text-header-light);
}
.megamenu-col-categories .megamenu-cat.current_menu a {
color: var(--text-menu-current);
}
.megamenu-col-sub { position: relative; }
.megamenu-sub { display: none; }
.megamenu-sub.active { display: block; }
.megamenu-col-sub ul { list-style: none; padding: 0; margin: 0; }
.megamenu-col-sub li { margin-bottom: var(--space-1); }
.megamenu-col-sub a {
display: block;
font-size: var(--font-size-body-small);
color: var(--text-header);
padding-block: var(--space-2);
text-decoration: none;
transition: color var(--transition-fast);
}
.megamenu-col-sub a:hover { color: var(--text-header); text-decoration: none; }
.megamenu-col-sub .megamenu-sub-cat.current_menu a {
color: var(--text-menu-current);
}
.megamenu-col-featured .megamenu-label { margin-bottom: var(--space-6); }
.megamenu-featured-item {
display: flex;
align-items: flex-start;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.megamenu-featured-item img {
width: 56px;
height: 56px;
object-fit: contain;
flex-shrink: 0;
border-radius: var(--radius-sm);
}
.megamenu-featured-item-text {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.megamenu-featured-item-label {
font-size: var(--font-size-abstract);
font-weight: var(--font-weight-medium);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-header-muted);
}
.megamenu-featured-item-title {
font-size: var(--font-size-body-small);
font-weight: var(--font-weight-bold);
color: var(--text-header);
text-decoration: none;
transition: color var(--transition-fast);
}
.megamenu-featured-item-title:hover { color: var(--interactive-primary); text-decoration: none; }
.megamenu-featured-item-desc {
font-size: var(--font-size-abstract);
color: var(--text-header-muted);
line-height: var(--line-height-abstract);
}
.megamenu-col-help p:not(.megamenu-label) {
font-size: var(--font-size-body);
color: var(--text-header);
margin-bottom: var(--space-6);
line-height: var(--line-height-body);
}
/* COL 3 — pronipoti, stesso stile di col2 */
.megamenu-col-sub2 { position: relative; }
.megamenu-sub2 { display: none; }
.megamenu-sub2.active { display: block; }
.megamenu-col-sub2 ul { list-style: none; padding: 0; margin: 0; }
.megamenu-col-sub2 li { margin-bottom: var(--space-1); }
.megamenu-col-sub2 a {
display: block;
font-size: var(--font-size-body-small);
color: var(--text-header);
padding-block: var(--space-2);
text-decoration: none;
transition: color var(--transition-fast);
}
.megamenu-col-sub2 a:hover { color: var(--text-header); }
/* Freccia › sui nipoti che hanno pronipoti */
.megamenu-sub-cat {
display: flex;
align-items: center;
justify-content: space-between;
}
.megamenu-sub-arrow {
font-size: 14px;
color: var(--text-header-muted);
flex-shrink: 0;
}
.megamenu-sub-cat.active .megamenu-sub-arrow,
.megamenu-sub-cat:hover .megamenu-sub-arrow {
color: var(--text-header);
}
.megamenu-sub2 li.current_menu a {
color: var(--text-menu-current);
}
.megamenu-cat {
display: flex;
align-items: center;
justify-content: space-between;
}
.megamenu-cat-arrow {
font-size: 14px;
color: var(--text-header-muted);
flex-shrink: 0;
margin-left: var(--space-2);
}
.megamenu-cat.active .megamenu-cat-arrow,
.megamenu-cat:hover .megamenu-cat-arrow {
color: var(--text-header);
}
/* Mobile — 992px = --bp-lg */
@media (max-width: 992px) {
.megamenu-panel { display: none !important; }
}
/* ------------------------------------------------------------
ARTICOLO DENTRO MEGAMENU COL-FEATURED
Override compatto del vis-articolo.stile1
senza toccare le regole originali
------------------------------------------------------------ */
.megamenu-col-featured article.vis-articolo {
padding: 0;
gap: var(--gap-sm);
align-items: flex-start;
}
/* Immagine piccola — override img-xs */
.megamenu-col-featured article.vis-articolo .item-box.first-img-articolo {
flex: 0 0 56px;
}
.megamenu-col-featured article.vis-articolo .item-box.first-img-articolo img {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: var(--radius-sm);
}
/* Colonna testo */
.megamenu-col-featured article.vis-articolo .item-box-content {
flex: 1 1 0;
min-width: 0;
gap: var(--space-1);
}
/* Titolo — colore accent invece del primario su sfondo chiaro */
.megamenu-col-featured article.vis-articolo .item-box.art_title .arttitle,
.megamenu-col-featured article.vis-articolo .item-box.art_title .arttitle a {
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
color: var(--text-inverse);
line-height: var(--line-height-body-small);
text-decoration: none;
}
.megamenu-col-featured article.vis-articolo .item-box.art_title .arttitle a:hover {
color: var(--interactive-primary-hover);
}
/* Testo body */
.megamenu-col-featured article.vis-articolo .item-box.text-art {
font-size: var(--font-size-desc);
color: var(--text-header-muted);
line-height: var(--line-height-body-small);
}
/* ============================================================
COMPONENTE: Footer
STRUTTURA:
Sfondo: --bg-header-nav (stesso dell'header)
Testi: variabili --text-header* per coerenza con header scuro
============================================================ */
.site-footer {
background-color: var(--bg-header-nav);
color: var(--text-header);
}
/* Reset stili navbar Bootstrap ereditati dal {menu} nel footer */
.footer-nav .nav-link,
.footer-nav .nav-link span.menu-text {
padding-inline: 0;
padding-block: var(--space-1);
color: var(--text-header-muted) !important;
font-size: var(--font-size-body-small);
font-weight: var(--font-weight-regular);
letter-spacing: 0;
white-space: normal;
}
.footer-nav .nav-link:hover {
color: var(--text-header) !important;
text-decoration: none;
}
.footer-nav .separator {
display: none;
}
.footer-nav .nav-item {
display: block;
}
.footer-nav .navbar-nav {
flex-direction: column;
gap: 0;
}
/* ------------------------------------------------------------
FASCIA 1 — navigazione a colonne
------------------------------------------------------------ */
.footer-nav {
padding-block: var(--space-16);
}
.footer-nav-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--gap-xs);
}
.footer-nav-title {
font-size: var(--font-size-h2);
font-weight: var(--font-weight-bold);
color: var(--text-header);
margin-bottom: var(--space-1);
letter-spacing: 0;
}
/* Gap tra due titoli nella stessa colonna (es. Services + Support) */
.footer-nav-title--gap {
margin-top: var(--space-8);
}
/* Voci di menu generate da {menu} */
.footer-nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.footer-nav ul li a {
font-size: var(--font-size-body-small);
color: var(--text-header-muted);
text-decoration: none;
transition: color var(--transition-fast);
display: block;
padding-block: var(--space-1);
}
.footer-nav ul li a:hover {
color: var(--text-header);
text-decoration: none;
}
/* Separatore tra fascia nav e newsletter */
.footer-nav {
border-bottom: 1px solid var(--border-header);
}
/* Tablet — 992px = --bp-lg */
@media (max-width: 992px) {
.footer-nav-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--gap-md);
}
}
/* Mobile — 576px = --bp-sm */
@media (max-width: 576px) {
.footer-nav-grid {
grid-template-columns: 1fr;
}
}
/* ------------------------------------------------------------
FASCIA 2 — newsletter
------------------------------------------------------------ */
.footer-newsletter {
padding-block: var(--space-16);
border-bottom: 1px solid var(--border-header);
text-align: center;
}
.footer-newsletter .container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
.footer-newsletter-title {
font-size: var(--font-size-title);
font-weight: var(--font-weight-bold);
color: var(--text-header);
margin: 0;
}
.footer-newsletter-sub {
font-size: var(--font-size-body);
color: var(--text-header-muted);
margin: 0;
max-width: 480px;
}
/* Il bottone riusa .cta-link-dark già definito */
.footer-newsletter .cta-link-dark {
margin-top: var(--space-2);
}
/* ------------------------------------------------------------
FASCIA 3 — logo + contatti + info destra
------------------------------------------------------------ */
.footer-info {
padding-block: var(--space-12);
border-bottom: 1px solid var(--border-header);
}
.footer-info-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--gap-lg);
}
/* Contatti — sinistra */
.footer-info-contacts {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.footer-info-contacts p {
font-size: var(--font-size-body-small);
color: var(--text-header-muted);
margin: 0;
}
/* Logo — centro */
.footer-info-logo {
display: flex;
justify-content: center;
}
.footer-info-logo a {
display: block;
}
.footer-info-logo img {
height: 40px;
width: auto;
}
/* Info destra */
.footer-info-right {
display: flex;
flex-direction: column;
gap: var(--space-1);
text-align: right;
}
.footer-info-right p,
.footer-info-right a {
font-size: var(--font-size-body-small);
color: var(--text-header-muted);
margin: 0;
text-decoration: none;
transition: color var(--transition-fast);
}
.footer-info-right a:hover {
color: var(--text-header);
}
/* Mobile — 768px = --bp-md */
@media (max-width: 768px) {
.footer-info-grid {
grid-template-columns: 1fr;
text-align: center;
gap: var(--gap-md);
}
.footer-info-logo {
order: -1;
}
.footer-info-right {
text-align: center;
}
}
/* ------------------------------------------------------------
FASCIA 4 — dati legali
------------------------------------------------------------ */
.footer-legal {
padding-block: var(--space-6);
text-align: center;
}
.footer-legal p,
.footer-legal a {
font-size: var(--font-size-abstract);
color: var(--text-header-muted);
margin: 0;
text-decoration: none;
}
.footer-legal a:hover {
color: var(--text-header);
}
/* ============================================================
COMPONENTE: Contenitore categorie prodotti (cont_categorie_prodotti)
STRUTTURA HTML (generata dal CMS, non modificabile):
MODIFICATORI (stessi del vis-articolo):
.stile1 → layout affiancato (immagine + testo)
.rev → immagine a sinistra
.img-xs → 25% immagine / 75% testo
.img-sm → 35% immagine / 65% testo
.img-lg → 60% immagine / 40% testo
.align-top → allinea in alto invece che al centro
.titoli-sm → titoli ridotti
.text-small → testo ridotto
RICHIEDE jQuery (solo per .stile1):
$('.cont_categorie_prodotti.stile1 .cont_info_cat').each(function() {
$('.cat_nome, .descr_cat', $(this)).wrapAll("
");
});
NOTA: la griglia è gestita da grid.css tramite ul.ul0 (display:contents).
============================================================ */
/* ------------------------------------------------------------
BASE — comuni a tutti gli stili
------------------------------------------------------------ */
section.cont_categorie_prodotti,
div.cont_categorie_prodotti {
padding: var(--space-20) var(--space-2);
}
.smoothmenu-subcat:has(> .clear:only-child) {
display: none;
}
/* Immagine */
.cont_categorie_prodotti .img_cat a {
display: block;
text-decoration: none;
}
.cont_categorie_prodotti .img_cat figure {
margin: 0;
}
.cont_categorie_prodotti .img_cat img {
width: 100%;
height: auto;
object-fit: contain;
}
/* Nome categoria */
.cont_categorie_prodotti .cat_nome a {
color: var(--text-primary);
text-decoration: none;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-h3);
line-height: var(--line-height-heading);
transition: color var(--transition-fast);
display: block;
}
.cont_categorie_prodotti .cat_nome a:hover {
color: var(--interactive-text);
}
/* Rimuove il div interno generato dal CMS dentro cat_nome */
.cont_categorie_prodotti .cat_nome > a > div {
display: contents;
}
/* Descrizione */
.cont_categorie_prodotti .descr_cat {
font-size: var(--font-size-body-small);
color: var(--text-secondary);
}
.cont_categorie_prodotti .descr_cat a {
color: inherit;
text-decoration: none;
}
.cont_categorie_prodotti .descr_cat p {
margin: 0;
font-size: inherit;
color: inherit;
}
.cont_categorie_prodotti .separator {
display: none;
}
/* ------------------------------------------------------------
STILE 1 — layout flex a due colonne
Richiede jQuery wrapAll per generare .cat_testo
MODIFICATORI:
.rev → immagine a sinistra
.img-xs → 25% immagine / 75% testo
.img-sm → 35% immagine / 65% testo
.img-lg → 60% immagine / 40% testo
.align-top → allinea in alto invece che al centro
------------------------------------------------------------ */
.cont_categorie_prodotti.stile1 .cont_info_cat {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--gap-md);
}
/* Colonna testo — wrapper generato da jQuery */
.cont_categorie_prodotti.stile1 .cat_testo {
flex: 1 1 50%;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* Colonna immagine — default a destra */
.cont_categorie_prodotti.stile1 .img_cat {
flex: 1 1 50%;
min-width: 0;
order: 2;
}
/* --- .rev — immagine a sinistra --- */
.cont_categorie_prodotti.stile1.rev .img_cat { order: -1; }
/* --- .img-xs — 25% immagine / 75% testo --- */
.cont_categorie_prodotti.stile1.img-xs .cat_testo { flex-basis: 75%; }
.cont_categorie_prodotti.stile1.img-xs .img_cat { flex-basis: 25%; }
/* --- .img-sm — 35% immagine / 65% testo --- */
.cont_categorie_prodotti.stile1.img-sm .cat_testo { flex-basis: 65%; }
.cont_categorie_prodotti.stile1.img-sm .img_cat { flex-basis: 35%; }
/* --- .img-lg — 60% immagine / 40% testo --- */
.cont_categorie_prodotti.stile1.img-lg .cat_testo { flex-basis: 40%; }
.cont_categorie_prodotti.stile1.img-lg .img_cat { flex-basis: 60%; }
/* --- .align-top --- */
.cont_categorie_prodotti.stile1.align-top .cont_info_cat {
align-items: flex-start;
}
/* Tablet — 992px = --bp-lg */
@media (max-width: 992px) {
.cont_categorie_prodotti.stile1 .cat_testo { flex-basis: 60%; }
.cont_categorie_prodotti.stile1 .img_cat { flex-basis: 40%; }
}
/* Mobile — 768px = --bp-md */
@media (max-width: 768px) {
.cont_categorie_prodotti.stile1 .cont_info_cat {
flex-direction: column;
}
.cont_categorie_prodotti.stile1 .img_cat {
order: -1;
flex-basis: 100%;
}
.cont_categorie_prodotti.stile1 .cat_testo {
flex-basis: 100%;
}
}
/* ------------------------------------------------------------
MODIFICATORI TESTO
------------------------------------------------------------ */
.cont_categorie_prodotti.titoli-sm .cat_nome a {
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
}
.cont_categorie_prodotti.text-small .descr_cat {
font-size: var(--font-size-abstract);
}
/* ------------------------------------------------------------
SOTTOCATEGORIE — ul.ul1
Lista semplice indentata sotto la categoria padre
------------------------------------------------------------ */
.cont_categorie_prodotti .ul1 {
display: none; /* Per adesso nascosto */
list-style: none;
padding: 0;
margin-top: var(--space-2);
padding-left: var(--space-4);
border-left: 2px solid var(--border-default);
}
.cont_categorie_prodotti .ul1 li {
margin-bottom: var(--space-1);
}
.cont_categorie_prodotti .ul1 .cat_nome a {
font-size: var(--font-size-body-small);
font-weight: var(--font-weight-regular);
color: var(--text-secondary);
}
.cont_categorie_prodotti .ul1 .cat_nome a:hover {
color: var(--interactive-text);
}
/* Nasconde immagine e descrizione nelle sottocategorie */
.cont_categorie_prodotti .ul1 .img_cat,
.cont_categorie_prodotti .ul1 .descr_cat {
display: none;
}
/* ------------------------------------------------------------
PAGINAZIONE
Occupa tutta la larghezza sotto la griglia prodotti
------------------------------------------------------------ */
.pagination {
align-items: center;
justify-content: center;
gap: var(--space-2);
padding-top: var(--space-8);
margin-top: var(--space-4);
border-top: 1px solid var(--border-default);
flex-wrap: wrap;
width: 100%;
}
.pagination .info-paginazione {
font-size: var(--font-size-body-small);
color: var(--text-secondary);
margin-right: var(--space-4);
}
/* Numero di pagina — link */
.pagination .pagination-link,
.pagination a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding-inline: var(--space-2);
font-size: var(--font-size-body-small);
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
text-decoration: none;
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
transition: background-color var(--transition-fast),
color var(--transition-fast),
border-color var(--transition-fast);
}
.pagination .pagination-link:hover,
.pagination a:hover {
background-color: var(--bg-section-light);
color: var(--text-primary);
border-color: var(--border-strong);
text-decoration: none;
}
/* Pagina corrente */
.pagination .current {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding-inline: var(--space-2);
font-size: var(--font-size-body-small);
font-weight: var(--font-weight-bold);
color: var(--primitive-white);
background-color: var(--interactive-primary);
border: 1px solid var(--interactive-primary);
border-radius: var(--radius-sm);
}
/* Prev / Next */
.pagination .prev,
.pagination .next {
font-size: var(--font-size-body-small);
color: var(--text-secondary);
text-decoration: none;
padding-inline: var(--space-3);
}
/* ------------------------------------------------------------
Pagina 404 / Page not found
------------------------------------------------------------ */
#pageNotFoundError {
padding-block: var(--space-20);
text-align: center;
}
#pageNotFoundError h1 {
font-size: var(--font-size-h2);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-bottom: var(--space-4);
}
#pageNotFoundError p {
font-size: var(--font-size-body);
color: var(--text-secondary);
margin-bottom: var(--space-6);
}
#pageNotFoundError hr {
margin-block: var(--space-10);
border-color: var(--border-default);
opacity: 1;
}
#pageNotFoundError img {
max-width: 320px;
width: 100%;
margin-inline: auto;
margin-top: var(--space-8);
opacity: 0.7;
}
/* ============================================================
COMPONENTE: Lista prodotti — stile1 (layout affiancato)
Aggiungere la classe .stile1 sul wrapper .prod-list
o sulla .productlist per attivare il layout affiancato.
MODIFICATORI (stessi di vis-articolo e cont_categorie_prodotti):
.rev → immagine a sinistra (default: destra)
.img-xs → 25% immagine / 75% testo
.img-sm → 35% immagine / 65% testo
.img-lg → 60% immagine / 40% testo
.align-top → allinea in alto invece che al centro
RICHIEDE jQuery wrapAll:
$('.prod-list.stile1 .cont-prodotto, .productlist.stile1 .cont-prodotto').each(function() {
$('.cont-prodotto-text', $(this)).wrapAll("
");
});
In alternativa il wrapAll può essere fatto sul singolo product:
$('.prod-list.stile1 .product').each(function() {
$('.nome-prod, .descr-breve-prod, .bt-det-prod', $(this)).wrapAll("
");
});
============================================================ */
/* ------------------------------------------------------------
GRIGLIA — stile1 usa 2 colonne invece di 3
------------------------------------------------------------ */
.prod-list.stile1,
.productlist.stile1 {
display: flex;
flex-direction: column;
gap: var(--gap-lg);
}
/* Singolo prodotto — layout flex a due colonne */
.prod-list.stile1 .cont-prodotto,
.productlist.stile1 .cont-prodotto {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--gap-lg);
text-align: left;
}
/* Colonna immagine — default a sinistra */
.prod-list.stile1 .fotoProdotto,
.productlist.stile1 .fotoProdotto {
flex: 0 0 40%;
min-width: 0;
margin-bottom: 0;
}
.prod-list.stile1 .fotoProdotto figure,
.productlist.stile1 .fotoProdotto figure {
min-height: auto;
}
.prod-list.stile1 .fotoProdotto img,
.productlist.stile1 .fotoProdotto img {
max-height: none;
width: 100%;
height: auto;
object-fit: contain;
}
/* Colonna testo — wrapper generato da jQuery */
.prod-list.stile1 .cont-prodotto-testo,
.productlist.stile1 .cont-prodotto-testo {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
align-items: flex-start;
}
/* Testo non centrato in stile1 */
.prod-list.stile1 .cont-prodotto-text,
.productlist.stile1 .cont-prodotto-text {
align-items: flex-start;
text-align: left;
width: 100%;
}
/* Nome prodotto */
.prod-list.stile1 .nome-prod,
.productlist.stile1 .nome-prod {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
}
/* Descrizione breve */
.prod-list.stile1 .descr-breve-prod,
.productlist.stile1 .descr-breve-prod {
font-size: var(--font-size-body-small);
color: var(--text-secondary);
}
/* Link "View product →" — usa lo stile readmore */
.prod-list.stile1 .bt-det-prod,
.productlist.stile1 .bt-det-prod {
margin-top: var(--space-2);
}
/* Separatore tra prodotti */
.prod-list.stile1 .product,
.productlist.stile1 .product {
flex: 0 0 100%;
padding-bottom: var(--gap-lg);
border-bottom: 1px solid var(--border-default);
}
.prod-list.stile1 .product:last-of-type,
.productlist.stile1 .product:last-of-type {
border-bottom: none;
padding-bottom: 0;
}
/* --- .rev — immagine a destra --- */
.prod-list.stile1.rev .fotoProdotto,
.productlist.stile1.rev .fotoProdotto {
order: 2;
}
.prod-list.stile1.rev .cont-prodotto-testo,
.productlist.stile1.rev .cont-prodotto-testo {
order: 1;
}
/* --- .img-xs — 25% immagine / 75% testo --- */
.prod-list.stile1.img-xs .fotoProdotto,
.productlist.stile1.img-xs .fotoProdotto { flex: 0 0 25%; }
.prod-list.stile1.img-xs .cont-prodotto-testo,
.productlist.stile1.img-xs .cont-prodotto-testo { flex: 0 0 75%; }
/* --- .img-sm — 35% immagine / 65% testo --- */
.prod-list.stile1.img-sm .fotoProdotto,
.productlist.stile1.img-sm .fotoProdotto { flex: 0 0 35%; }
.prod-list.stile1.img-sm .cont-prodotto-testo,
.productlist.stile1.img-sm .cont-prodotto-testo { flex: 0 0 65%; }
/* --- .img-lg — 60% immagine / 40% testo --- */
.prod-list.stile1.img-lg .fotoProdotto,
.productlist.stile1.img-lg .fotoProdotto { flex: 0 0 60%; }
.prod-list.stile1.img-lg .cont-prodotto-testo,
.productlist.stile1.img-lg .cont-prodotto-testo { flex: 0 0 40%; }
/* --- .align-top --- */
.prod-list.stile1.align-top .cont-prodotto,
.productlist.stile1.align-top .cont-prodotto {
align-items: flex-start;
}
/* ------------------------------------------------------------
GRIGLIA A DUE COLONNE — modificatore .grid-2
Mostra i prodotti in 2 colonne affiancate come nel mockup
------------------------------------------------------------ */
.prod-list.stile1.grid-2,
.productlist.stile1.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gap-xl);
}
.prod-list.stile1.grid-2 .product,
.productlist.stile1.grid-2 .product {
border-bottom: none;
padding-bottom: 0;
}
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
/* Tablet — 992px = --bp-lg */
@media (max-width: 992px) {
.prod-list.stile1.grid-2,
.productlist.stile1.grid-2 {
grid-template-columns: 1fr;
}
}
/* Mobile — 768px = --bp-md */
@media (max-width: 768px) {
.prod-list.stile1 .cont-prodotto,
.productlist.stile1 .cont-prodotto {
flex-direction: column;
}
.prod-list.stile1 .fotoProdotto,
.productlist.stile1 .fotoProdotto,
.prod-list.stile1.rev .fotoProdotto,
.productlist.stile1.rev .fotoProdotto {
order: unset;
flex: 0 0 100%;
width: 100%;
}
.prod-list.stile1 .cont-prodotto-testo,
.productlist.stile1 .cont-prodotto-testo,
.prod-list.stile1.rev .cont-prodotto-testo,
.productlist.stile1.rev .cont-prodotto-testo {
order: unset;
flex: 0 0 100%;
}
}
/* ============================================================
COMPONENTE: Modal Login
Struttura Bootstrap 4 modal con form CMS interno.
Stilizzato per coerenza con il design system.
============================================================ */
/* ------------------------------------------------------------
OVERLAY E DIALOG
------------------------------------------------------------ */
.modal-content {
border: none;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.modal-header {
background-color: var(--bg-header-nav);
border-bottom: 1px solid var(--border-header);
padding: var(--space-5) var(--space-6);
display: flex;
align-items: center;
justify-content: space-between;
}
.modal-title {
font-family: var(--font-family-base);
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
color: var(--text-header);
text-transform: capitalize;
margin: 0;
}
/* Pulsante chiudi × */
.modal-header .close {
background: none;
border: none;
font-size: 20px;
line-height: 1;
color: var(--text-header-muted);
cursor: pointer;
padding: 0;
transition: color var(--transition-fast);
opacity: 1;
margin: 0;
}
.modal-header .close:hover {
color: var(--text-header);
}
.modal-body {
padding: var(--space-8);
background-color: var(--bg-surface);
}
/* ------------------------------------------------------------
FORM FIELDS — campi generati dal CMS
------------------------------------------------------------ */
.modal-body .input_element {
margin-bottom: var(--space-5);
}
.modal-body .input_element.class_hidden {
display: none;
}
/* Label */
.modal-body .form_label {
display: block;
font-family: var(--font-family-base);
font-size: var(--font-size-body-small);
font-weight: var(--font-weight-medium);
color: var(--text-primary);
margin-bottom: var(--space-2);
}
/* Input testo e password */
.modal-body .form_input {
display: block;
width: 100%;
font-family: var(--font-family-base);
font-size: var(--font-size-body-small);
color: var(--text-primary);
background-color: var(--bg-page);
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-4);
outline: none;
transition: border-color var(--transition-fast),
box-shadow var(--transition-fast);
box-sizing: border-box;
}
.modal-body .form_input:focus {
border-color: var(--interactive-primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--interactive-primary) 15%, transparent);
}
/* Icona mostra/nascondi password */
#pass_occhio {
position: absolute;
right: var(--space-3);
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: var(--text-disabled);
font-size: 14px;
transition: color var(--transition-fast);
}
#pass_occhio:hover {
color: var(--text-secondary);
}
/* Wrapper input password con icona */
#divcont_pass {
position: relative;
}
#divcont_pass .form_input {
padding-right: var(--space-10);
}
/* Link recupero password */
#link-rec-pwd {
display: block;
font-size: var(--font-size-body-small);
color: var(--interactive-primary);
text-decoration: none;
margin-top: calc(-1 * var(--space-2));
margin-bottom: var(--space-5);
transition: color var(--transition-fast);
}
#link-rec-pwd:hover {
color: var(--interactive-primary-hover);
text-decoration: underline;
}
/* Errori validazione */
.modal-body .show-error.error {
font-size: var(--font-size-body-small);
color: #e53e3e;
margin-bottom: var(--space-3);
}
/* Legenda nascosta */
.modal-body .form_legend {
display: none;
}
/* Intestazione form nascosta se vuota */
.modal-body .testata-principale:empty {
display: none;
}
/* ============================================================
PAGINA: Visualizzatore articolo (VIS_ART)
Attivato da: body.pagina_interna.VIS_ART
STRUTTURA HTML:
← articolo principale (~70%)
← sidebar news (~30%)
OVERLAY TITOLO SU HERO:
Tag, titolo e sottotitolo dell'articolo vengono duplicati
nell'hero via JS (posizione CSS assoluta sull'immagine).
Aggiungere al JS comune:
$(document).ready(function() {
if ($('body').hasClass('VIS_ART')) {
var tag = $('.section_vis_art .item-box.tag-art').clone();
var titolo = $('.section_vis_art .item-box.art_title').clone();
var sottot = $('.section_vis_art .item-box.art_subtitle').clone();
var overlay = $('
← immagine hero con overlay testo
titolo pagina
← nascosto (duplica titolo articolo)NEWS
...
...
...
...
...