/* ========================================================================== main.css — componenti di pagina, fgasparini.it ("Struttura" v4). Porta di produzione di 02_design/common.css: stessa resa visiva, selettori riscritti in modo che la dimensione tipografica non dipenda dal tag dell'heading (vedi base.css .text-style-*) — necessario per rispettare l'outline H1→H2→H3 senza salti su ogni pagina (QUALITY_BAR §10). Zero valori hardcoded fuori da var(--token). ========================================================================== */ /* ============================================================ UTILITY BAR — banda ink sottile sopra l'header ============================================================ */ .utility-bar { background: var(--color-ink); } .utility-inner { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-2); font-size: var(--size-xs); } .utility-bar a { color: var(--color-accent-2); text-decoration: none; font-weight: var(--font-weight-regular); } .utility-bar a:hover, .utility-bar a:focus-visible { color: var(--color-ink-contrast); text-decoration: underline; } .utility-sep { color: var(--color-accent-2); opacity: 0.5; } /* ============================================================ HEADER — bianco, sticky, sotto la barra utility ============================================================ */ header.site { background: var(--color-bg); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: var(--z-nav); } header.site.is-scrolled { box-shadow: var(--shadow-sm); } .header-inner { max-width: var(--container-max); margin-inline: auto; padding-block: var(--space-4); padding-inline: var(--container-gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .brand { font-family: var(--font-display); font-weight: var(--font-weight-extrabold); font-size: var(--size-lg); color: var(--color-ink); text-decoration: none; line-height: 1.15; } .brand .role { display: block; font-family: var(--font-text); font-weight: var(--font-weight-regular); font-size: var(--size-xs); letter-spacing: var(--font-tracking-wide); text-transform: uppercase; color: var(--color-muted); margin-top: var(--space-2); } .brand:focus-visible { outline-offset: 6px; } nav.primary { display: flex; align-items: center; gap: var(--space-5); list-style: none; } nav.primary a { position: relative; display: inline-block; text-decoration: none; font-size: var(--size-sm); font-weight: var(--font-weight-regular); color: var(--color-ink); padding-block: var(--space-2); } nav.primary a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--color-accent); transition: right var(--dur-fast) var(--ease-out); } nav.primary a:hover::after, nav.primary a:focus-visible::after { right: 0; } nav.primary a[aria-current="page"] { color: var(--color-accent); font-weight: var(--font-weight-semibold); } nav.primary a[aria-current="page"]::after { right: 0; } .nav-toggle { display: none; } /* Scroll lock quando il drawer mobile è aperto (JS aggiunge l'attributo su ) — niente backdrop-filter (vincolo motion_spec §H/§3: header è sticky, drawer è fixed, un blur su un antenato romperebbe il posizionamento fisso), solo overflow:hidden. */ html[data-drawer-open="true"] { overflow: hidden; } html[data-drawer-open="true"] body { overflow: hidden; } @media (max-width: 860px) { /* R5 (rework GATE 4 — MAJOR aperto #7 di qa_tecnica_v1.md): fallback CSS-only quando JS è assente o non ancora eseguito. Le 4 voci restano in flusso normale sotto il wordmark, sempre visibili — niente hamburger (inutile senza un modo di attivarlo: nessun
/, nessun checkbox-hack, solo il gate più semplice possibile). Il drawer animato si attiva SOLO sotto html.js, stesso gate già usato per .reveal (js-detect.js, sincrono in head: la classe è già presente al primo paint, nessun flash). */ .header-inner { flex-wrap: wrap; } .nav-toggle { display: none; } nav.primary { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); } nav.primary a { color: var(--color-ink); font-size: var(--size-base); padding-block: var(--space-4); } html.js nav.primary { flex-basis: auto; margin-top: 0; border-top: none; position: fixed; /* R2 (rework GATE 4): pieno schermo, non più il 70% (inset:0 0 0 30%) — quel 30% restante era scoperto senza velo, il difetto #1 del top-5 di qa_report_v1.md. Nessuno scrim: a schermo intero non c'è più uno "sfondo" visibile da velare. */ inset: 0; background: var(--color-ink); align-items: flex-start; padding: calc(var(--space-9) + var(--space-4)) var(--space-7) var(--space-6); gap: var(--space-6); box-shadow: var(--shadow-lg); transform: translateX(100%); /* visibility:hidden toglie davvero il drawer dal flusso scrollabile a riposo (altrimenti scrollWidth conta il box fuori schermo); il transition-delay sfasa la visibilità dall'animazione. inert (gestito in JS) lo toglie anche da tab order/AT quando chiuso. */ visibility: hidden; transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } html.js nav.primary[data-open="true"] { transform: translateX(0); visibility: visible; transition: transform var(--dur-base) var(--ease-out), visibility 0s linear 0s; } /* display:none (temporizzato in JS) è la rete di sicurezza definitiva contro larghezze fantasma nello screenshot full-page: applicata solo a chiusura conclusa, mai a scomparsa istantanea. */ html.js nav.primary.is-hidden { display: none; } /* Voci grandi (R2): a schermo intero size-lg (18-20px) sembrava minuto, size-h3 (22-28px fluido) dà peso proporzionato allo spazio disponibile. */ html.js nav.primary a { color: var(--color-ink-contrast); font-size: var(--size-h3); padding-block: var(--space-3); } html.js nav.primary a::after { background: var(--color-accent-2); } html.js nav.primary a[aria-current="page"] { color: var(--color-accent-2); } html.js .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: none; border: 1px solid var(--color-border); cursor: pointer; z-index: var(--z-overlay); } html.js .nav-toggle span { width: 20px; height: 2px; background: var(--color-ink); transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } html.js .nav-toggle[aria-expanded="true"] { border-color: var(--color-accent-2); } html.js .nav-toggle[aria-expanded="true"] span { background: var(--color-ink-contrast); } html.js .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } html.js .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } html.js .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ============================================================ BOTTONI ============================================================ */ .btn { --btn-bg: var(--color-ink); --btn-fg: var(--color-ink-contrast); --btn-bg-hover: var(--color-accent); --btn-fg-hover: var(--color-ink-contrast); display: inline-flex; align-items: center; gap: var(--space-3); background: var(--btn-bg); color: var(--btn-fg); text-decoration: none; font-family: var(--font-text); font-weight: var(--font-weight-semibold); font-size: var(--size-sm); line-height: 1; padding: var(--space-4) var(--space-5); min-height: 44px; border: 1px solid var(--btn-bg); border-radius: var(--radius-none); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .btn-arrow { width: 0.55em; height: 0.65em; flex: none; } .btn:hover, .btn:focus-visible { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-fg-hover); } .btn:active { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-fg-hover); transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; background: var(--color-border); border-color: var(--color-border); color: var(--color-muted); } .btn:disabled:hover { background: var(--color-border); color: var(--color-muted); } .band--ink .btn { --btn-bg: var(--color-accent-2); --btn-fg: var(--color-ink); --btn-bg-hover: var(--color-bg); --btn-fg-hover: var(--color-ink); } .btn--outline { --btn-bg: transparent; --btn-fg: var(--color-ink); --btn-bg-hover: var(--color-ink); --btn-fg-hover: var(--color-ink-contrast); border-color: var(--color-ink); } .band--ink .btn--outline { --btn-bg: transparent; --btn-fg: var(--color-ink-contrast); --btn-bg-hover: var(--color-accent-2); --btn-fg-hover: var(--color-ink); border-color: var(--color-accent-2); } .btn--full { width: 100%; justify-content: center; } .text-link { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-accent); text-decoration: none; font-weight: var(--font-weight-semibold); padding-bottom: 2px; background: none; border: none; font-size: var(--size-base); cursor: pointer; } .text-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right var(--dur-fast) var(--ease-out); } .text-link:hover::after, .text-link:focus-visible::after { right: 0; } .text-link:visited { color: var(--color-accent); opacity: 0.85; } .band--ink .text-link { color: var(--color-accent-2); } .text-link .btn-arrow { width: 0.5em; height: 0.6em; } /* ============================================================ LEDGER — striscia numeri verificati ============================================================ */ .ledger { display: grid; grid-template-columns: 1fr 1fr; } .ledger-entry { padding-inline: var(--container-gutter); border-left: 1px solid var(--color-accent); } .ledger-entry:first-child { border-left: none; padding-left: 0; } .ledger-entry .stat-figure { color: var(--color-accent); margin-bottom: var(--space-3); } .ledger-entry .stat-label { font-family: var(--font-text); font-weight: var(--font-weight-semibold); font-size: var(--size-base); margin-bottom: var(--space-2); } .ledger-entry .stat-note { font-size: var(--size-sm); color: var(--color-muted); max-width: var(--measure-sm); } @media (max-width: 640px) { .ledger { grid-template-columns: 1fr; gap: var(--space-7); } .ledger-entry { border-left: none; padding-left: 0; border-top: 1px solid var(--color-accent); padding-top: var(--space-6); } .ledger-entry:first-child { border-top: none; padding-top: 0; } } /* ============================================================ ART-FRAME — cornice immagine, fondo di fallback in acciaio pieno finché l'asset reale non esiste (nessun placeholder grigio: il fallback È il design, non un errore — vedi ANTI_PATTERNS #37). ============================================================ */ .art-frame { position: relative; background: var(--color-accent); overflow: hidden; } .art-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 860px) { .art-frame--hero { aspect-ratio: 4 / 3; } } /* ============================================================ HERO SPLIT — Home/Esperienza: testo ~7/12, immagine ~5/12 full-bleed ============================================================ */ .hero-split { display: grid; grid-template-columns: 7fr 5fr; align-items: stretch; background: var(--color-bg); color: var(--color-text); } .hero-split .hero-copy { /* La colonna testo non è dentro .container: il suo inset sinistro replica a mano lo stesso calcolo di margin-inline:auto+padding-inline, così l'asse sinistro combacia sempre con wordmark/striscia/titoli. */ padding-inline-start: calc(max(0px, (100vw - var(--container-max)) / 2) + var(--container-gutter)); padding-inline-end: var(--space-7); padding-block: var(--space-7) var(--space-6); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; justify-self: stretch; } .hero-split h1 { margin-bottom: var(--space-5); } .hero-split .lede { margin-bottom: var(--space-6); } @media (max-width: 860px) { .hero-split { grid-template-columns: 1fr; } .hero-split .hero-copy { padding-inline: var(--container-gutter); padding-block: var(--space-6) var(--space-5); max-width: none; } .hero-split .btn { width: 100%; } } /* ============================================================ INTRO BLOCK — testata editoriale di pagina (Servizi hub, Insights, Contatti): titolo a piena larghezza, lede spinta a destra come nota a margine. ============================================================ */ .intro-block { padding-block: var(--space-8) var(--space-7); border-bottom: 1px solid var(--color-border); } .intro-block h1 { max-width: 26ch; } .intro-block .lede { margin-top: var(--space-6); margin-left: auto; margin-right: 0; max-width: 34ch; } /* ============================================================ STRISCIA 3 COLONNE — fondo pieno d'accento, filetti verticali ============================================================ */ .strip-cols { background: var(--color-accent); color: var(--color-accent-contrast); } .strip-cols .container { display: grid; grid-template-columns: repeat(3, 1fr); } .strip-col { padding: var(--space-7) var(--space-6); border-left: 1px solid var(--color-accent-2); } .strip-col:first-child { border-left: none; padding-left: 0; } .strip-col:last-child { padding-right: 0; } .strip-col .eyebrow { color: var(--color-accent-2); } .strip-col__title { font-size: var(--size-lg); line-height: var(--font-leading-snug); margin-bottom: var(--space-3); color: var(--color-accent-contrast); } .strip-col p { color: var(--color-accent-2); margin-bottom: var(--space-4); font-size: var(--size-sm); max-width: 28ch; } .strip-col .text-link { color: var(--color-accent-contrast); } /* Il ring di :focus-visible globale (base.css, --color-focus) scende sotto 3:1 sul fondo pieno accento di questa sezione (QA v1: 2.01:1 misurato) — qui basta ridefinire il colore dell'outline, stesso pattern già usato dal skip-link (.skip-link:focus-visible) per lo stesso motivo. */ .strip-cols :focus-visible { outline-color: var(--color-accent-2); } @media (max-width: 860px) { .strip-cols { padding-block: var(--space-6); } .strip-cols .container { grid-template-columns: 1fr; gap: 0; } .strip-col { border-left: none; padding-left: 0; border-top: 1px solid var(--color-accent-2); padding-top: var(--space-6); padding-bottom: var(--space-6); } .strip-col:first-child { border-top: none; padding-top: 0; } .strip-col:last-child { padding-bottom: 0; } } /* ============================================================ SERVIZIO — riga asimmetrica numerata (hub /servizi/), non 5 card identiche. .service-row--feature dà gerarchia motivata alla prima voce (Sourcing, ingresso del ciclo operazione). Titolo su .service-row__title (classe), non sul tag: qui il tag è

(outline senza salti, QUALITY_BAR §10 / ANTI_PATTERNS), la resa visiva resta quella del vecchio h3/h2 del prototipo. ============================================================ */ .service-row { display: grid; grid-template-columns: 5rem 1fr 1fr; gap: var(--space-6); padding-block: var(--space-7); border-top: 1px solid var(--color-border); } .service-row:last-child { border-bottom: 1px solid var(--color-border); } .service-row .num { font-family: var(--font-display); font-weight: var(--font-weight-extrabold); font-size: var(--size-h3); color: var(--color-accent); line-height: 1; } .service-row__title { font-size: var(--size-h3); margin-bottom: var(--space-3); } .service-row .desc { color: var(--color-muted); max-width: var(--measure-md); margin-bottom: var(--space-3); } .service-row .perchi { font-size: var(--size-sm); color: var(--color-muted); } .service-row ul { list-style: none; color: var(--color-muted); font-size: var(--size-sm); } .service-row ul li { padding-left: var(--space-4); position: relative; margin-bottom: var(--space-2); } .service-row ul li::before { content: "—"; position: absolute; left: 0; color: var(--color-accent); } .service-row--feature { grid-template-columns: 1fr; background: var(--color-surface); padding: var(--space-7); border-top: none; margin-bottom: var(--space-2); } .service-row--feature .num { font-size: var(--size-display); margin-bottom: var(--space-3); } .service-row--feature .service-row__title { font-size: var(--size-h2); margin-bottom: var(--space-4); } .service-row--feature .feature-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: start; } @media (max-width: 860px) { .service-row { grid-template-columns: 1fr; gap: var(--space-3); } .service-row .num { font-size: var(--size-h2); } .service-row--feature { padding: var(--space-6) var(--space-5); } .service-row--feature .feature-body { grid-template-columns: 1fr; gap: var(--space-4); } } /* ============================================================ SERVICE CARDS — Home: fascia surface + card bianche in griglia 2 colonne, gap 1px a effetto filetto. La 6ª card scura di chiusura rompe la ripetizione delle 5 bianche. Titolo su .service-card__title (h3, correttamente annidato sotto l'h2 "Ambiti di intervento": nessun salto). ============================================================ */ .service-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-border); } .service-card { background: var(--color-bg); padding: var(--space-6); display: flex; flex-direction: column; align-items: flex-start; } .service-card .eyebrow { margin-bottom: var(--space-3); } .service-card__title { font-size: var(--size-lg); line-height: var(--font-leading-snug); margin-bottom: var(--space-2); } .service-card .subtitle { font-family: var(--font-text); font-weight: var(--font-weight-semibold); color: var(--color-muted); margin: 0 0 var(--space-5); } .service-card .desc { color: var(--color-muted); margin-bottom: var(--space-5); } .service-card .btn { margin-top: auto; } .service-card--close { background: var(--color-ink); color: var(--color-ink-contrast); } .service-card--close p { color: var(--color-accent-2); margin-bottom: var(--space-5); } .service-card--close .btn { --btn-bg: var(--color-accent-2); --btn-fg: var(--color-ink); --btn-bg-hover: var(--color-bg); --btn-fg-hover: var(--color-ink); border-color: var(--color-accent-2); } @media (max-width: 640px) { .service-cards { grid-template-columns: 1fr; } } /* ============================================================ TESTATA SERVIZIO — sottopagina: tipografica su fascia surface (R1, rework GATE 4 — niente più banda immagine, decisione cliente). Padding verticale più generoso dei valori precedenti (spaziava rispetto all'immagine sotto, ora assente): stesso asse sinistro del container, nessun trattamento speciale su h1/lede. ============================================================ */ .service-head { padding-block: var(--space-9) var(--space-8); } .service-head h1 { max-width: 28ch; margin-bottom: var(--space-5); } .service-head .lede { max-width: var(--measure-lg); } .crumb { font-size: var(--size-xs); } .crumb a { color: inherit; text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding-block: var(--space-3); min-height: 44px; } /* Titolo di sezione standard (H2), riusato identico ovunque servano un eyebrow + titolo di sezione senza trattamento speciale. */ .section-title { font-size: var(--size-h2); line-height: var(--font-leading-tight); margin-bottom: var(--space-5); } .section-title:last-child { margin-bottom: 0; } /* Spaziatura verticale generica (multipli della scala space-*), usata al posto di style="margin-top/bottom" inline — mai un valore hardcoded. */ .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-7 { margin-top: var(--space-7); } .mb-7 { margin-bottom: var(--space-7); } .pt-0 { padding-top: 0; } /* ============================================================ CHECKLIST — "Cosa include" / "Cosa si ottiene", 3 colonne a desktop ============================================================ */ .checklist { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 var(--space-6); margin-top: var(--space-6); } .checklist li { padding: var(--space-4) 0 var(--space-4) var(--space-5); position: relative; color: var(--color-muted); border-top: 1px solid var(--color-border); } .checklist li::before { content: "—"; position: absolute; left: 0; top: var(--space-4); color: var(--color-accent); } .checklist li:nth-child(1), .checklist li:nth-child(2), .checklist li:nth-child(3) { border-top: none; padding-top: 0; } @media (max-width: 860px) { .checklist { grid-template-columns: 1fr 1fr; } .checklist li:nth-child(3) { border-top: 1px solid var(--color-border); padding-top: var(--space-4); } } @media (max-width: 640px) { .checklist { grid-template-columns: 1fr; } .checklist li { border-top: 1px solid var(--color-border); padding-top: var(--space-4); } .checklist li:first-child { border-top: none; padding-top: 0; } } /* ============================================================ STEP LIST — Esperienza "Metodo di lavoro": sequenza numerata 01-04, 4 colonne a desktop con filetti verticali sottili (stesso linguaggio di .ledger-entry/.strip-col), numerale piccolo nello stile del numero delle card servizio (.eyebrow — mai un cerchio numerato). Componente nuovo (R3, rework GATE 4). ============================================================ */ .step-list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 var(--space-6); margin-top: var(--space-6); } .step-list li { padding-left: var(--space-5); border-left: 1px solid var(--color-border); } .step-list li:first-child { border-left: none; padding-left: 0; } .step-list .eyebrow { margin-bottom: var(--space-3); } .step-list p { color: var(--color-muted); font-size: var(--size-sm); margin: 0; } @media (max-width: 860px) { .step-list { grid-template-columns: 1fr 1fr; } .step-list li { border-left: none; padding-left: 0; } .step-list li:nth-child(even) { border-left: 1px solid var(--color-border); padding-left: var(--space-5); } .step-list li:nth-child(3), .step-list li:nth-child(4) { border-top: 1px solid var(--color-border); padding-top: var(--space-4); } } @media (max-width: 640px) { .step-list { grid-template-columns: 1fr; } .step-list li { border-left: none; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: var(--space-4); padding-bottom: var(--space-4); } .step-list li:first-child { border-top: none; padding-top: 0; } } /* ============================================================ PULL PANEL — "Per chi è": callout a piena larghezza, bordo accento ============================================================ */ .pull-panel { border-left: 3px solid var(--color-accent); background: var(--color-surface); padding: var(--space-6) var(--space-7); max-width: var(--container-narrow); margin-top: var(--space-6); } .pull-panel p { font-size: var(--size-lg); color: var(--color-text); } .band--surface .pull-panel { background: var(--color-bg); } /* ============================================================ LABEL BLOCK — etichetta a colonna stretta + contenuto ============================================================ */ .label-block { display: grid; grid-template-columns: minmax(11rem, 0.65fr) 1fr; gap: var(--space-7); align-items: center; } .label-block .label-head { padding-top: var(--space-1); } .label-block .body p { color: var(--color-muted); max-width: var(--measure-lg); margin-bottom: var(--space-3); } @media (max-width: 640px) { .label-block { grid-template-columns: 1fr; gap: var(--space-4); } } /* Variante a piena larghezza (senza colonna-etichetta): usata su Esperienza per differenziare la composizione rispetto al label-block riusato altrove (percorso, metodo, tipologie, sede: testo editoriale in colonna di lettura, senza card/etichetta laterale). */ .editorial-block { max-width: var(--container-narrow); } .editorial-block .body p { color: var(--color-muted); margin-bottom: var(--space-4); } .editorial-block .body p:first-child { color: var(--color-text); font-size: var(--size-lg); } /* ============================================================ NOTICE PANEL — Insights "in preparazione": pannello di stato ============================================================ */ .notice-panel { border: 1px solid var(--color-border); padding: var(--space-7); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-6); } .notice-panel .notice-text { max-width: var(--measure-lg); } .notice-panel .notice-text p { color: var(--color-muted); } .notice-panel .status { display: inline-block; font-family: var(--font-text); font-weight: var(--font-weight-semibold); font-size: var(--size-xs); letter-spacing: var(--font-tracking-wide); text-transform: uppercase; color: var(--color-muted); border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3); flex: none; } /* ============================================================ TEMI LIST — Insights: elenco dei temi in preparazione (nuovo componente, dichiarato nel report). Non sono heading di sezione (il contenuto non è ancora pubblicato): titolo in , non , per restare fuori dall'outline dei titoli della pagina. ============================================================ */ .temi-list { list-style: none; counter-reset: temi; margin-top: var(--space-7); } .temi-item { counter-increment: temi; display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-5); padding-block: var(--space-6); border-top: 1px solid var(--color-border); } .temi-item:first-child { border-top: none; padding-top: 0; } .temi-item::before { content: counter(temi, decimal-leading-zero); font-family: var(--font-display); font-weight: var(--font-weight-extrabold); font-size: var(--size-h3); color: var(--color-accent); line-height: 1; } .temi-tag { display: block; font-size: var(--size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--font-tracking-wide); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2); } .temi-title { font-family: var(--font-display); font-weight: var(--font-weight-extrabold); font-size: var(--size-lg); margin-bottom: var(--space-2); } .temi-desc { color: var(--color-muted); max-width: var(--measure-lg); margin: 0; } @media (max-width: 640px) { .temi-item { grid-template-columns: 1fr; gap: var(--space-2); } } /* ============================================================ CONTACT BLOCK — blocco scuro pieno (CTA forte) + card bianca col form. ============================================================ */ .contact-block { background: var(--color-ink); color: var(--color-ink-contrast); } /* .eyebrow di default è pensato per fondo chiaro (--color-accent, 9.22:1 su bianco): su questo fondo ink scende a 1.98:1 (axe color-contrast serious, QA v1) perché .contact-block non è .band--ink e non eredita il suo override — stesso fix già applicato lì e su .strip-col. */ .contact-block .eyebrow { color: var(--color-accent-2); } .contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-8); align-items: start; min-width: 0; } .contact-grid > * { min-width: 0; } .contact-block .support { color: var(--color-accent-2); max-width: var(--measure-md); } .contact-block .alt-contact { margin-top: var(--space-6); font-size: var(--size-sm); color: var(--color-accent-2); } .contact-block .alt-contact a { color: var(--color-ink-contrast); font-weight: var(--font-weight-semibold); } .contact-card { background: var(--color-bg); color: var(--color-text); padding: var(--space-7); } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } .contact-card { padding: var(--space-6) var(--space-5); } } /* Recapiti / sede — testo semplice riusato su Contatti e in coda a Esperienza (label + valore, niente card). */ .info-block + .info-block { margin-top: var(--space-7); } .info-block address, .info-block p { font-style: normal; color: var(--color-muted); } .info-block a { color: inherit; font-weight: var(--font-weight-semibold); text-decoration: none; } .info-block a:hover, .info-block a:focus-visible { text-decoration: underline; } /* ============================================================ FORM — contatto (dentro .contact-card, sempre su bianco) ============================================================ */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); min-width: 0; } .field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } .field--full { grid-column: 1 / -1; } .field input, .field select, .field textarea { min-width: 0; } .field label { font-size: var(--size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--font-tracking-wide); text-transform: uppercase; color: var(--color-muted); } .field input, .field select, .field textarea { font: inherit; font-size: var(--size-base); color: var(--color-text); background: var(--color-bg); border: none; border-bottom: 1px solid var(--color-muted); border-radius: var(--radius-none); padding: var(--space-3) var(--space-1); min-height: 44px; } /* Nessuna freccia disegnata (background-image:none): il padding-right maggiorato che la "prenotava" restava comunque riservato e senza uso, riducendo lo spazio utile al testo proprio sul campo con le opzioni più lunghe ("Progettazione e direzione lavori") — a 360/390px il margine residuo era minimo. Stesso padding orizzontale degli altri campi (var(--space-1)) per il massimo spazio disponibile al testo. */ .field select { appearance: none; -webkit-appearance: none; background-image: none; } .field textarea { min-height: 8rem; resize: vertical; } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--color-focus); box-shadow: 0 1px 0 0 var(--color-focus); } /* opacity 0.9 (non 1, per restare visivamente un placeholder) — a 0.65 il colore effettivo scendeva a 2.91:1 su bianco, sotto AA anche per testo grande (QA v1); a 0.9 resta sopra 4.5:1. */ .field input::placeholder, .field textarea::placeholder { color: var(--color-muted); opacity: 0.9; } .field-hint { font-size: var(--size-xs); color: var(--color-muted); } .field--error input, .field--error select, .field--error textarea { border-bottom-color: var(--color-error); } .field--error .field-hint { color: var(--color-error); } .field--success input { border-bottom-color: var(--color-success); } .field--success .field-hint { color: var(--color-success); } .form-note { font-size: var(--size-xs); color: var(--color-muted); margin-top: var(--space-5); } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } /* Consenso privacy (checkbox) */ .field-consent { display: flex; align-items: flex-start; gap: var(--space-3); } .field-consent input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--color-accent); min-height: 0; } .field-consent label { font-size: var(--size-sm); color: var(--color-muted); text-transform: none; letter-spacing: normal; font-weight: var(--font-weight-regular); } .field-consent label a { color: var(--color-accent); font-weight: var(--font-weight-semibold); } .field--error .field-consent label { color: var(--color-error); } /* Honeypot anti-spam: nascosto visivamente e per screen reader tramite posizionamento fuori schermo (non display:none, che alcuni antispam bot ignorano) — resta comunque fuori tab order con tabindex="-1". */ .field-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Stato di invio: bottone disabilitato + messaggio live */ .form-status { margin-top: var(--space-4); font-size: var(--size-sm); } .form-status[hidden] { display: none; } .form-status--error { color: var(--color-error); } .form-status--success { color: var(--color-success); } .form-status a { color: inherit; font-weight: var(--font-weight-semibold); } /* ============================================================ FOOTER — banda ink di chiusura ============================================================ */ footer.site { background: var(--color-ink); color: var(--color-accent-2); } .footer-inner { max-width: var(--container-max); margin-inline: auto; padding-block: var(--space-8) var(--space-6); padding-inline: var(--container-gutter); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-7); font-size: var(--size-sm); } /* .footer-label sostituisce un

(era un salto H2→H4 nell'outline: QUALITY_BAR §10 / ANTI_PATTERNS — le 2 etichette di colonna del footer non sono heading di sezione, sono label): stesso stile visivo di prima su un

, che eredita margin: 0 0 var(--space-4) dalla regola "p" generica di base.css, quindi non serve ripeterlo qui. */ .footer-inner .footer-label { font-family: var(--font-text); font-size: var(--size-xs); font-weight: var(--font-weight-semibold); line-height: var(--font-leading-tight); letter-spacing: var(--font-tracking-wide); text-transform: uppercase; color: var(--color-accent-2); } .footer-inner .brand { font-size: var(--size-base); margin-bottom: var(--space-3); color: var(--color-ink-contrast); } .footer-tagline { max-width: 26ch; margin-top: var(--space-4); } .footer-inner .brand .role { color: var(--color-accent-2); } .footer-inner a { color: var(--color-accent-2); text-decoration: none; } .footer-inner a:hover, .footer-inner a:focus-visible { color: var(--color-ink-contrast); } .footer-nav, .footer-contact { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); } .footer-bottom { max-width: var(--container-max); margin-inline: auto; padding: var(--space-5) var(--container-gutter); border-top: 1px solid var(--color-line-ink); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; font-size: var(--size-xs); color: var(--color-accent-2); } .footer-bottom a { color: var(--color-accent-2); text-decoration: none; } .footer-bottom a:hover, .footer-bottom a:focus-visible { color: var(--color-ink-contrast); } @media (max-width: 860px) { .footer-inner { grid-template-columns: 1fr; gap: var(--space-6); } } /* ============================================================ 404 / pagine leggere — blocco singolo, allineato a sinistra (mai centrato: QUALITY_BAR §3) ============================================================ */ .simple-hero { padding-block: var(--space-10) var(--space-9); } .simple-hero h1 { max-width: 22ch; margin-bottom: var(--space-5); } .simple-hero p { max-width: var(--measure-lg); color: var(--color-muted); margin-bottom: var(--space-6); } .simple-hero .actions { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; } /* ============================================================ PRIVACY — colonna di lettura, ≤65ch (QUALITY_BAR §2) ============================================================ */ .legal-copy { max-width: 65ch; } .legal-copy h2 { font-size: var(--size-h3); margin-top: var(--space-8); margin-bottom: var(--space-4); } .legal-copy h2:first-child { margin-top: 0; } .legal-copy p { color: var(--color-muted); margin-bottom: var(--space-4); } .legal-copy p:last-child { margin-bottom: 0; } .legal-copy a { color: var(--color-accent); font-weight: var(--font-weight-semibold); }