");
// Click miniatura: aggiorna immagine grande
$gallery.on('click', '.gallery-thumb a', function(e) {
e.preventDefault();
var newSrc = $(this).attr('href');
var newAlt = $(this).find('img').attr('alt');
$('.gallery-main img').attr('src', newSrc).attr('alt', newAlt);
$('.gallery-main a').attr('href', newSrc);
$('.gallery-thumb').removeClass('active');
$(this).closest('.gallery-thumb').addClass('active');
});
});
============================================================ */
/* ------------------------------------------------------------
LAYOUT — flex row, testo sinistra / galleria destra
------------------------------------------------------------ */
.section_vis_prod .intro-prodotto {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--gap-lg);
padding-block: var(--space-16);
}
/* Colonna testo — 40% */
.section_vis_prod .vis-prod-testo {
flex: 0 0 40%;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Colonna galleria — 60% */
.section_vis_prod .first-img {
flex: 0 0 55%;
min-width: 0;
}
/* Il JS raggruppa testo in .vis-prod-testo via wrapAll */
/* ------------------------------------------------------------
TIPOGRAFIA
------------------------------------------------------------ */
.section_vis_prod .hometitle {
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-heading);
color: var(--text-primary);
margin: 0;
}
.section_vis_prod h2 {
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
color: var(--text-secondary);
line-height: var(--line-height-body);
margin: 0;
}
.section_vis_prod .product-description {
font-size: var(--font-size-body-small);
color: var(--text-secondary);
line-height: var(--line-height-body);
}
.section_vis_prod .product-description p {
margin-bottom: var(--space-3);
}
.section_vis_prod .product-description p:last-child {
margin-bottom: 0;
}
/* ------------------------------------------------------------
GALLERIA — immagine grande + miniature
------------------------------------------------------------ */
/* Immagine grande */
.section_vis_prod .gallery-main {
width: 100%;
margin-bottom: var(--gap-sm);
}
.section_vis_prod .gallery-main a {
display: block;
text-decoration: none;
}
.section_vis_prod .gallery-main img {
width: 100%;
height: auto;
object-fit: contain;
border-radius: var(--radius-md);
}
/* Riga miniature */
.section_vis_prod .gallery-thumbs {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--gap-xs);
justify-content: center;
}
.section_vis_prod .gallery-thumb {
flex: 0 0 auto;
}
.section_vis_prod .gallery-thumb a {
display: block;
text-decoration: none;
border-radius: var(--radius-sm);
overflow: hidden;
border: 2px solid transparent;
transition: border-color var(--transition-fast);
}
.section_vis_prod .gallery-thumb a:hover,
.section_vis_prod .gallery-thumb.active a {
border-color: var(--interactive-primary);
}
.section_vis_prod .gallery-thumb img {
width: 80px;
height: 60px;
object-fit: cover;
display: block;
}
/* ------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------ */
/* Tablet — 992px = --bp-lg */
@media (max-width: 992px) {
.section_vis_prod .intro-prodotto {
flex-direction: column;
}
.section_vis_prod .vis-prod-testo,
.section_vis_prod .first-img {
flex: 0 0 100%;
width: 100%;
}
}
/* ------------------------------------------------------------
FEATURES LIST — specifiche tecniche prodotto
------------------------------------------------------------ */
.features-list {
padding-block: var(--space-12);
}
.features-list > h1.istanza_titolo {
text-align: center;
margin-bottom: var(--space-10);
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
}
/* Griglia card — 3 colonne */
.features-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap-lg);
align-items: start;
}
/* Il titolo occupa tutta la larghezza fuori dalla griglia */
.features-list > h1.istanza_titolo {
grid-column: 1 / -1;
}
/* Card */
.feature-group {
display: flex;
flex-direction: column;
}
.feature-group.features {
grid-column: 1/-1;
}
/* Header card — sfondo colorato */
h3.feature-group {
font-size: var(--font-size-abstract);
font-weight: var(--font-weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-secondary);
background-color: var(--bg-section-light);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
margin: 0;
}
/* Contenuto — sfondo trasparente */
.feature-info {
padding: var(--space-4);
padding-top: var(--space-3);
}
.feature-info ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.feature-group.features .feature-info ul {
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
}
.feature-group.features .feature-info ul li {
width: 250px;
}
.feature-info ul li {
font-size: var(--font-size-body-small);
color: var(--text-primary);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-body);
}
/* Icona check */
.feature-info .fa-check {
color: var(--interactive-primary);
margin-right: var(--space-1);
}
/* OS — loghi in riga */
.feature-info ul.os-icons {
flex-direction: row;
flex-wrap: wrap;
gap: var(--gap-sm);
align-items: center;
}
.feature-info ul.os-icons li {
display: flex;
align-items: center;
}
.feature-info ul.os-icons img {
height: 24px;
width: auto;
object-fit: contain;
}
/* Tablet — 992px = --bp-lg */
@media (max-width: 992px) {
.features-list {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile — 576px = --bp-sm */
@media (max-width: 576px) {
.features-list {
grid-template-columns: 1fr;
}
}
/* ------------------------------------------------------------
Viewer 3D
------------------------------------------------------------ */
.modelviewer3d {
height: 400px;
margin: auto;
width: auto;
}
/* ------------------------------------------------------------
ALLEGATI — Documentation & Software
------------------------------------------------------------ */
#allegati {
padding-block: var(--space-12);
}
/* Titolo gruppo (es. "Technical Documentation") */
.doc-group-title {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-top: var(--space-10);
margin-bottom: var(--space-2);
}
.doc-group-title:first-of-type {
margin-top: 0;
}
/* Lista file */
.doc-list {
list-style: none;
padding: 0;
margin: 0;
margin-bottom: var(--space-6);
}
/* Singola riga file */
.doc-item {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: var(--gap-md);
padding-block: var(--space-2);
border-bottom: 1px solid var(--border-default);
}
/* Link scaricabile */
.doc-link {
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: var(--interactive-primary);
font-size: var(--font-size-body-small);
font-weight: var(--font-weight-medium);
transition: color var(--transition-fast);
min-width: 0;
}
.doc-link:hover {
color: var(--interactive-primary-hover);
text-decoration: none;
}
/* File locked — stesso layout ma non cliccabile */
.doc-link--locked {
color: var(--interactive-primary);
cursor: default;
}
/* Icona file */
.doc-icon {
font-size: 20px;
flex-shrink: 0;
width: 20px;
text-align: center;
}
/* Colori icone per tipo file */
.doc-icon--pdf { color: var(--interactive-primary); }
.doc-icon--word { color: var(--interactive-primary); }
.doc-icon--excel { color: var(--interactive-primary); }
.doc-icon--zip { color: var(--interactive-primary); }
.doc-icon--cad { color: var(--interactive-primary); }
.doc-icon--default { color: var(--interactive-primary); }
/* Nome file */
.doc-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Dimensione */
.doc-size {
font-size: var(--font-size-body-small);
color: var(--text-secondary);
white-space: nowrap;
text-align: right;
}
/* Login required */
.doc-login {
min-width: 110px;
text-align: right;
}
.doc-login a,
.doc-login .puls-login {
font-size: var(--font-size-body-small);
color: var(--interactive-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
.doc-login a:hover,
.doc-login .puls-login:hover {
color: var(--interactive-primary-hover);
text-decoration: underline;
}
/* Mobile — 576px = --bp-sm */
@media (max-width: 576px) {
.doc-item {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
}
.doc-size {
grid-column: 2;
grid-row: 1;
}
.doc-login {
grid-column: 1 / -1;
text-align: left;
min-width: 0;
}
}
/* ------------------------------------------------------------
Stile della mappa distributori
------------------------------------------------------------ */
.circlexx
{
opacity: 0;
fill: #c0c0c0;
stroke: #000000;
stroke-width: 0.5;
}
/*
* Smaller circles around subnational territories: Australian external territories, Chinese SARs, Dutch special municipalities, and French DOMs (overseas regions/departments) [but not French COMs (overseas collectivities)]
*
* Change opacity to 1 to display all circles
*/
.subxx
{
opacity: 0;
fill: #c0c0c0;
stroke: #000000;
stroke-width: 0.3;
}
/*
* Land
* (all land, as opposed to water, should belong to this class; in order to modify the coastline for land pieces with no borders on them a special class "coastxx" has been added below)
*/
.landxx
{
fill: #ececec;
stroke: #000000;
stroke-width: 1.5;
fill-rule: evenodd;
}
/*
* Styles for coastlines of islands and continents with no borders on them
* (all of them should also belong to the class "landxx" - to allow for all land to be modified at once by refining "landxx" style's definition further down)
*/
.coastxx
{
stroke-width: 1.5;
}
/*
* Styles for territories without permanent population (the largest of which is Antarctica)
*
* Change opacity to 0 to hide all territories
*/
.antxx
{
opacity: 0;
fill: #ececec;
}
/*
* Circles around small countries without permanent population
*
* Change opacity to 1 to display all circles
*/
.noxx
{
opacity: 0;
fill: #c0c0c0;
stroke: #000000;
stroke-width: 0.5;
}
/*
* Styles for territories with limited or no recognition
* (all of them - including Taiwan - are overlays (i.e. duplicate layers) over their "host" countries, and so not showing them doesn't leave any gaps on the map)
*
* Change opacity to 1 to display all territories
*/
.limitxx
{
opacity: 0;
fill: #c0c0c0;
stroke: #ffffff;
stroke-width: 0.2;
fill-rule: evenodd;
}
/*
* Smaller circles around small territories with limited or no recognition
*
* Change opacity to 1 to display all circles
*/
.unxx
{
opacity: 0;
fill: #c0c0c0;
stroke: #000000;
stroke-width: 0.3;
}
/*
* Oceans, seas, and large lakes
*/
.oceanxx
{
opacity: 0;
fill: #ffffff;
stroke: #000000;
stroke-width: 0.5;
}
/*
* Reserved class names:
*
* .eu - for members of European Union
* .eaeu - for members of Eurasian Economic Union
*/
/*
* Additional style rules
*
* The following are examples of colouring countries.
* These can be substituted with custom styles to colour the countries on the map.
*
* Colour a few countries:
*
* .gb, .au, .nc
* {
* fill: #ff0000;
* }
*
* Colour a few small-country circles (along with the countries):
*
* .ms, .ky
* {
* opacity: 1;
* fill: #ff0000;
* }
*
*/
/* ------------------------------------------------------------
MAPPA — container con controlli zoom
------------------------------------------------------------ */
#world_map_wrapper {
position: relative;
width: 100%;
padding-bottom: 48%;
height: 0;
}
#world_map {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
cursor: grab;
}
#world_map.is-dragging {
cursor: grabbing;
}
#world_map svg {
width: 100%;
height: 100%;
display: block;
user-select: none;
}
.mappa-controls {
position: absolute;
bottom: var(--space-3);
right: var(--space-3);
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.mappa-controls button {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
font-size: 16px;
line-height: 1;
color: var(--text-secondary);
cursor: pointer;
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.mappa-controls button:hover {
color: var(--text-primary);
border-color: var(--interactive-primary);
}
/* ------------------------------------------------------------
HOW TO BUY — hero con mappa
------------------------------------------------------------ */
#box-distributori .grid-2 {
align-items: center;
gap: 0;
min-height: 320px;
}
#box-distributori .striscia-titolo-ist {
padding-right: var(--gap-lg);
text-align: left;
}
#box-distributori .tag-istanza {
font-size: var(--font-size-abstract);
font-weight: var(--font-weight-medium);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--primitive-grey-light);
margin: 0 0 var(--space-1) 0;
}
#box-distributori .istanza_titolo {
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin: 0 0 var(--space-4) 0;
line-height: var(--line-height-heading);
}
#box-distributori .istanza_sottotitolo {
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
color: var(--text-secondary);
line-height: var(--line-height-body);
margin: 0;
}
/* Nazioni attive sulla mappa — cursore pointer */
#world_map .distrib-attiva,
#world_map .distrib-attiva * {
cursor: pointer;
}
/* Mobile — 992px */
@media (max-width: 992px) {
#box-distributori .grid-2 {
grid-template-columns: 1fr;
}
#box-distributori .striscia-titolo-ist {
padding-right: 0;
}
}
/* ------------------------------------------------------------
DISTRIBUTORI — card singola (.pv)
------------------------------------------------------------ */
.pv {
display: grid;
grid-template-columns: 160px 1fr auto auto;
align-items: center;
gap: var(--gap-md);
padding: var(--space-5) var(--space-6);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
margin-bottom: var(--space-4);
}
.distrib-div-foto {
display: flex;
align-items: center;
justify-content: center;
}
.distrib-foto {
max-width: 140px;
max-height: 60px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.distrib-info {
display: contents;
}
.distrib-nome {
font-size: var(--font-size-body);
color: var(--text-primary);
}
.distrib-indirizzo {
display: none;
}
.distrib-contatti {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding-left: var(--space-6);
border-left: 1px solid var(--border-default);
}
.distrib-contatto-riga {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--font-size-body-small);
}
.distrib-label {
color: var(--text-secondary);
min-width: 32px;
}
.distrib-tel,
.distrib-mail,
.distrib-web {
color: var(--interactive-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
.distrib-tel:hover,
.distrib-mail:hover,
.distrib-web:hover {
color: var(--interactive-primary-hover);
text-decoration: underline;
}
.distrib-cta {
padding-left: var(--space-4);
}
.distrib-btn {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
padding: var(--space-2) var(--space-5);
border: 1px solid var(--interactive-primary);
border-radius: var(--radius-sm);
font-size: var(--font-size-body-small);
font-weight: var(--font-weight-medium);
color: var(--interactive-primary);
text-decoration: none;
background: transparent;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.distrib-btn:hover {
background-color: var(--interactive-primary);
color: var(--primitive-white);
text-decoration: none;
}
/* Titolo gruppo (Worldwide Strategic Partner, Global Distributors, ecc.) */
.distrib-tipo {
font-size: var(--font-size-abstract);
/* font-weight: var(--font-weight-medium); */
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--text-secondary);
margin: 0 0 var(--space-4) 0;
padding-bottom: var(--space-1);
/* border-bottom: 1px solid var(--border-default); */
}
.gruppo_punti_vendita {
margin-bottom: var(--space-10);
}
/* Mobile — 992px */
@media (max-width: 992px) {
.pv {
grid-template-rows: auto auto auto;
}
.distrib-div-foto {
grid-row: 1;
grid-column: 1;
justify-content: flex-start;
}
.distrib-info {
display: block;
}
.distrib-nome {
grid-row: 1;
grid-column: 2;
}
.distrib-contatti {
grid-row: 2;
grid-column: 1 / -1;
border-left: none;
padding-left: 0;
border-top: 1px solid var(--border-default);
padding-top: var(--space-3);
margin-top: var(--space-2);
}
.distrib-cta {
grid-row: 3;
grid-column: 1 / -1;
padding-left: 0;
}
.distrib-btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 576px) {
.pv {
grid-template-columns: 1fr;
}
}
/* ------------------------------------------------------------
DISTRIBUTORI — Global (griglia card verticali)
------------------------------------------------------------ */
.gruppo-global-1 .pv,
.gruppo-nazione .pv {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto;
align-items: start;
padding: var(--space-6);
height: 100%;
gap: var(--gap-sm);
}
.gruppo-global-1 .distrib-div-foto,
.gruppo-nazione .distrib-div-foto {
justify-content: center;
min-height: 50px;
align-items: center;
margin-bottom: var(--space-1);
}
.gruppo-global-1 .distrib-nome,
.gruppo-nazione .distrib-nome {
margin-bottom: var(--space-3);
}
.gruppo-global-1 .distrib-contatti,
.gruppo-nazione .distrib-contatti {
border-left: none;
padding-left: 0;
}
.gruppo-global-1 .distrib-cta,
.gruppo-nazione .distrib-cta {
padding-left: 0;
margin-top: var(--space-4);
display: none;
}
.gruppo-global-1 .distrib-btn,
.gruppo-nazione .distrib-btn {
width: 100%;
justify-content: center;
}
/* Griglia a 3 colonne */
.gruppo-global-1,
.gruppo-nazione {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap-md);
align-items: start;
}
/* Il titolo occupa tutta la larghezza */
.gruppo-global-1 .distrib-tipo,
.gruppo-nazione .distrib-tipo {
grid-column: 1 / -1;
}
/* Tablet — 2 colonne */
@media (max-width: 992px) {
.gruppo-global-1,
.gruppo-nazione {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile — 1 colonna */
@media (max-width: 576px) {
.gruppo-global-1,
.gruppo-nazione {
grid-template-columns: 1fr;
}
}
/* ------------------------------------------------------------
LOCAL DISTRIBUTORS — select paese
------------------------------------------------------------ */
.select_country {
margin-bottom: var(--space-10);
}
.select_country > p {
font-size: var(--font-size-body);
color: var(--text-secondary);
margin: 0 0 var(--space-5) 0;
}
.my-custom-select {
position: relative;
display: inline-block;
}
.my-custom-select::after {
content: '\2039';
font-family: var(--font-family-base);
font-size: 18px;
color: var(--text-secondary);
position: absolute;
right: var(--space-4);
top: 50%;
transform: translateY(-50%) rotate(-90deg);
pointer-events: none;
line-height: 1;
}
.my-custom-select select {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
padding: var(--space-2) var(--space-10) var(--space-2) var(--space-4);
font-family: var(--font-family-base);
font-size: var(--font-size-body-small);
color: var(--text-primary);
cursor: pointer;
min-width: 200px;
outline: none;
transition: border-color var(--transition-fast);
}
.my-custom-select select:hover,
.my-custom-select select:focus {
border-color: var(--interactive-primary);
}
/* ------------------------------------------------------------
INFO CATEGORIA — layout stile1 img-sm
Ricalca vis-articolo.stile1.img-sm:
35% immagine sinistra / 65% testo destra
------------------------------------------------------------ */
.pagina_categoria .info_categoria {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--gap-lg);
padding-block: var(--space-12);
padding: var(--space-20) var(--space-2);
}
.pagina_categoria .contenitore_categoria.prod-list {
padding-block: 0;
}
/* Colonna immagine — 35% a sinistra */
.pagina_categoria .info-cat-img {
flex: 0 0 35%;
min-width: 0;
}
.pagina_categoria .info-cat-img img {
width: 100%;
height: auto;
object-fit: contain;
}
/* Colonna testo — 65% a destra */
.pagina_categoria .info-cat-testo {
flex: 1 1 0;
min-width: 0;
}
/* Titolo e sottotitolo — stile identico a striscia-titolo-ist
ma allineato a sinistra */
.pagina_categoria .info_categoria .striscia-titolo-ist {
text-align: left;
margin-bottom: var(--space-4);
}
.pagina_categoria .info_categoria .descr_categoria {
font-size: var(--font-size-body-small);
color: var(--text-secondary);
line-height: var(--line-height-body);
}
.pagina_categoria .info_categoria .descr_categoria p {
margin-bottom: var(--space-3);
}
.pagina_categoria .info_categoria .descr_categoria p:last-child {
margin-bottom: 0;
}
/* Mobile — 768px = --bp-md */
@media (max-width: 768px) {
.pagina_categoria .info_categoria {
flex-direction: column;
}
.pagina_categoria .info-cat-img {
flex: 0 0 100%;
width: 100%;
}
}
/* Link newsletter */
#link_to_newsletter {
margin-block: var(--space-4);
text-align: center;
}
#link_to_newsletter a {
font-size: var(--font-size-body);
color: var(--interactive-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
#link_to_newsletter a:hover {
color: var(--interactive-primary-hover);
text-decoration: underline;
}
/* Rimuove il tag
inline del CMS */
#link_to_newsletter u {
text-decoration: none;
}
.show-error.error {
font-size: var(--font-size-body-small);
color: #c53030;
background-color: color-mix(in srgb, #e53e3e 10%, transparent);
border: 1px solid #e53e3e;
border-radius: var(--radius-sm);
padding: var(--space-4) var(--space-5);
margin-block: var(--space-8);
}
.show-error.error:empty {
display: none;
}
/* correzioni */
/*
Utility classes per contenitori
.text-huge -> Titolo sezione hero principale su pagine primarie
.text-medium -> Dimensioni corrette per descrizioni e link read more
*/
.text-huge h1 {
font-size: var(--font-size-h1-huge);
}
.text-medium .text-art, .text-medium .text-art p, .text-medium .readmore, .text-medium .readmore .readmore-link {
font-size: var(--font-size-desc);
}
/* Pagine */
.cta-link-light, .cta-link-dark {
font-size: var(--font-size-body);
}
.btn-more a {
font-size: var(--font-size-body);
}
article.titoli-sm h1 {
font-size: var(--font-size-title);
}
article.vis-articolo.lista-loghi .item-box.text-art {
gap: var(--gap-xl);
}
.prod-list .nome-prod {
font-size: var(--font-size-title);
}
article.vis-articolo {
gap: var(--gap-sm);
}
article.vis-articolo .item-box.text-art p:has(a[class^="cta-link"]) {
margin-top: var(--space-6);
}
article.vis-articolo.stile3 .item-box.text-art h3 {
font-size: var(--font-size-title);
}
article.vis-articolo.stile3 .item-box.art_subtitle .arttitle {
line-height: var(--line-height-body);
}
article.vis-articolo.stile3 .item-box.text-art p {
font-size: var(--font-size-body);
}
.doc-group-title {
font-size: var(--font-size-title);
}
.doc-link, .doc-size, .doc-login a, .doc-login .puls-login {
font-size: var(--font-size-desc);
}
#allegati {
max-width: 900px;
margin: 0 auto;
}
.modal-body .form_label, #link-rec-pwd, .modal-body .actions_link .bottone {
font-size: var(--font-size-body);
}
.productlist {
gap: var(--gap-xl) var(--gap-md);
/* padding-block: var(--space-16); */
}
.prod-list.stile1 .nome-prod, .productlist.stile1 .nome-prod {
font-size: var(--font-size-title);
}
.prod-list.stile1 .descr-breve-prod, .productlist.stile1 .descr-breve-prod {
font-size: var(--font-size-desc);
}
.prod-list.stile1 .bt-det-prod, .productlist.stile1 .bt-det-prod {
margin-top: 0;
}
.prod-list .fotoProdotto {
margin-bottom: var(--space-4);
}
.prod-list .descr-breve-prod {
font-size: var(--font-size-desc);
}
.prod-list .bt-det-prod {
margin-top: var(--space-2);
}
.features-list {
gap: var(--gap-sm) var(--gap-lg);
}
.prod-list.stile1, .productlist.stile1 {
gap: var(--gap-sm) var(--gap-lg);
}
.striscia-titolo-ist {
margin-bottom: var(--space-8);
}
.cont_categorie_prodotti .descr_cat p {
font-size: var(--font-size-desc);
}
#div-ricerca-avanzata .tab-label {
margin-bottom: 0;
}
section.cont_categorie_prodotti, div.cont_categorie_prodotti {
padding: 0;
}
/* Account */
.form_registrazione {
max-width: 600px;
margin: var(--space-10) auto;
}
/* Support */
.webform input[type="text"], .webform input[type="email"], .webform input[type="tel"], .webform input[type="number"], .webform input[type="password"], .webform input[type="search"], .webform .comment-input, .webform select {
font-size: var(--font-size-body);
}
.webform textarea, .webform .contact-textarea {
font-size: var(--font-size-body);
}
.webform .c_d_inputfile .button_browser {
font-size: var(--font-size-body);
}
.webform .submitbutton input[type="submit"], .webform .actions_link button[type="submit"], .webform .submitbutton .bottone {
font-size: var(--font-size-body);
}
.webform label {
font-size: var(--font-size-body);
}
.webform .input_element {
margin-top: var(--space-5);
}
#container_form_ticket .form_label {
font-size: var(--font-size-abstract);
line-height: var(--line-height-abstract);
letter-spacing: var(--letter-spacing-abstract);
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: var(--space-1);
}
#container_form_ticket .view_text,
#container_form_ticket .view_textarea {
color: var(--text-primary);
margin-bottom: var(--space-5);
}
#container_form_ticket #info_ticket_fields {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap-md);
padding: var(--space-5) 0;
border-top: 1px solid var(--border-default);
border-bottom: 1px solid var(--border-default);
margin-bottom: var(--space-5);
}
@media (max-width: 768px) {
#container_form_ticket #info_ticket_fields {
grid-template-columns: 1fr;
gap: var(--space-4);
}
}
#container_form_ticket #_stato_disabled {
width: auto;
min-width: 170px;
font-size: var(--font-size-nav);
font-weight: var(--font-weight-bold);
letter-spacing: var(--letter-spacing-nav);
text-align: center;
color: var(--text-inverse);
background: var(--bg-accent);
border: none;
border-radius: var(--radius-full);
padding: var(--space-2) var(--space-4);
}
#container_form_ticket #button_lista_ticket {
display: inline-block;
font-size: var(--font-size-nav);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-nav);
border: 1px solid var(--interactive-outline);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-4);
text-decoration: none;
margin: var(--space-2) 0 var(--space-6);
transition: var(--transition-base);
}
#container_form_ticket #button_lista_ticket:hover {
background: var(--interactive-primary-hover);
border-color: var(--interactive-primary-hover);
color: var(--text-inverse);
}
#lista_avanz .avanz {
background: var(--bg-section-light);
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
padding: var(--space-4) var(--space-5);
margin-bottom: var(--space-4);
}
#lista_avanz .info-avanz b {
font-size: var(--font-size-abstract);
letter-spacing: var(--letter-spacing-abstract);
font-weight: var(--font-weight-medium);
color: var(--text-secondary);
}
#lista_avanz .info-avanz-testo pre {
background: transparent;
padding: 0;
color: var(--text-primary) !important;
}
#lista_avanz .info-avanz-testo i {
font-style: normal;
}
#lista_avanz .info-avanz-testo b {
color: var(--text-primary);
font-weight: var(--font-weight-bold);
}
#lista_avanz .avanz:has(.info-avanz-testo b:first-child) {
border-left: 3px solid var(--interactive-outline);
}
/* ============================================================
GRADIENTE 3 — blu scuro in cima, grigio scuro in basso
============================================================ */
:root {
--primitive-gradient-3-start: #133144;
--primitive-gradient-3-end: #1e2227;
}
.bg-gradient-3 {
background: linear-gradient(
180deg,
var(--primitive-gradient-3-start) 0%,
var(--primitive-gradient-3-end) 100%
);
}
/* ============================================================
COMPONENTE: Articolo servizi (.stile-art-service)
ESEMPIO:
============================================================ */
article.vis-articolo.stile-art-service {
padding-block: var(--space-20);
padding-inline: var(--container-padding);
}
article.vis-articolo.stile-art-service .item-box.tag-art {
margin-bottom: var(--space-4);
text-align: center;
}
article.vis-articolo.stile-art-service .item-box.tag-art span {
display: inline-block;
font-size: var(--font-size-abstract);
font-weight: var(--font-weight-medium);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-inverse-muted);
}
article.vis-articolo.stile-art-service .item-box.art_title {
margin-bottom: var(--space-5);
text-align: center;
}
article.vis-articolo.stile-art-service .item-box.art_title .arttitle {
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
color: var(--text-inverse);
line-height: var(--line-height-heading);
}
article.vis-articolo.stile-art-service .item-box.art_subtitle {
margin-bottom: var(--space-8);
}
article.vis-articolo.stile-art-service .item-box.art_subtitle .arttitle {
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
color: var(--text-inverse-muted);
line-height: var(--line-height-body);
max-width: 640px;
margin-inline: auto;
}
article.vis-articolo.stile-art-service .cta_testata {
margin-bottom: var(--space-16);
}
article.vis-articolo.stile-art-service .item-box.text-art i {
font-size: 28px;
color: var(--interactive-primary);
background-color: color-mix(in srgb, var(--interactive-primary) 15%, transparent);
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
margin-bottom: var(--space-2);
}
article.vis-articolo.stile-art-service .item-box.text-art .grid-2 {
gap: var(--gap-xl);
max-width: 800px;
margin: auto;
}
article.vis-articolo.stile-art-service .item-box.text-art h3 {
font-size: var(--font-size-body);
font-weight: var(--font-weight-bold);
color: var(--text-inverse);
margin: 0;
}
article.vis-articolo.stile-art-service .item-box.text-art p {
color: var(--text-inverse-muted);
line-height: var(--line-height-body);
margin: 0;
}
article.vis-articolo.stile-art-service .item-box.text-art strong {
color: var(--text-inverse);
}
article.vis-articolo.stile-art-service .item-box.text-art [class*="grid-"] p,
article.vis-articolo.stile-art-service .item-box.text-art ul li p {
font-size: var(--font-size-body-small);
}
article.vis-articolo.stile-art-service .item-box.text-art h2,
article.vis-articolo.stile-art-service .item-box.text-art h3 {
margin-bottom: var(--gap-sm);
}
article.vis-articolo.stile-art-service .item-box.text-art ul {
list-style: disc;
padding-left: var(--gap-md);
margin-top: var(--gap-sm);
}
article.vis-articolo.stile-art-service .item-box.text-art ul li {
padding-left: var(--gap-xs);
}
article.vis-articolo.stile-art-service .item-box.text-art .support-border-div {
background-color: #1b1f23;
border: solid 1px var(--primitive-white);
padding: var(--gap-md);
border-radius: var(--radius-lg);
}
.background-dark span.stile-reverse {
color: var(--text-primary);
background-color: var(--primitive-border);
padding: var(--gap-xs) var(--gap-md);
border-radius: var(--radius-sm);
}
/* 992px = --bp-lg */
@media (max-width: 992px) {
article.vis-articolo.stile-art-service {
padding-block: var(--space-16);
}
article.vis-articolo.stile-art-service .item-box.art_title .arttitle {
font-size: var(--font-size-h2);
}
}
/* 576px = --bp-sm */
@media (max-width: 576px) {
article.vis-articolo.stile-art-service {
padding-block: var(--space-12);
padding-inline: var(--space-4);
}
}
.icon-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
background: #26333B;
flex-shrink: 0;
margin-bottom: var(--gap-sm);
}
.icon-circle span {
font-size: 0; /* lo sparisce: la sua larghezza è proporzionale al font-size */
line-height: 1;
color: var(--interactive-primary);
}
.icon-circle span::before {
font-size: 30px; /* l'icona torna visibile con la dimensione voluta */
line-height: 1;
}
/* ============================================================
COMPONENTE: Articolo con titolo su immagine (.titolo_su_immagine)
L'immagine principale esce dal container e va a tutta larghezza;
tag, titolo e sottotitolo sono sovrapposti centrati.
Il resto del contenuto resta nel container.
RICHIEDE jQuery:
$('article.titolo_su_immagine').each(function() {
$('.tag-art, .art_title, .art_subtitle', $(this))
.wrapAll("");
});
============================================================ */
article.vis-articolo.titolo_su_immagine {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"hero"
"content";
padding-block: 0;
gap: 0;
}
/* --- HERO: immagine full-bleed --- */
article.vis-articolo.titolo_su_immagine .item-box.first-img-articolo {
grid-area: hero;
/* esce dal container */
width: 100vw;
margin-inline: calc(50% - 50vw);
position: relative;
z-index: 0;
}
article.vis-articolo.titolo_su_immagine .item-box.first-img-articolo a,
article.vis-articolo.titolo_su_immagine .item-box.first-img-articolo figure {
display: block;
margin: 0;
pointer-events: none; /* l'immagine non è cliccabile in questo stile */
}
article.vis-articolo.titolo_su_immagine .item-box.first-img-articolo img {
width: 100%;
height: 100%;
height: 380px;
object-fit: cover;
border-radius: 0;
display: block;
}
/* Velo scuro per leggibilità del testo */
article.vis-articolo.titolo_su_immagine .item-box.first-img-articolo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(19, 49, 68, 0.75) 0%,
rgba(30, 34, 39, 0.65) 100%
);
}
/* --- OVERLAY: tag + titolo + sottotitolo --- */
article.vis-articolo.titolo_su_immagine .hero-overlay-content {
grid-area: hero;
z-index: 1;
align-self: center;
justify-self: center;
text-align: center;
max-width: 720px;
padding-inline: var(--container-padding);
padding-block: var(--space-12);
}
article.vis-articolo.titolo_su_immagine .item-box.tag-art {
margin-bottom: var(--space-3);
}
article.vis-articolo.titolo_su_immagine .item-box.tag-art span {
display: inline-block;
font-size: var(--font-size-abstract);
font-weight: var(--font-weight-medium);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-inverse-muted);
}
article.vis-articolo.titolo_su_immagine .item-box.art_title {
margin-bottom: var(--space-4);
}
article.vis-articolo.titolo_su_immagine .item-box.art_title .arttitle {
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
color: var(--text-inverse);
line-height: var(--line-height-heading);
margin: 0;
}
article.vis-articolo.titolo_su_immagine .item-box.art_subtitle .arttitle {
font-size: var(--font-size-body);
font-weight: var(--font-weight-regular);
color: var(--text-inverse-muted);
line-height: var(--line-height-body);
margin: 0;
}
/* --- CONTENUTO: colonna di lettura nel container --- */
article.vis-articolo.titolo_su_immagine .item-box.text-art {
grid-area: content;
margin-inline: auto;
padding-top: var(--space-16);
}
article.vis-articolo.titolo_su_immagine .item-box.text-art p {
font-size: var(--font-size-desc);
color: var(--text-primary);
line-height: var(--line-height-body);
margin-bottom: var(--space-4);
}
article.vis-articolo.titolo_su_immagine .item-box.text-art h2 {
font-size: var(--font-size-title);
font-weight: var(--font-weight-bold);
color: var(--text-primary);
margin-top: var(--space-10);
margin-bottom: var(--space-3);
}
/* Elimina i paragrafi vuoti ( ) generati dall'editor */
article.vis-articolo.titolo_su_immagine .item-box.text-art p:empty {
display: none;
}
/* Galleria altre immagini nel container */
article.vis-articolo.titolo_su_immagine .item-box.altre-img {
grid-area: content;
}
/* --- RESPONSIVE --- */
/* 992px = --bp-lg */
@media (max-width: 992px) {
article.vis-articolo.titolo_su_immagine .item-box.art_title .arttitle {
font-size: var(--font-size-h2);
}
}
/* 576px = --bp-sm */
@media (max-width: 576px) {
article.vis-articolo.titolo_su_immagine .item-box.first-img-articolo img {
height: 260px;
}
article.vis-articolo.titolo_su_immagine .hero-overlay-content {
padding-inline: var(--space-4);
}
}
.por article {
margin-bottom: var(--gap-xl);
}
.por article h2 {
margin-bottom: var(--gap-md);
}
.por article p {
margin-bottom: var(--gap-sm);
}
/* ============================================================
PRODUCT SPECS — righe chiave/valore con divisori
============================================================ */
.prd-specs {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
margin-block: var(--space-10);
}
.prd-spec {
flex: 1 1 0;
min-width: 160px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
text-align: center;
padding-inline: var(--space-6);
padding-block: var(--space-2);
position: relative;
}
/* Divisore verticale tra le colonne */
.prd-spec:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 60%;
background-color: var(--border-default);
}
/* Etichetta — piccola, uppercase, muted */
.prd-spec-label {
font-size: var(--font-size-abstract);
font-weight: var(--font-weight-medium);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-disabled);
}
/* Valore — grande, primario */
.prd-spec-value {
font-size: var(--font-size-title);
font-weight: var(--font-weight-regular);
color: var(--text-primary);
line-height: var(--line-height-heading);
}
/* Responsive — 768px = --bp-md */
@media (max-width: 768px) {
.prd-specs {
flex-direction: column;
}
.prd-spec {
padding-block: var(--space-4);
}
/* Divisori orizzontali su mobile */
.prd-spec:not(:last-child)::after {
right: auto;
left: 50%;
top: auto;
bottom: 0;
transform: translateX(-50%);
width: 40%;
height: 1px;
}
}
.cta-link-wrapper {
display: flex;
flex-direction: row;
gap: var(--gap-md, 16px); /* [Ipotesi] uso una tua variabile CSS esistente se presente, altrimenti fallback 16px */
flex-wrap: wrap; /* evita overflow orizzontale su mobile */
}
/* ============================================================
TABELLA GENERICA — table.docutils
============================================================ */
table.docutils {
width: 100%;
border-collapse: collapse;
border: none !important;
font-size: var(--font-size-desc);
color: var(--text-primary);
margin-block: var(--space-8);
}
/* Intestazioni */
table.docutils thead th {
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-abstract);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-abstract);
text-transform: uppercase;
color: var(--text-secondary);
background-color: var(--bg-section-light);
border: none;
border-bottom: 2px solid var(--border-default);
text-align: left;
vertical-align: middle;
white-space: nowrap;
}
table.docutils thead th strong {
font-weight: inherit;
}
/* Celle */
table.docutils tbody td {
padding: var(--space-2) var(--space-4);
border: none;
border-bottom: 1px solid var(--border-default);
text-align: left;
vertical-align: top;
background-color: transparent !important; /* annulla inline white */
}
/* Righe: annulla i background inline */
table.docutils tbody tr {
background-color: transparent !important;
}
table.docutils tbody tr:hover td {
background-color: color-mix(in srgb, var(--interactive-primary) 4%, transparent) !important;
}
/* Righe separatrici (quelle vuote grigie) → divisore marcato */
table.docutils tbody tr:has(td:only-child),
table.docutils tbody tr.spacer {
background-color: transparent !important;
}
/* Prima colonna — nome prodotto */
table.docutils tbody td:first-child {
font-weight: var(--font-weight-medium);
white-space: nowrap;
}
table.docutils tbody td strong a {
font-weight: var(--font-weight-bold);
}
/* Link */
table.docutils a,
table.docutils a:visited {
color: var(--interactive-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
table.docutils a:hover {
color: var(--interactive-primary-hover);
text-decoration: underline;
}
/* Neutralizza blockquote usati come wrapper nelle celle */
table.docutils blockquote,
table.docutils blockquote.first,
table.docutils blockquote.last {
margin: 0;
padding: 0;
border: none;
background: none;
font-size: inherit;
color: inherit;
quotes: none;
}
table.docutils blockquote > div {
display: block;
}
/* Neutralizza classi Bootstrap legacy nei link */
table.docutils .text-primary,
table.docutils .text-info {
color: var(--interactive-primary) !important;
}
/* Wrapper scroll orizzontale su schermi stretti */
/* 768px = --bp-md */
@media (max-width: 768px) {
table.docutils {
display: block;
overflow-x: auto;
white-space: nowrap;
font-size: var(--font-size-abstract);
}
table.docutils thead th,
table.docutils tbody td {
padding: var(--space-2) var(--space-3);
}
}