/* ===================================================================== Body Zone — Design tokens Autore: bz-ux-ui · 29/09/2026 · font e scala aggiornati da bz-frontend il 09/10/2026 Riferimento: docs/02-design-system.md Solo @font-face e custom properties su :root. Le regole dei componenti vivono in assets/css/style.css (bz-frontend). ===================================================================== */ /* --------------------------------------------------------------------- Font self-hosted (bz-frontend, 09/10/2026 — opzione B di docs/03-proposta-font.md, decisione di Michele 08/10/2026). Barlow Condensed 600 (titoli, logo) + Barlow 400/600 (testo, UI). File statici woff2 da Google Fonts (v13), subset latin + latin-ext. Licenza SIL OFL 1.1: assets/fonts/LICENSE-Barlow.txt. Nessun peso 500 e nessun corsivo: non usare font-weight 500 o font-style: italic (il browser sintetizzerebbe). --------------------------------------------------------------------- */ @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-condensed-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-condensed-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ------------------------------------------------------------------- Colori — palette madre (CLAUDE.md) ------------------------------------------------------------------- */ --color-primary: #5b82a0; /* solo testo >= 24px o 19px bold, icone, bordi. 4.08:1 su bianco */ --color-dark: #3d6484; /* bottoni primari, link, testo piccolo blu. 6.26:1 su bianco */ --color-accent: #7ba3bf; /* SOLO decorativo (linee, numeri step, illustrazioni). 2.68:1 su bianco */ --color-light: #e8f0f8; /* sfondo sezioni alternate, card soft */ --color-bg: #f0f5fa; /* sfondo pagina secondario / hero */ --color-text: #2a2a2a; /* testo corrente. 14.35:1 su bianco */ --color-white: #ffffff; /* sfondo base di pagina e card */ /* Colori di supporto (max 2) */ --color-ink: #1f3b53; /* blu notte: titoli, hover bottoni, banda CTA, footer. 11.61:1 su bianco */ --color-whatsapp:#0e7a45; /* verde WhatsApp scurito per AA. Bianco sopra 5.40:1 */ /* Varianti funzionali (derivate, non nuovi colori di brand) */ --color-text-muted: #55606b; /* testo secondario. 6.42:1 su bianco, 5.58:1 su light */ --color-whatsapp-hover: #0b6338; /* 7.35:1 con bianco */ --color-on-ink: #e8f0f8; /* testo su ink = --color-light. 10.09:1 */ --color-on-ink-muted: #c8d6e3; /* testo secondario su ink. 7.84:1 */ --color-border: #d3dfea; /* divisori e bordi card (decorativi, non informativi) */ --color-border-strong: #5b82a0; /* bordi di campi/controlli: 4.08:1, >= 3:1 per UI */ --color-focus: #1f3b53; /* anello di focus su fondi chiari */ --color-focus-on-dark: #e8f0f8; /* anello di focus su ink */ /* Solo revisione interna (aggiunti da bz-frontend): evidenziano i testi [[DA CONFERMARE]] con la classe .tbc. Da rimuovere prima del go-live. */ --color-tbc-bg: #fff5c2; --color-tbc-border: #b08800; /* Alias semantici (usare questi nei componenti) */ --surface-page: var(--color-white); --surface-soft: var(--color-bg); --surface-tint: var(--color-light); --surface-strong: var(--color-ink); --text-body: var(--color-text); --text-heading: var(--color-ink); --text-muted: var(--color-text-muted); --text-link: var(--color-dark); --text-link-hover: var(--color-ink); --btn-primary-bg: var(--color-dark); --btn-primary-bg-hover: var(--color-ink); --btn-primary-text: var(--color-white); /* ------------------------------------------------------------------- Tipografia Scala fluida tra 375px e 1280px di viewport (root = 16px) ------------------------------------------------------------------- */ --font-heading: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif; --font-ui: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* Scala 09/10/2026 (opzione B): testo +1px rispetto alla scala Poppins per il target over 50; titoli tenuti grandi grazie al condensato. */ --fs-xs: 0.875rem; /* 14px fisso: note legali, meta */ --fs-sm: 1rem; /* 16 fisso (era 15 → 16): Barlow è stretto */ --fs-base: clamp(1.125rem, 1.099rem + 0.1105vw, 1.1875rem); /* 18 → 19 */ --fs-md: clamp(1.25rem, 1.198rem + 0.221vw, 1.375rem); /* 20 → 22 lead */ --fs-lg: clamp(1.5rem, 1.448rem + 0.221vw, 1.625rem); /* 24 → 26 h4 / titolo card */ --fs-xl: clamp(1.625rem, 1.522rem + 0.442vw, 1.875rem); /* 26 → 30 h3 */ --fs-2xl: clamp(2rem, 1.689rem + 1.326vw, 2.75rem); /* 32 → 44 h2 */ --fs-3xl: clamp(2.5rem, 1.983rem + 2.21vw, 3.75rem); /* 40 → 60 h1 */ --fw-regular: 400; --fw-semibold: 600; --fw-heading: 600; /* unico peso di Barlow Condensed (titoli, logo, numeri) */ /* --fw-medium (500) rimosso il 09/10/2026: esisteva solo per Cormorant */ --lh-tight: 1.05; /* h1, h2 condensati */ --lh-snug: 1.25; /* h3, h4, bottoni */ --lh-body: 1.65; /* testo corrente */ --lh-relaxed: 1.75; /* testi lunghi (privacy, posturale) */ --ls-eyebrow: 0.1em; /* occhiello maiuscolo in Barlow */ --ls-heading: 0.005em;/* titoli condensati: appena aperti, mai negativi */ --ls-normal: 0; --measure: 65ch; /* larghezza massima di un paragrafo */ /* ------------------------------------------------------------------- Spaziature (base 4px, scala 8pt) ------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-gutter: clamp(1rem, 0.3785rem + 2.652vw, 2.5rem); /* 16 → 40: padding laterale container */ --space-section: clamp(3.5rem, 2.05rem + 6.188vw, 7rem); /* 56 → 112: padding verticale sezioni */ --space-stack: clamp(1.5rem, 1.086rem + 1.768vw, 2.5rem); /* 24 → 40: distanza tra blocchi */ /* ------------------------------------------------------------------- Layout e griglia ------------------------------------------------------------------- */ --container-max: 75rem; /* 1200px */ --container-narrow: 45rem; /* 720px: testi, FAQ, legali */ --grid-columns: 12; --grid-gap: clamp(1rem, 0.586rem + 1.768vw, 2rem); /* 16 → 32 */ /* Breakpoint (riferimento: le custom properties non funzionano dentro @media, usare i valori letterali min-width: 48rem / 64rem / 80rem) */ --bp-sm: 23.4375rem; /* 375px — base mobile, nessuna media query */ --bp-md: 48rem; /* 768px */ --bp-lg: 64rem; /* 1024px */ --bp-xl: 80rem; /* 1280px */ --header-height: 4.5rem; /* 72px */ --mobile-cta-height: 4.5rem; /* 72px barra fissa + safe area gestita a parte */ --logo-width: clamp(7.5rem, 6.257rem + 5.304vw, 10.5rem); /* 120 → 168px */ --tap-target: 2.75rem; /* 44px minimo per ogni elemento cliccabile */ --tap-target-lg: 3.25rem;/* 52px bottoni CTA principali */ /* ------------------------------------------------------------------- Raggi ------------------------------------------------------------------- */ --radius-sm: 0.5rem; /* 8: input, tag, bottoni barra mobile */ --radius-md: 0.875rem; /* 14: card, FAQ, box */ --radius-lg: 1.25rem; /* 20: immagini hero, banda CTA */ --radius-pill: 999px; /* bottoni */ /* ------------------------------------------------------------------- Ombre (tinta ink, mai nero puro) ------------------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(31, 59, 83, 0.08), 0 2px 8px rgba(31, 59, 83, 0.05); --shadow-md: 0 6px 24px rgba(31, 59, 83, 0.10); --shadow-lg: 0 12px 40px rgba(31, 59, 83, 0.14); --shadow-bar: 0 -4px 20px rgba(31, 59, 83, 0.12); /* barra CTA mobile */ /* ------------------------------------------------------------------- Focus ------------------------------------------------------------------- */ --focus-width: 3px; --focus-offset: 3px; --focus-ring: var(--focus-width) solid var(--color-focus); /* ------------------------------------------------------------------- Movimento ------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; /* ------------------------------------------------------------------- Livelli (z-index) ------------------------------------------------------------------- */ --z-base: 1; --z-sticky: 100; /* header */ --z-mobile-cta: 90; /* barra CTA sotto il menu aperto */ --z-menu: 110; /* pannello menu mobile */ --z-skip: 200; /* skip link */ /* ------------------------------------------------------------------- Evoluzione fotocentrica (bz-ux-ui, 01/10/2026) — docs/02-design-system.md §10 Nessun nuovo colore di brand: velo e tinta derivano da ink e dark. Contrasti calcolati sul caso peggiore (pixel bianco sotto il velo). ------------------------------------------------------------------- */ --overlay-text: rgba(31, 59, 83, 0.85); /* velo sotto testo: bianco 7.39:1, light 6.42:1 nel caso peggiore */ --overlay-soft: rgba(31, 59, 83, 0.35); /* SOLO zone senza testo */ --overlay-clear: rgba(31, 59, 83, 0); /* trasparente con la stessa tinta (sfumature senza grigio) */ --color-on-photo: #ffffff; /* titoli e testo su velo */ --color-on-photo-muted: var(--color-light); /* occhiello, breadcrumb, tag su velo. Mai --color-on-ink-muted su foto */ --photo-tint-color: var(--color-dark); /* viraggio .photo--tint (mix-blend-mode: color su foto in scala di grigi) */ --tela-bg: var(--color-ink); /* blocco colore pieno al posto della foto */ --tela-bg-alt: var(--color-dark); /* variante per alternare tele vicine */ --tela-line: rgba(123, 163, 191, 0.28); /* motivo lineare: accent al 28%, decorativo */ /* Hero fotografica: altezza della foto "libera" sopra il testo (mobile/tablet) */ --hero-peek: clamp(10rem, 24vh, 15rem); --hero-photo-h: calc(var(--hero-peek) + 12rem); --hero-min-h: clamp(32rem, 72vh, 44rem); /* desktop >= 1024: pannello + foto */ /* Banda foto: 200px a 375 -> 416px a 1280 */ --photo-band-h: clamp(12.5rem, 6.906rem + 23.87vw, 26rem); /* Gradienti del velo. Nota: --gradient-hero e --hero-photo-h si calcolano su :root; se un componente ridefinisce --hero-peek deve ridichiarare anche questi due. */ --gradient-hero: linear-gradient(180deg, var(--overlay-clear) 0, var(--overlay-soft) calc(var(--hero-peek) * 0.6), var(--overlay-text) var(--hero-peek), var(--color-ink) 100%); --gradient-card: linear-gradient(0deg, var(--overlay-text) 0, var(--overlay-text) 45%, var(--overlay-clear) 80%); --gradient-join: linear-gradient(90deg, var(--color-ink) 0, var(--overlay-clear) 18%); /* desktop: il pannello ink entra nella foto */ /* Hero full-bleed desktop (§10.3 variante, home): velo laterale. Il testo sta nella metà sinistra (finisce entro 50% - 3rem), dove il velo è >= --overlay-text. */ --gradient-hero-side: linear-gradient(90deg, var(--color-ink) 0, var(--color-ink) 15%, var(--overlay-text) 50%, var(--overlay-clear) 66%); /* Rapporti delle foto */ --ratio-card: 1 / 1; /* card disciplina mobile e tablet */ --ratio-card-lg: 4 / 5; /* card disciplina >= 1024 */ --ratio-split: 4 / 3; /* split fotografico, tele delle sezioni */ --ratio-split-tall: 4 / 5; /* split con foto verticale (>= 1024; sotto resta --ratio-split) */ --ratio-team: 4 / 5; /* scheda team, anche su mobile */ } /* svh dove supportato (Safari >= 15.4): evita che la barra del browser mobile cambi l'altezza della hero durante lo scroll */ @supports (height: 1svh) { :root { --hero-peek: clamp(10rem, 24svh, 15rem); --hero-min-h: clamp(32rem, 72svh, 44rem); } } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }