/* Stili del frame layer (site shell). Vocabolario chiuso: una classe per variante. Il comportamento mobile (drawer) e il toggle restano markup a11y-corretto; lo stile non sostituisce la struttura. */ /* Skip link: fuori schermo finché non riceve il focus da tastiera. */ .skip-link { position: absolute; left: -9999px; top: 0; padding: 0.5rem 1rem; background: var(--brand, #12312b); color: var(--on-dark, #fff); z-index: 100; } .skip-link:focus { left: 0; } /* Focus sempre visibile per la navigazione da tastiera. */ .frame-nav a:focus-visible, .frame-brand:focus-visible, .frame-nav__toggle:focus-visible, .frame-mobile__toggle:focus-visible { outline: 2px solid var(--focus, #f0b45b); outline-offset: 2px; } .frame-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .frame-nav__list { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .frame-nav__toggle, .frame-mobile__toggle { display: none; } /* Header in alto, fisso allo scroll. */ .frame-header--top-sticky { position: sticky; top: 0; z-index: 50; background: var(--surface, #fff); } /* Header trasparente sopra l'hero: lo sfondo lo dà la sezione sottostante. */ .frame-header--transparent-hero { position: absolute; inset: 0 0 auto 0; z-index: 50; background: transparent; } /* Navigazione laterale a sinistra (colonna). */ .frame-sidebar--left { display: flex; flex-direction: column; gap: 1.5rem; } .frame-nav--vertical .frame-nav__list { flex-direction: column; gap: 0.5rem; } /* Drawer mobile: pannello nascosto finché il toggle non lo apre. */ .frame-mobile__panel[hidden] { display: none; } .frame-mobile__panel { position: fixed; inset: 0 0 0 auto; width: min(80vw, 20rem); background: var(--surface, #fff); padding: 1.5rem; } .frame-mobile__panel .frame-nav__list { flex-direction: column; gap: 0.75rem; } /* Sotto la soglia mobile: la nav inline cede il passo a toggle + drawer. */ @media (max-width: 48rem) { .frame-header .frame-nav { display: none; } .frame-header .frame-nav__toggle { display: inline-flex; } .frame-mobile__toggle { display: inline-flex; } } /* --------------------------------------------------------------------------- Override STRUTTURALI di progetto (catalogo chiuso, classi sul ). Ogni regola poggia sui token comuni a tutti i verticali: una scelta di ritmo o di colonne non deve portarsi dietro un colore o una misura che appartengono a un verticale solo. ⚠ Il valore neutro di ogni asse NON ha classe: dichiararlo esplicitamente resta identico a non dichiararlo, e il CSS non deve contenere una regola che «rimette a posto» il default. --------------------------------------------------------------------------- */ .fp-s-density-compact .section, .fp-s-density-compact [class*="__inner"] { padding-top: calc(var(--section-y) * 0.62); padding-bottom: calc(var(--section-y) * 0.62); } .fp-s-density-airy .section, .fp-s-density-airy [class*="__inner"] { padding-top: calc(var(--section-y) * 1.45); padding-bottom: calc(var(--section-y) * 1.45); } /* Inversione media/testo: agisce sull'ORDINE visuale, non sul markup — l'ordine del DOM resta quello letto dagli assistivi, ed è il motivo per cui non si riordinano i blocchi. */ .fp-s-media-side-media-first .split > :first-child, .fp-s-media-side-media-first [class*="__media"] { order: -1; } .fp-s-media-side-text-first [class*="__media"] { order: 1; } .fp-s-cols-2 .cards, .fp-s-cols-2 [class*="__list"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fp-s-cols-3 .cards, .fp-s-cols-3 [class*="__list"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fp-s-cols-4 .cards, .fp-s-cols-4 [class*="__list"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Sotto i 720px si torna sempre a una colonna: una griglia a 4 su telefono non è una scelta di design, è un overflow. */ @media (max-width: 719px) { .fp-s-cols-2 .cards, .fp-s-cols-3 .cards, .fp-s-cols-4 .cards, .fp-s-cols-2 [class*="__list"], .fp-s-cols-3 [class*="__list"], .fp-s-cols-4 [class*="__list"] { grid-template-columns: minmax(0, 1fr); } } /* Promozione di una voce: la prima riga della griglia occupa tutta la larghezza. Gli indici sono quelli del catalogo (0–11), e la regola vale solo dove una griglia esiste. */ .fp-s-featured-0 .cards > :nth-child(1), .fp-s-featured-1 .cards > :nth-child(2), .fp-s-featured-2 .cards > :nth-child(3), .fp-s-featured-3 .cards > :nth-child(4) { grid-column: 1 / -1; }