/*
* Restyle — rifiniture grafiche pagine prodotto (build-independent).
*
* File standalone servito da templates-custom/assets/ (cartella deployata via
* git-ftp, a differenza di assets/* esclusa dal deploy). Il core.css compilato
* e' FUORI dalla build Encore/SASS (build rotta su Node 22), quindi gli
* aggiustamenti grafici vivono qui e vengono caricati DOPO core.css/app.css
* (enqueue in private.php, priority 110) -> vincono nella cascata. Solo front-end.
*/
/* === 1) Card bianca SOPRA la foto — .materials-block (Materiali/Blocchi/...) ==
* Le due colonne (col-lg-7) si sovrappongono via .mr-lg-n7. In flexbox l'ordine
* di disegno segue l'order-modified document order: l'immagine e' order-lg-last
* (disegnata per ultima) e finiva SOPRA la card. Diamo alla colonna-card un
* contesto di impilamento piu' alto: la card bianca torna sopra la foto.
*/
@media (min-width: 992px) {
.materials-block .mr-lg-n7 {
position: relative;
z-index: 2;
}
}
/* === 2) Meno spazio tra hero ("slide") e titolo sottostante ==================
* L'hero .title_up_thumb usa .mb-lg-6 (margin-bottom:6rem!important su desktop).
* Lo riduciamo. Specificita' (0,2,0) + !important per battere l'utility BS4.
*/
@media (min-width: 992px) {
.title_up_thumb.mb-lg-6 {
margin-bottom: 1.5rem !important;
}
}
/* === 3) Titoli: spaziatura tra le lettere piu' stretta =======================
* core.css: .h1,.h2,h1,h2{letter-spacing:.2rem}. La riduciamo. Prefisso body
* per vincere sulla regola di core (stessa specificita') senza usare !important.
*/
body h1,
body h2,
body .h1,
body .h2 {
letter-spacing: .05rem;
}
/* === 4) Verde di sezione: dalla griglia collezioni alla sezione catalogo ====
* Nelle tavole XD (Home e Cuscini a Stampo) la griglia "Le nostre collezioni"
* sta su BIANCO; il verde #e6f0e1 ($background_green) col taglio diagonale e'
* lo sfondo della sezione catalogo. Il CSS compilato invece lo metteva su
* #box-collections (clip-path + height fissa 1000px) e il banner Home ci
* saliva dentro con margin-top:-250px. */
#box-collections {
/* trasparente (non bianco): il wedge verde del form sottostante risale
* fin sotto la griglia (z-index:-1) e deve restare visibile. */
background-color: transparent !important; /* batte $background_green!important e .bg-light */
clip-path: none;
height: auto;
}
@media screen and (min-width: 992px) {
.catalog {
margin-top: 0; /* saliva nel wedge verde della griglia, che non c'e' piu' */
}
}
/* Banner catalogo della Home: verde pieno con tagli diagonali sopra e sotto. */
.catalog {
background-color: #e6f0e1;
clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%);
padding: 5.5rem 0;
}
/* Form catalogo compatto (pagine prodotto e collezioni): verde full-bleed con
* taglio diagonale in alto. Pseudo-elemento perche' il blocco e' un .container
* (non full-width); NON tocca il form esteso (.container.catalogo senza mt-4)
* della pagina Catalogo. bottom negativo: si aggancia alla striscia newsletter. */
.container.mt-4.catalogo {
position: relative;
padding-top: 3rem;
padding-bottom: 2rem;
}
.container.mt-4.catalogo::before {
content: '';
position: absolute;
z-index: -1;
top: -130px; /* il lato destro della diagonale sale oltre la sezione, sotto la griglia */
bottom: -1.5rem;
left: 50%;
width: 100vw;
transform: translateX(-50%);
background-color: #e6f0e1;
clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 100%);
}
/* === 6) Hero grandi: altezza fissa + parallasse =============================
* Gli hero a tutta pagina (collezioni, Azienda, Tecnologia, Materiali, ...)
* scendono da 100vh a una fascia fissa; la foto ha una parallasse leggera
* allo scroll (parallax.js). La custom property --wbg-hero e' il contratto
* col JS: 'parallax' = attiva; le testate basse la azzerano (sezione 5).
* Stessa specificita' (0,5,0) del 100vh di core.css ma caricato dopo -> vince.
*/
.position-relative.img-fluid.d-block.mx-auto.w-100 {
height: clamp(500px, 82vh, 960px);
--wbg-hero: parallax;
}
/* === 7) Griglia Federe (XD tavola FEDERE) ===================================
* Card statiche non cliccabili: 4 per riga da lg (come la tavola XD, 4x2),
* nome maiuscolo + breve testo sotto. Markup in blocks/block-page/federe-grid.php.
*/
@media (min-width: 992px) {
.wbg-federa-card {
flex: 0 0 25%;
max-width: 25%;
}
}
/* Su mobile una federa per riga (doc Federica: "su mobile un prodotto per riga,
* ora ce ne sono 2"). Il markup e' .col-6 col-md-4: da 0 a 767px sono 2 per riga
* (.col-6) -> e' proprio il range che il cliente vede sul telefono. Sotto i 768px
* le portiamo a piena larghezza; 768-991 restano 3 (col-md-4), desktop 4 (sopra). */
@media (max-width: 767.98px) {
.wbg-federa-card {
flex: 0 0 100%;
max-width: 100%;
}
.wbg-federa-card img {
height: auto;
max-height: 260px;
}
}
/* Box foto ad altezza fissa + foto allineate in basso: i nomi delle card
* sulla stessa riga partono tutti dalla stessa quota ("aggiusta le allineate"). */
.wbg-federa-card img {
height: 210px;
object-fit: contain;
object-position: center bottom;
width: 100%;
}
@media (max-width: 991.98px) {
.wbg-federa-card img { height: 170px; }
}
.wbg-federa-card h5 {
letter-spacing: .08em;
}
.wbg-federa-card .wbg-federa-testo {
font-size: 90%;
color: #555;
}
/* === 8) Sezioni brand Materiali (XD tavola "Materiali") =====================
* Foto + marchietto + testo + scheda tecnica in tabella + Scarica scheda.
* Markup in blocks/block-page/materiali-brand.php (righe pari speculari).
*/
.wbg-materiali-brand {
margin-top: 3rem;
margin-bottom: 3rem;
}
.wbg-mb-row {
margin-bottom: 0; /* la spaziatura tra le fasce la dà la lineetta .wbg-mb-divider */
}
/* Lineetta divisoria tra una fascia brand e la successiva (tavola XD).
* Margine ridotto (Federica 14 lug: "compattiamo, meno spazio bianco"). */
/* Lineetta "leggermente piu' scura, come la home" (doc Federica): la home usa
* grey (#808080). Qui adottiamo lo stesso grigio ma tenendo 1px (la home e' 2px)
* -> piu' scura ma non pesante. */
.wbg-mb-divider {
border: 0;
border-top: 1px solid #808080;
margin: 3rem 0;
}
.wbg-mb-logo {
max-height: 70px;
width: auto;
margin-bottom: 1.25rem;
}
/* Foto delle fasce piu' piccole (Federica 14 lug: "sono troppo grandi"):
* cap alla larghezza; resta responsive (min con 100% -> su mobile riempie). */
.wbg-mb-row img.img-fluid {
max-width: min(100%, 520px);
}
.wbg-mb-scheda {
width: 100%;
margin: 1.5rem 0 1rem;
border-collapse: collapse;
font-size: .95rem;
}
.wbg-mb-scheda th,
.wbg-mb-scheda td {
border: 1px solid #d8d8d8;
padding: .45rem .75rem;
text-align: left;
}
.wbg-mb-scheda th {
font-weight: 600;
width: 40%;
background: #f4f8f2;
}
a.wbg-mb-scarica,
a.wbg-mb-scarica:link,
a.wbg-mb-scarica:visited {
display: inline-block;
margin-top: 1rem;
padding: 14px 30px;
background-color: #e4f0e3;
color: #1a1a1a;
font-weight: 700;
font-size: .95rem;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
border: 0;
border-radius: 0;
box-shadow: 6px 8px 16px rgba(0, 0, 0, .12);
transition: background-color .2s ease, box-shadow .2s ease;
}
a.wbg-mb-scarica:hover,
a.wbg-mb-scarica:focus {
background-color: #d6e8d4;
color: #1a1a1a;
text-decoration: none;
box-shadow: 6px 10px 20px rgba(0, 0, 0, .16);
}
/* Riga bottoni: "Scarica la scheda" + "Approfondisci" affiancati */
.wbg-mb-actions {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 1.25rem;
}
.wbg-mb-actions a.wbg-mb-scarica {
margin-top: 0; /* il margine sopra lo dà .wbg-mb-actions */
}
/* Desktop: sulle fasce speculari (foto a destra) i bottoni vanno a destra */
@media (min-width: 992px) {
.text-lg-right .wbg-mb-actions {
justify-content: flex-end;
}
}
/* Mobile/tablet: allineamento bottoni SEMPRE uguale su tutte le fasce
* (niente alternanza destra/sinistra come sul desktop) */
@media (max-width: 991.98px) {
.wbg-materiali-brand .wbg-mb-actions {
justify-content: flex-start;
}
}
/* Telefoni: i due bottoni più piccoli e affiancati (metà e metà) */
@media (max-width: 767.98px) {
.wbg-mb-actions {
flex-wrap: nowrap;
gap: .5rem;
}
.wbg-mb-actions a.wbg-mb-scarica,
.wbg-mb-actions a.wbg-mb-approfondisci {
flex: 1 1 0;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 10px 8px;
font-size: .72rem;
letter-spacing: .02em;
line-height: 1.15;
}
}
/* "Approfondisci": CTA primaria verde piena, accanto alla scheda */
a.wbg-mb-approfondisci,
a.wbg-mb-approfondisci:link,
a.wbg-mb-approfondisci:visited {
display: inline-block;
padding: 14px 30px;
background-color: #227c26;
color: #fff;
font-weight: 700;
font-size: .95rem;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
border: 0;
border-radius: 0;
box-shadow: 6px 8px 16px rgba(0, 0, 0, .12);
transition: background-color .2s ease, box-shadow .2s ease;
}
a.wbg-mb-approfondisci:hover,
a.wbg-mb-approfondisci:focus {
background-color: #1b641e;
color: #fff;
text-decoration: none;
box-shadow: 6px 10px 20px rgba(0, 0, 0, .16);
}
/* Bottone "Scarica la scheda" (PDF) sotto il contenuto delle pagine materiale */
.wbg-scheda-pdf {
margin: 1rem auto 2.5rem;
text-align: left;
}
/* Foto e marchietto/nome cliccabili verso la pagina di approfondimento.
* Hover uguale a quello della Home "I nostri prodotti" (doc Federica: "dare
* un effetto alle immagini all'hover dei materiali, come i blocchi della home"):
* la figura si solleva di 4px (transform), niente piu' schiarimento. */
a.wbg-mb-fotolink,
a.wbg-mb-namelink {
display: inline-block;
text-decoration: none;
color: inherit;
}
a.wbg-mb-fotolink img,
a.wbg-mb-namelink .wbg-mb-logo,
a.wbg-mb-namelink {
transition: transform .25s ease, opacity .2s ease;
}
a.wbg-mb-fotolink:hover img,
a.wbg-mb-fotolink:focus img,
a.wbg-mb-namelink:hover .wbg-mb-logo,
a.wbg-mb-namelink:hover {
transform: translateY(-4px);
text-decoration: none;
}
/* Marchietto (loghetto) nell'hero delle singole pagine materiale, al posto del
* nome testuale: il valore di title_up_h2 e' un ![]()
.
* Marchietti PNG a fondo trasparente -> si posano puliti sul box chiaro
* (#info-card = rgba(255,255,255,.7)) senza riquadro bianco. */
.wbg-hero-marchietto {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 74px;
margin: 0 0 .75rem;
}
@media (max-width: 767.98px) {
.wbg-hero-marchietto {
max-height: 56px;
}
}
/* === 8b) Font dei nomi sotto le figure (doc Federica) ========================
* Montserrat per tutti i nomi sotto le figure.
* - Pagina Cuscini a Stampo (griglia collezioni #box-collections): Semi bold +
* Medium. I nomi composti hanno la prima parte in (es. memorycare,
* cleanmemory) -> prima parte Semi bold 600, resto Medium 500.
* - Pagina Federe: titoli Semi bold 600 uniforme.
* (I 4 nomi della Home sono in home.css: .wbg-hp-title -> 600.) */
#box-collections .card-body h5 {
font-family: 'Montserrat', sans-serif;
font-weight: 500; /* Medium (seconda parte dei nomi composti) */
font-size: 1.4rem; /* era 1.25rem (h5 core): "aumentare un po' la dimensione" (doc) */
}
#box-collections .card-body h5 b,
#box-collections .card-body h5 strong {
font-weight: 600; /* Semi bold (prima parte) */
}
.wbg-federa-card h5 {
font-family: 'Montserrat', sans-serif;
font-weight: 600; /* Semi bold, uniforme */
}
.wbg-federa-card h5 b,
.wbg-federa-card h5 strong {
font-weight: 600;
}
/* === 9) Rifiniture doc Federica ==============================================
* (a) Centrature/dimensioni uniformi dei titoli intro dei contenuti: il
* riferimento "giusto" e' Chi siamo, che usa un H3 (via Kadence, il cui
* CSS e' solo text-align:center); le altre pagine hanno H2 core piu'
* grandi -> qui si uniforma tutto alla misura H3 (doc, punto 8).
* (b) Titoli dentro ai box (info-card) a misura H3 (doc, punto 6).
* (c) "R di registrato" piccola: i caratteri (r) nel testo vengono avvolti in
* da reg.js (doc, punto 5).
* (d) Voci non-bold del menu mobile piu' leggibili (doc, punto 9).
*/
.entry-content h2.wp-block-heading.has-text-align-center,
.entry-content h3.wp-block-heading.has-text-align-center,
.entry-content .wp-block-kadence-advancedheading {
font-size: 1.75rem; /* = h3 Bootstrap, come Chi siamo */
}
.discontinuous-blocks .info-card h2,
.materials-block .card-body h3 {
font-size: 1.75rem;
}
sup.wbg-reg {
font-size: .55em;
top: -.6em;
letter-spacing: 0;
}
@media (max-width: 991.98px) {
#navigator .nav-link,
#navigator .dropdown-item {
font-weight: 500;
}
}
/* === 5) Testata bassa (XD/doc Federica) ======================================
* Nel progetto XD le pagine "di servizio" hanno l'hero ridotto a una fascia
* (tavole FEDERE/CUSCINI STAMPO: immagine 1920x425 di design ~ 22vw) invece del
* 100vh di core.css (.position-relative.img-fluid...{height:100vh}). Il doc la
* chiede per: Contatti, Catalogo, News, Federe. NIENTE offset verticali fissi:
* il titolo e' centrato dal flex parent (align-items:center) a ogni larghezza.
* Pagine attive: Contatti (template IT+EN), Catalogo (page-id 681 IT/1203 EN),
* News elenco (body.blog) e articolo (body.single-post). Per estendere a
* un'altra pagina basta aggiungere la sua body class ai TRE selettori sotto.
* Il selettore-immagine replica quello di core.css (0,6,0 > 0,5,0) per vincere
* senza !important.
*/
.page-template-tpl-contacts .title_up_thumb .position-relative.img-fluid.d-block.mx-auto.w-100,
.page-id-681 .title_up_thumb .position-relative.img-fluid.d-block.mx-auto.w-100,
.page-id-1203 .title_up_thumb .position-relative.img-fluid.d-block.mx-auto.w-100,
body.blog .title_up_thumb .position-relative.img-fluid.d-block.mx-auto.w-100,
body.single-post .title_up_thumb .position-relative.img-fluid.d-block.mx-auto.w-100,
.page-id-2493 .title_up_thumb .position-relative.img-fluid.d-block.mx-auto.w-100,
.page-id-2494 .title_up_thumb .position-relative.img-fluid.d-block.mx-auto.w-100,
.page-id-2495 .title_up_thumb .position-relative.img-fluid.d-block.mx-auto.w-100,
.page-id-2496 .title_up_thumb .position-relative.img-fluid.d-block.mx-auto.w-100,
.page-id-93 .title_up_thumb .position-relative.img-fluid.d-block.mx-auto.w-100,
.page-id-1206 .title_up_thumb .position-relative.img-fluid.d-block.mx-auto.w-100 {
height: clamp(230px, 22vw, 430px);
--wbg-hero: none; /* niente parallasse sulle testate basse */
}
/* Titolo centrato sulla fascia (in XD non e' piu' spostato a destra). */
.page-template-tpl-contacts .title_up_thumb .col-md-6.offset-md-6,
.page-id-681 .title_up_thumb .col-md-6.offset-md-6,
.page-id-1203 .title_up_thumb .col-md-6.offset-md-6,
body.blog .title_up_thumb .col-md-6.offset-md-6,
body.single-post .title_up_thumb .col-md-6.offset-md-6,
.page-id-2493 .title_up_thumb .col-md-6.offset-md-6,
.page-id-2494 .title_up_thumb .col-md-6.offset-md-6,
.page-id-2495 .title_up_thumb .col-md-6.offset-md-6,
.page-id-2496 .title_up_thumb .col-md-6.offset-md-6,
.page-id-93 .title_up_thumb .col-md-6.offset-md-6,
.page-id-1206 .title_up_thumb .col-md-6.offset-md-6 {
margin-left: 0;
flex: 0 0 100%;
max-width: 100%;
text-align: center;
}
/* Titolo come nelle tavole XD: Montserrat 57px su 1920 (~3vw) con tracking
* largo 0.223em (il margin-right negativo compensa lo spazio dopo l'ultima
* lettera, che altrimenti scentra il testo centrato). */
.page-template-tpl-contacts .title_up_thumb h1,
.page-template-tpl-contacts .title_up_thumb .h1,
.page-id-681 .title_up_thumb h1,
.page-id-681 .title_up_thumb .h1,
.page-id-1203 .title_up_thumb h1,
.page-id-1203 .title_up_thumb .h1,
body.blog .title_up_thumb h1,
body.blog .title_up_thumb .h1,
body.single-post .title_up_thumb h1,
body.single-post .title_up_thumb .h1,
.page-id-2493 .title_up_thumb h1,
.page-id-2493 .title_up_thumb .h1,
.page-id-2494 .title_up_thumb h1,
.page-id-2494 .title_up_thumb .h1,
.page-id-2495 .title_up_thumb h1,
.page-id-2495 .title_up_thumb .h1,
.page-id-2496 .title_up_thumb h1,
.page-id-2496 .title_up_thumb .h1,
.page-id-93 .title_up_thumb h1,
.page-id-93 .title_up_thumb .h1,
.page-id-1206 .title_up_thumb h1,
.page-id-1206 .title_up_thumb .h1,
/* Contatti IT/EN: il titolo della testata è scritto a mano nel contenuto come
*