/*
* Livello di miglioramenti sopra la replica.
*
* Il markup viene da Elementor e non si tocca: tutto qui è sovrascrittura,
* caricata dopo i fogli originali. Serve per poter tornare indietro
* togliendo un file solo, e per non perdere le modifiche se un domani lo
* snapshot venisse rigenerato.
*
* Ambito: intestazione, prima sezione della home, menu mobile, pagina
* contatti e pulsanti fissi.
*/
:root {
--mattone: #77342e;
--mattone-chiaro: #a04a41;
/* il mattone di marca è troppo spento sopra il nero: sui fondi scuri
serve una versione accesa, altrimenti il pulsante sembra disattivato */
--mattone-vivo: #c9503f;
/* al passaggio si scurisce invece di schiarirsi: sul chiaro il bianco
sopra restava sotto la soglia di contrasto */
--mattone-vivo-scuro: #ad3e2d;
--inchiostro: #161412;
--carta: #f5f1ec;
}
/* ------------------------------------------------------------ fondo pagina */
/*
* Il corpo era bianco puro come le sezioni che gli stanno sopra: ottomila
* pixel di foglio unico, senza stacchi, con le schede bianche su bianco
* riconoscibili solo dall'ombra.
*
* Basta scaldare il fondo: le sezioni che hanno il bianco dichiarato
* restano bianche e nasce l'alternanza che prima non si vedeva, mentre le
* schede si staccano da sole. Il contrasto del testo non cambia, il fondo
* si muove di pochi punti e resta chiaro.
*/
html body,
body > .pagina-replica {
background-color: var(--carta) !important;
}
/* ---------------------------------------------------------------- header */
/*
* Era una fascia grigia semitrasparente che sembrava un errore di
* rendering. Qui diventa scura e solida, con la stessa famiglia di colori
* del resto del sito.
*/
/*
* L'intestazione deve restare in vista mentre si scorre: il menu e il
* pulsante del preventivo servono soprattutto a metà pagina, dove si è
* appena letto qualcosa che interessa.
*
* Gli !important non sono ornamentali: il tema Header Footer Elementor
* dichiara `.ehf-header #masthead{position:relative;z-index:99}`, e quel
* selettore ha una classe in più del nostro, quindi vincerebbe comunque
* questo foglio venga caricato per ultimo.
*/
#masthead {
position: sticky !important;
top: 0 !important;
z-index: 999 !important;
background: rgba(22, 20, 18, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
#masthead .elementor-section {
background-color: transparent !important;
}
/* dopo lo scorrimento si stacca dal contenuto con un'ombra leggera */
body.header-staccato #masthead {
background: rgba(22, 20, 18, 0.98);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}
/* il logo era piccolo e slavato sul grigio */
#masthead img {
transition: transform 0.25s ease;
}
/* le voci di menu avevano poco spazio per essere colpite col dito */
#masthead .wpr-menu-item {
padding-block: 0.5rem;
letter-spacing: 0.01em;
}
/*
* La voce corrente e quella sotto il puntatore erano #75352C, cioè il
* mattone scuro: su una fascia quasi nera restava un marrone spento, meno
* leggibile delle voci normali. Chi sta guardando la pagina corrente non
* riusciva a capire dove si trovava.
*
* Il colore non serve a distinguere: lo fa il segno sotto la voce, che si
* vede anche a colpo d'occhio. Il testo resta bianco e leggibile.
*/
#masthead .wpr-nav-menu .wpr-menu-item {
color: rgba(255, 255, 255, 0.82) !important;
position: relative;
transition: color 0.2s ease;
}
#masthead .wpr-nav-menu .wpr-menu-item:hover,
#masthead .wpr-nav-menu .menu-item-has-children:hover > .wpr-sub-icon,
#masthead .wpr-nav-menu .wpr-menu-item.wpr-active-menu-item {
color: #fff !important;
}
#masthead .wpr-nav-menu .wpr-menu-item.wpr-active-menu-item::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0.1rem;
height: 2px;
border-radius: 2px;
background: var(--mattone-vivo);
}
/* il bottone Preventivo si confondeva con lo sfondo */
#masthead .elementor-button,
#masthead .wpr-button,
#masthead .wpr-button-wrapper a {
background-color: var(--mattone-vivo) !important;
border-radius: 999px !important;
padding: 0.85em 1.9em !important;
font-weight: 600 !important;
letter-spacing: 0.02em;
transition: background-color 0.2s ease, transform 0.2s ease;
}
#masthead .elementor-button:hover,
#masthead .wpr-button:hover,
#masthead .wpr-button-wrapper a:hover {
background-color: var(--mattone-vivo-scuro) !important;
transform: translateY(-1px);
}
/* ------------------------------------------------------------------ hero */
/*
* Il titolo bianco cadeva sopra le travi chiare della foto e diventava
* illeggibile a metà frase. Una velatura scura, più densa a sinistra dove
* sta il testo, risolve senza scurire tutta l'immagine.
*/
.elementor-element-6a39a19b0 > .elementor-background-overlay {
background-image: linear-gradient(
100deg,
rgba(12, 10, 9, 0.82) 0%,
rgba(12, 10, 9, 0.62) 42%,
rgba(12, 10, 9, 0.25) 75%,
rgba(12, 10, 9, 0.15) 100%
) !important;
opacity: 1 !important;
}
/*
* Titolo, testo e inviti all'azione stanno tutti incolonnati al centro.
* Prima il titolo partiva da sinistra e i due pulsanti restavano appesi in
* fondo a sinistra, in una griglia larga metà sezione: sembravano due cose
* separate invece che la chiusura del blocco.
*/
.elementor-element-6a39a19b0 .elementor-element-ecee88 > .elementor-widget-wrap {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: center !important;
text-align: center;
}
.elementor-element-6a39a19b0 .elementor-element-45d0ede,
.elementor-element-6a39a19b0 .elementor-element-77ad3fce {
width: 100% !important;
margin-inline: auto !important;
text-align: center !important;
}
/*
* Testo e pulsanti stavano in una colonna larga metà sezione, la prima di
* due: la seconda è vuota da sempre — è rimasta lì dallo schema originale
* a due colonne. Tenendola in piedi il blocco restava schiacciato a
* sinistra, e centrare i pulsanti li avrebbe centrati solo dentro quella
* metà. Si toglie la colonna vuota e la prima prende tutta la larghezza.
*/
.elementor-element-6a39a19b0 .elementor-element-2480bfdc {
display: none !important;
}
.elementor-element-6a39a19b0 .elementor-element-2f7e5215 {
width: 100% !important;
}
/* la linea di stacco seguiva il testo a sinistra */
.elementor-element-6a39a19b0 .elementor-divider {
justify-content: center;
}
/*
* Il titolo correva fino al bordo destro. Misura in pixel e non in ch:
* su un carattere da 60px anche poche ch valgono mezzo schermo, e il
* titolo finiva strozzato su sette righe.
*/
.elementor-element-6a39a19b0 h1 {
display: block !important;
width: 100% !important;
max-width: 920px;
margin-inline: auto;
line-height: 1.08 !important;
letter-spacing: -0.015em;
text-wrap: balance;
text-align: center !important;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.elementor-element-6a39a19b0 .wpr-advanced-text,
.elementor-element-6a39a19b0 .wpr-advanced-text-preffix {
display: block !important;
width: 100% !important;
text-align: center !important;
}
/*
* Era una riga sola: "Carpenteria Ticinese Sagl — Tetti e Strutture in
* Legno nel Canton Ticino". Il trattino teneva insieme due cose diverse,
* il nome e ciò che si fa, e a schermo stretto cadeva a inizio riga da
* solo. Ora sono due righe: sopra il nome, sotto cosa facciamo.
*/
.elementor-element-6a39a19b0 h1 .titolo-marchio,
.elementor-element-6a39a19b0 h1 .titolo-sottotitolo {
display: block;
}
.elementor-element-6a39a19b0 h1 .titolo-sottotitolo {
margin-top: 0.5rem;
font-size: 0.5em;
font-weight: 500;
letter-spacing: 0.005em;
line-height: 1.25;
color: rgba(255, 255, 255, 0.88);
}
.elementor-element-6a39a19b0 p {
max-width: 56ch;
margin-inline: auto;
line-height: 1.65 !important;
/* il blocco era centrato ma il testo dentro restava a bandiera a sinistra:
sotto un titolo centrato si vedeva solo che qualcosa non tornava */
text-align: center;
}
/* i due inviti all'azione erano identici e sbiaditi: ora c'è una gerarchia */
.elementor-element-6a39a19b0 .elementor-button {
border-radius: 999px !important;
padding: 1em 2.1em !important;
font-weight: 600 !important;
letter-spacing: 0.02em;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.elementor-element-6a39a19b0 .elementor-button:hover {
transform: translateY(-2px);
}
/*
* I due inviti stavano in una griglia a due colonne larga metà sezione,
* agganciata a sinistra. Diventa una riga sola che si centra e che va a
* capo da sola quando lo schermo non basta.
*/
.elementor-element-6a39a19b0 .elementor-element-e0c7430 > .e-con-inner {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1rem 1.25rem;
}
.elementor-element-6a39a19b0 .elementor-element-e0c7430 > .e-con-inner > * {
width: auto !important;
flex: 0 0 auto;
}
/*
* "Richiedi preventivo" apre la finestra del preventivo ed è l'azione che
* conta, ma era l'unica rimasta col riquadro slavato: sembrava meno
* importante di quella accanto. Diventa il pulsante pieno.
*
* Il plugin gli dava width:200px con overflow:hidden: la scritta non ci
* stava e usciva tagliata a metà dell'ultima parola. Va lasciata decidere
* al testo quanto è largo.
*/
.pagina-replica .exad-modal-button a {
display: inline-block;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
overflow: visible !important;
/* il contenitore stretto lo mandava a capo, e restava più alto dell'altro */
white-space: nowrap;
background-color: var(--mattone-vivo) !important;
color: #fff !important;
border-radius: 999px !important;
padding: 1em 2.1em !important;
font-weight: 600 !important;
letter-spacing: 0.02em;
transition: background-color 0.2s ease, transform 0.2s ease;
}
/*
* Il plugin copre il pulsante con uno ::before bianco che passa da scale(0)
* a scala piena al passaggio del mouse. Era pensato per un rettangolo con
* overflow:hidden: da quando il pulsante è una pillola e non ritaglia più
* (serviva per non tagliare la scritta) quel velo si vedeva per quello che
* è, un quadrato bianco sopra la pillola — e col testo bianco sopra restava
* anche illeggibile. L'effetto di passaggio ce l'ha già la regola qui
* sotto: colore che si accende e pulsante che si alza.
*/
.pagina-replica .exad-modal-button a::before {
display: none !important;
}
/*
* La scritta cambiava in #925D58 al passaggio: serviva a leggersi sopra il
* velo bianco di prima. Senza quel velo restava un marrone slavato sopra il
* mattone, praticamente illeggibile.
*/
.pagina-replica .exad-modal-button a span,
.pagina-replica .exad-modal-button a:hover span {
color: #fff !important;
fill: #fff !important;
}
.pagina-replica .exad-modal-button a:hover {
background-color: var(--mattone-vivo-scuro) !important;
transform: translateY(-2px);
}
/* l'altra azione fa da seconda voce: contorno, non pieno */
.elementor-element-6a39a19b0 .elementor-button {
background-color: transparent !important;
border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
color: #fff !important;
}
.elementor-element-6a39a19b0 .elementor-button:hover {
background-color: rgba(255, 255, 255, 0.12) !important;
border-color: #fff !important;
}
@media (max-width: 767px) {
/*
* Su telefono le righe del titolo erano lontanissime tra loro: tre righe
* si mangiavano mezza schermata prima ancora del testo.
*/
.elementor-element-6a39a19b0 h1,
.elementor-element-6a39a19b0 h1 > * {
max-width: none;
line-height: 1.14 !important;
/* al di sotto del punto di rottura Elementor riallinea a sinistra */
text-align: center !important;
}
/*
* In colonna e tutti larghi uguale: affiancati non ci stavano, e uno
* pieno grande e uno stretto accanto sembravano di importanza diversa
* per un motivo che è solo di spazio.
*/
.elementor-element-6a39a19b0 .elementor-element-e0c7430 > .e-con-inner {
flex-direction: column;
align-items: stretch;
}
.elementor-element-6a39a19b0 .elementor-element-e0c7430 > .e-con-inner > * {
width: 100% !important;
}
/*
* Il pulsante sta largo quanto il suo testo, non quanto lo schermo: a
* tutta larghezza su un telefono diventava una fascia rossa da bordo a
* bordo, più larga del titolo che le sta sopra.
*
* Il contenitore resta pieno e centra: serviva a non far tagliare
* "Richiedi preventivo" a metà parola, e quel problema non torna perché
* white-space resta normal e il testo può andare a capo dentro il
* pulsante.
*/
.elementor-element-6a39a19b0 .exad-modal-wrapper,
.elementor-element-6a39a19b0 .exad-modal-button {
width: 100% !important;
text-align: center;
}
.elementor-element-6a39a19b0 .exad-modal-button a,
.elementor-element-6a39a19b0 .elementor-button {
display: inline-block !important;
width: auto !important;
/* non oltre lo schermo, e mai così stretto da non essere un bersaglio */
max-width: min(100%, 22rem) !important;
min-width: 11rem;
white-space: normal !important;
text-align: center;
padding: 1.05em 2.4em !important;
}
}
/* ---------------------------------------------------- menu mobile intero */
/*
* Era un riquadro in alto largo 370px, sovrapposto al contenuto della
* pagina che restava visibile e leggibile dietro. Diventa una schermata
* intera: una cosa sola da guardare, e voci grandi abbastanza da colpire
* col pollice.
*
* Il tema apre e chiude quella lista con slideToggle() di jQuery, che le
* scrive altezza e display negli stili in linea. Finché la schermata è
* aperta le nostre regole vincono lo stesso perché sono !important, ma in
* chiusura la classe spariva subito e per il mezzo secondo dell'animazione
* tornava a vedersi il riquadro vecchio che si arrotolava.
*
* Quindi: fuori dai due stati la lista è nascosta e basta, così lo scorrere
* di jQuery non ha più nulla da mostrare, e la chiusura la disegniamo noi
* con lo stato `menu-chiusura` che Migliorie tiene per la durata giusta.
*/
ul.wpr-mobile-nav-menu {
display: none !important;
}
body.menu-aperto,
body.menu-chiusura {
overflow: hidden;
}
body.menu-aperto ul.wpr-mobile-nav-menu,
body.menu-chiusura ul.wpr-mobile-nav-menu {
position: fixed !important;
inset: 0 !important;
width: 100vw !important;
height: 100dvh !important;
max-height: 100dvh !important;
margin: 0 !important;
padding: 6rem 1.5rem 2.5rem !important;
z-index: 9998 !important;
display: flex !important;
flex-direction: column;
justify-content: center;
gap: 0.25rem;
overflow-y: auto;
background: var(--inchiostro) !important;
}
body.menu-aperto ul.wpr-mobile-nav-menu {
animation: menu-entra 0.22s ease-out;
}
/* in chiusura resta ferma dov'è e si spegne: niente arrotolamento */
body.menu-chiusura ul.wpr-mobile-nav-menu {
animation: menu-esce 0.18s ease-in forwards;
pointer-events: none;
}
@keyframes menu-entra {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes menu-esce {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/*
* Le voci avevano un fondo rosso pieno ereditato dal tema: sopra la
* schermata scura diventavano barre a blocchi. Il colore torna a essere un
* accento, non il riempimento.
*/
body.menu-aperto ul.wpr-mobile-nav-menu > li,
body.menu-aperto ul.wpr-mobile-nav-menu > li > a,
body.menu-chiusura ul.wpr-mobile-nav-menu > li,
body.menu-chiusura ul.wpr-mobile-nav-menu > li > a {
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
width: 100%;
}
body.menu-aperto ul.wpr-mobile-nav-menu .wpr-mobile-menu-item,
body.menu-chiusura ul.wpr-mobile-nav-menu .wpr-mobile-menu-item {
display: block;
padding: 1.05rem 0.5rem !important;
font-size: 1.45rem !important;
font-weight: 600;
text-align: center;
color: #fff !important;
background: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body.menu-aperto ul.wpr-mobile-nav-menu li:last-child .wpr-mobile-menu-item,
body.menu-chiusura ul.wpr-mobile-nav-menu li:last-child .wpr-mobile-menu-item {
border-bottom: 0 !important;
}
/*
* La voce corrente era marrone scuro su rosso, praticamente illeggibile.
* Su fondo scuro resta bianca e si distingue con un segno sotto.
*/
body.menu-aperto ul.wpr-mobile-nav-menu .wpr-active-menu-item,
body.menu-chiusura ul.wpr-mobile-nav-menu .wpr-active-menu-item {
color: #fff !important;
position: relative;
}
body.menu-aperto ul.wpr-mobile-nav-menu .wpr-active-menu-item::after,
body.menu-chiusura ul.wpr-mobile-nav-menu .wpr-active-menu-item::after {
content: "";
position: absolute;
left: 50%;
bottom: 0.62rem;
width: 2.2rem;
height: 3px;
border-radius: 2px;
background: #e0483a;
transform: translateX(-50%);
}
/* ------------------------------------------------ apri / chiudi: le righe */
/*
* Il pulsante restava tre righe anche a menu aperto: da chiudere non si
* capiva, sembrava che riaprisse. Le tre righe diventano una X.
*
* Le righe vengono staccate dal flusso e messe a posizioni fisse dentro il
* pulsante: solo così la trasformazione parte da una geometria nota invece
* che dai margini del tema, che cambiano con le impostazioni del widget.
*/
#masthead .wpr-mobile-toggle {
position: relative;
width: 40px;
height: 28px;
}
#masthead .wpr-mobile-toggle-line {
position: absolute;
left: 0;
width: 100%;
height: 2px;
margin: 0 !important;
border-radius: 2px;
transition: transform 0.22s ease, opacity 0.15s ease, background-color 0.2s ease;
}
#masthead .wpr-mobile-toggle-line:nth-child(1) {
top: 4px;
}
#masthead .wpr-mobile-toggle-line:nth-child(2) {
top: 13px;
}
#masthead .wpr-mobile-toggle-line:nth-child(3) {
top: 22px;
}
/*
* L'intestazione è già appiccicata in alto e la X sta dov'era l'hamburger:
* non serve staccare il pulsante e rimetterlo altrove, basta che stia sopra
* la schermata del menu. Così non salta di posizione né aprendo né
* chiudendo, e le righe hanno il tempo di ruotare.
*/
body.menu-aperto #masthead,
body.menu-chiusura #masthead {
z-index: 10000 !important;
background: var(--inchiostro) !important;
box-shadow: none !important;
border-bottom-color: transparent !important;
}
/*
* La lista a schermo intero sta dentro #masthead, quindi copriva anche il
* logo e il pulsante che le stanno accanto: si apriva il menu e in cima
* non c'era più niente da toccare. Nella stessa pila basta salire di uno.
*/
body.menu-aperto .wpr-mobile-toggle-wrap,
body.menu-chiusura .wpr-mobile-toggle-wrap,
body.menu-aperto #masthead .elementor-element-4288f47f,
body.menu-chiusura #masthead .elementor-element-4288f47f {
position: relative;
z-index: 9999;
}
body.menu-aperto .wpr-mobile-toggle-line {
background-color: #fff !important;
}
body.menu-aperto .wpr-mobile-toggle-line:nth-child(1) {
transform: translateY(9px) rotate(45deg);
}
body.menu-aperto .wpr-mobile-toggle-line:nth-child(2) {
opacity: 0;
}
body.menu-aperto .wpr-mobile-toggle-line:nth-child(3) {
transform: translateY(-9px) rotate(-45deg);
}
/* ------------------------------------------- pulsanti fissi in basso a destra */
/*
* Erano invertiti: la freccia "torna su" stava sotto e il telefono sopra.
* Il pollice arriva prima in basso, e lì deve trovare l'azione che conta,
* cioè la chiamata; la freccia sta sopra e si mostra solo quando serve
* davvero, cioè quando si è già scesi abbastanza da voler risalire.
*/
.wpr-pc-btn {
bottom: 25px !important;
}
.wpr-stt-btn {
bottom: 78px !important;
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
body.pagina-scorsa .wpr-stt-btn {
opacity: 1 !important;
pointer-events: auto !important;
transform: none;
}
/*
* I due pulsanti stanno a z-index 9999 e finivano sopra la schermata del
* menu. Mentre il menu è aperto non servono.
*/
body.menu-aperto .wpr-stt-btn,
body.menu-aperto .wpr-pc-btn,
body.menu-chiusura .wpr-stt-btn,
body.menu-chiusura .wpr-pc-btn {
display: none !important;
}
/* -------------------------------------------------------- pagina contatti */
/*
* C'era il modulo e basta: sei rettangoli bianchi larghi tutta la pagina,
* distesi su un fondo vuoto, senza niente che dicesse dove finiva una cosa
* e cominciava l'altra. Sembrava un pannello di amministrazione.
*
* Il modulo diventa una scheda: larghezza da leggere, un fondo che la
* stacca, e i campi rimpiccioliti a misura di quello che ci va scritto.
* I campi restano tutti quelli di prima.
*/
.elementor-34 .elementor-element-d3ca5e3 {
padding: 3.5rem 1.25rem 4.5rem !important;
background: radial-gradient(
120% 90% at 50% 0%,
rgba(201, 80, 63, 0.07) 0%,
rgba(201, 80, 63, 0) 60%
),
linear-gradient(180deg, #fffdfb 0%, var(--carta) 55%);
}
/*
* Il titolo era 65px di Merriweather color mattone: da solo occupava
* quanto mezzo modulo e il rosso scuro su fondo chiaro faceva blocco.
*/
.elementor-34 .elementor-heading-title {
font-size: clamp(2.1rem, 5vw, 3.1rem) !important;
line-height: 1.12 !important;
color: var(--inchiostro) !important;
letter-spacing: -0.015em;
}
/*
* Il titolo aveva 75px di margine su tutti e quattro i lati, messi
* dall'editor: sul telefono restava una fascia vuota alta quanto mezza
* schermata tra l'intestazione e il modulo.
*/
.elementor-34 .elementor-widget-heading {
margin: 0 0 2.4rem !important;
text-align: center;
}
/* un segno corto al posto della sottolineatura che non c'era */
.elementor-34 .elementor-widget-heading .elementor-heading-title::after {
content: "";
display: block;
width: 3.2rem;
height: 3px;
margin: 1.1rem auto 0;
border-radius: 2px;
background: var(--mattone-vivo);
}
.elementor-34 form.frm-fluent-form {
max-width: 820px;
margin-inline: auto;
padding: 2.6rem 2.4rem 2.2rem;
background: #fff;
border: 1px solid rgba(22, 20, 18, 0.07);
border-radius: 20px;
box-shadow: 0 20px 55px rgba(22, 20, 18, 0.08);
}
.elementor-34 .ff-el-input--label label {
font-size: 0.9rem;
font-weight: 600;
color: rgba(22, 20, 18, 0.78);
letter-spacing: 0.005em;
}
/*
* Erano alti 40px con testo da 13px: il campo restava grande e la scritta
* dentro piccola, il contrario di quello che serve su un telefono.
*/
.elementor-34 .ff-el-form-control {
min-height: 46px;
padding: 0.72rem 0.95rem !important;
font-size: 1rem !important;
line-height: 1.4;
color: var(--inchiostro);
background: #fbfaf8 !important;
border: 1px solid rgba(22, 20, 18, 0.14) !important;
border-radius: 10px !important;
box-shadow: none !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.elementor-34 .ff-el-form-control:focus {
outline: none;
background: #fff !important;
border-color: var(--mattone-vivo) !important;
box-shadow: 0 0 0 3px rgba(201, 80, 63, 0.16) !important;
}
.elementor-34 textarea.ff-el-form-control {
min-height: 140px;
resize: vertical;
}
/* la riga delle condizioni stava attaccata al pulsante */
.elementor-34 .ff-el-form-check {
margin-block: 1.4rem 1.6rem;
}
.elementor-34 .ff-el-form-check-label {
font-size: 0.92rem;
line-height: 1.5;
color: rgba(22, 20, 18, 0.72);
}
.elementor-34 .ff-el-form-check-label a {
color: var(--mattone-vivo);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
/*
* Il pulsante era un rettangolo mattone scuro in mezzo al bianco, della
* stessa forma dei campi: non si capiva che fosse l'azione.
*/
.elementor-34 .ff-btn-submit {
display: block;
margin-inline: auto;
min-width: 14rem;
padding: 0.95em 2.4em !important;
font-size: 1rem !important;
font-weight: 600 !important;
letter-spacing: 0.02em;
color: #fff !important;
background: var(--mattone-vivo) !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: 0 8px 20px rgba(201, 80, 63, 0.25);
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.elementor-34 .ff-btn-submit:hover {
background: var(--mattone-vivo-scuro) !important;
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(173, 62, 45, 0.3);
}
@media (max-width: 767px) {
/* sul telefono la scheda non deve diventare una cornice: serve il testo */
.elementor-34 .elementor-element-d3ca5e3 {
padding: 2.25rem 0.9rem 3rem !important;
}
.elementor-34 .elementor-widget-heading {
margin-bottom: 1.6rem !important;
}
.elementor-34 form.frm-fluent-form {
padding: 1.6rem 1.15rem 1.4rem;
border-radius: 16px;
}
.elementor-34 .ff-btn-submit {
width: 100%;
}
}
/* ------------------------------------------------------- home: i pulsanti */
/*
* Sotto l'apertura erano tutti rettangoli spenti: "Di piu", "I nostri
* progetti", "Contattaci". Tre forme diverse per la stessa cosa. Diventano
* la stessa pillola dei due inviti in cima.
*/
.pagina-replica .wpr-button,
.pagina-replica .elementor-button,
.pagina-replica .exad-call-to-action-primary-btn {
border-radius: 999px !important;
padding: 0.9em 2.2em !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
color: #fff !important;
background-color: var(--mattone-vivo) !important;
border: 0 !important;
box-shadow: 0 8px 20px rgba(201, 80, 63, 0.22);
transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pagina-replica .wpr-button:hover,
.pagina-replica .elementor-button:hover,
.pagina-replica .exad-call-to-action-primary-btn:hover {
background-color: var(--mattone-vivo-scuro) !important;
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(173, 62, 45, 0.28);
}
/* lo stesso ::before bianco che squadrava il pulsante dell'apertura */
.pagina-replica .wpr-button::before,
.pagina-replica .wpr-button::after {
display: none !important;
}
/* ------------------------------------------------- home: le carte che girano */
/*
* Icona in alto a sinistra, titolo sotto, testo ancora sotto: tre partenze
* diverse sullo stesso lato e nessuna che stesse al centro della carta. Sul
* retro invece era già tutto centrato, quindi girando la carta saltava
* l'allineamento.
*/
.pagina-replica .wpr-flip-box,
.pagina-replica .wpr-flip-box-item {
border-radius: 18px !important;
}
.pagina-replica .wpr-flip-box-item {
overflow: hidden;
border: 1px solid rgba(22, 20, 18, 0.06);
box-shadow: 0 10px 30px rgba(22, 20, 18, 0.06);
}
.pagina-replica .wpr-flip-box-front-align-left .wpr-flip-box-content {
text-align: center !important;
align-items: center;
padding-inline: 1.6rem;
}
.pagina-replica .wpr-flip-box-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3.4rem;
height: 3.4rem;
margin: 0 auto 1rem !important;
border-radius: 50%;
background: rgba(201, 80, 63, 0.1);
color: var(--mattone-vivo);
}
.pagina-replica .wpr-flip-box-icon i {
font-size: 1.55rem;
color: var(--mattone-vivo);
}
.pagina-replica .wpr-flip-box-title {
margin-bottom: 0.55rem !important;
line-height: 1.25 !important;
text-wrap: balance;
}
.pagina-replica .wpr-flip-box-description p {
margin: 0;
line-height: 1.6;
}
/* ----------------------------- home/servizi: perché sceglierci */
/*
* Fotografie grandi il doppio del testo che spiegavano, una accanto
* all'altra senza contorno: sembravano tre pagine diverse messe in fila.
* Diventano schede: immagine più bassa, testo dentro, tutto arrotondato.
*/
/*
* Ogni scheda sta dentro un contenitore che al passaggio del mouse tirava
* fuori un suo fondo bianco con angoli da 5px: si vedeva una seconda
* scheda, più grande e più squadrata, spuntare dietro la prima. Il
* contenitore torna a essere solo spazio.
*/
.pagina-replica .elementor-element-27db0738,
.pagina-replica .elementor-element-27db0738 > .elementor-container,
.pagina-replica .elementor-element-27db0738 .elementor-widget-wrap,
.pagina-replica .elementor-element-401811d2,
.pagina-replica .elementor-element-401811d2 > .elementor-widget-wrap,
.pagina-replica .elementor-element-baf8f61,
.pagina-replica .elementor-element-27c85d5,
.pagina-replica .elementor-element-24c0313f,
.pagina-replica .elementor-element-107a7e9,
.pagina-replica .elementor-element-29b2002e,
.pagina-replica .elementor-element-da2211a,
.pagina-replica .elementor-element-fbed3b1,
.pagina-replica .elementor-element-24c0313f > .elementor-container,
.pagina-replica .elementor-element-107a7e9 > .elementor-container,
.pagina-replica .elementor-element-29b2002e > .elementor-container,
.pagina-replica .elementor-element-da2211a > .elementor-container,
.pagina-replica .elementor-element-fbed3b1 > .elementor-container,
.pagina-replica .elementor-element-24c0313f .elementor-widget-wrap,
.pagina-replica .elementor-element-107a7e9 .elementor-widget-wrap,
.pagina-replica .elementor-element-29b2002e .elementor-widget-wrap,
.pagina-replica .elementor-element-da2211a .elementor-widget-wrap,
.pagina-replica .elementor-element-fbed3b1 .elementor-widget-wrap,
.pagina-replica .elementor-element-84cfbaa,
.pagina-replica .elementor-element-25e19524,
.pagina-replica .elementor-element-c64ba6b,
.pagina-replica .elementor-element-d226a57,
.pagina-replica .elementor-element-95178fd,
.pagina-replica .elementor-element-58df240,
.pagina-replica .elementor-element-522b539,
.pagina-replica .elementor-element-69ad9226,
.pagina-replica .elementor-element-6f6fab5,
.pagina-replica .elementor-element-c647fd4,
.pagina-replica .elementor-element-1647edfe,
.pagina-replica .elementor-element-65a814d1,
.pagina-replica .elementor-element-c64ba6b > .elementor-widget-wrap,
.pagina-replica .elementor-element-d226a57 > .elementor-widget-wrap,
.pagina-replica .elementor-element-95178fd > .elementor-widget-wrap,
.pagina-replica .elementor-element-58df240 > .elementor-widget-wrap,
.pagina-replica .elementor-element-522b539 > .elementor-widget-wrap,
.pagina-replica .elementor-element-69ad9226 > .elementor-widget-wrap,
.pagina-replica .elementor-element-6f6fab5 > .elementor-widget-wrap,
.pagina-replica .elementor-element-c647fd4 > .elementor-widget-wrap,
.pagina-replica .elementor-element-1647edfe > .elementor-widget-wrap,
.pagina-replica .elementor-element-65a814d1 > .elementor-widget-wrap,
.pagina-replica .elementor-element-cfbb252,
.pagina-replica .elementor-element-a128d3b,
.pagina-replica .elementor-element-5080415,
.pagina-replica .elementor-element-d1b0678,
.pagina-replica .elementor-element-2c0b4a43,
.pagina-replica .elementor-element-4b11a3c0,
.pagina-replica .elementor-element-3f94c1e,
.pagina-replica .elementor-element-2ebfb51b,
.pagina-replica .elementor-element-7f1b6996,
.pagina-replica .elementor-element-64056575 {
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.pagina-replica .eael-infobox-container,
.pagina-replica .eael-infobox-container:hover {
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.pagina-replica .eael-infobox {
height: 100%;
padding-bottom: 1.5rem;
background: #fff;
border: 1px solid rgba(119, 52, 46, 0.18);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(22, 20, 18, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pagina-replica .eael-infobox:hover {
transform: translateY(-3px);
box-shadow: 0 16px 38px rgba(22, 20, 18, 0.1);
}
.pagina-replica .infobox-icon img {
display: block;
width: 100% !important;
max-width: none !important;
height: clamp(160px, 20vw, 220px);
object-fit: cover;
}
/*
* La fotografia restava rientrata di 15px per lato dentro la scheda, con
* una cornice bianca che sembrava un errore di ritaglio. E il titolo
* partiva 24px più a destra del testo che spiegava, perché le due fasce
* avevano ognuna il proprio margine: unico rientro, dichiarato una volta.
*/
.pagina-replica .infobox-icon {
width: 100% !important;
margin: 0 0 1.15rem !important;
}
.pagina-replica .infobox-content {
padding: 0 1.5rem !important;
}
.pagina-replica .infobox-title-section {
padding: 0 !important;
}
.pagina-replica .infobox-title-section .title {
margin-top: 1.1rem !important;
font-size: 1.25rem !important;
line-height: 1.3 !important;
}
/* ------------------------------------------------- home: griglia progetti */
.pagina-replica .wpr-grid-media-wrap {
border-radius: 14px;
overflow: hidden;
}
.pagina-replica .wpr-grid-item-inner {
border-radius: 14px;
overflow: hidden;
}
/* ------------------------------------------------ galleria: icona hover */
.pagina-replica .exad-gallery-item-overlay .exad-fg-icons a {
background: transparent !important;
background-color: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.pagina-replica .exad-gallery-item-overlay .exad-fg-icons a::before,
.pagina-replica .exad-gallery-item-overlay .exad-fg-icons a::after {
display: none !important;
}
.pagina-replica .exad-gallery-item-overlay .exad-fg-icons svg {
color: var(--mattone-vivo) !important;
fill: var(--mattone-vivo) !important;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.28));
}
/* ------------------------------------------ home: sezione contattaci finale */
/*
* Il blocco colorato e la fotografia stavano dentro il contenitore da
* 1140px: restavano due strisce bianche ai lati, e la fotografia sembrava
* incollata invece che parte della pagina.
*/
.elementor-63 .elementor-element-8c96ce7 > .elementor-container {
max-width: none !important;
width: 100% !important;
}
.elementor-63 .elementor-element-8c96ce7 {
padding-inline: 0 !important;
}
/* ------------------------------------------------- home: la sagoma del Ticino */
/*
* C'era una mappa di Google incorporata: interfaccia di un altro prodotto
* dentro la pagina, con i suoi pulsanti, i suoi colori e la sua tipografia.
* Al posto suo la sagoma del cantone e nient'altro: niente riquadro, niente
* didascalia, il fondo della sezione le passa dietro.
*
* La sagoma è un'immagine di sfondo e non un ![]()
: se il file manca resta
* uno spazio vuoto, non l'icona di immagine rotta.
*/
.mappa-ticino {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.mappa-ticino-forma {
width: min(100%, 320px);
/* le proporzioni sono quelle del file: niente fasce vuote sopra e sotto */
aspect-ratio: 597 / 813;
/* la sagoma nei colori del sito: quella di partenza era rossa e blu e
accanto al mattone sembrava presa da un'altra pagina. Il file originale
resta in ticino.png se si volesse tornare indietro */
background-image: url("/wp-content/uploads/ticino-brand.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
filter: drop-shadow(0 16px 30px rgba(22, 20, 18, 0.16));
}
/* ------------------------------------------------------------- piè di pagina */
/*
* La fotografia di fondo era un cantiere chiaro: sotto ci finivano testo
* bianco, logo bianco e due colonne di link, e ognuno cadeva su una zona di
* luminosità diversa. Il fondo torna a essere fondo.
*/
footer .elementor-element-3c6b78f00 {
background-image: none !important;
background-color: var(--inchiostro) !important;
}
footer .elementor-element-3c6b78f00 > .elementor-background-overlay {
display: none !important;
}
/* --------------------------------------------------------- visore immagini */
body.visore-attivo {
overflow: hidden;
}
.visore {
position: fixed;
inset: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 5vw, 3.5rem);
background: rgba(12, 10, 9, 0.94);
opacity: 0;
transition: opacity 0.2s ease;
}
.visore-aperto {
opacity: 1;
}
.visore-foto {
max-width: min(100%, 1400px);
max-height: 100%;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
transform: scale(0.985);
transition: transform 0.2s ease;
}
.visore-aperto .visore-foto {
transform: none;
}
/*
* I comandi sono cerchi da 44px: è la misura sotto la quale un pollice
* comincia a sbagliare. Stanno sopra la foto, non accanto, così su schermo
* stretto non le rubano larghezza.
*/
.visore button {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
color: #fff;
font-size: 1.8rem;
line-height: 1;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
cursor: pointer;
transition: background-color 0.18s ease, border-color 0.18s ease;
}
.visore button:hover,
.visore button:focus-visible {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
outline: none;
}
.visore-chiudi {
top: clamp(0.75rem, 2vw, 1.5rem);
right: clamp(0.75rem, 2vw, 1.5rem);
font-size: 2rem;
}
.visore-prec {
left: clamp(0.5rem, 2vw, 1.5rem);
top: 50%;
transform: translateY(-50%);
}
.visore-succ {
right: clamp(0.5rem, 2vw, 1.5rem);
top: 50%;
transform: translateY(-50%);
}
.visore-conta {
position: absolute;
bottom: clamp(0.75rem, 2.5vw, 1.6rem);
left: 50%;
transform: translateX(-50%);
margin: 0;
font-size: 0.9rem;
letter-spacing: 0.06em;
color: rgba(255, 255, 255, 0.62);
}
/* ----------------------------------------------------- piè di pagina: dettagli */
/* l'ultimo rettangolo rimasto: anche qui la pillola */
footer .wpr-button,
footer .elementor-button {
border-radius: 999px !important;
padding: 0.9em 2.2em !important;
font-weight: 600 !important;
letter-spacing: 0.02em !important;
color: #fff !important;
background-color: var(--mattone-vivo) !important;
border: 0 !important;
transition: background-color 0.2s ease, transform 0.2s ease;
}
footer .wpr-button:hover,
footer .elementor-button:hover {
background-color: var(--mattone-vivo-scuro) !important;
transform: translateY(-1px);
}
footer .wpr-button::before,
footer .wpr-button::after {
display: none !important;
}
/* la firma sta sotto il copyright e non deve pesare quanto lui */
.firma-softution {
margin: 0.4rem 0 0 !important;
font-size: 0.72rem;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.42);
}
.firma-softution a {
color: rgba(255, 255, 255, 0.72);
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
transition: color 0.2s ease, border-color 0.2s ease;
}
.firma-softution a:hover {
color: #fff;
border-bottom-color: var(--mattone-vivo);
}
/* ------------------------------------------ pagine interne: la prima sezione */
/*
* Chi siamo, Servizi e Galleria aprono tutte con una fotografia grande e il
* titolo appoggiato sopra, a sinistra. Le foto sono di legno chiaro e il
* testo è bianco: a metà titolo diventava illeggibile, esattamente come
* succedeva in apertura di home prima della velatura.
*
* Il selettore prende la prima sezione di ogni pagina invece dei singoli
* identificativi: sono tre pagine oggi, ma la regola vale anche per quelle
* che verranno.
*/
.pagina-replica [data-elementor-type="wp-page"] > .elementor-top-section:first-child
> .elementor-background-overlay {
background-image: linear-gradient(
180deg,
rgba(12, 10, 9, 0.66) 0%,
rgba(12, 10, 9, 0.5) 45%,
rgba(12, 10, 9, 0.68) 100%
) !important;
/* sotto il gradiente l'overlay teneva un grigio pieno: a opacità piena
copriva la fotografia e restava una fascia nera */
background-color: transparent !important;
opacity: 1 !important;
}
.pagina-replica [data-elementor-type="wp-page"] > .elementor-top-section:first-child
.elementor-widget-wrap {
/*
* L'editor mette align-items:center sulla colonna: in una colonna flex
* quello stringe ogni widget alla larghezza del suo contenuto, e il
* blocco resta incolonnato a sinistra invece di centrarsi nella sezione.
* Il centraggio lo fa il testo, i widget tornano larghi quanto la colonna.
*/
/*
* La colonna è un contenitore flex in riga: i widget si mettevano in
* fila e si stringevano al contenuto, così il blocco restava schiacciato
* nella metà sinistra anche con il testo centrato. In colonna ognuno
* prende tutta la larghezza e il centraggio del testo si vede davvero.
*/
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
/*
* E via il rientro destro da 558px: nell'editor teneva il testo lontano
* dal soggetto della fotografia, ma con il blocco centrato diventa metà
* sezione di vuoto a destra e tutto spostato a sinistra.
*/
padding-right: 0 !important;
padding-left: 0 !important;
text-align: center;
}
.pagina-replica [data-elementor-type="wp-page"] > .elementor-top-section:first-child
.elementor-widget {
width: 100% !important;
max-width: 100% !important;
}
.pagina-replica [data-elementor-type="wp-page"] > .elementor-top-section:first-child h1,
.pagina-replica [data-elementor-type="wp-page"] > .elementor-top-section:first-child h2 {
max-width: 20ch;
margin-inline: auto;
line-height: 1.1 !important;
letter-spacing: -0.015em;
text-wrap: balance;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.pagina-replica [data-elementor-type="wp-page"] > .elementor-top-section:first-child p {
max-width: 56ch;
margin-inline: auto;
line-height: 1.65 !important;
}
/* la linea di stacco sotto il titolo seguiva il testo a sinistra */
.pagina-replica [data-elementor-type="wp-page"] > .elementor-top-section:first-child
.elementor-divider {
justify-content: center;
}
/* --------------------------------------------- pagine interne: le fotografie */
/*
* Rettangoli a spigolo vivo in mezzo a schede e pulsanti tutti arrotondati:
* erano l'unica cosa rimasta squadrata.
*/
.pagina-replica .elementor-widget-image img,
.pagina-replica .elementor-widget-theme-post-featured-image img {
border-radius: 16px;
}
/* il pulsante dell'apertura seguiva l'allineamento del plugin, non quello
del blocco: restava appeso a sinistra sotto un testo centrato */
.pagina-replica [data-elementor-type="wp-page"] > .elementor-top-section:first-child
.exad-modal,
.pagina-replica [data-elementor-type="wp-page"] > .elementor-top-section:first-child
.exad-modal-wrapper,
.pagina-replica [data-elementor-type="wp-page"] > .elementor-top-section:first-child
.exad-modal-button {
text-align: center !important;
}
/* niente CTA duplicate nelle hero delle pagine interne */
.pagina-replica .elementor-element-2e9d2843,
.pagina-replica .elementor-element-9790e24,
.pagina-replica .elementor-element-95fffd3 {
display: none !important;
}
/* ------------------------------------------- respiro fra le sezioni */
/*
* Fra una sezione e l'altra restavano fasce vuote alte anche 350px: nate
* nell'editor su schermi diversi, a leggerle di seguito sembrano pagine
* staccate invece che una sola. Un unico passo, che si stringe sul piccolo.
*/
.pagina-replica [data-elementor-type="wp-page"] > .elementor-top-section:not(:first-child) {
padding-block: clamp(2.5rem, 5vw, 4.5rem) !important;
}
/* -------------------------------------------------- schede con icona */
/*
* Nella pagina Servizi le quattro voci stavano appoggiate direttamente
* sopra la fotografia del tetto, senza contorno: il testo scuro cadeva a
* volte sul legno chiaro e a volte sull'ombra, e le icone grigie
* sparivano. Diventano schede come quelle della home.
*/
.pagina-replica .elementor-widget-icon-box .elementor-icon-box-wrapper {
height: 100%;
padding: 1.9rem 1.6rem;
text-align: center;
background: #fff;
border: 1px solid rgba(22, 20, 18, 0.07);
border-radius: 18px;
box-shadow: 0 10px 30px rgba(22, 20, 18, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pagina-replica .elementor-widget-icon-box .elementor-icon-box-wrapper:hover {
transform: translateY(-3px);
box-shadow: 0 16px 38px rgba(22, 20, 18, 0.1);
}
.pagina-replica .elementor-widget-icon-box .elementor-icon-box-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3.4rem;
height: 3.4rem;
margin: 0 auto 1.1rem !important;
border-radius: 50%;
background: rgba(201, 80, 63, 0.1);
}
.pagina-replica .elementor-widget-icon-box .elementor-icon,
.pagina-replica .elementor-widget-icon-box .elementor-icon svg,
.pagina-replica .elementor-widget-icon-box .elementor-icon i {
color: var(--mattone-vivo) !important;
fill: var(--mattone-vivo) !important;
font-size: 1.5rem;
}
.pagina-replica .elementor-widget-icon-box .elementor-icon-box-title {
margin-bottom: 0.55rem !important;
line-height: 1.25 !important;
text-wrap: balance;
}
.pagina-replica .elementor-widget-icon-box .elementor-icon-box-description {
line-height: 1.6;
}
/* -------------------------------------------------- Servizi: colonna di testo */
/*
* La colonna di apertura era allineata a destra: le righe finivano tutte
* in punti diversi e l'occhio doveva cercare l'inizio a ogni riga.
*/
.elementor-51 .elementor-element-cce1d95,
.elementor-51 .elementor-element-cce1d95 .elementor-widget-text-editor,
.elementor-51 .elementor-element-cce1d95 .elementor-widget-heading {
text-align: left !important;
}
/* ----------------------------------------- Servizi: sezione principale */
/*
* La sezione "Nostri Servizi" era costruita con una colonna di testo stretta
* a sinistra e le card dentro due sotto-sezioni separate: visivamente usciva
* storta, con altezze enormi e molto vuoto. Qui la riportiamo a una lettura
* semplice: intestazione centrata sopra, poi quattro card in griglia 2x2.
*/
.pagina-replica .elementor-element-y1ouw2z {
width: 100vw !important;
max-width: none !important;
margin-inline: calc(50% - 50vw) !important;
padding: clamp(4rem, 7vw, 6.5rem) clamp(1rem, 4vw, 4rem) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 245, 241, 0.96)),
#f8f5f1 !important;
overflow: hidden;
}
.pagina-replica .elementor-element-y1ouw2z > .elementor-container {
width: min(100%, 1280px) !important;
max-width: 1280px !important;
display: flex;
flex-direction: column;
gap: clamp(2.25rem, 4vw, 3.5rem);
margin-inline: auto;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-element-cce1d95,
.pagina-replica .elementor-element-y1ouw2z .elementor-element-7fa7900 {
width: 100% !important;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-element-cce1d95 > .elementor-element-populated {
max-width: 820px;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
background: transparent !important;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-element-dc4e96d,
.pagina-replica .elementor-element-y1ouw2z .elementor-element-0677353,
.pagina-replica .elementor-element-y1ouw2z .elementor-element-2c69c11,
.pagina-replica .elementor-element-y1ouw2z .elementor-element-c9509b0 {
text-align: center !important;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-element-dc4e96d .elementor-heading-title {
margin-bottom: 0.35rem;
color: var(--mattone-vivo) !important;
font-family: "Poppins", sans-serif !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
line-height: 1.2 !important;
text-transform: uppercase;
letter-spacing: 0.12em !important;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-element-dc4e96d br {
display: none;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-element-0677353 .elementor-heading-title {
color: #2b2825 !important;
font-size: clamp(2.35rem, 5vw, 4.6rem) !important;
line-height: 1.04 !important;
letter-spacing: 0 !important;
text-wrap: balance;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-element-2c69c11 {
max-width: 760px;
margin: 1rem auto 0 !important;
color: #51617a !important;
font-size: clamp(1rem, 1.4vw, 1.18rem) !important;
line-height: 1.75 !important;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-element-c9509b0 {
margin-top: 1.5rem !important;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-element-c9509b0 .exad-modal-button {
text-align: center !important;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-element-7fa7900 > .elementor-element-populated {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.25rem, 2.5vw, 2rem);
padding: 0 !important;
background: transparent !important;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-element-7fa7900 > .elementor-element-populated > .elementor-background-overlay {
display: none !important;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-element-53ecbb3,
.pagina-replica .elementor-element-y1ouw2z .elementor-element-658c637,
.pagina-replica .elementor-element-y1ouw2z .elementor-element-53ecbb3 > .elementor-container,
.pagina-replica .elementor-element-y1ouw2z .elementor-element-658c637 > .elementor-container {
display: contents !important;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-element-1f52449,
.pagina-replica .elementor-element-y1ouw2z .elementor-element-0205d33,
.pagina-replica .elementor-element-y1ouw2z .elementor-element-bfedf02,
.pagina-replica .elementor-element-y1ouw2z .elementor-element-1c6e37e {
width: 100% !important;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-element-1f52449 > .elementor-element-populated,
.pagina-replica .elementor-element-y1ouw2z .elementor-element-0205d33 > .elementor-element-populated,
.pagina-replica .elementor-element-y1ouw2z .elementor-element-bfedf02 > .elementor-element-populated,
.pagina-replica .elementor-element-y1ouw2z .elementor-element-1c6e37e > .elementor-element-populated {
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-widget-icon-box {
height: 100%;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-widget-icon-box .elementor-icon-box-wrapper {
min-height: 100%;
align-items: flex-start !important;
padding: clamp(1.65rem, 2.4vw, 2.35rem) !important;
text-align: left !important;
background: #fff !important;
border: 1px solid rgba(119, 52, 46, 0.14);
border-radius: 8px;
box-shadow: 0 16px 42px rgba(36, 30, 24, 0.08);
}
.pagina-replica .elementor-element-y1ouw2z .elementor-widget-icon-box .elementor-icon-box-icon {
width: 3.25rem;
height: 3.25rem;
margin: 0 0 1.35rem !important;
background: rgba(218, 93, 82, 0.1);
}
.pagina-replica .elementor-element-y1ouw2z .elementor-widget-icon-box .elementor-icon-box-title,
.pagina-replica .elementor-element-y1ouw2z .elementor-widget-icon-box .elementor-icon-box-title a {
margin-bottom: 0.85rem !important;
color: #77342e !important;
font-size: clamp(1.45rem, 2.1vw, 2rem) !important;
line-height: 1.16 !important;
letter-spacing: 0 !important;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-widget-icon-box .elementor-icon-box-description {
color: #51617a !important;
font-size: clamp(0.98rem, 1.15vw, 1.06rem) !important;
line-height: 1.65 !important;
}
@media (max-width: 900px) {
.pagina-replica .elementor-element-y1ouw2z .elementor-element-7fa7900 > .elementor-element-populated {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.pagina-replica .elementor-element-y1ouw2z {
padding: 3.5rem 1.1rem !important;
}
.pagina-replica .elementor-element-y1ouw2z .elementor-element-0677353 .elementor-heading-title {
font-size: clamp(2rem, 10vw, 3rem) !important;
}
}
/* --------------------------------------------- CTA finale full width */
/*
* La CTA finale chiude Home, Chi siamo e Servizi:
* prima viveva in una sezione stretta/boxata, quindi sui lati sembrava
* tagliata. Qui diventa una fascia piena, solida, con il contenuto ben
* contenuto dentro la pagina.
*/
.pagina-replica .elementor-element-8c96ce7,
.pagina-replica .elementor-element-6d9cbdbd,
.pagina-replica .elementor-element-472237a8 {
width: 100vw !important;
max-width: none !important;
margin: 0 calc(50% - 50vw) !important;
padding: clamp(3.5rem, 7vw, 6.5rem) clamp(1rem, 4vw, 4rem) !important;
overflow: hidden;
background:
linear-gradient(135deg, rgba(22, 20, 18, 0.96) 0%, rgba(48, 34, 29, 0.96) 58%, rgba(119, 52, 46, 0.96) 100%),
var(--inchiostro) !important;
}
.pagina-replica .elementor-element-8c96ce7:not(.elementor-motion-effects-element-type-background),
.pagina-replica .elementor-element-6d9cbdbd:not(.elementor-motion-effects-element-type-background),
.pagina-replica .elementor-element-472237a8:not(.elementor-motion-effects-element-type-background),
.pagina-replica .elementor-element-8c96ce7 > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.pagina-replica .elementor-element-6d9cbdbd > .elementor-motion-effects-container > .elementor-motion-effects-layer,
.pagina-replica .elementor-element-472237a8 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
background:
linear-gradient(135deg, rgba(22, 20, 18, 0.96) 0%, rgba(48, 34, 29, 0.96) 58%, rgba(119, 52, 46, 0.96) 100%),
var(--inchiostro) !important;
}
.pagina-replica .elementor-element-8c96ce7 > .elementor-container,
.pagina-replica .elementor-element-6d9cbdbd > .elementor-container,
.pagina-replica .elementor-element-472237a8 > .elementor-container {
width: min(100%, 1280px) !important;
max-width: 1280px !important;
min-height: min(72vh, 760px);
display: flex;
align-items: stretch;
gap: clamp(1.5rem, 4vw, 4rem);
margin-inline: auto;
}
.pagina-replica .elementor-element-2ea02f7,
.pagina-replica .elementor-element-b2b5f12,
.pagina-replica .elementor-element-4ba3d230,
.pagina-replica .elementor-element-227a86dc,
.pagina-replica .elementor-element-2416707c,
.pagina-replica .elementor-element-70ed0927 {
display: flex;
}
.pagina-replica .elementor-element-2ea02f7 > .elementor-element-populated,
.pagina-replica .elementor-element-b2b5f12 > .elementor-element-populated,
.pagina-replica .elementor-element-4ba3d230 > .elementor-element-populated,
.pagina-replica .elementor-element-227a86dc > .elementor-element-populated,
.pagina-replica .elementor-element-2416707c > .elementor-element-populated,
.pagina-replica .elementor-element-70ed0927 > .elementor-element-populated {
width: 100%;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
align-content: center !important;
align-items: stretch !important;
}
.pagina-replica .elementor-element-16b18d95,
.pagina-replica .elementor-element-19517c6a,
.pagina-replica .elementor-element-187356cd {
width: 100%;
}
.pagina-replica .elementor-element-16b18d95 .exad-call-to-action,
.pagina-replica .elementor-element-19517c6a .exad-call-to-action,
.pagina-replica .elementor-element-187356cd .exad-call-to-action {
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 2vw, 2rem);
text-align: center !important;
background: transparent !important;
}
.pagina-replica .elementor-element-16b18d95 .exad-call-to-action-content,
.pagina-replica .elementor-element-19517c6a .exad-call-to-action-content,
.pagina-replica .elementor-element-187356cd .exad-call-to-action-content {
max-width: 660px;
margin-inline: auto;
}
.pagina-replica .elementor-element-16b18d95 .exad-call-to-action-title,
.pagina-replica .elementor-element-19517c6a .exad-call-to-action-title,
.pagina-replica .elementor-element-187356cd .exad-call-to-action-title {
max-width: 12ch;
margin: 0 auto 1.15rem !important;
color: #fff !important;
font-size: clamp(2.4rem, 4.8vw, 4.8rem) !important;
line-height: 1.04 !important;
letter-spacing: 0 !important;
text-wrap: balance;
}
.pagina-replica .elementor-element-16b18d95 .exad-call-to-action-subtitle,
.pagina-replica .elementor-element-19517c6a .exad-call-to-action-subtitle,
.pagina-replica .elementor-element-187356cd .exad-call-to-action-subtitle,
.pagina-replica .elementor-element-16b18d95 .exad-call-to-action-subtitle p,
.pagina-replica .elementor-element-19517c6a .exad-call-to-action-subtitle p,
.pagina-replica .elementor-element-187356cd .exad-call-to-action-subtitle p {
max-width: 56ch;
margin-inline: auto !important;
color: rgba(255, 255, 255, 0.78) !important;
font-size: clamp(1rem, 1.45vw, 1.25rem) !important;
line-height: 1.75 !important;
}
.pagina-replica .elementor-element-16b18d95 .exad-call-to-action-buttons,
.pagina-replica .elementor-element-19517c6a .exad-call-to-action-buttons,
.pagina-replica .elementor-element-187356cd .exad-call-to-action-buttons {
justify-content: center !important;
margin-top: 2rem !important;
}
.pagina-replica .elementor-element-16b18d95 .exad-call-to-action-buttons li,
.pagina-replica .elementor-element-19517c6a .exad-call-to-action-buttons li,
.pagina-replica .elementor-element-187356cd .exad-call-to-action-buttons li {
text-align: center !important;
}
.pagina-replica .elementor-element-16b18d95 .exad-call-to-action-primary-btn,
.pagina-replica .elementor-element-19517c6a .exad-call-to-action-primary-btn,
.pagina-replica .elementor-element-187356cd .exad-call-to-action-primary-btn {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 0 2.25rem !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
border-radius: 999px !important;
background: var(--mattone-vivo) !important;
color: #fff !important;
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}
.pagina-replica .elementor-element-16b18d95 .exad-call-to-action-primary-btn:hover,
.pagina-replica .elementor-element-19517c6a .exad-call-to-action-primary-btn:hover,
.pagina-replica .elementor-element-187356cd .exad-call-to-action-primary-btn:hover,
.pagina-replica .elementor-element-16b18d95 .exad-call-to-action-primary-btn:focus,
.pagina-replica .elementor-element-19517c6a .exad-call-to-action-primary-btn:focus,
.pagina-replica .elementor-element-187356cd .exad-call-to-action-primary-btn:focus {
background: var(--mattone-vivo-scuro) !important;
color: #fff !important;
border-color: rgba(255, 255, 255, 0.42) !important;
}
.pagina-replica .elementor-element-16b18d95 .exad-call-to-action-primary-btn:hover span,
.pagina-replica .elementor-element-19517c6a .exad-call-to-action-primary-btn:hover span,
.pagina-replica .elementor-element-187356cd .exad-call-to-action-primary-btn:hover span,
.pagina-replica .elementor-element-16b18d95 .exad-call-to-action-primary-btn:focus span,
.pagina-replica .elementor-element-19517c6a .exad-call-to-action-primary-btn:focus span,
.pagina-replica .elementor-element-187356cd .exad-call-to-action-primary-btn:focus span {
color: #fff !important;
}
.pagina-replica .elementor-element-16b18d95 .exad-call-to-action-primary-btn::before,
.pagina-replica .elementor-element-16b18d95 .exad-call-to-action-primary-btn::after,
.pagina-replica .elementor-element-19517c6a .exad-call-to-action-primary-btn::before,
.pagina-replica .elementor-element-19517c6a .exad-call-to-action-primary-btn::after,
.pagina-replica .elementor-element-187356cd .exad-call-to-action-primary-btn::before,
.pagina-replica .elementor-element-187356cd .exad-call-to-action-primary-btn::after {
display: none !important;
}
.pagina-replica .elementor-element-17845a10,
.pagina-replica .elementor-element-3b3b50e9,
.pagina-replica .elementor-element-271a9b76 {
width: 100%;
height: 100%;
}
.pagina-replica .elementor-element-17845a10 img,
.pagina-replica .elementor-element-3b3b50e9 img,
.pagina-replica .elementor-element-271a9b76 img {
width: 100% !important;
height: 100% !important;
min-height: clamp(320px, 54vh, 620px);
object-fit: cover;
border-radius: 18px;
box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
}
@media (max-width: 767px) {
.pagina-replica .elementor-element-8c96ce7,
.pagina-replica .elementor-element-6d9cbdbd,
.pagina-replica .elementor-element-472237a8 {
padding: 3.25rem 1.1rem !important;
}
.pagina-replica .elementor-element-8c96ce7 > .elementor-container,
.pagina-replica .elementor-element-6d9cbdbd > .elementor-container,
.pagina-replica .elementor-element-472237a8 > .elementor-container {
min-height: auto;
flex-direction: column;
gap: 2rem;
}
.pagina-replica .elementor-element-2ea02f7,
.pagina-replica .elementor-element-b2b5f12,
.pagina-replica .elementor-element-4ba3d230,
.pagina-replica .elementor-element-227a86dc,
.pagina-replica .elementor-element-2416707c,
.pagina-replica .elementor-element-70ed0927 {
width: 100% !important;
}
.pagina-replica .elementor-element-16b18d95 .exad-call-to-action-title,
.pagina-replica .elementor-element-19517c6a .exad-call-to-action-title,
.pagina-replica .elementor-element-187356cd .exad-call-to-action-title {
font-size: clamp(2rem, 10vw, 3rem) !important;
}
.pagina-replica .elementor-element-17845a10 img,
.pagina-replica .elementor-element-3b3b50e9 img,
.pagina-replica .elementor-element-271a9b76 img {
min-height: 300px;
}
}
/* --- Esito dell'invio del modulo di preventivo ------------------------- */
/*
* Il messaggio nasce dal codice, non dal markup di Elementor: qui basta che
* sia leggibile e che non sposti il pulsante quando compare.
*/
.pagina-replica .modulo-esito {
margin: 12px 0 0;
font-size: 0.95rem;
line-height: 1.45;
color: #1a7f37;
}
.pagina-replica .modulo-esito--errore {
color: #b42318;
}
/*
* Spento vuol dire due cose diverse: mancano campi obbligatori, oppure l'invio
* è già partito. Il cursore lo distingue, così chi ci passa sopra capisce se
* deve compilare o solo aspettare.
*/
.pagina-replica .ff-btn-submit[disabled] {
opacity: 0.55;
cursor: not-allowed;
}
.pagina-replica form[data-invio-in-corso="si"] .ff-btn-submit[disabled] {
cursor: progress;
}
/* --- Pagina di ringraziamento ------------------------------------------ */
/*
* Il contenuto di /grazie/ è un paragrafo solo, fuori da ogni contenitore di
* Elementor: senza queste regole tocca i bordi dello schermo. È la pagina che
* vede chi ha appena inviato una richiesta, quindi vale la pena impaginarla.
*/
.pagina-replica.page-id-1019 .grazie-titolo,
.pagina-replica.page-id-1019 .wp-block-paragraph {
max-width: 44rem;
margin-inline: auto;
padding-inline: 1.5rem;
text-align: center;
}
.pagina-replica.page-id-1019 .grazie-titolo {
margin-top: clamp(4rem, 10vw, 7rem);
margin-bottom: 1.25rem;
font-size: clamp(2rem, 5vw, 2.75rem);
line-height: 1.15;
font-weight: 600;
}
.pagina-replica.page-id-1019 .wp-block-paragraph {
margin-bottom: clamp(4rem, 10vw, 7rem);
font-size: 1.0625rem;
line-height: 1.7;
opacity: 0.8;
}
/*
* FluentForm mette l'asterisco solo sulle label dei campi normali: quella dei
* termini è costruita in modo diverso e restava senza, pur essendo la spunta
* obbligatoria quanto il resto. Stesso rosso degli altri campi.
*
* Va sull'ultimo paragrafo del testo, non sulla label né sulla cella che lo
* contiene: la label è display:table-row, dove un ::after diventa una cella a
* sé che finisce a fondo riga; la cella racchiude un a blocco, dopo il
* quale l'asterisco andrebbe a capo da solo. Attaccato al paragrafo, segue
* l'ultima parola come negli altri campi.
*/
.pagina-replica .frm-fluent-form .ff_tc_label .ff_t_c > p:last-child::after {
content: " *";
color: rgb(245, 108, 108);
}
/*
* I recapiti del footer sono diventati link, ma devono continuare a leggersi
* come il testo intorno: il tema li colorerebbe e sottolineerebbe come
* collegamenti qualsiasi, e in una colonna di contatti stona.
*/
.pagina-replica .elementor-icon-list-text a[href^="tel:"],
.pagina-replica .elementor-icon-list-text a[href^="mailto:"] {
color: inherit;
text-decoration: none;
}
.pagina-replica .elementor-icon-list-text a[href^="tel:"]:hover,
.pagina-replica .elementor-icon-list-text a[href^="mailto:"]:hover,
.pagina-replica .elementor-icon-list-text a[href^="tel:"]:focus-visible,
.pagina-replica .elementor-icon-list-text a[href^="mailto:"]:focus-visible {
text-decoration: underline;
}
/* --- I tre pulsanti di contatto --------------------------------------- */
/*
* Prima c'era un pulsante solo, scritto "Contattaci", che apriva WhatsApp
* senza dirlo. Ora i tre canali sono dichiarati. Il modulo resta il pieno,
* gli altri due sono bordati: chi vuole scrivere subito trova WhatsApp, chi
* ha fretta chiama, chi vuole descrivere il lavoro con calma usa il modulo.
*/
.pagina-replica .exad-call-to-action-buttons,
.pagina-replica .cta-contatti {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
justify-content: inherit;
list-style: none;
padding: 0;
margin: 0;
}
.pagina-replica .cta-contatto {
display: inline-flex !important;
align-items: center;
gap: 0.55rem;
white-space: nowrap;
}
.pagina-replica .cta-contatto .exad-cta-primary-btn-class,
.pagina-replica .cta-contatto .elementor-button-text {
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.pagina-replica .cta-icona {
width: 1.15em;
height: 1.15em;
flex: 0 0 auto;
}
/*
* La colonna che ospita i pulsanti è larga poco più di 450px: tre in fila non
* ci stanno, quindi si impilano. Larghezza piena per tutti, così i bordi sono
* allineati e non sembrano messi lì a caso.
*/
.pagina-replica .exad-call-to-action-buttons > li,
.pagina-replica .cta-contatti > .cta-contatto {
width: 100%;
}
.pagina-replica .cta-contatto {
width: 100%;
justify-content: center;
}
/*
* Solo il modulo resta pieno. Con tre pulsanti identici l'occhio non sa dove
* andare, e il canale che raccoglie più informazioni utili al preventivo è
* proprio quello che si perderebbe. Gli altri due stanno sotto, più piccoli.
*
* Il colore è quello del marchio e non `currentColor`: queste sezioni hanno
* sfondo scuro in Servizi e chiaro in Galleria, e ereditando il colore del
* testo i pulsanti sparivano su uno dei due. Il mattone si legge su entrambi.
*
* Il selettore è più lungo del necessario apposta: in questo stesso foglio
* c'è una regola per singolo elemento Elementor che colora i pulsanti con
* !important, e a parità di peso vincerebbe lei.
*/
.pagina-replica a.exad-call-to-action-primary-btn.cta-whatsapp,
.pagina-replica a.exad-call-to-action-primary-btn.cta-telefono,
.pagina-replica a.elementor-button.cta-whatsapp,
.pagina-replica a.elementor-button.cta-telefono {
background: transparent !important;
border: 1px solid var(--mattone-vivo) !important;
color: var(--mattone-vivo) !important;
padding-top: 0.55em !important;
padding-bottom: 0.55em !important;
font-size: 0.85em !important;
}
.pagina-replica a.exad-call-to-action-primary-btn.cta-whatsapp:hover,
.pagina-replica a.exad-call-to-action-primary-btn.cta-telefono:hover,
.pagina-replica a.elementor-button.cta-whatsapp:hover,
.pagina-replica a.elementor-button.cta-telefono:hover {
background: rgba(201, 80, 63, 0.12) !important;
}
/* i due secondari si stringono attorno al testo invece di occupare tutta la riga */
.pagina-replica .exad-call-to-action-buttons > li:not(:first-child),
.pagina-replica .cta-contatti > .cta-contatto:not(.cta-modulo) {
width: auto;
}
@media (max-width: 640px) {
/* su un telefono i tre in riga si stringono fino a diventare illeggibili */
.pagina-replica .exad-call-to-action-buttons,
.pagina-replica .cta-contatti {
flex-direction: column;
align-items: stretch;
}
.pagina-replica .cta-contatto {
justify-content: center;
}
}
/* --- Alternative al modulo, nella pagina contatti ---------------------- */
/*
* Stanno sotto il modulo e sono volutamente più sobrie: chi ha già cominciato
* a compilare non deve essere tirato via, ma chi non ha voglia di farlo deve
* vedere che esiste un'altra strada prima di chiudere la pagina.
*/
.pagina-replica .alternative-modulo {
margin: 2rem auto 0;
max-width: 640px;
padding: 1.75rem 1.5rem 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
text-align: center;
}
.pagina-replica .alternative-modulo-testo {
margin: 0 0 1rem;
font-size: 0.95rem;
opacity: 0.7;
}
.pagina-replica .alternative-modulo .cta-contatti {
justify-content: center;
}
/*
* Qui i pulsanti non ereditano nulla da Elementor — non sono suoi — quindi
* l'aspetto va dato per intero.
*/
.pagina-replica .alternative-modulo .cta-contatto {
width: auto;
padding: 0.7rem 1.4rem;
border: 1px solid currentColor;
border-radius: 999px;
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
color: inherit;
transition: background-color 0.15s ease;
}
.pagina-replica .alternative-modulo .cta-contatto:hover,
.pagina-replica .alternative-modulo .cta-contatto:focus-visible {
background: rgba(0, 0, 0, 0.06);
}
@media (max-width: 640px) {
.pagina-replica .alternative-modulo .cta-contatto {
width: 100%;
}
}
/* --- I tre pulsanti nel piè di pagina ---------------------------------- */
/*
* Nel footer i pulsanti sono widget Royal (.wpr-button), non Exclusive Addons
* né Elementor: le regole scritte per le sezioni non li raggiungono, e il
* contenuto sta dentro un contenitore suo, che va reso flessibile perché
* l'icona non finisca appiccicata alla parola.
*/
.pagina-replica .cta-footer {
flex-direction: column;
align-items: flex-start;
gap: 0.6rem;
margin-top: 1.25rem;
}
.pagina-replica .cta-footer .cta-contatto {
width: auto;
}
.pagina-replica .cta-footer .wpr-button-content {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* stessa gerarchia delle sezioni: il modulo pieno, gli altri due bordati */
.pagina-replica .cta-footer a.cta-whatsapp,
.pagina-replica .cta-footer a.cta-telefono {
background: transparent !important;
border: 1px solid var(--mattone-vivo) !important;
color: var(--mattone-vivo) !important;
padding: 0.5em 1.1em !important;
font-size: 0.85em !important;
}
.pagina-replica .cta-footer a.cta-whatsapp:hover,
.pagina-replica .cta-footer a.cta-telefono:hover {
background: rgba(201, 80, 63, 0.15) !important;
}
/* --- Titolo della prima schermata -------------------------------------- */
/*
* Il nome fa da titolo, la frase di posizionamento gli sta sotto: prima erano
* un blocco unico che riempiva mezza schermata di testo grosso senza che si
* capisse dove finiva il nome dell'azienda e cominciava la descrizione.
*/
.pagina-replica .hero-nome {
display: block;
}
/*
* Il colore va detto: il nome lo prende dalla classe di Royal, che questo
* span non ha, e senza finiva quasi nero sulla fotografia scura.
*/
.pagina-replica .hero-sottotitolo {
display: block;
margin-top: 0.75rem;
color: #fff;
font-size: clamp(1.05rem, 2.2vw, 1.4rem);
font-weight: 400;
line-height: 1.45;
letter-spacing: 0.01em;
opacity: 0.9;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
/* --- Le etichette dei pulsanti nel piè di pagina ------------------------ */
/*
* Il tema le scriveva tutte in maiuscolo. Su "CONTATTACI" si notava appena,
* su "SCRIVICI SU WHATSAPP" diventa un blocco che si legge lettera per
* lettera, e il nome WhatsApp perde la forma con cui lo si riconosce.
*/
.pagina-replica .cta-footer .wpr-button-text {
text-transform: none;
}
/* --- La colonna di pulsanti fissi in basso a destra --------------------- */
/*
* Qui il tema metteva due cose posizionate a mano, ognuna col suo scarto dal
* fondo: il telefono a 78px e la freccia "torna su" a 25px. Aggiungendone un
* terzo la colonna non tornava più — i cerchi si sovrapponevano a metà e
* sembravano un errore di caricamento.
*
* Le misure del tema non si aggiustano una per una: si riprendono tutte da
* qui. Un solo passo verticale, una sola misura di cerchio, un solo margine
* dal bordo. Così aggiungerne o toglierne uno resta una riga sola.
*
* L'ordine parte dal basso col pollice: WhatsApp per primo perché è il canale
* che la gente usa davvero da telefono, poi la chiamata, e in cima la freccia,
* che serve solo dopo aver scorso e per il resto sta nascosta.
*/
.pagina-replica {
--fisso-lato: 24px;
--fisso-cerchio: 46px;
--fisso-passo: 58px; /* cerchio + 12 di respiro */
}
.pagina-replica a.wpr-pc-btn,
.pagina-replica .wpr-stt-btn {
right: var(--fisso-lato) !important;
left: auto !important;
width: var(--fisso-cerchio) !important;
height: var(--fisso-cerchio) !important;
min-width: 0 !important;
max-width: none !important;
padding: 0 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22) !important;
transition: transform 0.15s ease, background-color 0.15s ease !important;
}
.pagina-replica a.wpr-pc-btn.cta-flottante-whatsapp {
bottom: var(--fisso-lato) !important;
}
/* il telefono del tema: è l'unico .wpr-pc-btn che non sia il nostro */
.pagina-replica a.wpr-pc-btn:not(.cta-flottante-whatsapp) {
bottom: calc(var(--fisso-lato) + var(--fisso-passo)) !important;
}
.pagina-replica .wpr-stt-btn {
bottom: calc(var(--fisso-lato) + var(--fisso-passo) * 2) !important;
}
/*
* Il verde è l'unico colore di questa colonna che non sia del marchio, ed è
* voluto: è il segnale con cui WhatsApp si riconosce senza leggere niente.
* Va dichiarato con la stessa forza del tema, che colora .wpr-pc-btn per
* singolo elemento Elementor, o resta il mattone del telefono.
*/
.pagina-replica a.wpr-pc-btn.cta-flottante-whatsapp {
background-color: #25d366 !important;
border-color: #25d366 !important;
color: #fff !important;
}
.pagina-replica a.wpr-pc-btn:hover,
.pagina-replica a.wpr-pc-btn:focus-visible,
.pagina-replica .wpr-stt-btn:hover,
.pagina-replica .wpr-stt-btn:focus-visible {
transform: scale(1.06);
}
.pagina-replica a.wpr-pc-btn.cta-flottante-whatsapp:hover,
.pagina-replica a.wpr-pc-btn.cta-flottante-whatsapp:focus-visible {
background-color: #1da851 !important;
border-color: #1da851 !important;
}
/*
* Le icone: quella del telefono è del tema e arriva a 13px, persa dentro un
* cerchio da 46. Portate tutte alla stessa misura, i tre cerchi si leggono
* come una serie invece che come tre widget diversi finiti vicini.
*/
.pagina-replica a.wpr-pc-btn .wpr-pc-content,
.pagina-replica .wpr-stt-btn .wpr-stt-icon {
display: flex !important;
align-items: center;
justify-content: center;
line-height: 1;
}
.pagina-replica a.wpr-pc-btn .wpr-pc-btn-icon,
.pagina-replica a.wpr-pc-btn .wpr-pc-btn-icon svg,
.pagina-replica .wpr-stt-btn .wpr-stt-icon svg {
width: 20px !important;
height: 20px !important;
font-size: 20px !important;
}
.pagina-replica a.wpr-pc-btn .cta-icona {
width: 24px;
height: 24px;
}
@media (max-width: 640px) {
/*
* Su un telefono la colonna è più stretta e più bassa: i cerchi si
* avvicinano al bordo e si stringono, ma restano sopra i 44px con cui un
* pollice li prende senza sbagliare.
*/
.pagina-replica {
--fisso-lato: 16px;
--fisso-cerchio: 44px;
--fisso-passo: 54px;
}
}
/* ------------------------------------------------------ consenso ai cookie */
/*
* Banda in basso, non finestra modale al centro: il sito è di un artigiano,
* chi arriva vuole vedere i lavori e trovare il numero, e uno schermo nero
* che copre tutto al primo secondo fa chiudere la scheda.
*
* Sta sopra i pulsanti fissi di contatto (z-index 9999 nel tema) perché
* finché la scelta non è data è quella la cosa da leggere; appena si
* decide sparisce e i contatti tornano liberi.
*/
.consenso {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100000;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.25rem 2rem;
padding: 1.1rem 1.4rem calc(1.1rem + env(safe-area-inset-bottom));
background: var(--inchiostro);
color: #f2ede7;
box-shadow: 0 -6px 24px rgb(0 0 0 / 22%);
font-size: 0.9rem;
line-height: 1.5;
animation: consenso-entra 220ms ease-out;
}
@keyframes consenso-entra {
from { transform: translateY(100%); }
}
/* chi ha chiesto meno animazioni non vuole nemmeno questa */
@media (prefers-reduced-motion: reduce) {
.consenso { animation: none; }
}
.consenso-testo {
max-width: 62ch;
}
.consenso-testo p {
margin: 0;
}
.consenso-nota {
margin-top: 0.35rem !important;
font-size: 0.82rem;
color: #b9b0a6;
}
.consenso a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.consenso-bottoni {
display: flex;
gap: 0.6rem;
flex-shrink: 0;
}
/*
* I due bottoni hanno la stessa area e lo stesso peso tipografico: cambia
* solo il colore. Un rifiuto reso più piccolo o più smorto del consenso non
* è una scelta libera, ed è il primo rilievo che farebbe un controllo.
*/
.consenso-bottoni button {
min-height: 44px;
padding: 0.62rem 1.35rem;
border-radius: 4px;
border: 1px solid transparent;
font: inherit;
font-weight: 600;
cursor: pointer;
transition: background-color 140ms ease, color 140ms ease;
}
.consenso-rifiuta {
background: transparent;
border-color: #6d645b;
color: #f2ede7;
}
.consenso-rifiuta:hover {
background: #2a2521;
}
.consenso-accetta {
background: var(--mattone-vivo);
color: #fff;
}
.consenso-accetta:hover {
background: var(--mattone-vivo-scuro);
}
/* sotto i 640 px i bottoni vanno a tutta larghezza, uno accanto all'altro */
@media (max-width: 640px) {
.consenso {
justify-content: stretch;
gap: 0.9rem;
}
.consenso-bottoni {
width: 100%;
}
.consenso-bottoni button {
flex: 1;
}
}
/* il richiamo nel piè di pagina, accanto alla privacy */
.consenso-riapri {
margin-left: 0.75rem;
cursor: pointer;
}
/* --------------------------------------------------------- firma Softution */
/*
* Sotto il copyright del cliente, più piccola e più spenta: è una firma, non
* un annuncio. Il link è sottolineato perché si veda che è tale anche senza
* passarci sopra.
*/
.firma-softution {
margin: 0.4rem 0 0 !important;
text-align: center;
font-size: 0.78rem;
line-height: 1.4;
opacity: 0.62;
}
.firma-softution a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.firma-softution a:hover {
opacity: 1;
}
/* ------------------------------------------ pagina rifacimento tetti */
/*
* Questa pagina non passa da Elementor: nello snapshot era testo nudo fra
* intestazione e piè di pagina. La struttura la costruisce estrai-pagine.py,
* l'aspetto sta qui, e usa gli stessi colori e le stesse proporzioni delle
* pagine fatte col builder — così non si vede la giuntura.
*/
.pagina-tetti {
font-family: Inter, -apple-system, sans-serif;
color: var(--inchiostro);
}
.pagina-tetti h1,
.pagina-tetti h2 {
font-family: Inter, -apple-system, sans-serif;
line-height: 1.18;
margin: 0;
}
/*
* Il tema dichiara `h1,h2,… { color: var(--wp--preset--color--contrast) }`,
* cioè quasi nero, direttamente sull'elemento. Il colore chiaro messo sulla
* sezione qui non arriva: è ereditato, e l'ereditarietà perde contro
* qualsiasi regola che colpisca l'elemento, per specifica che sia. Vanno
* dichiarati uno per uno.
*/
.pagina-tetti .tetti-apertura h1 {
color: #f7f3ee;
}
.pagina-tetti .tetti-blocco h2,
.pagina-tetti .tetti-zone h2,
.pagina-tetti .tetti-chiusura h2 {
color: var(--inchiostro);
}
.tetti-dentro {
max-width: 1080px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* --- apertura --- */
.tetti-apertura {
background: var(--inchiostro);
color: #f4efe9;
padding: clamp(3.5rem, 9vw, 6.5rem) 0;
}
.tetti-sopratitolo {
margin: 0 0 0.9rem;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mattone-vivo);
}
.tetti-apertura h1 {
font-size: clamp(2rem, 5.2vw, 3.4rem);
font-weight: 700;
max-width: 18ch;
}
.tetti-occhiello {
margin: 1.4rem 0 0;
max-width: 62ch;
font-size: clamp(1.02rem, 1.9vw, 1.18rem);
line-height: 1.65;
color: #cdc4ba;
}
/* --- pulsanti --- */
.tetti-azioni {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: 2.2rem;
}
.tetti-bottone {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0.85rem 1.9rem;
border: 1px solid var(--mattone-vivo);
border-radius: 999px;
background: var(--mattone-vivo);
color: #fff !important;
font-weight: 600;
font-size: 0.97rem;
text-decoration: none !important;
transition: background-color 150ms ease, color 150ms ease;
}
.tetti-bottone:hover {
background: var(--mattone-vivo-scuro);
border-color: var(--mattone-vivo-scuro);
}
.tetti-bottone-vuoto {
background: transparent;
border-color: #6d645b;
color: #f4efe9 !important;
}
.tetti-bottone-vuoto:hover {
background: #2a2521;
border-color: #8a7f74;
}
/* nella chiusura il fondo è chiaro: il bordo scuro qui sarebbe invisibile */
.tetti-azioni-chiare .tetti-bottone-vuoto {
border-color: #c3b8ab;
color: var(--inchiostro) !important;
}
.tetti-azioni-chiare .tetti-bottone-vuoto:hover {
background: #e8e0d6;
}
/* --- corpo --- */
.tetti-corpo {
background: var(--carta);
padding: clamp(3rem, 7vw, 5rem) 0;
}
.tetti-corpo .tetti-dentro {
display: grid;
gap: clamp(1.5rem, 3vw, 2.2rem);
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.tetti-blocco {
background: #fff;
border: 1px solid #e6ded4;
border-radius: 18px;
padding: clamp(1.6rem, 3vw, 2.2rem);
}
.tetti-blocco h2 {
font-size: 1.16rem;
font-weight: 700;
/* la barretta di marca: lo stesso segno che il tema usa sulle sezioni */
padding-left: 0.85rem;
border-left: 3px solid var(--mattone);
}
.tetti-blocco p {
margin: 1rem 0 0;
font-size: 0.99rem;
line-height: 1.7;
color: #4a423b;
}
/* --- zone servite --- */
.tetti-zone {
background: #fff;
padding: clamp(3rem, 7vw, 4.5rem) 0;
text-align: center;
}
.tetti-zone h2 {
font-size: clamp(1.4rem, 3vw, 1.9rem);
font-weight: 700;
}
.tetti-elenco {
list-style: none;
margin: 1.8rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
}
.tetti-elenco li {
padding: 0.5rem 1.1rem;
border: 1px solid #e0d7cb;
border-radius: 999px;
background: var(--carta);
font-size: 0.92rem;
font-weight: 500;
}
.tetti-nota {
margin: 1.4rem 0 0;
font-size: 0.9rem;
color: #7d746b;
}
/* --- chiusura --- */
.tetti-chiusura {
background: var(--carta);
border-top: 1px solid #e6ded4;
padding: clamp(3rem, 7vw, 5rem) 0;
text-align: center;
}
.tetti-chiusura h2 {
font-size: clamp(1.4rem, 3.2vw, 2rem);
font-weight: 700;
max-width: 22ch;
margin-inline: auto;
}
.tetti-chiusura > .tetti-dentro > p {
margin: 1.1rem auto 0;
max-width: 54ch;
font-size: 1rem;
line-height: 1.65;
color: #4a423b;
}
.tetti-chiusura .tetti-azioni {
justify-content: center;
}
.tetti-recapito {
margin-top: 2.2rem !important;
font-size: 0.88rem;
color: #7d746b;
}
.tetti-recapito a {
color: var(--mattone);
text-decoration: underline;
text-underline-offset: 2px;
}
/* sul telefono i pulsanti stanno larghi quanto la colonna */
@media (max-width: 560px) {
.tetti-azioni {
flex-direction: column;
}
.tetti-bottone {
width: 100%;
}
}
/* -------------------------------------------------- articolo del blog */
/*
* Il post ha ora l'intestazione e il piè di pagina del sito, ma il corpo
* resta quello del tema a blocchi: larghezza diversa, font diversi, titoli
* di un'altra scala. Qui si riporta alle proporzioni delle altre pagine.
*
* È la pagina di destinazione della sitelink "Danni da Grandine": chi ci
* arriva da un annuncio non deve accorgersi di aver cambiato sito.
*/
.articolo-post {
background: var(--carta);
padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
font-family: Inter, -apple-system, sans-serif;
color: var(--inchiostro);
}
/* il tema impagina con i suoi contenitori: si riusano, cambiando la misura */
.articolo-post .wp-block-group.has-global-padding,
.articolo-post .entry-content {
max-width: 760px;
margin-inline: auto;
padding-inline: 1.5rem;
}
.articolo-post .wp-block-post-title,
.articolo-post h1 {
font-family: Inter, -apple-system, sans-serif !important;
font-size: clamp(1.8rem, 4.4vw, 2.7rem) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
color: var(--inchiostro) !important;
margin-bottom: 0.6rem !important;
}
.articolo-post .wp-block-post-date {
font-size: 0.85rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #8a7f74;
}
.articolo-post .wp-block-post-date a {
color: inherit;
text-decoration: none;
}
.articolo-post .entry-content h2,
.articolo-post .entry-content h3 {
font-family: Inter, -apple-system, sans-serif !important;
font-weight: 700 !important;
color: var(--inchiostro) !important;
margin-top: 2.4rem !important;
padding-left: 0.85rem;
border-left: 3px solid var(--mattone);
}
.articolo-post .entry-content h2 { font-size: 1.35rem !important; }
.articolo-post .entry-content h3 { font-size: 1.12rem !important; }
.articolo-post .entry-content p,
.articolo-post .entry-content li {
font-size: 1.02rem !important;
line-height: 1.75 !important;
color: #4a423b !important;
}
.articolo-post .entry-content a {
color: var(--mattone);
text-decoration: underline;
text-underline-offset: 2px;
}
.articolo-post .entry-content img {
border-radius: 18px;
max-width: 100%;
height: auto;
}
/* lo spaziatore del tema era tarato su un'altra pagina */
.articolo-post .wp-block-spacer {
height: 1.5rem !important;
}
/* ------------------------------------------- apertura della home */
/*
* La fotografia del tetto resta ferma e si vede subito: era la sezione
* intera ad avere l'animazione addosso, sfondo compreso, e chi arrivava da
* un annuncio trovava un rettangolo vuoto per il primo mezzo secondo.
*
* A muoversi è quello che le sta sopra. L'animazione è qui e non nel JS di
* Elementor apposta: parte col primo fotogramma, senza aspettare la coda
* degli script, e se il CSS non arrivasse il testo resterebbe comunque
* leggibile invece che nascosto.
*/
.hero-contenuto {
animation: hero-entra 620ms cubic-bezier(0.22, 0.61, 0.36, 1) 80ms both;
}
@keyframes hero-entra {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: none;
}
}
/* chi ha chiesto meno animazioni vede il testo fermo, non nascosto */
@media (prefers-reduced-motion: reduce) {
.hero-contenuto {
animation: none;
}
}