/* Sinapio — griglia web 1.5 Unità di base 8 px. Il mezzo passo da 4 esiste solo per bordi, filetti e correzioni ottiche: non si usa per spaziare i blocchi. Attorno al marchio vale W, non la griglia: l'area di rispetto è 1,5 W e si calcola sulla dimensione del segno, non sul passo della pagina. */ :root { /* Passo */ --passo: 8px; --mezzo-passo: 4px; /* Scala di spaziatura — multipli del passo */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px; /* Griglia */ --colonne: 12; --gutter: 24px; --colonna: 80px; --contenuto-max: 1224px; /* 12 × 80 + 11 × 24 */ --margine: 48px; /* Misura di lettura: 5 colonne = 496 px ≈ 62 caratteri a 18 px */ --misura: 496px; /* Scala tipografica — corpo/interlinea, tutte multiple di 4 */ --t-12: 12px; --l-12: 16px; --t-14: 14px; --l-14: 20px; --t-16: 16px; --l-16: 24px; --t-18: 18px; --l-18: 28px; --t-22: 22px; --l-22: 32px; --t-28: 28px; --l-28: 36px; --t-36: 36px; --l-36: 44px; --t-48: 48px; --l-48: 56px; --t-64: 64px; --l-64: 72px; } /* Breakpoint: 1288 = contenuto 1224 + due margini da 32 */ @media (max-width: 1287px) { :root { --colonne: 8; --gutter: 24px; --margine: 32px; } } @media (max-width: 1023px) { :root { --colonne: 8; --gutter: 16px; --margine: 24px; } } @media (max-width: 639px) { :root { --colonne: 4; --gutter: 16px; --margine: 16px; } } /* Contenitore e griglia */ .sinapio-contenitore { max-width: var(--contenuto-max); margin-inline: auto; padding-inline: var(--margine); } .sinapio-griglia { display: grid; grid-template-columns: repeat(var(--colonne), minmax(0, 1fr)); gap: var(--gutter); } /* Campate: .c-N occupa N colonne. Oltre il numero di colonne disponibili la campata si riduce all'intera larghezza. */ .c-1 { grid-column: span 1; } .c-2 { grid-column: span 2; } .c-3 { grid-column: span 3; } .c-4 { grid-column: span 4; } .c-5 { grid-column: span 5; } .c-6 { grid-column: span 6; } .c-7 { grid-column: span 7; } .c-8 { grid-column: span 8; } .c-9 { grid-column: span 9; } .c-10 { grid-column: span 10; } .c-11 { grid-column: span 11; } .c-12 { grid-column: span 12; } @media (max-width: 1287px) { .c-9, .c-10, .c-11, .c-12 { grid-column: span 8; } } @media (max-width: 639px) { .c-5, .c-6, .c-7, .c-8 { grid-column: span 4; } .c-2, .c-3 { grid-column: span 4; } } /* Il testo lungo non supera mai la misura, anche in una campata più larga */ .sinapio-testo-lungo { max-width: var(--misura); } /* Ritmo verticale: i blocchi si distanziano per multipli del passo */ .sinapio-sezione { padding-block: var(--sp-16); } .sinapio-sezione + .sinapio-sezione { padding-top: 0; } h1, h2, h3 { margin-block: 0 var(--sp-4); } p, ul, ol, table { margin-block: 0 var(--sp-6); } /* Verifica: aggiungi la classe a per vedere le colonne */ .sinapio-mostra-griglia .sinapio-griglia > * { outline: 1px solid rgba(91, 111, 234, 0.35); } .sinapio-mostra-ritmo { background-image: repeating-linear-gradient( to bottom, rgba(91, 111, 234, 0.12) 0 1px, transparent 1px var(--passo) ); }