/* ========================================================================= STILI — Le varianti di layout Come funziona: config/stili.js mette sul una serie di classi (st-hero--centrato, st-card--piatta, st-btn--squadrato…) e qui sotto ci sono le regole che quelle classi accendono. Regole di progetto rispettate: colori solo con le variabili --c-*, spaziature solo con --sp-*, nessun valore esadecimale. Questo file va DOPO style.css: sovrascrive di proposito. NON troverai qui le varianti "predefinite" — hero affiancato, card elevata, header classico, sezioni ampio, bottoni pillola, processo verticale, intestazioni centrata, ombra morbida. Quelle sono già il comportamento di style.css: la classe viene messa lo stesso sul (serve a scrivere regole mirate se un domani servono) ma non ha bisogno di nessuna regola qui. ========================================================================= */ /* ========================================================================= 1. OMBRE — quanto "stacca" il sito dalla pagina ========================================================================= */ .st-ombra--assente { --ombra-sm: none; --ombra-md: none; --ombra-lg: none; } .st-ombra--assente .card:hover, .st-ombra--assente .lavoro:hover { box-shadow: none; } .st-ombra--netta { --ombra-sm: 0 1px 0 rgba(0,0,0,.14); --ombra-md: 0 3px 0 rgba(0,0,0,.16); --ombra-lg: 0 6px 0 rgba(0,0,0,.18); } .st-ombra--dura { --ombra-sm: 3px 3px 0 var(--c-testo); --ombra-md: 5px 5px 0 var(--c-testo); --ombra-lg: 8px 8px 0 var(--c-testo); } .st-ombra--dura .card:hover, .st-ombra--dura .lavoro:hover { transform: translate(-2px, -2px); } .st-ombra--diffusa { --ombra-sm: 0 2px 10px color-mix(in srgb, var(--c-brand) 10%, transparent); --ombra-md: 0 10px 34px color-mix(in srgb, var(--c-brand) 16%, transparent); --ombra-lg: 0 20px 60px color-mix(in srgb, var(--c-brand) 22%, transparent); } /* ========================================================================= 2. BOTTONI ========================================================================= */ .st-btn--squadrato .btn, .st-btn--squadrato .filtro, .st-btn--squadrato .occhiello, .st-btn--squadrato .comuni__elenco li, .st-btn--squadrato .elenco-inline li { border-radius: var(--raggio-sm); } .st-btn--squadrato .btn { letter-spacing: .02em; text-transform: uppercase; font-size: var(--fs-xs); } .st-btn--squadrato .btn--grande { font-size: var(--fs-sm); } .st-btn--squadrato .btn:hover { transform: none; filter: brightness(1.08); } .st-btn--arrotondato .btn, .st-btn--arrotondato .filtro { border-radius: var(--raggio); } /* Bottone principale a contorno: niente riempimento, solo bordo */ .st-btn--contorno .btn--primario { background: transparent; color: var(--c-accento); border-color: var(--c-accento); box-shadow: none; } .st-btn--contorno .btn--primario:hover { background: var(--c-accento); color: var(--c-su-accento); box-shadow: none; } .st-btn--contorno .btn { border-radius: var(--raggio-sm); } /* Sui fondi scuri il contorno resta leggibile */ .st-btn--contorno .hero .btn--primario, .st-btn--contorno .cta-finale .btn--primario, .st-btn--contorno .calcolatore__cta .btn--primario { background: var(--c-accento); color: var(--c-su-accento); } /* ========================================================================= 3. HEADER ========================================================================= */ .st-header--alto .header__inner { min-height: 96px; } .st-header--alto .nav__link { text-transform: uppercase; letter-spacing: .1em; font-size: var(--fs-xs); font-weight: 700; } .st-header--alto .header { border-bottom: var(--bordo-sp, 1px) solid var(--c-bordo); } .st-header--minimale .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--c-sfondo); border-bottom: 1px solid var(--c-bordo); } .st-header--minimale .header.is-scrolled { box-shadow: none; } .st-header--minimale .header__inner { min-height: 68px; } .st-header--minimale .nav__link { border-radius: 0; padding-inline: var(--sp-1); } .st-header--minimale .nav__link.is-active { background: transparent; box-shadow: inset 0 -2px 0 var(--c-accento); } .st-header--minimale .nav__link:hover { background: transparent; text-decoration: underline; text-underline-offset: 5px; } /* Logo al centro, menu sotto: da 900px in giù torna normale */ @media (min-width: 901px) { .st-header--centrato .header__inner { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "vuoto logo azioni" "nav nav nav"; gap: var(--sp-1) var(--sp-3); padding-block: var(--sp-2); } .st-header--centrato .logo { grid-area: logo; margin-right: 0; } .st-header--centrato .nav { grid-area: nav; justify-content: center; border-top: 1px solid var(--c-bordo); padding-top: var(--sp-1); } .st-header--centrato .header__azioni { grid-area: azioni; justify-content: flex-end; } .st-header--centrato .menu-mobile { inset-block-start: 132px; } } /* ========================================================================= 4. INTESTAZIONI DI SEZIONE ========================================================================= */ .st-tit--sinistra .intestazione-sezione { margin-inline: 0; text-align: left; max-width: 720px; } .st-tit--sinistra .intestazione-sezione .sottotitolo-sezione { margin-inline: 0; } /* ========================================================================= 5. RITMO DELLE SEZIONI ========================================================================= */ .st-sez--compatto .sezione { padding-block: var(--sp-8); } .st-sez--compatto .intestazione-sezione { margin-bottom: var(--sp-6); } /* "linee": niente fondi alternati, solo un filo di separazione. Rende il sito molto più asciutto e meno "a blocchi colorati". */ .st-sez--linee .sezione--alt { background: var(--c-sfondo); } .st-sez--linee .sezione + .sezione { border-top: 1px solid var(--c-bordo); } .st-sez--linee .sezione { padding-block: var(--sp-10); } .st-sez--linee .briciole { background: var(--c-sfondo); } .st-sez--linee .barra-fiducia { background: var(--c-sfondo); } /* ========================================================================= 6. HERO — la prima schermata. È la variante che si nota di più. ========================================================================= */ /* NOTA: style.css sotto i 1080px mette sulla scena `order: -1` e un `max-width: 440px`, per far salire la grafica sopra il testo nel layout affiancato. Le varianti che vogliono la scena SOTTO devono annullarlo: la specificità qui è più alta, quindi vince anche dentro quella media query. È il motivo per cui ogni variante ridichiara order e max-width. */ /* ---- centrato: testo grande al centro, scena sotto ---------------------- */ .st-hero--centrato .hero__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; } .st-hero--centrato .hero__testo { max-width: 900px; } .st-hero--centrato .hero__sottotitolo { margin-inline: auto; } .st-hero--centrato .hero__azioni, .st-hero--centrato .hero__rassicurazioni, .st-hero--centrato .hero__contatti-rapidi { justify-content: center; } .st-hero--centrato .hero__numeri { width: 100%; max-width: 900px; text-align: center; } .st-hero--centrato .hero__scena { max-width: 460px; margin: var(--sp-4) auto 0; order: 2; } .st-hero--centrato h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 5rem); } /* ---- diviso: due blocchi netti, uno chiaro e uno scuro ------------------ */ .st-hero--diviso .hero { padding-block: 0; min-height: min(84vh, 800px); } .st-hero--diviso .hero__inner { grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; } .st-hero--diviso .hero__testo { padding-block: var(--sp-10); padding-right: var(--sp-6); display: flex; flex-direction: column; justify-content: center; } .st-hero--diviso .hero__scena { aspect-ratio: auto; display: grid; place-items: center; background: color-mix(in srgb, var(--c-brand-chiaro) 22%, transparent); border-left: 1px solid rgba(255,255,255,.16); padding: var(--sp-4); max-width: none; order: 0; margin-inline: 0; } .st-hero--diviso .hero__scena svg { max-width: 460px; } .st-hero--diviso .hero__velo { background: linear-gradient(100deg, var(--c-brand-scuro) 46%, color-mix(in srgb, var(--c-brand) 92%, #000) 100%); } @media (max-width: 1080px) { .st-hero--diviso .hero__inner { grid-template-columns: 1fr; } .st-hero--diviso .hero__testo { padding-right: 0; padding-block: var(--sp-8) var(--sp-4); } .st-hero--diviso .hero__scena { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); } } /* ---- compatto: niente scena, hero basso e tipografico ------------------- */ .st-hero--compatto .hero { min-height: auto; padding-block: var(--sp-10) var(--sp-8); } .st-hero--compatto .hero__inner { grid-template-columns: 1fr; } .st-hero--compatto .hero__scena { display: none; } .st-hero--compatto .hero__testo { max-width: 900px; } .st-hero--compatto .hero__numeri { max-width: 900px; } .st-hero--compatto h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.8rem); } /* ---- vetrina: testo in alto a tutta larghezza, scena come fascia -------- */ /* Il padding sotto si toglie SOLO se la fascia c'e' davvero. Prima era azzerato sempre. Ma .hero__scena viene disegnata solo quando MANCA la foto della prima schermata: appena il cliente ne carica una, la foto diventa lo sfondo, la fascia sparisce e il padding restava a zero. Risultato: numeri e testo appiccicati alla sezione successiva, senza un filo d'aria. Si vedeva su ogni sito con lo stile "acqua" e una hero vera, cioe' su tutti quelli consegnati. */ .st-hero--vetrina .hero { padding-block: var(--sp-10); min-height: auto; } .st-hero--vetrina .hero:has(.hero__scena) { padding-bottom: 0; } @media (max-width: 720px) { /* Serve ripeterlo qui: ".st-hero--vetrina .hero" batte per specificita' la regola mobile di style.css, che da sola non passerebbe mai. */ .st-hero--vetrina .hero { padding-block: var(--sp-6); } .st-hero--vetrina .hero:has(.hero__scena) { padding-bottom: 0; } } .st-hero--vetrina .hero__inner { grid-template-columns: 1fr; gap: var(--sp-6); } .st-hero--vetrina .hero__testo { max-width: 760px; } .st-hero--vetrina .hero__scena { aspect-ratio: 21 / 7; width: 100%; max-width: none; border-radius: var(--raggio) var(--raggio) 0 0; background: color-mix(in srgb, var(--c-brand-chiaro) 20%, transparent); overflow: hidden; order: 2; margin-inline: 0; } .st-hero--vetrina .hero__scena svg { height: 100%; object-fit: cover; } @media (max-width: 720px) { .st-hero--vetrina .hero__scena { aspect-ratio: 4 / 3; } } /* ========================================================================= 7. CARD ========================================================================= */ /* ---- piatta: nessun bordo, fondo appena diverso, niente sollevamento ---- */ .st-card--piatta .card { border-color: transparent; background: var(--c-sfondo-alt); box-shadow: none; } .st-card--piatta .sezione--alt .card { background: var(--c-superficie); } .st-card--piatta .card:hover { transform: none; box-shadow: none; border-color: transparent; } .st-card--piatta .card:hover .card__icona { background: var(--c-accento-soft); color: var(--c-accento); } .st-card--piatta .card__icona { border-radius: var(--raggio-sm); } /* ---- bordata: bordo marcato, nessuna ombra, cambia colore al passaggio -- */ .st-card--bordata .card { border-width: 2px; box-shadow: none; border-color: var(--c-bordo); } .st-card--bordata .card:hover { transform: none; box-shadow: none; border-color: var(--c-accento); background: var(--c-superficie); } .st-card--bordata .card__icona { background: transparent; border: 2px solid var(--c-bordo); border-radius: var(--raggio-sm); color: var(--c-accento); } .st-card--bordata .card:hover .card__icona { border-color: var(--c-accento); } /* ---- numerata: un numero grande in alto a destra al posto dell'icona ---- */ .st-card--numerata .griglia { counter-reset: scheda; } .st-card--numerata .card { counter-increment: scheda; } .st-card--numerata .card::before { content: counter(scheda, decimal-leading-zero); position: absolute; top: var(--sp-2); right: var(--sp-3); font-family: var(--font-titoli); font-size: var(--fs-2xl); font-weight: 700; line-height: 1; color: var(--c-bordo); pointer-events: none; transition: color var(--tempo-medio) var(--curva); } .st-card--numerata .card:hover::before { color: var(--c-accento); } .st-card--numerata .card__icona { width: 40px; height: 40px; background: transparent; color: var(--c-accento); margin-bottom: var(--sp-1); } .st-card--numerata .card__icona svg { width: 24px; height: 24px; } /* Il badge "Più richiesto" e il numero non devono sovrapporsi */ .st-card--numerata .card--evidenza::before { top: var(--sp-6); } /* ---- affiancata: icona a sinistra, testo a destra ----------------------- */ .st-card--affiancata .card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icona testa" "icona corpo"; column-gap: var(--sp-3); row-gap: 0; align-content: start; } .st-card--affiancata .card__icona { grid-area: icona; grid-row: 1 / span 2; margin-bottom: 0; } .st-card--affiancata .card h3 { grid-area: testa; align-self: center; } .st-card--affiancata .card__sottotitolo, .st-card--affiancata .card__testo, .st-card--affiancata .card__punti, .st-card--affiancata .card__prezzo, .st-card--affiancata .card__cta { grid-column: 2; } @media (max-width: 520px) { .st-card--affiancata .card { grid-template-columns: 1fr; grid-template-areas: "icona" "testa" "corpo"; } .st-card--affiancata .card__icona { grid-row: auto; margin-bottom: var(--sp-2); } .st-card--affiancata .card__sottotitolo, .st-card--affiancata .card__testo, .st-card--affiancata .card__punti, .st-card--affiancata .card__prezzo, .st-card--affiancata .card__cta { grid-column: 1; } } /* ========================================================================= 8. PROCESSO — "come lavoriamo" ========================================================================= */ /* ---- orizzontale: i passi in fila, numero sopra ------------------------- */ .st-proc--orizzontale .processo { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-3); max-width: none; } .st-proc--orizzontale .passo { grid-template-columns: 1fr; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--c-bordo); border-radius: var(--raggio); background: var(--c-superficie); } .st-proc--orizzontale .passo::after { display: none; } .st-proc--orizzontale .passo::before { width: 48px; height: 48px; font-size: var(--fs-base); border-radius: var(--raggio-sm); } /* ---- timeline: passi alternati a destra e a sinistra della linea -------- */ @media (min-width: 861px) { .st-proc--timeline .processo { position: relative; max-width: 940px; } .st-proc--timeline .processo::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--c-bordo); transform: translateX(-50%); } .st-proc--timeline .passo { grid-template-columns: 1fr; width: calc(50% - var(--sp-5)); padding: var(--sp-2) 0 var(--sp-4); } .st-proc--timeline .passo::after { display: none; } .st-proc--timeline .passo::before { position: absolute; top: var(--sp-2); background: var(--c-sfondo); z-index: 1; } .st-proc--timeline .passo:nth-child(odd) { justify-self: start; text-align: right; } .st-proc--timeline .passo:nth-child(odd)::before { right: calc(-1 * var(--sp-5) - 32px); } .st-proc--timeline .passo:nth-child(even) { justify-self: end; } .st-proc--timeline .passo:nth-child(even)::before { left: calc(-1 * var(--sp-5) - 32px); } .st-proc--timeline .sezione--alt .passo::before { background: var(--c-sfondo-alt); } } /* ========================================================================= 9. RITOCCHI PER SINGOLO STILE Piccole cose che valgono solo per uno stile e non meritano una variante. ========================================================================= */ /* Cantiere: titoli in maiuscolo, molto pesanti */ .st-cantiere h1, .st-cantiere h2 { text-transform: uppercase; letter-spacing: -0.01em; font-weight: 800; } .st-cantiere .occhiello { border: 2px solid var(--c-testo); background: transparent; color: var(--c-testo); } /* Studio: titoli con le grazie, più aria attorno al testo lungo */ .st-studio h1, .st-studio h2, .st-studio h3 { letter-spacing: -0.01em; font-weight: 600; } .st-studio .contenuto-lungo p { font-size: var(--fs-lg); line-height: 1.75; } .st-studio .occhiello { background: transparent; padding-inline: 0; color: var(--c-testo-tenue); } /* Metallo: righe di separazione al posto dei riquadri */ .st-metallo .comuni, .st-metallo .scheda-legale, .st-metallo .google-riepilogo { border-width: 1px; } .st-metallo .occhiello { background: transparent; padding-inline: 0; border-bottom: 2px solid var(--c-accento); border-radius: 0; } /* Pulito: nessuna decorazione, solo tipografia e filetti */ .st-pulito .occhiello { background: transparent; padding-inline: 0; color: var(--c-accento); } .st-pulito .occhiello::before { display: none; } .st-pulito .card__icona { background: transparent; color: var(--c-accento); width: 40px; height: 40px; } .st-pulito .hero-pagina::before, .st-pulito .cta-finale::before { display: none; } .st-pulito .logo__segno { background: var(--c-accento); color: var(--c-su-accento); border-radius: 0; } /* Notte: contorni luminosi al posto delle ombre */ .st-notte .card:hover, .st-notte .lavoro:hover { box-shadow: 0 0 0 1px var(--c-brand), 0 12px 40px color-mix(in srgb, var(--c-brand) 26%, transparent); } .st-notte .btn--primario { box-shadow: 0 0 24px color-mix(in srgb, var(--c-accento) 34%, transparent); } /* Bosco e Terracotta: prima lettera dei titoli di sezione più calda */ .st-bosco .intestazione-sezione h2, .st-terracotta .intestazione-sezione h2 { letter-spacing: -0.015em; } /* ========================================================================= 10. RIDUZIONE DEL MOVIMENTO Vale la regola di progetto: se il sistema chiede meno movimento, le varianti non devono introdurne di nuovo. ========================================================================= */ @media (prefers-reduced-motion: reduce) { .st-ombra--dura .card:hover, .st-ombra--dura .lavoro:hover, .st-btn--squadrato .btn:hover { transform: none; } .st-card--numerata .card::before { transition: none; } }