/* hochzeit-v3 — chassis. Tokens from direction.lock.json */
:root{
/* --- palette SCURA (Camera Oscura). Non si tocca: la usano ancora il
loader e l'hero b01, che restano bui apposta (b04 è passata al
chiaro il 17/08). */
--bg: #0B0A09;
--shadow: #1A140E;
--wood: #6B4A2E;
--gold: #C9A050;
--paper: #F2ECE3;
/* --- palette CHIARA (LEGGE-DANIEL-2026-08-17 §L1/L2) --------------------
«Il nero è bello però nella sezione matrimoni troppo scuro» (detto 2×).
Il ground della pagina diventa carta; il nero sopravvive solo come
momento dichiarato. I sette valori sono quelli estratti dal CSS del
build Higgsfield di Daniel — sono i SUOI, non una nostra derivazione. */
--cream: #f7f2e9;
--sand: #e5dcc7;
--line: #d8cdb4;
--gold2: #c8a96e;
--gold-deep: #a5824a;
--ink: #2e2c28;
--muted: #6b6156;
/* La CARTA VERA — le stampe di b05, le polaroid di b09, l'Abzug di b07.
Sono oggetti fisici appoggiati sulla pagina: su fondo crema devono
restare più chiari del fondo, se no la pila sparisce. Separata da
--paper proprio perché in zona chiara --paper cambia mestiere. */
--print: #fffdf8;
/* GROUND UNICO — owner 17/08, screenshot dello stacco sabbia→crema fra
b03 e b04: «il background deve essere SIMILE in tutte le sezioni».
Da qui la sabbia NON è più un fondo di sezione: resta la superficie
degli ELEMENTI (le vaschette delle immagini, le targhette) e, al
massimo, questa velatura. È crema con il 12% di sabbia dentro:
#f7f2e9 → ~#f5efe5, cioè 1,5 punti di luminanza relativa — sotto la
soglia dei 2-3% che l'owner ha fissato, quindi niente gradino. */
--ground-2: color-mix(in srgb, var(--sand) 12%, var(--cream));
/* Testo che, DENTRO una sezione chiara, poggia su un'immagine scura (le
macro della fotobox, la didascalia sul ritratto, il fumetto «Ziehen»
sul girato). `.theme-light` ripunta --paper sull'inchiostro: questi
casi hanno bisogno di un token che NON si ripunti mai. */
--on-dark: #F2ECE3;
/* TYPE SYSTEM v2 — LEGGE §TYPE. DM Serif Display non ha pesi: è 400 e
basta, quindi ogni `font-weight:700` ereditato da Barlow va corretto a
400 o diventa un finto grassetto sintetico. */
--font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
--font-body: "Jost", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
/* scala delle durate — MOTION-HANDOFF-2026-08-13.md §Duration scale */
--d-utility: 100ms;
--d-snap: 250ms;
--d-photo: 400ms;
--d-flow: 800ms;
--d-ambient: 1200ms;
}
/* ---- ZONA CHIARA ----------------------------------------------------
Il flip non riscrive 60 dichiarazioni: RIPUNTA i token semantici dentro
le sezioni marcate `.theme-light` (b03, b05, b06, b07, b09 e l'overlay
del menu mobile). Tutto ciò che dentro quelle sezioni diceva
`var(--paper)` diceva in realtà «colore del testo»: qui quel colore
diventa l'inchiostro. Stesso ragionamento per --bg (fondo), --shadow
(superficie rialzata), --gold (accento) e --wood (filetto).
Le ECCEZIONI sono quelle in cui --paper voleva dire carta davvero:
stanno più sotto, sezione per sezione, e usano --print.
Restano DARK e fuori da questo blocco: SOLO il loader e b01 (tutto il
pin). b04 è passata al chiaro il 17/08 (owner: «same color chiaro delle
altre») e col flip è caduto anche il suo dimmer ai bordi. */
.theme-light{
--bg: var(--cream);
--shadow: var(--sand);
--wood: var(--line);
--gold: var(--gold-deep); /* su crema l'oro chiaro non passa AA sul corpo */
--paper: var(--ink);
background:var(--cream);
color:var(--ink);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--cream); }
body{
margin:0;
background:var(--cream);
color:var(--ink);
font-family:var(--font-body);
font-weight:300;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
/* Il fondo dell'hero è la CARTA (18/08): col piano sequenza della reflex è
uscita anche l'unica sezione scura del sito. --bg è già crema, la regola
resta perché l'immagine è cover-fit e ai rapporti estremi scopre i bordi. */
[data-beat="01"]{ background:var(--bg); }
/* ---- Beats ---------------------------------------------------------- */
.beat{
position:relative;
min-height:calc(var(--h,100) * 1svh);
width:100%;
}
/* Sticky pin wrapper — canvases fill it 100%. Beat tasks own the real
ScrollTrigger pin; sticky just keeps the canvas on-screen in the chassis. */
.pin{
position:sticky;
top:0;
/* 100lvh, non svh (legge banda-bianca 18/08): a toolbar Safari collassata
un pin svh lascia scoperta una striscia sotto la scena */
height:100lvh;
width:100%;
overflow:hidden;
}
/* === section:b01-ring — HERO «DER RING» (18/08 sera-3) ================
Il concept di Daniel, col SUO girato (2 clip Seedance web-app montate a
movimento uniforme): mappa Alto Adige di carta → anello che cade, tac →
la camera passa DENTRO l'anello → carta bianca. Poi le stampe vere
atterrano sulla carta (motore Tisch). La sezione è la traccia; il .pin
sopra è la scena incollata. reduced-motion/no-JS: hero statico di carta
come prima (il canvas non parte, lo stage resta a opacity 0). */
[data-beat="01"]{
/* V2 «Il terremoto» (Daniel 17:37): due clip (caduta 6s + crollo 7s),
niente più coda-stampe — il freeze sul legno rustico consegna
direttamente a b03 («si vede subito chi sono»). */
--rdolly:200; /* testa: il volo (svh di corsa) */
/* coda (08/09, owner: «il video hero dopo fine scroll dovrebbe rimanere
e non sparire»): il freeze su Daniel resta incollato e b03 — tirato
su di 100lvh, §b03-cream — gli scorre SOPRA come un foglio di carta.
La coda è quindi ≈ un viewport: 108 svh e non 100 perché su iPhone il
foglio parte a −100lvh (toolbar collassata) e la traccia è in svh —
gli 8 in più coprono il delta, così il foglio non entra prima che il
volo sia finito. Pagina: la coda è RIUSATA dal foglio, non si somma. */
--rdrop:108;
height:calc(100lvh + (var(--rdolly) + var(--rdrop)) * 1svh);
}
@media (min-width:768px){
[data-beat="01"]{ --rdolly:215; --rdrop:104; }
}
.b01ring__scrub{
position:absolute;
inset:0;
z-index:1;
overflow:hidden;
pointer-events:none;
opacity:0; /* il ponte-frame la accende in js/ring.js */
will-change:opacity;
}
.b01ring__scrub > canvas{
display:block;
position:absolute;
inset:0;
width:100%;
height:100%;
}
/* L'USCITA V2: nessun gradient crema — il freeze sul LEGNO RUSTICO è il
piano su cui b03 si appoggia (il suo ::before è l'ultimo frame del
girato: stesso pixel, zero cucitura). */
/* lo stage delle stampe: stessa geometria percentuale del Tisch — riusa
.tprint/.tshadow/.tprint--wide così come sono */
.b01ring__stage{
position:absolute;
left:50%; top:50%;
transform:translate(-50%,-50%);
z-index:2;
width:min(100% - 26px, 1320px, calc(88svh * 1.6));
height:88svh;
pointer-events:none;
opacity:0; /* senza JS le stampe non coprono il titolo */
}
@media (min-width:768px){
.b01ring__stage{ width:min(100% - 96px, 1320px, calc(88svh * 1.6)); }
}
.b01-overlay{ z-index:3; }
/* LE STAMPE VIVE: un loop muted dei film veri dentro la cornice di carta.
Nasce invisibile sopra la foto (che È il poster): compare solo quando
il file esiste ed è decodificato (is-on da js/ring.js) — senza file la
stampa resta una stampa, zero stati rotti. */
.tprint__media .rlive{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity .6s ease;
}
.tprint__media .rlive.is-on{ opacity:1; }
/* mobile (owner 16:40): sottotitolo mezzo trasparente sulle creste —
inchiostro pieno e velo più alto. 22/08: pieno davvero (.86 → 1), che è
la stessa regola dell'alone di carta in §b01-overlay — su un fondo che
cambia di 70 livelli dentro una parola, ogni punto di trasparenza è una
lettera in meno. */
.b01-sub .b01-line{ color:var(--ink); }
@media (max-width:767px){
.b01-holder::after{ height:66%; }
}
@media (prefers-reduced-motion:reduce){
[data-beat="01"]{ height:auto; }
.pin{ height:100svh; }
.b01ring__scrub,
.b01ring__stage{ display:none; }
}
/* HERO DI CARTA (18/08) — al posto del canvas #cv-dive, rimosso col piano
sequenza della reflex. Solo transform: la scala la scrive beats.js. */
.b01-paper{
position:absolute;
inset:0;
display:block;
overflow:hidden;
}
.b01-paper img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transform-origin:50% 60%;
will-change:transform;
backface-visibility:hidden;
}
/* Placeholder structural labels — small + dim so the skeleton is legible */
.scene-label{
position:absolute;
left:clamp(16px, 4vw, 48px);
bottom:clamp(16px, 4vw, 48px);
z-index:2;
font-family:var(--font-mono);
font-size:12px;
letter-spacing:.22em;
color:rgba(242,236,227,.28);
pointer-events:none;
}
/* ---- Beat 01 — dive title overlay ----------------------------------- */
/* Skeleton scene-label was scaffolding; the pinned canvas owns beat01 now */
[data-beat="01"] .scene-label{ display:none; }
.b01-overlay{
position:absolute;
inset:0;
z-index:3;
pointer-events:none;
}
/* Title block — lower-left over the canvas */
.b01-title{
position:absolute;
left:clamp(20px, 5vw, 72px);
bottom:clamp(40px, 9vh, 104px);
max-width:min(92vw, 900px);
will-change:transform, opacity;
}
.b01-kicker{
display:block;
margin:0 0 clamp(10px, 1.4vh, 18px) 2px;
font-family:var(--font-mono);
font-size:clamp(10px, 1.15vw, 13px);
letter-spacing:.34em;
text-transform:uppercase;
color:rgba(46,44,40,.72);
}
.b01-h1{
margin:0;
font-family:var(--font-display);
font-weight:400;
line-height:1.06;
letter-spacing:-.005em;
font-size:clamp(2.2rem, 7.5vw, 6rem);
color:var(--ink);
text-shadow:none;
}
.b01-dot{ color:var(--gold); }
/* Scroll cue — bottom-center hairline + mono label */
.b01-cue{
position:absolute;
left:50%;
bottom:clamp(20px, 3.4vh, 40px);
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
}
.b01-cue__line{
width:1px;
height:clamp(28px, 5vh, 52px);
background:linear-gradient(180deg, transparent, rgba(46,44,40,.55));
}
.b01-cue__label{
font-family:var(--font-mono);
font-size:11px;
letter-spacing:.3em;
color:rgba(46,44,40,.62);
}
@media (max-width:820px){
.b01-title{
left:clamp(16px, 5vw, 32px);
bottom:clamp(64px, 12vh, 120px);
}
.b01-h1{ font-size:clamp(2.6rem, 15vw, 5rem); }
}
/* CTA pill rimossa (owner 2026-07-15) */
/* ---- Loader — osmo dropping-cards-loading-animation (port verbatim) ----
Differenza dal crisp: il guscio `.loader` NON ha più `background`.
Il fondo è un figlio (`[data-loading-background]`) perché deve scendere
con yPercent:100 — se il colore stesse sul guscio non si scoprirebbe
niente. Il fade di `.is-hidden` resta come rete di sicurezza e come
unica uscita nel ramo reduced-motion. */
.loader{
position:fixed;
inset:0;
z-index:100;
pointer-events:none; /* osmo: .loading-container */
transition:opacity .6s ease, visibility .6s ease;
}
.loader.is-hidden{
opacity:0;
visibility:hidden;
pointer-events:none;
}
/* scroll lock while loading (invariato) */
body:has(.loader:not(.is-hidden)){ overflow:hidden; }
/* RESKIN CARTA (owner 18/08 sera-4: «il preloader adattalo al nuovo tema»):
via il buio Camera Oscura — il sipario è CREMA e le card che cadono sono
STAMPE con il bordo di carta, la stessa grammatica di .tprint. Il
meccanismo osmo dropping-cards resta identico. */
.loading-screen{
pointer-events:auto;
color:var(--ink);
justify-content:center;
align-items:center;
width:100%;
height:100%;
display:flex;
position:absolute;
top:0;
left:0;
overflow:clip; /* card ruotate + fondo che scende */
}
.loading-screen__background{
background-color:var(--cream); /* la carta della pagina, non il buio */
width:100%;
height:100%;
position:absolute;
will-change:transform;
}
/* IL LOGO — centrato, rivelato in clip e poi ZOOMATO all'uscita
(loader v3, owner 18/08 sera-4). Il transform lo scrive il JS. */
.loading-screen__logo{
position:absolute;
inset:0;
display:grid;
place-items:center;
will-change:transform, opacity;
pointer-events:none;
}
.loading-screen__logo img{
display:block;
width:clamp(120px, 18vw, 220px);
height:auto;
/* COME IN NAVBAR (owner 18/08 sera-8): logo.webp è oro + scritta BIANCA,
nato per il fondo nero — sul sipario crema la scritta spariva. Stessa
silhouette d'inchiostro della .dsnav (brightness 0 + opacity .82). */
filter:brightness(0) saturate(0);
opacity:.82;
/* stato iniziale del reveal: chiuso a sinistra, il JS lo apre */
clip-path:inset(0 100% 0 0);
}
.loader-pct{
position:absolute;
right:calc(20px + env(safe-area-inset-right, 0px));
bottom:calc(18px + env(safe-area-inset-bottom, 0px));
z-index:3;
font-family:var(--font-mono);
font-size:.78rem;
letter-spacing:.22em;
color:var(--gold-deep); /* su crema l'oro chiaro non passa */
font-variant-numeric:tabular-nums;
pointer-events:none;
will-change:transform, opacity;
}
.loader-pct::after{
content:"%";
margin-left:.28em;
opacity:.55;
}
@media (max-width:820px){
.loader-pct{ font-size:.7rem; right:14px; bottom:14px; }
}
/* nav + hero copy live BEHIND the loader until it finishes (invariato —
cambia solo il selettore: .mega-nav è diventata .dsnav in Fase A2).
Le transizioni di opacity/transform stanno sul guscio in §section:nav
insieme a quella della scala, qui restano solo i due stati. */
.dsnav{
opacity:0;
transform:translateY(-14px);
}
.loader.is-hidden ~ .dsnav{
opacity:1;
transform:none;
}
/* reduced-motion: nessuna card, il fondo sfuma e via.
NB: il build oggi ha `.loader{transition:none}` qui dentro; va tolto,
altrimenti «sfuma» diventa «sparisce di scatto». */
@media (prefers-reduced-motion:reduce){
.loader{ transition:opacity .4s linear, visibility .4s linear; }
.loading-screen__logo img{ clip-path:none; }
.dsnav{ opacity:1; transform:none; transition:none; }
}
/* ==================================================================
SECTION FRAGMENTS (studio-page loop assembly)
================================================================== */
/* === section:nav === */
/* ======================================================================
NAV — FASE A2 (2026-08-17). La meganav (Home / Für Unternehmen / Für
Brautpaare / Kontakt + dropdown + overlay sala buia) è STATA BUTTATA.
Al suo posto, porting osmo — niente scritto a mano:
· desktop ≥769 → osmo `centered-scaling-navigation-bar`
(card centrata con lo strato di fondo separato
.dsnav__bg, header in em, toggle a due barre)
in variante STICKY COMPATTA.
· mobile ≤768 → osmo `scaling-hamburger-navigation`
(il pannello CRESCE dal bottone: il fondo passa
dall'altezza dell'header al 100% e il gruppo da
scale(.15) con origine 100% 0 a scale(1)).
· CTA → osmo `button-062` (bg che scala in hover, onda dei
caratteri; lo split dei char è fatto a mano in
js/meganav.js, SplitText non è nel vendor).
LA SCALA, CIOÈ IL «SCALING» DELLA RICETTA
La ricetta osmo è interamente in em. Quindi la barra non si "compatta"
riscrivendo venti misure: cambia UN font-size (--dsnav-fs) sul guscio e
tutto dentro rimpicciolisce insieme, transizione compresa. È lo stesso
meccanismo dello scaling osmo, agganciato allo scroll invece che al
toggle.
I DUE STATI (LEGGE §NAV)
18/08: l'hero non è più scuro (il piano sequenza della reflex è uscito,
al suo posto il diorama di carta), quindi lo stato «link bianchi sul
buio» non ha più un buio su cui stare. I DUE STATI ora si distinguono
per SCALA e per peso del fondo, non per colore del testo:
· sopra l'hero (b01) → card larga, fondo carta appena velato,
testo --ink, nessuna hairline: la barra galleggia sulla carta.
· dopo l'hero (html.nav-past) → card compatta, fondo crema pieno con
blur leggero, hairline --line sotto.
L'interruttore è la fine di b01 misurata da ScrollTrigger, non un
numero di pixel (js/meganav.js § initNavState).
ALTEZZA DELLA PAGINA: zero (L11). Tutto è position:fixed dentro un
guscio che non entra nel flusso.
====================================================================== */
.dsnav{
/* --- la scala e i colori dello STATO SOPRA L'HERO ------------------ */
--dsnav-fs: 16px;
--dsnav-top: 1.15em;
--dsnav-radius: .75em;
--dsnav-w: min(72em, calc(100vw - 2.5em));
--dsnav-pad: .85em 1em .85em 1.25em;
--dsnav-logo-h: 2.5em;
--dsnav-fg: var(--ink);
--dsnav-fg-dim: var(--muted);
--dsnav-surface: rgba(247,242,233,.55);
--dsnav-hair: transparent;
--dsnav-shadow: none;
position:fixed;
inset:0;
z-index:100;
pointer-events:none; /* il guscio è tutto lo schermo: i figli si riprendono gli eventi */
font-size:var(--dsnav-fs);
color:var(--dsnav-fg);
transition:font-size .55s var(--ease-osmo),
color .35s linear,
opacity .7s var(--ease-osmo),
transform .7s var(--ease-osmo);
}
/* --- STATO «DOPO L'HERO» ---------------------------------------------
La card scende di scala (16px → 14.5px = tutto il resto con lei), il
fondo diventa carta e il testo inchiostro. */
html.nav-past .dsnav{
--dsnav-fs: 14.5px;
--dsnav-top: .6em;
--dsnav-w: min(66em, calc(100vw - 1.6em));
--dsnav-pad: .5em .6em .5em 1em;
--dsnav-logo-h: 2em;
--dsnav-fg: var(--ink);
--dsnav-fg-dim: var(--muted);
/* .92 e non .88: la card attraversa foto scure a tutta larghezza (il
ritratto di b03, i poster di b04) e sotto gli .88 la barra si legge a
due toni — metà carta, metà foto. Il vetro resta, il bicolore no. */
--dsnav-surface: rgba(247,242,233,.92);
--dsnav-hair: var(--line);
--dsnav-shadow: 0 10px 30px rgba(46,44,40,.10);
}
/* A menu aperto la card è carta a prescindere da dove sta la pagina:
dentro ci sono sei righe d'inchiostro, non due glifi sul buio. */
.dsnav[data-navigation-status="active"]{
--dsnav-fg: var(--ink);
--dsnav-fg-dim: var(--muted);
--dsnav-surface: rgba(247,242,233,.97);
--dsnav-hair: var(--line);
--dsnav-shadow: 0 24px 60px rgba(46,44,40,.18);
}
/* scrim osmo (.navigation__dark-bg) — vive solo col menu aperto */
.dsnav__dark-bg{
position:absolute;
inset:0;
background-color:#0B0A09;
opacity:0;
visibility:hidden;
pointer-events:auto;
transition:all .7s cubic-bezier(.5,.5,0,1);
}
.dsnav[data-navigation-status="active"] .dsnav__dark-bg{
opacity:.34;
visibility:visible;
}
/* --- la card (osmo .centered-nav) ------------------------------------ */
.dsnav__card{
position:absolute;
top:var(--dsnav-top);
left:50%;
transform:translateX(-50%);
width:var(--dsnav-w);
display:flex;
flex-flow:column;
align-items:stretch;
border-radius:var(--dsnav-radius);
transition:top .55s var(--ease-osmo),
width .55s var(--ease-osmo);
}
/* strato di fondo separato: è quello che nella ricetta hamburger CRESCE
dal bottone. Qui è il fondo della card e cambia pelle coi due stati. */
.dsnav__bg{
position:absolute;
inset:0;
border-radius:var(--dsnav-radius);
background-color:var(--dsnav-surface);
box-shadow:var(--dsnav-shadow);
transition:background-color .45s linear,
box-shadow .45s linear;
}
/* il blur costa a ogni frame del gesto: si accende solo dove c'è un
puntatore (desktop), sul telefono il fondo è più pieno e basta. */
@media (hover:hover) and (pointer:fine){
html.nav-past .dsnav__bg{
-webkit-backdrop-filter:blur(14px) saturate(125%);
backdrop-filter:blur(14px) saturate(125%);
}
}
/* hairline sotto la barra (bordo inferiore della card) */
.dsnav__bg::after{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height:1px;
background:var(--dsnav-hair);
transition:background-color .45s linear;
}
/* --- header (osmo .centered-nav__header) ------------------------------ */
.dsnav__header{
position:relative;
z-index:1;
display:flex;
align-items:center;
gap:1em;
padding:var(--dsnav-pad);
transition:padding .55s var(--ease-osmo);
}
.dsnav__logo{
pointer-events:auto;
display:flex;
align-items:center;
flex:none;
text-decoration:none;
border-radius:.35em;
/* target ≥44px: l'immagine resta della sua altezza, è la zona
cliccabile a crescere (audit touch-target 390pt, 17/08). */
min-height:44px;
}
.dsnav__logo img{
display:block;
width:auto;
height:var(--dsnav-logo-h);
transition:height .55s var(--ease-osmo), filter .35s linear, opacity .35s linear;
}
/* IL LOGO SULLA CARTA — assets/logo.webp è oro + scritta BIANCA, nato per
il fondo nero: su crema la metà bianca sparisce. Finché non c'è la
variante monocroma, in stato chiaro si legge come silhouette
d'inchiostro (sulla carta i marchi si stampano in un colore solo).
L'opacità .82 è il valore che su #f7f2e9 restituisce ~#2e2c28 = --ink.
TODO — CHIEDERE A DANIEL: logo one-color / versione scura. */
/* 18/08: vale ANCHE sopra l'hero, che ora è carta e non più buio — la metà
bianca del marchio ci sparirebbe dentro. */
.dsnav__logo img,
html.nav-past .dsnav__logo img,
.dsnav[data-navigation-status="active"] .dsnav__logo img{
filter:brightness(0) saturate(0);
opacity:.82;
}
/* --- rail desktop (le quattro ancore) --------------------------------- */
.dsnav__rail{
display:flex;
align-items:center;
gap:.35em;
margin:0 auto 0 1.5em;
padding:0;
list-style:none;
}
.dsnav__rail li{ margin:0; padding:0; }
/* .dsnav__a = osmo .hamburger-nav__a: link + hairline che si disegna
(::after scaleX) e testo che scorre dentro la maschera. */
.dsnav__a{
pointer-events:auto;
position:relative;
display:flex;
align-items:center;
gap:.6em;
padding:.5em .7em;
color:inherit;
text-decoration:none;
border-radius:.3em;
}
.dsnav__a::after{
content:"";
position:absolute;
left:.7em; right:.7em; bottom:.28em;
height:1px;
background:currentColor;
opacity:.25;
transform:scaleX(0);
transform-origin:left center;
transition:transform .6s cubic-bezier(.65,0,0,1);
}
.dsnav__a[aria-current]::after{ transform:scaleX(1); opacity:1; }
@media (hover:hover) and (pointer:fine){
.dsnav__a:hover::after{ transform:scaleX(1); opacity:.45; }
}
.dsnav__a:focus-visible{ outline:2px solid var(--gold2); outline-offset:2px; }
.dsnav__p{
margin:0;
font-family:var(--font-body);
font-weight:400;
font-size:.94em;
letter-spacing:.09em;
text-transform:uppercase;
line-height:1.2;
white-space:nowrap;
}
.dsnav__num{
font-family:var(--font-mono);
font-size:.62em;
letter-spacing:.14em;
color:var(--dsnav-fg-dim);
transition:color .35s linear;
}
/* --- CTA — osmo button-062 skin oro ----------------------------------- */
.dsnav__cta{
--button-062-color: var(--ink);
--button-062-color-background: var(--gold2);
--button-062-color-focus: var(--gold-deep);
--button-062-padding: .95em 1.5em .85em;
min-height:44px; /* target pollice, audit 390pt 17/08 */
--button-062-border-radius: 999px;
--button-062-focus-inset: -.2em;
--button-062-hover-scale: 1.045 1.09;
--button-062-click-scale: .965, .93;
--button-062-ease-click: cubic-bezier(.4,0,.2,1);
--button-062-ease-hover: cubic-bezier(.625,.05,0,1);
--button-062-ease-focus: cubic-bezier(.32,.72,0,1);
pointer-events:auto;
flex:none;
margin-left:auto;
-webkit-user-select:none; user-select:none;
color:var(--button-062-color);
background-color:transparent;
outline-style:none;
padding:0;
line-height:1;
text-decoration:none;
display:inline-grid;
position:relative;
-webkit-tap-highlight-color:transparent;
transition:opacity .3s linear;
}
.dsnav__cta::after{
content:"";
display:block;
position:absolute;
inset:var(--button-062-focus-inset);
border-radius:var(--button-062-border-radius);
transition:box-shadow .3s var(--button-062-ease-focus),
scale .45s var(--button-062-ease-hover);
pointer-events:none;
z-index:1;
}
.dsnav__cta:is(:focus-visible)::after{
box-shadow:0 0 0 .125em var(--button-062-color-focus);
scale:var(--button-062-hover-scale);
}
.dsnav__cta:active .button-062__bg{ transform:scale(var(--button-062-click-scale)); }
.button-062__bg{
grid-area:1/1;
width:100%; height:100%;
padding:0;
border-radius:var(--button-062-border-radius);
background-color:var(--button-062-color-background);
transition:scale .45s var(--button-062-ease-hover),
transform .15s var(--button-062-ease-click);
}
.button-062__inner{
grid-area:1/1;
z-index:1;
display:flex;
align-items:center;
justify-content:center;
gap:.125em;
width:100%; height:100%;
padding:var(--button-062-padding);
pointer-events:none;
overflow:clip; /* l'onda dei char non deve uscire dalla pillola */
}
.button-062__text{
font-family:var(--font-body);
font-weight:500;
font-size:.8em;
letter-spacing:.14em;
text-transform:uppercase;
white-space:nowrap;
}
.button-062__split-char{ display:inline-block; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.dsnav__cta:is(:hover,:focus-visible) .button-062__bg{ scale:var(--button-062-hover-scale); }
}
/* due etichette, una sola pillola: sul telefono il tedesco lungo non ci sta */
.dsnav__cta-short{ display:none; }
/* --- toggle (osmo due barre) ------------------------------------------ */
.dsnav__toggle{
display:none; /* desktop: le voci sono già a vista */
pointer-events:auto;
cursor:pointer;
position:relative;
flex:none;
align-items:center;
justify-content:center;
width:2.75em; height:2.75em;
min-width:44px; min-height:44px; /* target touch (L10) */
padding:0;
border:0;
border-radius:50%;
background-color:rgba(200,169,110,.16);
-webkit-tap-highlight-color:transparent;
transition:background-color .35s linear, transform .7s cubic-bezier(.5,.5,0,1);
}
.dsnav__toggle-bar{
position:absolute;
width:38%;
height:1.5px;
background-color:currentColor;
transition:transform .7s cubic-bezier(.5,.5,0,1);
transform:translateY(-.18em) rotate(.001deg);
}
.dsnav__toggle-bar:nth-child(2){ transform:translateY(.18em) rotate(.001deg); }
@media (hover:hover) and (pointer:fine){
.dsnav__toggle:hover .dsnav__toggle-bar{ transform:translateY(.18em) rotate(.001deg); }
.dsnav__toggle:hover .dsnav__toggle-bar:nth-child(2){ transform:translateY(-.18em) rotate(.001deg); }
}
[data-navigation-status="active"] .dsnav__toggle-bar{ transform:translateY(0) rotate(45deg); }
[data-navigation-status="active"] .dsnav__toggle-bar:nth-child(2){ transform:translateY(0) rotate(-45deg); }
.dsnav__toggle:focus-visible{ outline:2px solid var(--gold2); outline-offset:2px; }
/* --- pannello (drawer osmo: grid-template-rows 0fr → 1fr) -------------- */
.dsnav__panel{
position:relative;
display:grid;
grid-template-rows:0fr;
overflow:hidden;
border-bottom-left-radius:var(--dsnav-radius);
border-bottom-right-radius:var(--dsnav-radius);
transition:grid-template-rows .6s cubic-bezier(.625,.05,0,1);
}
[data-navigation-status="active"] .dsnav__panel{ grid-template-rows:1fr; }
.dsnav__panel-inner{ overflow:hidden; min-height:0; }
/* il GRUPPO è il pezzo della ricetta scaling-hamburger: cresce dal
bottone (origine in alto a destra) invece di comparire. */
.dsnav__group{
pointer-events:auto;
display:flex;
flex-flow:column;
gap:1em;
padding:.25em 1.15em 1.15em;
transform-origin:100% 0;
transform:scale(.15) rotate(.001deg);
opacity:0;
visibility:hidden;
transition:opacity .5s cubic-bezier(.5,.5,0,1),
visibility .5s cubic-bezier(.5,.5,0,1),
transform .7s cubic-bezier(.5,.5,0,1);
}
[data-navigation-status="active"] .dsnav__group{
transform:scale(1) rotate(.001deg);
opacity:1;
visibility:visible;
}
.dsnav__panel-label{
margin:0;
font-family:var(--font-mono);
font-size:.66em;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--dsnav-fg-dim);
}
.dsnav__list{
display:flex;
flex-flow:column;
gap:.1em;
margin:0;
padding:0;
list-style:none;
}
.dsnav__list li{ margin:0; padding:0; }
/* riga del menu: target 52px pieni, il numero fa da indice di pagina e il
pallino osmo marca dove si è. */
.dsnav__list .dsnav__a{
justify-content:space-between;
min-height:52px;
padding:.35em .1em;
gap:.75em;
}
.dsnav__list .dsnav__a::after{ left:.1em; right:.1em; bottom:.2em; }
.dsnav__list .dsnav__p{
font-family:var(--font-display);
font-weight:400;
font-size:1.75em;
letter-spacing:0;
text-transform:none;
}
.dsnav__list .dsnav__num{ font-size:.7em; }
.dsnav__row{ display:flex; align-items:baseline; gap:.9em; }
.dsnav__dot{
flex:none;
width:.5em; height:.5em;
border-radius:50%;
background-color:currentColor;
opacity:.5;
transform:scale(0) rotate(.001deg);
transition:transform .7s cubic-bezier(.5,.5,0,1);
}
.dsnav__a[aria-current] .dsnav__dot{ transform:scale(1) rotate(.001deg); opacity:1; }
/* banner CTA del menu (osmo .centered-nav__banner + marquee CSS) */
.dsnav__banner{
pointer-events:auto;
display:block;
overflow:hidden;
max-width:100%;
padding:1.1em 0;
border-radius:.4em;
color:var(--ink);
background-color:var(--gold2);
text-decoration:none;
min-height:48px;
transition:background-color .15s;
}
.dsnav__banner:active{ background-color:var(--gold-deep); }
.dsnav__banner-row{ display:flex; align-items:center; }
.dsnav__banner-item{ flex:none; display:flex; align-items:center; }
.dsnav__banner-inner{ flex:none; display:flex; align-items:center; padding-right:2em; }
.dsnav__banner-text{
margin:0;
font-family:var(--font-mono);
font-size:.78em;
font-weight:400;
line-height:1;
letter-spacing:.14em;
text-transform:uppercase;
}
@keyframes dsnavMarquee{ to{ transform:translateX(-100%); } }
[data-dsnav-marquee]{
/* 1s di ritardo: all'apertura la CTA si legge ferma per un secondo e
POI parte. Senza, il pannello si apre su una scritta già tagliata a
metà — la prima cosa che si legge è mezza parola. */
animation:dsnavMarquee 22s linear 1s infinite;
animation-play-state:paused;
}
[data-navigation-status="active"] [data-dsnav-marquee]{ animation-play-state:running; }
/* --- progress hairline oro (scroll della pagina) ---------------------- */
.dsnav__progress{
position:absolute;
left:0; right:0; bottom:0;
height:2px;
overflow:hidden;
border-bottom-left-radius:var(--dsnav-radius);
border-bottom-right-radius:var(--dsnav-radius);
pointer-events:none;
z-index:2;
}
.dsnav__progress i{
display:block;
width:100%; height:100%;
background:linear-gradient(90deg, var(--gold2), var(--gold-deep));
transform:scaleX(var(--nav-progress, 0));
transform-origin:left center;
}
/* la hairline esce di scena: il progresso ora lo racconta L'ANELLO (sotto).
Due indicatori della stessa cosa nella stessa barra = rumore. Per
tornare indietro basta togliere questa riga. */
.dsnav__progress{ display:none; }
/* ==== L'ANELLO DI SCROLL =============================================
Il filo rosso della pagina è l'anello dell'hero; qui si disegna in oro
col progresso di scroll: 0 in cima, cerchio chiuso in fondo. NESSUN JS
NUOVO: legge --nav-progress, che js/meganav.js scrive già sul root per
la vecchia hairline. pathLength=1 rende la dasharray unitless, il
-90deg fa partire il tratto da ore 12. Su mobile vive sul bordo del
burger (che è già un cerchio); su desktop, dove il burger non c'è,
sta da solo accanto alla CTA. */
.dsnav__ring{
position:absolute; inset:0;
width:100%; height:100%;
transform:rotate(-90deg);
pointer-events:none;
}
.dsnav__ring circle{
fill:none;
stroke:var(--gold-deep);
stroke-width:2;
stroke-linecap:round;
stroke-dasharray:1;
stroke-dashoffset:calc(1 - var(--nav-progress, 0));
}
.dsnav__ring-solo{
position:relative;
flex:none;
width:20px; height:20px;
margin-right:clamp(10px, 1.1vw, 16px);
/* la traccia spenta sotto il tratto: si vede dove l'anello arriverà */
}
.dsnav__ring-solo::before{
content:"";
position:absolute; inset:0;
border-radius:50%;
border:2px solid color-mix(in srgb, var(--gold-deep) 22%, transparent);
}
@media (max-width:768px){ .dsnav__ring-solo{ display:none; } }
/* ======================================================================
MOBILE ≤768 — osmo scaling-hamburger-navigation
Barra: logo + pillola ANFRAGE + hamburger (stessa terna dello stato
precedente, vedi qa/shots-20260817-faseA/mob-01-top.png). Le quattro
ancore vivono nel pannello, con indice numerato: sul telefono la pagina
è lunga e l'unico wayfinding era lo scroll (feedback Daniel).
====================================================================== */
@media (max-width:768px){
.dsnav{
--dsnav-top: .75em;
--dsnav-w: calc(100vw - 1.5em);
--dsnav-pad: .55em .6em .55em .85em;
}
html.nav-past .dsnav{
--dsnav-top: .5em;
--dsnav-w: calc(100vw - 1.1em);
--dsnav-pad: .45em .5em .45em .8em;
}
.dsnav__rail{ display:none; }
.dsnav__toggle{ display:flex; }
.dsnav__cta{
--button-062-padding:.9em 1.15em .8em;
min-height:44px;
margin-left:auto;
margin-right:.5em;
}
.dsnav__cta-full{ display:none; }
.dsnav__cta-short{ display:inline; }
/* a menu aperto la pillola sparisce: due uscite sovrapposte (X e CTA)
nello stesso angolo sono un bersaglio ambiguo per il pollice, e la
CTA riappare come banner in fondo al pannello. */
.dsnav[data-navigation-status="active"] .dsnav__cta{
opacity:0;
pointer-events:none;
}
}
/* LE ALTRE PAGINE DEL SITO (24/09): mono piccolo dopo una hairline, colore
dim → pieno in hover; nel pannello mobile diventano pillole. */
.dsnav__site{
display:flex; align-items:center; gap:.15em;
margin:0 0 0 .5em; padding:0 0 0 .8em;
list-style:none;
border-left:1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.dsnav__site li{ margin:0; padding:0; }
.dsnav__site-a{
display:inline-flex; align-items:center;
min-height:44px; padding:.5em .55em;
font-family:var(--font-mono); font-size:.62em; letter-spacing:.16em; text-transform:uppercase;
color:var(--dsnav-fg-dim); text-decoration:none; white-space:nowrap;
pointer-events:auto;
transition:color .25s linear;
}
.dsnav__site-a:hover, .dsnav__site-a:focus-visible{ color:var(--dsnav-fg); }
@media (max-width:1119px){ .dsnav__site{ display:none; } }
.dsnav__group--site{ padding-top:0; }
.dsnav__site-list{ display:flex; flex-flow:row wrap; gap:.35em .4em; margin:0; padding:0; list-style:none; }
.dsnav__site-list li{ margin:0; padding:0; }
.dsnav__site-list .dsnav__site-a{
font-size:.66em; padding:.6em .85em; min-height:40px;
border:1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius:999px;
}
.dsnav__site-list .is-current{ color:var(--dsnav-fg); border-color:currentColor; cursor:default; }
/* desktop: il pannello non esiste (le voci sono nel rail) */
@media (min-width:769px){
.dsnav__panel{ display:none; }
}
/* LA FASCIA STRETTA DEL DESKTOP (769–1119)
Misura, non gusto: a 769px la card vale ~743px e dentro ci devono stare
logo (~85) + quattro voci (~430) + CTA «Wunschtermin anfragen» (~237)
+ i gap. Fa 770 e straborda. Qui la CTA torna corta come sul telefono e
il rail si stringe: sono le stesse due leve, non un layout terzo. */
@media (min-width:769px) and (max-width:1119px){
.dsnav__cta-full{ display:none; }
.dsnav__cta-short{ display:inline; }
.dsnav__cta{ --button-062-padding:.9em 1.25em .8em; }
.dsnav__rail{ margin-left:1em; gap:0; }
.dsnav__a{ padding:.5em .55em; }
.dsnav__p{ font-size:.86em; letter-spacing:.07em; }
.dsnav__num{ font-size:.58em; }
}
/* schermi bassi: le voci si stringono, il pannello non deve mai scrollare */
@media (max-width:768px) and (max-height:680px){
.dsnav__list .dsnav__p{ font-size:1.45em; }
.dsnav__list .dsnav__a{ min-height:46px; }
.dsnav__group{ gap:.75em; }
}
/* blocco scroll senza salto (menu aperto): la posizione resta dov'era e il
gutter della scrollbar viene restituito come padding. */
html.nav-locked, html.nav-locked body{
overflow:hidden;
touch-action:none;
}
html.nav-locked body{ padding-right:var(--nav-lock-gutter, 0px); }
/* ---- REDUCED MOTION --------------------------------------------------
La nav deve FUNZIONARE senza animazioni: niente opacity:0 che resta
appeso a una transizione mai partita. Qui si azzerano le durate (gli
stati finali sono comunque scritti in CSS, quindi il menu apre e chiude
di scatto) e si spegne il marquee. */
@media (prefers-reduced-motion:reduce){
.dsnav, .dsnav *{
transition-duration:.001ms !important;
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
}
.dsnav__group{ transform:none; }
[data-dsnav-marquee]{ animation:none; }
}
/* === section:b01-overlay === */
/* ---- Beat 01 — dive title overlay (restyle) ------------------------- */
[data-beat="01"] .scene-label{ display:none; }
/* Lo z-index:6 sul pin è RIMOSSO (2026-08-13): serviva a tenere l'hero SOPRA
b03 mentre b03 saliva dietro il pin durante l'handoff. Senza handoff — e
con il pin che ora finisce a 'bottom bottom' — le due sezioni non si
sovrappongono mai, e un pin sopra il flusso era esattamente ciò che si
leggeva come «b03 parte da sotto la sezione». */
/* pointer-events:none sul pin: dentro non c'è niente di cliccabile (canvas,
copy di volo e cue sono decorativi) e così non può mai rubare un click alle
sezioni vicine. Non tocca lo scroll: pointer-events non intercetta il gesto
di scorrimento. */
[data-beat="01"] .pin{ pointer-events:none; }
/* ---- LA FASCIA NERA IN BASSO SU IPHONE: tentativo RITIRATO ------------
2026-08-14, provato e tolto lo stesso giorno (owner: «prima era più
figo»). Il pin dell'hero passava a 100lvh su touch, con l'overlay tenuto
a 100svh, per coprire i ~60-90px che Safari scopre quando ritrae le
barre. Tappava la fascia nera ma cambiava l'inquadratura dell'hero sul
telefono: il canvas è cover-fit, quindi un box più alto ritaglia più
larghezza e il piano sequenza si legge diverso.
Il pin resta quindi 100svh (regola generica .pin, in testa al file).
Se la fascia nera va ripresa in mano, il prossimo tentativo NON è
rialzare il pin: è tenere il canvas a 100lvh DENTRO un pin da 100svh
(overflow visibile solo in basso), così l'inquadratura non si muove. */
.b01-holder{
position:absolute;
inset:0;
z-index:2;
overflow:hidden;
will-change:transform, opacity;
backface-visibility:hidden;
}
/* VELO DI BASE — il lockup vive in basso a sinistra, e lì il diorama ha il
primo piano scuro (la carta bruna in ombra): l'inchiostro del titolo ci
moriva sopra a 390. Un velo crema, non un'ombra scura: si schiarisce la
carta sotto il testo invece di annerirla, e la coppia ritagliata resta
visibile perché il velo si ferma a .58. Sta sotto l'overlay (z 3) e sopra
l'immagine. */
/* owner 18/08 sera-4 («testo andrà sistemato per essere letto»): sul girato
della mappa le creste brune passano sotto l'H1 — il velo sale di corpo
(.42→.60 / .72→.86) e SEGUE il titolo: --titleveil la scrive js/ring.js
sullo stesso progresso con cui l'H1 esce, così durante il volo il video
non resta velato a vuoto. */
.b01-holder::after{
content:"";
position:absolute;
inset:0 0 auto 0;
/* SOPRA il canvas dello scrub (z1): con z auto il girato dipingeva
sopra il velo e il titolo restava nudo sulle creste */
z-index:2;
height:58%;
background:linear-gradient(180deg, rgba(247,242,233,.9), rgba(247,242,233,.55) 52%, rgba(247,242,233,0));
opacity:var(--titleveil, 1);
pointer-events:none;
}
.b01-overlay{
position:absolute;
inset:0;
z-index:3;
pointer-events:none;
--b01-pad-x: clamp(20px, 5vw, 72px);
}
/* Exit group — beats.js fades/scales THIS block (both selectors resolve here) */
.b01-title,
.b01-title-wrap{
position:absolute;
inset:0;
max-width:none; /* la regola base la teneva a 900px: con il titolo
nuovo (30 caratteri sulla riga lunga) andava a
capo già a 1440. Il limite ora è il padding. */
transform-origin:0% 100%;
will-change:transform, opacity;
}
.b01-kicker{
position:absolute;
top:clamp(22px, 4.2vh, 44px);
left:var(--b01-pad-x);
margin:0;
}
.b01-kicker .b01-line{
font-family:var(--font-mono);
font-weight:400;
font-size:clamp(11px, 0.86vw, 12px);
letter-spacing:.18em;
text-transform:uppercase;
color:rgba(46,44,40,.74);
}
.b01-headline{
position:absolute;
left:var(--b01-pad-x);
right:var(--b01-pad-x);
/* IN ALTO, non più in basso (owner 18/08 sera-4: «come sistemiamo il
testo?»): al frame 1 del girato la mappa sta al centro-basso e il
CIELO di carta in alto è vuoto — il titolo vive lì e non lotta più
con le creste. Il clamp tiene la riga sotto la meganav. */
top:clamp(104px, 16lvh, 190px);
bottom:auto;
max-width:none;
}
/* ==== IL TITOLO IN BASSO — variante A/B (owner 22/08) ==================
«Spacca così, solo che il testo non saprei dove posizionarlo».
Le due posizioni che la misura del fotogramma 1 ammette sono la fascia
ALTA (media 242, dev 1) e la fascia BASSA (media 225, dev 3): sono le
uniche due strisce di carta vuota: in mezzo ci sono le creste, dove il
fondo cambia di ~70 livelli dentro una parola.
Di default vale quella alta (com'è ora). Aprendo la pagina con `?t=b`
il titolo scende nella fascia bassa e il velo si ribalta con lui: due
inquadrature vere da confrontare sul telefono, senza due deploy.
Quando l'owner sceglie, resta una sola regola e questa esce. */
[data-title-pos="bottom"] .b01-headline{
top:auto;
/* sopra le pill, che restano dove sono: (fondo pill) + altezza + aria */
bottom:calc((100lvh - 100svh) + clamp(96px, 14svh, 170px));
}
[data-title-pos="bottom"] .b01-holder::after{
inset:auto 0 0 0;
height:62%;
background:linear-gradient(0deg, rgba(247,242,233,.92), rgba(247,242,233,.55) 46%, rgba(247,242,233,0));
}
@media (max-width:767px){
[data-title-pos="bottom"] .b01-headline{
bottom:calc((100lvh - 100svh) + clamp(120px, 18svh, 210px));
}
[data-title-pos="bottom"] .b01-holder::after{ height:70%; }
}
.b01-h1{
margin:0;
font-family:var(--font-display);
font-weight:400;
/* DM Serif rende ~30% più largo di Barlow Condensed a parità di corpo, e
il titolo è passato da 21 a 30 caratteri sulla riga più lunga: il corpo
scende e la legge «una riga sola» del 15/07 cade con lei — il titolo è
DUE righe per costruzione (L3), non per ripiego. */
line-height:1.04;
letter-spacing:-.005em;
font-size:clamp(1.9rem, 5.4vw, 5.2rem);
color:var(--ink);
/* L'ALONE DI CARTA (owner 22/08: «spacca così, solo che il testo non
saprei dove posizionarlo»).
Misurato sul fotogramma 1 del girato — quello fermo sotto il titolo —
a griglia 8x6, media/deviazione per riquadro:
riga alta 242 / dev 1 → carta vuota
righe 2-4 170-190 / dev 55-72 → creste: qui il fondo CAMBIA di
~70 livelli dentro la stessa parola
riga bassa 225 / dev 3 → carta vuota
Il titolo cade per forza sulle righe centrali (è lì che sta il corpo
della pagina), e non è la media a romperlo — è la deviazione: gli
avvallamenti scuri delle curve di livello passano sotto le aste e
l'occhio perde la lettera. Spostare il testo dove il fondo è liscio
vorrebbe dire toglierlo dalla mappa, cioè togliere la composizione che
all'owner piace.
Quindi non si sposta il testo: si mette la CARTA sotto le lettere. Tre
ombre crema concentriche (secca, media, larga) — non un riquadro, non
un velo sull'immagine: solo il contorno del glifo che si stacca. La
mappa resta visibile ovunque, anche fra una lettera e l'altra.
Ombre CHIARE, non scure: su crema una scura si legge come sporco di
stampa (era la ragione del `text-shadow:none` di prima, che vale
ancora — infatti qui non c'è nessuna ombra scura). */
text-shadow:
0 0 2px rgba(247,242,233,.92),
0 0 12px rgba(247,242,233,.88),
0 0 34px rgba(247,242,233,.62);
}
.b01-dot{ color:var(--gold); }
.b01-sub{
margin:clamp(14px, 2vh, 22px) 0 0;
max-width:28ch;
font-family:var(--font-body);
font-weight:400;
font-size:1rem;
line-height:1.5;
/* il sottotitolo è corpo piccolo su fondo mosso: senza alone sparisce
prima del titolo. Inchiostro pieno (era .72: su una cresta scura una
trasparenza è il modo più veloce per perdere una riga) + lo stesso
alone di carta, stretto perché il corpo è piccolo. */
color:var(--ink);
text-shadow:
0 0 2px rgba(247,242,233,.92),
0 0 10px rgba(247,242,233,.8);
}
/* ---- Scorciatoie dell'hero (2026-08-14) ---------------------------
Registro mono/oro come i kicker: segnaletica, non un secondo livello di
titolo — il display resta uno solo. Target 44px senza allargare la
colonna del lockup. Escono col titolo (beats.js) perché stanno dentro
.b01-title: durante il volo nessuno deve avere bottoni sotto gli occhi. */
/* IN BASSO A SINISTRA e con più presenza (owner 18/08 sera-5): pieno
carta, bordo oro vero, corpo su — non più fili d'aria sotto il
sottotitolo. Assolute nel .b01-title, così escono col titolo. */
.b01-jump{
position:absolute;
left:var(--b01-pad-x);
/* compensazione toolbar iOS (legge lvh #3): il title-box è alto 100lvh,
ma a toolbar visibile il fold è 100svh — senza il delta le pill
nascevano SOTTO la piega (screenshot owner 16:40) */
bottom:calc((100lvh - 100svh) + clamp(24px, 5svh, 56px));
display:flex;
flex-wrap:wrap;
gap:.6em;
pointer-events:auto; /* .b01-overlay e .pin sono pointer-events:none */
}
.b01-jump__link{
display:flex;
align-items:center;
min-height:48px;
padding:0 1.35em;
border:1px solid rgba(165,130,74,.75);
border-radius:999px;
font-family:var(--font-mono);
font-size:.8rem;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--ink);
text-decoration:none;
background:var(--print);
box-shadow:0 1px 2px rgba(46,44,40,.12), 0 10px 22px -12px rgba(46,44,40,.35);
transition:border-color .3s ease, background-color .3s ease, transform .3s ease;
}
@media (hover:hover){
.b01-jump__link:hover{ border-color:rgba(165,130,74,.9); background:rgba(165,130,74,.12); }
}
.b01-jump__link:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
/* Masked-line reveal — osmo masked-text-reveal mechanics (overflow mask).
Base state is VISIBLE (transform:none) so JS-off / no-gsap still shows the
headline. The JS PARKS the line (yPercent:110) at init, then reveals it. */
.b01-mask{
display:block;
overflow:hidden;
padding-bottom:.08em;
}
.b01-line{
display:block;
transform:none;
will-change:transform;
}
/* La copy di volo (.b01-flight ×3 + .b01-flight-scrim) è uscita col pin il
18/08 sera: senza corsa di scrub non aveva più un tempo in cui vivere.
Regole cancellate qui, markup cancellato in index.html.
.b01-wash (dissolvenza al nero) era già uscita il 2026-08-04. */
.b01-cue{
position:absolute;
left:50%;
bottom:clamp(20px, 3.4vh, 40px);
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
}
.b01-cue__line{
width:1px;
height:clamp(28px, 5vh, 52px);
background:linear-gradient(180deg, transparent, rgba(165,130,74,.55));
}
.b01-cue__label{
font-family:var(--font-mono);
font-size:11px;
letter-spacing:.3em;
color:rgba(165,130,74,.85);
}
@media (max-width:820px) and (min-width:481px){
.b01-headline{ max-width:92vw; bottom:clamp(88px, 15vh, 150px); } /* +scorciatoie 14/08 */
.b01-h1{ font-size:clamp(1.8rem, 4.9vw, 3.2rem); }
}
@media (max-width:480px){
.b01-overlay{ --b01-pad-x: clamp(18px, 6vw, 26px); }
.b01-kicker .b01-line{ font-size:10px; letter-spacing:.16em; }
.b01-headline{ max-width:92vw; bottom:clamp(96px, 17vh, 158px); } /* +scorciatoie 14/08 */
/* a 390px la prima riga («Hochzeitsfilm & Hochzeitsfotos») va a capo da
sola: tre righe di titolo a 29px stanno meglio di due a 25px, e il
lockup ci sta lo stesso sopra le scorciatoie. */
.b01-h1{ font-size:clamp(1.75rem, 8.6vw, 2.6rem); }
.b01-sub{ font-size:.94rem; max-width:26ch; }
}
/* reduced-motion: never park — every line visible (JS also skips parking) */
@media (prefers-reduced-motion:reduce){
.b01-line{ transform:none; }
}
/* === section:b03-daniel === */
/* ---- Beat 03 — Daniel intro (warm rest band) ------------------------ */
.b03{
/* GROUND UNICO (17/08): era `var(--shadow)`, cioè sabbia piena, e fra b03
e b04 si vedeva un gradino netto. Ora è la velatura --ground-2: la
sezione resta appena più calda del resto senza che ci sia un bordo da
guardare. Il --muted rinforzato resta: era stato misurato sulla sabbia
(4,44:1 → 5,46:1) e su una velatura più chiara guadagna soltanto. */
background:var(--ground-2);
--muted:#5c544a;
/* LA CODA (Daniel 21/08 18:19): la sfumatura legno→cartone deve cadere
su carta VUOTA, non addosso alla CTA. La sezione si allunga sotto il
contenuto esattamente della lunghezza della sfumatura (--b03-fade) e
il flex la tiene centrata sopra. Un numero solo, letto qui e dalla
maschera del legno: non possono sfasarsi. */
/* L11 (pagina corta, «ogni fase lascia la pagina uguale o più corta»):
la coda si paga in altezza, quindi si paga il MINIMO che regge la
dissolvenza — 18svh invece di 26 — e la si compensa togliendo aria
sopra (l'aria sopra ce l'ha già il giunto in penombra con l'hero).
Misurato a 1430x780: sezione 973px con la coda lunga → 866px con
questa, contro i 788px di prima del legno. +78px su una pagina di
~10 viewport: la coda non è una sezione in più, è il giunto. */
--b03-fade:clamp(120px, 18svh, 210px);
display:flex;
align-items:center;
padding:clamp(40px,6vh,78px) clamp(20px,6vw,96px);
padding-bottom:calc(clamp(40px,6vh,78px) + var(--b03-fade));
overflow:hidden;
position:relative;
}
/* IL LEGNO DI DANIEL (vocale 17:37, parola per parola: «l'anello cade su
di me, su un legno rusticale… poi va avanti con sto legno finché
diventa cartone, e poi vengono i video»). Il ground di b03 è L'ULTIMO
FRAME del girato del crollo — stesso pixel del freeze dell'hero, quindi
il giunto non esiste. Il ritratto vero (DOM) ci sta sopra: è il «si
vede subito chi sono».
21/08 18:19 — LA MASCHERA DIAGONALE È USCITA. Diceva: legno in alto a
sinistra (sotto il ritratto), cartone in basso a destra (sotto la copy).
Daniel, parola per parola: «lì praticamente la foto con me e il mio
intro, la mia descrizione, chi sono, così via, SEMPRE CON QUEL SFONDO
DEL LEGNO LÌ». Il legno quindi tiene tutta la sezione, bordo a bordo,
testo compreso — e la sfumatura verso il cartone non taglia più la
sezione a metà: cade in fondo, sulla coda vuota (--b03-fade), che è
esattamente il giunto con la sezione video («poi viene la sezione video
con una sfumatura dal legno al cartone»).
Conseguenza obbligata: sul legno si scrive in CREMA — vedi il blocco
§b03 SUL LEGNO qui sotto, stessa legge già applicata al Tisch. */
.b03::before{
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
/* IL GIUNTO CON L'HERO. Il fotogramma congelato dell'hero è la stessa
tavola ma inquadrata da più vicino e con la penombra del crollo
addosso: attaccati, i due legni fanno una riga netta a metà schermo.
Non si aggiusta con la scala (il canvas è cover sul pin, questo è
cover sulla sezione: due box diversi, mai la stessa crop) — si
aggiusta con la LUCE. La sezione entra in penombra e schiarisce in
240px: il taglio cade dentro un'ombra, che è esattamente quello che
l'occhio si aspetta guardando un tavolo. */
/* LA LASTRA v2 (24/08, owner: «il cut non è netto e flush, non sembrano
avere la stessa texture»). Due difetti della v1:
(1) la lastra era un REDRAW AI del fotogramma — il grano era nato più
grande dell'originale, quindi «non è la stessa texture» era vero
alla lettera;
(2) `100% auto` è scala in LARGHEZZA, ma il canvas dell'hero è cover
ancorato al centro: scale = max(vw/iw, lvh/ih) sul box del pin
(100lvh). Su laptop e telefono vince l'ALTEZZA, non la larghezza
(1512×982: 0,909 contro 0,787 = grano ~15% più piccolo qui sotto;
a 390 il frame mob è 608w → 0,78 contro 0,20 = 4× più piccolo).
v2, deterministica, zero AI:
· ring-wood-plate2.webp = PIXEL VERI dell'ultimo fotogramma: banda
780–1079 (sotto l'anello) + il suo flip verticale sopra (tile
1920×600, tools: ffmpeg crop+vflip+vstack → cwebp q76). La riga 0
della lastra È la riga 1079 del frame → al giunto il grano continua
C0; il mirror rende il tile continuo anche su se stesso
(bookmatch, come i tavoloni veri). La vignetta del girato nelle
ultime righe diventa l'ombra fra un tavolone e l'altro.
· background-size replica ESATTAMENTE la matematica del cover:
larghezza disegnata = 1920·scale. Desk (frame 1920×1080):
max(100vw, 177.78lvh). Mobile ≤820px (frame 608×1080 center-crop
dello stesso master, stesso centro): max(315.79vw, 177.78lvh).
· position-y corregge il caso ultra-wide (cover limitato in
larghezza: il crop dell'hero non arriva alla riga 1079 → la lastra
risale di metà dell'eccedenza). Su laptop/telefono vale 0.
La penombra artificiale è USCITA: i pixel ora continuano da sé, un
velo sopra sarebbe di nuovo un gradino di tono. */
background-image:url("../assets/media/ring-wood-plate2.webp");
background-size:max(100vw, 177.78lvh) auto;
background-repeat:repeat-y;
background-position:50% calc((100lvh - max(56.25vw, 100lvh)) / 2);
/* la sfumatura in px, non in %: la coda della sezione è alta --b03-fade
a qualunque viewport, e la dissolvenza deve essere lunga QUELLA, se no
su schermi bassi diventa un bordo e su schermi alti mangia la copy */
-webkit-mask-image:linear-gradient(to bottom, #000 0,
#000 calc(100% - var(--b03-fade)), transparent calc(100% - 2px));
mask-image:linear-gradient(to bottom, #000 0,
#000 calc(100% - var(--b03-fade)), transparent calc(100% - 2px));
}
@media (max-width:820px){
.b03::before{
/* stesso breakpoint di ring.js: sotto 820 il canvas disegna il frame
MOB 608×1080 (center-crop dello stesso master, stesso centro) →
scale = max(vw/608, lvh/1080), larghezza lastra = 1920·scale */
background-size:max(315.79vw, 177.78lvh) auto;
background-position:50% calc((100lvh - max(177.63vw, 100lvh)) / 2);
}
}
/* ==== §b03 SUL LEGNO — l'inchiostro si ribalta ======================
Stessa legge misurata sul Tisch (§b05 .is-scrub): su un piano di noce
ogni token scuro sparisce dentro il legno. Qui il fondo è ancora più
difficile perché è una VENATURA VIVA con nodi chiari e solchi neri:
nessun colore di testo, da solo, tiene su tutti e due. Quindi due cose
insieme, come per il lockup di b05: testo crema + un velo scuro sfumato
che muore a zero prima di diventare un riquadro.
Le eccezioni sono gli oggetti di CARTA (la didascalia sul bordo della
stampa, la CTA a pillola d'oro): lì il fondo è chiaro e l'inchiostro
resta scuro — sotto, esplicite. */
.b03 .b03-h{
color:#faf4e6;
text-shadow:0 1px 14px rgba(20,12,4,.42);
}
.b03 .b03-h em,
.b03 .b03-dot,
.b03 .b03-num,
.b03 .b03-kicker{ color:#c9a050; }
.b03 .b03-rule{ background:#c9a050; }
.b03 .b03-quote{
color:rgba(246,238,224,.94);
text-shadow:0 1px 8px rgba(20,12,4,.34);
}
.b03 .b03-sign{
color:rgba(246,238,224,.92);
text-shadow:0 1px 8px rgba(20,12,4,.34);
}
.b03 .b03-sign em{ color:#c9a050; }
.b03 .b03-sigrule path{ stroke:#c9a050; }
/* IL VELO sotto la colonna di testo. Radiale, ancorato in alto a sinistra
dove comincia la lettura, e a zero prima del bordo: non è un pannello,
è ombra. Stesso gesto approvato il 21/08 sul lockup del Tisch. */
.b03 .b03-text{ position:relative; }
.b03 .b03-text::before{
content:"";
position:absolute;
z-index:-1;
/* stessa geometria del velo di b05: `closest-side` + ultimo stop
trasparente = alfa zero prima del bordo, mai un riquadro */
inset:-30% -28% -34% -26%;
background:radial-gradient(closest-side at 34% 48%,
rgba(18,12,6,.72) 0%,
rgba(18,12,6,.46) 52%,
rgba(18,12,6,0) 100%);
pointer-events:none;
}
/* la didascalia sta sul bordo di CARTA della stampa, non sul legno:
resta inchiostro (il --muted della sezione la porterebbe a crema su
bianco, cioè invisibile) */
.b03 .b03-portrait__cap{ color:#6b6156; }
.b03-inner{ z-index:1; }
.b03 .scene-label{ display:none; }
.b03-inner{
/* --b03-pw = larghezza della stampa, dichiarata UNA volta: la leggono la
figure (max-width) e la striscia a contatto (offset). Un numero solo,
due elementi che non possono più sfasarsi (owner 18/08). */
--b03-pw:clamp(280px,34vw,440px);
position:relative; /* contesto della striscia in assoluto */
width:100%;
max-width:1360px;
margin:0 auto;
display:grid;
grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
gap:clamp(32px,6vw,96px);
align-items:center;
}
.b03-text{
display:flex;
flex-direction:column;
align-items:flex-start;
order:1; /* il ritratto è primo nel markup (è quello
in cui l'hero si dissolve): sul desktop le
colonne restano testo → foto */
}
/* .b03-print rimossa con l'handoff-morph (owner 2026-08-12): era solo il
bersaglio della stampa in volo. */
/* Sosta lockup — numero mono '02' oro + mono kicker */
.b03-lockup{
display:flex;
align-items:baseline;
gap:.9em;
margin-bottom:clamp(14px,2.2vh,24px);
}
.b03-num{
font-family:var(--font-display);
font-weight:400;
font-size:clamp(1.6rem,3.6vw,2.5rem);
line-height:1;
letter-spacing:0;
color:var(--gold);
}
/* la riga oro del kicker: si disegna scaleX 0→1 (--d-snap) all'entrata */
.b03-rule{
display:block;
width:clamp(28px,4vw,56px);
height:1px;
background:var(--gold);
transform:scaleX(1);
transform-origin:left center;
align-self:center;
}
.b03-kicker{
font-family:var(--font-body); font-weight:500;
font-size:clamp(10px,1.05vw,12px);
letter-spacing:.16em;
text-transform:uppercase;
color:var(--gold);
padding-bottom:.15em;
}
/* Display headline — Barlow Condensed, gold emphasis (never serif-italic) */
.b03-h{
margin:0 0 clamp(18px,2.6vh,30px);
font-family:var(--font-display);
font-weight:400;
line-height:1.06;
letter-spacing:-.005em;
font-size:clamp(1.9rem,4.2vw,3.4rem);
color:var(--paper);
}
.b03-h em{ font-style:normal; color:var(--gold); }
.b03-dot{ color:var(--gold); }
/* Quote — Inter body, line-reveal masks built by JS */
.b03-quote{
margin:0 0 clamp(18px,2.6vh,30px);
max-width:46ch;
font-family:var(--font-body);
font-weight:400;
font-size:clamp(1rem,1.2vw,1.1rem); /* min bumped .98rem→1rem: 16px floor a 390px */
line-height:1.5;
letter-spacing:.002em;
color:var(--muted);
}
.b03-line-mask{
display:block;
overflow:hidden;
padding-bottom:.14em;
margin-bottom:-.14em;
}
.b03-line{
display:block;
will-change:transform;
}
/* firma handwritten (owner 2026-07-16) — elemento umano, non display type */
.b03-sign{
/* il margine sotto è passato al filetto oro che ora segue la firma */
margin:0 0 .1em;
font-family:'Caveat', 'Bradley Hand', cursive;
font-weight:500;
font-size:clamp(1.6rem,2.2vw,2.1rem);
line-height:1.1;
transform:rotate(-2deg);
transform-origin:left center;
color:var(--muted);
}
.b03-sign em{ font-style:normal; color:var(--gold); }
/* CTA — pill oro (allineata a .sticky-cta, 2026-08-11: era testo mono nudo) */
.b03-cta{
--b062-ease:cubic-bezier(0.625,0.05,0,1);
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:.9em 1.6em;
border-radius:999px;
background:var(--gold2);
color:var(--ink);
font-family:var(--font-body); font-weight:500;
font-size:.8rem;
letter-spacing:.14em;
text-transform:uppercase;
text-decoration:none;
box-shadow:0 8px 22px rgba(46,44,40,.16);
-webkit-tap-highlight-color:transparent;
}
.b03-cta__label{ line-height:1; }
@media (hover:hover) and (pointer:fine){
.b03-cta{ transition:background .35s var(--b062-ease), transform .35s var(--b062-ease); }
.b03-cta:is(:hover,:focus-visible){
background:color-mix(in srgb, var(--gold2) 86%, var(--ink) 14%);
transform:translateY(-1px);
}
}
@media (prefers-reduced-motion:reduce){ .b03-cta{ transition:none; } }
/* Portrait — LA STAMPA APPESA AL MURO (owner 18/08 «rendi più figo su
mobile»). Prima era un rettangolo a filo con la didascalia in overlay su
un velo nero: pulito ma anonimo, e soprattutto ESTRANEO alla grammatica
materiale che il resto della pagina ha già (b05 = carta su legno).
Ora è una .tprint a tutti gli effetti — stesse frazioni di bordo (4,2%
sui lati, 12,5% sotto), stesso --print, stesso raggio 2px, stessa doppia
ombra (1px di contatto + 5/12px di stacco) — appoggiata storta al muro
crema e fissata con due pezzi di nastro di carta.
L'aspect-ratio 3/4 si sposta sul __media: la figure adesso è più alta di
così (bordo + didascalia), e tenerlo qui schiacciava la foto.
Parallasse overscan e scale 1.06→1 (smoothScrub, sections.js) restano
identici: agiscono sull'img dentro il __media. */
.b03-portrait{
position:relative;
z-index:1; /* sopra la striscia a contatto */
margin:0;
order:2; /* markup: figura prima del testo */
justify-self:end;
width:100%;
max-width:var(--b03-pw);
padding:4.2% 4.2% 12.5%;
background:var(--print);
border-radius:2px;
box-shadow:
0 1px 1px rgba(46,44,40,.10),
0 5px 12px -6px rgba(46,44,40,.30);
transform:rotate(-1.6deg); /* riposo mobile; il desktop lo ripassa sotto */
transform-origin:50% 0;
}
/* i due pezzi di NASTRO DI CARTA, a cavallo degli angoli alti. Carta crema
traslucida (si intuisce la stampa sotto), un filo interno appena accennato
al posto del bordo e una goccia d'ombra: basta quello per staccarlo dal
muro. Rotazioni opposte — un nastro strappato non è mai simmetrico.
z sopra il bordo di carta, come nella realtà: il nastro sta SOPRA. */
.b03-portrait::before,
.b03-portrait::after{
content:'';
position:absolute;
z-index:2;
width:92px;
height:30px;
background:rgba(250,247,240,.82);
box-shadow:
inset 0 0 0 1px rgba(46,44,40,.05),
0 1px 2px rgba(46,44,40,.10);
pointer-events:none;
}
.b03-portrait::before{ top:-13px; left:-26px; transform:rotate(-45deg); }
.b03-portrait::after { top:-11px; right:-24px; transform:rotate(40deg); }
.b03-portrait__media{
position:relative;
overflow:hidden;
aspect-ratio:3/4;
background:var(--sand);
}
.b03-portrait__img{
position:absolute;
top:-10%;
left:0;
width:100%;
height:120%;
object-fit:cover;
object-position:center 22%;
will-change:transform;
}
/* il velo scuro in fondo alla foto è USCITO con l'overlay: serviva solo a
rendere leggibile la didascalia sopra l'immagine. Ora la didascalia sta
sul bordo di carta, dove va scritta una didascalia su una stampa. */
.b03-portrait__cap{
display:block;
margin-top:calc(4.2% + .35em);
font-family:var(--font-mono);
font-size:10px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--muted);
}
/* ---- la STRISCIA A CONTATTO dietro la stampa (owner 18/08) ----------
Mini .tstrip: tre provini quadrati su cartoncino --print, ruotata, in
assoluto dentro .b03-inner e sotto la figura in z. Spunta di poco — è un
dettaglio periferico, non un secondo soggetto.
left è calcolato sulla larghezza REALE della stampa (--b03-pw), non su un
numero a caso: così a 320 come a 430 lo sbordo resta quello voluto e non
può uscire dal viewport (che comunque la sezione taglia, overflow:hidden). */
.b03-strip{
position:absolute;
z-index:0;
top:9%;
left:calc(var(--b03-pw) - 64px);
width:88px;
/* NON flex-column (a differenza di .tstrip): in colonna flex la misura
principale è l'ALTEZZA e i provini prendono i loro 600px intrinseci
ignorando l'aspect-ratio calcolato dalla larghezza — misurato, la
striscia usciva alta 1827px. In blocco normale l'aspect-ratio 1 si
risolve dalla larghezza e i tre quadrati sono quadrati. */
display:block;
padding:6px 6px 12px;
background:var(--print);
border-radius:2px;
box-shadow:0 4px 10px -5px rgba(46,44,40,.34);
transform:rotate(6deg);
pointer-events:none;
}
.b03-strip img{
display:block;
width:100%;
/* height:auto OBBLIGATORIO: gli attributi width/height="600" del markup
(che servono a riservare il posto e non far ballare il layout) valgono
come regola di presentazione, e senza questo l'aspect-ratio perdeva —
misurato: provini alti 600px, striscia da 1827px. */
height:auto;
aspect-ratio:1;
margin:0 0 5px;
object-fit:cover;
filter:grayscale(.5) contrast(1.06);
}
.b03-strip img:last-child{ margin-bottom:0; }
/* ---- il sottolineato a mano sotto la firma -------------------------
Stato di riposo = disegnato (nessun dash qui): senza JS, in
reduced-motion o a tab in background non manca niente. Il dash lo scrive
sections.js solo quando c'è davvero un'animazione da fare. */
.b03-sigrule{
display:block;
width:min(180px, 62%);
height:auto;
margin:-.4em 0 clamp(22px,3vh,36px) 2px;
overflow:visible;
}
/* Mobile — stack, portrait above, text below */
@media (max-width:820px){
.b03{
padding:clamp(36px,5.5vh,64px) clamp(18px,6vw,32px);
/* la shorthand qui sopra azzera la coda della sfumatura: va riscritta,
se no sul telefono il legno finisce di colpo sotto la CTA */
padding-bottom:calc(clamp(36px,5.5vh,64px) + var(--b03-fade));
}
.b03-inner{
grid-template-columns:1fr;
gap:clamp(26px,5vh,40px);
}
/* la stampa si stringe per lasciare respiro al nastro e alla striscia:
min(70vw,320px) invece di 78vw/360 — a 390 la carta arriva a ~273px,
la striscia sborda di 24px e restano ~90px di muro a destra. */
.b03-inner{ --b03-pw:min(70vw,320px); }
/* la didascalia deve stare su UNA riga sul bordo di carta: a 390 andava a
capo su «FOTOGRAF» e il bordo basso sembrava sbagliato (owner 18/08) */
.b03-portrait__cap{ font-size:9px; letter-spacing:.07em; white-space:nowrap; }
.b03-portrait{
order:0; /* già primo nel markup: la foto è in cima */
justify-self:start;
}
.b03-h{ font-size:clamp(1.55rem,6.8vw,2.6rem); }
.b03-quote{ max-width:none; }
}
/* Desktop — la stampa sta nella colonna destra a filo: la striscia si
ancora a DESTRA (non più all'offset calcolato da sinistra, che lì
cadrebbe in mezzo alla copy) e tutto cresce di un gradino. */
@media (min-width:821px){
.b03-portrait{ transform:rotate(-2deg); }
.b03-portrait::before,
.b03-portrait::after{ width:112px; height:34px; }
.b03-portrait::before{ top:-15px; left:-32px; }
.b03-portrait::after { top:-13px; right:-28px; }
.b03-strip{
left:auto;
right:-26px;
top:14%;
width:120px;
padding:8px 8px 16px;
}
.b03-strip img{ margin-bottom:7px; }
}
@media (prefers-reduced-motion:reduce){
.b03-line{ transform:none !important; }
}
/* === section:b04h-referenzen === */
/* ---- shared close button ----------------------------------------- */
.b04-x{
position:absolute; top:2.5vw; right:2.5vw; z-index:6;
width:3em; height:3em; border-radius:50%;
border:1px solid rgba(242,236,227,.35); background:rgba(11,10,9,.5);
display:flex; align-items:center; justify-content:center;
cursor:pointer; color:var(--paper);
transition:border-color .3s var(--ease-osmo), background .3s var(--ease-osmo);
}
@media (hover:hover) and (pointer:fine){
.b04-x:hover{ border-color:var(--gold); background:rgba(11,10,9,.75); }
}
.b04-x span{ position:absolute; width:15px; height:1.5px; background:currentColor; border-radius:2px; }
.b04-x span:first-child{ transform:rotate(45deg); }
.b04-x span:last-child{ transform:rotate(-45deg); }
/* ---- film lightbox ----------------------------------------------- */
.b04-film-lb{
position:fixed; inset:0; z-index:130;
display:flex; align-items:center; justify-content:center; padding:5vw;
opacity:0; visibility:hidden; pointer-events:none;
}
.b04-film-lb.is--open{ pointer-events:auto; }
.b04-film-lb__bg{ position:absolute; inset:0; background:rgba(11,10,9,.96); }
.b04-film-lb__player{
position:relative; width:100%; max-width:1180px; aspect-ratio:16/9;
background:#000; border-radius:8px; overflow:hidden;
box-shadow:0 40px 120px rgba(0,0,0,.7), 0 0 0 1px rgba(201,160,80,.14);
}
.b04-film-lb__iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:820px){
.b04-x{ top:16px; right:16px; width:46px; height:46px; } /* tap ≥44px */
}
/* STORIA DI QUESTA SEZIONE (le regole sono state rimosse, non commentate):
· 06/08 cilindro 3D `.b04cyl*` — port osmo «3d-perspective-tiles-infinite-loop».
Ritirato: mostrava UN film alla volta in 562px, cinque su sei
raggiungibili solo aspettando il giro.
· 12/08 muro `.b04deck` / `.b04row*` — sei righe cinema tutte visibili.
Onesto ma piatto: sei referenze con lo stesso peso.
· 13/08 I SEI MANIFESTI (qui sotto). */
/* b04 — Der Film · Referenzen: I SEI MANIFESTI (2026-08-13).
Spec BUILD-b04-MANIFESTI-2026-08-13.md · numeri RE-SIENA-b04-2026-08-13.md.
Nessun pin: scroll normale, sei sezioni da 100svh nel flusso. */
/* IL FLIP CHIARO DI b04 — 2026-08-17, owner sul live: «deve essere same
color chiaro delle altre». Cade il dimmer ai bordi (le due fasce
crema→#1c1813→nero che facevano da porta della "sala cinema"): non c'è
più una stanza buia da entrare e uscire. La sezione porta `.theme-light`
come b03/b05/b06 e i suoi token si ripuntano da soli — `--paper`
diventa inchiostro, `--gold` diventa gold-deep (l'oro chiaro non passa
AA sul corpo in crema).
L'UNICO dark superstite della pagina è l'hero b01. Il lightbox del film
resta scuro: lì il buio è funzionale, è una sala di proiezione modale.
Le fasce erano PADDING e non sovrapposizioni: togliendole resta solo un
respiro normale, e la sezione si accorcia di ~270px su 390. */
[data-beat="04"]{
position:relative;
padding:clamp(70px,9svh,120px) 0 clamp(70px,9svh,120px);
}
.b04w-head{
max-width:820px;
margin:0 auto clamp(8px,1.4vh,22px);
padding:0 clamp(24px,6vw,88px);
/* lo scroll-snap è rimosso (13/08). Lo scroll-margin resta: serve
all'ancora «Referenzen» (#beat-04), che senza incollerebbe l'header al
bordo alto dello schermo, sotto la barra. */
scroll-margin-top:clamp(96px,12svh,124px);
}
.b04h-kicker{
display:block;
margin-bottom:clamp(12px,1.8vh,20px);
font-family:var(--font-mono);
font-size:.72rem;
letter-spacing:.28em;
text-transform:uppercase;
color:var(--gold);
}
.b04h-title{
margin:0;
font-family:var(--font-display);
font-weight:400;
line-height:1.06;
letter-spacing:-.005em;
font-size:clamp(2rem,min(5.2vw,6.2vh),4.2rem);
color:var(--paper);
}
.b04h-dot{ color:var(--gold); }
.b04h-sub{
margin:clamp(16px,2.2vh,24px) 0 0;
max-width:44ch;
font-family:var(--font-body);
font-size:clamp(.95rem,1.1vw,1.05rem);
line-height:1.6;
color:var(--muted);
}
/* utility: testo per i soli lettori di schermo (in questo build non ce n'era
ancora una — serve solo alla pillola indice, che ha già un contenuto
visibile e non può prendersi un aria-label che lo sovrascriva) */
.u-sr{
position:absolute; width:1px; height:1px; margin:-1px; padding:0;
overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
/* ====================================================================
IL DECK DEI FILM — porting osmo «flick-cards-slider», 2026-08-17
--------------------------------------------------------------------
STORIA (le regole sono state RIMOSSE, non commentate):
· 06/08 cilindro 3D `.b04cyl*` (osmo 3d-perspective-tiles).
· 12/08 muro `.b04deck`/`.b04row*` — sei righe tutte visibili.
· 13/08 I SEI MANIFESTI `.b04m*` — biglietti siena a 100svh, con
clipPath a tacca e tabella ORT/JAHR/LÄNGE vuota.
Bocciati dal cliente e dall'owner (17/08): «sta sezione va
rimossa o rielaborata». Via markup, clipPath, CSS e motore.
· 17/08 IL DECK (qui sotto), e poche ore dopo il FLIP CHIARO.
LA CARD È UNA STAMPA, non una locandina al buio. Col passaggio a
`.theme-light` (owner: «same color chiaro delle altre») una card scura
a filo del bordo sarebbe diventata un buco nero sul crema. Qui vale la
STAMPE NUDE anche qui (owner 25/08: «questa sezione ha le polaroid e
non dovrebbe avercele» — stessa legge del Tisch, 21/08: «senza polaroid
e senza robe bianche»). La carta bianca è USCITA: resta la foto piena,
il raggio 2px, l'ombra di contatto+distacco che la tiene sul piano.
La didascalia non ha più la fascia di carta sotto: sta SULLA foto, in
basso, in crema su uno scrim scuro — la stessa legge del legno
(«sul legno si scrive in crema», b03/Tisch): dove il fondo è
un'immagine, l'inchiostro non si usa.
GEOMETRIA. Tutto pende da `--card-w` (ora larghezza della FOTO):
foto = card-w, rapporto 2:3 (il manifesto di cinema, che è anche
quello dell'originale osmo: `padding-top:150%`);
didascalia = overlay assoluto in fondo alla foto, non aggiunge
altezza. Il titolo resta tagliato a due righe (clamp).
L'altezza del deck è quindi solo la foto. Le card stanno tutte
sovrapposte sullo stesso punto e il motore le apre a ±25% / ±45% con
rotazione e scala.
390pt: carta 78vw = 304px. Le vicine spuntano di lato per una scheggia
— è così che si legge come un MAZZO e non come una foto sola.
`overflow-x:clip` sul deck: le card a ±45% scalate escono dai bordi e
senza il taglio darebbero scroll orizzontale alla pagina.
==================================================================== */
.b04deck{
/* owner 18/08 sul telefono: card «super grandi» — 66vw lascia respiro ai
lati e la card intera (foto+didascalia) sta sotto i 2/3 del viewport a 390. */
--card-w:min(66vw, 270px);
position:relative;
margin-top:clamp(18px,3vh,34px);
overflow-x:clip; /* non `hidden`: non deve creare un contenitore di scroll */
}
.b04deck__stage{
position:relative;
/* solo la foto: la didascalia è un overlay dentro di lei */
height:calc(var(--card-w) * 1.5);
}
.b04deck__list{
position:absolute; inset:0;
display:flex;
align-items:center;
justify-content:center;
margin:0; padding:0;
list-style:none;
}
.b04deck__item{
position:absolute;
width:var(--card-w);
/* stato di riposo SENZA JS: le card restano impilate e la prima si
legge lo stesso (legge del repo: mai trappole opacity:0 in CSS) */
will-change:transform;
}
/* L'OMBRA CHE REAGISCE AL TILT (pass C2, 18/08).
Sta sul
e non sulla card: il
è l'elemento che il motore
posiziona, e un pseudo-elemento del
dipinge PRIMA di `.b04c`,
cioè dietro la carta — senza z-index negativi e senza toccare la pila
del deck. `--tsh` (0→1) la scrive il motore dal micro-tilt: l'ombra si
allunga verso il basso e si stacca quando il cartoncino si inclina.
Solo transform e opacity: nessun box-shadow ricalcolato per frame,
perché l'ombra qui è disegnata una volta e poi soltanto mossa. */
.b04deck__item::before{
content:"";
position:absolute;
inset:0;
border-radius:2px;
box-shadow:0 20px 38px -14px rgba(46,44,40,.52);
opacity:var(--tsh, 0);
transform:translateY(calc(var(--tsh, 0) * 9px));
pointer-events:none;
}
/* IL MARGINE DI COPERTURA DELLA FOTO.
La sorgente riempie il vano quasi esattamente (1200x1789 = 0,671 su
1/1.5 = 0,667): senza ingrandirla, la parallasse scoprirebbe il vano.
La scala la mette il motore (js §LA PROFONDITÀ DENTRO LA CARD, OVER),
non il CSS, perché è lo stesso numero da cui dipende quanto può
traslare — un valore, un posto. Qui resta solo la promessa al
compositore che questa immagine si muoverà. */
.b04deck__item .b04c__img{ will-change:transform; }
/* LA STAMPA NUDA — stessi valori delle stampe nude del Tisch
(§STAMPE NUDE, .b05tisch__stage .tprint): niente carta, la foto e
l'ombra che la tiene sul piano. */
.b04c{
position:relative;
display:block;
padding:0;
background:transparent;
border-radius:2px;
box-shadow:
0 1px 2px rgba(46,44,40,.38),
0 12px 28px -12px rgba(46,44,40,.5);
-webkit-user-select:none; user-select:none;
}
.b04c__media{
position:relative;
overflow:hidden;
aspect-ratio:1 / 1.5;
border-radius:2px;
background:var(--sand);
}
/* `.b04c__img` e `.b04c__v` condividono la regola: il giorno che arrivano
gli export di Daniel il