interni per una clamp pulita anche con più paragrafi */ .copy__para--clamp-2 > p, .copy__para--clamp-5 > p, .copy__para--clamp-9 > p{ display:inline; margin:0 } .copy__para--clamp-2 > p + p::before, .copy__para--clamp-5 > p + p::before, .copy__para--clamp-9 > p + p::before{ content:" " } /* Evita la "testa" della riga nascosta: micro clip alla base quando non aperto */ /* Evita micro-clip quando non aperto (indipendente dal focus su desktop) */ .copy__row:not(.is-open) .copy__para{ clip-path: none } /* Quando aperto/hover, rimuovi ogni limite */ .copy__row:is(:hover,.is-open) .copy__para{ max-height:none } .copy__extra{ max-height:0; opacity:0; overflow:hidden; transform: translateY(6px); transition: max-height var(--dur-extra) var(--ease-smooth), opacity var(--dur-extra) var(--ease-smooth) 40ms, transform var(--dur-extra) var(--ease-smooth) 40ms; will-change: max-height, opacity, transform; pointer-events:none; } .copy__extra p{margin:10px 0 0;color:var(--muted)} /* Riga fantasma: anteprima della prima riga di .copy__extra sovrapposta (solo progetti) */ body:not([data-page="design-statement"]) .copy__para::after{ content: attr(data-teaser) "…"; position:absolute; left:0; right:0; top: var(--teaser-offset, 0px); pointer-events:none; z-index:1; color: inherit; font-weight: inherit; font-style:normal; line-height: inherit; letter-spacing: inherit; font-size:inherit; opacity:0; white-space:nowrap; overflow:hidden; transition: opacity 120ms var(--ease-out); mask-image: linear-gradient(90deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 25%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0) 100%); -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.8) 25%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0) 100%); } body:not([data-page="design-statement"]) .copy__row:not(.is-open):not(:hover):not(:focus-within) .copy__para::after{ opacity:.32; } body:not([data-page="design-statement"]) .copy__row:active .copy__para::after, body:not([data-page="design-statement"]) .copy__row.is-open .copy__para::after{ opacity:0; } /* Progetti: testo esteso più chiaro anche per i paragrafi oltre al primo */ body:not([data-page="design-statement"]) .copy__para > p:not(:first-child){ color: var(--muted) } .copy__extra img{max-width:100%;height:auto;display:block;margin-top:8px} .copy__row:is(:hover,.is-open) .copy__para{display:block;overflow:visible; -webkit-line-clamp:unset; -webkit-box-orient:initial; max-height:none} .copy__row:is(:hover,.is-open) .copy__extra{ max-height:1600px; opacity:1; transform: translateY(0); pointer-events:auto; } .copy__row:is(:hover,.is-open) .copy__tag{transform:translateX(2px)} /* Garantisce almeno 1 riga di spazio sotto al blocco aperto/hover */ .copy__row:is(:hover,.is-open){ padding-bottom: calc(var(--lh) * 1) } /* Closed state: no clamp + show only the first block; author controls preview via first
*/ body:not([data-page="design-statement"]) .copy__row:not(:hover):not(.is-open) .copy__para{ -webkit-line-clamp:unset; max-height:none; overflow:visible } body:not([data-page="design-statement"]) .copy__row:not(:hover):not(.is-open) .copy__para > *:not(:first-child){ display:none } /* Freeze layout while a row is open: prevent re-weighting that could move lines above */ /* Small/medium viewports: quando una riga è aperta, le altre mostrano solo 2 righe per evitare sovrapposizioni (solo pointer fine/desktop) */ @media (max-width: 1800px) and (hover: hover) and (pointer: fine){ /* Desktop: clamp SOLO alle righe SOTTO quella attiva (hover o aperta) */ body:not([data-page="design-statement"]) .copy:has(.copy__row:nth-child(1):is(:hover,.is-open)) .copy__row:nth-child(n+2):not(:is(:hover,.is-open)) .copy__para, body:not([data-page="design-statement"]) .copy:has(.copy__row:nth-child(2):is(:hover,.is-open)) .copy__row:nth-child(n+3):not(:is(:hover,.is-open)) .copy__para, body:not([data-page="design-statement"]) .copy:has(.copy__row:nth-child(3):is(:hover,.is-open)) .copy__row:nth-child(n+4):not(:is(:hover,.is-open)) .copy__para, body:not([data-page="design-statement"]) .copy:has(.copy__row:nth-child(4):is(:hover,.is-open)) .copy__row:nth-child(n+5):not(:is(:hover,.is-open)) .copy__para{ display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow:hidden; max-height: calc(var(--lh) * 2); } /* Fallback hover senza :has(): usa classi is-hover-N */ .copy.is-hover-1 .copy__row:nth-child(n+2):not(.is-open) .copy__para, .copy.is-hover-2 .copy__row:nth-child(n+3):not(.is-open) .copy__para, .copy.is-hover-3 .copy__row:nth-child(n+4):not(.is-open) .copy__para, .copy.is-hover-4 .copy__row:nth-child(n+5):not(.is-open) .copy__para{ display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow:hidden; max-height: calc(var(--lh) * 2) } /* Fallback open senza :has(): usa data-open-index impostato via JS */ .copy[data-open-index="1"] .copy__row:nth-child(n+2):not(.is-open) .copy__para, .copy[data-open-index="2"] .copy__row:nth-child(n+3):not(.is-open) .copy__para, .copy[data-open-index="3"] .copy__row:nth-child(n+4):not(.is-open) .copy__para, .copy[data-open-index="4"] .copy__row:nth-child(n+5):not(.is-open) .copy__para{ display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow:hidden; max-height: calc(var(--lh) * 2) } /* Riga attiva: espansione fluida */ body:not([data-page="design-statement"]) .copy__row:is(:hover,.is-open) .copy__para{ max-height: 1000px } } /* Desktop molto ampi: mantieni animazione su max-height anche oltre 1800px */ @media (min-width: 1801px){ body:not([data-page="design-statement"]) .copy__row:is(:hover,.is-open) .copy__para{ max-height: 1400px } } /* Quando una riga è APERTA: neutralizza la fisarmonica per non spostare le righe sopra */ /* (no neutralization here; see specific rules per riga aperta più sotto) */ /* Sotto 1200px (layout verticale): clamp SOLO quando c'è una riga aperta, non al semplice hover */ @media (max-width: 1200px) and (hover: hover) and (pointer: fine){ /* Disattiva l'effetto clamp su semplice hover */ body:not([data-page="design-statement"]) .copy:has(.copy__row:hover) .copy__row:not(:hover):not(.is-open) .copy__para{ max-height: none } body:not([data-page="design-statement"]) .copy.has-hover .copy__row:not(:hover):not(.is-open) .copy__para{ max-height: none } /* Mantieni clamp a 2 righe SOLO quando c'è una riga aperta */ body:not([data-page="design-statement"]) .copy:has(.copy__row.is-open) .copy__row:not(.is-open) .copy__para{ overflow:hidden; max-height: calc(var(--lh) * 2) } body:not([data-page="design-statement"]) .copy.has-open .copy__row:not(.is-open) .copy__para{ overflow:hidden; max-height: calc(var(--lh) * 2) } } /* (rimosso) fisarmonica disattivata: ripristinata distribuzione con flex-grow anche su viewport medi */ /* Mobile hint: fade + ellissi sui paragrafi chiusi con extra (solo mobile/touch) */ @media (hover: none), (pointer: coarse){ body:not([data-page="design-statement"]) .copy__row.has-extra:not(.is-open) .copy__para{ padding-bottom:14px; } body:not([data-page="design-statement"]) .copy__row.has-extra:not(.is-open) .copy__para::before{ content:"..."; position:absolute; right:2px; bottom:4px; margin:0; font-size:20px; color:var(--acid); pointer-events:none; z-index:2; } body:not([data-page="design-statement"]) .copy__row:not(:hover):not(.is-open) .copy__para::after{ opacity:0; content:""; } } /* Stato chiuso: elimina padding-bottom per non far apparire righe in più */ .copy__row:not(:hover):not(.is-open) .copy__para{ padding-bottom:0 } /* Mobile override: mantieni spazio per i puntini in mobile */ @media (hover: none), (pointer: coarse){ body:not([data-page="design-statement"]) .copy__row.has-extra:not(.is-open) .copy__para{ padding-bottom:14px } } .copy__row:nth-child(1){ flex-grow: var(--r1); } .copy__row:nth-child(2){ flex-grow: var(--r2); } .copy__row:nth-child(3){ flex-grow: var(--r3); } .copy__row:nth-child(4){ flex-grow: var(--r4); } .copy__row:nth-child(5){ flex-grow: var(--r5); } /* Evita troncamenti sull'ultima didascalia: niente clamp e più spazio */ /* Rimuove eccezione sull'ultima riga: si comporta come le altre */ /* Fisarmonica solo SOTTO la riga aperta: righe sopra restano ai pesi base */ .copy:has(.copy__row:nth-child(1).is-open){ --r1:6; --r2:1.2; --r3:1.2; --r4:1.2; --r5:1.2 } .copy:has(.copy__row:nth-child(2).is-open){ --r1:2.5; --r2:6; --r3:1.2; --r4:1.2; --r5:1.2 } .copy:has(.copy__row:nth-child(3).is-open){ --r1:2.5; --r2:2; --r3:6; --r4:1.2; --r5:1.2 } .copy:has(.copy__row:nth-child(4).is-open){ --r1:2.5; --r2:2; --r3:2.5; --r4:6; --r5:1.2 } .copy:has(.copy__row:nth-child(5).is-open){ --r1:2.5; --r2:2; --r3:2.5; --r4:2.5; --r5:6 } /* Fisarmonica solo SOTTO anche al semplice hover */ .copy:has(.copy__row:nth-child(1):hover){ --r1:6; --r2:1.2; --r3:1.2; --r4:1.2; --r5:1.2 } .copy:has(.copy__row:nth-child(2):hover){ --r1:2.5; --r2:6; --r3:1.2; --r4:1.2; --r5:1.2 } .copy:has(.copy__row:nth-child(3):hover){ --r1:2.5; --r2:2; --r3:6; --r4:1.2; --r5:1.2 } .copy:has(.copy__row:nth-child(4):hover){ --r1:2.5; --r2:2; --r3:2.5; --r4:6; --r5:1.2 } .copy:has(.copy__row:nth-child(5):hover){ --r1:2.5; --r2:2; --r3:2.5; --r4:2.5; --r5:6 } /* Fallback senza :has(): applica fisarmonica solo SOTTO per l'indice hover */ .copy.is-hover-1{ --r1:6; --r2:1.2; --r3:1.2; --r4:1.2; --r5:1.2 } .copy.is-hover-2{ --r1:2.5; --r2:6; --r3:1.2; --r4:1.2; --r5:1.2 } .copy.is-hover-3{ --r1:2.5; --r2:2; --r3:6; --r4:1.2; --r5:1.2 } .copy.is-hover-4{ --r1:2.5; --r2:2; --r3:2.5; --r4:6; --r5:1.2 } .copy.is-hover-5{ --r1:2.5; --r2:2; --r3:2.5; --r4:2.5; --r5:6 } .is-touch .copy{ transition: none; } /* touch: evita micro flicker sulle espansioni */ @media (max-width:991px){ .layout{grid-template-columns:1fr;grid-template-areas:"title" "media" "copy"} .titlebar{padding-left:0; flex-wrap:wrap} :root{ --title-size:34px; --subtitle-size:13px } .titlebar__sub{ flex-basis:100% } .copy{height:auto; padding-left:0; display:flex; flex-direction:column; gap: var(--copy-gap); --copy-gap:36px; --tag-gap:16px} /* Mantieni il tag a destra del testo anche in verticale */ .copy__row{ display:grid; grid-template-columns: 2.5fr 1.5fr; align-items:start; gap: var(--tag-gap); flex-grow:0 !important; flex-basis:auto } /* Titoli (tag) mantengono due righe fisse anche su viewport stretti */ .copy__tag{ white-space: nowrap; align-items:flex-end } .copy__tag-line{ white-space: nowrap } .copy__row:not(:hover):not(:focus-within):not(.is-open) .copy__para{ clip-path: none } /* Abilita scroll interno del pannello su mobile per evitare blocchi di scroll */ .base-panel__inner{ overflow:auto; -webkit-overflow-scrolling:touch } } /* Modalità "mobile" anticipata: applica layout a colonna anche sotto 1200px */ @media (max-width:1200px){ .layout{grid-template-columns:1fr;grid-template-areas:"title" "media" "copy"} .titlebar{padding-left:0; flex-wrap:wrap} .titlebar__sub{ flex-basis:100% } .copy{height:auto; padding-left:0; display:flex; flex-direction:column; gap: var(--copy-gap); --copy-gap:36px; --tag-gap:16px} .copy__row{ display:grid; grid-template-columns: 2.5fr 1.5fr; align-items:start; gap: var(--tag-gap); flex-grow:0 !important; flex-basis:auto } .copy__tag{ white-space: nowrap; align-items:flex-end } .copy__tag-line{ white-space: nowrap } .base-panel__inner{ overflow:auto; -webkit-overflow-scrolling:touch } .carousel{ width:100% } } @media (min-width:992px){ :root{ --copy-gap:16px } } /* Desktop: più spazio alla colonna testo */ @media (min-width:1200px){ :root{ --text-col: 2.4fr; --notes-col: .6fr } /* Flusso verticale tra le righe, ma ogni riga resta a 2 colonne (testo + tag a destra) */ .copy{ display:block } .copy__row{ display:grid; grid-template-columns: var(--text-col) var(--notes-col); align-items:start; gap: var(--tag-gap) } /* Spaziatura adattiva: usa variabili per personalizzare min/max */ .copy__row + .copy__row{ margin-top: clamp( var(--copy-gap-min, 40px), calc(var(--copy-gap-min, 40px) + (100vw - 1200px) * 0.12), var(--copy-gap-max, 110px) ); } /* Stato chiuso (niente paragrafo aperto né hover attivo): stesso layout dell'interazione */ .copy:not(:has(.copy__row.is-open)):not(:has(.copy__row:hover)){ display:block } .copy:not(:has(.copy__row.is-open)):not(:has(.copy__row:hover)) .copy__row + .copy__row{ margin-top: clamp( var(--copy-gap-min, 40px), calc(var(--copy-gap-min, 40px) + (100vw - 1200px) * 0.12), var(--copy-gap-max, 110px) ); } /* Fallback senza :has(): richiede sia assente .has-open che .has-hover */ .copy:not(.has-open):not(.has-hover){ display:block } .copy:not(.has-open):not(.has-hover) .copy__row + .copy__row{ margin-top: clamp( var(--copy-gap-min, 40px), calc(var(--copy-gap-min, 40px) + (100vw - 1200px) * 0.12), var(--copy-gap-max, 110px) ); } /* Spaziature personalizzate tra le righe (solo pagine progetto) */ body:not([data-page="design-statement"]) .copy__row:nth-child(2){ --copy-gap-min:54px; --copy-gap-max:140px; } body:not([data-page="design-statement"]) .copy__row:nth-child(4){ --copy-gap-min:32px; --copy-gap-max:96px; } } /* Forza capo dei tag lunghi solo sotto i 1600px per liberare larghezza al testo */ @media (max-width:1600px){ /* Quando i titoli vanno a capo: restringi la colonna tag senza spezzare le parole */ .copy__row{ grid-template-columns: minmax(0, 1fr) auto } .copy__tag{ inline-size:auto; max-inline-size:16ch; } } @media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} .tabs__link:hover{transform:none} } @media (max-width:1200px){ body:not([data-page="design-statement"]) .base-panel{ aspect-ratio:auto; max-height:none; height:auto; min-height:unset; } body:not([data-page="design-statement"]) .base-panel__inner{ overflow:visible; height:auto; max-height:none; } } /* Design Statement: pannello color "acid", layout testi a tutta larghezza */ body[data-page="design-statement"]{ --panel: #94b960; --tab-text:#1a1a1a } body[data-page="design-statement"] .base-panel{ --text:#fff; --muted: rgba(255,255,255,.85); aspect-ratio:auto; max-height:none; height:auto; min-height:unset; } body[data-page="design-statement"] .base-panel__inner{ height:auto; max-height:none; overflow:visible; } body[data-page="design-statement"] .layout{ grid-template-columns:1fr; grid-template-areas: "title" "copy" } body[data-page="design-statement"] .media{ display:none } body[data-page="design-statement"] .tabs__list li:last-child .tabs__link{ color:#fff } /* DS: tutto visibile subito, senza animazioni/hover, maggiore spaziatura */ body[data-page="design-statement"]{ --copy-gap: 32px } /* DS: paragrafi più grandi per migliore leggibilità */ body[data-page="design-statement"] .copy__para{ font-size:13px } body[data-page="design-statement"] .copy{ transition:none } body[data-page="design-statement"] .copy__row{ --copy-gap-min:40px; --copy-gap-max:60px; flex-grow:0; flex-basis:auto } body[data-page="design-statement"] .copy__row .copy__para{ overflow:visible; clip-path:none; max-height:none } body[data-page="design-statement"] .copy__row .copy__extra{ max-height:none; opacity:1; transition:none } body[data-page="design-statement"] .copy__para--clamp-2, body[data-page="design-statement"] .copy__para--clamp-5, body[data-page="design-statement"] .copy__para--clamp-9{ display:block; -webkit-line-clamp:unset; -webkit-box-orient:initial } /* DS: al passaggio del mouse non si ingrandisce la riga, ma aumenta lo spessore del testo */ body[data-page="design-statement"] .copy__para, body[data-page="design-statement"] .copy__tag{ transition: font-size var(--dur-hover) var(--ease-out), letter-spacing var(--dur-hover) var(--ease-out); } @media (hover: hover){ /* Hover DS: aumenta leggermente size e tutto maiuscolo SOLO sul paragrafo (no cambio peso) */ body[data-page="design-statement"] .copy__row:is(:hover) .copy__para{ font-size:14px; text-transform:uppercase; letter-spacing:.03em } /* DS: disattiva ogni reveal/shift su hover */ body[data-page="design-statement"] .copy__row:is(:hover) .copy__extra{ max-height:none !important; opacity:1 !important } body[data-page="design-statement"] .copy__row:is(:hover) .copy__tag{ transform:none } } /* Su dispositivi touch: usa solo la classe .is-open (secondo tap richiude) */ @media (hover: none), (pointer: coarse) { /* Mobile: anima solo i contenuti extra, non il paragrafo base */ .copy__para{ transition: none } .copy__extra{ transition: max-height 680ms var(--ease-smooth), opacity 520ms var(--ease-smooth) } .copy__row.is-open .copy__para{display:block;overflow:visible; -webkit-line-clamp:unset; -webkit-box-orient:initial; max-height:none} .copy__row.is-open .copy__extra{ max-height:1600px; opacity:1; transform: translateY(0); pointer-events:auto } .copy__row.is-open .copy__tag{transform:translateX(2px)} body:not([data-page="design-statement"]) .copy__row:not(.is-open) .copy__para{ -webkit-line-clamp:unset; max-height:none; overflow:visible } body:not([data-page="design-statement"]) .copy__row:not(.is-open) .copy__para > *:not(:first-child){ display:none } .copy:has(.copy__row:nth-child(1).is-open){ --r1:6; --r2:.9; --r3:1.2; --r4:2; --r5:.9; } .copy:has(.copy__row:nth-child(2).is-open){ --r1:.9; --r2:6; --r3:1.2; --r4:2; --r5:.9; } .copy:has(.copy__row:nth-child(3).is-open){ --r1:.9; --r2:1.2; --r3:6; --r4:2; --r5:.9; } .copy:has(.copy__row:nth-child(4).is-open){ --r1:.9; --r2:1.2; --r3:2; --r4:6; --r5:.9; } .copy:has(.copy__row:nth-child(5).is-open){ --r1:.9; --r2:1.2; --r3:2; --r4:2.5; --r5:6; } /* Design Statement su touch: usa .is-open per l'effetto "allarga" */ body[data-page="design-statement"] .copy__row.is-open .copy__para{ font-size:14px; text-transform:uppercase; letter-spacing:.03em } body[data-page="design-statement"] .copy__row.is-open .copy__extra{ max-height:none !important; opacity:1 !important; transform:none } body[data-page="design-statement"] .copy__row.is-open .copy__tag{ transform:none } } /* DS: evidenzia parole chiave nel capitolo Valori */ body[data-page="design-statement"] .copy__para strong{ font-weight:600 } /* DS: riduzione dimensioni su mobile per evitare tagli */ @media (max-width:991px){ body[data-page="design-statement"] .titlebar__h1{ font-size:36px } body[data-page="design-statement"] .copy__para{ font-size:12px } } @media (max-width:640px){ body[data-page="design-statement"] .titlebar__h1{ font-size:28px } body[data-page="design-statement"] .copy__para{ font-size:11px } }