/* ============================================================ EdilBoost — componenti Solo ciò che esiste nel documento madre. Nessuna variante inventata. Indice 1 Superfici 9 Il campo rame 17 Fascia dati 2 Tipografia 10 Texture: retino/ritmo 18 Biglietto da visita 3 Bottone 11 Le barre segnapasso 19 Tabella 4 Campo 12 L'anello finestra 20 Elenco 5 Messaggio stato 13 La riga graduata 21 Icona 6 Card funzionale 14 Fotografia 22 Layout 7 Il cuneo 15 La slide 8 Scheda / smusso 16 Formati di campagna ============================================================ */ *,*::before,*::after{box-sizing:border-box} /* --- 1 · SUPERFICI ---------------------------------------- */ .eb-scuro { background:var(--ardesia); color:var(--ghiaccio); } .eb-chiaro{ background:var(--ghiaccio); color:var(--carbone); } .eb-scuro .eb-label{ color:var(--etichetta-scura); } .eb-chiaro .eb-label{ color:var(--etichetta-chiara); } .eb-scuro .eb-corpo{ color:var(--testo-corrente); } .eb-chiaro .eb-corpo{ color:var(--carbone); } /* --- 2 · TIPOGRAFIA --------------------------------------- */ body{ font-family:var(--font); -webkit-font-smoothing:antialiased; margin:0; } .eb-display-1{ font-weight:var(--display-1); font-size:clamp(var(--display-1-min),4.4vw,var(--display-1-max)); line-height:var(--display-1-lh); letter-spacing:var(--display-1-ls); margin:0; } .eb-display-2{ font-weight:var(--display-2); font-size:clamp(var(--display-2-min),2.9vw,var(--display-2-max)); line-height:var(--display-2-lh); letter-spacing:var(--display-2-ls); margin:0; } .eb-titolo { font-weight:var(--titolo); font-size:clamp(var(--titolo-min),2.1vw,var(--titolo-max)); line-height:var(--titolo-lh); letter-spacing:var(--titolo-ls); margin:0; } .eb-lead { font-weight:var(--lead); font-size:var(--lead-size); line-height:var(--lead-lh); margin:0; } .eb-corpo { font-weight:var(--corpo); font-size:var(--corpo-size); line-height:var(--corpo-lh); margin:0; } .eb-label { font-weight:var(--label); font-size:var(--label-min); letter-spacing:var(--label-ls); text-transform:uppercase; margin:0; color:var(--etichetta-chiara); } .eb-cifra { font-weight:var(--cifra); font-size:var(--cifra-size); line-height:var(--cifra-lh); letter-spacing:var(--cifra-ls); margin:0; color:var(--rame); } /* Una sola enfasi cromatica per titolo. Mai due pesi nello stesso titolo. */ .eb-enfasi{ color:var(--rame); } /* Separatore dell'occhiello: serve un elemento, non uno spazio — il glifo nbsp del Gotham è largo e sfonda la riga. */ .eb-sep{ display:inline-block; width:14px; } /* --- 3 · BOTTONE ------------------------------------------ Un solo rame. Hover e pressed scuriscono lo stesso token. Altezza utile 46,4px, dentro il target 44–48. Nessuna icona dentro, nessun raggio. */ .eb-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:var(--target-min); background:var(--rame); color:var(--bianco); font-family:var(--font); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding:var(--sp-16) var(--sp-32); border:0; border-radius:var(--raggio); box-shadow:var(--ombra); text-decoration:none; cursor:pointer; transition:background var(--durata-micro) linear; /* Lo smusso in alto a sinistra e' la firma del bottone: c'e' sempre. La corsa si ricava dalla salita perche' l'angolo resti 25°: corsa = salita / 0,4663. Su 46,4px di altezza la salita e' 18 e la corsa ~38,6. Chi alza l'altezza del bottone alza --btn-salita. */ --btn-salita: 18px; --btn-corsa: calc(var(--btn-salita) / 0.4663); clip-path:polygon(var(--btn-corsa) 0, 100% 0, 100% 100%, 0 100%, 0 var(--btn-salita)); } .eb-btn:hover, .eb-btn:active{ background:var(--rame-premuto); } /* Il clip-path taglia via l'anello esterno: sul bottone il focus si segna con un filetto INTERNO, che resta dentro la sagoma smussata. */ .eb-btn:focus-visible{ outline:0; background:var(--rame-premuto); box-shadow:inset 0 0 0 2px var(--ghiaccio), inset 0 0 0 4px var(--carbone); } /* A filetto. Il filetto NON e' un'ombra interna: quella disegna un rettangolo e sullo smusso il bordo sparirebbe. Sono due piastre sovrapposte, tutte e due smussate — quella sotto fa da filetto, quella sopra riporta il fondo. La piastra interna non si ottiene con `inset`: rientrando di 2px in orizzontale e in verticale la diagonale resta dov'era e il filetto sparisce proprio sull'angolo. Va spostata di 2px in PERPENDICOLARE alla retta, che a 25° significa spostare le due quote di 0,2215 e 0,637 volte lo spessore. Il fondo dell'elemento resta TRASPARENTE e il testo carbone: se le piastre non venissero rese, il bottone perde il filetto ma resta leggibile. */ .eb-btn--filo{ --btn-filo-fondo: var(--ghiaccio); --f: 2px; background:transparent; color:var(--carbone); position:relative; isolation:isolate; } .eb-btn--filo::before, .eb-btn--filo::after{ content:""; position:absolute; inset:0; } .eb-btn--filo::before{ z-index:-2; background:var(--carbone); clip-path:polygon(var(--btn-corsa) 0, 100% 0, 100% 100%, 0 100%, 0 var(--btn-salita)); } .eb-btn--filo::after { z-index:-1; background:var(--btn-filo-fondo); clip-path:polygon( calc(var(--btn-corsa) + 0.2215 * var(--f)) var(--f), calc(100% - var(--f)) var(--f), calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), var(--f) calc(var(--btn-salita) + 0.637 * var(--f))); } .eb-btn--filo:hover, .eb-btn--filo:active{ background:transparent; color:var(--rame-premuto); } .eb-btn--filo:hover::before, .eb-btn--filo:active::before{ background:var(--rame-premuto); } .eb-btn--filo:focus-visible{ background:transparent; } .eb-btn--filo:focus-visible::after{ --f: 4px; } .eb-scuro .eb-btn--filo{ --btn-filo-fondo:var(--ardesia); color:var(--ghiaccio); } .eb-scuro .eb-btn--filo::before{ background:var(--ghiaccio); } .eb-btn[disabled], .eb-btn--muto{ background:#D9DBD9; color:#8E9599; cursor:not-allowed; pointer-events:none; } /* --- 4 · CAMPO -------------------------------------------- Input a 16px minimo: sotto, il browser mobile ingrandisce da solo. Errore e successo aggiungono un segno o un testo, non solo un colore. */ .eb-campo{ display:block; width:100%; min-height:var(--target-min); font-family:var(--font); font-weight:400; font-size:var(--input-min); color:var(--carbone); background:var(--bianco); border:var(--bordo-linea); border-radius:var(--raggio); padding:var(--sp-12) var(--sp-16); transition:border-color var(--durata-micro) linear; } .eb-campo::placeholder{ color:#8B9295; } .eb-campo:focus{ outline:0; border-color:var(--rame); box-shadow:inset 0 -2.83px 0 var(--rame); } /* 2,83 = tratto del retino fine */ .eb-campo[aria-invalid="true"]{ border-color:var(--error); } .eb-campo[data-stato="ok"] { border-color:var(--success); } .eb-campo[disabled]{ background:#D9DBD9; color:#8E9599; cursor:not-allowed; } .eb-campo-nota{ font-weight:500; font-size:12px; margin:var(--sp-8) 0 0; display:flex; gap:var(--sp-8); align-items:center; } .eb-campo-nota--errore{ color:var(--error); } .eb-campo-nota--ok { color:var(--success); } /* --- 5 · MESSAGGIO DI STATO ------------------------------- Barra a sinistra più la parola: mai il colore da solo. */ .eb-stato{ display:flex; gap:var(--sp-12); align-items:stretch; } .eb-stato::before{ content:""; flex:0 0 3px; background:currentColor; min-height:34px; } .eb-stato-tit{ font-weight:700; font-size:14px; margin:0; } .eb-stato-txt{ font-weight:400; font-size:14px; margin:var(--sp-4) 0 0; color:var(--carbone); } .eb-stato--success{ color:var(--success); } .eb-stato--warning{ color:var(--warning); } .eb-stato--error { color:var(--error); } .eb-stato--info { color:var(--info); } /* --- 6 · CARD FUNZIONALE ---------------------------------- Nessuna ombra, bordo sottile, spazio interno chiaro. Nessun elemento di marca obbligatorio. */ .eb-card{ background:var(--bianco); border:var(--bordo-linea); border-radius:var(--raggio); box-shadow:var(--ombra); padding:var(--sp-24); } .eb-card-tit{ font-weight:700; font-size:17px; letter-spacing:-.008em; color:var(--carbone); margin:var(--sp-12) 0 0; } .eb-card-txt{ font-weight:400; font-size:14px; line-height:1.6; color:var(--carbone); margin:var(--sp-12) 0 0; } a.eb-card{ display:block; text-decoration:none; transition:border-color var(--durata-micro) linear; } a.eb-card:hover{ border-color:var(--carbone); } a.eb-card:focus-visible{ outline:0; box-shadow:var(--focus-ring); } /* ============================================================ 7 · IL CUNEO — la base geometrica di mezzo sistema ------------------------------------------------------------ Schede, fotografia brand-led e composizione sono LO STESSO cuneo: cambia solo dove sta la mediana. Verificato sul master: 380×400 → 44,2994% 400×250 → 74,6096% 384×216 → 82,8996% 620×300 → 96,3708% e la formula li ridà tutti al centesimo. Si passano tre cose e basta: --w larghezza --h altezza --profondita (default 50%) «Profondità del campo: quanto serve al testo» (§06). ============================================================ */ .eb-cuneo{ --w:380; --h:400; --profondita:50%; --salita: calc( (0.4663 * var(--w) / var(--h)) * 100% ); /* la formula */ --dx: calc( var(--salita) / 2 ); --y-sx: calc( var(--profondita) + var(--dx) ); /* quota sul bordo sinistro */ --y-dx: calc( var(--profondita) - var(--dx) ); /* quota sul bordo destro */ position:relative; width:calc(var(--w) * 1px); height:calc(var(--h) * 1px); overflow:hidden; background:var(--carbone); } /* Le profondità del §13. Il campo si dimensiona sul testo, mai il contrario; se il formato non lo regge si passa a fascia o smusso. ATTENZIONE: il master ne disegna DUE — 82,41% e 50%. Il «campo minimo» è descritto a parole ma mai disegnato, quindi non ha un valore di sistema: si passa --profondita a mano e lo detta il testo. */ .eb-cuneo--ampio { --profondita:82.41%; } /* testo lungo: il cuneo cresce */ .eb-cuneo--equilibrio{ --profondita:50%; } /* campagne, cover, aperture */ .eb-cuneo-alto, .eb-cuneo-filo, .eb-cuneo-basso{ position:absolute; inset:0; } /* Il filetto è lo stesso cuneo esteso di 0,78%: quello che avanza è il rame. */ .eb-cuneo-filo { background:var(--rame); z-index:2; clip-path:polygon(0 0,100% 0,100% calc(var(--y-dx) + .78%),0 calc(var(--y-sx) + .78%)); } .eb-cuneo-alto { background:var(--ardesia); z-index:3; clip-path:polygon(0 0,100% 0,100% var(--y-dx),0 var(--y-sx)); } .eb-cuneo-basso{ z-index:1; overflow:hidden; clip-path:polygon(0 var(--y-sx),100% var(--y-dx),100% 100%,0 100%); } .eb-cuneo-basso img, .eb-cuneo-alto img{ width:100%; height:100%; object-fit:cover; display:block; } /* La fotografia sta sotto la retta, mai sopra: il testo vive sul campo pieno. */ /* --- 8 · SCHEDA-DATO — il cuneo con due blocchi ------------ Ogni blocco sta nella parte alta del suo cuneo: quello di sopra a sinistra, quello di sotto a destra. */ /* La scheda è un cuneo con due blocchi: si scrive class="eb-cuneo eb-scheda". */ .eb-scheda-apre { position:absolute; left:var(--sp-32); top:var(--sp-32); width:calc(var(--w) * 0.62px); z-index:5; } .eb-scheda-chiude{ position:absolute; right:var(--sp-32); bottom:var(--sp-32); width:calc(var(--w) * 0.62px); z-index:5; text-align:right; } /* Sulla scheda l'etichetta sta sempre sul ghiaccio: il rame piccolo non regge né su ardesia (3,89) né su carbone (2,71). */ .eb-cuneo .eb-label{ color:var(--ghiaccio); margin-bottom:var(--sp-12); } .eb-cuneo .eb-corpo{ font-size:13px; line-height:1.56; color:var(--testo-corrente); } .eb-scheda-tit{ font-weight:900; font-size:25px; line-height:1.04; letter-spacing:-.02em; color:var(--ghiaccio); margin:0; } .eb-cuneo--inv{ background:var(--ardesia); } /* carbone sopra, ardesia sotto */ .eb-cuneo--inv .eb-cuneo-alto{ background:var(--carbone); } .eb-cuneo--muta .eb-cuneo-filo{ display:none; } /* il salto basta a segnare il confine */ /* --- 8b · SMUSSO ------------------------------------------ Lo stesso angolo su superfici piccole, senza dividere la scheda. Corsa fissa 96 × 44,77, uguale su ogni formato, mai scalata. Porta con sé la propria distanza: il contenuto parte SOTTO la salita, mai accanto — 64 è il primo valore in scala che la libera (nel master la quota è 66). Mai due angoli sulla stessa scheda. */ .eb-smusso{ clip-path:polygon(var(--smusso-corsa) 0, 100% 0, 100% 100%, 0 100%, 0 44.77px); padding:var(--sp-64) var(--sp-32) var(--sp-32); } /* --- 9 · IL CAMPO RAME ------------------------------------ Il rame come fondo si usa in UN SOLO modo: una fascia che sottolinea un titolo in bianco. Bianco su rame fa 4,21:1, che passa dai 24 px in su — il titolo si legge, tutto il resto no. Dentro la fascia va SOLO il titolo. Sopra e sotto, il fondo torna ghiaccio o ardesia. */ .eb-campo-rame{ background:var(--rame); color:var(--bianco); display:flex; align-items:center; padding:var(--sp-48); } .eb-campo-rame-tit{ font-weight:900; font-size:38px; line-height:1; letter-spacing:-.022em; text-transform:uppercase; color:var(--bianco); margin:0; } /* Così no: la cifra in carbone fa 2,71:1 e si spegne, il testo di lettura a 14px sta sotto soglia, l'etichetta in carbone sparisce. Non è una questione di gusto: il fondo non porta contenuto. */ /* --- 10 · TEXTURE — due fondi, mai insieme ----------------- */ /* Il retino: passo perpendicolare 45,03 · tratto 1,12 · rame al 15%. Solo su campo pieno SENZA fotografia. Su ghiaccio il rame scende al 62% della sua opacità: a parità di forza, su chiaro macchia. */ .eb-retino{ position:absolute; inset:0; z-index:0; pointer-events:none; background-image:repeating-linear-gradient(-25deg, rgba(185,101,62,.15) 0 1.12px, transparent 1.12px 45.03px); } .eb-chiaro .eb-retino{ background-image:repeating-linear-gradient(-25deg, rgba(185,101,62,.093) 0 1.12px, transparent 1.12px 45.03px); } /* Il ritmo: le righe partono quasi invisibili dall'angolo in alto a sinistra e si fanno più marcate scendendo verso la retta rame, che è l'unica piena. Passo 21,35 (il retino fine), tratto 1,10, opacità da .064 a .30. SOLO quando c'è una fotografia da legare al campo scuro. Mai insieme al retino. */ .eb-ritmo{ position:absolute; inset:0; z-index:1; pointer-events:none; background-image:repeating-linear-gradient(-25deg, rgba(245,245,245,.30) 0 1.10px, transparent 1.10px 21.35px); /* La sfumatura corre PERPENDICOLARE alle righe (115° = 90° + 25°): quasi invisibile nell'angolo in alto a sinistra, piena sulla retta. */ -webkit-mask-image:linear-gradient(115deg, transparent 4%, #000 72%); mask-image:linear-gradient(115deg, transparent 4%, #000 72%); } /* La retta di spinta: l'unica piena, tratto 2,83. Entra da un bordo, esce da un altro. Nel motion si disegna in 700ms, una volta per sezione. */ .eb-retta{ position:absolute; left:50%; width:150%; height:2.83px; background:var(--rame); z-index:3; pointer-events:none; transform:translate(-50%,-50%) rotate(-25deg); } /* --- 11 · LE BARRE COME SEGNAPASSO ------------------------- Il segno del marchio che fa un lavoro: numero di slide, marcatore di sezione, stato di avanzamento. Quote dal vettoriale: larghezza 25 · passo 82 · altezza 84,20 · scarto 38,24. Si scalano con --k, non si ridisegnano. Quella attiva piena, le altre al 28%. */ .eb-barre{ --k:.4; position:relative; width:calc((2 * 82 + 25) * var(--k) * 1px); height:calc((84.20 + 2 * 38.24) * var(--k) * 1px); } .eb-barra{ position:absolute; background:var(--rame); opacity:var(--opacita-barra-inattiva); width:calc(25 * var(--k) * 1px); height:calc(84.20 * var(--k) * 1px); clip-path:polygon(0 13.85%,100% 0,100% 86.15%,0 100%); } .eb-barra:nth-child(1){ left:0; bottom:0; } .eb-barra:nth-child(2){ left:calc(82 * var(--k) * 1px); bottom:calc(38.24 * var(--k) * 1px); } .eb-barra:nth-child(3){ left:calc(164 * var(--k) * 1px); bottom:calc(76.48 * var(--k) * 1px); } .eb-barra[aria-current], .eb-barra--attiva{ opacity:1; } /* Due costruzioni diverse, mai insieme sulla stessa superficie. 1 · ANGOLO BASSO-DESTRA (asset `angolo-basso-destra.svg`): le barre nascono dal bordo inferiore e LO TOCCANO — verificato, tutte e tre arrivano a y=266,75. Larghezza 42,92 · passo 140,75 · scarto 65,63. 2 · BARRE SULLA RETTA, in basso a sinistra: ricopiano la logica del marchio — crescono SOPRA la retta rame e NON la toccano. Lo stacco nel logo è costante: 16,05 su una barra da 25, cioè 0,642 volte la larghezza della barra. Larghezza 25 · passo 82. Se ci sono le barre sulla retta, dall'angolo destro sparisce tutto. */ /* Variante SULLA RETTA. Lo stacco viene dal marchio: nel logo le tre barre stanno sopra la diagonale a distanza costante — misurato 16,05 · 16,06 · 16,05 su barre larghe 25, cioè 0,642 volte la larghezza. Dentro un .eb-cuneo si posiziona da sola: aggancia la retta al bordo sinistro, risale con la pendenza fino a --da-sinistra e aggiunge lo stacco. Non si calcola più niente a mano. */ .eb-barre--sulla-retta{ --stacco: calc(16.05 * var(--k) * 1px); --da-sinistra: var(--sp-32); position:absolute; left:var(--da-sinistra); z-index:6; bottom: calc( (100% - var(--y-sx)) + (0.4663 * var(--da-sinistra)) + var(--stacco) ); } /* Se ci sono queste, dall'angolo in basso a destra sparisce tutto: una superficie, una posizione. */ /* --- 12 · L'ANELLO COME FINESTRA --------------------------- La fotografia dentro i due anelli. È l'unico modo di usare una forma tonda senza fare un mirino, e risolve il fatto che l'anello da solo è troppo piccolo per reggere una superficie. Ingombro 227,05 × 123,13 — rapporto 1,844. */ .eb-anello-finestra{ position:relative; width:230px; aspect-ratio:227.05 / 123.13; -webkit-mask:url(../svg/anello.svg) no-repeat center/contain; mask:url(../svg/anello.svg) no-repeat center/contain; } .eb-anello-finestra img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* --- 13 · LE OBLIQUE COME RIGA GRADUATA -------------------- Sette righe di lunghezza finita: in fila lungo un bordo diventano una scala di misura. Ha un inizio e una fine, a differenza del retino che è solo fondo. Ingombro 384,18 × 39,81. */ .eb-riga-graduata{ display:block; width:290px; aspect-ratio:384.18 / 39.81; } /* --- 14 · FOTOGRAFIA — due registri ------------------------ Il trattamento diagonale è un gesto di brand, non un obbligo. */ /* Brand-led: hero, ADV, copertine. Taglio o velo a 25°, e il testo solo dove il fondo è abbastanza scuro. Usa .eb-cuneo. */ /* Funzionale: case study, contenuti, card informative, pagine lunghe. Immagine rettangolare, nessun taglio: la riconoscibilità arriva dal sistema che le sta intorno. */ .eb-foto-funzionale{ display:block; width:100%; height:auto; border-radius:var(--raggio); } .eb-foto-funzionale img{ width:100%; height:100%; object-fit:cover; display:block; } /* --- 15 · LA SLIDE ---------------------------------------- Autorata a 1920×1080: i numeri qui dentro SONO i numeri veri. Per mostrarla più piccola si scala il contenitore, non i valori. Quote misurate sugli artboard reali (2000×1125), non dedotte: margine 134 · lockup 435 a 74 dal bordo · display 168 dall'alto pannello dati 778→960 · angolo 547 Fra il sommario e il pannello resta un VUOTO di ~187px: è il 17% dell'altezza, ed è il respiro che regge la pagina. Non si riempie. La scura è la copertina e non si ripete. La chiara è il registro di lettura. */ .eb-slide{ position:relative; width:1920px; height:1080px; overflow:hidden; background:var(--ardesia); color:var(--ghiaccio); } .eb-slide--chiara{ background:var(--ghiaccio); color:var(--carbone); } .eb-slide-scala{ --k:.5; width:calc(1920px * var(--k)); height:calc(1080px * var(--k)); overflow:hidden; } .eb-slide-scala > .eb-slide{ transform:scale(var(--k)); transform-origin:top left; } .eb-slide-fondo { position:absolute; inset:0; z-index:0; } .eb-slide-lockup{ position:absolute; right:134px; top:74px; width:435px; z-index:4; } .eb-slide-angolo{ position:absolute; right:0; bottom:0; width:547px; z-index:3; } /* Il testo occupa il 60% della larghezza: il resto è vuoto, e ci sta. */ .eb-slide-testo{ position:absolute; left:134px; top:168px; width:1200px; z-index:4; } .eb-slide-display { font-weight:900; font-size:74px; line-height:1.07; letter-spacing:-.022em; margin:0; } .eb-slide-sommario{ font-weight:400; font-size:26px; line-height:1.65; margin:44px 0 0; max-width:1120px; color:var(--testo-corrente); } .eb-slide--chiara .eb-slide-sommario{ color:var(--etichetta-chiara); font-style:italic; } /* Il dato vive su un pannello chiaro: l'unica superficie chiara della copertina, e lo smusso con la lama rame la firma. Su fondo chiaro il pannello è bianco e non ha smusso — il salto di superficie è troppo debole per reggere anche un angolo tagliato — e il filetto rame diventa il bordo sinistro del campo. */ .eb-slide-dato{ position:absolute; left:134px; top:778px; width:1200px; z-index:4; background:var(--ghiaccio); color:var(--carbone); padding:44px 48px; clip-path:polygon(96px 0,100% 0,100% 100%,0 100%,0 44.77px); } .eb-slide--chiara .eb-slide-dato{ background:var(--bianco); width:1270px; clip-path:none; border-left:3px solid var(--rame); } /* Tre zone divise da filetti da 1px, non da bordi di scatola. */ .eb-slide-zone{ display:flex; align-items:center; gap:40px; } .eb-slide-zone > * + *{ border-left:1px solid var(--bordo); padding-left:40px; } .eb-slide-cifra{ font-weight:900; font-size:64px; line-height:1; letter-spacing:-.032em; color:var(--rame); margin:0; white-space:nowrap; } .eb-slide-cifra small{ font-size:28px; font-weight:900; letter-spacing:-.02em; } .eb-slide-dato-txt{ font-weight:400; font-size:23px; line-height:1.45; margin:8px 0 0; } /* --- 16 · FORMATI DI CAMPAGNA ----------------------------- Lo stesso sistema addosso ai formati. Sul verticale la pendenza vive dentro una FASCIA: sul formato intero leggerebbe come un orizzonte storto. */ .eb-formato{ --k:1; position:relative; overflow:hidden; background:var(--ardesia); color:var(--ghiaccio); } .eb-formato--169{ aspect-ratio:16/9; width:calc(384px * var(--k)); } /* YouTube, VSL */ .eb-formato--11 { aspect-ratio:1; width:calc(320px * var(--k)); } /* LinkedIn */ .eb-formato--916{ aspect-ratio:9/16; width:calc(220px * var(--k)); } /* storie */ .eb-formato-tit{ font-weight:900; line-height:1.04; letter-spacing:-.026em; margin:0; color:var(--ghiaccio); } /* Sul 9:16 la diagonale sta dentro una fascia, non sul formato intero. */ .eb-fascia{ position:relative; overflow:hidden; background:var(--ardesia); } /* --- 17 · FASCIA DATI ------------------------------------- Le cifre in rame, il testo sotto. Divise da filetti, non da scatole. La quota entra solo se una cifra misura qualcosa di reale: quantità, tempo, distanza, volume (§09). */ .eb-fascia-dati{ background:var(--bianco); padding:var(--sp-48) var(--sp-64); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-32); } .eb-fascia-dati > * + *{ border-left:1px solid var(--bordo); padding-left:var(--sp-32); } .eb-dato-cifra{ font-weight:900; font-size:38px; line-height:1; letter-spacing:-.032em; color:var(--rame); margin:0; } .eb-dato-txt { font-weight:400; font-size:14px; line-height:1.5; color:var(--carbone); margin:var(--sp-12) 0 0; } /* --- 18 · BIGLIETTO DA VISITA ----------------------------- 850 × 550. L'angolo basso-destra a filo, largo il 67,3% del lato lungo (572,05 su 850). Non è una carta: è il modo in cui obliqua e verticali occupano l'angolo. Dal vettoriale master, mai ridisegnato. */ .eb-biglietto{ --k:1; position:relative; overflow:hidden; width:calc(850px * var(--k)); height:calc(550px * var(--k)); background:var(--ghiaccio); color:var(--carbone); } .eb-biglietto-angolo{ position:absolute; right:0; bottom:0; width:67.3%; } /* --- 19 · TABELLA ----------------------------------------- */ .eb-tab{ width:100%; border-collapse:collapse; font-size:14px; } .eb-tab th{ font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-align:left; padding:var(--sp-12) var(--sp-24) var(--sp-12) 0; } .eb-tab td{ text-align:left; padding:var(--sp-12) var(--sp-24) var(--sp-12) 0; vertical-align:top; } .eb-tab td:first-child{ font-weight:700; } .eb-chiaro .eb-tab th{ color:var(--etichetta-chiara); border-bottom:1px solid #DEDEDE; } .eb-chiaro .eb-tab td{ color:var(--carbone); border-bottom:1px solid #DEDEDE; } .eb-scuro .eb-tab th{ color:var(--etichetta-scura); border-bottom:1px solid rgba(245,245,245,.14); } .eb-scuro .eb-tab td{ color:var(--testo-corrente); border-bottom:1px solid rgba(245,245,245,.14); } .eb-scuro .eb-tab td:first-child{ color:var(--ghiaccio); } /* --- 20 · ELENCO ------------------------------------------ */ .eb-elenco{ list-style:none; padding:0; margin:0; } .eb-elenco li{ margin-bottom:var(--sp-12); font-size:14px; line-height:1.5; } .eb-elenco li::before{ content:""; display:inline-block; width:16px; height:2px; background:var(--rame); vertical-align:middle; margin-right:var(--sp-12); } /* --- 21 · ICONA ------------------------------------------- Griglia 24 su tela 48, tratto 2, raggio zero, linecap square. Un solo segmento rame per icona, e solo se significa qualcosa: crescita, tempo, direzione. Mai target, lenti, mirini. */ .eb-icona{ width:42px; height:42px; fill:none; stroke:var(--carbone); stroke-width:2; stroke-linecap:square; } .eb-scuro .eb-icona{ stroke:var(--ghiaccio); } .eb-icona .eb-icona-accento{ stroke:var(--rame); } /* --- 22 · LAYOUT ------------------------------------------ */ .eb-pagina{ padding:var(--sp-64) var(--sp-96); position:relative; z-index:2; } .eb-misura{ max-width:880px; } .eb-g2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-64); } .eb-g3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-48); } .eb-g4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-32); } @media (max-width:1024px){ /* tablet — 8 col, gutter 24 */ .eb-pagina{ padding:var(--sp-48) var(--sp-32); } .eb-g3,.eb-g4{ grid-template-columns:repeat(2,1fr); gap:var(--sp-24); } .eb-retino,.eb-ritmo{ display:none; } /* 1 · via texture e dettagli non funzionali */ } @media (max-width:640px){ /* mobile — 4 col, gutter 16 */ .eb-pagina{ padding:var(--sp-32) var(--sp-16); } .eb-g2,.eb-g3,.eb-g4{ grid-template-columns:1fr; gap:var(--sp-24); } .eb-cuneo{ --w:320; --h:340; } /* 3 · dal taglio totale a fascia o smusso */ .eb-fascia-dati{ grid-template-columns:repeat(2,minmax(0,1fr)); } }