/* ========================================================================== VIDIM — Reset, font e primitive tipografiche ========================================================================== */ /* --- Inter ----------------------------------------------------------------- Servono solo 400 e 700 (nessun 500/600, mai italic). Tre sorgenti per ciascun peso, provate in ordine: il tema WordPress (assets/fonts/), il pacchetto statico autonomo, e la cartella di lavoro locale. Il browser usa la prima che trova, quindi lo stesso CSS funziona in tutti e tre i contesti senza essere modificato. --------------------------------------------------------------------------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Inter-Regular.woff2") format("woff2"), url("../assets/font/Inter-Regular.woff2") format("woff2"), url("../../assets/font/Inter-Regular.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Inter-Bold.woff2") format("woff2"), url("../assets/font/Inter-Bold.woff2") format("woff2"), url("../../assets/font/Inter-Bold.woff2") format("woff2"); } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; width: 100%; min-width: var(--page-width); background: var(--color-white); color: var(--text-on-light); font-family: var(--font-sans); font-weight: 400; font-style: normal; letter-spacing: 0; /* nessun layer della Home dichiara tracking */ text-transform: none; /* i maiuscoli sono digitati nel contenuto */ font-size: var(--type-body-size); line-height: var(--type-body-lh); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; } ul, ol { list-style: none; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; } /* --- Sezioni a tutta finestra --------------------------------------------- Il design Figma e a larghezza fissa 1512px. Su una finestra piu larga una sezione da 1512 lascerebbe una fascia vuota a destra. Qui ogni blocco di primo livello si estende a tutta la finestra e ricentra il proprio contenuto da 1432 aumentando il padding orizzontale: a 1512px -> (1512 - 1432) / 2 = 40px = esattamente il gutter di Figma a 1800px -> (1800 - 1432) / 2 = 184px = contenuto centrato, sfondi a filo Cosi la resa a 1512 resta identica al mockup, al pixel, e sopra i 1512 non compare nessuna banda. Sotto i 1512 il min-width produce scroll orizzontale: il comportamento mobile e una fase separata, non ancora affrontata. Il selettore usa [id] per superare la specificita delle regole di sezione (.hero, .foot... dichiarano a loro volta una width). Due strutture, un solo selettore: nel prototipo statico le sezioni sono figlie dirette di , nel tema WordPress stanno dentro
(header e footer restano fuori). #contenuto e' un contenitore e basta: non deve prendere i margini di pagina, altrimenti li sommerebbe a quelli delle sezioni che contiene. */ body > [id]:not(#contenuto), #contenuto > [id] { width: 100%; min-width: var(--page-width); padding-inline: max(var(--page-gutter), (100% - var(--container-width)) / 2); } #contenuto { width: 100%; min-width: var(--page-width); } /* --- Layout di sezione ---------------------------------------------------- */ .section { width: var(--page-width); padding-inline: var(--page-gutter); display: flex; flex-direction: column; align-items: center; } .section--narrative { padding-block: var(--space-7); } /* 160/160 */ .section--compact { padding-block: var(--space-6); } /* 80/80 */ .section--dark { background: var(--gradient-section-dark); color: var(--text-on-dark); } .section--grey { background: var(--color-neutral-100); } .container { width: var(--container-width); display: flex; flex-direction: column; } /* --- Primitive tipografiche ---------------------------------------------- */ .t-h1 { font-size: var(--type-h1-size); line-height: var(--type-h1-lh); font-weight: 400; } .t-h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); font-weight: 400; } .t-h3 { font-size: var(--type-h3-size); line-height: var(--type-h3-lh); font-weight: 400; } .t-h4 { font-size: var(--type-h4-size); line-height: var(--type-h4-lh); font-weight: 400; } .t-h4-b { font-size: var(--type-h4-size); line-height: var(--type-h4-lh); font-weight: 700; } .t-body { font-size: var(--type-body-size); line-height: var(--type-body-lh); font-weight: 400; } .t-body-b { font-size: var(--type-body-size); line-height: var(--type-body-lh); font-weight: 700; } .t-caption { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); font-weight: 400; } .t-micro { font-size: var(--type-micro-size); line-height: var(--type-micro-lh); font-weight: 400; } /* --- Cap-trim ------------------------------------------------------------- Riproduce il "Vertical trim: Cap height" di Figma: il box va dalla cap-height alla baseline. Standard moderno + fallback unico per tutti e quattro i token (00 §1.3 chiedeva di sceglierne uno: scelto il fallback basato su line-height = cap-height, che rende il box esattamente size * 0.727 come in Figma). --------------------------------------------------------------------------- */ .cap-trim { display: block; line-height: var(--inter-cap-height); } @supports (text-box-trim: trim-both) { .cap-trim { line-height: normal; text-box-trim: trim-both; text-box-edge: cap alphabetic; } } .t-display-xxl { font-size: var(--type-display-xxl-size); font-weight: 400; } /* box 436px */ .t-display-xl { font-size: var(--type-display-xl-size); font-weight: 400; } /* box 116px */ .t-display-l { font-size: var(--type-display-l-size); font-weight: 400; } /* box 87px */ .t-h2-trim { font-size: var(--type-h2-size); font-weight: 400; } /* box 35px */ /* --- Placeholder asset ---------------------------------------------------- Usati finche gli asset reali non sono in assets/. Ogni placeholder mostra il nome del file atteso e le dimensioni, cosi la sostituzione e meccanica. --------------------------------------------------------------------------- */ .ph { position: relative; background: repeating-linear-gradient(45deg, rgb(122 132 145 / .18) 0 10px, rgb(122 132 145 / .07) 10px 20px); outline: 1px dashed rgb(122 132 145 / .55); outline-offset: -1px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .ph::after { content: attr(data-ph); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .04em; color: rgb(122 132 145 / .95); text-align: center; padding: 4px 8px; } /* --- Salta al contenuto --------------------------------------------------- WordPress si aspetta la classe .screen-reader-text: e la convenzione con cui un elemento resta leggibile dagli screen reader ma non occupa spazio. Senza queste regole il link "Vai al contenuto" e un elemento di flusso alto 20px che spinge giu tutta la pagina. In focus da tastiera invece deve diventare visibile: e il suo unico momento utile. Colori e raggio sono quelli dei pulsanti del sito. */ .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .screen-reader-text:focus, .skip-link:focus { position: fixed; top: var(--space-3); left: var(--space-3); z-index: 1000; width: auto; height: auto; margin: 0; padding: 12px 24px; overflow: visible; clip-path: none; background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-btn, 4px); font-size: var(--type-body-size); line-height: var(--type-body-lh); }