/* Hitechled Elementor Catalog — scheletro dei widget. Colori e tipografia arrivano dai Global di Elementor o dai controlli del widget: qui c'è solo ciò che serve alla struttura. */ .hlc-section { --hlc-radius: 16px; } .hlc-section__head { margin-bottom: 1.5rem; } .hlc-kicker { display: inline-block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .35rem; } .hlc-section__title { margin: 0; } .hlc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } @media (max-width: 1024px) { .hlc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .hlc-grid { grid-template-columns: 1fr; } } .hlc-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--hlc-radius); background: #fff; height: 100%; } .hlc-card__media { display: block; overflow: hidden; } .hlc-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; } .hlc-ratio-1-1 .hlc-card__media { aspect-ratio: 1 / 1; } .hlc-ratio-4-3 .hlc-card__media { aspect-ratio: 4 / 3; } .hlc-ratio-3-2 .hlc-card__media { aspect-ratio: 3 / 2; } .hlc-ratio-16-9 .hlc-card__media { aspect-ratio: 16 / 9; } .hlc-card__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem; flex: 1 1 auto; } .hlc-card__label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; } .hlc-card__title { margin: 0; font-size: 1.1rem; } .hlc-card__title a { text-decoration: none; color: inherit; } .hlc-card__text { margin: 0; } .hlc-card__meta { margin: 0; opacity: .75; font-size: .9rem; } .hlc-card .hlc-btn { margin-top: auto; align-self: flex-start; } .hlc-btn { display: inline-block; padding: .7rem 1.2rem; border-radius: 999px; text-decoration: none; line-height: 1; } .hlc-btn--sm { padding: .55rem 1rem; font-size: .9rem; } .hlc-rich > *:first-child { margin-top: 0; } .hlc-rich > *:last-child { margin-bottom: 0; } .hlc-rich--sm { font-size: .93rem; } .hlc-specs { display: grid; grid-template-columns: 1fr; gap: .25rem; margin: .5rem 0 0; } .hlc-spec { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid rgba(0,0,0,.08); } .hlc-spec dt { font-weight: 600; margin: 0; } .hlc-spec dd { margin: 0; text-align: right; } .hlc-tables__list { display: grid; gap: 1.25rem; } .hlc-table-card { border-radius: var(--hlc-radius); overflow: hidden; } .hlc-table-card__title { margin: 0 0 .75rem; font-size: 1.05rem; cursor: pointer; } .hlc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .hlc-table table { width: 100%; border-collapse: collapse; } .hlc-table th, .hlc-table td { padding: .6rem .8rem; border: 1px solid rgba(0,0,0,.1); text-align: left; vertical-align: top; } .hlc-table th { font-weight: 600; } .hlc-showcase__list { display: grid; gap: 2.5rem; } .hlc-showcase__list .hlc-card--showcase { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; background: none; box-shadow: none; } .hlc-showcase__list .hlc-card--showcase:nth-child(even) .hlc-card__media { order: 2; } .hlc-showcase__list.is-flipped .hlc-card--showcase .hlc-card__media { order: 2; } .hlc-showcase__list.is-flipped .hlc-card--showcase:nth-child(even) .hlc-card__media { order: 0; } .hlc-showcase__list .hlc-card--showcase.has-no-media { grid-template-columns: 1fr; } @media (max-width: 767px) { .hlc-showcase__list .hlc-card--showcase { grid-template-columns: 1fr; } .hlc-showcase__list .hlc-card--showcase .hlc-card__media { order: 0 !important; } } .hlc-embed { position: relative; aspect-ratio: 16 / 9; } .hlc-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .hlc-carousel { position: relative; } .hlc-carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 24px; padding-bottom: .5rem; } .hlc-carousel__track > * { flex: 0 0 clamp(240px, 25%, 340px); scroll-snap-align: start; } .hlc-carousel__track::-webkit-scrollbar { height: 6px; } .hlc-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(0,0,0,.65); color: #fff; font-size: 1.4rem; line-height: 1; z-index: 2; } .hlc-carousel__nav.is-prev { left: -12px; } .hlc-carousel__nav.is-next { right: -12px; } .hlc-carousel__nav[disabled] { opacity: .35; cursor: default; } .hlc-filterbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1.5rem; } .hlc-filterbar__group { display: flex; flex-wrap: wrap; gap: .4rem; } .hlc-filterbar__search, .hlc-filterbar__select { padding: .6rem .9rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); } .hlc-filterbar__search { min-width: 240px; flex: 1 1 240px; } .hlc-chip { padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); background: transparent; cursor: pointer; } .hlc-chip.is-active { background: currentColor; } .hlc-chip.is-active { color: inherit; box-shadow: inset 0 0 0 2px currentColor; } .hlc-catalog__item.is-hidden { display: none; } .hlc-catalog__empty { margin-top: 1.5rem; } .hlc-placeholder { padding: 1rem 1.25rem; border: 1px dashed rgba(0,0,0,.25); border-radius: 8px; font-size: .9rem; opacity: .75; } .hlc-empty { opacity: .75; } .hlc-video { margin-inline: auto; } .hlc-video.hlc-ratio-16-9 { aspect-ratio: 16 / 9; } .hlc-video.hlc-ratio-4-3 { aspect-ratio: 4 / 3; } .hlc-video.hlc-ratio-1-1 { aspect-ratio: 1 / 1; } /* --- Colori leggibili ------------------------------------------------------- Il tema imposta il colore dei titoli a bianco a livello globale. Senza queste dichiarazioni ogni intestazione dei widget eredita il bianco e sparisce sulle sezioni chiare. I valori restano sovrascrivibili dai controlli Elementor, che generano CSS più specifico. */ .hlc-section { color: #5A4A4A; } .hlc-kicker { color: #BB3522; font-weight: 700; } .hlc-section__title { color: #391313; font-weight: 700; line-height: 1.15; } .hlc-card { color: #5A4A4A; } .hlc-card__title, .hlc-card__title a { color: #391313; } .hlc-card__label { color: #BB3522; opacity: 1; font-weight: 700; } .hlc-card__text { color: #5A4A4A; } .hlc-btn { background: #BB3522; color: #fff; border-radius: 999px; padding: .8rem 1.5rem; text-decoration: none; font-weight: 600; display: inline-block; transition: background .2s ease; } .hlc-btn:hover, .hlc-btn:focus { background: #982919; color: #fff; } .hlc-btn--sm { padding: .6rem 1.15rem; font-size: .9rem; } /* Su fondo scuro il testo si inverte: la sezione Modelli è l'unica scura. */ .hlc-on-dark .hlc-section__title, .hlc-on-dark .hlc-card__title, .hlc-on-dark .hlc-card__title a { color: #fff; } .hlc-on-dark .hlc-kicker, .hlc-on-dark .hlc-card__label { color: #F2B8B0; } .hlc-on-dark, .hlc-on-dark .hlc-card, .hlc-on-dark .hlc-card__text { color: #DED3D3; } .hlc-card { box-shadow: 0 8px 24px rgba(0,0,0,.06); } .hlc-card__media { background: #fff; } /* --- Galleria --------------------------------------------------------------- */ .hlc-gallery__item { margin: 0; overflow: hidden; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.06); } .hlc-gallery .hlc-grid > .hlc-gallery__item { height: 100%; } .hlc-gallery__item img { width: 100%; height: 100%; display: block; object-fit: cover; } .hlc-gallery.hlc-ratio-1-1 .hlc-gallery__item, .hlc-gallery .hlc-ratio-1-1 .hlc-gallery__item { aspect-ratio: 1 / 1; } .hlc-grid.hlc-ratio-4-3 .hlc-gallery__item { aspect-ratio: 4 / 3; } .hlc-grid.hlc-ratio-3-2 .hlc-gallery__item { aspect-ratio: 3 / 2; } .hlc-grid.hlc-ratio-16-9 .hlc-gallery__item { aspect-ratio: 16 / 9; } .hlc-grid.hlc-ratio-1-1 .hlc-gallery__item { aspect-ratio: 1 / 1; } /* --- Specifiche ------------------------------------------------------------- */ .hlc-specs__list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 40px; margin: 0; } .hlc-specs__row { display: flex; justify-content: space-between; gap: 16px; padding: .8rem 0; border-bottom: 1px solid #E7DEDE; } .hlc-specs__label { margin: 0; font-size: .9rem; letter-spacing: .02em; } .hlc-specs__value { margin: 0; font-weight: 600; text-align: right; } @media (max-width: 767px) { .hlc-specs__list { grid-template-columns: 1fr; } } /* Le foto di categoria e famiglia sono scatti ambientati: vanno riempite. Gli scatti prodotto sono su fondo bianco e vanno contenuti, altrimenti si tagliano. */ .hlc-card--term .hlc-card__media img, .hlc-card--family .hlc-card__media img { object-fit: cover; } .hlc-card--product .hlc-card__media img { object-fit: contain; padding: .75rem; } .hlc-card__media { aspect-ratio: 4 / 3; } /* =========================================================================== Allineamento al design approvato (renderer V7.4). Qui c'è solo ciò che Elementor non può esprimere con i controlli: proporzioni delle immagini nelle card, card semitrasparenti su fondo scuro, carosello. Colori, raggi, padding e spaziature restano nei controlli dei widget. =========================================================================== */ .hlc-section { --hl-red: #DD3628; --hl-red2: #AA241E; --hl-pink: #F0C2BD; --hl-card-title: #232323; --hl-muted: #666; --hl-imgbg: #F6F6F6; } .hlc-kicker { color: var(--hl-red); font-weight: 800; font-size: 13px; letter-spacing: 5px; margin-bottom: 24px; } .hlc-section__title { color: #2D2D2D; font-weight: 500; letter-spacing: -.075em; line-height: 1; } .hlc-card { border: 1px solid rgba(0,0,0,.06); box-shadow: 0 20px 50px rgba(0,0,0,.08); } .hlc-card__media { background: var(--hl-imgbg); border-radius: 16px; margin: 0 0 22px; aspect-ratio: auto; } .hlc-card__media img { height: 245px; width: 100%; object-fit: contain; padding: 22px; } .hlc-card--term .hlc-card__media img, .hlc-card--family .hlc-card__media img { object-fit: cover; padding: 0; } .hlc-card__body { padding: 0; gap: 0; } .hlc-card__label { color: var(--hl-red); font-size: 12px; letter-spacing: 4px; font-weight: 900; margin-bottom: 14px; } .hlc-card__title, .hlc-card__title a { color: var(--hl-card-title); font-size: 28px; letter-spacing: -.045em; line-height: 1.08; margin-bottom: 14px; } .hlc-card__text { color: var(--hl-muted); font-size: 16px; line-height: 1.62; margin-bottom: 24px; } .hlc-btn { background: var(--hl-red); font-weight: 800; padding: 15px 30px; } .hlc-btn:hover { background: var(--hl-red2); transform: translateY(-1px); } .hlc-btn--sm { padding: 12px 22px; font-size: 14px; } @media (max-width: 767px) { .hlc-card__media img { height: 200px; } } /* Modelli e sezioni applicative vivono su fondo scuro: card in trasparenza */ .hlc-on-dark .hlc-card, .hlc-models .hlc-card, .hlc-showcase .hlc-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); color: #fff; box-shadow: none; } .hlc-on-dark .hlc-card__title, .hlc-on-dark .hlc-card__title a, .hlc-models .hlc-card__title, .hlc-models .hlc-card__title a { color: #fff; } .hlc-on-dark .hlc-card__text, .hlc-models .hlc-card__text { color: rgba(255,255,255,.86); } .hlc-models .hlc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } @media (max-width: 900px) { .hlc-models .hlc-grid { grid-template-columns: 1fr; } } /* Specifiche dentro la card modello */ .hlc-specs__list, .hlc-model-specs { gap: 0 18px; } .hlc-on-dark .hlc-specs__row, .hlc-models .hlc-specs__row { border-bottom-color: rgba(255,255,255,.13); } .hlc-on-dark .hlc-specs__label, .hlc-models .hlc-specs__label { color: rgba(255,255,255,.58); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; } .hlc-on-dark .hlc-specs__value, .hlc-models .hlc-specs__value { color: #fff; } /* Documenti */ .hlc-documents .hlc-grid { gap: 22px; } .hlc-card--doc .hlc-card__label { letter-spacing: 3px; } .hlc-card--doc .hlc-card__title { font-size: 20px; letter-spacing: 0; } /* Applicazioni: immagine a sinistra, testo a destra */ .hlc-showcase__item { display: grid; grid-template-columns: 360px 1fr; gap: 36px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.13); border-radius: 22px; padding: 28px; } .hlc-showcase__item img { width: 100%; height: 260px; object-fit: cover; border-radius: 16px; } .hlc-showcase__item.is-empty { display: block; } @media (max-width: 900px) { .hlc-showcase__item { grid-template-columns: 1fr; } } /* Carosello correlati */ .hlc-carousel { position: relative; overflow: hidden; padding-bottom: 92px; } .hlc-carousel__track { display: flex; gap: 28px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; padding: 8px 100px 26px 0; } .hlc-carousel__track > * { min-width: 310px; scroll-snap-align: start; } .hlc-carousel__track::-webkit-scrollbar { height: 8px; } .hlc-carousel__track::-webkit-scrollbar-thumb { background: rgba(217,52,38,.45); border-radius: 8px; } .hlc-carousel__nav { position: absolute; bottom: 18px; width: 54px; height: 54px; border-radius: 999px; border: 0; background: var(--hl-red); color: #fff; font-size: 24px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 14px 34px rgba(217,52,40,.25); z-index: 5; opacity: 1; } .hlc-carousel__nav.is-prev { right: 78px; left: auto; } .hlc-carousel__nav.is-next { right: 0; left: auto; } .hlc-carousel__nav:hover:not([disabled]) { background: var(--hl-red2); } .hlc-carousel__nav[disabled] { opacity: .35; cursor: default; } @media (max-width: 767px) { .hlc-carousel__track > * { min-width: 82vw; } } /* Tabelle tecniche come nell'originale */ .hlc-table-wrap table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; color: #333; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 55px rgba(0,0,0,.08); } .hlc-table-wrap th { background: #2D2D2D; color: #fff; font-weight: 800; padding: 16px; text-align: left; } .hlc-table-wrap td { padding: 14px 16px; border-bottom: 1px solid #ECECEC; color: #333; background: #fff; } .hlc-table-card { margin-bottom: 50px; } /* Griglia: passo dell'originale */ .hlc-grid { gap: 28px; } /* =========================================================================== Correzioni dopo la revisione video. =========================================================================== */ /* Le card avevano insieme aspect-ratio sul box e altezza fissa sull'immagine: la differenza restava come fascia grigia sotto la foto. Box di misura unica, immagine che lo riempie. */ .hlc-card__media { aspect-ratio: auto !important; height: 245px; background: #fff; display: block; overflow: hidden; } .hlc-card__media img { height: 100% !important; width: 100%; object-fit: cover !important; padding: 0 !important; display: block; } /* Gli scatti prodotto sono ritagli su fondo bianco: un filo di respiro evita che il soggetto tocchi i bordi, senza lasciare fasce vuote. */ .hlc-card--product .hlc-card__media img, .hlc-card--model .hlc-card__media img { object-fit: contain !important; padding: 14px !important; } @media (max-width: 767px) { .hlc-card__media { height: 200px; } } /* Filtri dell'indice: i chip erano bianchi su bianco */ .hlc-filterbar { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 34px; align-items: center; } .hlc-filterbar input, .hlc-search, .hlc-filters input[type="search"] { min-width: 280px; border: 1px solid #DDD; border-radius: 999px; padding: 14px 22px; background: #fff; color: #2D2D2D; font-size: 15px; } .hlc-filterbar input::placeholder { color: #8A8A8A; } .hlc-chip, .hlc-filterbar button { border: 1px solid rgba(0,0,0,.12); background: #fff; color: #2D2D2D; border-radius: 999px; padding: 12px 18px; cursor: pointer; font-weight: 700; font-size: 14px; line-height: 1; transition: .18s ease; } .hlc-chip:hover, .hlc-filterbar button:hover, .hlc-chip.is-active, .hlc-filterbar button.active { background: var(--hl-red, #DD3628); border-color: var(--hl-red, #DD3628); color: #fff; } .hlc-filters select { border: 1px solid #DDD; border-radius: 999px; padding: 13px 20px; background: #fff; color: #2D2D2D; } /* Tabelle tecniche: il corpo deve restare chiaro qualunque colore imposti il tema */ .hlc-technical-tables table, .hlc-table-wrap table { background: #fff !important; } .hlc-technical-tables td, .hlc-table-wrap td { background: #fff !important; color: #2D2D2D !important; } .hlc-technical-tables tr:nth-child(even) td, .hlc-table-wrap tr:nth-child(even) td { background: #FBF7F5 !important; } .hlc-technical-tables th, .hlc-table-wrap th { background: #2D2D2D !important; color: #fff !important; } /* Carosello correlati a tutta larghezza, frecce tonde fuori dalle card */ .hlc-related .hlc-carousel { padding-bottom: 96px; } .hlc-carousel__track { padding-right: 0; } .hlc-carousel__nav { bottom: 20px; top: auto; transform: none; } /* Una sezione il cui widget non ha dati non deve lasciare la sua fascia vuota */ .e-con:has(> .e-con-inner > .elementor-widget:only-child > .elementor-widget-container:empty), .e-con:has(> .elementor-widget:only-child > .elementor-widget-container:empty) { display: none !important; } /* =========================================================================== Revisione video 2 =========================================================================== */ /* Le foto prodotto devono riempire il box come quelle di categoria, non restare contenute con le fasce ai lati. */ .hlc-card--product .hlc-card__media img { object-fit: cover !important; padding: 0 !important; } /* I modelli no: sui prezziari sono disegni tecnici con la fascia del codice in alto e le quote sotto. Ritagliarli toglie proprio le informazioni. Restano interi e in proporzione, con un filo di respiro sul fondo bianco. */ .hlc-card--model .hlc-card__media img { object-fit: contain !important; padding: 14px !important; } /* Campo di ricerca a pillola come i bottoni */ .hlc-filters input[type="search"], .hlc-filters input[type="text"], .hlc-filterbar input, .hlc-search__input { border-radius: 999px !important; padding: 15px 24px !important; border: 1px solid #DDD !important; background: #fff !important; color: #2D2D2D !important; } .hlc-filters select { border-radius: 999px !important; padding: 14px 22px !important; } /* Percorso di risalita */ .hlc-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; letter-spacing: .02em; margin-bottom: 22px; } .hlc-breadcrumb a { text-decoration: none; transition: color .18s ease; } .hlc-breadcrumb__sep { opacity: .6; } /* Approfondimenti a due colonne: descrizione a sinistra, immagini a destra */ .hlc-deep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: start; } .hlc-deep .hlc-gallery .hlc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; } .hlc-deep .hlc-gallery__item { aspect-ratio: 4 / 3; } @media (max-width: 1024px) { .hlc-deep { grid-template-columns: 1fr; gap: 32px; } } /* Elenco puntato generato dalle specifiche scritte come prosa */ .hlc-autolist { margin: 0 0 24px 22px; padding: 0; } .hlc-autolist li { margin: 0 0 10px; line-height: 1.6; } /* Carosello a tutta larghezza con frecce ai lati: si intravede la card successiva al bordo dello schermo. */ .hlc-related .hlc-carousel { padding-bottom: 0; overflow: visible; } .hlc-related .hlc-carousel__track { padding: 8px 0 26px; scroll-padding-left: 0; } .hlc-related .hlc-carousel__nav { top: 45%; bottom: auto; transform: translateY(-50%); } .hlc-related .hlc-carousel__nav.is-prev { left: -22px; right: auto; } .hlc-related .hlc-carousel__nav.is-next { right: -22px; left: auto; } @media (max-width: 1024px) { .hlc-related .hlc-carousel__nav.is-prev { left: 4px; } .hlc-related .hlc-carousel__nav.is-next { right: 4px; } } /* Mobile: griglie a una colonna e hero che non sfora */ @media (max-width: 767px) { .hlc-grid { grid-template-columns: 1fr !important; } .hlc-specs__list { grid-template-columns: 1fr !important; } .hlc-breadcrumb { font-size: 13px; } .hlc-carousel__track > * { min-width: 78vw; } } /* =========================================================================== Revisione video 3 =========================================================================== */ /* Una sezione il cui widget non ha dati deve sparire del tutto, non lasciare la sua fascia di padding: il widget stampa un marcatore e il contenitore Elementor collassa. */ .hlc-is-empty { display: none; } .e-con:has(> .e-con-inner > .elementor-widget:only-child > .elementor-widget-container > .hlc-is-empty), .e-con:has(> .elementor-widget:only-child > .elementor-widget-container > .hlc-is-empty), .e-con:has(> .e-con-inner > .e-con:only-child > .elementor-widget:only-child > .elementor-widget-container > .hlc-is-empty) { display: none !important; } /* Campo di ricerca scuro con testo chiaro, come le card sottocategoria */ .hlc-filters input[type="search"], .hlc-filters input[type="text"], .hlc-filterbar input, .hlc-search__input { background: #170607 !important; color: #fff !important; border-color: #170607 !important; } .hlc-filters input::placeholder, .hlc-filterbar input::placeholder { color: rgba(255,255,255,.62) !important; } .hlc-filters input:focus, .hlc-filterbar input:focus { outline: none; border-color: var(--hl-red, #DD3628) !important; box-shadow: 0 0 0 3px rgba(221,54,40,.18); } /* Galleria in carosello: compatta le sezioni con molte foto e regge anche il caso di una foto sola */ .hlc-gallery--carousel .hlc-carousel { position: relative; overflow: hidden; } .hlc-gallery--carousel .hlc-carousel__track { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; padding: 4px 0 18px; } .hlc-gallery--carousel .hlc-carousel__track > .hlc-gallery__item { scroll-snap-align: start; margin: 0; } .hlc-gallery--carousel .hlc-carousel__track::-webkit-scrollbar { height: 8px; } .hlc-gallery--carousel .hlc-carousel__track::-webkit-scrollbar-thumb { background: rgba(221,54,40,.45); border-radius: 8px; } /* le frecce sono posizionate più in basso, nel blocco "Caroselli" */ /* con una sola immagine il carosello non serve */ .hlc-gallery--carousel .hlc-carousel__track > .hlc-gallery__item:only-child { flex: 0 0 min(560px, 100%); } .hlc-gallery--carousel:has(.hlc-gallery__item:only-child) .hlc-carousel__nav { display: none; } /* Le immagini della galleria avevano un filo di bianco sotto */ .hlc-gallery__item { line-height: 0; font-size: 0; } .hlc-gallery__item img { display: block; } /* =========================================================================== Caroselli: fine strisciata allineata e immagini che riempiono il riquadro =========================================================================== */ /* Quante card entrano lo decide la larghezza del carosello, non quella della finestra: la galleria vive in una colonna da ~700px, i correlati in una fascia da ~1330px, e devono comportarsi allo stesso modo. */ .hlc-carousel { container-type: inline-size; } /* `--hlc-gap` non impone la distanza, la dichiara: deve valere quella che il carosello usa davvero, altrimenti il conto della frazione non torna. */ .hlc-carousel__track { --hlc-gap: 28px; --hlc-per: 1; } .hlc-gallery--carousel .hlc-carousel__track { --hlc-gap: 20px; } .hlc-related .hlc-carousel__track { --hlc-gap: 28px; } /* La card vale un'esatta frazione della pista: così l'ultima visibile finisce sul bordo invece di restare tagliata a metà. */ .hlc-carousel__track > *, .hlc-gallery--carousel .hlc-carousel__track > .hlc-gallery__item { flex: 0 0 calc((100% - (var(--hlc-per) - 1) * var(--hlc-gap)) / var(--hlc-per)); min-width: 0; scroll-snap-align: start; } @container (min-width: 520px) { .hlc-carousel__track { --hlc-per: 2; } } @container (min-width: 860px) { .hlc-carousel__track { --hlc-per: 3; } } @container (min-width: 1180px) { .hlc-carousel__track { --hlc-per: 4; } } /* In carosello la classe del rapporto finisce sulla pista, non su una griglia: senza questa regola il riquadro non aveva altezza propria, `height: 100%` sull'immagine si risolveva in `auto` e ogni foto teneva la sua proporzione, lasciando il bianco sotto quelle più basse. */ .hlc-carousel__track.hlc-ratio-1-1 > .hlc-gallery__item { aspect-ratio: 1 / 1; } .hlc-carousel__track.hlc-ratio-4-3 > .hlc-gallery__item { aspect-ratio: 4 / 3; } .hlc-carousel__track.hlc-ratio-3-2 > .hlc-gallery__item { aspect-ratio: 3 / 2; } .hlc-carousel__track.hlc-ratio-16-9 > .hlc-gallery__item { aspect-ratio: 16 / 9; } /* Il tema dichiara l'altezza automatica sulle immagini con la stessa specificita' ma piu' avanti nella cascata, quindi qui serve un livello in piu': senza, l'immagine resta alta quanto vuole e il riquadro le sta largo. */ .hlc-gallery .hlc-gallery__item > img { width: 100%; height: 100%; object-fit: cover; } /* Frecce ai lati della striscia, una per parte, fuori dalle foto: la colonna lascia il posto con un margine laterale invece di far scorrere le immagini sotto i bottoni. */ .hlc-gallery--carousel .hlc-carousel { --hlc-nav: 54px; padding: 0 calc(var(--hlc-nav) + 14px); overflow: visible; } .hlc-gallery--carousel .hlc-carousel__track { overflow-x: auto; scrollbar-width: none; } .hlc-gallery--carousel .hlc-carousel__track::-webkit-scrollbar { height: 0; } .hlc-gallery--carousel .hlc-carousel__nav { box-sizing: border-box; padding: 0; width: var(--hlc-nav); height: var(--hlc-nav); top: 50%; bottom: auto; transform: translateY(-50%); } .hlc-gallery--carousel .hlc-carousel__nav.is-prev { left: 0; right: auto; } .hlc-gallery--carousel .hlc-carousel__nav.is-next { right: 0; left: auto; } /* Con una foto sola il carosello non serve: niente frecce, niente corsie vuote */ .hlc-gallery--carousel .hlc-carousel:has(.hlc-gallery__item:only-child) { padding: 0; } /* Sotto i 600px le corsie laterali mangerebbero la foto: le frecce tornano sotto la striscia, a destra. */ @media (max-width: 600px) { .hlc-gallery--carousel .hlc-carousel { padding: 0 0 68px; } .hlc-gallery--carousel .hlc-carousel__nav { top: auto; bottom: 0; transform: none; } .hlc-gallery--carousel .hlc-carousel__nav.is-prev { left: auto; right: 66px; } } /* La galleria resta agganciata mentre il testo accanto scorre. L'aggancio sta sul widget e la corsa gliela dà la colonna, che deve essere alta quanto la riga: per questo la riga è impostata su "stretch". Niente `align-self` qui: in una colonna flex agirebbe sull'asse orizzontale e il widget si stringerebbe fino a sparire. */ .elementor-widget.hlc-keep-yes { position: sticky; top: var(--hlc-sticky-top, 140px); } @media (max-width: 1024px) { .elementor-widget.hlc-keep-yes { position: static; } } /* La barra scura sotto i correlati era la barra di scorrimento della pista: il carosello si guida con le frecce, la barra è solo rumore. */ .hlc-carousel__track { scrollbar-width: none; -ms-overflow-style: none; } .hlc-carousel__track::-webkit-scrollbar { height: 0; width: 0; } /* La sezione "Applicazioni e approfondimenti" sparisce quando il termine non ha né il testo né le immagini: senza questa regola restava il solo titolo. I due marcatori sono fratelli, non sullo stesso nodo: `.hlc-is-empty` è il div stampato dal widget vuoto, `.hlc-text-empty` lo span del dynamic tag. */ .e-con:has(.hlc-text-empty):has(.hlc-is-empty) { display: none !important; } /* I correlati stanno in un contenitore a tutta larghezza, perché la striscia di card deve arrivare ai bordi; le altre sezioni sono in contenitori "boxed" da 1500px. Su schermi larghi i titoli finivano quindi a x diversi. Qui rientra solo l'intestazione, con la stessa misura del boxed: le card restano piene. */ .hlc-related .hlc-section__head { width: 100%; max-width: var(--hlc-boxed-width, 1500px); margin-inline: auto; } /* Su mobile fra percorso e titolo c'era il margine del breadcrumb più il gap della colonna: troppo per uno schermo stretto. */ @media (max-width: 767px) { .hlc-breadcrumb { margin-bottom: 6px; } } /* =========================================================================== Fase 2 — i modelli sono diventati schede prodotto =========================================================================== */ /* Le schede nate dai modelli portano il disegno tecnico del prodotto: la fascia col codice sta in alto e le quote in basso, quindi il box va riempito per contenimento. La regola della revisione del video 2 mette `cover` su tutte le card prodotto e qui taglierebbe via proprio quelle informazioni. Stesso trattamento gia' scelto nella fase 1 per `.hlc-card--model`. */ .hlc-card--product.hlc-card--disegno .hlc-card__media img { object-fit: contain !important; padding: 14px !important; } /* Il bottone della card porta al PDF, non a una pagina: l'icona lo dichiara senza allungare l'etichetta. */ .hlc-btn--scheda::after { content: ""; display: inline-block; width: .7em; height: .7em; margin-left: .55em; vertical-align: -.02em; background: currentColor; -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v10M4 6l4 4 4-4M1 13h14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0v10M4 6l4 4 4-4M1 13h14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Il titolo della card non e' piu' un link: senza questa regola eredita il colore del testo del corpo invece di quello scelto per i titoli. */ .hlc-card__title { color: inherit; } /* =========================================================================== Fase 4 — elenco documenti: cataloghi, condizioni di vendita, garanzie =========================================================================== */ .hlc-card--doc-file { display: flex; flex-direction: column; } .hlc-card--doc-file .hlc-card__body { flex: 1 1 auto; display: flex; flex-direction: column; } /* Le copertine dei cataloghi sono pagine A4 in verticale: contenute, non ritagliate, altrimenti sparisce il titolo stampato in cima. */ .hlc-card__media--doc { height: 320px; background: #fff; display: block; overflow: hidden; } .hlc-card__media--doc img { width: 100%; height: 100% !important; object-fit: contain !important; padding: 14px !important; display: block; } /* Le due azioni stanno in fondo alla card anche quando le descrizioni hanno lunghezze diverse: senza `margin-top:auto` i bottoni si allineano al testo e la griglia sembra sfalsata. */ .hlc-card__actions { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; } .hlc-btn--ghost { background: transparent; color: var(--hl-red, #DD3628); box-shadow: inset 0 0 0 2px currentColor; } .hlc-btn--ghost:hover { background: var(--hl-red, #DD3628); color: #fff; box-shadow: inset 0 0 0 2px var(--hl-red, #DD3628); } /* Il lettore occupa tutta la riga della griglia: un PDF dentro una colonna da un terzo non si legge. */ .hlc-doc-list--sfogliabile .hlc-card--doc-file:has(.hlc-doc__viewer:not([hidden])) { grid-column: 1 / -1; } .hlc-doc__viewer { width: 100%; margin-top: 18px; border-radius: 16px; overflow: hidden; background: #F7F3EE; } .hlc-doc__viewer iframe { width: 100%; height: 100%; border: 0; display: block; } /* Campo condizionale del modulo contatti: `hidden` da solo non basta, i moduli di Elementor mettono `display:flex` sui gruppi campo e vince sulla proprieta' di default dell'attributo. */ .elementor-field-group[hidden] { display: none !important; } /* La descrizione della card non e' piu' tagliata a 22 parole, quindi due card affiancate hanno testi di altezza diversa. La griglia le tiene alte uguali: il bottone va spinto in fondo, altrimenti insegue il testo e su una riga i pulsanti finiscono a quote diverse. Il margine sotto al testo resta come distanza minima. */ .hlc-card__text { margin-bottom: 0; } .hlc-card__body > .hlc-btn { margin-top: auto; align-self: flex-start; } /* La descrizione della card esce con la formattazione scritta in backend: elenchi puntati, grassetti, paragrafi. Serve dare loro uno stile qui, perche' dentro la card il tema non arriva e senza regole i punti elenco spariscono e i rientri saltano. */ .hlc-card__text--rich > *:first-child { margin-top: 0; } .hlc-card__text--rich > *:last-child { margin-bottom: 0; } .hlc-card__text--rich p { margin: 0 0 .7em; } .hlc-card__text--rich ul, .hlc-card__text--rich ol { margin: 0 0 .7em; padding-left: 1.25em; } .hlc-card__text--rich ul { list-style: disc; } .hlc-card__text--rich ol { list-style: decimal; } .hlc-card__text--rich li { margin: 0 0 .3em; list-style: inherit; display: list-item; } .hlc-card__text--rich strong, .hlc-card__text--rich b { font-weight: 700; color: var(--hl-card-title, inherit); } .hlc-card__text--rich a { color: var(--hl-red, #DD3628); text-decoration: underline; } .hlc-card__text--rich table { width: 100%; border-collapse: collapse; font-size: .92em; } .hlc-card__text--rich td, .hlc-card__text--rich th { border-bottom: 1px solid rgba(0,0,0,.08); padding: .35em .5em; text-align: left; } /* --------------------------------------------------------------------------- "Leggi altro" sulle card La classe di chiusura la mette lo script, mai il foglio di stile: senza JavaScript il testo deve restare leggibile per intero, perche' qui la card e' la scheda prodotto e non c'e' una pagina di dettaglio dietro. --------------------------------------------------------------------------- */ .hlc-card__text--chiuso { overflow: hidden; position: relative; } /* La sfumatura dice che sotto c'e' altro. Sta solo sui testi davvero tagliati, cosi' non compare su quelli che ci stanno per un soffio. */ .hlc-card__text--chiuso.hlc-card__text--troncabile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em; background: linear-gradient(to bottom, transparent, var(--hl-card-bg, #fff) 92%); pointer-events: none; } /* Il tema veste ogni