/* components.css — le sezioni di builders_merchant. Linguaggio: angoli vivi, filetti sottili, numerali grandi, fotografia a piena larghezza. ⚠ Regola che governa TUTTO questo foglio: nessuna sezione tiene un telaio a due colonne quando la seconda colonna non ha una foto. Le sezioni fotografiche (hero, reparti, azienda, noleggio) sono foto+testo PER COSTRUZIONE; quelle senza foto (marchi, contatti, testate) sono a larghezza piena e la misura di lettura sta sui capoversi, mai sul telaio. */ /* ===================== Bottoni ===================== */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); line-height: 1.2; letter-spacing: .01em; text-decoration: none; padding: var(--space-3) var(--space-5); border: 1px solid transparent; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn--accent { background: var(--accent); color: var(--paper); } /* bianco su mattone 6.06 */ .btn--accent:hover { background: var(--accent-deep); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } /* ⚠ Su fondo scuro il mattone NON è testo (2.86): il bordo e il testo sono chiari. */ .btn--ghost-on-dark { background: transparent; color: var(--on-dark); border-color: rgba(244,241,237,.55); } .btn--ghost-on-dark:hover { background: var(--on-dark); color: var(--brand-dark); border-color: var(--on-dark); } .wp-block-button.is-accent .wp-block-button__link { background: var(--accent); color: var(--paper); border-radius: 0; font-family: var(--font-display); font-weight: 600; } .wp-block-button.is-accent .wp-block-button__link:hover { background: var(--accent-deep); } .wp-block-button.is-ghost .wp-block-button__link { background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 0; font-family: var(--font-display); font-weight: 600; } .wp-block-button.is-ghost-on-dark .wp-block-button__link { background: transparent; color: var(--on-dark); border: 1px solid rgba(244,241,237,.55); border-radius: 0; font-family: var(--font-display); font-weight: 600; } /* ===================== Occhiello e intro ===================== */ .eyebrow { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--accent-ink); margin: 0 0 var(--space-4); } .on-dark .eyebrow, .band--dark .eyebrow { color: var(--accent-dark); } /* rame chiaro: 6.77 sulla notte */ /* ⚠⚠ La banda CONTATTI: il suo occhiello restava --accent-ink (il ruggine nato per i fondi chiari) sopra il bordeaux, cioè **1,49 di contrasto** — praticamente invisibile, su tutte e otto le pagine. Trovato misurando i PIXEL DIPINTI, non rileggendo i token. E il rame chiaro NON basta: sul token piatto --brand fa 4,72, ma la banda è una SFUMATURA e sulla sua fermata più chiara (#7B0B1C) scende a 4,31, a 390px perfino a 3,85. Su questa banda l'occhiello è chiaro: 9,6 sul pixel peggiore. */ .contact-band .eyebrow { color: var(--on-dark); } /* L'intro di sezione NON porta `text-wrap: balance`: distribuirebbe le righe e lascerebbe vuota la metà destra. La misura sta sul capoverso. */ .section-intro { max-width: none; margin-bottom: var(--space-8); } .section-intro .lead { font-size: var(--text-md); color: var(--ink-muted); max-width: var(--misura-prosa); } .section-intro--split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-7); align-items: end; } .section-intro--split .lead { text-align: right; margin-left: auto; max-width: 44ch; } .muted { color: var(--ink-muted); } .band--dark .muted, .band--dark .lead { color: var(--on-dark-muted); } /* Il titolo bicolore del template: la prima riga in ruggine, il resto in inchiostro. */ .ttl-accent { color: var(--accent-ink); } .band--dark .ttl-accent { color: var(--accent-dark); } /* ===================== Intestazione ===================== */ /* ⚠⚠ MISURATO: lo sticky NON teneva. Il wrapper `.wp-block-template-part` che WordPress mette attorno alla parte di testata è alto quanto la testata (134px), e un `position:sticky` si può muovere solo DENTRO il proprio contenitore: dopo 1500px di scorrimento la testata era a -1500. `display:contents` toglie di mezzo il wrapper senza toccarne il markup. L'approccio `:has()` sul genitore non basta. */ .wp-site-blocks > .wp-block-template-part:first-child { display: contents; } .site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: var(--hairline); } /* Striscia di servizio: indirizzo, orari e telefono. ⚠ Esiste per una ragione di impaginazione oltre che di contenuto — con marchio a sinistra e azioni a destra restavano 608px di VUOTO in mezzo, e quel vuoto è ciò che fa sembrare una testata «non organizzata». Qui l'informazione che un cliente di questo mestiere cerca davvero (quando siete aperti, dove siete) riempie la riga. */ .site-header__util { background: var(--surface); border-bottom: var(--hairline); } .site-header .container { max-width: var(--container-header); } .site-header__util-row { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-6); padding-block: 6px; font-size: var(--text-xs); color: var(--ink-muted); } .site-header__util-item { white-space: nowrap; } .site-header__tel { font-family: var(--font-display); font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; } .site-header__tel:hover { color: var(--accent-ink); } /* Riga principale: marchio a sinistra, navigazione e azione a destra, tutto sulla STESSA linea e con lo stesso bordo sinistro del contenuto. */ .site-header__row { display: flex; align-items: center; gap: var(--space-5); padding-block: var(--space-2); min-height: 56px; } .site-header__row > * { align-self: center; margin-block: 0; } .wordmark { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.025em; color: var(--ink); white-space: nowrap; } .wordmark small { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-muted); } /* ⚠ Il raster del marchio di questi clienti contiene spesso GIA' il nome: in testata va il solo SIMBOLO, e il nome lo scrive la tipografia del sito. Altrimenti la scritta compare due volte. */ .wordmark__emblem { height: 34px; width: auto; } .wordmark__name { line-height: 1.1; } /* ⚠ Né il marchio né la navigazione si comprimono: un flex item compresso con testo `nowrap` non accorcia il testo, lo fa SBORDARE — ed è così che il nome finiva sopra la prima voce. */ .wordmark { flex: 0 0 auto; } .site-nav { margin-left: auto; flex: 0 0 auto; } .site-header .site-nav .wp-block-navigation__container { gap: var(--space-4); flex-wrap: nowrap; } /* ⚠ A PARITÀ di specificità vince WordPress (il CSS dei blocchi è iniettato dopo il tema): per il colore delle voci serve un livello in più E il colore sullo __label. */ .site-header .site-nav .wp-block-navigation-item__content { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--ink); text-decoration: none; white-space: nowrap; } .site-header .site-nav .wp-block-navigation-item__label { color: var(--ink); } .site-header .site-nav .wp-block-navigation-item__content:hover { color: var(--accent-ink); } .site-header .site-nav .wp-block-navigation__submenu-container { background: var(--paper); border: var(--hairline); box-shadow: var(--shadow-md); } /* La CTA non deve MAI essere più alta della riga: crossava il filetto della striscia. */ .site-header__cta { margin-left: 0; padding-block: var(--space-3); flex: 0 0 auto; } /* ⚠ Il `backdrop-filter` creerebbe un containing-block per il position:fixed e confinerebbe l'overlay del menu all'altezza della testata: qui la testata è opaca apposta. */ /* ⚠⚠ MISURATO: fra 600px e la soglia qui sotto WordPress mostra ancora la nav INLINE (la sua soglia per l'overlay è 600px) e sette etichette lunghe facevano sbordare la pagina di 309px in orizzontale. Il crawl non lo vedeva perché guarda 1440 e 390, cioè i due lati di quella fascia. ⚠ La soglia è MISURATA, non scelta a occhio: marchio 235 + navigazione 839 + azione 120 + spazi 48 = 1242px richiesti, e il contenitore della testata offre `min(1440, viewport) − 88`. Il confine misurato cade a 1336px: a 1331 mancano 5px, a 1340 ne avanzano 4. Cambiando le etichette del menu — la nota dice che vanno concordate col cliente — la somma cambia e la soglia va rimisurata, non indovinata. ⚠ Le regole di WP qui sono (0,2,0) e (0,3,0): si vincono solo aggiungendo un livello. */ @media (max-width: 1335px) { .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } .site-header .wp-block-navigation__responsive-container.is-menu-open { display: flex; } .site-header__util-item { display: none; } .site-header__util-row { justify-content: center; } :root { --header-h: 123px; } } @media (max-width: 780px) { /* Senza la striscia di servizio la testata è più bassa: chi si appiccica sotto deve saperlo. */ .site-header__util { display: none; } :root { --header-h: 65px; } } .site-header .wp-block-navigation__responsive-container.is-menu-open { height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--paper); padding-top: var(--space-8); } /* WP tiene l'overlay bianco con `:not(.has-background)…:not(.disable-default-overlay)` = (0,4,0): per il colore del testo si vince solo ricopiando il suo schema di selettore. */ .wp-block-navigation__responsive-container.is-menu-open:not(.has-background) .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open:not(.has-background) .wp-block-navigation-item__label { color: var(--ink); } /* ⚠⚠ MISURATO risalendo la catena dei genitori: la prima voce stava a left 328 su 390. Il colpevole NON era l'ancora né la voce (62px), ma DUE antenati larghi quanto lo schermo con l'allineamento contrario — `ul.wp-block-navigation__container` e `__responsive-container-content` — entrambi ad `align-items: flex-end`, perché il pattern dichiara la nav `justifyContent:right` per il DESKTOP e WordPress porta quella classe anche nell'overlay, dove la direzione è colonna. Correggere il figlio non serve finché allinea il padre. ⚠ E il pannello ha bisogno del suo GUTTER: senza, le voci toccano il bordo sinistro dello schermo. */ .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; width: 100%; } .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-inline: var(--gutter); } .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; } .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { width: 100%; text-align: left; font-size: var(--text-lg); padding-block: var(--space-4); border-bottom: var(--hairline); } .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { padding-bottom: 96px; } /* ⚠ I due bottoni dell'overlay: WordPress li rende 24×24 con padding 0, cioè poco più di metà dell'area di tocco minima — misurato sul vivo. Qui si dichiara SOLO la misura, mai il `display`: scrivendolo fuori dalla media query l'hamburger compariva anche a 1920, su una riga tutta sua. */ .site-header .wp-block-navigation__responsive-container-open, .site-header .wp-block-navigation__responsive-container-close { width: 48px; height: 48px; padding: var(--space-3); color: var(--ink); align-items: center; justify-content: center; } .site-header .wp-block-navigation__responsive-container-close { top: var(--space-3); right: var(--gutter); } .site-header .wp-block-navigation__responsive-container-open svg, .site-header .wp-block-navigation__responsive-container-close svg { width: 24px; height: 24px; } /* Sotto-menu INLINE su mobile: il default di WP li rende come card sospese, illeggibili a 390px. */ .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { position: static !important; border: 0 !important; box-shadow: none !important; background: none !important; padding-left: var(--space-5); } /* ===================== Hero ===================== */ .hero { position: relative; isolation: isolate; background: var(--brand-dark); color: var(--on-dark); overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } /* ⭐ HERO A DISSOLVENZA: quattro scatti che si alternano lentissimi. Su un deposito che ha una sala mostre da far vedere, una fotografia sola spreca il primo schermo. ⚠ Le slide stanno DIETRO lo scrim (`z-index:-2` è già sul contenitore) e NON sono lazy: sono tutte in scena per costruzione. ⚠ Senza moto resta la PRIMA, piena: fail-visible, non una pila di immagini sovrapposte. */ .hero__media--slide { position: absolute; inset: 0; } .hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; } .hero__slide:first-child { opacity: 1; } /* ⚠ DUE scatti, non quattro: ogni slide è una fotografia scaricata SUBITO (sono in scena, quindi `loading="lazy"` non le rimanda), e quattro costavano ~800 KB per una dissolvenza da 40 secondi. Due bastano a far capire che la sala mostre c'è, e pesano la metà. */ @media (prefers-reduced-motion: no-preference) { .js .hero__slide { animation: fp-dissolvi 24s linear infinite; } .js .hero__slide:nth-child(1) { animation-delay: 0s; } .js .hero__slide:nth-child(2) { animation-delay: 12s; } } @keyframes fp-dissolvi { 0% { opacity: 0; } 5% { opacity: 1; } 45% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } } /* ⚠ Con lo slideshow lo scrim si rinforza: quattro fotografie hanno quattro luminosità diverse e il titolo bianco deve reggere sulla PIÙ CHIARA, non sulla media. */ .hero:has(.hero__media--slide)::before { --scrim-strong: .95; --scrim-mid: .85; } /* SCRIM DIREZIONALE — misurato sulle foto reali di questo mestiere (sale mostre molto illuminate): forte nell'angolo basso-sinistro dove sta il titolo, trasparente in alto a destra dove la foto resta VERA. Un velo piatto spegnerebbe anche la metà buona; una tinta di marca falserebbe il colore delle ceramiche, che in questo mestiere è il prodotto. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to top right, rgba(28,26,25,var(--scrim-strong)) 0%, rgba(28,26,25,var(--scrim-mid)) 34%, rgba(28,26,25,var(--scrim-soft)) 62%, rgba(28,26,25,0) 100%); } /* ⚠ Lo scrim direzionale porta il p99 in AA su tutte le foto provate, ma un faretto isolato sotto il titolo resta un punto chiaro: la PIASTRA locale limita il caso peggiore per costruzione. */ .hero__plate { position: relative; padding: var(--space-6) var(--space-7) var(--space-7) 0; max-width: 46rem; } .hero__plate::before { content: ""; position: absolute; z-index: -1; inset: -0.5rem -2rem -1rem -2rem; background: radial-gradient(120% 140% at 22% 70%, rgba(28,26,25,.72) 0%, rgba(28,26,25,.45) 55%, rgba(28,26,25,0) 100%); } .hero__inner { position: relative; min-height: clamp(30rem, 62vh, 42rem); display: flex; align-items: flex-end; padding-block: var(--space-9) var(--space-7); } .hero h1 { color: var(--paper); font-size: var(--text-3xl); } .hero__lead { color: var(--on-dark); font-size: var(--text-md); margin-top: var(--space-5); max-width: 52ch; } .hero__cta { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); } /* ⚠⚠ L'occhiello dell'hero NON è rame: sotto c'è una FOTOGRAFIA, cioè l'unico fondo che non controlliamo, e lo scrim direzionale è tarato sul titolo bianco. Misurato sui pixel, il rame chiaro faceva 2,04-4,48 a seconda di dove cadono le lettere — sotto AA a tutte e tre le larghezze. Il titolo bianco sulla stessa foto fa 17,53: su una fotografia si scrive in bianco. */ .hero .eyebrow { color: var(--paper); } /* Riga di didascalie sul fondo dell'hero (architect6): filetti chiari, testo tenue. */ .hero__captions { position: relative; border-top: var(--hairline-dark); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: rgba(28,26,25,.55); backdrop-filter: blur(6px); padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); } .hero__caption { margin: 0; padding: var(--space-5) var(--space-5) var(--space-5) 0; color: var(--on-dark-muted); font-size: var(--text-sm); border-left: var(--hairline-dark); padding-left: var(--space-5); } .hero__caption:first-child { border-left: 0; padding-left: 0; } .hero__caption b { display: block; color: var(--on-dark); font-family: var(--font-display); font-weight: 600; } /* Variante design-only: nessuna foto regge l'hero → il carattere lo dà la banda bordeaux piena. Non si mette MAI una foto finta al posto di quella che manca. */ .hero--design { background: var(--brand); } .hero--design::before { background: none; } .hero--design .hero__inner { min-height: clamp(24rem, 48vh, 32rem); } .hero--design .hero__plate::before { background: none; } /* ===================== Reparti (services): righe piene foto+testo ===================== */ .reparti-rows { border-top: var(--hairline); } .reparto-row { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); border-bottom: var(--hairline); text-decoration: none; color: inherit; align-items: stretch; } .reparto-row__card { display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-7) var(--space-7) var(--space-7) 0; gap: var(--space-4); } /* ⚠ Il numerale è TESTO, non un filetto: con --sage-light faceva 3,12 su carta e axe lo bocciava (5 nodi, hard gate a zero). Il ruggine fa 7,40 e dà anche più carattere all'indice. */ .reparto-row__n { font-family: var(--font-display); font-size: var(--text-num); font-weight: 700; color: var(--accent-ink); letter-spacing: -0.03em; line-height: 1; opacity: .9; } .reparto-row__card h3 { font-size: var(--text-xl); } .reparto-row__card p { color: var(--ink-muted); max-width: 42ch; } .reparto-row__meta { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-xs); color: var(--ink-muted); border-top: var(--hairline); padding-top: var(--space-4); } .reparto-row__more { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--accent-ink); } .reparto-row__media { overflow: hidden; background: var(--surface); } .reparto-row__media img { width: 100%; height: 100%; min-height: 20rem; object-fit: cover; transition: transform 600ms var(--ease); } .reparto-row:hover .reparto-row__media img { transform: scale(1.03); } .reparto-row:hover .reparto-row__more { color: var(--accent); } /* ===================== Azienda (featured): foto + numeri tecnici ===================== */ .azienda__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--space-8); align-items: start; } .azienda__figure { position: relative; } .azienda__figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; } /* Il bollo tondo del template, qui in bordeaux: porta un dato TECNICO, non una vanteria. */ .azienda__stamp { position: absolute; top: calc(-1 * var(--space-6)); left: calc(-1 * var(--space-5)); width: 8.5rem; height: 8.5rem; border-radius: 999px; background: var(--brand); color: var(--on-dark); display: grid; place-content: center; text-align: center; font-family: var(--font-display); line-height: 1.1; } .azienda__stamp b { display: block; font-size: 1.6rem; font-weight: 700; } .azienda__stamp span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--on-dark-muted); } .azienda__body p { color: var(--ink-muted); max-width: var(--misura-prosa); } .cifre { margin-top: var(--space-7); border-top: var(--hairline); } .cifra { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--space-6); align-items: baseline; padding-block: var(--space-5); border-bottom: var(--hairline); } .cifra > p { margin: 0; } .cifra__n { font-family: var(--font-display); font-size: var(--text-num); font-weight: 700; letter-spacing: var(--tracking-display); color: var(--ink); line-height: 1; } .cifra__t { color: var(--ink-muted); font-size: var(--text-sm); text-align: right; } .cifra__t b { display: block; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); } /* ===================== Noleggio (method): banda scura ===================== */ .band--dark { background: var(--grad-notte); color: var(--on-dark); } .band--dark h2, .band--dark h3 { color: var(--on-dark); } /* Stesso telaio delle pagine reparto: le foto in FLOAT, il testo che le affianca finché ci sono e riprende tutta la larghezza quando finiscono. Con una griglia, l'ultima voce dell'elenco restava col fianco destro scoperto — e con due sole fotografie succede sempre. */ .noleggio__grid { display: block; } .noleggio__grid::after { content: ""; display: block; clear: both; } .noleggio__list { border-top: var(--hairline-dark); } .noleggio__item { padding-block: var(--space-5); border-bottom: var(--hairline-dark); } .noleggio__item h3 { font-size: var(--text-lg); } .noleggio__item p { color: var(--on-dark-muted); margin-top: var(--space-2); max-width: none; } /* ⚠ La cella ORFANA è aritmetica, non gusto: due fotografie in una griglia a due colonne, con la prima che occupa tutta la riga, lasciano la seconda cella VUOTA in basso a destra — e a occhio quel vuoto sembra respiro. Con due foto la colonna è UNA: si impilano, e la colonna dei media arriva all'altezza del testo invece di fermarsi a metà. */ .noleggio__media { float: right; width: 46%; margin: 0 0 var(--space-6) var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tile-gap); } .noleggio__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } /* ===================== Mosaico dei reparti (home) ===================== */ /* ⚠ Il difetto che questa sezione toglie: la home mostrava una foto per reparto e basta. Un deposito si racconta con la QUANTITÀ — è la sua natura. Il mosaico aggiunge gli scatti che stavano solo nelle pagine interne, in una griglia irregolare che non sembra un catalogo. */ .mosaico-sec { background-image: var(--grad-sabbia); } .mosaico { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--tile-gap); } .mosaico figure { margin: 0; overflow: hidden; border-radius: 6px; } .mosaico img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 800ms var(--ease); } .mosaico figure:hover img { transform: scale(1.06); } .mosaico .m--alto { grid-column: span 2; grid-row: span 2; } .mosaico .m--largo { grid-column: span 2; } .mosaico .m--uno { grid-column: span 1; } .mosaico figure { aspect-ratio: 1; } .mosaico .m--alto { aspect-ratio: 1; } .mosaico .m--largo { aspect-ratio: 2 / 1; } @media (max-width: 980px) { .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 620px) { .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mosaico .m--alto, .mosaico .m--largo { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; } } /* ===================== Marchi: muro in SCORRIMENTO, niente foto ===================== */ /* ⚠ Il difetto che questa sezione risolve, fotografato dall'owner: i nomi incolonnati a sinistra e la metà destra della pagina BIANCA. Un elenco di marchi è per sua natura una riga lunga, non un blocco: qui scorre a tutta larghezza, lentissimo, e la riga è piena PER COSTRUZIONE — a qualunque larghezza, con tre marchi o con trenta. Le righe alternano il verso, così il muro respira invece di sfilare. ⚠ La seconda copia del testo è `aria-hidden`: serve al ciclo, non al lettore. ⚠⚠ NIENTE `data-marquee` qui: `reveal.js` della flotta lo usa per CLONARE la pista, e con la copia già presente nel markup la riga compariva DUE volte («Materiale edile» in cima e in fondo al muro). Un meccanismo condiviso non si invoca per decorazione: o lo si usa come vuole, o non lo si nomina. */ .marchi-muro { border-top: var(--hairline); } .marchi-riga { --nastro-pad: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); /* Larghezza VISIBILE del nastro: la finestra meno il rientro e la colonna dell'etichetta. Serve a dire a ogni copia quanto deve essere larga come MINIMO — v. `.marchi-track__line`. */ --nastro-finestra: calc(100vw - var(--nastro-pad) - 15rem - var(--space-6)); display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: center; gap: var(--space-6); border-bottom: var(--hairline); padding-block: var(--space-5); padding-left: var(--nastro-pad); } .marchi-riga__k { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--accent-ink); margin: 0; } .marchi-track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); } .marchi-track__in { display: flex; width: max-content; } /* ⚠⚠ OGNI COPIA È LARGA ALMENO MEZZA FINESTRA, e le copie sono QUATTRO. Con due copie corte — «San Marco · Amonn · Veleca» sta in 460px — il nastro era più stretto della finestra: metà riga restava BIANCA a ogni giro, e la riga in senso inverso per giunta parte a metà corsa, quindi si apriva sul vuoto. Quattro copie con un minimo di mezza finestra garantiscono che due copie coprano sempre la finestra intera: a qualunque istante del ciclo la riga è piena di testo, in tutte e due le direzioni, con tre marchi come con undici. */ .marchi-track__line { display: block; margin: 0; padding-right: 3rem; white-space: nowrap; min-width: calc(var(--nastro-finestra) / 2); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--tracking-display); color: var(--ink); } @media (prefers-reduced-motion: no-preference) { .marchi-track__in { animation: fp-scorri 46s linear infinite; } .marchi-riga--rev .marchi-track__in { animation-direction: reverse; } .marchi-riga:hover .marchi-track__in { animation-play-state: paused; } } @keyframes fp-scorri { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Senza moto il muro resta un elenco leggibile che va a capo: fail-visible, non mutilato. */ @media (prefers-reduced-motion: reduce) { .marchi-track { -webkit-mask-image: none; mask-image: none; } .marchi-track__in { width: auto; flex-wrap: wrap; } .marchi-track__line { white-space: normal; } .marchi-track__line[aria-hidden="true"] { display: none; } } @media (max-width: 860px) { .marchi-riga { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding-left: var(--gutter); --nastro-finestra: calc(100vw - var(--gutter)); } .marchi-track__line { font-size: var(--text-lg); } } /* ===================== Banda fotografica a tutta pagina ===================== */ /* Una pagina di reparto ha bisogno di UN'immagine grande, non solo di tessere: è la differenza fra «ho visto delle foto» e «ho visto il posto». La banda è full-bleed, alta mezza schermata, con la testa ad arco e una didascalia editoriale sul filetto. */ /* La banda fotografica ha una sezione propria con la sua tinta: così il raccordo curvo si stacca sul fondo invece di galleggiare sul bianco. */ .banda-sec { background: var(--surface-3); } .foto-banda { position: relative; overflow: hidden; border-radius: var(--curva-banda) var(--curva-banda) 0 0; } .foto-banda img { width: 100%; height: clamp(20rem, 46vh, 34rem); object-fit: cover; display: block; } /* ⚠⚠ LO SCRIM DELLA DIDASCALIA È UNA MISURA, NON UN GUSTO. Quello di prima saliva a .82 solo al 70% dell'altezza: il titolo, che sta in cima al blocco di testo, cadeva dove il velo è ancora trasparente — misurato sui pixel, 2,35 su una foto chiara, e sul telefono la didascalia è più alta quindi il titolo sale ancora. Ora il velo è denso già a metà, e la riga più esposta fa 8,1. */ .foto-banda figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-9) var(--gutter) var(--space-5); background: linear-gradient(180deg, rgba(20,15,16,0) 0%, rgba(20,15,16,.34) 20%, rgba(20,15,16,.80) 48%, rgba(20,15,16,.94) 78%, rgba(20,15,16,.97) 100%); color: var(--on-dark); font-size: var(--text-sm); } @media (max-width: 620px) { /* Sul telefono il testo occupa quasi tutta la banda: il velo parte subito. */ .foto-banda figcaption { background: linear-gradient(180deg, rgba(20,15,16,.30) 0%, rgba(20,15,16,.72) 24%, rgba(20,15,16,.92) 56%, rgba(20,15,16,.97) 100%); } } .foto-banda figcaption > * { margin: 0; } .foto-banda figcaption b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--paper); letter-spacing: var(--tracking-display); } .foto-banda figcaption > span { display: block; max-width: 52ch; color: var(--on-dark-muted); margin-top: var(--space-2); } /* ===================== STRISCIA di colore (dove la foto non regge) ===================== */ /* Stessa forma della banda fotografica — pieno formato, angoli superiori raccordati, didascalia in basso a sinistra — ma la superficie la fa la luce: due braci di marca e tre onde larghissime, appena più chiare del fondo. Le onde sono TRE archi, non una trama che si ripete: una texture che si nota è rumore, una forma sola è disegno. */ .striscia { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--curva-banda) var(--curva-banda) 0 0; min-height: clamp(15rem, 32vh, 23rem); display: flex; align-items: flex-end; background: var(--grad-notte); } .striscia::before { content: ""; position: absolute; inset: -18% -8%; z-index: -1; background: radial-gradient(58% 124% at 10% 124%, rgba(112, 8, 24, .88) 0%, rgba(112, 8, 24, .28) 44%, rgba(112, 8, 24, 0) 72%), radial-gradient(48% 112% at 90% -18%, rgba(176, 58, 22, .44) 0%, rgba(176, 58, 22, .12) 46%, rgba(176, 58, 22, 0) 72%), radial-gradient(104% 128% at 70% 112%, rgba(244, 241, 237, .075) 0 47.6%, transparent 48.8%), radial-gradient(82% 100% at 70% 112%, rgba(244, 241, 237, .07) 0 47.6%, transparent 48.8%), radial-gradient(61% 74% at 70% 112%, rgba(232, 138, 85, .08) 0 47.4%, transparent 48.6%), radial-gradient(41% 50% at 70% 112%, rgba(232, 138, 85, .085) 0 47.2%, transparent 48.4%); } .striscia__testo { position: relative; width: 100%; padding: var(--space-8) var(--gutter) var(--space-6); color: var(--on-dark); font-size: var(--text-sm); } .striscia__testo b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--paper); letter-spacing: var(--tracking-display); } .striscia__testo > span { display: block; max-width: 52ch; color: var(--on-dark-muted); margin-top: var(--space-2); } /* ===================== Pannelli di MATERIA (dove la foto non c'è) ===================== */ /* ⚠ Dove il materiale non ha una fotografia, NON si mette una foto finta e non si lascia il bianco: si costruisce una superficie. Sono archi concentrici — la forma dell'edilizia — su un campo di marca, disegnati in CSS: nessun file, nessuna licenza, e non pretendono di essere una fotografia. */ .materia { position: relative; overflow: hidden; border-radius: var(--arco); isolation: isolate; min-height: clamp(16rem, 26vw, 24rem); background: var(--grad-bordeaux); } .materia::before { content: ""; position: absolute; inset: -12% -4% auto -4%; height: 150%; background: radial-gradient(130% 104% at 50% 100%, rgba(244,241,237,.22) 0 38.4%, transparent 39.2%), radial-gradient(104% 84% at 50% 100%, rgba(244,241,237,.19) 0 40.4%, transparent 41.2%), radial-gradient(80% 64% at 50% 100%, rgba(244,241,237,.16) 0 42.4%, transparent 43.2%), radial-gradient(56% 44% at 50% 100%, rgba(244,241,237,.13) 0 46.4%, transparent 47.2%); } .materia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 45%); } .materia__testo { position: relative; z-index: 1; padding: var(--space-8) var(--space-7); display: flex; flex-direction: column; justify-content: flex-end; min-height: inherit; height: 100%; } .materia__testo > p { margin: 0; } .materia__n { font-family: var(--font-display); font-size: clamp(3.4rem, 2rem + 5vw, 6.4rem); font-weight: 700; line-height: .92; letter-spacing: -0.04em; color: var(--paper); } .materia__t { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--on-dark); margin-top: var(--space-3); } /* ⚠ Il grigio caldo secondario NON regge qui: gli archi concentrici schiariscono il campo proprio sotto questa riga e il contrasto scende a 3,49 (misurato sui pixel, non sui token). Su questi pannelli la riga di servizio è chiara: la gerarchia la fanno corpo e peso, non l'opacità. */ .materia__s { color: var(--on-dark); font-size: var(--text-sm); margin-top: var(--space-2); max-width: 34ch; } .materia--notte { background: var(--grad-notte); } .materia--bassa { min-height: clamp(14rem, 22vw, 20rem); } @media (prefers-reduced-motion: no-preference) { .js .materia::before { animation: fp-archi 24s var(--ease) infinite alternate; } } @keyframes fp-archi { from { transform: translateY(2%) scale(1); } to { transform: translateY(-3%) scale(1.06); } } /* ===================== Banda contatti ===================== */ .contact-band { background: var(--grad-bordeaux); color: var(--on-dark); } .contact-band__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; } .contact-band h2 { color: var(--paper); } .contact-band .lead { color: var(--on-dark-muted); max-width: var(--misura-prosa); } .contact-band__tel { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem); letter-spacing: var(--tracking-display); color: var(--paper); text-decoration: none; line-height: 1.05; } .contact-band__tel:hover { color: var(--accent-dark); } .contact-band__hours { color: var(--on-dark-muted); font-size: var(--text-sm); margin-top: var(--space-3); } .contact-band__cta { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); } /* ===================== Testata di pagina ===================== */ /* ⚠ NON riusa la size dell'hero: è una testata, non un hero. Con --text-3xl occuperebbe mezza schermata. */ .page-head { position: relative; isolation: isolate; overflow: hidden; background: var(--grad-testata); color: var(--on-dark); padding-block: var(--space-9) var(--space-8); } /* ⚠ I due bracieri respirano: una deriva lentissima (34s) che non si nota guardandola ma si sente — è la differenza fra una banda dipinta e una banda viva. Non è un ingresso: non c'è un «prima» in cui la testata non c'è, quindi non somiglia mai a un caricamento. Sta su uno strato PROPRIO dietro al contenuto, così il testo non si muove di un pixel. */ .page-head::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none; background: /* ⚠ Provati e TOLTI due fili d'arco che attraversavano la banda: due archi disegnati sopra un testo sono linee che competono con la lettura, non un gioco di colore. Qui la forma la fanno le BRACI, che non hanno bordo. */ radial-gradient(34% 60% at 88% 4%, rgba(232, 138, 85, .16) 0%, rgba(232, 138, 85, 0) 72%), radial-gradient(40% 66% at 4% 100%, rgba(138, 15, 30, .30) 0%, rgba(138, 15, 30, 0) 74%); } /* ⚠ Sul telefono la banda è stretta e la brace di rame arriva SOPRA l'occhiello: misurato sui pixel dipinti, il contrasto scendeva a 4,86 — in AA, ma con un margine dell'8% che non è un margine. Lo strato in più si abbassa, e il colore resta. */ @media (max-width: 860px) { .page-head::before { opacity: .4; } } @media (prefers-reduced-motion: no-preference) { .js .page-head::before { animation: fp-brace 34s var(--ease) infinite alternate; } } @keyframes fp-brace { from { transform: translate3d(-1.5%, 1%, 0) scale(1); } to { transform: translate3d(2.5%, -1.5%, 0) scale(1.08); } } /* Il filo di brace che chiude la banda: un bordo pieno taglierebbe, questo si spegne ai due lati. */ .page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--filo-brace); } .page-head h1 { font-size: var(--text-2xl); color: var(--paper); } .page-head .lead { color: var(--on-dark-muted); margin-top: var(--space-4); max-width: var(--misura-prosa); } .page-head .eyebrow { color: var(--accent-dark); } /* ⚠⚠ LA TESTATA DI PAGINA VA A DUE COLONNE sopra i 1100px — occhiello e titolo a sinistra, sommario a destra sul basamento del titolo. Non è un vezzo: MISURATO, il sommario capato alla misura di lettura (68ch = 729px) dentro un contenitore da 1240 lasciava 467px bianchi alla sua destra, in cima a OGNI pagina. È il difetto «spazi vuoti» segnalato dall'owner, nel punto più visibile del sito. Il sommario in colonna è largo ~490px: sotto la misura di lettura, quindi la regola dei capoversi resta rispettata senza doverla dichiarare due volte. */ @media (min-width: 1100px) { .page-head .container:not(.container--narrow) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: var(--space-8); align-items: end; } .page-head .container:not(.container--narrow) > .eyebrow { grid-column: 1; grid-row: 1; } .page-head .container:not(.container--narrow) > h1 { grid-column: 1; grid-row: 2; margin-top: var(--space-4); } .page-head .container:not(.container--narrow) > .lead { grid-column: 2; grid-row: 2; margin-top: 0; max-width: none; } } /* ===================== Pagina legale ===================== */ /* Il titolo della sezione a sinistra, il testo a destra: una pagina di sola prosa in un contenitore da 1240 lascia mezza riga bianca a ogni capoverso, e incolonnarla stretta al centro sarebbe una pagina diversa dalle altre. Così la colonna sinistra È il titolo e il vuoto sparisce. */ .legale { display: grid; gap: 0; } .legale__riga { display: grid; gap: var(--space-3); padding-block: var(--space-6); border-top: var(--hairline); } .legale__riga:first-child { border-top: 0; padding-top: 0; } .legale__riga h2 { font-size: var(--text-lg); } .legale__testo > * + * { margin-top: var(--space-4); } @media (min-width: 900px) { .legale__riga { grid-template-columns: minmax(200px, .45fr) minmax(0, 1fr); column-gap: var(--space-8); align-items: start; } } /* Indice ad àncore delle pagine reparto: sta sotto la testata e resta appiccicato allo scroll. */ /* L'indice ad àncore si appiccica SOTTO la testata fissa. */ .anchor-nav { background: var(--grad-ancore); border-bottom: var(--hairline); position: sticky; top: var(--header-h); z-index: 20; } .anchor-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-5); padding-block: var(--space-4); } .anchor-nav li { display: inline-block; } .anchor-nav a { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--ink-muted); text-decoration: none; padding-block: var(--space-1); border-bottom: 2px solid transparent; } .anchor-nav a:hover { color: var(--accent-ink); border-bottom-color: var(--accent); } /* ===================== Pagina contatti ===================== */ .contact-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-8); align-items: start; } .contact-form .field { display: block; margin-bottom: var(--space-5); } .contact-form .field label { display: block; font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-muted); margin-bottom: var(--space-2); } .contact-form input, .contact-form textarea, .contact-form select { width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--sage-light); padding: var(--space-3) var(--space-4); border-radius: 0; } .contact-form input:focus-visible, .contact-form textarea:focus-visible { border-color: var(--accent); } .contact-form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); } /* ⚠ `.consent` è un flex: un dentro il testo diventerebbe un flex-item a sé. Il testo, link compreso, sta tutto dentro un solo . */ .contact-form .consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); } .contact-form .consent input { width: auto; margin-top: .3rem; } .contact-info { background: var(--surface); border: var(--hairline); padding: var(--space-6); } .contact-info dt { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ink-muted); } .contact-info dd { margin: 0 0 var(--space-5); color: var(--ink); } .contact-info dd:last-child { margin-bottom: 0; } /* ===================== I temi su cui si può chiedere ===================== */ /* ⚠ Ventiquattro voci che il cliente elenca nel suo documento e che non erano sul sito. Sono la risposta alla domanda «di che cosa posso chiedervi?»: incolonnate sarebbero una lista della spesa, a PASTIGLIE riempiono la riga e si leggono a colpo d'occhio. */ .temi { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); } .temi .tema { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); color: var(--ink); background: var(--paper); border: var(--hairline); border-radius: 999px; padding: var(--space-2) var(--space-5); transition: all var(--dur) var(--ease); } .temi .tema:hover { border-color: var(--accent); color: var(--accent-ink); transform: translateY(-2px); } /* ⚠ RITMO DELLE SUPERFICI: una pagina che alterna solo bianco e bone ha due campiture e si legge piatta — è metà dell'accusa di «vuoto». Qui ogni banda maggiore ha la sua tinta, tutte calde e vicine fra loro: il ritmo si sente, il salto no. Le tinte sono SETTE e si ripetono nello stesso ordine su ogni pagina, così il sito ha una sua metrica invece di sembrare assemblato. */ .temi-sec { border-top: var(--hairline); background-image: linear-gradient(180deg, var(--surface-caldo) 0%, var(--surface-2) 100%); } /* ===================== Gli altri reparti (in coda a ogni pagina) ===================== */ /* Chi finisce di leggere un reparto sta cercando il prossimo: la coda della pagina è il posto dove serve. Card fotografiche, non un elenco di link. */ /* La coda «altri reparti» ha una superficie PROPRIA: chiude la pagina invece di sembrarne la continuazione. */ .altri-sec { background-image: var(--grad-sabbia); border-top: var(--hairline); } .altri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tile-gap); } .altri__card { display: block; text-decoration: none; color: inherit; overflow: hidden; } .altri__card figure { overflow: hidden; border-radius: 6px; margin: 0; } .altri__card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 700ms var(--ease); } .altri__card:hover img { transform: scale(1.06); } .altri__t { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); margin: var(--space-3) 0 0; letter-spacing: var(--tracking-display); } .altri__m { font-size: var(--text-xs); color: var(--accent-ink); margin: var(--space-1) 0 0; } @media (max-width: 980px) { .altri { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .altri { grid-template-columns: minmax(0, 1fr); } } /* ===================== Piè di pagina ===================== */ /* ⚠ NIENTE `.reveal` qui: il piè sta nell'ultimo 8% del documento, che il `rootMargin` negativo dell'osservatore esclude — resterebbe INVISIBILE sul sito vero, e uno screenshot con reduced-motion non lo mostrerebbe. Lo dice il gate `chrome-mobile` della flotta. */ .site-footer { background: var(--grad-notte); color: var(--on-dark); padding-block: var(--space-8) var(--space-6); } .footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-7); } .footer__k { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--on-dark-muted); margin-bottom: var(--space-4); } .site-footer a { color: var(--on-dark); text-decoration: none; } .site-footer a:hover { color: var(--accent-dark); } .site-footer p, .site-footer li { color: var(--on-dark-muted); font-size: var(--text-sm); } /* ⚠ Il numero del piè NON è il numero della banda contatti: lì è la chiamata all'azione e sta a ~3rem, qui è un recapito in una colonna di recapiti. A --text-xl (31px a 1920) gridava sopra le altre tre colonne. Sceso a --text-lg: resta il primo dato che si vede nella sua colonna. */ .footer__tel { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--paper); letter-spacing: var(--tracking-display); } .footer__bottom { margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--hairline-dark); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; } .footer__dgitaly { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--on-dark-muted); } .footer__dgitaly img { height: 20px; width: auto; } /* ===================== Barra CTA mobile ===================== */ .cta-bar { display: none; } @media (max-width: 780px) { .cta-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); position: fixed; inset: auto 0 0 0; z-index: 60; background: var(--brand-dark); border-top: var(--hairline-dark); } .cta-bar a { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--on-dark); text-decoration: none; } .cta-bar a + a { background: var(--accent); color: var(--paper); } body { padding-bottom: 60px; } } /* Banner della pagina Contatti: la foto della sede fra la testata e il modulo — dà un ancoraggio fisico alla pagina che altrimenti sarebbe solo un modulo e un elenco di recapiti. */ .contact-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; } /* Sezione a padding ridotto: serve dove una pagina ha molte bande e il ritmo pieno la farebbe scorrere troppo. */ .section--tight { padding-block: var(--space-6); } /* ===================== Pagine reparto (markup di progetto) ===================== */ /* ⚠ Il telaio cambia con la DISPONIBILITÀ di foto, non col tipo di pagina: `.cat-split` è testo|foto e si usa SOLO dove una foto c'è; dove non c'è si usa `.cat-prose`, che è a larghezza piena e va a capo da sé. Non esiste il caso «due colonne con la destra vuota». */ /* ⚠⚠ La sezione testo|foto NON è una griglia a due colonne: con una griglia il testo resta in una colonna alta e stretta e, dove il testo è più LUNGO della foto, gli ultimi capoversi si ritrovano con la metà destra bianca (misurato: 567px di testo con 629px vuoti a destra). La foto si manda in FLOAT: finché c'è, il testo le sta accanto; quando finisce, il testo riprende TUTTA la larghezza e va a capo da solo. È esattamente il comportamento che la regola chiede. ⚠ La misura di lettura qui NON si mette sul capoverso: accanto alla foto la misura la dà la foto, e sotto la foto il testo deve poter riempire la riga. */ .cat-split { display: block; } .cat-split::after { content: ""; display: block; clear: both; } .cat-split .cat-figure { float: right; width: 46%; margin: 0 0 var(--space-6) var(--space-8); } .cat-split .cat-text p, .cat-split .cat-text li { color: var(--ink-muted); max-width: none; } .cat-split .cat-text > * + * { margin-top: var(--space-5); } .cat-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .cat-figure figcaption { font-size: var(--text-xs); color: var(--ink-muted); padding-top: var(--space-3); } /* Sezione SENZA foto: larghezza piena e due colonne di TESTO, che riempiono la riga invece di lasciarne vuota la metà. Su schermi larghi la lettura resta comoda perché a dividere sono le colonne, non una misura stretta dentro un telaio largo. */ .cat-prose { max-width: none; } .cat-prose p { color: var(--ink-muted); max-width: var(--misura-prosa); } /* ⚠ `columns: 2` su un flusso continuo NON va bene qui: spezza il flusso a metà colonna e stacca un titolo dai suoi capoversi (visto sulla resa: «Tintometro per colori personalizzati» in fondo alla prima colonna e il resto nella seconda). Le sottosezioni si impaginano come BLOCCHI affiancati, così ogni titolo resta col suo testo e la riga è comunque piena. */ /* Testo | pannello di materia: stesso telaio della sezione con foto, così la pagina non cambia ritmo quando la fotografia non c'è. */ .cat-split-materia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: var(--space-8); align-items: stretch; } .cat-split-materia .cat-text p, .cat-split-materia .cat-text li { color: var(--ink-muted); max-width: var(--misura-prosa); } .cat-split-materia .cat-text > * + * { margin-top: var(--space-5); } @media (max-width: 980px) { .cat-split-materia { grid-template-columns: minmax(0, 1fr); } } .cat-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-9); align-items: start; } .cat-group > * + * { margin-top: var(--space-4); } .cat-group p { color: var(--ink-muted); max-width: none; } .cat-group .cat-h2 { font-size: var(--text-xl); } /* Una sottosezione SOLA non si affianca al nulla: invece di lasciarla a metà riga, il titolo prende la prima colonna e il testo la seconda. La riga resta piena e la misura di lettura è quella giusta — riempirla con una riga da 115 caratteri sarebbe peggio del vuoto. ⚠⚠ La griglia ESTERNA va riportata a UNA colonna, o il gruppo unico resta largo metà banda e il telaio interno divide QUELLA metà: misurato, il testo finiva a 259px con 560px bianchi alla sua destra. È il difetto «spazi vuoti» nascosto dentro la regola che doveva evitarlo. */ .cat-groups--one { grid-template-columns: minmax(0, 1fr); } .cat-groups--one .cat-group { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-9); align-items: start; } .cat-groups--one .cat-group > * + * { margin-top: 0; } .cat-groups--one .cat-group .cat-h2 { margin-bottom: 0; } .cat-groups--one .cat-group p + p { margin-top: var(--space-4); } @media (max-width: 980px) { .cat-groups--one .cat-group { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } } @media (max-width: 980px) { .cat-groups { grid-template-columns: minmax(0, 1fr); } } /* Filetto rosso sotto il titolo di reparto: il segno che lega le pagine interne alla home. */ .cat-h2 { position: relative; padding-bottom: var(--space-4); margin-bottom: var(--space-5); } .cat-h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 4rem; height: 3px; background: var(--accent); } /* Elenco delle voci di reparto: griglia a due colonne, mai una colonna sola lunghissima. */ .cat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-6); margin-top: var(--space-5); } .cat-list li { position: relative; padding-left: var(--space-5); color: var(--ink-muted); } .cat-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 2px; background: var(--accent); } /* Galleria del reparto: le foto stanno NELLA pagina, distribuite, non in una banda a fondo pagina. */ .galleria-sec { background: var(--surface-2); } .cat-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap); } .cat-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .cat-gallery--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Striscia marchi del reparto: testo a tutta larghezza, non una lista stretta. */ /* ⚠⚠ I MARCHI DEL REPARTO SONO TARGHETTE CHE OCCUPANO TUTTA LA RIGA. Prima erano una riga sola di nomi separati da punti: 505px di testo in una banda da 1152, con la metà destra bianca — e la banda esiste apposta per dire quali marchi si trovano nel reparto, quindi era anche il posto sbagliato dove lasciare un vuoto. Le targhette CRESCONO per riempire la riga (`flex: 1 1 auto`), quindi la banda è piena sia con tre marchi sia con undici, senza una misura scritta a mano. */ .cat-brands { border-top: var(--hairline); border-bottom: var(--hairline); padding-block: var(--space-6); } .marchi-chip { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; } .marchi-chip li { flex: 1 1 auto; text-align: center; padding: var(--space-4) var(--space-5); border: var(--hairline); background: var(--paper); color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); letter-spacing: var(--tracking-display); } /* La chiamata all'azione delle pagine reparto sta sul BORDO destro della banda: la colonna di destra non porta il numero (quello è della home), e un pulsante lasciato a inizio colonna lascia un terzo di banda vuoto alla sua destra. */ .cta-band__azione { justify-self: end; } @media (max-width: 980px) { /* Sotto i 980px la foto non affianca piu': torna in colonna, sopra il testo. */ .cat-split .cat-figure { float: none; width: 100%; margin: 0 0 var(--space-6) 0; } .cat-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .cat-list { grid-template-columns: minmax(0, 1fr); } .cat-gallery, .cat-gallery--two { grid-template-columns: minmax(0, 1fr); } } /* ===================== Forme: raccordi curvi e archi ===================== */ /* Il raccordo fra una banda e la successiva è una CURVA, non un taglio netto: è ciò che separa una pagina del 2026 da una impilata a mattoni. La banda si solleva sulla precedente e le mangia il bordo, così la transizione non è mai una riga dritta su tutta la larghezza. */ .band--curva { border-radius: var(--curva-banda) var(--curva-banda) 0 0; margin-top: calc(-1 * var(--curva-banda)); position: relative; z-index: 1; } .band--curva-giu { border-radius: 0 0 var(--curva-banda) var(--curva-banda); } .band--curva-doppia { border-radius: var(--curva-banda); margin-top: calc(-1 * var(--curva-banda)); position: relative; z-index: 1; } /* La TRAMA TECNICA sulle bande chiare: la quadrettatura di un esecutivo. Si vede appena, e toglie alle campiture piatte quell'aria di foglio bianco che l'owner chiama «vuoto». */ /* ⚠ La trama tecnica è stata TOLTA: a schermo si leggeva come una griglia di quadratini, non come la quadrettatura appena percepibile di un esecutivo. Una texture che si NOTA è rumore. Le bande restano distinte per tinta, che è il mezzo giusto. */ .section.alt, .marchi-sec { background-image: var(--grad-bone); } /* L'ARCO in testa alle fotografie: la forma dell'edilizia. Sta sulle foto di REPARTO, non sull'hero (che è a tutta pagina) né sulle gallerie (dove le tessere devono leggersi come una griglia). */ /* ⚠⚠ L'ARCO NON TAGLIA PIÙ LE FOTOGRAFIE. Sulla resa quel taglio a cupola si legge come «il segno della tondeggiatura»: sopra un'immagine rettangolare lascia due spicchi di fondo negli angoli alti e la foto sembra ritagliata male invece che disegnata. L'arco resta dove è DISEGNATO — i pannelli di materia e la striscia, che nascono con quella forma — e le fotografie tornano rettangoli con un raccordo minimo, lo stesso delle tessere del mosaico. */ .cat-figure img, .azienda__figure img { border-radius: 6px; } .reparto-row__media img { border-radius: 6px; } .noleggio__media img { border-radius: 6px; } @media (max-width: 860px) { } /* Le tessere di galleria restano a spigolo vivo ma con un raccordo minimo: una griglia tutta curva diventa molle. */ .cat-gallery img { border-radius: 6px; } /* ===================== Ritmo delle bande ===================== */ /* ⚠ Ogni banda maggiore ha la SUA tinta, e le tinte si ripetono nello stesso ordine su ogni pagina: è ciò che dà al sito una metrica invece dell'aria di pagine assemblate. Sono tutte calde e vicine — il ritmo si sente, il salto no. Il contrasto del testo su ognuna resta sopra AA (ink 14,8-17,9). */ .section--velo { background: linear-gradient(180deg, var(--surface-caldo) 0%, var(--paper) 100%); } .section--sabbia { background: var(--surface-2); } .section--bone2 { background: linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%); } /* Il filetto d'apertura di una banda: un segno sottile che dice «qui comincia un'altra cosa». Costa nulla e fa sembrare la pagina composta invece che impilata. */ .section--filo { position: relative; } .section--filo::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(var(--container), 100% - 2 * var(--gutter)); height: 1px; background: var(--line); } /* ⭐ Il titolo di sezione porta un contrassegno: due barre in accento, come le tacche di una stadia. È il dettaglio che distingue una gerarchia disegnata da una gerarchia solo dimensionata. */ .section-intro h2 { position: relative; padding-top: var(--space-5); } .section-intro h2::before { content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 3px; background: var(--accent); box-shadow: 3.25rem 0 0 var(--accent-ink); } .band--dark .section-intro h2::before, .contact-band h2::before { background: var(--accent-dark); box-shadow: 3.25rem 0 0 rgba(244,241,237,.5); } .contact-band h2 { position: relative; padding-top: var(--space-5); } .contact-band h2::before { content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 3px; } /* ===================== Micro-animazioni ===================== */ /* Fail-visible: senza JS (niente classe .js sull'html) tutto resta visibile. Il moto lo governa `reveal.js`, che è già nel tema: qui si dichiara SOLO come si entra, non quando. ⚠ Niente `