/* ============================================================= ELODIE ALAMKAN PHOTOGRAPHY — Bozza v1 ------------------------------------------------------------- PALETTE (modifica qui per testare varianti — es. azzurro più chiaro/scuro): tutto è guidato da queste variabili. Regola contrasto: testo nero su bianco · testo bianco su navy. ============================================================= */ :root { --ink: #1a1a1a; /* nero brand — testo su fondo chiaro */ --ink-soft: #55636a; /* testo secondario */ --white: #ffffff; /* ═══════════════════════════════════════════════════════════════════ DUE BLU SOLTANTO — 🅵 decisione di Federico, 2 settembre 2026. Confrontati in mockup/due-blu-mockup.html (interruttore prima/dopo). LA REGOLA: lo SCURO sul CHIARO, il CHIARO sullo SCURO. I due non si contendono niente perché non possono stare sullo stesso fondo. Non sono due alternative: sono una coppia. ⚠️ Il vincolo che ha deciso tutto, ed è misurato, non di gusto: #E0F6FD su bianco = 1,12:1 → ILLEGGIBILE (serve 4,5:1) #E0F6FD su navy = 13,59:1 → ottimo #14273a su bianco = 15,21:1 → ottimo Per questo i 28 usi del vecchio #020246 sono andati TUTTI al navy: l'azzurro non poteva raccoglierli, su bianco non si vede. ⚠️ COSA È USCITO, e perché va ricordato: --blue #020246 era il colore letto dal CANVA DI ELODIE in chiamata (28:33), registrato nel brief come "il codice colore del brand". Toglierlo significa che quel blu non compare più nel sito. Il navy l'abbiamo proposto noi, ma lei l'ha approvato a voce: "questo blu adoro!" (26:50) + conferma dell'announcement bar. → Da dire a Elodie, non da nasconderle. Vedi brief §4.1. --sea #2f6f8f, --sea-deep #1d4a63, --navy-2 #1c344b: usciti anche loro. Le ultime due non erano mai state usate da nessuna regola. ═══════════════════════════════════════════════════════════════════ */ --navy: #14273a; /* LO SCURO. Announcement bar, fondi scuri, e tutto ciò che sta su fondo chiaro: occhielli, bottoni, numeri, linee, il "+" delle FAQ, le virgolette. */ --brand-blue: #E0F6FD; /* IL CHIARO. Azzurro di Elodie. Vive SOLO sui fondi scuri — testo della topbar, occhielli sulla hero, firme delle testimonianze — e come velo chiaro. */ --line: #e7edf0; /* hairline */ /* --- L'APERTURA (parola-finestra) ------------------------------------ Queste tre stanno insieme o non stanno: sono scritte UNA VOLTA e lette in due punti — la hero e il fondo della parola. Se divergono, quando il velo si dissolve le lettere restano di un altro tono oppure l'immagine salta. */ --ap-focus: 50% 42%; /* punto d'interesse: object-position della hero E background-position della parola. 42% tiene i volti e la giacca bianca nel quadro sia in 16:9 sia su formati più alti */ /* ⚠️ Questo velo è usato in DUE punti: .hero__scrim e il fondo della parola dell'apertura. Non va duplicato a mano da nessuna parte: .hero__scrim lo legge da qui, così non possono divergere. Caricato rispetto all'originale perché QUESTA foto è chiara al centro (la giacca bianca dello sposo): col velo leggero le parole chiave non si leggevano e dentro alle lettere restava un grigio pallido. Con una foto più scura andrà alleggerito. */ --ap-scrim: linear-gradient(180deg, rgba(9,17,27,.58) 0%, rgba(9,17,27,.40) 28%, rgba(9,17,27,.46) 56%, rgba(9,17,27,.74) 100%); /* Quale fascia di fotografia si vede dentro alle lettere finché sono piccole. Positivo = scende. ⚠️ Va RITARATO su ogni nuova foto, e va fatto guardando: con la foto attuale (sposi, verticale tagliata) a 2vh le lettere prendono l'abito chiaro e il blu dello smoking. */ /* ⚠️ Questo numero sposta il TESTO per scegliere quale fascia di foto finisce dentro alle lettere — quindi lo scentra anche verticalmente. Nell'originale valeva 4vh: impercettibile. Portarlo a -15vh dava più contrasto ma alzava visibilmente la parola, e la si vuole al centro (richiesta di Federico, 27 ago). Resta a 0: il contrasto si recupera dal velo e dal peso del carattere, non spostando la parola. */ --ap-word-y: 0vh; --maxw: 1200px; --pad: clamp(20px, 5vw, 64px); /* --- Geometria hero + nav in overlay ----------------------------------- --topbar-h è aggiornata a runtime dal JS: su schermi stretti la strip "NOW BOOKING…" va a capo e diventa alta il doppio. --frame-gap è la distanza fra il bordo dello schermo e la cornice fine-art della hero (la cornice è in position:absolute con inset:0, quindi parte dal bordo, non dal padding della hero): la nav si allinea DENTRO quella cornice. --nav-h è l'altezza della nav quando è in overlay (serve al margine negativo che fa partire la hero sotto di lei). È calcolata, non stimata, così non può sfasarsi. */ --topbar-h: 38px; --hero-pad: clamp(14px, 1.6vw, 22px); --frame-gap: clamp(16px, 2vw, 28px); --logo-h: 50px; --nav-inset: clamp(24px, 3.5vw, 56px); /* quanto i gruppi di link si avvicinano al logo */ --nav-pad-t: 24px; /* padding-top della nav quando è in overlay */ --nav-pad-b: 24px; /* il +1px è il border-bottom della barra: senza, la hero parte un pixel più in basso della nav e il filo della cornice non combacia con i tratti */ --nav-h: calc(var(--nav-pad-t) + var(--logo-h) + var(--nav-pad-b) + 1px); /* quota a cui passa il filo della cornice: il centro esatto della riga nav, così la linea entra fra i link invece di stargli sopra */ --frame-top: calc(var(--nav-pad-t) + var(--logo-h) / 2); --serif: "Cormorant Garamond", Georgia, serif; /* titoli/display */ /* Il Didone dei titoli editoriali. Il Cormorant è un Garamond: bello, ma con un contrasto morbido fra aste spesse e sottili. Metà dell'aria "editoriale" dei riferimenti che ha mandato lei (0:12–0:53) viene dalle aste sottili di un Didone, non dal solo gioco corsivo/maiuscolo. Convivono: Bodoni sui titoli trattati, Cormorant su tutto il resto. */ --display: "Bodoni Moda", Didot, "Times New Roman", serif; --sans: "Poppins", system-ui, -apple-system, sans-serif; /* UI/testo */ /* grana fotografica (per dare profondità ai placeholder e alla hero) */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Reset / base ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } /* Cliccando una voce di menu la sezione non deve finire sotto la barra fissa: il margine è l'altezza della nav compatta (quella dopo lo scroll) + un po' d'aria. */ section[id] { scroll-margin-top: calc(18px + var(--logo-h) + var(--nav-pad-b) + 16px); } body { font-family: var(--sans); color: var(--ink); background: var(--white); font-weight: 300; line-height: 1.7; -webkit-font-smoothing: antialiased; } img, figure { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .section { padding-block: clamp(64px, 10vw, 130px); } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.1; letter-spacing: .01em; } .eyebrow { font-family: var(--sans); font-size: .74rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--navy); margin-bottom: 1.1rem; } .eyebrow--light { color: var(--brand-blue); } .section__title { font-size: clamp(1.9rem, 4.4vw, 3.2rem); color: var(--ink); } /* ========================================================= TITOLI EDITORIALI — "le parole grandi, poi c'è scritto qui piccolo" --------------------------------------------------------- La prima cosa che Elodie ha chiesto in chiamata, nei primi quaranta secondi: 0:12 "tipo la tipografia del testo piccolo" 0:26 "mi piace la creatività [fra] le parole grandi, poi c'è scritto qui piccolo" 0:53 "con la contact page la voglio proprio così, così" Le parole portanti in maiuscolo, la parola di servizio (the, by, and, &) in corsivo minuscolo dentro. ⚠️ Il corsivo qui NON dà enfasi: toglie peso al connettivo, così le parole importanti respirano. È il contrario di come lo usavamo prima nella hero. I quattro numeri stanno insieme o l'effetto sembra un refuso: corsivo al 46% · spaziatura .012em · interlinea 1.05 · rialzo -.045em. ⚠️ Non va su tutti i titoli: sta su hero, gallery, signature, process e contact. Nei suoi riferimenti compare sui momenti forti — messo ovunque, dalla terza sezione non fa più effetto. ========================================================= */ .ed { font-family: var(--display); font-optical-sizing: auto; /* alle dimensioni grandi il Bodoni variabile assottiglia le aste: è ciò che serve qui */ font-weight: 400; text-transform: uppercase; letter-spacing: .012em; /* .99 andava bene finché i titoli stavano su una riga sola: sulle due righe della hero le maiuscole si toccavano. 1.05 lascia l'aria che hanno i suoi riferimenti senza sciogliere il blocco. */ line-height: 1.05; } .ed em { font-family: var(--display); text-transform: none; font-style: italic; font-weight: 400; font-size: .46em; letter-spacing: .005em; padding-inline: .13em; position: relative; top: -.045em; /* sulla stessa base il corsivo sembrerebbe caduto in basso */ } .section__head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 64px); } .section__intro { margin-top: 1.1rem; color: var(--ink-soft); font-size: 1.05rem; } .link-arrow { font-family: var(--sans); font-size: .82rem; font-weight: 500; letter-spacing: .06em; color: var(--navy); border-bottom: 1px solid transparent; transition: border-color .2s; } .link-arrow:hover { border-color: var(--navy); } /* ---------- Top bar ---------- */ .topbar { display: block; background: var(--navy); color: var(--brand-blue); text-align: center; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; padding: 9px 16px; } /* 🅴 1 ott, Federico: la striscia è un link a Contact (tutta la barra, non solo le parole). 🅵 Reazione discreta: la scritta passa al bianco e compare una linea sottile sotto. ⚠️ Il bordo è sullo span (inline): non cambia l'altezza della barra, che lo script legge per --topbar-h. */ .topbar span { border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color .25s ease, border-color .25s ease; } .topbar:hover, .topbar:focus-visible { color: #fff; } .topbar:hover span, .topbar:focus-visible span { border-color: rgba(224,246,253,.7); } .topbar:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -4px; } /* ---------- Header / Nav (Direzione A — wordmark centrato) ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: background .35s ease, border-color .35s ease, box-shadow .3s; } .site-header.scrolled { box-shadow: 0 6px 30px rgba(20,39,58,.06); } .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 18px; padding-bottom: var(--nav-pad-b); transition: padding .35s ease; } .nav__menu { display: contents; } /* i gruppi entrano nella griglia della nav */ .nav__grp { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); } /* grid-row:1 forza tutti sulla STESSA riga (evita che l'auto-placement spinga i gruppi in riga 2) */ /* --nav-inset avvicina i due gruppi al logo senza toccare la distanza fra un link e l'altro: sposta il blocco intero, non lo comprime. Lo stesso valore allunga i tratti di cornice (.hero__topline), così lo stacco resta uguale. */ .nav__grp--l { grid-column: 1; grid-row: 1; justify-content: flex-start; padding-left: var(--nav-inset); } .nav__grp--r { grid-column: 3; grid-row: 1; justify-content: flex-end; padding-right: var(--nav-inset); } .nav__grp a { font-family: var(--sans); font-size: .78rem; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; color: var(--ink); position: relative; padding-block: 6px; transition: color .2s; } .nav__grp a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--navy); transition: width .3s ease; } .nav__grp a:hover { color: var(--navy); } .nav__grp a:hover::after { width: 100%; } /* "Love Stories": voce del menu di Elodie la cui sezione non esiste ancora. È un senza href → stesso aspetto, ma niente cursore a mano, niente sottolineatura all'hover e niente focus da tastiera su un link morto. */ .nav__grp a:not([href]) { cursor: default; } .nav__grp a:not([href]):hover { color: var(--ink); } .nav__grp a:not([href]):hover::after { width: 0; } .brand { grid-column: 2; grid-row: 1; display: block; line-height: 0; } /* Logo ufficiale: il file ha le lettere NERE. Sopra la hero diventa bianco con brightness(0) invert(1) — stesso raster, quindi zero disallineamenti. */ .brand__logo { display: block; height: var(--logo-h); width: auto; transition: filter .35s ease; } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 34px; height: 30px; padding: 0; } .nav-toggle span { display: block; height: 2px; background: var(--ink); margin: 6px 0; transition: background .35s ease, transform .3s; } /* ========================================================= NAV IN OVERLAY SULLA HERO Si attiva solo con . Senza JS la barra resta bianca e opaca come prima → il menu è sempre leggibile. Il margine negativo toglie alla nav il suo ingombro: la hero parte sotto di lei, a filo della strip-bar. ========================================================= */ html.js .site-header { margin-bottom: calc(-1 * var(--nav-h)); } /* stato trasparente = in cima alla pagina E col menu mobile chiuso */ html.js .site-header:not(.scrolled):not(.menu-open) { background: transparent; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; } /* la nav si allinea DENTRO la cornice fine-art della hero, non a cavallo */ html.js .site-header:not(.scrolled):not(.menu-open) .nav { padding-top: var(--nav-pad-t); padding-inline: max(var(--pad), calc(var(--frame-gap) + 14px)); } /* 🅴 Elodie (29 set, via Federico): sulle zone chiare della foto (cielo del Como, pizzo, pietra) i link bianchi si perdevano. 🅵 variante C dal mockup navbar-ombra-mockups.html: ombra scura SOLO attorno alle lettere e al logo. ⚠️ Non è un velo sulla foto: la regola di Elodie (niente overlay) resta. Le ombre del logo sono due drop-shadow in fila perché un filter non accetta due ombre separate da virgola come text-shadow. */ html.js .site-header:not(.scrolled):not(.menu-open) .brand__logo { filter: brightness(0) invert(1) drop-shadow(0 1px 5px rgba(6,12,20,.75)) drop-shadow(0 0 12px rgba(6,12,20,.5)); } html.js .site-header:not(.scrolled):not(.menu-open) .nav__grp a { color: #fff; text-shadow: 0 1px 10px rgba(6,12,20,.75), 0 0 26px rgba(6,12,20,.5); } html.js .site-header:not(.scrolled):not(.menu-open) .nav__grp a:hover { color: var(--brand-blue); } html.js .site-header:not(.scrolled):not(.menu-open) .nav__grp a::after { background: var(--brand-blue); } html.js .site-header:not(.scrolled):not(.menu-open) .nav-toggle span { background: #fff; } /* ---- pagine SENZA una fotografia scura sotto la nav ---------------------- L'overlay qui sopra presuppone che sotto la barra ci sia una hero scura: rende i link bianchi e fa risalire il contenuto sotto la nav con un margine negativo. La pagina About apre invece su fondo BIANCO, e lì i link bianchi su bianco sparivano: la barra sembrava assente finché non si scorreva. Con body.nav-solid la nav parte già nello stato "dopo lo scroll" — opaca, link scuri, niente margine negativo. Vale per qualunque pagina futura che non apra con una foto scura. */ html.js body.nav-solid .site-header { margin-bottom: 0; } html.js body.nav-solid .site-header:not(.scrolled):not(.menu-open) { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom-color: var(--line); } html.js body.nav-solid .site-header:not(.scrolled):not(.menu-open) .nav { padding-top: 18px; padding-inline: var(--pad); } html.js body.nav-solid .site-header:not(.scrolled):not(.menu-open) .brand__logo { filter: none; } html.js body.nav-solid .site-header:not(.scrolled):not(.menu-open) .nav__grp a { color: var(--ink); text-shadow: none; } html.js body.nav-solid .site-header:not(.scrolled):not(.menu-open) .nav__grp a:hover { color: var(--navy); } html.js body.nav-solid .site-header:not(.scrolled):not(.menu-open) .nav__grp a::after { background: var(--navy); } html.js body.nav-solid .site-header:not(.scrolled):not(.menu-open) .nav-toggle span { background: var(--ink); } /* ========================================================= PLACEHOLDER IMMAGINI (greybox eleganti — da sostituire con le foto reali di Elodie). Tonalità legate al tema mare. ========================================================= */ .ph { position: relative; overflow: hidden; background: #c1d7e0; border-radius: 3px; } .ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.55), transparent 60%), linear-gradient(160deg, #E0F6FD 0%, #a3b8c3 55%, #667a88 100%); } .ph::after { content: attr(data-label); position: absolute; inset: auto 0 0 0; font-family: var(--sans); font-size: .66rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.92); padding: 10px 12px; background: linear-gradient(transparent, rgba(20,39,58,.45)); } /* Tonalità per differenziare i placeholder */ .ph[data-tone="sea"]::before { background: linear-gradient(160deg,#c1d7e0,#667a88 60%,#14273a); } .ph[data-tone="sea-wide"]::before { background: linear-gradient(120deg,#a3b8c3,#475b6b 55%,#14273a); } .ph[data-tone="couple"]::before { background: linear-gradient(160deg,#c1d7e0,#a3b8c3 55%,#8499a5); } .ph[data-tone="portrait"]::before { background: linear-gradient(160deg,#E0F6FD,#c1d7e0 60%,#a3b8c3); } .ph[data-tone="sand"]::before { background: linear-gradient(160deg,#E0F6FD,#cfe0e7 55%,#94a8b4); } .ph[data-tone="detail"]::before { background: linear-gradient(160deg,#a3b8c3,#8499a5 60%,#667a88); } /* ========================================================= HERO — cinematic full-bleed + fine-art frame (A+C) ========================================================= */ .hero { position: relative; overflow: hidden; background: var(--navy); /* senza JS la nav occupa spazio → la hero si toglie strip + nav */ height: calc(100vh - var(--topbar-h) - var(--nav-h)); height: calc(100svh - var(--topbar-h) - var(--nav-h)); min-height: 500px; padding: var(--hero-pad); /* passe-partout esterno */ } /* con la nav in overlay la hero si riprende la sua altezza: strip + hero = 1 schermata */ html.js .hero { height: calc(100vh - var(--topbar-h)); height: calc(100svh - var(--topbar-h)); } .hero__media { position: absolute; inset: 0; border-radius: 0; } .hero__media::after { display: none; } /* niente label sul full-bleed */ /* ═══════════════════════════════════════════════════════════════════ IL DITTICO — 🅵 Federico, 11 settembre 2026. Due verticali affiancate al posto di una 16:9, tre coppie che ruotano. Delle 79 foto del materiale 73 sono verticali: la 16:9 la costringeva a tagliare ogni volta. ⚠️ NESSUN velo e NESSUNA opacità sulle foto — richiesta esplicita. Sono sparite .hero__scrim, .hero__grain e .hero__vig: le regole non esistono più, non sono solo spente. Se un giorno servisse di nuovo un velo, va riscritto (e allora va rimesso anche dentro .ap__word). ⚠️ CONSEGUENZA NOTA, non dimenticata: senza velo il titolo bianco non ha contrasto sufficiente su tutte le foto. Misurato: nel punto più chiaro di ogni scatto il contrasto sta fra 1,1:1 e 1,9:1, contro i 4,5:1 richiesti. 🅵 Federico, 11 set: "il titolo non ti preoccupare, poi faremo delle modifiche". È un punto aperto dichiarato. ═══════════════════════════════════════════════════════════════════ */ .hero__stack { position: absolute; inset: 0; z-index: 0; } /* ⚠️ La PRIMA coppia ha .is-on già nell'HTML: lo stato a riposo deve essere quello visibile. Senza JS, o con le animazioni sospese in una scheda in secondo piano, la hero resta comunque piena. */ .hero__pair { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; opacity: 0; transition: opacity 1.5s cubic-bezier(.4, 0, .2, 1); } .hero__pair.is-on { opacity: 1; } .hero__pair figure { position: relative; overflow: hidden; margin: 0; } /* ⚠️ height:100% deve vincere sull'attributo height dell', che altrimenti si applica come altezza reale. */ .hero__pair img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ⚠️ Su telefono il dittico NON regge: a 390px ogni metà sarebbe larga 195px su 743 di altezza, cioè un rapporto 0,26 — una fessura che taglia via due terzi di ogni fotografia, facce comprese. Sotto i 760px resta quindi UNA SOLA foto per coppia, a tutta larghezza: la prima delle due, perché in tutte e tre le coppie è quella che regge meglio un taglio verticale (lo sposo in piedi, gli sposi all'altare, la pochette ravvicinata). Le seconde sono composizioni larghe e si rovinerebbero. Il ritmo delle tre coppie resta, cambia solo quante se ne vedono per volta. ⚠️ Questa media query sta QUI e non nel blocco generale più in alto nel file: a parità di specificità vince la regola che viene DOPO. */ @media (max-width: 760px) { .hero__pair { grid-template-columns: 1fr; } .hero__pair figure:last-child { display: none; } } .hero__frame { position: absolute; inset: 0; z-index: 5; pointer-events: none; border: 1px solid rgba(255,255,255,.72); margin: var(--frame-gap); } /* Con la nav in overlay il lato superiore della cornice sparisce e viene ridisegnato all'altezza della nav come due soli tratti laterali: i monconi che partono dagli angoli sono .hero__topline. */ html.js .hero__frame { margin: 0 var(--frame-gap) var(--frame-gap); top: var(--frame-top); border-top: 0; } .hero__topline { display: none; } html.js .hero__topline { display: block; position: absolute; z-index: 5; pointer-events: none; top: var(--frame-top); height: 1px; background: rgba(255,255,255,.72); /* dall'angolo della cornice fin poco prima del primo link: la distanza dipende da quanto è centrato il contenitore, quindi si calcola */ width: max(12px, calc(max((100% - var(--maxw)) / 2, 0px) + var(--pad) + var(--nav-inset) - var(--frame-gap) - 18px)); } html.js .hero__topline--l { left: var(--frame-gap); } html.js .hero__topline--r { right: var(--frame-gap); } /* Composizione B — centrato raffinato & arioso */ .hero__content { position: absolute; z-index: 6; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #fff; padding: 0 24px; } /* ---- HERO: tre soli elementi (decisione del 10 ago, riletta il 27) ---- ① parole chiave piccole (è l'H1) · ② la "frase grande" con l'italico · ③ un solo CTA a pulsante. Occhiello "Bonjour" e doppio link rimossi. */ /* min .7rem = 11.2px: sotto si legge male, ed è un tema che ha sollevato lei (12:36, "mio padre e la moglie mi dicono che è troppo piccolo") */ /* Le parole chiave stanno in fondo alla hero (scelta di Federico, 27 ago: variante D dei mockup). ⚠️ 🅵 11 set — CAMBIATO IL MODO, e con esso una decisione del 27 agosto. Prima si usava translateY proprio PER NON muovere il titolo: il transform sposta senza togliere dal flusso, quindi l'ingombro restava in cima al blocco centrale. Era voluto — "il titolo e il pulsante non cambiano di un centimetro" — ma aveva un effetto collaterale mai notato: quei 65px di altezza più 22 di margine spingevano il titolo 44px SOTTO il centro della hero (misurato: centro titolo 475, centro hero 431). 🅵 "il titolo lo voglio esattamente al centro della hero" batte la richiesta di allora. Ora l'H1 è fuori dal blocco e ancorato al fondo con position:absolute, quindi non ingombra più nulla. ✅ Sparisce anche il modulo JS che calcolava --key-drop: bottom in CSS fa la stessa cosa senza misurare, senza listener di resize e senza ricalcolare quando arrivano i webfont. L'ombra non è un vezzo: con questa foto le parole chiave cadono sulla giacca bianca dello sposo e senza sparivano. È anche la regola che ha dato lei nel vocale 07: "deve essere chiaro e leggibile", priorità assoluta. Meglio un'ombra che scurire tutta la fotografia. */ /* ⚠️ NIENTE padding-inline qui. Con box-sizing:border-box il padding si mangia il max-width: 30ch fanno 236px, meno 48 di padding restavano 189 di larghezza utile e il testo passava da 3 righe a 5. Il margine dai bordi lo garantisce già il min() sul max-width. */ .hero__key { position: absolute; z-index: 6; left: 0; right: 0; bottom: clamp(30px, 4vw, 54px); text-align: center; font-family: var(--sans); font-weight: 300; font-size: clamp(.7rem, 1.05vw, .8rem); letter-spacing: .26em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 14px rgba(6,12,20,.92), 0 0 34px rgba(6,12,20,.7); line-height: 1.7; max-width: min(30ch, calc(100% - 48px)); margin-inline: auto; } /* ⚠️ Le misure dei titoli trattati sono più piccole di prima. Il maiuscolo occupa circa un terzo in più del minuscolo: con i clamp di prima la hero arrivava al 97% della larghezza dello schermo e la gallery all'89%. Non è un ripensamento sulla scala — è la stessa scala ottica, ricalcolata sul maiuscolo. Nei riferimenti di Elodie i titoli stanno intorno al 70%. */ /* ⚠️ margin 0, non 22px: quel margine staccava il titolo dalle parole chiave che una volta stavano SOPRA. Dall'11 set l'H1 è ancorato al fondo della hero e il blocco centrale contiene solo questo titolo — un margine superiore lo spingerebbe di metà (11px) sotto il centro. */ /* ⚠️ L'OMBRA — 🅵 livello 2 "media", scelto fra quattro in mockup/hero-ombra-titolo.html (11 set). Era 0 2px 24px rgba(6,12,20,.5): una dose tarata quando sotto c'era ancora il velo della hero. Tolto il velo, su tutte e sei le foto il titolo bianco scendeva a un contrasto fra 1,07:1 e 1,73:1 nel punto più chiaro — contro i 4,5:1 richiesti. Anche lo smoking nero ha la camicia bianca proprio dove passa il titolo. Questi valori NON sono inventati: sono DERIVATI da .hero__key, che sta sopra il muro bianco della sposa alla finestra e si legge benissimo. ⚠️ Non sono identici, e non devono esserlo: .hero__key è .92@14px + .7@34px su lettere da 12,8px; qui le lettere sono 54px e servono aloni più larghi (16 e 46px) per coprire proporzionalmente lo stesso spazio attorno ai glifi. Stessa logica, misure scalate. ⚠️ Non alzarla oltre. A dosi maggiori, attorno alle aste sottili del Bodoni compare un alone che sporca le lettere invece di staccarle — e si nota soprattutto sulle foto scure, dove non serviva. Se una coppia non regge nemmeno così, si cambia la COPPIA o si sposta il titolo: non si peggiorano le fotografie per salvare il testo. */ .hero__title { font-size: clamp(1.75rem, 4.2vw, 3.4rem); color: #fff; text-shadow: 0 1px 16px rgba(6,12,20,.9), 0 0 46px rgba(6,12,20,.62); margin: 0; } /* l'italico è su "Inspired" e "Light": due parole, come chiesto a 110:03 */ /* .hero__cta-btn — lo è stato TOLTO da index.html l'11 set 2026 (decisione di Federico). La regola resta: per far tornare il pulsante basta rimettere la riga, che è nel commento al suo posto in index.html. */ .hero__cta-btn { display: inline-block; margin-top: 32px; font-family: var(--sans); font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,.66); padding: 15px 32px; transition: background .25s, color .25s, border-color .25s; } .hero__cta-btn:hover { background: #fff; color: var(--ink); border-color: #fff; } /* ---- MANIFESTO ("02. A short introduction") ---- I due subtesti scesi dalla hero + la riga geografica, che sta qui e non in alto: decisione di Federico del 27 ago. */ /* 🅴 Elodie, WhatsApp del 2 set: "tra la short introduction e la parte about c'è troppo spazio bianco" + "ingrandire un po' l'introduzione del manifesto". Erano 249px di vuoto: 96 di chiusura qui + 130 di apertura dell'about, che si sommavano senza che nessuno dei due sapesse dell'altro. 🅵 Federico, 2 set: scelta la variante C su tre confrontate in mockup/manifesto-spazio-mockups.html — la più compatta delle tre. ⚠️ Si tocca SOLO il padding di sotto: lo spazio fra hero e manifesto resta quello di prima. */ .manifesto { background: var(--white); padding-block: clamp(54px, 7vw, 96px); text-align: center; } .manifesto { padding-bottom: clamp(24px, 2.8vw, 40px); } .manifesto .eyebrow { color: var(--navy); } /* ⭐ La frase passa da 31,2 a 41,6px, che NON è un numero scelto a occhio: è lo stesso clamp dei titoli di sezione (riga 431). Il manifesto è la prima cosa che si legge dopo la hero, ma era scritto più piccolo di ogni titolo che introduce — era rimasto indietro quando abbiamo unificato le misure editoriali. Spazio ce n'era: la riga più lunga usava 546px su 900, e a 41,6px ne usa 725. Va a capo solo oltre i 51px. */ /* ⚠️ margin-top 0 e non 22px: quel margine staccava il titolo dall'occhiello "A short introduction", tolto l'11 set. Senza niente sopra, restava solo a sbilanciare la spaziatura della sezione. */ .manifesto__lead { margin: 0 auto; max-width: 900px; font-size: clamp(1.45rem, 2.9vw, 2.6rem); color: var(--ink); } /* Era 14,7px: più piccolo del testo normale del sito (16px) e del paragrafo dell'about, che dice cose meno importanti. Ora 17px. */ /* ⚠️ 14px e non 18 come sopra, di proposito: questo paragrafo ha interlinea 1.9 e si porta dietro 8px di mezza interlinea contro 1 del titolo. Con lo stesso margine il vuoto sotto il titolo sembrerebbe più largo di quello sopra. A 14 i due distacchi ottici pareggiano: ~23px entrambi. */ .manifesto__text { margin: clamp(10px, 1.2vw, 14px) auto 0; max-width: 640px; font-size: clamp(.95rem, 1.2vw, 1.0625rem); line-height: 1.9; color: var(--ink-soft); } /* 🅵 11 set: tutto maiuscolo — "così in minuscolo stona un po'". ⚠️ Il maiuscolo non è solo un text-transform: chiede misure diverse. Scesa da .78 a .72rem e tracking da .10 a .18em, perché le maiuscole hanno tutte la stessa altezza e senza aria fra le lettere si impastano. Effetto collaterale voluto: ora questa riga parla la stessa lingua degli occhielli del sito, e fa da ancora in fondo alla sezione dopo che l'occhiello in cima ("A short introduction") è stato tolto. */ /* ⚠️ 🅵 11 set: sta SOPRA il titolo (test). Quindi il margine è sotto, non sopra: da elemento di chiusura è diventato di apertura. */ /* ⚠️ 🅵 11 set: la riga sta SOPRA il titolo, quindi il margine è SOTTO. 18px e non 11: il vicino qui è il titolo, che ha interlinea 1.05 e porta solo 1px di mezza interlinea; sotto il paragrafo ce ne sarebbero 8 e il numero andrebbe abbassato. Con 18 il distacco ottico è ~23px, pari a quello fra titolo e paragrafo. ⚠️ Se un giorno questa riga torna in fondo, il margine va RICALCOLATO, non spostato: stesso vuoto percepito, numero diverso. */ .manifesto__geo { margin: 0 auto clamp(12px, 1.5vw, 18px); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); } /* .manifesto__rule — lo è stato TOLTO da index.html il 2 set (variante C). Era il segno "qui il manifesto finisce": senza, il manifesto non si chiude, scivola dentro l'about. Costava 31px (30 di margine + 1 di riga). La regola resta: se la lineetta deve tornare, basta rimettere lo span. */ .manifesto__rule { display: block; width: 46px; height: 1px; background: var(--navy); opacity: .35; margin: 30px auto 0; } /* ========================================================= ABOUT ========================================================= */ /* 🅵 2 set, variante C: l'about apriva a 130px dall'alto, che sommati ai 96 di chiusura del manifesto facevano 249px di bianco. Scende a 64px. ⚠️ La regola è scritta su .about.section e NON su .section, che è condivisa da mezzo sito: cambiare .section qui sposterebbe ogni altra sezione. 🅴 Elodie (29 set, via Federico): troppo respiro fra la foto e la fascia azzurra. 🅵 variante B dal mockup: il padding di SOTTO scende da 130 a 80px a schermo largo (64→44 su telefono). */ .about.section { padding-top: clamp(36px, 4.6vw, 64px); padding-bottom: clamp(44px, 6.2vw, 80px); } .about__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: center; } .about__img { aspect-ratio: 4/5; overflow: hidden; border-radius: 3px; background: #dfe8ec; } .about__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; display: block; } /* I titoli in colonna hanno una misura loro. Vivono in mezza pagina, non a tutta larghezza: in maiuscolo "MEET the PHOTOGRAPHER" alla misura piena andava a capo da solo e finiva su tre righe invece delle due volute dal
. E vale anche dove il testo ci starebbe: About ed Experience sono due colonne quasi identiche nella stessa pagina, e a misure diverse (41.6 contro 51.2) si vedrebbe. Vale anche per il Journal, la cui testata sta in un blocco da 640px. */ /* ⚠️ TUTTI i titoli di sezione trattati stanno a questa misura, non solo quelli in colonna. Due motivi: · in Investment i .section__title arrivavano a 51.2px contro i 43.2 del titolo della PAGINA: le sezioni erano più grandi della loro testata, e la gerarchia risultava capovolta; · a 51.2 in maiuscolo i titoli lunghi ("STORIES, PLACES & GUIDES", "MEET the PHOTOGRAPHER") andavano a capo da soli dentro i blocchi da 525-640px, finendo su una riga in più di quelle volute dal
. Restano più grandi solo le due testate di pagina: la hero della home (54.4px) e il pagehero di Investment (43.2px). */ /* ⚠️⚠️ QUESTO È UN ELENCO DI CINQUE SELETTORI, non cinque regole. Le prime quattro righe finiscono con la virgola: la dichiarazione qui sotto vale per tutte e cinque. Il 12 set ho sostituito l'ultima riga credendola una regola a sé: i quattro selettori si sono incollati alla regola successiva, hanno preso il suo `text-align: center` — centrando i titoli di About ed Experience — e hanno perso questo limite di corpo, diventando più grandi. Se si tocca una di queste righe, guardare SEMPRE quelle sopra e sotto. */ .section__title.ed, .yw__t, .about__text .section__title, .experience__text .section__title, .journal .section__title { font-size: clamp(1.45rem, 2.9vw, 2.6rem); } /* 🅵 12 set: nel Journal occhiello e titolo centrati, non a sinistra. Stesso trattamento già usato in Services, À la carte, Process e FAQ: `.section__head` nasce allineato a sinistra e ogni sezione che lo vuole centrato lo dichiara. La specificità (0,2,0 contro 0,1,0) vince sulla regola di base indipendentemente dall'ordine. ⚠️ 720px e non 640: il titolo misura 550px su una riga sola a corpo pieno, e il margine serve perché un titolo più lungo non vada a capo. */ /* 🅵 12 set: "fra Journal e l'inizio dei contatti c'è leggermente troppo respiro, va diminuito leggermente". ⚠️ Il vuoto NON è di un margine solo: è la somma del padding sotto del Journal (130) più quello sopra dei contatti (132), e faceva 288px. Ridurre solo uno dei due avrebbe sbilanciato il ritmo, quindi scendono entrambi. ⚠️ Selettore .journal.section e non .journal: la misura di partenza arriva da .section, che ha la stessa specificità — così vince per specificità e non per ordine, che è fragile. Dal 29 set scende anche il respiro sopra (vedi sotto). */ /* 🅴 Elodie (29 set, via Federico): troppo respiro fra la frase sui premi e l'occhiello "Journal". 🅵 variante C dal mockup: sopra il Journal da 130 a 60px a schermo largo (64→36 su telefono). Il vuoto sotto la frase (46px) non cambia. */ .journal.section { padding-top: clamp(36px, 4.6vw, 60px); padding-bottom: clamp(40px, 5.6vw, 76px); } .journal .section__head { max-width: 720px; margin-inline: auto; text-align: center; } .about__text p { margin-top: 1.1rem; color: var(--ink-soft); } .about__text strong { color: var(--ink); font-weight: 500; } /* ⚠️ .about__text .link-arrow non serve più: dall'11 set quel link è un .btn-solid. La regola resta perché .link-arrow è usata altrove (journal, investment), ma qui dentro non c'è più niente che la usi. */ .about__text .link-arrow { display: inline-block; margin-top: 1.6rem; } /* il pulsante dell'About in home: stesso stacco dal testo che gli serve in colonna */ .about__btn { margin-top: 1.9rem; } /* ═══════════════════════════════════════════════════════════════════ PULSANTE VUOTO — 🅵 prova dell'11 set. Bordo e scritta navy su fondo trasparente; al passaggio del mouse si riempie. ⚠️ Il bordo è INTERNO (box-shadow inset) e non `border`: un border vero aggiunge 2px alle misure esterne, e il pulsante risulterebbe più grande del .btn-solid accanto. Così i due restano identici al pixel. ⚠️ Niente transition su `opacity` ereditata da .btn-solid: qui a cambiare sono fondo e colore del testo, e vanno animati loro. ═══════════════════════════════════════════════════════════════════ */ /* ⚠️ Il selettore è .btn-solid.btn-ghost e non il solo .btn-ghost: le due classi avrebbero la stessa specificità e vincerebbe quella scritta DOPO nel file — che è .btn-solid, 60 righe più in basso. Il pulsante restava pieno. Con due classi insieme la specificità sale e l'ordine non conta più: la regola regge anche se un domani i blocchi vengono spostati. */ .btn-solid.btn-ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); transition: background .28s ease, color .28s ease; } .btn-solid.btn-ghost:hover { background: var(--navy); color: var(--white); opacity: 1; } /* la riga di chiusura del suo testo: sta da sola, in corsivo, come una firma */ .about__claim { color: var(--ink) !important; margin-top: 1.9rem !important; } /* ========================================================= SIGNATURE BAND (navy · white) ========================================================= */ /* 🅵 12 set: trittico foto · testo · foto. Prima era un fondale orizzontale con il testo sopra. Fuori il velo scuro, la grana, la vignettatura e la scritta verticale laterale: nel trittico il testo non sta più sopra una foto, quindi non serve niente per renderlo leggibile. 100svh e non 100vh: su iPhone la barra del browser si ritrae e con vh la sezione salterebbe di qualche decina di pixel durante lo scroll. */ .signature { min-height: 100svh; display: grid; /* le due foto uguali, il centro poco meno: a 1440 fa 493 | 454 | 493. Il minmax evita che la colonna del testo si strozzi sui portatili piccoli, dove diventerebbe illeggibile prima di arrivare al media query. */ grid-template-columns: 1fr minmax(340px, .92fr) 1fr; background: var(--white); } .signature__lato { margin: 0; overflow: hidden; } /* ⚠️ height:100% qui DEVE vincere sull'attributo height dell': senza, l'attributo si applica come altezza reale. Difetto già incontrato sulla hero della pagina About. */ .signature__lato img { width: 100%; height: 100%; object-fit: cover; display: block; } .signature__centro { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; /* ⚠️ Sopra e sotto resta largo, ai lati si stringe: è il margine laterale che fa da spazio libero al titolo. Ridurlo allarga il titolo SENZA toccare le colonne delle foto, che è la condizione posta da Federico. */ padding-block: clamp(28px, 3.6vw, 62px); padding-inline: clamp(20px, 2.2vw, 40px); /* rende questa colonna l'unità di misura del titolo: vedi sotto */ container-type: inline-size; } .signature .eyebrow { margin-bottom: clamp(18px, 2.2vw, 26px); } /* 🅵 12 set: "il titolo è un po' troppo piccolo, voglio che occupi lo spazio bianco che ha a sinistra e a destra, senza restringere le foto". ⚠️ Il corpo è legato alla LARGHEZZA DELLA COLONNA (cqw), non a quella dello schermo (vw). Con vw il titolo sbatteva contro il tetto massimo mentre la colonna continuava a crescere: a 1440 riempiva l'88% dello spazio, su una finestra da 1990 solo il 55%. Con cqw il riempimento resta costante a qualsiasi larghezza, ed è esattamente quello che serviva. ⚠️ 1cqw è l'1% della SCATOLA INTERNA della colonna, cioè già al netto del padding — non della colonna intera. Sbagliarlo rimpicciolisce il titolo. 9.73cqw è calcolato: la riga più lunga misura 9,87 volte il corpo, quindi 9,87 × 9,73% ≈ 96% dello spazio disponibile, a qualsiasi larghezza. Se cambia il testo del titolo quel 9,87 cambia e va rimisurato. */ .signature__title { font-size: clamp(1.25rem, 9.73cqw, 4.6rem); color: var(--navy); } .signature__lead { margin-top: clamp(15px, 1.9vw, 22px); color: #55636d; font-size: clamp(.8rem, .95vw, .88rem); line-height: 1.95; max-width: 30ch; } .signature__btn { margin-top: clamp(22px, 2.9vw, 34px); } /* ⚠️ Il media query sta QUI, accanto al componente, e non nel blocco comune più in basso: a parità di specificità vince la regola che viene dopo, e lì sotto verrebbe scavalcato. Errore già fatto due volte su questo sito. Sotto i 900px tre colonne non ci stanno: il testo passa sopra le due foto. */ @media (max-width: 900px) { /* 🔧 19 ott (controllo da telefono): l'ordine nell'HTML è foto · testo · foto, e senza posizioni esplicite la griglia metteva la prima foto a sinistra, il testo sotto e la seconda foto di nuovo a SINISTRA, lasciando mezza riga vuota. Ora: testo in alto a tutta larghezza, le due foto affiancate sotto (come diceva il commento qui sopra). Niente più altezza minima: le foto sono 2:3. */ .signature { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; min-height: 0; } .signature__centro { grid-column: 1 / -1; grid-row: 1; padding-block: clamp(36px, 7vw, 60px); } .signature__lato { aspect-ratio: 2 / 3; grid-row: 2; } .signature__lato:first-child { grid-column: 1; } .signature__lato:last-child { grid-column: 2; } .signature__title br { display: none; } } /* ========================================================= SERVICES ========================================================= */ .services .section__head { text-align: center; margin-inline: auto; } /* ---- EXPERIENCE + INVESTMENT: una sezione sola (variante B) ---- Foto a sinistra, i tre step a destra, e sotto i due rimandi. Le vecchie .card con i prezzi sono state rimosse: i prezzi stanno solo nella pagina Investment (75:01). */ .experience__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 5vw, 68px); align-items: center; } .experience__media { aspect-ratio: 3/4; overflow: hidden; background: #dfe7ea; } .experience__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .experience__text .section__title { margin-top: 14px; } .steps { list-style: none; margin-top: 30px; display: flex; flex-direction: column; gap: 20px; } .step { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; } /* 🅵 11 set: cerchio navy pieno di colore (era al 28% di opacità, quasi invisibile) e numeri in Poppins. ⚠️ Il motivo per cui i numeri si leggevano male non era il corpo: era che il Cormorant usa le CIFRE ANTICHE (oldstyle), quelle con ascendenti e discendenti come le lettere minuscole. Il suo "1" è alto quanto una x e somiglia a una "i" maiuscola, il "3" scende sotto la riga di base. Sono bellissime dentro un testo corrente e sbagliate dentro un cerchio, dove servono cifre tutte della stessa altezza. Poppins le ha di serie, e lining-nums lo dichiara esplicitamente. ⚠️ Corpo sceso da .95 a .82rem: Poppins ha un'altezza dell'occhio molto maggiore del Cormorant, e a parità di corpo il numero riempirebbe troppo il cerchio. */ /* Il padding-top serve a centrare l'INCHIOSTRO, non la scatola. align-items:center centra la scatola di riga; ma dentro quella scatola la cifra non sta a metà, perché ascendente e discendente del Poppins non sono simmetriche rispetto all'altezza delle maiuscole. Misurato: l'inchiostro restava 0,45px sopra il centro del cerchio, su tutte e tre le cifre. Con box-sizing:border-box e altezza fissa, il padding sposta in basso il centro del contenuto di METÀ del suo valore: 0,9px di padding = 0,45px. ⚠️ COME SI RIMISURA, se si cambia carattere o corpo: la sonda per leggere la linea di base deve stare NELLA STESSA RIGA DI TESTO della cifra, cioè dentro un insieme ad essa. Se la si appende direttamente a .step__n diventa un flex item e restituisce il centro della scatola, non la linea di base: dà 16px qualunque cosa si faccia, e porta fuori strada. */ .step__n { width: 32px; height: 32px; flex: none; border: 1px solid var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; padding-top: .9px; font-family: var(--sans); font-weight: 400; font-size: .82rem; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; color: var(--navy); } .step__t { font-family: var(--serif); font-weight: 400; font-size: 1.16rem; line-height: 1.3; color: var(--ink); } .step__d { margin-top: 3px; font-size: .85rem; line-height: 1.8; color: var(--ink-soft); } .experience__cta { margin-top: 34px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .btn-solid { display: inline-block; font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--white); background: var(--navy); padding: 15px 30px; transition: opacity .25s; } .btn-solid:hover { opacity: .86; } /* ========================================================= 04 · GALLERY PREVIEW — griglia 3×3 da bordo a bordo Direzione B dei mockup. Il filo di 3px fra le foto è lo stesso della fascia Instagram nel footer: il sito usa due volte lo stesso gesto invece di inventarne uno nuovo. ⚠️ Griglia rigorosamente regolare: "questa parte non la voglio sfasata" (48:19), stessa altezza e stesse spaziature. ========================================================= */ .hgal { padding-block: clamp(50px, 7vw, 92px); background: var(--white); } .hgal__head { text-align: center; margin-bottom: clamp(34px, 4.5vw, 52px); } .hgal__title { font-size: clamp(1.35rem, 2.6vw, 2rem); color: var(--ink); } .hgal__lead { max-width: 46em; margin: 18px auto 0; font-size: clamp(.88rem, 1.1vw, .95rem); line-height: 1.9; color: var(--ink-soft); } /* 🅵 Federico, 2 set: "le foto non le vorrei così larghe che toccano i lati, sempre la griglia da 9 ma più stretta, lasciando un po' di spazio fra i bordi". Scelta la variante A su tre confrontate in mockup/gallery-larghezza-mockups.html. La griglia rientra nel margine del sito: le foto passano da 478 a 355px e la sezione perde 552px di altezza (2157 → 1605), oltre mezza schermata di scroll in meno prima del pulsante "View the Gallery". ⚠️ Le FUGHE restano a 3px: le nove foto continuano a leggersi come un mosaico unico, che è il punto della variante A. La B le staccava a 16px. ⭐ Dopo la fascia Instagram (§6.6.5) questa era l'ultima cosa della home che sfondava i bordi: ora titolo, griglia e fascia partono tutti da 184px. */ /* 🅴 Elodie, 12 set (via Federico): "il portfolio in home lo vorrebbe ancora più piccolo". ⚠️ Non foto di forma diversa: stessa griglia da 9, stesse proporzioni 2:3, stesse fughe da 3px — cambia SOLO la larghezza massima, e quindi la scala. Da 1200 a 1000px: le foto passano da 355 a 289px e la sezione perde altri 300px di altezza (1605 → 1305). 🅵 Scelta la variante A su quattro confrontate in mockup/portfolio-misura-mockups.html. La C (800px) scartata: a 222px di larghezza le perle, i fiori e i volti cominciano a perdersi. ⚠️ La testata sopra resta nel contenitore da 1200, ma è testo centrato col sommario a 46em (~736px): resta comunque più stretta della griglia. */ .hgal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; max-width: 1000px; margin-inline: auto; padding-inline: var(--pad); } .hgal__shot { display: block; position: relative; overflow: hidden; background: #dfe7ea; aspect-ratio: 2/3; } .hgal__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.3,1); } .hgal__shot:hover img { transform: scale(1.04); } /* un velo blu appena percettibile all'hover: lo stesso della fascia Instagram */ .hgal__shot::after { content: ""; position: absolute; inset: 0; background: rgba(20,39,58,0); transition: background .35s; } .hgal__shot:hover::after { background: rgba(20,39,58,.12); } .hgal__foot { text-align: center; margin-top: clamp(34px, 4.5vw, 52px); } /* ========================================================= PORTFOLIO (portfolio.html) — le 48 foto, griglia uniforme 2:3 come in home. 🅵 16 ott: impaginazione A scelta fra tre (mockup/portfolio-impaginazione-mockups.html). Stesse fughe da 3px della griglia in home; larghezza 1200 (la home sta a 1000 perché è un assaggio, qui le foto sono il contenuto della pagina). ⚠️ Niente velo né zoom all'hover (regola di Elodie: nessun velo sulle foto) e le foto non sono link: non c'è ancora un ingrandimento. ⚠️ Su telefono restano DUE colonne (la home ne ha una): con 48 foto una per riga sarebbero oltre 30 schermate di scroll. */ .pf { padding-block: clamp(50px, 7vw, 92px) clamp(60px, 8vw, 110px); background: var(--white); } .pf__head { text-align: center; margin-bottom: clamp(34px, 4.5vw, 52px); } .pf__title { font-size: clamp(1.6rem, 3.4vw, 2.6rem); color: var(--ink); margin: .5rem 0 0; } .pf__lead { max-width: 46em; margin: 18px auto 0; font-size: clamp(.88rem, 1.1vw, .95rem); line-height: 1.9; color: var(--ink-soft); } .pf__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; max-width: 1200px; margin-inline: auto; padding-inline: var(--pad); } .pf__shot { margin: 0; overflow: hidden; background: #dfe7ea; aspect-ratio: 2/3; } .pf__shot img { width: 100%; height: 100%; object-fit: cover; display: block; } .pf__foot { text-align: center; margin-top: clamp(50px, 6vw, 84px); } .pf__ask { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.25rem, 2.2vw, 1.7rem); color: var(--ink); margin: 0 0 1.5rem; } @media (max-width: 900px) { .pf__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .pf__grid { gap: 2px; padding-inline: 0; } } /* ========================================================= JOURNAL — articolo in evidenza (home e journal.html) e pagina articolo 🅵 16 ott: home V2, pagina Journal A, articolo A (colonna unica da 720px), scelte fra le varianti di mockup/journal-home-indice-mockups.html e journal-articolo-mockups.html. ⚠️ Niente velo sulle foto: il testo dell'articolo in evidenza sta accanto alla foto. ⚠️ .posts/.post (carte verticali) restano sopra: serviranno quando gli articoli saranno 3. */ .feat { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; color: inherit; } .feat__img { margin: 0; overflow: hidden; aspect-ratio: 3/2; background: #dfe7ea; } .feat__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2, 0, .2, 1); } .feat:hover .feat__img img, .feat:focus-visible .feat__img img { transform: scale(1.03); } .feat__t { font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.2; color: var(--navy); margin: .6rem 0 1rem; } .feat__txt p { font-size: .92rem; line-height: 1.9; color: var(--ink-soft); margin: 0 0 1.6rem; } .journal .feat { margin-top: 0; } .jr { padding-block: clamp(50px, 7vw, 92px) clamp(60px, 8vw, 110px); background: var(--white); } .jr__head { text-align: center; margin-bottom: clamp(36px, 5vw, 60px); } .jr__title { font-size: clamp(1.8rem, 3.6vw, 2.8rem); color: var(--ink); margin: .5rem 0 0; } .jr__lead { max-width: 40em; margin: 18px auto 0; font-size: clamp(.88rem, 1.1vw, .95rem); line-height: 1.9; color: var(--ink-soft); } .jr__soon { text-align: center; margin: clamp(40px, 5vw, 64px) 0 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.2rem; color: var(--ink-soft); } .art { padding-block: clamp(50px, 7vw, 92px) clamp(60px, 8vw, 110px); background: var(--white); } .art__head { text-align: center; max-width: 860px; margin-bottom: clamp(30px, 4vw, 52px); } .art__head .eyebrow a { color: inherit; } .art__title { font-size: clamp(1.8rem, 3.6vw, 2.9rem); line-height: 1.15; color: var(--navy); margin: .6rem 0 1rem; } .art__by { font-family: var(--sans); font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin: 0; } .art__col { max-width: calc(720px + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); } .art__col figure { margin: 2em 0; } .art__col img { display: block; width: 100%; height: auto; } .art__col .art__hero { margin-top: 0; } .art__col .solo { width: 62%; margin-inline: auto; } .art__col .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 2em 0; } .art__col .pair figure { margin: 0; aspect-ratio: 5/7; overflow: hidden; } /* 🅵 16 ott: le due foto di una coppia hanno la stessa altezza (formato 5:7, ritaglio minimo). ⚠️ height:100% deve vincere su height:auto di ".art__col img". */ .art__col .pair img { height: 100%; object-fit: cover; } /* 🅴 Elodie 17 ott (punto 5): "la scrittura del blog mi sembra troppo sottile… più scura e più spessa, oppure lo stesso font del resto del sito; scegli tu". 🅵 18 ott: B1 (mockup/blocco3): stesso carattere, peso 500 (era 300, il default del sito), 1.25rem, colore quasi nero. I titoli restano. */ .art__col p { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; line-height: 1.85; color: #14212d; margin: 0 0 1.2em; } .art__col h2 { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.2; color: var(--navy); margin: 1.9em 0 .6em; } .art__col p a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .art__col p a:hover { opacity: .7; } /* le frasi corte a capo di Elodie: righe distinte, ravvicinate */ .art__col .lines { margin: 0 0 1.2em; } .art__col .lines p { margin: 0 0 .35em; } .art__cta { text-align: center; border-top: 1px solid #dfe7ea; margin-top: 3em; padding-top: 2.4em; } .art__col .art__cta p { font-style: italic; font-weight: 300; font-size: 1.6rem; color: var(--navy); margin: 0 0 1.2rem; } .art__back { display: block; margin-top: 1.6rem; font-family: var(--sans); font-size: .64rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); } @media (max-width: 900px) { .feat { grid-template-columns: 1fr; } } /* ========================================================= TESTIMONIALS — slim navy carousel, one quote at a time ========================================================= */ /* position:relative serve ai comandi, che sono posizionati in assoluto */ .testi { background: var(--navy); color: var(--white); position: relative; } /* ⚠️ I COMANDI NON DEVONO ALZARE LA FASCIA — vincolo esplicito di Federico (11 set): "i puntini li aggiungi in più, ma non devono alzare la sezione". Per questo sono in position:absolute: stanno dentro i 100px di padding inferiore che la fascia ha già, senza entrare nel flusso. Verificato: l'altezza resta 390px (305 a 375), identica a quando c'erano i pallini. 🅵 16 set: i pallini sono diventati quattro trattini sottili, variante A di mockup/recensioni-comandi-mockups.html. Quello attivo si riempie nel tempo in cui la recensione resta a schermo; quelli già letti restano pieni. ⚠️ La durata del riempimento NON è scritta qui: la imposta lo script in --testi-tempo, dallo stesso numero che fa girare le recensioni. Così i due tempi non possono separarsi. 6.5s è solo il valore di riserva. */ .testi__ctrl { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(22px, 3vw, 38px); display: flex; justify-content: center; align-items: center; } /* il trattino è largo 36px ma il pulsante è 46×25: su telefono un filo da 1px sarebbe impossibile da prendere col dito */ .testi__voce { display: block; padding: 12px 5px; margin: 0; background: none; border: 0; cursor: pointer; } .testi__seg { display: block; width: 36px; height: 1px; background: rgba(224,246,253,.26); position: relative; overflow: hidden; transition: background .3s; } .testi__seg i { position: absolute; inset: 0; background: var(--brand-blue); transform: scaleX(0); transform-origin: left; } /* ⚠️ Stato a riposo VISIBILE: già letti e attivo sono pieni anche senza animazione. Con le animazioni sospese non resta mai un trattino vuoto al posto di quello attivo. */ .testi__voce.is-done .testi__seg i, .testi__voce.is-on .testi__seg i { transform: scaleX(1); } .testi__voce.is-on .testi__seg i { animation: testiRiempi var(--testi-tempo, 6.5s) linear; } @keyframes testiRiempi { from { transform: scaleX(0); } to { transform: scaleX(1); } } .testi__voce:hover .testi__seg { background: rgba(224,246,253,.6); } .testi__voce:focus-visible { outline: 1px solid var(--brand-blue); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .testi__voce.is-on .testi__seg i { animation: none; } } .testi__inner { text-align: center; max-width: 74ch; padding-block: clamp(56px, 8vw, 100px); } .testi__mark { display: block; font-family: var(--serif); font-size: 4rem; line-height: .6; color: var(--brand-blue); opacity: .55; margin-bottom: 6px; } /* ⚠️ Le due citazioni stanno nella STESSA cella di griglia, sovrapposte: così il contenitore prende l'altezza della più lunga e NON salta quando si cambia. Con display:none/block l'altezza cambiava a ogni giro. ⚠️ Lo stato a riposo è visibile: .is-active è già nell'HTML. Senza JS, o con le animazioni sospese in una scheda in secondo piano, si vede comunque la prima recensione. */ .testi__slides { display: grid; } .testi__slide { grid-area: 1 / 1; opacity: 0; transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1); pointer-events: none; } .testi__slide.is-active { opacity: 1; pointer-events: auto; } @keyframes testiFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* La citazione ferma della home usa gli stessi valori delle slide del carosello che resta in Investment: se un giorno si decide di uniformarle, basta cambiarli qui e valgono per tutte e due. */ .testi__slide p, .testi__one p { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.5; color: var(--white); } .testi__slide cite, .testi__one cite { display: block; margin-top: 1.1rem; font-family: var(--sans); font-size: .75rem; font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7); } .testi__slide cite b, .testi__one cite b { color: var(--brand-blue); font-weight: 400; } /* 🅵 15 ott: panoramica 21:9 a tutta larghezza fra la frase sui premi e il Journal. Il file è GIÀ ritagliato a 21:9 (e a 4:3 per i telefoni): niente object-fit che taglia in modo diverso da quello deciso. Altezza a 1440px: 617px. ⚠️ line-height:0 e display:block sull'immagine: senza, sotto resta la riga di testo vuota (qualche pixel di bianco) dell'inline. */ .pano { background: var(--white); line-height: 0; } .pano img { display: block; width: 100%; height: auto; } @media (max-width: 560px) { .pano img { aspect-ratio: 4/3; object-fit: cover; } } /* ═══════════════════════════════════════════════════════════════════ LA RIGA SUI PREMI — 🅵 11 set: sta FUORI dalla fascia navy, sotto. "Dentro la sezione per me stona troppo. La metterei sotto, in modo che stacchi un po' e sia più una piccola frase di annuncio." Su bianco, in corpo minuto e centrata: si legge come una nota a margine, non come parte delle recensioni. E "awards" ha comunque il suo referente a pochi centimetri, appena sopra. ═══════════════════════════════════════════════════════════════════ */ /* 🅵 12 set: "fra la sezione delle recensioni e questa dicitura c'è un po' troppo spazio, dovrebbe esserci meno respiro". ⚠️ Spaziatura ASIMMETRICA, e non è una svista: questa nota è una postilla alle recensioni, non una sezione a sé. Poco sopra la tiene attaccata alla fascia navy; il respiro sotto serve a staccarla da ciò che segue. ⚠️ Il vuoto che si VEDE non è quello scritto qui: l'interlinea 1.9 aggiunge ~6px di mezza interlinea sopra la prima riga. Era 46 dichiarati = 52 ottici. */ /* 🅴 Elodie 17 ott (Loom 0:33–0:52): "c'è un po' la differenza di spazi… questa linea la puoi scendere un po'". 18 ott, variante A di mockup/blocco3: lo spazio sopra e sotto la frase ora è uguale (visibile: 37 e 37 a 1280 px). ⚠️ INVERTE la decisione asimmetrica del 12 set (sopra 22, sotto 46): era voluta da Federico. Se serve tornare indietro: padding-top clamp(14px,1.7vw,22px), padding-bottom clamp(30px,3.6vw,46px). */ .awards-note { background: var(--white); padding-top: clamp(20px, 2.4vw, 31px); padding-bottom: clamp(26px, 2.9vw, 37px); } .awards-note p { max-width: 46em; margin-inline: auto; text-align: center; font-size: .82rem; line-height: 1.9; color: #7b878d; font-style: italic; } @media (prefers-reduced-motion: reduce) { .testi__slide.is-active { animation: none; } } /* ========================================================= JOURNAL ========================================================= */ /* 🅵 12 set: carte verticali col testo DENTRO l'immagine (variante C dei mockup). Occhiello e titolo sempre visibili, "Read" al passaggio del mouse. ⚠️ La sfumatura c'è sempre, e non è un vezzo: le foto hanno luminosità media fra 177 e 207 su 255 — sono chiare, e del testo bianco appoggiato sopra senza niente sotto non si leggerebbe. Misurato, non stimato. */ .posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 34px); } .post { position: relative; display: block; overflow: hidden; aspect-ratio: 3/4; background: #dfe4e7; } .post__img { position: absolute; inset: 0; margin: 0; } /* ⚠️ height:100% DEVE vincere sull'attributo height dell': senza, l'attributo si applica come altezza reale. Difetto già visto altrove. */ .post__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2, 0, .2, 1); } .post__velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(10, 18, 28, .78) 0%, rgba(10, 18, 28, .34) 40%, rgba(10, 18, 28, 0) 72%); } .post__body { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(18px, 2vw, 26px); color: var(--white); } .post__meta { display: block; font-family: var(--sans); font-size: .6rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--brand-blue); margin-bottom: 10px; } .post__t { font-family: var(--serif); font-weight: 400; font-size: clamp(1.02rem, 1.5vw, 1.3rem); line-height: 1.28; margin: 0; color: var(--white); } /* "Read" è l'unica cosa che arriva col mouse */ .post__link { display: block; margin-top: 14px; font-family: var(--sans); font-size: .64rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: transform .5s cubic-bezier(.2, 0, .2, 1), opacity .4s ease; } .post:hover .post__link, .post:focus-visible .post__link { opacity: 1; transform: none; } .post:hover .post__img img, .post:focus-visible .post__img img { transform: scale(1.04); } /* ⚠️ Su telefono e tablet il mouse non esiste: se "Read" restasse nascosto lì non comparirebbe mai. Qui resta visibile sempre. Il testo è comunque sempre nel codice, anche quando non si vede: serve a Google e agli screen reader. */ @media (hover: none) { .post__link { opacity: 1; transform: none; } } /* ⚠️ Questi media query stanno QUI, accanto al componente, e non nel blocco comune più in basso: a parità di specificità vince la regola che viene dopo. Errore già fatto tre volte su questo sito. Prima le carte passavano da 3 colonne a 1 sola sotto i 900px: con la proporzione 3:4 una carta a tutta larghezza su un tablet diventava enorme. */ @media (max-width: 900px) { .posts { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .posts { grid-template-columns: 1fr; } } /* ========================================================= CTA BAND — full-bleed photo close, bookend with hero ========================================================= */ /* 🅵 12 set: era una fascia scura col segnaposto di una foto a tutto campo. Adesso è solo testo scuro su bianco. Spariti media, grana, vignettatura e velo: tenevano leggibile del testo bianco sopra una foto, e senza foto non hanno più un lavoro da fare. ⚠️ `min-height` sostituito da `padding-block`: senza una fotografia da far respirare, un'altezza minima non ha più senso — lo spazio deve nascere dal testo. Ed è generoso apposta: Journal sopra, Instagram e footer sotto sono tutti bianchi, quindi è il solo respiro che separa questa fascia dal resto. */ /* 🅵 12 set, secondo giro: ridotto anche qui, sopra e sotto. Sotto serviva per il secondo vuoto segnalato, quello fra il pulsante e la fascia Instagram: 132 + 56 del padding di Instagram facevano 168px. */ /* ⚠️ Sopra e sotto SCOLLEGATI, e non è una svista. Servono a due vuoti diversi: quello sopra al distacco dal Journal, quello sotto a quello dalla fascia Instagram. Federico voleva il primo più corto del secondo, quindi un padding-block unico non poteva più bastare. */ /* 🅴 Elodie (29 set, via Federico): troppo respiro fra il pulsante e il nome Instagram. 🅵 variante C dal mockup: il padding di SOTTO scende da 104 a 52px a schermo largo (60→34 su telefono). ⚠️ Regola condivisa: vale anche in investment.html, dove la fascia precede lo stesso blocco Instagram. */ .cta-band { background: var(--white); padding-top: clamp(44px, 5.8vw, 78px); padding-bottom: clamp(34px, 3.8vw, 52px); } .cta-band__inner { max-width: 640px; margin-inline: auto; text-align: center; padding: 0 24px; } /* 🅵 "il titolo possiamo farlo leggermente più grande, ma giusto leggermente": da 2.5rem a 2.75rem al massimo, cioè +10%. */ .cta-band__title { font-size: clamp(1.7rem, 3.8vw, 2.75rem); color: var(--navy); margin: .7rem 0 1rem; } .cta-band__lead { max-width: 46ch; margin-inline: auto; color: var(--ink-soft); font-size: 1.05rem; } /* 🅵 il link con la freccia diventa un pulsante pieno */ .cta-band__btn { margin-top: 1.9rem; } /* ═══════════════════════════════════════════════════════════════════ LE RIGHE DI CHIUSURA — 🅵 variante B, Federico 11 settembre 2026. Quattro trattamenti confrontati in mockup/claim-maiuscolo-mockups.html. Prima erano in CORSIVO Cormorant. 🅵 segnalato due volte, su due sezioni diverse: "questo mezzo corsivo non mi fa impazzire" e "questo corsivo qua mi fa abbastanza schifo". ⚠️ Non erano due casi isolati: lo stesso corsivo reggeva SETTE righe di chiusura in tutto il sito. Cambiarne due sole le avrebbe rese incoerenti col resto, quindi la decisione vale per tutte. Perché il corsivo stonava davvero: accanto al Bodoni dei titoli e al Poppins del testo era una TERZA voce, che non apparteneva a nessuna delle due famiglie del sito. Il maiuscolo Poppins spaziato usa invece il carattere che già regge tutto il testo corrente. ⚠️ NON toccate, e non è una dimenticanza: · .chooser__intro — è il LEAD della pagina Investment, non una chiusura: è grande per mestiere, rimpicciolirlo la decapiterebbe. · .kw__i p — sono le kind words, cioè la VOCE DI UN CLIENTE. Una testimonianza in maiuscoletto sans smette di essere una voce. ═══════════════════════════════════════════════════════════════════ */ /* ⚠️ 🅵 11 set, sera — LA REGOLA È STATA CORRETTA. Al mattino il maiuscolo era stato dato a tutte e cinque le righe di chiusura senza distinguere. Era una semplificazione sbagliata, e si è vista qui: misurate le lunghezze, il maiuscolo REGGE UNA RIGA SOLA. footer 33 car → 1 riga ✅ "If Italy..." 69 car → 1 riga ✅ eye__claim 74 car → 2 righe exp__note 86 → 2 about__claim 87 → 3 ❌ Su una riga il maiuscolo è un'insegna; su due o tre diventa un blocco di lettere tutte alte uguali, senza ascendenti né discendenti che guidino l'occhio. E in mezzo a un testo da leggere introduce una TERZA voce (quella di occhielli e pulsanti) dove la sezione ne ha già due. ═══════════════════════════════════════════════════════════════════ */ /* ---- 1. le CORTE restano in maiuscolo: stanno su una riga ---- */ .footer__claim, .who__close { font-family: var(--sans); font-weight: 400; font-style: normal; text-transform: uppercase; font-size: clamp(.76rem, 1vw, .88rem); letter-spacing: .2em; line-height: 2; } /* ---- 2. le LUNGHE che CHIUDONO: Bodoni minuscolo, staccate da un filetto ---- 🅵 variante C, scelta fra quattro in mockup/about-home-testi-mockups.html. Non cambiano voce per farsi riconoscere: le riconosci perché sono SEPARATE. È il modo in cui una rivista chiude un pezzo. Così la sezione torna ad avere due sole voci — il Bodoni dei titoli e il Poppins del testo. */ .about__claim, .exp__note { font-family: var(--display); font-optical-sizing: auto; font-weight: 400; font-style: normal; text-transform: none; font-size: clamp(1.05rem, 1.5vw, 1.18rem); line-height: 1.5; letter-spacing: .004em; max-width: 26em; padding-top: clamp(16px, 1.8vw, 21px); border-top: 1px solid #dbe3e7; } /* ---- 3. la LUNGA che APRE: stesso carattere, NIENTE filetto ---- ⚠️ .eye__claim non sta in fondo: sta FRA il titolo e il paragrafo, ed è una citazione fra virgolette. Un filetto sopra la staccherebbe dal titolo a cui appartiene, e un maiuscolo le toglierebbe la voce: una frase fra virgolette in maiuscoletto non suona più come qualcuno che parla. */ .eye__claim { font-family: var(--display); font-optical-sizing: auto; font-weight: 400; font-style: normal; text-transform: none; font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.5; letter-spacing: .004em; } /* ⚠️ La rottura forzata dentro .about__claim serve SOLO finché la colonna è larga abbastanza da tenere la prima metà su una riga. Sotto gli 860px il testo va a capo da solo in punti diversi, l'orfana non si presenta, e il
aggiungerebbe una riga per niente: misurato, 4 righe invece di 3. Qui la si spegne. (Stesso accorgimento della citazione in .first__quote.) */ @media (max-width: 860px) { .about__claim br { display: none; } } /* ========================================================= FOOTER ========================================================= */ /* ============================================================= FASCIA INSTAGRAM + FOOTER — Direzione A "Audrey" Bianco, centrato, minimale. Deciso in chiamata il 10 ago 2026. Modello: lesecretdaudrey.com (fascia IG su bianco + riga di chiusura). ============================================================= */ /* ---- fascia Instagram (sopra il footer) ---- */ .iggrid { background: var(--white); padding-top: clamp(34px, 4vw, 56px); } .iggrid__head { text-align: center; margin-bottom: 22px; } /* 🅵 12 set: da Cormorant corsivo a ITALIANA (variante D su cinque a confronto in mockup/instagram-nome-mockups.html). È il carattere della parola che apre il sito, usato finora una volta sola: riprenderlo qui fa parlare con la stessa voce la prima cosa che si vede e l'ultima prima del footer. ⚠️ Italiana ha UN SOLO peso (400) e aste sottilissime, e le sue minuscole sono molto più magre delle maiuscole — e un nome utente è tutto minuscolo. Niente font-weight: chiedere un peso che non esiste farebbe fare al browser un grassetto sintetico, con bordi sporchi. Compensato allargando la spaziatura a .06em e alzando il corpo rispetto al Cormorant di prima. ⚠️ La fascia Instagram sta su TUTTE E QUATTRO le pagine, ma Italiana era caricato solo nella home: aggiunto anche in about, contact e investment, altrimenti lì il nome ripiegava su un altro carattere. */ .iggrid__at { display: inline-block; margin-top: 6px; font-family: "Italiana", var(--serif); font-weight: 400; font-style: normal; font-size: clamp(1.2rem, 2.15vw, 1.62rem); letter-spacing: .06em; color: var(--ink); border-bottom: 1px solid transparent; transition: border-color .25s; } .iggrid__at:hover { border-color: var(--navy); } /* 🅴 Elodie, vocale del 28 ago (00:52 e 01:05): "le foto le vorrei un po' più piccole, un po' più discrete". Due parole, non una — e la seconda è quella che conta: a piena larghezza la fascia taglia lo schermo da un bordo all'altro, ed è QUELLO a renderla invadente, non la misura delle foto. 🅵 Federico, 29 ago: scelta la variante B su tre a confronto in mockup/instagram-size-mockups.html. La striscia rientra nel margine del sito come ogni altra sezione: le foto scendono da 238 a 177px (-26%) e compare aria bianca ai due lati. Le colonne restano sei — la riduzione arriva dal margine, non dall'aggiungerne altre. */ /* 🅴 1 ott: la riga di 6 foto fisse è stata sostituita dal widget LightWidget (vedi l'HTML). Il widget sta nello stesso margine della striscia di prima (variante B del 29 ago: dentro il margine del sito, non a tutta larghezza). ⚠️ L'iframe ha 150px di altezza di partenza: lo script di LightWidget la porta a quella vera (circa 154px a schermo largo, 2 righe su telefono). */ .iggrid__widget { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .iggrid__widget iframe { display: block; width: 100%; border: 0; overflow: hidden; min-height: 120px; } /* ---- footer ---- */ .site-footer { background: var(--white); color: var(--ink); } .footer__lock { text-align: center; padding-top: clamp(38px, 4.5vw, 56px); } .footer__wm { height: clamp(30px, 3.4vw, 42px); width: auto; margin: 0 auto; opacity: .92; } .footer__claim { margin-top: 18px; color: var(--ink-soft); } .footer__meta { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(14px, 2.5vw, 32px); margin-top: 26px; font-size: .875rem; color: var(--ink-soft); } .footer__meta a { transition: color .2s; } .footer__meta a:hover { color: var(--navy); } /* .footer__nl (newsletter) rimossa il 26 ago — decisione di Federico. Elodie aveva chiesto di tenerla (116:09): se torna, il blocco stava qui. Senza newsletter, .footer__meta è l'ultimo elemento prima del testo SEO: il margine di .footer__seo sotto basta a tenere il respiro. */ /* blocco SEO: richiesta di Elodie (call 20:16). Testo piccolo, leggibile, non invadente */ .footer__seo { margin-top: clamp(34px, 4vw, 46px); padding-top: clamp(22px, 3vw, 30px); border-top: 1px solid var(--line); } .footer__seo p { max-width: 900px; margin: 0 auto; text-align: center; font-size: .78rem; line-height: 1.85; color: #7b878d; } /* 🅵 12 set: tolta la firma centrale, poi anche "Back to top". Rimasto il solo copyright, la griglia a tre colonne non serve più: un elemento centrato basta, ed è meno impalcatura per lo stesso risultato. */ .footer__bottom { text-align: center; margin-top: clamp(26px, 3vw, 36px); padding-block: 22px; border-top: 1px solid var(--line); font-size: .72rem; letter-spacing: .08em; color: #93a0a6; } /* ========================================================= Scroll reveal ========================================================= */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; } .reveal.in { opacity: 1; transform: none; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 900px) { /* logo e cornice più contenuti → --nav-h si ricalcola da sola */ :root { --logo-h: 38px; --nav-pad-b: 20px; --frame-gap: 12px; /* qui la nav è hamburger + logo: torna DENTRO la cornice invece di attraversarla, quindi serve lo spazio per scansarla */ --nav-pad-t: calc(var(--frame-gap) + 20px); } /* cornice di nuovo rettangolo intero, senza filo che passa nella nav */ html.js .hero__frame { margin: var(--frame-gap); top: var(--frame-gap); border-top: 1px solid rgba(255,255,255,.72); } html.js .hero__topline { display: none; } .nav { display: flex; justify-content: center; position: relative; padding-top: 14px; padding-bottom: var(--nav-pad-b); } .nav-toggle { display: block; position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); } .nav__menu { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--line); max-height: 0; overflow: hidden; transition: max-height .4s ease; } .nav__menu.open { max-height: 560px; } .nav__grp { flex-direction: column; gap: 0; padding-inline: var(--pad); } .nav__grp--l { padding-top: 6px; } .nav__grp--r { padding-bottom: 18px; } .nav__grp a { width: 100%; padding: 13px 0; border-bottom: 1px solid var(--line); } .nav__grp a::after { display: none; } .about__grid { grid-template-columns: 1fr; } .about__img { aspect-ratio: 16/10; } /* la sezione experience passa a una colonna: prima la foto, poi gli step */ .experience__grid { grid-template-columns: 1fr; } .experience__media { aspect-ratio: 16/10; } /* tre colonne su tablet diventano francobolli: si passa a due */ .hgal__grid { grid-template-columns: repeat(2, 1fr); } /* 🅵 Federico, 19 ott: "A · due colonne, 8 foto" (mockup/home-galleria-telefono-mockups.html). Con due colonne le 9 foto lascerebbero una foto sola in fondo: la 9ª resta solo su computer. È lazy: nascosta, non si scarica. */ .hgal__shot:nth-child(9) { display: none; } } @media (max-width: 560px) { /* 19 ott: due colonne a filo (come il Portfolio), foto 2:3. Prima: una colonna da 3:4, che faceva la galleria alta 4.409 px (il 40% della pagina). Ora ~1.500. Era una scelta mia (12 set), non di Elodie. */ .hgal__grid { grid-template-columns: repeat(2, 1fr); gap: 3px; padding-inline: 0; } .hgal__shot { aspect-ratio: 2/3; } .hero { min-height: 460px; } /* Il corpo segue la larghezza dello schermo (8vw), che è esattamente da cosa dipende se "and Genuine Connection" ci sta o no: così il titolo resta a due righe da 320px in su, invece di sbriciolarsi in tre o quattro. */ .hero__title { font-size: clamp(1.35rem, 6.2vw, 2.5rem); } /* le parole chiave restano leggibili (11.2px) ma con tracking più stretto e senza limite di colonna: così stanno in 2 righe invece di 5 */ /* ⚠️ non max-width:none: senza un limite il testo arriverebbe a filo dei bordi dello schermo. Serve solo togliere il tetto dei 30ch, non ogni margine. Il tracking più stretto basta a tenerlo su poche righe. */ .hero__key { max-width: calc(100% - 40px); letter-spacing: .12em; } /* la cornice ora segue --frame-gap (impostata a 12px in cima a questa media query), così la nav in overlay resta allineata a lei anche su telefono */ /* ⚠️ ⛔ ERA: .hero__content { bottom: 12%; } — RIMOSSO 🅵 11 set. Residuo di un layout precedente in cui il blocco era ancorato in basso. Con top:50% E bottom insieme l'elemento si STIRA fra i due, e il translateY(-50%) lo alzava: su 390px il titolo finiva 116px SOPRA il centro della hero. Tolto, vale la centratura di base. */ .footer__meta { flex-direction: column; gap: 10px; } } /* ============================================================= PAGINA INVESTMENT — creata il 27 ago 2026 Contenuti dal documento di Elodie (materiale/DOC-INVESTMENT_2026-08-27.md). ============================================================= */ /* hero di pagina: più bassa della hero home, senza cornice */ /* ⚠️ Stessa altezza della hero della home: schermo pieno meno la strip e la nav. Le due erano a min(56vh, 440px) e min(62vh, 500px) — tagliate a metà schermo — perché nascondevano un placeholder grigio. Ora che c'è la fotografia vera possono riempire. 100svh e non 100vh: su iPhone la barra del browser si ritrae scorrendo, e con vh la hero "salta" di quei 60px al primo tocco. */ .pagehero { position: relative; overflow: hidden; min-height: calc(100svh - var(--topbar-h) - var(--nav-h)); display: flex; align-items: flex-end; } /* 🅴 Elodie/Federico (1 ott): la hero di Investment deve riempire TUTTO lo schermo, come quella della home, non fermarsi 99px prima. Causa: la nav sta in overlay sulla foto (.site-header ha margin-bottom negativo), quindi la hero NON deve togliere la sua altezza. In home lo fa "html.js .hero"; qui mancava, e restava una striscia bianca alta quanto la nav. Sotto html.js la nav non occupa spazio → si toglie solo la strip. Senza JS la nav occupa spazio e resta la formula sopra. (La hero di Contact, che aveva la stessa mancanza, è stata tolta il 1 ott.) */ html.js .pagehero { min-height: calc(100vh - var(--topbar-h)); min-height: calc(100svh - var(--topbar-h)); } .pagehero__media { position: absolute; inset: 0; margin: 0; } .pagehero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; } /* ⚠️ Il velo era .50 → .72 su tutta l'altezza: nato per coprire un placeholder grigio, non per accompagnare una fotografia. Ora che la foto c'è, serve solo dove sta il testo — qui in basso. In alto resta quasi nulla, il tempo di far staccare i link bianchi della nav. */ .pagehero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,12,20,.42) 0%, rgba(6,12,20,.16) 22%, rgba(6,12,20,.22) 48%, rgba(6,12,20,.62) 82%, rgba(6,12,20,.78) 100%); } .pagehero__inner { position: relative; z-index: 5; padding-block: clamp(40px, 6vw, 76px); color: #fff; } .pagehero__title { font-size: clamp(1.5rem, 3.6vw, 2.7rem); margin-top: 14px; } .pagehero__sub { margin-top: 16px; font-size: clamp(.86rem, 1.2vw, .96rem); color: rgba(255,255,255,.84); max-width: 56ch; } /* selettore delle tre esperienze */ .chooser__intro { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.2vw, 1.65rem); line-height: 1.5; color: var(--ink); max-width: 40ch; } .chooser__lead { margin-top: 22px; max-width: 68ch; font-size: .92rem; line-height: 1.95; color: var(--ink-soft); } .picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 34px); margin-top: clamp(40px, 5vw, 64px); } .pick { display: block; } /* 🅴 16 ott: ora le card e le sezioni hanno le foto vere di Elodie (prima segnaposto .ph) */ .pick__img { aspect-ratio: 4/5; margin-bottom: 18px; overflow: hidden; background: #dfe7ea; } .pick__img img, .exp__img img { display: block; width: 100%; height: 100%; object-fit: cover; } .pick__t { font-size: clamp(1rem, 1.7vw, 1.32rem); color: var(--ink); } .pick__d { margin-top: 8px; font-size: .88rem; line-height: 1.75; color: var(--ink-soft); } .pick__p { margin-top: 14px; font-size: .74rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--navy); } .pick:hover .pick__t { color: var(--navy); } /* le tre sezioni-esperienza */ .exp--alt { background: #f7f9fa; } .exp__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 72px); align-items: center; } .exp--alt .exp__grid { grid-template-columns: 1.1fr 1fr; } .exp__img { aspect-ratio: 4/5; margin: 0; overflow: hidden; background: #dfe7ea; } .exp__txt .section__title { margin-top: 10px; } .exp__p { margin-top: 20px; font-size: .92rem; line-height: 1.95; color: var(--ink-soft); } .exp__p strong { color: var(--ink); font-weight: 500; } .exp__note { margin-top: 24px; color: var(--ink); } /* callout barca */ .callout { margin-top: 26px; padding: 20px 22px; background: rgba(224,246,253,.42); border-left: 2px solid var(--navy); } .callout__t { font-weight: 500; font-size: .88rem; color: var(--ink); margin-bottom: 8px; } .callout p { font-size: .86rem; line-height: 1.85; color: var(--ink-soft); } /* à la carte */ /* 🅵 Federico, 28 ago: à la carte al centro come il process. La lista resta allineata — nome a sinistra, prezzo a destra: è un listino, e un listino centrato non si legge — ma il BLOCCO è centrato nella pagina, e con lui la testata e la nota in fondo. */ .alacarte .section__head { max-width: 700px; margin-inline: auto; text-align: center; } .addons { list-style: none; max-width: 720px; margin-inline: auto; } .addons li { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: .92rem; color: var(--ink); } .addons li em { font-style: normal; color: var(--ink-soft); font-size: .84rem; } .addons__p { white-space: nowrap; color: var(--navy); font-size: .82rem; letter-spacing: .04em; } /* etichetta piccola in maiuscolo: "Examples of add-ons" e "Always included" */ .addons__inc-t { max-width: 720px; margin: clamp(30px, 3.4vw, 44px) auto clamp(10px, 1.4vw, 16px); font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--navy); text-align: center; } .alacarte__lab { margin-top: 0; } /* 🅵 29 set, variante A (mockup carta-prezzi-testo-mockups.html): il testo sotto la lista era un blocco unico. Ora: la frase "preview" attaccata alla lista, "Always included" in tre righe con un trattino sottile, e i viaggi che chiudono sotto una linea. */ .alacarte__pv { margin: 20px auto 0; max-width: 720px; text-align: center; font-style: italic; font-size: .84rem; color: var(--ink-soft); } .alacarte__inc { list-style: none; max-width: 720px; margin: 0 auto; padding: 0; text-align: center; } .alacarte__inc li { font-size: .9rem; line-height: 1.8; color: var(--ink); padding: 3px 0; } .alacarte__inc li::before { content: ""; display: inline-block; width: 16px; height: 1px; background: var(--navy); opacity: .45; margin-right: 12px; vertical-align: middle; position: relative; top: -.1em; } .alacarte__inc li em { font-style: normal; color: var(--ink-soft); font-size: .82rem; } /* 🅴 Elodie (30 set, via Federico): troppo respiro fra la fine di À la carte e l'inizio di Process. 🅵 variante C (mockup respiro-carta-process-mockups.html): il vuoto era la SOMMA di due padding generici di .section, 130 + 130 = 260px; scende a 60 + 60 = 120px a schermo largo (32 + 32 su telefono). ⚠️ .alacarte.section e .process.section, non .section: è condivisa da mezzo sito. Qui si tocca solo il lato che guarda l'altra sezione. */ .alacarte.section { padding-bottom: clamp(32px, 4.6vw, 60px); } /* 🅴 Elodie (29 set, via Federico): troppo respiro fra la linea e i testi, sopra e sotto. 🅵 variante B (mockup linea-carta-mockups.html): sopra da 44 a 28px, sotto da 30 a 22px a schermo largo. */ .alacarte__note { margin: clamp(20px, 2.1vw, 28px) auto 0; padding-top: clamp(16px, 1.7vw, 22px); max-width: 56ch; border-top: 1px solid var(--line); font-size: .84rem; line-height: 1.9; color: var(--ink-soft); text-align: center; } /* ========================================================= TIMELINE DEL PROCESS — la linea che scende, chiesta a 44:58 --------------------------------------------------------- La riga grigia sta sempre lì; sopra ci scorre una riga blu che cresce con lo scroll (--tl-p, scritta dal JS). Ogni tappa si accende quando la sua pallina passa la linea di lettura. ⚠️ Il riposo è ACCESO: se il JS non parte — o se la scheda è in secondo piano, dove le transizioni restano sospese — tutte le tappe si leggono normalmente. L'attenuazione vive solo sotto .js. ========================================================= */ .tline { list-style: none; position: relative; /* 🅴 Elodie (1 ott, via Federico): la timeline stava tutta a sinistra mentre titolo e frase sono centrati. 🅵 variante C del mockup process-centro-mockups.html: a METÀ STRADA fra la sinistra e il centro esatto. Il blocco resta allineato a sinistra al suo interno (numeri, linea, titoli, testi) e si sposta intero: margin-left = un quarto dello spazio che avanza oltre gli 860px. ⚠️ La larghezza è esplicita (min) perché con un margine a sinistra un blocco "auto" si restringerebbe. max(0px, …) tiene la regola spenta quando il contenitore è più stretto di 860px (tablet, telefono): lì non si sposta. */ width: min(860px, 100%); margin-left: max(0px, calc((100% - 860px) / 4)); margin-top: clamp(8px, 2vw, 24px); --tl-col: clamp(58px, 7vw, 92px); /* colonna del numero */ --tl-dot: 11px; } /* la guida grigia e il suo riempimento blu */ /* --tl-a e --tl-h le scrive il JS: così la guida parte esattamente sulla prima pallina e finisce sull'ultima, in qualunque layout. I valori di riposo servono solo per il primo frame e per il caso senza JS, dove comunque nessuno li vede muoversi. */ .tline__rail { position: absolute; top: var(--tl-a, 14px); height: var(--tl-h, calc(100% - 28px)); left: calc(var(--tl-col) + 20px); width: 1px; background: rgba(20,39,58,.13); } .tline__fill { position: absolute; inset: 0; display: block; background: var(--navy); transform: scaleY(0); transform-origin: top; transition: transform .18s linear; } .tstep { position: relative; display: grid; grid-template-columns: var(--tl-col) 41px 1fr; align-items: start; padding-block: clamp(26px, 3.4vw, 42px); } .tstep:first-child { padding-top: 4px; } .tstep:last-child { padding-bottom: 4px; } /* colonna di sinistra: la fase e il numero, allineati a destra così cadono contro la linea invece di galleggiare */ .tstep__aside { text-align: right; padding-right: 22px; padding-top: 2px; } .tstep__n { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; color: rgba(20,39,58,.26); } /* la pallina, centrata sulla linea */ .tstep__dot { width: var(--tl-dot); height: var(--tl-dot); border-radius: 50%; margin: 9px auto 0; background: var(--white); box-shadow: 0 0 0 1px rgba(20,39,58,.24); position: relative; z-index: 2; } .tstep__dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: rgba(20,39,58,.10); transform: scale(0); opacity: 0; } .tstep__body { padding-left: clamp(4px, 1.4vw, 18px); max-width: 46em; } .tstep__t { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2.3vw, 1.75rem); line-height: 1.25; color: var(--ink); } .tstep__d { margin-top: 12px; font-size: clamp(.88rem, 1.05vw, .95rem); line-height: 1.95; color: var(--ink-soft); } /* 🅵 1 ott, variante A del mockup process-etichette-mockups.html: i passi 01 e 02 hanno più paragrafi, e le etichette "Weddings:" / "Proposals & couple shoots:" stanno in grassetto sulla stessa riga, come le ha scritte Elodie. */ .tstep__d + .tstep__d { margin-top: 10px; } .tstep__d .lab { font-weight: 500; color: var(--ink); } /* ---- lo stato acceso/spento: solo con il JS attivo ---- */ .js .tstep__n, .js .tstep__t, .js .tstep__d { transition: color .55s ease, opacity .55s ease; } .js .tstep__dot { transition: background .45s ease, box-shadow .45s ease; } .js .tstep__dot::after { transition: transform .5s cubic-bezier(.2,.8,.3,1), opacity .5s ease; } .js .tline.is-live .tstep:not(.is-on) .tstep__n { color: rgba(20,39,58,.13); } .js .tline.is-live .tstep:not(.is-on) .tstep__t { color: rgba(26,26,26,.34); } .js .tline.is-live .tstep:not(.is-on) .tstep__d { color: rgba(85,99,106,.38); } .js .tline.is-live .tstep.is-on .tstep__dot { background: var(--navy); box-shadow: 0 0 0 1px var(--navy); } .js .tline.is-live .tstep.is-on .tstep__dot::after { transform: scale(1); opacity: 1; } .js .tline.is-live .tstep.is-on .tstep__n { color: var(--navy); } /* 🅵 Federico, 28 ago: testata e bottone al centro, la timeline resta a sinistra. Prima il bottone era incolonnato sotto il testo delle tappe (padding-left = colonna del numero + pallina) e la testata partiva dal margine sinistro: tutto allineato a sinistra, e la sezione pendeva da quella parte. Ora i due estremi — quello che introduce e quello che chiude — sono centrati, e in mezzo la timeline tiene il suo asse. */ /* vedi .alacarte.section: il lato sopra scende da 130 a 60px (30 set) */ /* 🅴 Elodie (1 ott, via Federico): troppo respiro fra il pulsante "Begin your journey" e "Good to know". 🅵 variante C (mockup respiro-process-faq-mockups.html): 130 + 130 = 260px diventano 60 + 60 = 120px a schermo largo (32 + 32 su telefono). Il lato SOPRA di Process (già a 60px) non cambia: qui scende solo il padding di sotto. */ .process.section { padding-top: clamp(32px, 4.6vw, 60px); padding-bottom: clamp(32px, 4.6vw, 60px); } /* 🅴 Elodie (1 ott, via Federico): leggermente troppo spazio fra il sottotitolo e l'inizio della timeline. 🅵 variante B del mockup respiro-process-timeline-mockups.html: il margine sotto la testata scende da 64 a 42px a schermo largo (36→24 su telefono). ⚠️ Solo qui: .section__head è condivisa da tutte le testate del sito. */ .process .section__head { max-width: 700px; margin-inline: auto; text-align: center; margin-bottom: clamp(24px, 3.4vw, 42px); } .tline__foot { margin-top: clamp(38px, 4.6vw, 60px); text-align: center; } @media (prefers-reduced-motion: reduce) { .tline__fill { transition: none; } .js .tstep__n, .js .tstep__t, .js .tstep__d, .js .tstep__dot, .js .tstep__dot::after { transition: none; } } @media (max-width: 760px) { /* la colonna della fase non ci sta più a fianco: fase e numero salgono sopra al titolo, e la linea si sposta al bordo sinistro */ .tline { --tl-col: 0px; padding-left: 30px; } .tline__rail { left: 5px; } .tstep { grid-template-columns: 1fr; padding-left: 0; } .tstep__aside { text-align: left; padding: 0 0 8px; } .tstep__n { font-size: 1.15rem; } .tline__foot { padding-left: 0; } .tstep__dot { position: absolute; left: -30px; top: 4px; margin: 0; } .tstep__body { padding-left: 0; } } /* FAQ */ /* 🅵 Federico, 28 ago: anche le FAQ al centro, come il process e l'à la carte. Il BLOCCO è centrato; dentro, domanda a sinistra e "+" a destra restano dove sono — una domanda centrata con il segno che la insegue non si legge, e il "+" perderebbe il suo posto fisso su cui tornare. */ /* vedi .process.section: il lato sopra scende da 130 a 60px (1 ott) */ .faq.section { padding-top: clamp(32px, 4.6vw, 60px); } .faq .section__head { max-width: 700px; margin-inline: auto; text-align: center; } .faqs { max-width: 800px; margin-inline: auto; } .faq__i { border-bottom: 1px solid var(--line); } .faq__i summary { cursor: pointer; list-style: none; padding: 20px 34px 20px 0; position: relative; font-size: 1rem; color: var(--ink); transition: color .2s; } .faq__i summary::-webkit-details-marker { display: none; } .faq__i summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: var(--navy); transition: transform .3s; } .faq__i[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq__i summary:hover { color: var(--navy); } .faq__i p { padding: 0 34px 22px 0; font-size: .9rem; line-height: 1.9; color: var(--ink-soft); } @media (max-width: 900px) { .picks { grid-template-columns: 1fr; gap: 34px; } .exp__grid, .exp--alt .exp__grid { grid-template-columns: 1fr; } /* 4/5 e non 16/11: le foto di Elodie sono verticali, un taglio orizzontale ne mostrerebbe meno della metà */ .exp__img { aspect-ratio: 4/5; } /* nelle sezioni pari la foto starebbe sotto: la riporto sopra il testo */ .exp--alt .exp__grid > .exp__txt { order: 2; } .exp--alt .exp__grid > .exp__img { order: 1; } } @media (max-width: 560px) { .addons li { flex-direction: column; gap: 4px; } } /* ============================================================= PAGINA CONTACT — creata il 27 ago 2026 Foto a lato + form Studio Ninja. (Fino al 1 ott c'era sopra una foto grande con le "kind words" che scorrevano: tolta, con le sue regole .cthero e .kw.) ============================================================= */ /* blocco contatto: foto a sinistra, testo a destra */ /* 🅵 1 ott, variante B del mockup contact-senza-hero-mockups.html: senza la foto grande, la pagina apre sotto la nav bianca. Il 130px generico di .section sopra il titolo la faceva sembrare vuota: 64px, come About. ⚠️ .ctform.section e non .section: è condivisa da mezzo sito. */ .ctform.section { padding-top: clamp(36px, 4.6vw, 64px); } .ctform__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(30px, 5vw, 72px); align-items: center; } .ctform__img { aspect-ratio: 4/5; margin: 0; overflow: hidden; background: #dfe7ea; } .ctform__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ctform__title { font-size: clamp(1.6rem, 3.4vw, 2.5rem); color: var(--ink); } /* "di questa demo mi piace anche la font piccola" — Google Doc */ .ctform__lead { margin-top: 22px; font-size: .88rem; line-height: 1.95; color: var(--ink-soft); max-width: 52ch; } .ctform__lead + .ctform__lead { margin-top: 1em; } .ctform__lead a { color: var(--navy); border-bottom: 1px solid rgba(20,39,58,.3); transition: border-color .2s; } .ctform__lead a:hover { border-color: var(--navy); } .ctform__note { margin-top: 16px; font-size: .8rem; letter-spacing: .04em; color: var(--navy); } /* cornice attorno all'iframe: l'interno è di Studio Ninja e non si tocca, ma il contorno lo diamo noi */ /* ---- thank-you.html: la pagina dopo l'invio del modulo (🅴 Elodie, vocale del 9 ott). Centrata, nello stile del sito; min-height perché con poco testo il piè di pagina non salga sotto il menu. ---- */ .thanks { background: var(--white); text-align: center; min-height: 62svh; display: flex; align-items: center; padding-block: clamp(70px, 9vw, 130px); } .thanks__in { display: flex; flex-direction: column; align-items: center; } .thanks__t { font-size: clamp(1.8rem, 4vw, 3rem); color: var(--ink); margin: .7rem 0 1rem; } .thanks__lead { max-width: 34em; font-size: 1.02rem; line-height: 1.9; color: var(--ink-soft); } .thanks__lead strong { color: var(--ink); font-weight: 500; } .thanks__sub { max-width: 34em; margin-top: 1.1rem; font-size: .86rem; line-height: 1.9; color: var(--ink-soft); } .thanks__btn { margin-top: 2rem; } /* 🅴 Elodie (Google Doc, 01-10): modulo nostro al posto di quello di Studio Ninja. 🅵 Stile A del mockup modulo-contatto-mockups.html: linee sottili, due colonne dove i campi sono brevi. L'invio è contact-send.php (email). */ .cfwrap { padding-top: clamp(34px, 4vw, 56px); } .cf { --lin: rgba(20,39,58,.32); max-width: 820px; margin-inline: auto; font-family: var(--sans); } .cf * { box-sizing: border-box; } .cf__r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 3vw, 40px); } .cf__f { margin: 0 0 clamp(20px, 2.4vw, 28px); padding: 0; border: 0; min-width: 0; } .cf label, .cf legend { display: block; font-size: .8rem; font-weight: 500; color: var(--ink); margin-bottom: 8px; padding: 0; } .cf abbr { text-decoration: none; color: var(--navy); } .cf input[type=text], .cf input[type=email], .cf select, .cf textarea { width: 100%; font: 300 .92rem var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--lin); padding: 10px 0; border-radius: 0; outline: 0; appearance: none; -webkit-appearance: none; } .cf textarea { resize: vertical; line-height: 1.7; } .cf ::placeholder { color: #93a0a6; font-weight: 300; } .cf select { padding-right: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314273a' stroke-width='1'/%3E%3C/svg%3E") right 2px center no-repeat; } .cf input:focus, .cf select:focus, .cf textarea:focus { border-bottom-color: var(--navy); } .cf input:focus-visible, .cf select:focus-visible, .cf textarea:focus-visible { box-shadow: 0 1px 0 0 var(--navy); } .cf__opts { display: flex; flex-wrap: wrap; gap: 10px 26px; } .cf__opts label, .cf__chk label { display: flex; align-items: center; gap: 10px; font-weight: 300; font-size: .88rem; color: var(--ink-soft); margin: 0; cursor: pointer; } .cf__opts input, .cf__chk input { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; border: 1px solid var(--navy); margin: 0; flex: none; background: #fff; } .cf__opts input { border-radius: 50%; } .cf__opts input:checked { background: radial-gradient(var(--navy) 0 38%, #fff 42%); } .cf__chk input:checked { background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9'%3E%3Cpath d='M1 4.5l3 3 6-6.5' fill='none' stroke='white' stroke-width='1.4'/%3E%3C/svg%3E") center no-repeat; } .cf__opts input:focus-visible, .cf__chk input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } .cf__priv { margin: 8px 0 0 25px; font-size: .74rem; color: #93a0a6; } .cf__priv a { color: var(--navy); border-bottom: 1px solid rgba(20,39,58,.3); } /* 🅴 Elodie, WhatsApp 18 ott 21:52: "Submit Enquiry lo metterei in mezzo" → centrato. */ .cf__btn { display: block; border: 0; cursor: pointer; margin: 6px auto 0; } /* trappola antispam: fuori dallo schermo, non display:none (i robot lo riconoscono) */ .cf__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .cf__err { max-width: 820px; margin: 0 auto 24px; padding: 14px 18px; border-left: 2px solid var(--navy); background: rgba(224,246,253,.42); font-size: .86rem; color: var(--ink); } @media (max-width: 700px) { .cf__r2 { grid-template-columns: 1fr; } /* iPhone: sotto i 16px Safari ingrandisce la pagina da solo quando si tocca un campo */ .cf input[type=text], .cf input[type=email], .cf select, .cf textarea { font-size: 16px; } } @media (max-width: 900px) { .ctform__grid { grid-template-columns: 1fr; } /* 17 ott: quadrata (era 16/11): con le mani unite il 16/11 tagliava le dita */ .ctform__img { aspect-ratio: 1/1; } } /* ============================================================= L'APERTURA · LA PAROLA-FINESTRA Ripresa da TWW-24 "Volterra" e ritarata su questo sito. Sotto al velo c'è GIÀ la hero, con la stessa immagine, lo stesso --ap-focus e lo stesso --ap-scrim: quando il velo se ne va, i pixel dentro alle lettere e quelli fuori coincidono, e la parola può sparire senza che si veda. ⚠️ Unica differenza voluta rispetto all'originale: la nostra hero ha anche grana e vignettatura, che dentro un background-clip:text non si possono riprodurre (mix-blend-mode e box-shadow non esistono lì). Restano solo sulla hero: alla consegna lo stacco c'è ma è minimo, perché la grana è al 10% e la vignettatura sta ai bordi, mentre le lettere a fine corsa occupano il centro. ============================================================= */ .ap { position: fixed; inset: 0; z-index: 9999; pointer-events: none; } .ap.is-gone { display: none; } .ap__veil { position: absolute; inset: 0; background: var(--white); opacity: var(--v, 1); } .ap__word { /* allineata alla hero, non alla finestra: stesso top e stessa altezza. Così il ritaglio del fondo coincide con quello della hero (cover + stesso --ap-focus su entrambe) e la parola risulta centrata SULLA FOTO, non sullo schermo. */ position: absolute; top: var(--ap-top, 0px); left: 0; width: 100%; height: var(--ap-h, 100svh); /* misurate sulla hero dal JS */ display: grid; place-items: center; /* I BINARI VANNO FISSATI: senza, quando la parola supera la larghezza dello schermo la traccia si allarga invece di lasciar traboccare il testo, e la parola scivola di lato invece di crescere dal centro. */ grid-template-columns: 100%; grid-template-rows: 100%; /* sposta il TESTO senza spostare il fondo (grazie a background-origin) */ padding-top: max(0px, calc(var(--ap-word-y, 0px) * 2)); padding-bottom: max(0px, calc(var(--ap-word-y, 0px) * -2)); white-space: nowrap; line-height: 1; /* Italiana, tutto in maiuscolo — scelta di Federico, 28 ago. ⚠️ Italiana ha UN SOLO peso (400) e aste sottilissime: è l'opposto di quello che questo effetto vorrebbe, perché dentro a lettere magre ci sta un filo di fotografia invece di una fotografia. Regge per due motivi, e solo per quelli: · le MAIUSCOLE di Italiana sono molto più piene delle minuscole; · la parola arriva a 1.5 volte lo schermo, e a quella scala anche un'asta sottile è larga decine di pixel. Niente font-weight: chiedere un 700 che non esiste farebbe fare al browser un grassetto sintetico, cioè bordi sporchi proprio sul ritaglio delle lettere — che qui è tutto. La spaziatura sale da .04 a .09em: in maiuscolo le lettere si toccherebbero, e ogni contatto è un ponte di fotografia in meno. */ font-family: "Italiana", var(--serif); font-weight: 400; /* l'unico che Italiana ha */ text-transform: uppercase; letter-spacing: .09em; text-indent: .09em; font-size: var(--fs, 100px); /* è l'UNICA cosa che si anima: con transform:scale crescerebbe anche il fondo e le lettere sarebbero una maschera che scivola */ opacity: var(--w, 1); /* ⚠️ Dentro le lettere va la PRIMA COPPIA del dittico, in due livelli: metà sinistra e metà destra, esattamente come la hero sotto. Niente --ap-scrim: la hero non ha più velo, e se lo tenessimo qui le lettere sarebbero più scure della foto che scoprono. 50% 100% e non cover: le foto sono tagliate a 1440x1800 (rapporto 0.8) e su uno schermo 1440x900 ogni metà è 720x900, cioè lo stesso 0.8 — quindi il riquadro coincide con l'object-fit:cover della hero senza deformare. Su altri rapporti di schermo lo scarto è minimo, e succede mentre la parola sta già svanendo. */ /* ⚠️ ?v=2 come nell'HTML: il contenuto di queste due è cambiato il 12 set senza cambiare nome, e la cache del browser serviva le vecchie. */ background-image: url("img/hero/hero-d1a.webp?v=2"), url("img/hero/hero-d1b.webp?v=2"); background-size: 50% 100%, 50% 100%; background-position: left center, right center; background-origin: border-box; /* il padding non tocca il fondo */ background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* I testi della hero entrano dopo la consegna. ⚠️ Il valore di RIPOSO è visibile: si nasconde solo durante is-loading. Se si scrivesse il contrario (opacity 0 di base, 1 con una classe), una transizione che non parte — succede nelle schede in secondo piano, dove il browser sospende anche le transition — lascerebbe i testi invisibili per sempre. Così il caso peggiore è "appaiono senza dissolvenza". */ html.js .hero__content { transition: opacity .8s ease .1s; } html.js body.is-loading .hero__content { opacity: 0; } /* rete finale: se la pagina è stata consegnata mentre era nascosta, si salta la dissolvenza e si mostra e basta (la classe la mette il JS) */ html.js body.no-anim .hero__content { opacity: 1 !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { /* non si "riduce" l'apertura: si toglie */ .ap { display: none; } html.js .hero__content { opacity: 1 !important; transition: none; } } /* ============================================================= 03 · PRIMA TESTIMONIANZA + "PER CHI SONO" 🅵 Variante B, Federico 2 set 2026. Tre confrontate in mockup/first-manifesto-mockups.html. Era UNA sezione alta 1218px (1,35 schermate), di cui 448px di puro vuoto. Ora sono DUE fasce: la recensione su fondo chiarissimo, il manifesto sull'azzurro di Elodie. -22%. ⚠️ NON si è tagliata una parola. Quelle tre frasi sono un FILTRO: 🅴 "il mio sito deve far capire quel tipo di coppie che voglio alla mia vita, non voglio neanche abbracciare tutti" (105:14). La compressione viene dall'IMPAGINAZIONE — i due paragrafi affiancati invece che impilati, e via la spaziatura di troppo. Perché l'azzurro va al MANIFESTO e non alla recensione: è il colore di Elodie e sta sotto le SUE parole, quelle che scelgono le coppie giuste, non sotto la voce di un cliente. In più il manifesto è testo lungo, e su fondo colorato il testo lungo si legge come un blocco unitario: si capisce che è una dichiarazione. ⚠️ Nota su 26:33 — 🅴 "volevo blu, ma non tanto". Quella frase escludeva una BANDA SCURA, ed è ancora rispettata: #E0F6FD è il suo azzurro pastello, non un blu pieno. ============================================================= */ /* ---- 1. la recensione ---- */ /* ⚠️ Il fondo resta #f7f9fa e NON diventa bianco puro: sopra c'è l'About, che è bianco pieno, e due sezioni bianche di fila si incollano. Per il bianco pieno basta cambiare questa riga. */ .first { background: #f7f9fa; text-align: center; padding-block: clamp(58px, 7vw, 92px); } .first__quote { margin-inline: auto; } .first__mark { display: block; font-family: var(--serif); font-size: clamp(3rem, 5vw, 4.2rem); line-height: .55; color: var(--navy); opacity: .26; margin-bottom: .1em; } /* max-width 18em (era 15): a 15em la riga lunga non ci stava e il
dell'HTML veniva vanificato da un secondo a capo automatico. */ .first__quote blockquote { max-width: 18em; margin-inline: auto; font-family: var(--serif); font-weight: 300; font-size: clamp(1.55rem, 3.2vw, 2.35rem); line-height: 1.3; color: var(--ink); letter-spacing: .004em; } .first__quote figcaption { margin-top: 22px; font-size: .68rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--navy); } /* i premi che non ci sono (83:11): gira la mancanza in una dichiarazione di valore. Sta QUI dall'11 set, non nel manifesto: parla di recensioni, e sotto una recensione il soggetto torna. In piccolo, come una nota. */ .first__awards { max-width: 44em; margin: clamp(30px, 3.4vw, 42px) auto 0; font-size: .79rem; line-height: 1.85; color: var(--navy); opacity: .6; font-style: italic; } /* ---- 2. il manifesto: la fascia azzurra ---- */ /* 🅴 Elodie (29 set, via Federico): troppo respiro dentro la fascia, sopra il titolo e sotto l'ultima riga. 🅵 variante C dal mockup: da 92 a 48px a schermo largo (58→32 su telefono), sopra e sotto uguali. */ .who { background: var(--brand-blue); text-align: center; padding-block: clamp(32px, 3.7vw, 48px); } /* 🅵 11 set: sale da 32 a 41,6px — la scala dei TITOLI DI SEZIONE del sito (about, experience, journal). Era partito da 27,2px il 2 set, che ne faceva il titolo più piccolo della home. Ora è il più grande dei tre stadi, com'è giusto per il blocco che sceglie le coppie. */ .who__t { font-size: clamp(1.45rem, 2.9vw, 2.6rem); color: var(--ink); } /* ⚠️ 🅵 11 set: le due colonne sono diventate UN BLOCCO UNICO, centrato. Le regole .who__cols non servono più — tenute solo come storia del perché la larghezza è 640 e non 900. Vedi il commento in index.html. 640px = 73 caratteri per riga; 900px ne davano 103, contro una soglia di 75. L'effetto "allungato" resta perché dipende dal RAPPORTO fra larghezza e altezza, non dalla larghezza assoluta. */ /* ⚠️ 🅵 11 set: spazi stretti. Da 38 a 24px. I due vuoti erano anche DIVERSI fra loro — 46px ottici sopra il paragrafo e 58 sotto — perché il titolo ha interlinea 1.05 (1px di mezza interlinea) mentre paragrafo e chiusura hanno 1.9 e 2 (7px ciascuno). Con lo stesso margine il secondo vuoto sembrava più largo. Ora i margini sono diversi (24 e 18) proprio per far pareggiare i due distacchi ottici a 32px. */ .who__uno { max-width: 640px; margin: clamp(18px, 2vw, 24px) auto 0; text-align: center; font-size: clamp(.9rem, 1.15vw, .97rem); line-height: 1.9; color: #3b4b57; } /* la terza frase cambia registro e sorride: centrata, in corsivo */ .who__close { color: var(--ink); margin: clamp(14px, 1.5vw, 18px) auto 0; } /* ⚠️ .who__awards NON esiste più: 🅵 11 set, la riga sui premi è uscita dal manifesto. Era 23 parole — il blocco di testo più lungo della sezione — e parlava di RECENSIONI dentro un blocco che parla della coppia. Ora sta sotto la recensione vera, dove il soggetto coincide: vedi .first__awards. Il manifesto perde un terzo delle sue parole senza perderne nessuna. */ /* ⚠️ Questa media query sta QUI e non nel blocco @media generale più in alto nel file: a parità di specificità vince la regola che viene DOPO, e .who__cols è definita a poche righe da qui. Messa lassù non aveva alcun effetto — le colonne restavano due anche a 390px. */ /* ⚠️ Sotto i 780px la rottura forzata dopo "connection." va SPENTA: lì la colonna è stretta, il testo va a capo da solo e il
aggiungerebbe una riga mezza vuota in mezzo al blocco. (Stesso accorgimento di .about__claim e della citazione in .first__quote.) */ @media (max-width: 780px) { .who__uno br { display: none; } } @media (max-width: 560px) { /* su telefono la citazione usa tutta la colonna */ .first__quote blockquote { max-width: none; } .first__close { max-width: 16em !important; } /* il titolo scende ancora, se no a 24px contro i 25.6 della citazione i due pesi si equivalgono e la gerarchia sparisce */ .first__title { font-size: 1.05rem; } } /* ============================================================= PAGINA ABOUT — creata il 28 ago 2026 ------------------------------------------------------------- Struttura dal suo Google Doc, fatti dal suo Canva, forma dal sito che ci ha mandato lei (aura.gardenofmuses.de/about). ⚠️ Dal riferimento NON è stato preso il collage di foto sovrapposte e sfalsate: lei era stata netta a 48:19 — "questa parte non la voglio sfasata". Sono state prese invece le etichette verticali ai margini, che danno la stessa aria editoriale senza contraddirla. ============================================================= */ /* etichetta verticale lungo il margine di una foto */ .vlabel { position: absolute; writing-mode: vertical-rl; white-space: nowrap; font-family: var(--sans); font-size: .6rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: #9fb0ba; } /* ⚠️ Le misure qui sotto sono le stesse del resto del sito, non misure nuove: titolo di pagina 43.2px come il pagehero di Investment, titoli di sezione 41.6px come ovunque. Alla prima stesura erano più grandi (fino a 86px per PLACES) e la About aveva i titoli più grandi di tutte le altre pagine. L'unica che sale è PLACES, fino ai 54.4px della hero della home: è un'insegna su fondo fotografico, non una testata di sezione. */ /* ---- 1 · hero (variante B: il titolo comanda) ---- Nome grande su UNA riga, fotografia più piccola a fianco, allineate in basso. La forma viene dal sito che ci ha mandato lei; il carattere è già il nostro, qui portato al massimo della sua misura. */ .ahero { padding-block: clamp(46px, 6vw, 96px); background: var(--white); } .ahero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 4vw, 60px); align-items: end; /* titolo e foto poggiano sulla stessa linea */ } /* ⚠️ white-space: nowrap tiene "HI, I'M ELODIE" su una riga sola, ed è ciò che dà alla pagina il suo colpo d'apertura. Ma una riga che non può andare a capo SBORDA invece di adattarsi: sotto i 1100px la colonna si stringe più in fretta di quanto scenda il corpo, quindi lì il nowrap viene tolto e il titolo torna libero di spezzarsi. */ .ahero__t { font-size: clamp(2.2rem, 7.4vw, 6rem); line-height: .96; margin-bottom: 1.4rem; white-space: nowrap; color: var(--ink); } .ahero__sub { max-width: 24em; margin-bottom: .4rem; font-family: var(--serif); font-weight: 300; font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.55; color: var(--ink); } .ahero__media { position: relative; justify-self: end; width: 100%; } /* ⚠️ height: auto NON è decorativo. Nell'HTML l' porta width e height (servono a riservare lo spazio ed evitare il salto in caricamento), e il browser li applica come altezza vera: senza height:auto quel 1250 vince e aspect-ratio viene ignorato del tutto. La foto veniva 354×1250 invece di 354×472, alta il triplo del titolo. */ .ahero__media img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; object-position: 50% 24%; } .ahero__media .vlabel { left: -26px; bottom: 0; } @media (max-width: 1100px) { .ahero__t { white-space: normal; font-size: clamp(2rem, 6.4vw, 3.6rem); } } /* ---- 2 · the eye behind the lens ---- */ /* ⚠️ align-items: stretch, non start. Con un rapporto fisso (3/4) la foto aveva un'altezza sua e continuava per mezzo schermo dopo la fine del testo: le due colonne finivano in due punti lontanissimi. Così invece la fotografia prende ESATTAMENTE l'altezza della colonna di testo, qualunque sia — e se un domani il testo si accorcia, il min-height impedisce che diventi una feritoia orizzontale che taglia il volto. */ .eye__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(34px, 5vw, 78px); align-items: stretch; } .eye__media { position: relative; height: 100%; } .eye__media img { width: 100%; height: 100%; min-height: clamp(380px, 46vw, 620px); object-fit: cover; object-position: 50% 28%; } .eye__media .vlabel { left: -26px; top: 0; } .eye__t { font-size: clamp(1.45rem, 2.9vw, 2.6rem); margin-bottom: 1.6rem; } .eye__claim { color: var(--ink); margin-bottom: 2rem; max-width: 30em; } .eye__p { font-family: var(--serif); font-weight: 300; font-size: clamp(1rem, 1.35vw, 1.14rem); line-height: 1.85; color: var(--ink-soft); } .eye__p + .eye__p { margin-top: 1.1rem; } .eye__p strong { color: var(--ink); font-weight: 500; } /* ---- 3 · places ---- */ .places { position: relative; color: var(--white); padding-block: clamp(70px, 9vw, 130px); overflow: hidden; } /* ④ Il movimento allo scroll. --pz lo scrive il JS fotogramma per fotogramma e vale da 1 a 1.06: quasi impercettibile, ed è la cosa che separa una foto messa lì da una sezione costruita. ⚠️ Il valore di RIPOSO è 1, non 1.06: se il JS non parte — o se la scheda è in secondo piano, dove requestAnimationFrame resta sospeso — la fotografia si vede intera e ferma, che è il caso peggiore accettabile. */ .places__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--pz, 1)); transform-origin: 50% 50%; will-change: transform; } @media (prefers-reduced-motion: reduce) { .places__bg { transform: none; } } /* ① Il velo serve al TESTO, non alla fotografia: dove non c'è una lettera deve sparire. Prima andava da .78 a .44, cioè restava al 44% di nero anche nella metà destra dove non c'è niente scritto. Ora si spegne del tutto entro il 58%: da lì in poi è fotografia pura. La striscia in basso è a parte — tiene leggibile il paragrafo lungo senza velare tutto il resto. */ .places::after { content: ""; position: absolute; inset: 0; background: /* la striscia in basso: il paragrafo lungo sta fra il 63% e il 78% dell'altezza, e finisce su acqua chiara */ linear-gradient(180deg, rgba(9,17,27,0) 52%, rgba(9,17,27,.34) 100%), /* 90deg e non in diagonale: così le percentuali sono la larghezza vera e si può dire con esattezza dove il velo finisce. Il testo arriva al 57%, il velo si spegne al 66%: da lì in poi — più di un terzo della sezione — è fotografia pura. */ linear-gradient(90deg, rgba(9,17,27,.84) 0%, rgba(9,17,27,.72) 28%, rgba(9,17,27,.34) 50%, rgba(9,17,27,0) 66%); } .places__in { position: relative; z-index: 2; } .places__t { font-size: clamp(1.75rem, 4.2vw, 3.4rem); color: var(--white); margin-bottom: clamp(26px, 3.4vw, 40px); } /* i luoghi, senza i mesi: il calendario è stato tolto il 28 ago perché le date erano inventate e non si può impegnarla su un'agenda */ .places__list { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 34px; max-width: 44em; font-family: var(--sans); font-size: .78rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; } .places__list li { padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.22); } .places__note { margin-top: clamp(26px, 3vw, 38px); max-width: 38em; font-family: var(--serif); font-weight: 300; font-size: 1.05rem; line-height: 1.8; color: rgba(255,255,255,.82); } .places__note strong { color: var(--white); font-weight: 400; } /* ---- 4 · how I work ---- */ /* ⚠️ Qui NON stretch, a differenza della .eye__grid. Il testo è di due soli paragrafi: allungando la colonna all'altezza della foto restavano 285px di bianco sotto le parole. La foto tiene una sua altezza — contenuta, non i 660px del rapporto 4/5 di prima — e il testo le si centra accanto: lo scarto si divide fra sopra e sotto invece di cadere tutto in fondo. */ .work__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(34px, 5vw, 78px); align-items: center; } .work__t { font-size: clamp(1.45rem, 2.9vw, 2.6rem); margin-bottom: 1.5rem; } .work__p { font-family: var(--serif); font-weight: 300; font-size: clamp(1rem, 1.35vw, 1.14rem); line-height: 1.85; color: var(--ink-soft); } .work__p + .work__p { margin-top: 1.1rem; } .work__media { position: relative; } .work__media img { width: 100%; height: clamp(320px, 33vw, 470px); object-fit: cover; } .work__media .vlabel { right: -26px; bottom: 0; } /* ---- 5 · your wedding (variante A: due colonne, come un articolo) ---- ⚠️ Prima erano tre blocchi CENTRATI, 85 parole tutte della stessa misura e dello stesso peso. Due cose non funzionavano, e nessuna era questione di gusto: il testo centrato regge finché sono due righe — su cinque l'occhio non trova più il punto a sinistra dove tornare a capo — e la frase forte ("A celebration of commitment") valeva quanto la spiegazione invece di comandarla. Ora ci sono tre livelli: titolo, affermazione, corpo. E il corpo è allineato a sinistra su due colonne, come in un articolo. Nessuna parola sua è stata tolta. */ .yw { background: var(--navy); color: var(--white); padding-block: clamp(64px, 8vw, 120px); } .yw__head { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 60px); align-items: baseline; padding-bottom: clamp(30px, 3.6vw, 46px); border-bottom: 1px solid rgba(255,255,255,.16); } .yw__t { color: var(--white); } .yw__lead { font-family: var(--serif); font-weight: 300; font-size: clamp(1.25rem, 2.3vw, 1.85rem); line-height: 1.45; color: var(--white); max-width: 20em; } .yw__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 68px); margin-top: clamp(30px, 3.6vw, 46px); } .yw__p { font-family: var(--serif); font-weight: 300; font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.8; color: rgba(255,255,255,.84); } /* ---- 6 · cta ---- */ .acta { text-align: center; } /* 🅴 Elodie (29 set, via Federico): "lo stesso identico respiro" della home fra il pulsante e il nome Instagram — vedi .cta-band. Sotto il pulsante scende da 130 (padding generico di .section) a 52px a schermo largo (34 su telefono). ⚠️ .acta.section e non .acta: a parità di specificità con .section vincerebbe l'ordine, che è fragile. Il padding sopra non cambia. */ .acta.section { padding-bottom: clamp(34px, 3.8vw, 52px); } .acta__t { font-size: clamp(1.45rem, 2.9vw, 2.6rem); margin-bottom: 1.2rem; } .acta__p { font-family: var(--serif); font-weight: 300; font-size: 1.1rem; line-height: 1.8; color: var(--ink-soft); max-width: 32em; margin: 0 auto 2rem; } @media (max-width: 900px) { /* le etichette verticali vivono nei margini laterali: su schermo stretto quei margini non ci sono più e finirebbero sopra la fotografia */ .vlabel { display: none; } /* ⚠️ anche .ahero__grid: senza, la hero restava a due colonne fin sotto i 400px — titolo su due righe e la fotografia ridotta a una striscia */ /* ⚠️ Il velo laterale non regge su schermo stretto: lì il testo arriva al 95% della larghezza, mentre il velo si spegneva al 66% — le ultime parole finivano su acqua chiara. Su telefono torna uniforme, appena più carico in basso dove sta il paragrafo lungo. */ .places::after { background: linear-gradient(180deg, rgba(9,17,27,.62) 0%, rgba(9,17,27,.58) 45%, rgba(9,17,27,.72) 100%); } .ahero__grid, .eye__grid, .work__grid { grid-template-columns: 1fr; } /* le due colonne dell'articolo diventano una: a mezza larghezza di telefono sarebbero righe da quattro parole */ .yw__head { grid-template-columns: 1fr; gap: 14px; } .yw__cols { grid-template-columns: 1fr; gap: 20px; } .ahero__media { justify-self: stretch; } .work__media { order: -1; } /* in colonna unica non c'è più un testo a fianco di cui seguire l'altezza: le foto tornano al loro rapporto, o diventerebbero altissime */ .eye__media { height: auto; } .eye__media img { height: auto; min-height: 0; aspect-ratio: 3/4; } .work__media img { height: auto; aspect-ratio: 4/5; } } /* ---- Privacy (privacy.html): pagina di testo, colonna stretta ---- */ .legal { background: var(--white); padding-block: clamp(50px, 7vw, 92px) clamp(60px, 8vw, 110px); } .legal__in { max-width: calc(760px + 2 * var(--pad)); } .legal__t { font-size: clamp(1.8rem, 3.6vw, 2.8rem); color: var(--ink); margin: .5rem 0 .6rem; } .legal__upd { font-family: var(--sans); font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 clamp(30px, 4vw, 48px); } .legal h2 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--navy); margin: 2em 0 .5em; } .legal p { font-size: .92rem; line-height: 1.95; color: var(--ink-soft); margin: 0 0 1em; } .legal p strong { color: var(--ink); font-weight: 500; } .legal a { color: var(--navy); border-bottom: 1px solid rgba(20,39,58,.3); } .legal a:hover { border-color: var(--navy); } .footer__copy a { color: inherit; border-bottom: 1px solid transparent; transition: border-color .2s; } .footer__copy a:hover { border-color: currentColor; } /* ---- Contact: pagina più curata e incorniciata (🅴 Elodie, WhatsApp 17 ott 22:30, punto 3; Loom 3:37–4:30) ---- Titolo "Get in touch" in alto, ben marcato · fondo azzurro chiaro (--brand-blue, il colore del suo marchio) · foto su un lato, con il testo a lato · il modulo in un riquadro bianco, incorniciato, sopra l'azzurro. 🅵 Federico, 18 ott: variante V2 fra tre in mockup/blocco3-prima-dopo-mockups.html. ⚠️ Specificità: .ctx__card.cfwrap, perché .cfwrap (più su) mette un padding-top suo. */ .ctx { background: var(--brand-blue); padding-block: clamp(40px, 5.4vw, 80px) clamp(56px, 7vw, 104px); } .ctx__head { text-align: center; margin-bottom: clamp(28px, 4vw, 54px); } .ctx__title em { font-size: .62em; } .ctx__title { font-size: clamp(2.3rem, 6.2vw, 4.6rem); line-height: 1.02; font-weight: 500; letter-spacing: .02em; color: var(--navy); margin: .5rem 0 0; } .ctx__intro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 76px); align-items: center; max-width: 940px; margin: 0 auto clamp(34px, 4.6vw, 60px); } .ctx__img { aspect-ratio: 4/5; margin: 0; overflow: hidden; background: #c9e4ee; } .ctx__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ctx__txt .ctform__lead:first-child { margin-top: 0; } .ctx__card { background: var(--white); max-width: 940px; margin: 0 auto; position: relative; padding: clamp(30px, 4.4vw, 60px) clamp(20px, 5.4vw, 72px); box-shadow: 0 22px 56px rgba(20,39,58,.10); } .ctx__card::before { content: ""; position: absolute; inset: clamp(8px, 1vw, 12px); border: 1px solid rgba(20,39,58,.16); pointer-events: none; } .ctx__card.cfwrap { padding-top: clamp(30px, 4.4vw, 60px); } @media (max-width: 900px) { .ctx__intro { grid-template-columns: 1fr; max-width: 560px; } .ctx__img { aspect-ratio: 1/1; } } /* ---- Investment: meno vuoto fra due sezioni BIANCHE di fila (🅴 Elodie, Loom 2:30–2:44: "c'è troppo spazio… mi piace che respira ma è un po' troppo"). 🅵 18 ott: variante B di mockup/blocco3 (−44% e −40%). Il vuoto era la somma di due padding da 128 px senza cambio di sfondo: schede→Weddings 230 px, Couples→À la carte 256. Ora ~128 e ~154 a 1280 px. Le sezioni con sfondo alternato (Weddings / Say Yes / Couples) non cambiano. ---- */ .chooser.section { padding-bottom: clamp(40px, 6vw, 77px); } .chooser + .exp { padding-top: clamp(40px, 6vw, 77px); } .exp#couples { padding-bottom: clamp(40px, 6vw, 77px); } .exp + .alacarte.section { padding-top: clamp(40px, 6vw, 77px); } /* ========================================================= TELEFONO — rifiniture dal controllo completo del 19 ott (🅵 Federico: "perfetto sotto ogni minimo dettaglio") Misurato a 320, 360, 375 e 414 px: nessuno scorrimento orizzontale; questi sono i difetti trovati. ========================================================= */ /* le paroline corsive dei titoli ("in", "the", "to your") scendevano a 7-10px: ora mai sotto 11,5px */ .ed em { font-size: max(.46em, 11.5px); } /* il menu a tre linee diventa una X quando è aperto (prima non cambiava) */ .nav-toggle span { transition: background .35s ease, transform .3s, opacity .2s; } .site-header.menu-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .site-header.menu-open .nav-toggle span:nth-child(2) { opacity: 0; } .site-header.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* contrasti sotto 4,5:1 (misurati): copyright 2,7 · nota sui premi 3,7 · riga privacy del modulo 2,7 */ .footer__copy { color: #6b777d; } .awards-note p { color: #66737a; } .cf__priv { color: #66737a; } @media (max-width: 900px) { /* aree toccabili di almeno 44px SENZA cambiare il disegno: si allarga la zona sensibile, non l'oggetto */ .brand, .link-arrow, .art__back, .testi__voce { position: relative; } .nav-toggle::after, .brand::after, .art__back::after { content: ""; position: absolute; inset: -8px; } .link-arrow::after { content: ""; position: absolute; inset: -10px -8px; } .testi__voce::after { content: ""; position: absolute; inset: -10px -4px; } .footer__meta { align-items: center; } /* email e telefono erano a sinistra, il resto centrato */ .footer__meta a { display: inline-block; padding-block: 10px; } .footer__copy a { display: inline-block; padding: 13px 8px; margin: -13px -8px; } .iggrid__at { padding-block: 6px; } } @media (max-width: 560px) { /* testi sotto i 12px: pulsanti 10,9 · occhielli 11,8 · copyright 11,5 · firma articolo 10,6 */ .btn-solid { font-size: .75rem; } .eyebrow { font-size: .75rem; } .footer__copy { font-size: .75rem; } .art__by, .art__back { font-size: .72rem; } .cf__priv { font-size: .78rem; } .hero__key { font-size: .75rem; } .addons__inc-t { font-size: .75rem; } } /* i due campi con esempi lunghi ("Where" e "When") sono ora a due righe: sul telefono l'esempio veniva tagliato */ .cf textarea.cf__line { resize: none; }