/* ========================================================= effeemmezeta — base + layout (tema classico) Token da theme.json; qui reset minimo, wrap, nav, hero, footer, card. Le utility di firma stanno sotto (theme.css). ========================================================= */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--wp--preset--color--paper,#fff); color:var(--wp--preset--color--ink,#0B0B0B); font-family:var(--wp--preset--font-family--macchina,monospace); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; } img,svg{ display:block; max-width:100%; height:auto; } a{ color:inherit; } /* link di testo (non bottoni): in hover giallo marker SOLO su sfondo scuro; su chiaro restano ink (theme.json) */ :is(.fmz-theme-dark, .has-ink-background-color) a:not(.wp-element-button):hover{ color:var(--wp--preset--color--marker); } .fmz-main{ position:relative; } /* ========================================================= LARGHEZZA — UN SOLO sistema (tema classico, root-padding OFF). .fmz-wrap = colonna vincolata: chrome (nav/footer/banda) + contenuti semplici. .fmz-content = flusso blocchi: vincola OGNI figlio, gestisce wide/full. Mai annidati fra loro. Gutter = --wp--custom--gut. Larghezze = theme.json (contentSize 1100 · wideSize 1440 · full). ========================================================= */ .fmz-wrap{ max-width:var(--fmz-max); margin-inline:auto; padding-inline:var(--wp--custom--gut); } /* tre larghezze da theme.json (settings.layout): normale=contentSize(1100) · estesa=wideSize(1440) · intera=full */ .fmz-content > *{ max-width:var(--wp--style--global--content-size, 1100px); margin-inline:auto; padding-inline:var(--wp--custom--gut); } .fmz-content > .alignwide{ max-width:var(--wp--style--global--wide-size, 1440px); } /* estesa = wideSize (1440) */ .fmz-content > .alignfull{ max-width:none; padding-inline:0; } /* intera = tutta la finestra */ .fmz-content > .alignfull > :not(.alignfull){ max-width:var(--wp--style--global--content-size, 1100px); margin-inline:auto; padding-inline:var(--wp--custom--gut); } /* banda coordinate · dark mode: FISSA in fondo alla finestra, su TUTTE le pagine. Full-bleed (ancorata ai due bordi) con lo stesso gutter dell'header (--fmz-gutter). Trasparente e a filo col footer: si appoggia in fondo, dentro il padding-bottom del footer (che fa da spazio) → nessuna striscia vuota sotto. Colori dai token → dark mode. */ :root{ --fmz-band-fixed-h:56px; } /* Token di easing condivisi — un solo vocabolario per tutte le transition del tema. out-soft: ingressi/reveal (contenuto che prende forma) · out-snap: feedback UI veloce (hover, build-in chrome) · in-out-strong: wipe strutturali (intro, cambio pagina). */ :root{ --fmz-ease-out-soft: cubic-bezier(.22,.61,.36,1); --fmz-ease-out-snap: cubic-bezier(.2,.7,.2,1); --fmz-ease-in-out-strong: cubic-bezier(.76,0,.24,1); } /* Token di durata — ogni token vale ESATTAMENTE un valore già in uso: la tokenizzazione è senza perdita, nessuna durata è stata spostata. Coprono 35 delle 51 durate del foglio. Le restanti restano letterali perché sono quasi-duplicati (.12 .22 .32 .42 .45 .55 .6 .7 .9): accorparle a un token vicino cambierebbe la resa, quindi è una decisione di art direction, non una sostituzione meccanica. Ora che la scala è esplicita, farlo è una riga sola. */ :root{ --fmz-dur-xs: .15s; /* micro-feedback: icone, toggle */ --fmz-dur-sm: .2s; /* feedback UI standard: hover, colori */ --fmz-dur-md: .3s; /* cambi di stato visibili */ --fmz-dur-lg: .4s; /* chrome: banda, header, clip */ --fmz-dur-xl: .5s; /* transizioni ampie: build-in, char */ --fmz-dur-reveal: .7s; /* ingresso dei contenuti (reveal/stagger) */ } /* Token di spostamento — ogni token è un valore già presente, tranne md (vedi sotto). md è l'UNICO ingresso verticale del sistema: reveal, stagger e righe della lista usano tutti lo stesso gesto. Prima erano 20px e 22px, due valori per la stessa cosa, distanti per accumulo e non per scelta: accorpati a 20px in v1.5.7 (il reveal verticale si è quindi accorciato di 2px, cambiamento voluto). Nota: la scala salta lg — i nomi restano stabili perché rinominarli cambierebbe ogni riferimento senza aggiungere nulla. */ :root{ --fmz-shift-xs: 6px; /* build-in del chrome (header) */ --fmz-shift-sm: 10px; /* feedback di hover (riga lista) */ --fmz-shift-md: 20px; /* ingresso verticale: reveal-up, reveal-shift, stagger, righe lista */ --fmz-shift-xl: 28px; /* reveal orizzontale */ --fmz-shift-2xl: 44px; /* risalita di .overlap legata a --p */ } .fmz-band{ position:fixed; left:0; right:0; bottom:0; z-index:50; min-height:var(--fmz-band-fixed-h); background:transparent; color:var(--wp--preset--color--grey-2); } .fmz-band .fmz-wrap{ max-width:none; padding-inline:var(--fmz-gutter); display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:18px; font-family:var(--wp--preset--font-family--macchina); font-size:11px; letter-spacing:.1em; color:inherit; } .fmz-band :is(.fmz-dark, .fmz-lang){ color:inherit; } :is(.fmz-dark, .fmz-lang){ background:none; border:0; font:inherit; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; color:var(--wp--preset--color--grey-2); display:inline-flex; align-items:center; gap:6px; } :is(.fmz-dark, .fmz-lang):hover{ color:var(--wp--preset--color--ink); } /* Sopra una superficie scura l'hover a --ink sarebbe nero su nero. Banda e header sono overlay: il nero sta dietro, non attorno, quindi la classe la mette il JS (initOverDark, hit-test su INVERT) — nessun selettore discendente potrebbe arrivarci. --paper e non #fff perche in dark mode manuale i token si ribaltano e con loro anche il footer: il token resta giusto in entrambi i versi. Nessuna transition: il cambio resta istantaneo. */ .is-over-dark :is(.fmz-dark, .fmz-lang):hover{ color:var(--wp--preset--color--paper); } .fmz-dark--icon{ display:none; width:34px; height:34px; padding:0; justify-content:center; } .fmz-dark svg{ width:18px; height:18px; display:block; } /* toggle lingua (Polylang) — occupa il posto del vecchio toggle grigi e ne eredita la meccanica: copia nella banda (desktop) + copia .fmz-lang--icon nell'header, che compare sotto gli 820px quando la banda sparisce. Mostra la sigla della lingua NON corrente (IT ↔ EN). Deve ribattere il font:inherit della riga sopra → sta dopo, a parità di specificità. */ .fmz-lang{ font-family:var(--wp--preset--font-family--macchina); font-size:11px; text-decoration:none; } .fmz-lang--icon{ display:none; font-size:12px; min-width:34px; height:34px; justify-content:center; } .fmz-band__tools{ display:inline-flex; align-items:center; gap:10px; } /* pagina senza traduzione pubblicata → Polylang non stampa il toggle. Il gap non si applica ai figli mancanti, quindi non resta spazio vuoto; se i tool spariscono tutti il box esce dal flusso. */ .fmz-band__tools:empty{ display:none; } /* v2: banda coordinate/darkmode nascosta sull'hero, compare all'ingresso del contenuto (JS: initHeroBand) */ .fmz-pv2-page .fmz-band{ opacity:0; pointer-events:none; transition:opacity var(--fmz-dur-lg) ease; } .fmz-pv2-page.fmz-hero-passed .fmz-band{ opacity:1; pointer-events:auto; } /* la banda (col suo toggle) è fissa e visibile anche su mobile → niente icona dark duplicata in alto */ .fmz-section{ padding-block:clamp(48px,8vh,110px); } /* titoli — la scala h1–h6 vive in theme.json (elementi). Qui restano SOLO i display speciali (non livelli di titolo semantici): .fmz-display = "giant" (404 / hero) agganciato al preset xx-large (scala unica) .fmz-tagline = voce Amatic (segno) */ .fmz-display{ font-family:var(--wp--preset--font-family--forma); font-weight:800; letter-spacing:-.05em; line-height:.9; font-size:var(--wp--preset--font-size--xx-large); margin:0; } .fmz-tagline{ font-family:var(--wp--preset--font-family--segno); font-weight:700; font-size:clamp(2rem,5vw,3.4rem); line-height:.8; margin:.15em 0 0; } .fmz-eyebrow{ font-family:var(--wp--preset--font-family--macchina); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--wp--preset--color--grey-2); margin:0 0 .4em; } .fmz-lead{ font-family:var(--wp--preset--font-family--macchina); font-size:clamp(14px,1.2vw,16px); line-height:1.75; max-width:60ch; margin:24px 0 0; } /* segno (Amatic) è manoscritto e già stretto: la stretta -.05em di theme.json, pensata per forma, gli chiude le lettere. .fmz-tagline e .fmz-pv2__subtitle non la prendono (non sono tag h*) ed è per questo che si leggono più larghi. Uniformo i titoli a loro. */ :is(h1, h2, h3, h4, h5, h6).has-segno-font-family{ letter-spacing:normal; } /* nav — 3 zone: brand (sx) · menu principale (centro) · quick (dx). Full-bleed come la banda coord: max-width:none + stesso gutter (--wp--custom--gut) → stessi due bordi. */ .fmz-nav{ position:sticky; top:0; z-index:60; background:transparent; transition:background var(--fmz-dur-md) ease; } .fmz-nav .fmz-wrap{ max-width:none; padding-inline:var(--fmz-gutter); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; min-height:64px; } .fmz-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; justify-self:start; } .fmz-brand__avatar{ width:34px; height:34px; border-radius:50%; border:2px solid var(--wp--preset--color--ink); object-fit:cover; display:block; } .fmz-brand__name{ font-family:var(--wp--preset--font-family--macchina); font-size:12px; letter-spacing:.12em; text-transform:uppercase; } .fmz-nav__primary{ justify-self:center; } .fmz-nav__primary ul{ list-style:none; display:flex; align-items:center; gap:.55em; margin:0; padding:0; font-family:var(--wp--preset--font-family--macchina); font-size:12px; letter-spacing:.12em; text-transform:uppercase; } .fmz-nav__primary li{ display:flex; align-items:center; } .fmz-nav__primary li:not(:last-child)::after{ content:"."; margin-left:.55em; color:var(--wp--preset--color--grey-2); } .fmz-nav__primary a{ text-decoration:none; } .fmz-nav__quick{ display:flex; align-items:center; justify-self:end; } /* riga, centrata: CONTATTAMI + tools (icone dark/grey su mobile) non si impilano */ .fmz-nav__quick ul{ list-style:none; display:flex; align-items:center; gap:16px; margin:0; padding:0; font-family:var(--wp--preset--font-family--macchina); font-size:12px; letter-spacing:.1em; text-transform:uppercase; } /* voce Contatti come bottone: aggiungi la classe CSS "evi" alla voce di menu */ .fmz-nav__quick .evi a, .fmz-mobile__quick .evi a{ display:inline-block; border:0; background:var(--wp--preset--color--marker); color:var(--wp--preset--color--ink); font-size:13px; letter-spacing:.04em; padding:14px 22px; text-decoration:none; transition:background var(--fmz-dur-sm), color var(--fmz-dur-sm); } .fmz-nav__quick .evi a:hover, .fmz-mobile__quick .evi a:hover{ background:var(--wp--preset--color--ink); color:var(--wp--preset--color--paper); } /* Il fondo del bottone è il token marker, che NON si ribalta in dark: resta giallo. Con color:var(--ink) il testo diventava però bianco su giallo (1.31:1). L'ink qui va fissato al valore chiaro-tema, non alla variabile. Stesso motivo del marker. */ :root[data-dark] :is(.fmz-nav__quick, .fmz-mobile__quick) .evi a{ color:#0B0B0B; } /* hamburger */ .fmz-nav__burger{ display:none; grid-column:3; justify-self:end; width:34px; height:34px; background:none; border:0; cursor:pointer; position:relative; } .fmz-nav__burger span, .fmz-nav__burger::before, .fmz-nav__burger::after{ content:""; position:absolute; left:6px; right:6px; height:2px; background:var(--wp--preset--color--ink); transition:transform var(--fmz-dur-md), opacity var(--fmz-dur-sm); } .fmz-nav__burger::before{ top:11px; } .fmz-nav__burger span{ top:16px; } .fmz-nav__burger::after{ top:21px; } body.menu-open .fmz-nav__burger::before{ transform:translateY(5px) rotate(45deg); } body.menu-open .fmz-nav__burger span{ opacity:0; } body.menu-open .fmz-nav__burger::after{ transform:translateY(-5px) rotate(-45deg); } /* pannello mobile */ .fmz-mobile{ display:none; position:fixed; inset:64px 0 auto 0; z-index:55; background:var(--wp--preset--color--paper); border-bottom:2px solid var(--wp--preset--color--ink); transform:translateY(-120%); visibility:hidden; transition:transform .32s ease, visibility .32s; } body.menu-open .fmz-mobile{ transform:none; visibility:visible; } .fmz-mobile ul{ list-style:none; margin:0; padding:16px var(--wp--custom--gut); display:flex; flex-direction:column; gap:6px; font-family:var(--wp--preset--font-family--forma); font-weight:800; font-size:1.6rem; letter-spacing:-.02em; } .fmz-mobile a{ text-decoration:none; } .fmz-mobile__quick ul{ font-family:var(--wp--preset--font-family--macchina); font-weight:400; font-size:13px; letter-spacing:.1em; text-transform:uppercase; border-top:2px solid var(--wp--preset--color--ink); } @media(max-width:820px){ .fmz-nav .fmz-wrap{ grid-template-columns:1fr auto auto; } .fmz-nav__primary{ display:none; } .fmz-nav__quick .menu-item{ display:none; } /* nel quick resta solo il toggle lingua/dark: le voci passano nel pannello */ .fmz-nav__burger{ display:block; } .fmz-mobile{ display:block; } .fmz-band{ display:none; } /* mobile: le coordinate spariscono (banda nascosta) */ :is(.fmz-dark--icon, .fmz-lang--icon){ display:inline-flex; } /* dark-mode + lingua tornano accanto all'hamburger */ } /* dark mode manuale (bottone ◐): ribalta le variabili su TUTTO il sito */ :root[data-dark]{ --wp--preset--color--paper:#0B0B0B; --wp--preset--color--ink:#FFFFFF; --wp--preset--color--grey-1:#2a2a28; } /* tema PER-SEZIONE, guidato dallo SCROLL (feeling locomotive): niente trigger binario. Il colore INTERPOLA con --p (0→1) man mano che la sezione entra — il JS (initScrollProgress) aggiorna --p in base alla posizione. Ribalta --ink/--paper/--grey-1 LOCALMENTE via color-mix, così tutto il contenuto della sezione si adatta da solo, in modo continuo. */ .fmz-theme-dark, .fmz-theme-light{ --p:0; background-color:var(--wp--preset--color--paper); color:var(--wp--preset--color--ink); } /* sfondo + grey-1: interpolazione FLUIDA con --p. testo (--ink): commuta in una banda strettissima attorno a --p=0.5 (calc(...*2500%) = ~0.04 di progresso) → mai grigio-su-grigio, sempre leggibile, mentre lo sfondo resta liscio. */ .fmz-theme-dark{ --wp--preset--color--paper: color-mix(in srgb, #FFFFFF, #0B0B0B calc(var(--p) * 100%)); --wp--preset--color--ink: color-mix(in srgb, #0B0B0B, #FFFFFF calc((var(--p) - 0.44) * 3500%)); --wp--preset--color--grey-1: color-mix(in srgb, #E4E3DF, #2A2A28 calc(var(--p) * 100%)); } .fmz-theme-light{ --wp--preset--color--paper: color-mix(in srgb, #0B0B0B, #FFFFFF calc(var(--p) * 100%)); --wp--preset--color--ink: color-mix(in srgb, #FFFFFF, #0B0B0B calc((var(--p) - 0.44) * 3500%)); --wp--preset--color--grey-1: color-mix(in srgb, #2A2A28, #E4E3DF calc(var(--p) * 100%)); } @media (prefers-reduced-motion:reduce){ /* niente scroll: stato finale diretto */ .fmz-theme-dark{ --wp--preset--color--paper:#0B0B0B; --wp--preset--color--ink:#FFFFFF; --wp--preset--color--grey-1:#2A2A28; } .fmz-theme-light{ --wp--preset--color--paper:#FFFFFF; --wp--preset--color--ink:#0B0B0B; --wp--preset--color--grey-1:#E4E3DF; } } /* hero: riempie la prima schermata (schermo − nav) → banda alla piega. Non mettere min-height inline sul blocco: ci pensa questa classe. */ .fmz-hero{ min-height: calc(100svh - var(--fmz-nav-h, 64px)); } .fmz-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:40px; } /* ========================================================= fmz/list — archivio progetti (tabella) ========================================================= */ .fmz-projects{ width:100%; border-collapse:collapse; border-top:2px solid var(--wp--preset--color--ink); } /* intestazioni colonna (Titolo/Ruolo/Cliente) nascoste alla vista, restano per gli screen reader; la linea in alto la dà il border-top della tabella */ .fmz-projects thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .fmz-projects thead th{ font-family:var(--wp--preset--font-family--macchina); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--wp--preset--color--grey-2); font-weight:400; text-align:left; padding:0 16px 12px 0; border-bottom:2px solid var(--wp--preset--color--ink); } .fmz-projects tbody th, .fmz-projects tbody td{ text-align:right; font-weight:400; vertical-align:middle; padding:12px 0px 12px 0; border-bottom:2px solid var(--wp--preset--color--ink); } .fmz-projects tbody td{ font-family:var(--wp--preset--font-family--macchina); font-size:13px; } .fmz-projects__title{ width:100%; } /* il titolo prende lo spazio → la colonna meta è spinta al bordo destro */ .fmz-projects__title a{ display:flex; align-items:baseline; text-decoration:none; color:var(--wp--preset--color--ink); } /* colonna titolo (sinistra): solo il titolo PROTAGONISTA */ .fmz-projects__name{ display:inline-block; font-family:var(--wp--preset--font-family--forma); font-weight:700; letter-spacing:-.02em; line-height:.95; font-size:clamp(1.5rem,2.6vw,2.1rem); transition:transform var(--fmz-dur-md) var(--fmz-ease-out-snap); } /* in hover il titolo NON cambia colore: trasla ~10px a destra. Il colore è un evento solo sull'immagine-anteprima. */ .fmz-projects tbody tr:hover .fmz-projects__name{ transform:translateX(var(--fmz-shift-sm)); } /* metadati leggeri (destra): blocco unico allineato a destra — "RUOLO · CON " + tipo colorato sotto */ .fmz-projects__cliente{ color:var(--wp--preset--color--grey-2); font-size:12px; } .fmz-projects tbody td.fmz-projects__meta{ color:var(--wp--preset--color--grey-2); font-size:12px; line-height:1.5; text-align:right; min-width:clamp(240px,28vw,420px); } .fmz-projects__role{ display:block; text-transform:uppercase; letter-spacing:.08em; } /* blocco meta a DESTRA (allineato a destra via .fmz-projects__meta): attività (mono grigio) + tipo colorato sotto il ruolo */ .fmz-projects__attivita{ display:block; font-family:var(--wp--preset--font-family--macchina); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--wp--preset--color--grey-2); } .fmz-projects__tipo{ display:block; margin-top:5px; font-family:var(--wp--preset--font-family--macchina); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--fmz-accent); transition:color var(--fmz-dur-lg) var(--fmz-ease-out-soft); } .fmz-projects__empty td{ font-family:var(--wp--preset--font-family--macchina); color:var(--wp--preset--color--grey-2); } @media(max-width:700px){ .fmz-projects, .fmz-projects tbody, .fmz-projects tr, .fmz-projects th, .fmz-projects td{ display:block; } .fmz-projects tbody tr{ border-bottom:2px solid var(--wp--preset--color--ink); padding:16px 0; } .fmz-projects tbody th, .fmz-projects tbody td{ border:0; padding:2px 0; } .fmz-projects tbody td[data-label]::before{ content:attr(data-label) " — "; color:var(--wp--preset--color--grey-2); font-size:11px; text-transform:uppercase; letter-spacing:.08em; } /* colonna destra allineata a sinistra sotto il titolo (niente più indice da scavalcare). Stessa specificità della regola desktop, ma più in basso nel sorgente → vince entro 700px. */ .fmz-projects tbody td.fmz-projects__meta{ text-align:left; } } /* anteprima progetto: pannello che segue il cursore con smorzamento, in hover su una riga (solo mouse). Fa parte di fmz.js: initCursor (stesso loop rAF/lerp del cursore custom — initListPreview è stato consolidato qui, niente secondo observer/listener). pointer-events: none → non intercetta il click, le righe restano link diretti. Immagine pulita, niente bordo. Rapporto FISSO 16:9 (le cover desktop sono tutte 1024×576, dimensione "large" di WordPress) — sorgente a piena risoluzione ('full' in fmz_project_row, non 'large') per non sgranare nel pannello ingrandito. Due layer immagine sovrapposti (.fmz-list-preview__img) = cross-dissolve vero: quando cambia riga i due fanno fade contemporanea, non in sequenza. Con prefers-reduced-motion: mai .is-follow → resta fermo, centrato, solo fade (comportamento di prima: meno codice da mantenere di un terzo layout dedicato). */ .fmz-list-preview{ display:none; } @media (hover:hover) and (pointer:fine){ .fmz-list-preview{ position:fixed; top:0; left:0; z-index:70; display:block; margin:0; width:clamp(320px,35vw,480px); aspect-ratio:16/9; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .45s var(--fmz-ease-out-soft); will-change:opacity, transform; } .fmz-list-preview__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; filter:grayscale(1) contrast(1.02); transition:opacity var(--fmz-dur-md) ease, filter var(--fmz-dur-xl) ease; /* cross-dissolve fra due progetti + greyscale→colore */ } .fmz-list-preview__img.is-active{ opacity:1; } .fmz-list-preview.is-visible{ opacity:1; } .fmz-list-preview.is-visible .fmz-list-preview__img{ filter:grayscale(0); } /* ferma/centrata: reduced-motion, o se initCursor non parte (niente hover:hover reale) */ .fmz-list-preview:not(.is-follow){ top:50%; left:50%; transform:translate(-50%,-50%) scale(.98); transition:opacity .45s var(--fmz-ease-out-soft), transform .55s var(--fmz-ease-out-soft); } .fmz-list-preview:not(.is-follow).is-visible{ transform:translate(-50%,-50%) scale(1); } } /* reduced-motion: comparsa/uscita istantanea, nessuna transizione né scale */ @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){ .fmz-list-preview, .fmz-list-preview.is-visible{ transform:translate(-50%,-50%) scale(1); transition:none; } .fmz-list-preview__img{ transition:none; } } /* riga coperta dal pannello: il titolo si smorza a grigio, le altre restano piene — solo mentre il pannello è attivo (JS aggiunge/toglie .is-previewing sul wrap). */ .fmz-projects-wrap.is-previewing .fmz-projects__name{ color:var(--wp--preset--color--grey-2); transition:color var(--fmz-dur-md) var(--fmz-ease-out-soft); } .fmz-projects-wrap.is-previewing tr.is-preview-active .fmz-projects__name{ color:var(--wp--preset--color--ink); } /* ========================================================= Singolo progetto — spec sheet + cover ========================================================= */ /* spec sheet: nessuno sfondo, divisori 2px solid, solo token del design system */ .fmz-project__spec{ margin:0; font-family:var(--wp--preset--font-family--macchina); font-size:var(--wp--preset--font-size--small); border-top:2px solid var(--wp--preset--color--ink); } .fmz-project__row{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:2px solid var(--wp--preset--color--ink); } .fmz-project__row .k{ color:var(--wp--preset--color--grey-2); } .fmz-project__row .v{ margin:0; text-align:right; color:var(--wp--preset--color--ink); } .fmz-project__row .v a{ color:inherit; text-decoration:none; } .fmz-project__row .v a:hover{ color:var(--fmz-accent); } /* cover in griglia (constrained via .fmz-wrap), poi the_content coi blocchi */ .fmz-project__cover{ margin-block:clamp(48px,8vh,110px); } .fmz-project__cover img{ display:block; width:100%; height:auto; } /* Navigazione progetto singolo: torna ai progetti + successivo (ciclo), in griglia. */ .fmz-project-nav{ margin-block:clamp(48px,8vh,96px); } .fmz-project-nav__row{ display:grid; grid-template-columns:1fr 1fr; align-items:baseline; gap:var(--wp--preset--spacing--40); } .fmz-project-nav__links{ justify-self:end; text-align:right; } /* il nome del progetto successivo è un nome di progetto: prende la voce della griglia (forma), non quella del corpo del testo. Stessi valori di .fmz-projects__name, corpo più contenuto perché qui è un piede pagina e non una lista. */ .fmz-project-nav__links a{ font-family:var(--wp--preset--font-family--forma); font-weight:700; letter-spacing:-.02em; line-height:.95; font-size:clamp(1.15rem, 2vw, 1.6rem); } .fmz-project-nav__links a{ display:inline-block; transition:transform var(--fmz-dur-md) var(--fmz-ease-out-snap); } .fmz-project-nav__links a:hover{ transform:translateX(var(--fmz-shift-sm)); } /* .fmz-sticky — utility riutilizzabile (anche su blocchi/colonne Gutenberg): aggancia l'elemento in cima (sticky top:0) e lo lascia coprire dal contenuto successivo, che deve avere position:relative + z-index:1 + sfondo pieno. ⚠ Richiede che NESSUN antenato abbia overflow hidden/auto/scroll (per questo il body usa overflow-x:clip, non hidden). */ .fmz-sticky{ position:sticky; top:0; z-index:0; } /* mobile: niente sticky (hero + colonne due-colonne dei case study) → tutto in flusso normale. Un punto solo. */ @media(max-width:820px){ .fmz-sticky{ position:static; } } /* ========================================================= Progetto (single-progetto.php, default) — TESTO sticky (fermo), IMMAGINE che sale sopra. Riusa: split · scale · stagger · is-style-fmz-eyebrow · segno · --fmz-accent. Titolo: fit-to-width JS. ========================================================= */ /* blocco testo (occhiello+titolo+sottotitolo): STICKY top:0 (resta fermo). ALTO QUANTO IL CONTENUTO (niente min-height:100vh → nessun vuoto bianco prima dell'immagine). z-index:0 → l'immagine gli sale sopra. Stacco dall'header = margin-top occhiello (spacing--50). Flex column → i margini non collassano. */ .fmz-pv2__head{ display:flex; flex-direction:column; padding-inline:var(--fmz-gutter); } .fmz-pv2__tipo{ color:var(--fmz-accent); transition:color var(--fmz-dur-lg) var(--fmz-ease-out-soft); } /* titolo: fit-to-width REALE via JS (fmz.js: initFitTitle) → font-size dal JS, una sola riga (nowrap sotto .fmz-js). La clamp è solo fallback pre-JS/no-JS. forma 800, allineato al --fmz-gutter. */ .fmz-pv2__title{ margin:0; font-family:var(--wp--preset--font-family--forma); font-weight:800; letter-spacing:-.04em; line-height:.9; font-size:clamp(3rem, 9vw, 8rem); } .fmz-js .fmz-pv2__title{ white-space:nowrap; } /* sottotitolo (ACF): segno, x-large, 700; col marker **parola** → */ .fmz-pv2__subtitle{ font-family:var(--wp--preset--font-family--segno); font-size:var(--wp--preset--font-size--x-large); font-weight:700; font-style:normal; line-height:.9; margin:var(--wp--preset--spacing--20) 0 0; } /* immagine: SALE sopra il testo sticky (z-index:1, sfondo pieno che copre). A colori (no greyscale), full-width col gutter del sito, ALTEZZA NATURALE piena (verticale/orizzontale), non compressa nel 100vh. */ .fmz-pv2__media{ position:relative; z-index:1; margin:var(--wp--preset--spacing--60) 0 clamp(56px,10vh,140px); padding-inline:var(--fmz-gutter); background:transparent; } /* container trasparente (solo il foglio/contenuto è bianco) + margine proporzionato sotto */ .fmz-pv2__media picture{ display:block; } /* cover: riempie come cover ad altezza fissa (desktop ~75vh, mobile ~65vh). Verticali intere → nel the_content. */ .fmz-pv2__cover{ display:block; width:100%; height:95vh; object-fit:cover; } @media(max-width:820px){ .fmz-pv2__cover{ height:85vh; } } /* nav prev/next: full-width col --fmz-gutter (come header/footer), ancorata ai bordi. Scoped a .fmz-pv2 → single-progetto.php resta invariato. */ .fmz-pv2 .fmz-project-nav__row{ max-width:none; padding-inline:var(--fmz-gutter); } /* ========================================================= 404 — numero grande centrale, messaggio, ritorno ========================================================= */ .fmz-404{ min-height:calc(100svh - var(--fmz-nav-h,64px)); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:clamp(24px,4vh,44px); padding:clamp(48px,10vh,120px) var(--wp--custom--gut); } .fmz-404__num{ margin:0; } .fmz-404__text{ font-family:var(--wp--preset--font-family--macchina); font-size:clamp(14px,1.2vw,17px); line-height:2; color:var(--wp--preset--color--ink); } .fmz-404__text p{ margin:0; } /* ========================================================= Cursore "segno" — editoriale: UN elemento che cambia FORMA per stato. Stile qui, logica in fmz.js (initCursor). Solo mouse; caret nativo sui campi. Estendibile: nuovi stati testuali via data-cursor (mappa LABELS nel JS). default = punto · cliccabile = "+" tipografico · click = "×" · data-cursor = testo. ========================================================= */ @media (hover:hover) and (pointer:fine){ html.fmz-cursor-on, html.fmz-cursor-on *{ cursor:none; } html.fmz-cursor-on input, html.fmz-cursor-on textarea, html.fmz-cursor-on select, html.fmz-cursor-on [contenteditable]{ cursor:auto; } .fmz-cursor{ position:fixed; top:0; left:0; z-index:9999; width:0; height:0; color:var(--wp--preset--color--ink); pointer-events:none; will-change:transform; transition:color var(--fmz-dur-sm) ease; } .fmz-cursor.is-invert{ color:var(--wp--preset--color--paper); } /* su superfici scure */ .fmz-cursor__dot, .fmz-cursor__plus, .fmz-cursor__label{ position:absolute; top:0; left:0; translate:-50% -50%; transition:opacity var(--fmz-dur-xs) ease, scale var(--fmz-dur-xs) ease; } /* default: punto */ .fmz-cursor__dot{ width:4px; height:4px; background:currentColor; border-radius:50%; } /* cliccabile: "+" tipografico (due linee 2px, come i divisori del sistema) */ .fmz-cursor__plus{ width:12px; height:12px; opacity:0; scale:.35; } .fmz-cursor__plus::before, .fmz-cursor__plus::after{ content:""; position:absolute; top:50%; left:50%; background:currentColor; translate:-50% -50%; } .fmz-cursor__plus::before{ width:12px; height:2px; } .fmz-cursor__plus::after{ width:2px; height:12px; } /* stati testuali (drag e futuri): solo testo mono, nessun badge */ .fmz-cursor__label{ font-family:var(--wp--preset--font-family--macchina); font-size:10px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; opacity:0; scale:.8; } /* --- transizioni di stato --- */ .fmz-cursor[data-state="link"] .fmz-cursor__dot{ opacity:0; scale:.3; } .fmz-cursor[data-state="link"] .fmz-cursor__plus{ opacity:1; scale:1; } .fmz-cursor.has-label .fmz-cursor__dot, .fmz-cursor.has-label .fmz-cursor__plus{ opacity:0; scale:.3; } .fmz-cursor.has-label .fmz-cursor__label{ opacity:1; scale:1; } .fmz-cursor[data-state="text"], .fmz-cursor[data-state="hidden"]{ opacity:0; } /* click: il "+" ruota di 45° → "×" */ .fmz-cursor[data-state="link"].is-down .fmz-cursor__plus{ rotate:45deg; transition:rotate .12s ease, opacity var(--fmz-dur-xs) ease, scale var(--fmz-dur-xs) ease; } } /* accessibilità: cambio stato immediato, niente easing né rotazione */ @media (prefers-reduced-motion:reduce){ .fmz-cursor__dot, .fmz-cursor__plus, .fmz-cursor__label{ transition:none; } .fmz-cursor[data-state="link"].is-down .fmz-cursor__plus{ rotate:0deg; transition:none; } } /* pull magnetico: opt-in via .fmz-magnetic (Avanzate → Classi CSS aggiuntive su bottoni/link), stesso loop rAF del cursore (fmz.js: initCursor). Il JS aggiorna transform ad ogni frame mentre il cursore è nel raggio; la transition qui ammorbidisce il cambio fra un frame e l'altro. */ .fmz-magnetic{ transition:transform var(--fmz-dur-sm) var(--fmz-ease-out-snap); will-change:transform; } @media (prefers-reduced-motion:reduce){ .fmz-magnetic{ transform:none !important; transition:none !important; } } /* footer */ .fmz-footer{ background:var(--wp--preset--color--ink); color:var(--wp--preset--color--paper); padding-block:clamp(56px,10vh,130px); } /* footer full-bleed: bordo a bordo con lo STESSO gutter dell'header (--fmz-gutter) → header e footer condividono i due bordi */ .fmz-footer .fmz-wrap{ max-width:none; padding-inline:var(--fmz-gutter); } .fmz-footer__social ul{ list-style:none; display:flex; gap:18px; justify-content:center; padding:0; margin:28px 0 0; font-family:var(--wp--preset--font-family--macchina); font-size:12px; } .fmz-footer__end{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:clamp(40px,7vh,80px); font-family:var(--wp--preset--font-family--macchina); font-size:11px; color:var(--wp--preset--color--grey-2); } /* intro + transizione (frame-logo) */ /* ========================================================= effeemmezeta — utilities di sistema (prefisso fmz) B/N pulito · accenti Munari (testo ink) · 2px solid La firma vive qui: marker, colore-evento, frame, reveal, segni. ========================================================= */ :root{ /* accento attivo: cambia con data-color (colore = evento) */ --fmz-accent: var(--wp--preset--color--illustrazione); --fmz-nav-h: 64px; --fmz-max: var(--wp--style--global--wide-size, 1440px); /* rail "estesa" = wideSize di theme.json (unica fonte) */ --fmz-gutter: clamp(10px,1.6vw,18px); /* padding laterale del chrome: header · banda · footer (stessi due bordi) */ } [data-color="illustrazione"]{ --fmz-accent: var(--wp--preset--color--illustrazione); } [data-color="web"]{ --fmz-accent: var(--wp--preset--color--web); } [data-color="grafica"]{ --fmz-accent: var(--wp--preset--color--grafica); } html{ scroll-behavior:smooth; } /* Lenis attivo (classe che si applica da sola su quando lo script gira, cioè mai con prefers-reduced-motion): lo smooth-scroll nativo va spento, altrimenti i due si accavallano. Con reduced-motion Lenis non parte mai → resta lo smooth-scroll nativo di riga 396. */ html.lenis.lenis-smooth{ scroll-behavior:auto; } /* i target di ancora (es. #contatti del prefooter) non finiscono sotto la nav sticky */ :where([id]){ scroll-margin-top: calc(var(--fmz-nav-h, 64px) + 16px); } body{ text-rendering:optimizeLegibility; } ::selection{ background:var(--wp--preset--color--marker); color:var(--wp--preset--color--ink); } :where(a):focus-visible, :where(button):focus-visible, :where(.wp-block-button__link):focus-visible{ outline:3px solid var(--fmz-accent); outline-offset:3px; } /* accessibilità: testo per screen reader + skip link rivelato al focus */ .screen-reader-text{ border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; position:absolute; word-wrap:normal !important; } .screen-reader-text:focus{ clip:auto; clip-path:none; width:auto; height:auto; margin:0; padding:12px 20px; position:fixed; left:8px; top:8px; z-index:100000; background:var(--wp--preset--color--paper); color:var(--wp--preset--color--ink); border:2px solid var(--wp--preset--color--ink); font-family:var(--wp--preset--font-family--macchina); font-size:13px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; } /* ---- marker: evidenzia UNA parola (testo ink). Colore via variante (--fmz-hl-c) ---- */ .fmz-hl, .fmz-hl-illustrazione, .fmz-hl-web, .fmz-hl-grafica{ --fmz-hl-c: var(--wp--preset--color--marker); /* default: giallo firma */ background-color:transparent; /* azzera il giallo di default del */ color:inherit; background-image:linear-gradient( var(--fmz-hl-c), var(--fmz-hl-c) ); background-repeat:no-repeat; background-size:100% 0.4em; background-position:0 50%; padding:0 0.06em; box-decoration-break:clone; -webkit-box-decoration-break:clone; } .fmz-hl-illustrazione{ --fmz-hl-c: var(--wp--preset--color--illustrazione); } .fmz-hl-web{ --fmz-hl-c: var(--wp--preset--color--web); } .fmz-hl-grafica{ --fmz-hl-c: var(--wp--preset--color--grafica); } .fmz-js :is(.fmz-hl, .fmz-hl-illustrazione, .fmz-hl-web, .fmz-hl-grafica){ background-size: var(--fmz-hl-p, 0%) 0.4em; } @media (prefers-reduced-motion:reduce){ .fmz-js :is(.fmz-hl, .fmz-hl-illustrazione, .fmz-hl-web, .fmz-hl-grafica){ background-size:100% 0.4em; } } /* ---- marker in dark mode: la banda scende SOTTO le lettere ----------------- A riposo il marker è una banda alta 0.4em posizionata al 50%: attraversa le glifi. In light il testo è ink (#0B0B0B) e il contrasto sul giallo è 14.98:1. Con [data-dark] però --ink si ribalta a #FFFFFF (vedi riga ~168) e il testo marcato diventa bianco su #F2E500 = 1.31:1, molto sotto il 4.5:1 di AA. Succede con tutte e quattro le varianti, non solo col giallo. Soluzione: in dark la banda scende sotto la linea di base e si assottiglia, così non attraversa più il corpo delle lettere. Il testo resta bianco su carbone (19.68:1) e il giallo resta sé stesso come elemento grafico (14.98:1). In light non cambia nulla. NIENTE padding-bottom: estenderebbe l'area dipinta SOTTO il riquadro della parola, e nell'hero del progetto la banda spunterebbe da sotto la cover che le scorre sopra. Lo spostamento è uno shift di 0.44em sul background-position, quindi resta dentro l'ingombro originale. ---- */ :root[data-dark] :is(.fmz-hl, .fmz-hl-illustrazione, .fmz-hl-web, .fmz-hl-grafica){ background-position:0 calc(50% + 0.44em); background-size:100% 0.12em; } /* specificità maggiore della regola .fmz-js qui sopra, altrimenti il valore fisso soffocherebbe --fmz-hl-p e il marker non si disegnerebbe più allo scroll */ :root[data-dark].fmz-js :is(.fmz-hl, .fmz-hl-illustrazione, .fmz-hl-web, .fmz-hl-grafica){ background-size: var(--fmz-hl-p, 0%) 0.12em; } @media (prefers-reduced-motion:reduce){ :root[data-dark].fmz-js :is(.fmz-hl, .fmz-hl-illustrazione, .fmz-hl-web, .fmz-hl-grafica){ background-size:100% 0.12em; } } /* ---- .fmz-nowrap: riga che non va mai a capo (assegnabile da Gutenberg) ----- Serve ai display tarati a mano per toccare i due bordi, tipo il nome in home a 15.5vw: la misura è giusta, ma essendo esattamente al limite basta un pixel di arrotondamento a certe larghezze e l'ultima lettera scende sotto. Col nowrap resta su una riga e al massimo sborda di quel pixel; overflow-x:clip lo trattiene senza generare scorrimento orizzontale di pagina. Si usa clip e non hidden perché clip non crea un contenitore di scorrimento e quindi non rompe gli sticky; overflow-y resta visible per non tagliare le aste con line-height stretti. ---- */ .fmz-nowrap{ white-space:nowrap; overflow-x:clip; overflow-y:visible; } /* ---- divisore di sistema: 2px SOLIDO (default su TUTTI i separatori) ---- */ .fmz-dash, .wp-block-separator{ border:0; border-top:2px solid var(--wp--preset--color--ink); opacity:1; background:none; } .wp-block-separator:not(.is-style-wide):not(.alignwide):not(.alignfull){ max-width:100%; } /* ---- colore = evento: greyscale a riposo, colore in hover ---- */ .fmz-media{ display:block; overflow:hidden; } .fmz-media img, .fmz-media.wp-block-post-featured-image img{ filter:grayscale(1) contrast(1.02); transition:filter var(--fmz-dur-xl) ease, transform .6s ease; } .fmz-media:hover img{ filter:grayscale(0); } /* ---- browser frame per progetti web (barra = accento del tipo) ---- */ .fmz-frame{ border:2px solid var(--wp--preset--color--ink); overflow:hidden; } .fmz-frame::before{ content:""; display:block; height:30px; background: radial-gradient( circle 4px at 16px 15px, rgba(0,0,0,.5) 99%, transparent ), radial-gradient( circle 4px at 31px 15px, rgba(0,0,0,.5) 99%, transparent ), radial-gradient( circle 4px at 46px 15px, rgba(0,0,0,.5) 99%, transparent ), var(--fmz-accent); } /* ========================================================= ANIMATION SYSTEM — utility riutilizzabili, un solo linguaggio. Si attivano dal pannello Gutenberg (Avanzate → Classi CSS aggiuntive). Nessuna utility conosce il contesto: la Hero è solo utility + delay. Solo opacity + translateY: "un'impaginazione che prende forma", non un'animazione. Niente blur, niente scale, niente rotazioni nei reveal. Lo stato nascosto è gated su .fmz-js → senza JS il sito è tutto visibile. L'observer (fmz.js: initReveal) aggiunge .is-in quando l'elemento entra, ma solo dopo il "ready gate" (intro/overlay che scopre la pagina). Nella stessa famiglia, ma guidata dallo scroll invece che da un trigger binario: .fmz-parallax (fmz.js: initParallax) — nessuna regola qui sotto, transform inline via JS, si spegne del tutto con prefers-reduced-motion. ========================================================= */ .fmz-js :is(.reveal, .reveal-up, .reveal-left, .reveal-right, .scale){ opacity:0; transition:opacity var(--fmz-dur-reveal) ease, transform var(--fmz-dur-reveal) var(--fmz-ease-out-soft); } .fmz-js .reveal-up{ transform:translateY(var(--fmz-shift-md)); } .fmz-js .reveal-left{ transform:translateX(var(--fmz-shift-xl)); } /* entra da destra, va verso sinistra */ .fmz-js .reveal-right{ transform:translateX(calc(-1 * var(--fmz-shift-xl))); } /* entra da sinistra, va verso destra */ .fmz-js .scale{ transform:scale(.96); } /* opt-in: i reveal editoriali non scalano */ .fmz-js :is(.reveal, .reveal-up, .reveal-left, .reveal-right, .scale).is-in{ opacity:1; transform:none; } /* .reveal-shift: stessa meccanica e stesso trigger (initReveal → .is-in), ma anima SOLO il transform e non passa MAI da opacity:0. Serve quando il blocco è — o contiene — l'elemento LCP: con opacity:0 l'elemento non viene dipinto e l'LCP slitta alla fine della transizione, che alla prima visita arriva dopo l'intro (misurato: 4,1 s contro 0,5 s, vedi audit/browser-motion-audit.md §3.1.1). Qui l'elemento è dipinto dal primo frame, 22px più in basso, e sale quando il ready gate lo sblocca: l'ingresso resta in cascata con gli altri reveal, l'LCP no. */ .fmz-js .reveal-shift{ transform:translateY(var(--fmz-shift-md)); transition:transform var(--fmz-dur-reveal) var(--fmz-ease-out-soft); } .fmz-js .reveal-shift.is-in{ transform:none; } /* stagger: applicala a un contenitore → OGNI figlio entra quando raggiunge la vista, con cascata tra quelli che entrano nello stesso momento (il ritardo lo mette il JS: initStagger). Vale sia per gruppi corti già in vista sia per griglie/liste lunghe: quelli sotto la piega si rivelano man mano che scorri, non tutti insieme. */ .fmz-js .stagger > *{ opacity:0; transform:translateY(var(--fmz-shift-md)); transition:opacity var(--fmz-dur-reveal) ease, transform var(--fmz-dur-reveal) var(--fmz-ease-out-soft); } .fmz-js .stagger > *.is-in{ opacity:1; transform:none; } /* lista progetti: stagger d'ingresso delle righe — stesso vocabolario del .stagger ma senza la classe .stagger sul (si romperebbe con l'AJAX). JS: initListStagger (primo ingresso in vista) + bulk is-in nel .then del filtro. Stato nascosto gated su .fmz-js → senza JS le righe restano visibili. */ .fmz-js [data-fmz-projects] > tr[data-fmz-img]{ opacity:0; transform:translateY(var(--fmz-shift-md)); transition:opacity var(--fmz-dur-reveal) ease, transform var(--fmz-dur-reveal) var(--fmz-ease-out-soft); } .fmz-js [data-fmz-projects] > tr[data-fmz-img].is-in{ opacity:1; transform:none; } /* delay progressivi — componibili con i reveal per costruire qualsiasi sequenza da Gutenberg */ .fmz-js .delay-01{ transition-delay:.09s; } .fmz-js .delay-02{ transition-delay:.18s; } .fmz-js .delay-03{ transition-delay:.27s; } .fmz-js .delay-04{ transition-delay:.36s; } .fmz-js .delay-05{ transition-delay:.45s; } .fmz-js .delay-06{ transition-delay:.54s; } .fmz-js .delay-07{ transition-delay:.63s; } .fmz-js .delay-08{ transition-delay:.72s; } .fmz-js .delay-09{ transition-delay:.81s; } .fmz-js .delay-10{ transition-delay:.90s; } @media (prefers-reduced-motion:reduce){ .fmz-js :is(.reveal, .reveal-up, .reveal-left, .reveal-right, .scale, .reveal-shift), .fmz-js .stagger > *, .fmz-js [data-fmz-projects] > tr[data-fmz-img]{ opacity:1 !important; transform:none !important; transition:none !important; } } /* split: il testo si compone lettera per lettera (utility, non hero-specific). Applicala a un titolo/parola; il JS (initSplit) avvolge i char e li sfalsa. Contenitore nascosto prima del paint (no flash del testo intero) → .is-split lo sblocca (vuoto) → .is-in fa entrare i char. Solo opacity + micro translateY, no blur. Componibile con delay-0x: sposta l'inizio dell'intera sequenza. */ .fmz-js .split{ opacity:0; } .fmz-js .split.is-split{ opacity:1; } .fmz-js .split .fmz-char{ display:inline-block; opacity:0; transform:translateY(.2em); transition:opacity var(--fmz-dur-xl) ease, transform .55s var(--fmz-ease-out-soft); } .fmz-js .split.is-in .fmz-char{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .fmz-js .split{ opacity:1 !important; } .fmz-js .split .fmz-char{ opacity:1 !important; transform:none !important; transition:none !important; } } /* marker: un segno colorato che si costruisce da sinistra a destra (come un evidenziatore). Per divider, sottolineature, segni grafici, futuri "segni". Applicala a una barra/separatore/ gruppo con sfondo colorato: scala da 0 a piena larghezza, ancorata a sinistra. transition in longhand → delay-0x resta componibile (non azzera transition-delay). */ .fmz-js .marker{ transform:scaleX(0); transform-origin:left center; transition-property:transform; transition-duration:.7s; transition-timing-function:var(--fmz-ease-out-soft); } .fmz-js .marker.is-in{ transform:scaleX(1); } @media (prefers-reduced-motion:reduce){ .fmz-js .marker{ transform:none !important; transition:none !important; } } /* overlap: la sezione sale sopra ciò che la precede (Hero → prima sezione), ma il rialzo è legato allo SCROLL (feeling locomotive): parte un filo più bassa e sale in posizione mentre entra — il JS (initScrollProgress) guida --p (0 entrando → 1 a posto). --p:1 di default → senza JS è già a posto. Sfondo paper così copre; bg esplicito del blocco vince. */ .overlap{ --p:1; position:relative; z-index:1; margin-top:calc(-1 * clamp(2.5rem, 5.5vw, 6.5rem)); background:var(--wp--preset--color--paper); transform:translateY(calc((1 - var(--p)) * var(--fmz-shift-2xl))); will-change:transform; } @media (prefers-reduced-motion:reduce){ .overlap{ transform:none; } } /* ========================================================= INTRO — solo prima visita della sessione (flag in sessionStorage, classe .fmz-intro-active dallo head prima del paint). Pannello nero → la cornice si disegna → il marchio (maschera del logo) entra con una brevissima instabilità tipografica → pausa → il pannello sale e scopre la Hero (fmz.js: initIntro → fireReady fa partire le utility della Hero). Reduced-motion la salta del tutto. ========================================================= */ .fmz-intro{ display:none; } .fmz-intro-active .fmz-intro{ display:flex; position:fixed; inset:0; z-index:100000; align-items:center; justify-content:center; background:#0B0B0B; transform:translateY(0); } .fmz-intro.is-leaving{ transform:translateY(-100%); transition:transform .7s var(--fmz-ease-in-out-strong); } .fmz-intro__stage{ width:clamp(240px, 42vh, 460px); aspect-ratio:1; } .fmz-intro__mark{ width:100%; height:100%; overflow:visible; } /* cornice = la linea esterna del LOGO, tracciata da stroke-dashoffset. Spessore in unità locali (il path è dentro un ) → ~2px a video. */ .fmz-intro__frame{ fill:none; stroke:#fff; stroke-width:60; stroke-dasharray:1 1; stroke-dashoffset:1; } .fmz-intro.is-drawing .fmz-intro__frame{ stroke-dashoffset:0; transition:stroke-dashoffset .9s ease; } /* le 12 lettere: bianche, entrano UNA PER UNA con instabilità tipografica (delay dal JS) */ .fmz-intro__letters path{ fill:#fff; opacity:0; transform-box:fill-box; transform-origin:center; } .fmz-intro.is-scramble .fmz-intro__letters path{ animation:fmz-letter-in .42s steps(3) forwards; } @keyframes fmz-letter-in{ 0%{ opacity:0; transform:scaleY(1.12) scaleX(.96); } 40%{ opacity:.35; transform:scaleY(.94) scaleX(1.03); } 70%{ opacity:.8; transform:scaleY(1.03); } 100%{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .fmz-intro{ display:none !important; } } /* Cambio pagina — wipe verticale continuo. Overlay nero fisso (non segue il tema). Solo con JS. Pagina in arrivo (.fmz-transitioning) coperta prima del paint → no flash. */ .fmz-transition{ position:fixed; inset:0; z-index:99999; background:#0B0B0B; transform:translateY(100%); pointer-events:none; } .fmz-js .fmz-transition{ transition:transform .55s var(--fmz-ease-in-out-strong); } .fmz-transitioning .fmz-transition{ transform:translateY(0); } @media (prefers-reduced-motion:reduce){ .fmz-transition{ display:none; } } /* Header — build-in: logo → menu → CTA (fade + translateY, niente bounce) */ .fmz-js [data-fmz-anim="header"] [data-fmz-anim-item]{ opacity:0; transform:translateY(calc(-1 * var(--fmz-shift-xs))); transition:opacity var(--fmz-dur-xl) ease, transform var(--fmz-dur-xl) var(--fmz-ease-out-snap); } .fmz-js [data-fmz-anim="header"].is-in [data-fmz-anim-item]{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .fmz-js [data-fmz-anim="header"] [data-fmz-anim-item]{ opacity:1 !important; transform:none !important; transition:none !important; } } /* brand: solo le parole "Federico Mazzoleni" (.fmz-brand__name) si coprono con un wipe clip-path scrollando in giù e riappaiono scrollando in su; il tondo avatar resta sempre visibile. Direzione rilevata da fmz.js (initHeaderScroll → data-scrolled). Reduced-motion: JS non attiva il toggle. */ .fmz-brand__name{ clip-path:inset(0 0 0 0); transition:clip-path var(--fmz-dur-lg) ease; } .fmz-nav[data-scrolled="down"] .fmz-brand__name{ clip-path:inset(0 100% 0 0); } /* menu centrale: stesso wipe del brand (giù copre, su scopre) — clip sul
    per non toccare la transizione build-in del