/* ============================================================================ MASKAI AGENCY — DESIGN SYSTEM ---------------------------------------------------------------------------- File condiviso da tutte le pagine del sito (index, servizi, portfolio, portfolio/*, chi-siamo, contatti, privacy, terms). DECISIONI (vedi DIRECTION.md + revisioni del founder, 2026-07-02): · Palette "Cobalto": bianchi freddi azzurrati + COBALTO #123fdd come UNICO accento funzionale (CTA, link, focus, label) + ink blu notte #0b1a2c (testo). Il verde signal #7cff9b resta SOLO come materia di marca (marquee, sottolineature .u-signal, accenti su fondo cobalto, logo). Il verde scuro è stato eliminato su richiesta del founder. · Font: Archivo variable (Google Fonts) — display in Expanded Bold (font-stretch 125%), corpo in larghezza normale. · Motion: easing tokens Kowalski, UI < 300ms, reveal 300–700ms, solo transform/opacity, prefers-reduced-motion completo. REGOLE D'USO RAPIDE: · Il verde signal (--green-signal) vive SOLO su superfici scure o come materia grande non testuale (blocchi, marquee, sottolineature spesse). MAI come testo piccolo su bianco. · Il cobalto (--cobalt) è l'accento funzionale su bianco: link, bottoni, focus, label. Niente verde scuro, mai. · Mai nero puro: usare --ink. · Il contenuto con classe .reveal è SEMPRE visibile senza JS: lo stato nascosto esiste solo sotto html.js (script inline nel ). INDICE: 01 Token 02 Reset 03 Base & tipografia 04 Layout 05 Header & nav 06 Menu mobile 07 Bottoni 08 Form 09 Footer 10 Marquee 11 Reveal & motion 12 Componenti di sezione 13 Utility 14 Reduced motion 15 Tema Cobalto (nav pillola) 16 Dettaglio (micro-interazioni) ========================================================================= */ /* ========================================================================== 01 · TOKEN — custom properties ========================================================================= */ :root { /* ---- Colore (fallback hex; override OKLCH nel blocco @supports sotto) -- Tema "Cobalto" (revisione founder): neutri freddi tintati verso il blu, cobalto come colore d'azione, verde signal ammorbidito. */ --white: #f7fbff; /* fondo primario (bianco freddo) */ --paper: #edf6ff; /* off-white azzurrato: sezioni alternate */ --ink: #0b1a2c; /* blu notte: testo primario (16.5:1 su bianco) */ --ink-soft: #43566d; /* testo secondario su bianco (≥ 7:1) */ --surface-dark: #123fdd; /* cobalto: sezioni scure, footer, overlay menu */ --surface-dark-2: #0e34b7; /* pannello rialzato su fondo cobalto */ --line: #d7e6f5; /* hairline su bianco */ --line-dark: rgba(247, 251, 255, 0.22); /* hairline su fondo cobalto */ --green-signal: #7cff9b; /* il verde riconoscibile: SOLO su scuro o come materia grande */ --text-on-dark: #f7fbff; /* testo primario su cobalto (7.2:1) */ --text-on-dark-soft: #c8d8ff; /* testo secondario su cobalto */ --cobalt: #123fdd; /* il colore nuovo: CTA, accenti, visual */ --cobalt-deep: #0a288f; /* hover/active del cobalto */ --mist: #eaf4ff; /* velo azzurro per superfici leggere */ --aqua: #d7fff0; /* accento freddo verde-acqua (raro) */ --red-error: #be2323; /* errori form (6.1:1 su bianco) */ --overlay: rgba(11, 26, 44, 0.55); /* unico overlay ammesso (immagini sotto testo) */ /* ---- Tipografia ---- Una sola famiglia (Archivo variable, asse width 62–125): display = Expanded (font-stretch 125%) Bold/Extrabold, corpo = larghezza normale. 5 taglie, ratio ≥ 1.25, clamp solo display. */ --font-sans: 'Archivo', ui-sans-serif, 'Helvetica Neue', Helvetica, Arial, sans-serif; --size-caption: 0.8125rem; /* 13px — etichette, meta */ --size-body: 1rem; /* 16px — corpo, MAI meno */ --size-lead: 1.25rem; /* 20px — sottotitoli, intro */ --size-h3: 1.5rem; /* 24px — heading minori */ --size-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.625rem); /* 28→42px */ --size-display: clamp(2.5rem, 1.75rem + 3.6vw, 5.25rem); /* 40→84px, sotto il tetto 6rem */ --leading-display: 1.08; --leading-heading: 1.15; --leading-body: 1.6; --tracking-display: -0.02em; /* mai sotto -0.04em */ --tracking-caps: 0.08em; /* etichette ALL-CAPS corte */ /* ---- Spazio (scala 4pt) ---- */ --space-2xs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-s: 0.75rem; /* 12px */ --space-m: 1rem; /* 16px */ --space-l: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 6rem; /* 96px */ --space-section: clamp(4rem, 5vw + 2rem, 7.5rem); /* respiro verticale tra sezioni */ /* ---- Geometria ---- */ --radius-s: 8px; /* bottoni, input */ --radius-m: 14px; /* pannelli, media */ --radius-l: 22px; /* superfici grandi */ --container: 72rem; /* 1152px */ --container-narrow: 46rem; /* prosa lunga */ --header-h: 4.5rem; /* 72px */ --gutter: clamp(1.25rem, 4vw, 2.5rem); /* ---- Motion (charter Kowalski) ---- */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* enter/exit, default UI */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* movimento/morphing on-screen */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* pannelli, menu mobile */ --dur-press: 140ms; /* feedback :active */ --dur-fast: 200ms; /* dropdown, hover strutturali */ --dur-drawer: 420ms; /* menu mobile, pannelli */ --dur-reveal: 600ms; /* reveal on-scroll, hero */ /* ---- Z-index semantico (mai 999/9999) ---- */ --z-dropdown: 100; --z-sticky: 200; /* header */ --z-backdrop: 300; --z-modal: 400; /* menu mobile fullscreen */ --z-toast: 500; --z-tooltip: 600; } /* Override percettivi per i browser che supportano OKLCH */ @supports (color: oklch(50% 0.1 150)) { :root { --white: oklch(0.985 0.012 245); --paper: oklch(0.955 0.025 238); --ink: oklch(0.22 0.05 253); --ink-soft: oklch(0.43 0.045 250); --surface-dark: oklch(0.43 0.23 263); --surface-dark-2: oklch(0.35 0.2 263); --line: oklch(0.9 0.025 235); --line-dark: oklch(0.72 0.08 250 / 0.34); --green-signal: oklch(0.89 0.2 148); --text-on-dark: oklch(0.985 0.012 245); --text-on-dark-soft: oklch(0.84 0.05 252); --cobalt: oklch(0.43 0.23 263); --red-error: oklch(0.52 0.19 27); } } /* ========================================================================== 02 · RESET moderno ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* le ancore (#audit) non finiscono sotto l'header sticky */ scroll-padding-top: calc(var(--header-h) + 1rem); /* Sfondo root VERDE: quando si tira la pagina oltre il bordo (overscroll rubber-band di macOS/iOS) si rivela questo, non più il bianco. Il body (bg bianco) copre comunque tutta la pagina; il verde si vede solo nel rimbalzo in cima. Copre la banda bianca "quando scrolli e porti giù il contenuto". */ background-color: var(--green-signal); } body { min-height: 100svh; line-height: var(--leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } p, h1, h2, h3, h4 { overflow-wrap: break-word; } button { background: none; border: none; padding: 0; cursor: pointer; } ul[class], ol[class] { list-style: none; padding: 0; } :target { scroll-margin-block: calc(var(--header-h) + 1rem); } /* ========================================================================== 03 · BASE & TIPOGRAFIA ========================================================================= */ body { font-family: var(--font-sans); font-size: var(--size-body); color: var(--ink); background: var(--white); } /* La fluid simulation (js/fluid.js) è confinata alla hero-section: il canvas è figlio del contenitore .fluid-host (il hero, o la sezione di testa di ogni pagina), non del body. z:-1 come strato di sfondo del host, sopra il fondo del host ma sotto i suoi contenuti. Mai su testi o card. La griglia grigia di fondo (come nel hero index) è qui, così su TUTTE le pagine la sezione di testa ha griglia + fluido. Su index il selettore .hero (inline, caricato dopo) sovrascrive con il suo sfondo. */ .fluid-host { position: relative; overflow: hidden; /* isolation: crea un contesto di impilamento così il canvas z:-1 dipinge SOPRA lo sfondo-griglia del host (e non dietro). Senza questo il fluido finisce sotto la griglia e non si vede. */ isolation: isolate; background: linear-gradient(to right, rgba(11, 26, 44, 0.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(11, 26, 44, 0.055) 1px, transparent 1px), linear-gradient(180deg, var(--white), var(--mist)); background-size: 54px 54px, 54px 54px, 100% 100%; } /* Pagine interne: la sezione di testa parte da SOTTO l'header trasparente, così la griglia comincia dal top (niente striscia bianca). La home (.hero) gestisce già il proprio pull-up. */ .fluid-host:not(.hero) { margin-top: calc(-1 * var(--header-h)); padding-top: calc(var(--header-h) + var(--space-section)); } .fluid-host > .fluid-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } ::selection { background: var(--green-signal); color: var(--ink); } /* Focus ring globale: mai outline:none senza sostituto */ :focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: 2px; } .on-dark :focus-visible, [data-theme="dark"] :focus-visible { outline-color: var(--green-signal); } h1, h2, h3, h4 { font-weight: 700; line-height: var(--leading-heading); text-wrap: balance; } /* Display: Archivo Expanded — la voce da manifesto. Usare su h1 e titoli di sezione chiave. */ .display, h1 { font-size: var(--size-display); font-stretch: 125%; font-weight: 750; line-height: var(--leading-display); letter-spacing: var(--tracking-display); } h2, .h2 { font-size: var(--size-h2); font-stretch: 118%; font-weight: 720; letter-spacing: -0.015em; } h3, .h3 { font-size: var(--size-h3); font-stretch: 110%; font-weight: 680; } .lead { font-size: var(--size-lead); line-height: 1.5; color: var(--ink-soft); text-wrap: pretty; max-width: 34em; } /* Etichetta corta ALL-CAPS — usarla con parsimonia, MAI su ogni sezione */ .label { font-size: var(--size-caption); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--cobalt); } .on-dark .label { color: var(--green-signal); } /* Prosa lunga (privacy, terms, casi studio) */ .prose { max-width: var(--container-narrow); } .prose p, .prose li { max-width: 65ch; text-wrap: pretty; } .prose p + p { margin-top: var(--space-m); } .prose h2 { margin-top: var(--space-2xl); margin-bottom: var(--space-m); } .prose h3 { margin-top: var(--space-xl); margin-bottom: var(--space-s); } .prose ul, .prose ol { margin: var(--space-m) 0; padding-left: 1.25em; } .prose li + li { margin-top: var(--space-xs); } /* Link nel testo */ a { color: inherit; } .link, .prose a { color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease; } .link:hover, .prose a:hover { color: var(--cobalt-deep); text-decoration-thickness: 2px; } .on-dark .link { color: var(--green-signal); } .on-dark .link:hover { color: var(--text-on-dark); } /* Numeri che cambiano (se mai serviranno) */ .tabular { font-variant-numeric: tabular-nums; } /* ========================================================================== 04 · LAYOUT ========================================================================= */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } /* Sezione standard: respiro verticale fluido */ .section { padding-block: var(--space-section); } /* Sezione a piena altezza (portfolio, hero) — mai height:100vh secco */ .section-full { min-height: 100vh; /* fallback */ min-height: 100dvh; display: grid; align-content: center; padding-block: var(--space-3xl); } /* ————— Hero di pagina (pagine interne) ————— Stessa ALTEZZA su tutte le pagine: mostra SOLO il titolo della pagina. È la prima
di
, quindi diventa il .fluid-host (griglia + fluido + pull-up sotto l'header glassati li fornisce già §fluid-host). Il titolo è ancorato in basso, con la griglia/fluido che respirano sopra. */ .page-hero { display: grid; align-content: end; min-height: 48vh; /* fallback */ min-height: 48dvh; padding-bottom: var(--space-2xl); } /* Titolo e frase CENTRATI (portfolio, servizi, chi siamo, contatti). Centrando si risolve anche il disallineamento ottico che si vedeva a bandiera: il riquadro dei due elementi combaciava, ma l'inchiostro della lettera grande parte più a destra (ogni glifo ha un margine interno che cresce con il corpo), e il titolo sembrava rientrato rispetto alla frase. */ .page-hero .container { display: grid; gap: var(--space-m); justify-items: center; text-align: center; } .page-hero__title { font-size: clamp(3rem, 1.5rem + 7vw, 6.5rem); line-height: 0.98; letter-spacing: var(--tracking-display); } /* 60rem (960px) sta dentro il container (1072px di contenuto): basta a tenere su UNA riga i lead brevi degli hero, senza sfondare la griglia del sito. */ .page-hero__lead { max-width: 60rem; margin-inline: auto; } /* Superfici (opache: il fluido vive solo nel hero, non su queste sezioni) */ .on-dark { background: var(--surface-dark); color: var(--text-on-dark); } .on-dark .lead { color: var(--text-on-dark-soft); } .on-paper { background: var(--paper); } /* Split asimmetrici — collassano a colonna singola sotto 768px */ .split { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: center; } @media (min-width: 768px) { .split { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); } .split--wide { grid-template-columns: 2fr 1fr; } /* contenuto pesante a sinistra */ .split--reverse { grid-template-columns: 1fr 2fr; } } /* Hairline di separazione tra sezioni (alternativa al cambio di fondo) */ .rule { border: 0; border-top: 1px solid var(--line); } .on-dark .rule { border-top-color: var(--line-dark); } /* Skip link accessibile */ .skip-link { position: absolute; left: var(--space-m); top: calc(-1 * var(--space-3xl)); z-index: var(--z-tooltip); padding: var(--space-s) var(--space-m); background: var(--ink); color: var(--text-on-dark); border-radius: var(--radius-s); text-decoration: none; transition: top var(--dur-fast) var(--ease-out); } .skip-link:focus-visible { top: var(--space-m); } /* ========================================================================== 05 · HEADER & NAV STICKY -------------------------------------------------------------------------- Uso:
con .site-nav dentro. JS aggiunge .is-scrolled dopo ~8px di scroll. Trasparente sopra il hero, bianco + hairline quando scrolla. Pagina corrente: aria-current="page". ========================================================================= */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky); height: var(--header-h); background: transparent; border-bottom: 1px solid transparent; transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; } .site-header.is-scrolled { background: var(--white); border-bottom-color: var(--line); } .site-nav { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-l); } .site-nav__logo { display: inline-flex; align-items: center; } .site-nav__logo img { height: 1.75rem; width: auto; } .site-nav__links { display: none; align-items: center; gap: var(--space-xl); } @media (min-width: 900px) { .site-nav__links { display: flex; } } .site-nav__link { position: relative; font-size: 0.9375rem; font-weight: 550; text-decoration: none; color: var(--ink); padding-block: var(--space-xs); /* touch target */ transition: color var(--dur-fast) ease; } .site-nav__link:hover { color: var(--cobalt); } /* Pagina corrente: tratto pieno sotto la voce */ .site-nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cobalt); } .site-nav__actions { display: flex; align-items: center; gap: var(--space-m); } /* Hamburger — visibile solo sotto i 900px */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; align-items: center; border-radius: var(--radius-s); } @media (min-width: 900px) { .nav-toggle { display: none; } } .nav-toggle__bar { display: block; width: 22px; height: 2px; background: currentColor; transition: transform var(--dur-fast) var(--ease-in-out), opacity var(--dur-fast) ease; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== 06 · MENU MOBILE FULLSCREEN -------------------------------------------------------------------------- Uso: