theme: "light" (default) | "dark" --lvp-accent: qualunque colore (hex, rgb, named) per list / airplay icons, progress bar, highlight tracklist. ============================================================ */ .lvp1 { /* === DEFAULT THEME = LIGHT FROSTY (frost marcato, ma meno see-through) === */ --lvp-bg: rgba(250, 247, 242, 0.78); --lvp-fg: #1b1514; --lvp-sub: #7a7270; --lvp-accent: #c8413a; --lvp-border: rgba(255, 255, 255, 0.6); --lvp-shadow: 0 16px 50px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.06); --lvp-progress-bg: rgba(0, 0, 0, 0.08); --lvp-panel-bg: rgba(250, 247, 242, 0.92); --lvp-hover-bg: rgba(0, 0, 0, 0.05); position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 99999; width: min(880px, calc(100vw - 32px)); height: 64px; background: var(--lvp-bg); backdrop-filter: blur(40px) saturate(1.6); -webkit-backdrop-filter: blur(40px) saturate(1.6); border-radius: 32px; box-shadow: var(--lvp-shadow); border: 1px solid var(--lvp-border); display: flex; align-items: center; padding: 0 18px; color: var(--lvp-fg); gap: 14px; font-family: 'Lato','SF Pro Text',-apple-system,sans-serif !important; } /* === DARK THEME === */ .lvp1[data-theme="dark"] { --lvp-bg: rgba(28, 26, 24, 0.78); --lvp-fg: #f5ece4; --lvp-sub: rgba(245, 236, 228, 0.55); --lvp-border: rgba(255, 255, 255, 0.08); --lvp-shadow: 0 18px 60px rgba(0,0,0,0.45), 0 1px 3px rgba(0,0,0,0.25); --lvp-progress-bg: rgba(255, 255, 255, 0.14); --lvp-panel-bg: rgba(28, 26, 24, 0.92); --lvp-hover-bg: rgba(255, 255, 255, 0.06); } /* Forza Lato sui figli testuali (editorial.css fa eredita serif altrimenti) */ .lvp1, .lvp1 *:not(.material-symbols-rounded) { font-family: 'Lato','SF Pro Text',-apple-system,sans-serif !important; } /* Transport (prev/play/next) — TIGHT, controlli "incollati" come radio */ .lvp1__transport { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } /* Mode (shuffle/repeat) — NASCOSTI per ora (utente choice) */ .lvp1__mode { display: none !important; } /* Right group */ .lvp1__group--right { display: flex; align-items: center; gap: 18px; flex-shrink: 0; margin-left: auto; } .lvp1__btn { background: none; border: 0; cursor: pointer; padding: 0; color: var(--lvp-fg); opacity: 0.9; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: opacity .15s, transform .15s; } .lvp1__btn:hover { opacity: 1; transform: scale(1.08); } .lvp1__btn:active { transform: scale(0.94); } /* Material Symbols Rounded base — i reset sono OBBLIGATORI per attivare ligatures + neutralizzare ereditarietà text-transform. */ .lvp1 .material-symbols-rounded { font-family: 'Material Symbols Rounded' !important; font-weight: normal; font-style: normal; line-height: 1; font-size: 22px; /* default più piccolo */ letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; /* wght 300 = linee sottili come Apple SF Symbols Light */ font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } /* play GRANDE filled */ .lvp1__play .material-symbols-rounded { font-size: 42px; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 40; } /* prev/next filled, dimensione precedente */ .lvp1__transport .material-symbols-rounded { font-size: 30px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* deco icons (shuffle, repeat, waveform, dots, bubble) — dimmate */ .lvp1__btn--deco { opacity: 0.42; cursor: default; } .lvp1__btn--deco:hover { opacity: 0.55; transform: none; } /* list & airplay = accent color (variabile per pagina) */ .lvp1__btn--red { color: var(--lvp-accent); opacity: 1; } .lvp1__btn--red:hover { filter: brightness(0.85); } .lvp1__btn--red.lvp1__btn--deco { opacity: 0.85; } .lvp1__cover { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; flex-shrink: 0; } .lvp1__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; margin-left: 2px; text-align: left; /* override del text-align:center ereditato da .lv-overlay-center */ } /* Titolo brano in accent color — !important per battere qualunque cascade ereditata da editorial.css */ .lvp1__t { font-size: 13.5px !important; font-weight: 700 !important; color: var(--lvp-accent) !important; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left !important; } .lvp1__s { font-size: 11.5px !important; font-weight: 400 !important; color: var(--lvp-sub); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left !important; } /* Toggle buttons (playlist + airplay): grigi quando off, accent quando on */ .lvp1__toggle { color: var(--lvp-fg); opacity: 0.5; cursor: pointer; transition: .15s; } .lvp1__toggle:hover { opacity: 0.8; transform: scale(1.08); } .lvp1__toggle.is-on { color: var(--lvp-accent); opacity: 1; } .lvp1__toggle.is-on:hover { filter: brightness(0.85); } /* Volume: pill collapsible. Solo speaker visibile di default, click sull'icona → espande pill che mostra slider + icona. Position:absolute right:0 dentro group--right per non spingere gli altri controlli quando si espande. */ /* Vol container: position:absolute right:0 dentro group--right (group--right ha padding-right:32px che riserva lo spazio). Espande width verso SINISTRA mantenendo l'icona ferma a destra. */ .lvp1__vol { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: flex-end; width: 32px; height: 32px; padding: 0; border-radius: 20px; background: transparent; overflow: hidden; transition: width 0.4s cubic-bezier(0.65,0,0.2,1), padding 0.4s cubic-bezier(0.65,0,0.2,1), background 0.3s ease; flex-shrink: 0; } .lvp1__vol.is-open { width: 140px; padding: 0 4px 0 12px; /* BG pieno leggermente più scuro del wrapper frosty */ background: rgba(225, 215, 200, 0.95); } .lvp1__vol-slider { -webkit-appearance: none; appearance: none; width: 88px; height: 4px; border-radius: 3px; background: linear-gradient(to right, var(--lvp-fg) 0%, var(--lvp-fg) var(--vol, 80%), color-mix(in srgb, var(--lvp-fg) 18%, transparent) var(--vol, 80%), color-mix(in srgb, var(--lvp-fg) 18%, transparent) 100%); outline: none; cursor: pointer; padding: 0; margin: 0 8px 0 0; opacity: 0; transition: opacity 0.25s 0.1s ease; flex-shrink: 0; } .lvp1__vol.is-open .lvp1__vol-slider { opacity: 1; } .lvp1__vol-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 0; height: 0; opacity: 0; } .lvp1__vol-slider::-moz-range-thumb { width: 0; height: 0; opacity: 0; border: 0; } .lvp1__vol-icon { /* opacity 0.5 = stesso "dimmed" delle icone toggle off (list/airplay) */ color: var(--lvp-fg); opacity: 0.5; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; cursor: pointer; flex-shrink: 0; transition: opacity 0.15s; } .lvp1__vol-icon:hover { opacity: 0.8; } .lvp1__vol-icon .material-symbols-rounded { font-size: 20px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Group--right: padding-right 40px per riservare lo spazio del volume (absolute right:0) E mantenere gap visivo uniforme (~18px) tra airplay e icona volume. */ .lvp1__group--right { position: relative; padding-right: 40px; } /* Progress bar: solo il fill visibile, niente track sotto */ .lvp1__progress { position: absolute; bottom: 0; left: 18px; right: 18px; height: 2px; background: transparent; border-radius: 0 0 32px 32px; overflow: hidden; } .lvp1__bar { height: 100%; background: var(--lvp-accent); width: 0; transition: width .1s linear; } /* Tracklist popover */ .lvp1__panel { position: absolute; bottom: calc(100% + 12px); left: 0; right: 0; background: var(--lvp-panel-bg); backdrop-filter: blur(40px) saturate(1.6); -webkit-backdrop-filter: blur(40px) saturate(1.6); border: 1px solid var(--lvp-border); border-radius: 20px; box-shadow: var(--lvp-shadow); padding: 10px; max-height: 60vh; overflow-y: auto; opacity: 0; pointer-events: none; transform: translateY(12px); transition: all .25s cubic-bezier(.16,1,.3,1); } .lvp1.is-open .lvp1__panel { opacity: 1; pointer-events: auto; transform: translateY(0); } .lvp1__list { list-style: none; margin: 0; padding: 0; } .lvp1__item, .lvp1__item * { font-family: 'Lato','SF Pro Text',-apple-system,sans-serif !important; } .lvp1__item { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-radius: 10px; cursor: pointer; transition: background .15s; font-size: 14px; line-height: 1.5; min-height: 44px; box-sizing: border-box; color: var(--lvp-fg); font-weight: 400; } .lvp1__item:hover { background: var(--lvp-hover-bg); } .lvp1__item.is-on { background: rgba(0, 0, 0, 0.06); color: var(--lvp-accent); font-weight: 700; } .lvp1__item-len { font-size: 13px; opacity: 0.7; font-variant-numeric: tabular-nums; } .lvp1__item.is-on .lvp1__item-len { opacity: 1; color: var(--lvp-accent); } .lvp1__num { color: color-mix(in srgb, var(--lvp-fg) 50%, transparent); font-variant-numeric: tabular-nums; min-width: 28px; font-size: 13px; display: inline-block; } .lvp1__item.is-on .lvp1__num { color: var(--lvp-accent); font-weight: 700; } /* Audible badge nella tracklist: stesso stile di .lv-meta-series (font 11px Safari-safe minimum, no uppercase, padding minimo). */ .lvp1__item-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; align-self: center; background: #F8991D; color: #fff; height: 22px; padding: 0 9px; border-radius: 5px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; text-decoration: none; text-transform: none; font-family: 'Lato',sans-serif !important; transition: filter 0.15s; box-sizing: border-box; flex-shrink: 0; } .lvp1__item-badge:hover { filter: brightness(0.92); } /* Override !important: in lvp2 .material-symbols-rounded ha font-size:26px che altrimenti vincerebbe per source-order. Forziamo 13px dappertutto sul badge. */ .lvp1__item-badge .material-symbols-rounded, .lvp2 .lvp1__item-badge .material-symbols-rounded { font-family: 'Material Symbols Rounded' !important; font-size: 13px !important; line-height: 1 !important; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20 !important; font-feature-settings: 'liga'; } .lvp1__item--audible { cursor: pointer; } .lvp1__item--audible:hover { background: rgba(248,153,29,0.08); } /* Tasto AUDIBLE esterno, accanto al wrapper player. Position calcolata in PURE CSS dal var(--lv-body-width) e dalla width del wrapper. Niente JS → sync perfetto con la transition del wrapper (entrambi usano la stessa cubic-bezier in 0.55s) e niente animazione spuria al load. */ .lvp-audible-btn { /* ⬇️ Colori del bottone Audible — modifica QUI (un solo posto). --audible-text: "Ascolta su" + wordmark "AUDIBLE" --audible-logo: swoop SVG a sinistra --audible-bg: sfondo del bottone */ --audible-text: #ffffff; --audible-logo: #ffffff; --audible-bg: #904b43; /* Inline accanto al .lvp-trigger dentro .lv-ed-player-row (era position:fixed) */ position: relative; height: 64px; padding: 0 38px; border-radius: 32px; border: 0; background: var(--audible-bg); color: var(--audible-text); cursor: pointer; /* Layout stile Apple Podcasts: text stack 2 righe left-aligned */ display: flex; align-items: center; gap: 12px; font-family: 'Lato','SF Pro Text',-apple-system,sans-serif !important; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 20px 60px rgba(0,0,0,0.08), 0 60px 180px 30px rgba(0,0,0,0.08); transition: filter 0.2s ease; white-space: nowrap; } /* Forza Lato sui figli (cascade noova editorial.css altrimenti porta a serif) */ .lvp-audible-btn, .lvp-audible-btn * { font-family: 'Lato','SF Pro Text',-apple-system,sans-serif !important; } /* Eccezione: l'icona deve usare il suo icon font, niente box-shadow ereditata */ .lvp-audible-btn .material-symbols-rounded { font-family: 'Material Symbols Rounded' !important; box-shadow: none !important; } /* editorial.css ha `a, a:visited { color:#FFF }` + `a:hover { color:#FFF }` con specificità (0,1,1) che batte la nostra .lvp-audible-btn (0,1,0). Risultato: il testo del bottone diventa bianco invisibile (specie su :visited). Lock dell'arancione su tutti gli stati con pseudo-class → specificità (0,2,0). */ .lvp-audible-btn:link, .lvp-audible-btn:visited, .lvp-audible-btn:hover, .lvp-audible-btn:focus { color: var(--audible-text); } .lvp-audible-btn:hover { filter: brightness(0.92); } /* Stack verticale text: "Listen on" piccolo sopra, "Audible" grande sotto. Left-aligned tra di loro come nei badge Apple Podcasts / Spotify ufficiali. */ .lvp-audible-btn__stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; } .lvp-audible-btn__small { font-size: 10px; font-weight: 400; text-transform: none; letter-spacing: 0.3px; opacity: 0.92; margin-bottom: 2px; } .lvp-audible-btn__brand { font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; line-height: 1; } /* Brand mark Audible (swoop) sulla sinistra del bottone — pattern Apple Podcasts badge: [icon] | Listen on / Brand. Sizing al ~24px height per bilanciare lo stack di testo (10px + 13.5px) accanto. */ .lvp-audible-btn__mark { display: flex; align-items: center; color: var(--audible-logo); line-height: 0; } .lvp-audible-btn__mark svg { display: block; height: 18px; width: auto; } /* Nuovo: badge "audible_simple" come unica child del bottone (sostituisce __mark + __stack). Il file SVG ha già colori interni (swoop arancione + wordmark scuro) → non serve currentColor. */ .lvp-audible-btn__logo { display: block; height: 24px; width: auto; pointer-events: none; } /* (Rimosso: .lvp-trigger.is-expanded ~ .lvp-audible-btn { left:calc(...) } Era valido quando audible-btn era position:fixed accanto al trigger fissato in basso. Ora che sono entrambi inline in .lv-ed-player-row, il flex layout gestisce la posizione naturalmente. La left:calc residua creava un offset visivo enorme quando il trigger espandeva.) */ .lvp-audible-btn__icon { font-family: 'Material Symbols Rounded' !important; font-weight: normal; line-height: 1; font-size: 20px; display: inline-block; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; font-feature-settings: 'liga'; opacity: 1; } /* ============================================================ TRIGGER ARCHITECTURE — due elementi SIBLING fixed: (A) .lvp-trigger : wrapper FROSTY sempre, contiene il player .lvp1. width 240→880 al click. (B) .lvp-trigger-btn : bottone "ASCOLTA ADESSO" SOPRA il wrapper. Slide a sinistra al click (transform translateX). Sibling perché overflow:hidden del wrapper clipperebbe il bottone se figlio. ============================================================ */ /* Modifier specifico per editorial2-v1 (non tocca .lv-overlay-center della home). Toglie padding orizzontale; bottom padding = altezza del trigger button (64px) + 5px = 69px → testo non finisce sotto il bottone "ASCOLTA ADESSO". */ .lv-overlay-center--editorial { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; transform: translateX(-50%) translateY(40px); } /* Wrapper inline per LISTEN + AUDIBLE dentro la hero (sotto .lv-ed-socials) */ .lv-ed-player-row { display: flex; align-items: center; gap: 12px; /* margin-top: 16px */ flex-wrap: wrap; } .lvp-trigger { /* Inline dentro .lv-ed-player-row (era position:fixed) */ position: relative; width: 180px; height: 64px; border-radius: 32px; background: rgba(252, 252, 252, 0.78); color: #1b1514; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 20px 60px rgba(0,0,0,0.08), 0 60px 180px 30px rgba(0,0,0,0.08); border: 0; font-family: 'Lato','SF Pro Text',-apple-system,sans-serif !important; backdrop-filter: blur(40px) saturate(1.6); -webkit-backdrop-filter: blur(40px) saturate(1.6); transition: width 0.55s cubic-bezier(0.65,0,0.2,1); white-space: nowrap; flex-shrink: 0; } /* Overflow hidden DURANTE l'animazione (clippa button slide-out). Solo dopo .is-fully-expanded (JS su transitionend + setTimeout fallback) passa a visible per consentire la tracklist popover di uscire. */ .lvp-trigger { overflow: hidden; } /* Expanded: width misurata via JS al load (--lvp-expanded-width = larghezza naturale del contenuto). Animation funziona perché è un valore numerico (240px → Xpx), max-content non era animabile. Fallback 720px se JS fallisce. */ .lvp-trigger.is-expanded { width: var(--lvp-expanded-width, 720px); } .lvp-trigger.is-expanded .lvp1__info { flex: 0 0 auto !important; } .lvp-trigger.is-expanded .lvp1__group--right { margin-left: 20px !important; /* +20px tra centro e tasti destra */ } .lvp-trigger.is-expanded .lvp1__transport { margin-right: 10px !important; /* +10px tra tasti sx e centro */ } .lvp-trigger.is-fully-expanded { overflow: visible; } /* Anchor in card invisibile */ #lvBtnAnchor { opacity: 0 !important; pointer-events: none !important; } /* Bottone "ASCOLTA ADESSO" — CHILD absolute, slide-out clippato dal wrapper. Effetto: il bottone sparisce "dentro" il bordo sinistro del wrapper. */ .lvp-trigger-btn { position: absolute; z-index: 2; top: 0; left: 0; width: 180px; height: 100%; border-radius: 32px; border: 0; background: #904b43; color: #fdfdfd; cursor: pointer; font-family: 'Lato','SF Pro Text',-apple-system,sans-serif !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; /* flex per allineare icona + testo "ASCOLTA" */ display: flex; align-items: center; justify-content: center; gap: 10px; transform: translateX(0); transition: transform 0.55s cubic-bezier(0.65,0,0.2,1); } /* Material Symbols Rounded base — replica della regola scoped a .lvp1, qui esteso al trigger button per l'icona graphic_eq. */ .lvp-trigger-btn__icon { font-family: 'Material Symbols Rounded' !important; font-weight: normal; font-style: normal; line-height: 1; font-size: 24px; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .lvp-trigger-btn.is-out { transform: translateX(-100%); pointer-events: none; } /* Quando l'animazione è finita e il wrapper passa a overflow:visible per la tracklist popover, il bottone sliato sarebbe visibile fuori a sinistra. Lo rendiamo invisibile dopo .is-fully-expanded. */ .lvp-trigger.is-fully-expanded .lvp-trigger-btn { visibility: hidden; } /* Player dentro il wrapper: bg trasparente (eredita wrapper), width fisso = wrapper expanded width così la sua layout non si riassesta durante la transizione. Position absolute left:0 → quando wrapper è collapsed (240px), il player overflowa a destra e viene clippato. */ .lvp-trigger .lvp1 { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; /* IN FLUSSO (relative) — necessario perché il wrapper con width:max-content possa misurare il player. Se fosse absolute, il wrapper collassa a 0px → bg invisibile (bug Kimi). */ position: relative !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; width: auto !important; height: 64px !important; opacity: 1 !important; z-index: 1 !important; padding-left: 24px !important; flex-wrap: nowrap; pointer-events: none; } .lvp-trigger.is-expanded .lvp1 { pointer-events: auto; } /* Evita reflow brutti durante l'animazione */ .lvp-trigger .lvp1__t, .lvp-trigger .lvp1__s { white-space: nowrap; } /* ============================================================ LVP2 — Player grande embedded inline. Sync state con .lvp1 via JS shared. Layout: cover left + main column (title/meta in alto, controls+progress in basso). Dark theme (Spotify-like) ma colors LV. Tracklist popover sopra (.lvp2__panel) riusa .lvp1__list / .lvp1__item via classnames (vedi HTML). ============================================================ */ .lvp2 { position: relative; display: grid; grid-template-columns: 160px 1fr; gap: 24px; /* LIGHT FROSTY (come .lvp1): bg chiaro frost + colore testo dark */ background: rgba(245, 245, 245, 0.85); backdrop-filter: blur(40px) saturate(1.6); -webkit-backdrop-filter: blur(40px) saturate(1.6); color: #1b1514; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 16px; padding: 20px; /* margin: 60px 0 */ box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 16px 50px rgba(0,0,0,0.12); font-family: 'Lato','SF Pro Text',-apple-system,sans-serif !important; /* display: none */ } .lvp2, .lvp2 *:not(.material-symbols-rounded) { font-family: 'Lato','SF Pro Text',-apple-system,sans-serif !important; } .lvp2__cover { width: 160px; height: 160px; border-radius: 6px; object-fit: cover; flex-shrink: 0; } .lvp2__main { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; gap: 12px; } .lvp2__title-block { min-width: 0; } .lvp2__t { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--lvp-accent, #c8413a); /* accent come .lvp1__t */ margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .lvp2__s { font-size: 13.5px; color: #7a7270; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .lvp2__bottom { display: flex; flex-direction: column; gap: 12px; } .lvp2__controls { display: flex; align-items: center; gap: 6px; } .lvp2__btn { background: none; border: 0; cursor: pointer; color: inherit; padding: 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; opacity: 0.85; transition: opacity .15s, background .15s, transform .15s; } .lvp2__btn:hover { opacity: 1; background: rgba(0,0,0,0.06); } .lvp2__btn:active { transform: scale(0.94); } /* Material Symbols Rounded scoped to lvp2 — replica del setup .lvp1 */ .lvp2 .material-symbols-rounded { font-family: 'Material Symbols Rounded' !important; font-weight: normal; font-style: normal; line-height: 1; font-size: 26px; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* Play button — dark filled circle su sfondo light */ .lvp2__play { background: #1b1514 !important; color: #f5ece4 !important; width: 44px; height: 44px; margin-right: 8px; } .lvp2__play .material-symbols-rounded { font-size: 28px; font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 40; } .lvp2__play:hover { background: #000 !important; opacity: 1; } /* Toggle tracklist (la "tendina") accent quando aperto */ .lvp2__toggle.is-on { color: var(--lvp-accent, #c8413a); opacity: 1; } .lvp2__progress-row { display: flex; align-items: center; gap: 12px; } .lvp2__progress { flex: 1; height: 4px; background: rgba(0, 0, 0, 0.08); border-radius: 2px; overflow: hidden; } .lvp2__bar { display: block; height: 100%; background: var(--lvp-accent, #c8413a); width: 0; transition: width .1s linear; } .lvp2__time { font-size: 12px; color: #7a7270; font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; } /* AUDIBLE badge top-right corner — versione compatta del lvp-audible-btn (.lvp1) Stack 2 righe "Listen on / AUDIBLE" left-aligned, brand orange #F8991D. Position absolute così non condiziona il layout grid del card. */ .lvp2__audible { position: absolute; top: 16px; right: 16px; background: #F8991D; color: #fff; padding: 7px 14px; border-radius: 8px; text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; font-family: 'Lato','SF Pro Text',-apple-system,sans-serif !important; box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 6px 16px rgba(248,153,29,0.22); transition: filter 0.2s, transform 0.2s; z-index: 4; } .lvp2__audible:hover { filter: brightness(0.95); transform: translateY(-1px); } .lvp2__audible-small { font-size: 9px; font-weight: 400; text-transform: none; letter-spacing: 0.3px; opacity: 0.92; margin-bottom: 1px; } .lvp2__audible-brand { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; } /* Tracklist popover light — sopra il player quando .is-open */ .lvp2__panel { position: absolute; bottom: calc(100% + 12px); left: 0; right: 0; background: rgba(250, 247, 242, 0.96); backdrop-filter: blur(40px) saturate(1.6); -webkit-backdrop-filter: blur(40px) saturate(1.6); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 16px; box-shadow: 0 16px 50px rgba(0,0,0,0.15); padding: 10px; max-height: 60vh; overflow-y: auto; opacity: 0; pointer-events: none; transform: translateY(12px); transition: all .25s cubic-bezier(.16,1,.3,1); z-index: 5; } .lvp2.is-open .lvp2__panel { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Riusa .lvp1__item su tema light: testo dark */ .lvp2 .lvp1__item { color: #1b1514; } .lvp2 .lvp1__item:hover { background: rgba(0,0,0,0.05); } .lvp2 .lvp1__item.is-on { background: rgba(0,0,0,0.06); color: var(--lvp-accent, #c8413a); } .lvp2 .lvp1__num { color: rgba(27, 21, 20, 0.45); } /* Mobile: stack cover sopra a tutto */ @media (max-width: 700px) { .lvp2 { grid-template-columns: 1fr; gap: 16px; } .lvp2__cover { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 280px; margin: 0 auto; } .lvp2__t { white-space: normal; font-size: 19px; } .lvp2__audible { top: 12px; right: 12px; padding: 5px 10px; } .lvp2__audible-brand { font-size: 11px; } } /* ============================================================ EDITORIAL BODY V2 — classi pulite lv-ed-* Sostituiscono le noova class soup (itemTxt/textBox/txhLarge/blk/ftr). Font Home design tokens: Bagoss / General Grotesque Mono / Lato. Override !important per battere editorial.css (Georgia reset). ============================================================ */ /* Container di base — larghezza editoriale max 1400px, margine auto. Più largo della home (--lv-body-width 50% su large) perché serve spazio per 3 colonne. */ .lv-ed-section { width: var(--lv-content-width); max-width: none; margin: 0 auto; padding: 60px 0; /* respiro interno (sostituisce il margin che aveva l'hr) */ color: #1b1514; box-sizing: border-box; /* per il pseudo-bg full-viewport */ position: relative; } /* ===== BACKGROUND FULL-WIDTH PER BLOCCO ===== Pseudo-element che estende il bg da bordo a bordo viewport, sfruttando posizionamento absolute + width:100vw centrato. Sta dietro al content (z:-1) ma sopra al bg di #productions (l'ordine in cascade lo permette). USO: setta --block-bg sulla singola .lv-ed-section che vuoi colorare:

...

Default trasparente → non altera nulla. */ .lv-ed-section::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: var(--block-bg, transparent); z-index: -1; pointer-events: none; } /* Mobile: stringi il body per dare più aria sui lati */ @media (max-width: 768px) { .lv-ed-section, .lv-ed-footer { width: 86%; } } .lv-ed-section--frontespizio { /* padding-top: 40px */ /* padding-bottom: 60px */ } /* ============ LAYOUT 3-COLONNE (2/3 main + 1/3 aside) ============ Replica del pattern Alice.html (.two-thirds column + .one-third column). - .lv-ed-3col__main contiene il body in newspaper-flow 2-col internal - .lv-ed-3col__aside è un sibling separato (NON dentro main) → mobile <900px collassa sotto */ .lv-ed-3col { display: grid; grid-template-columns: 2fr 1fr; gap: 56px; margin-top: 0; align-items: start; } .lv-ed-3col__main { min-width: 0; /* permette al column-count interno di funzionare */ } .lv-ed-3col__aside { /* sidebar verticale, contenuto sequenziale */ display: flex; flex-direction: column; gap: 24px; } /* Quando JS sposta l'aside fuori dal grid (mobile, prima del footer) serve dare width/margin come una .lv-ed-section. */ .lv-ed-3col__aside--detached { width: var(--lv-content-width); max-width: none; margin: 40px auto 20px; box-sizing: border-box; } .lv-ed-3col__aside > * { margin: 0 !important; } /* ============ AUDIOBOOK DETAILS SIDEBAR ============ Pattern Alice.html — titoletto uppercase letter-spaced + key-value list (label accent color, value default) + tag pills. */ /* Copertina inline all'inizio del paragrafo body del frontespizio. Block element (NON floatata) → occupa l'intera larghezza della prima colonna; testo continua sotto e fluisce nelle colonne successive. Aspect-ratio 1/1 + object-fit cover come la vecchia .lv-ed-details__cover. */ .lv-ed-inline-cover { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; margin: 0px 0 16px; } .lv-ed-details__cover { display: block; width: 80%; max-width: 260px; /* cap così su tablet/mobile (grid collassata) il cover non gonfia */ height: auto; /* aspect-ratio: 1 / 1 */ object-fit: cover; border-radius: 6px; align-self: flex-start; box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.12); margin-bottom: 30px; } .lv-ed-details__title { font-family: var(--font-heading) !important; font-size: 16px; font-weight: 520 !important; /* letter-spacing: 0.3em */ /* text-transform: uppercase */ color: var(--lv-accent, #904b43); line-height: 1.4; } .lv-ed-details { font-family: 'Neue Haas Display', 'Helvetica Neue', 'Helvetica', Arial, sans-serif !important; font-size: 14px; line-height: 1.85; color: var(--lv-text, #0a0807); width: 250px; padding-left: 8px; } .lv-ed-details strong { font-family: 'Roboto', -apple-system, sans-serif !important; color: var(--lv-accent, #904b43); font-weight: 500; } .lv-ed-tags { display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 8px !important; } .lv-ed-tag { display: inline-block; border: 1px solid var(--lv-accent, #904b43); border-radius: 4px; padding: 4px 12px; font-family: 'Roboto', -apple-system, sans-serif !important; font-size: 12px; color: var(--lv-accent, #904b43); background: transparent; letter-spacing: 0.05em; line-height: 1.5; } @media (max-width: 900px) { .lv-ed-3col { grid-template-columns: 1fr; gap: 32px; } } /* Titolo principale (era .txhLarge) */ .lv-ed-title { font-family: var(--font-heading) !important; font-size: 32px; font-weight: 520 !important; line-height: 1.1; color: var(--lv-accent, #904b43); margin: 0 0 28px; max-width: 75%; letter-spacing: -0.01em; } /* Intro — Neue Haas Display Roman (400, non bold) per coerenza col heading. */ .lv-ed-intro { font-family: 'Neue Haas Display', 'Helvetica Neue', 'Helvetica', Arial, sans-serif !important; font-size: 19px; font-weight: 400 !important; /* scaglioni 19→28 a breakpoint (vedi blocco fondo file) */ line-height: 1.35; letter-spacing: normal !important; color: var(--lv-text, #0a0807); margin: 0 0 24px; /* max-width rimosso: ora vive dentro .lv-ed-3col__main → si limita naturalmente */ width: 90%; text-transform: uppercase; } /* Heading di sezione/blocco — Neue Haas Display (Bold 700). Reference: la grotesque modernista di rifermento per editoriale prestige. */ .lv-ed-heading { font-family: 'Juana Alt', 'Helvetica Neue', 'Helvetica', Arial, sans-serif !important; font-size: 29px; font-weight: 400 !important; letter-spacing: -0.04em; /* text-transform: uppercase */ line-height: 1; color: var(--lv-text); margin: 0 0 24px; width: 90%; /* text-transform: uppercase */ } /* Divider hairline full-width tra blocchi/sezioni — NON rispetta i margini editoriali, va edge-to-edge come nei reference winged novels. Margin 0 → tocca le sezioni sopra/sotto direttamente, così se una sezione ha bg colorato (via --block-bg) il bg si estende fino alla riga dell'hr. Il respiro fra hr e contenuto è dato dal padding interno della section. */ .lv-ed-divider { display: block; width: 100%; height: 1px; border: 0; background: rgba(0, 0, 0, 0.3); margin: 0; } /* Byline "by AUTHOR" sotto heading di blocco — "by" italic serif minuscolo, nome uppercase bold accent. Pattern:

by NOME

*/ .lv-ed-byline { font-family: var(--font-heading) !important; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; color: var(--lv-accent, #904b43); margin: -8px 0 15px; } .lv-ed-byline em, .lv-ed-byline i { font-family: 'Revival 565', Georgia, serif !important; font-weight: 400 !important; font-style: italic !important; text-transform: lowercase; letter-spacing: 0.02em; margin-right: -4px; font-size: 1.05em; } @media (max-width: 900px) { .lv-ed-title, .lv-ed-intro { max-width: 100%; } } /* Meta row (Lettura | durata | lingua | serie) — usa colori frontespizio */ .lv-ed-meta { margin: 0 0 28px; color: var(--lv-accent, #904b43); } /* Signature block "Di X / Per Y 2026" (era .sign_txt_large) */ .lv-ed-signature { font-family: var(--font-label) !important; font-size: 13px; font-weight: 400 !important; line-height: 1.55; color: #534123; margin: 0 0 14px; letter-spacing: 0.02em; } /* Socials row (3 svg sotto signature) */ .lv-ed-socials { display: flex; flex-direction: row; align-items: center; gap: 12px; color: var(--lv-accent, #904b43); margin: -5px 0 20px 0 !important; } .lv-ed-socials svg { transition: opacity 0.15s; opacity: 0.85; } .lv-ed-socials svg:hover { opacity: 1; } /* Body text base — valori real-world dal New Yorker long-form (TNYAdobeCaslonPro 21px / line-height 1.5em / nessun text-indent, paragraph spacing via margin-bottom). Clamp 18→21px tra mobile e desktop. */ .lv-ed-body { font-family: 'Lora', Georgia, serif !important; font-size: 20px; line-height: 1.5; letter-spacing: normal; color: var(--lv-text, #0a0807); margin: 0 0 1.25em; text-indent: 1.5em; } .lv-ed-body strong, .lv-ed-intro strong { font-family: inherit !important; font-weight: 700; color: inherit !important; /* override globale strong{color:#AFAFAF} di editorial.css */ } /* Restore real italic per e dentro body/intro/credits. editorial.css fa `font: inherit` su tag inline + `p em { font-style: normal }` che annullano l'italic default → forziamo italic vero. */ .lv-ed-body i, .lv-ed-body em, .lv-ed-intro i, .lv-ed-intro em, .lv-ed-credits i, .lv-ed-credits em { font-family: inherit !important; font-style: italic !important; } /* Drop cap — applicato al primo paragrafo del frontespizio (.lv-ed-body--dropcap) Pattern Alice.html: prima lettera grande float-left, font Juana Alt, color accent. */ .lv-ed-body--dropcap { text-indent: 0 !important; /* niente rientro sulla prima riga (sostituito dal dropcap) */ } .lv-ed-body--dropcap::first-letter { float: left; font-family: 'Juana Alt', 'Neue Haas Display', Georgia, serif; font-weight: 400; font-size: 4em; line-height: 0.85; color: var(--lv-accent, #904b43); margin: 6px 12px 0 0; padding: 0; } /* Variante 2 colonne (era .textBox.two-columns) */ .lv-ed-body--two-cols { column-count: 2; column-gap: 36px; } /* Variante 3 colonne standard — blocco a tutta larghezza senza sidebar */ .lv-ed-body--three-cols { column-count: 3; column-gap: 36px; } /* (Tentativo di mettere heading+byline dentro il container colonnato abbandonato — il nesting con .lv-ed-body sul wrapper scombinava font/color del
. Pattern attuale: heading + byline siblings ESTERNI al
.) */ /* Responsive collapse — allineato al container snap (scaglioni 768/1024/1440). Logica diversificata per block-type: ─ .lv-ed-body--three-cols (blocchi full-width senza sidebar): ≥1440: 3 | 1024-1439: 2 | <1024: 1 ─ .lv-ed-body--two-cols (frontespizio dropcap, pairato con aside a destra → visualmente 3-strip): salta direttamente da 2 → 1 al primo scatto, perché l'aside si stacca e tenere 2 colonne strette dentro main fa blocchi troppo alti. ≥1440: 2 | <1440: 1 ─ ≤600px non serve regola extra: già coperto sopra. */ @media (max-width: 1439px) { .lv-ed-body--three-cols { column-count: 2; } .lv-ed-body--two-cols { column-count: 1; } } @media (max-width: 1023px) { .lv-ed-body--three-cols { column-count: 1; } } /* Quote block (era .txhLarge con citazione) */ .lv-ed-quote { position: relative; font-family: 'Revival 565', Georgia, serif !important; font-style: italic; font-size: 22px; font-weight: 400 !important; line-height: 1.25; color: var(--lv-text, #0a0807); /* margin: 20px 0 20px */ padding: 0 0 0 56px; border: 0; border-left: 1px solid #d4d0cb; /* grigio chiaro, hairline */ text-align: left; letter-spacing: -0.005em; margin: 0 30px 0 0; } /* Giant decorative " typographic quote (solo apertura) */ .lv-ed-quote::before { content: '\201C'; /* U+201C = "left double quotation mark" */ position: absolute; top: -28px; left: 16px; font-family: 'Revival 565', Georgia, serif; font-size: 130px; font-weight: 400; line-height: 1; color: #d4d0cb; /* stesso grigio del bordo */ pointer-events: none; user-select: none; } /* Image band (was inline-style div with bg) */ .lv-ed-image { width: 100%; height: 300px; background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0 0 36px; } /* ============ FOOTER CREDITS (era .blk > .ftr) ============ */ .lv-ed-footer { width: var(--lv-content-width); max-width: none; margin: 0 auto 0; /* border-top: 1px solid rgba(83, 65, 35, 0.18) */ } .lv-ed-credits { font-family: 'Neue Haas Display', 'Helvetica Neue', 'Helvetica', Arial, sans-serif !important; font-size: 14px; line-height: 22px; text-indent: 20px; color: #d5d5d4; padding: 40px 0; } .lv-ed-credits strong { font-family: inherit !important; font-weight: 700; color: #dcdcdc; } .lv-ed-credits a { color: var(--lv-accent, #904b43); text-decoration: underline; text-underline-offset: 2px; } .lv-ed-credits a:hover { color: #1b1514; } /* (.lv-ed-sublogo + BaTaClan_f rimossi — il font era mappato solo su J/K/L/M/N come logo decorativo BaTaClan, non utilizzabile per LV) */ /* ============================================================ STICKY PINNED HEADER — Cantata SVG (marchio prodotto) + player + audible Container fixed top, JS calcola transform su .lv-pinned__logo-wrap e .lv-pinned__player-wrap in base a window.scrollY. - Range scroll: 0 → (window.innerHeight * 0.7) - Logo: scale 1.0 → 0.4 + translateY (centro-hero → top viewport) - Player: translateY (bottom-hero → logo.bottom + 10px gap) - Elementi .lv-hero-fade: opacity 1 → 0 via --scroll-p ============================================================ */ /* (Regole sticky/fade rimosse — sistema scroll-driven non implementato. Hero-1 torna al comportamento normale di flow.) */ /* ============================================================ TYPOGRAPHY SCAGLIONI — stepped font-size per breakpoint. Sostituisce i clamp() (scale fluido col viewport) con scatti discreti agli stessi breakpoint dei margini e del titolo SVG (768 / 1024 / 1440 / 1920). I valori base (mobile <768) stanno nelle rule originali sopra; qui sono le rampe di override. Progressione voluta: rallentata rispetto al clamp precedente (heading 22→55.8 era troppo aggressivo → ora arriva a 55.8 solo sui monitor ≥1920, gradino dolce sui laptop comuni). ============================================================ */ @media (min-width: 768px) { .lv-ed-title { font-size: 40px; } .lv-ed-heading { font-size: 32px; } .lv-ed-intro { font-size: 22px; } .lv-ed-body { font-size: 19px; } .lv-ed-quote { font-size: 23px; } } @media (min-width: 1024px) { .lv-ed-title { font-size: 48px; } .lv-ed-heading { font-size: 48px; } .lv-ed-intro { font-size: 25px; } .lv-ed-body { font-size: 20px; } .lv-ed-quote { font-size: 25px; } } @media (min-width: 1440px) { .lv-ed-title { font-size: 56px; } .lv-ed-heading { font-size: 53px; } .lv-ed-intro { font-size: 28px; } .lv-ed-body { font-size: 20px; } .lv-ed-quote { font-size: 26px; } } /* ≥1920: tutto già al max in 1440 — niente bump ulteriore. Se in futuro vuoi dimensioni "cinema" su 4K basta riattivare: @media (min-width: 1920px) { ... } */