/* ============================================================================ * mondo5-overrides.css * * Variante "single-section slider" di mondo4. Quando il drawer e' aperto: * - la griglia cards principale passa da 4 a 1 colonna (una card per riga) * - la sidebar occupa ~38% e mostra UNA sola sezione alla volta * - un header slider (freccia-titolo-freccia-close) sostituisce l'header * classico del drawer, e dots navigator sotto i panels * - le linguette laterali (NOVITA/ULTIMI VIDEO/...) restano come entry-point * * Mobile/tablet (<992px): layout overlay standard di mondo3 (il drawer non e' * inline), ma lo slider interno e' funzionante. * * Ordine di caricamento nel : * 1. mondo-layout.css * 2. mondo5-base-layout.css * 3. mondo5-layout.css * 4. mondo5-favorites.css * 5. mondo5-overrides.css * 6. mondo5-overrides.css <-- QUESTO FILE * * Classe richiesta sul body: mondo5-page (in aggiunta a mondo5-page). * ============================================================================ */ /* --------------------------------------------------------------------------- * 0. HEADER STANDARD DRAWER NASCOSTO IN MONDO5 * mondo5-behavior.js (nella versione mondo5) inserisce un slider-header * al posto del drawer-header originale; nascondiamo quest'ultimo per * sicurezza se dovesse finire nel DOM. * ------------------------------------------------------------------------- */ body.mondo5-page .mondo5-drawer-header { display: none !important; } @media (min-width: 992px) { /* ------------------------------------------------------------------------ * 1. DISATTIVA LOCK SCROLL E BACKDROP (inline drawer, come mondo4) * ---------------------------------------------------------------------- */ html.mondo5-drawer-open:has(body.mondo5-page), body.mondo5-page.mondo5-drawer-open { overflow: visible !important; overscroll-behavior: auto !important; } body.mondo5-page .mondo5-drawer-backdrop, body.mondo5-page.mondo5-drawer-open .mondo5-drawer-backdrop { display: none !important; opacity: 0 !important; pointer-events: none !important; } /* ------------------------------------------------------------------------ * 2. SIDEBAR-COL INLINE (sempre in flow, mai fixed) * Collassata a width:0 quando chiusa, espansa al 38% quando aperta. * ---------------------------------------------------------------------- */ body.mondo5-page .mondo5-sidebar-col { position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; z-index: auto !important; height: auto !important; max-height: none !important; width: 0 !important; max-width: 0 !important; flex: 0 0 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible; transform: none !important; /* PLAN B v2 (snap-then-slide-overlay): cols snappano ISTANTANEAMENTE (no transition). La sidebar--left e' position:fixed (vedi sotto) quindi indipendente dalla width della col-parent: scivola via come overlay sopra le cards che sono GIA' nella nuova layout 4-col. Risultato: nessuno spazio vuoto visibile, cards in posizione finale fin dal frame 0 dello slide. Niente opacity/visibility toggle: la sidebar--left interna e' position:fixed e sempre renderizzata (slide via transform), cosi' il layer GPU non viene scartato tra una chiusura e l'apertura successiva. La col esterna resta a width:0 quando chiusa → il main occupa 100% come prima. */ pointer-events: none; display: block !important; } body.mondo5-page.mondo5-drawer-open .mondo5-sidebar-col { width: 25% !important; max-width: 25% !important; flex: 0 0 25% !important; pointer-events: auto; padding-left: 12px !important; padding-right: 0 !important; align-self: stretch !important; } /* ------------------------------------------------------------------------ * 3. MAIN-COL: 100% quando chiuso, 75% quando aperto (come mondo4) * Snap istantaneo in entrambe le direzioni (no transition). Le card * si ridispongono UNA volta sola al click; l'animazione visiva e' * interamente sulla sidebar (overlay). * ---------------------------------------------------------------------- */ body.mondo5-page .mondo5-main-col { flex: 0 0 100% !important; max-width: 100% !important; transition: none; } body.mondo5-page.mondo5-drawer-open .mondo5-main-col { flex: 0 0 75% !important; max-width: 75% !important; transition: none; } /* ------------------------------------------------------------------------ * 4. GRID CARDS: 4 -> 3 colonne quando drawer aperto (IDENTICO a mondo4) * Le card restano a dimensioni simili all'originale: la main si riduce * di 1/4 e togliamo 1 colonna su 4. * ---------------------------------------------------------------------- */ body.mondo5-page.mondo5-drawer-open .main-content-wrapper > .image-grid:first-child > .image-grid__grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important; } body.mondo5-page.mondo5-drawer-open .mondo5-featured-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important; } /* ------------------------------------------------------------------------ * 4b. SIDEBAR PANELS: contenuti incolonnati (1 per riga) * mondo5-base-layout.css forza 2 colonne sui grid HOT/PHOTOS interni * al pannello overlay; in mondo5 li rendiamo verticali cosi' i * contenuti appaiono "grandi" e leggibili. * ---------------------------------------------------------------------- */ body.mondo5-page .mondo5-overlay-hot-grid, body.mondo5-page .mondo5-overlay-photos-grid { grid-template-columns: 1fr !important; gap: 0.9rem !important; } /* ------------------------------------------------------------------------ * 5. SIDEBAR INTERIOR: inline invece di overlay fullscreen * ---------------------------------------------------------------------- */ /* top:120 = attaccata al bordo inferiore della navbar fixed (120.76px); la sidebar termina a 20px dal bottom viewport. Il centro sidebar e' (120 + 100vh - 20)/2 = (100vh + 100)/2, ovvero 50px sotto il centro viewport. Le linguette sono offsettate della stessa quantita' (vedi .mondo5-drawer-handles-container). */ body.mondo5-page .mondo5-sidebar-col .sidebar--left { position: sticky !important; inset: auto !important; top: 120px !important; right: auto !important; bottom: auto !important; left: auto !important; height: calc(100vh - 140px) !important; max-height: calc(100vh - 140px) !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: 0 8px 24px rgba(20, 14, 12, 0.08) !important; overflow: visible !important; /* Azzera il border ereditato da mondo5-base-layout.css:74 (1px solid rgba(76,58,46,0.08)): la parte superiore resta visibile per ~0.66px sotto la navbar fixed a scroll=0 (warm-tint sub-pixel su #242424) e sparisce solo on-scroll quando sticky riallinea la sidebar sotto il viewport-top della navbar. */ border: 0 !important; /* INVERTED PANEL: bg vinaccio gradient, testi beige. Top color = navbar .bg-color-dark-gray (#242424) per evitare banda visibile al boundary navbar/sidebar. */ background: linear-gradient(180deg, #242424 0%, #6d2336 100%) !important; color: #ece8e0 !important; /* PLAN B: stato CHIUSO di default = sidebar off-screen a destra. Slide in via transform 0.32s quando body.mondo5-drawer-open viene aggiunto (override sotto). Off-screen = sposto a destra di 100% + l'offset di edge-to-viewport (clamp). Cosi' quando drawer e' chiuso la sidebar e' invisibile fuori viewport e il main puo' usare 100%. */ transform: translateX(calc(100% + clamp(12px, 1.3vw, 20px))) !important; /* Maschera il contenuto quando chiuso: layer GPU resta caldo (niente visibility:hidden), ma nessun pixel di header/chevrons viene disegnato dove la traslazione non basta a portarlo fuori viewport (es. ultrawide >=1740 dove translateX=516px lascia la sidebar a x=536 a 1920). */ clip-path: inset(0 0 0 100%); transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), clip-path 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important; } /* APERTO: sidebar in posizione (al viewport edge, vedi memoria "drawer-right-strip-fix"). Animata via transform 0.32s (eredita dal base rule sopra). clip-path estende l'area renderizzata oltre il .full-width-container (che ha overflow-x: clip nei breakpoint <1740). */ body.mondo5-page.mondo5-drawer-open .mondo5-sidebar-col .sidebar--left { transform: translateX(clamp(12px, 1.3vw, 20px)) !important; clip-path: inset(0 -40px 0 -40px); } body.mondo5-page .mondo5-overlay-panel { max-height: calc(100vh - 220px); overflow-y: auto; scrollbar-width: none; } body.mondo5-page .mondo5-overlay-panel::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Tweet iframe: min-height alto per evitare scroll INTERNO all'iframe. Il tweet viene mostrato per intero; il panel scrolla se serve. */ body.mondo5-page .mondo5-overlay-panel--tweets .mondo5-overlay-tweets { min-height: 658px !important; } /* ------------------------------------------------------------------------ * 6. LINGUETTE VISIBILI SOLO CON DRAWER CHIUSO (desktop) * Le linguette sono ancorate al bordo destro del viewport e fungono * da "apri drawer + seleziona sezione". Quando il drawer e' aperto * non servono (e si sovrapporrebbero alla sidebar), quindi le * nascondiamo lasciando agire la regola base in mondo5-base-layout.css * (`opacity: 0; pointer-events: none` su .mondo5-drawer-open). * Posizionamento verticale: centrate rispetto al viewport. * ---------------------------------------------------------------------- */ body.mondo5-page .mondo5-drawer-handles-container { top: 55% !important; max-height: calc(100vh - 40px) !important; } body.mondo5-page.mondo5-drawer-open .mondo5-drawer-handles-container, body.mondo5-page.mondo5-drawer-open .mondo5-drawer-handle { opacity: 0 !important; pointer-events: none !important; } /* ------------------------------------------------------------------------ * 7. ORDINE LINGUETTE: NOVITA in fondo (sotto ULTIMI COMMENTI) * Il container e' flex-direction: column (mondo5-overrides.css:221). * Usiamo order per spostare visivamente "hot" in coda senza toccare * il DOM ne' PANEL_ORDER (quindi autoplay/dots restano invariati). * ---------------------------------------------------------------------- */ body.mondo5-page .mondo5-drawer-handle--hot { order: 99 !important; } /* Nota: l'affordance di chiusura ora e' la linguetta verticale .mondo5-slider-close attaccata al bordo sinistro della sidebar destra (vedi regola ~riga 380). Le linguette .mondo5-drawer-handle servono SOLO per aprire/cambiare sezione, non per chiudere. */ } /* ============================================================================ * VIEWPORT ULTRA-WIDE (>=1740px): * Il content centrale resta nel cap di 1740px, ma il drawer destro viene * traslato al bordo del viewport cosi' combacia con la open-handle (gia' fixed * a right:0). Le linguette sinistra sono gia' fixed a left:0, quindi coerenti. * * Tecnica: margin-left calcolato sulla .sidebar--left per spingerla a destra * oltre il container. Il container ha overflow-x:clip, che a questa soglia * clipperebbe la sidebar traslata -> forziamo overflow-x:visible. Il * box-shadow/clip-path che copriva la "fascia destra" di 19px non serve piu' * (non c'e' gap tra drawer e viewport) -> disattivato. * ============================================================================ */ @media (min-width: 1740px) { body.mondo5-page .full-width-container { overflow-x: visible; /* clamp: min 1740 (invariato alla soglia), max 3200 (4K-5K), 95vw nel mezzo. Cap rialzato da 2400 -> 3200 per dare 5-6 colonne di card a viewport 3000-3500 (drawer aperto: main ~2400px, ~6 col). Sotto 2525px di viewport il cap non kick-ina (95vw vince), niente cambio per 1920/2560. */ max-width: clamp(1740px, 95vw, 3200px); } /* Libera la main-col dal vincolo 80% cosi' si allarga oltre e la griglia card si riempie con piu' colonne (4 a 2560px, 3-4 a 2000px, ecc.). */ body.mondo5-page .mondo5-main-col { flex: 1 1 auto !important; max-width: none !important; } /* La sidebar-col puo' restare larga (bootstrap col-lg-20 -> 25%); il contenuto .sidebar--left resta 400px e si ancora al bordo destro della col. Il translateX lo porta al bordo viewport. PLAN B: stato CHIUSO = off-screen (translateX include 100% di offset extra). APERTO override sotto. */ body.mondo5-page .mondo5-sidebar-col .sidebar--left { width: 400px !important; max-width: 400px !important; margin-left: auto !important; transform: translateX(calc(100% + 100vw - clamp(1740px, 95vw, 3200px) + 20px)) !important; } /* APERTO ultrawide: posizione finale al viewport edge. IMPORTANTE: clamp deve combaciare con quello del .full-width-container sopra (3200), altrimenti il calc(100vw - container) sbaglia e la sidebar non finisce esattamente al bordo destro del viewport. */ body.mondo5-page.mondo5-drawer-open .mondo5-sidebar-col .sidebar--left { transform: translateX(calc(100vw - clamp(1740px, 95vw, 3200px) + 20px)) !important; } body.mondo5-page.mondo5-drawer-open .mondo5-sidebar-col .sidebar--left { box-shadow: 0 8px 24px rgba(20, 14, 12, 0.08) !important; clip-path: none; } } /* ============================================================================ * LINGUETTE LATERALI: font piu' grande (override di mondo5-base-layout.css:971) * Valore base: 0.74rem. Tweaka qui il size. * letter-spacing e padding aumentati proporzionalmente per coerenza visiva. * ============================================================================ */ body.mondo5-page .mondo5-drawer-handle { font-size: 0.95rem !important; /* <-- TWEAK QUI il size linguetta */ letter-spacing: 0.09em !important; padding: 0.85rem 0.52rem !important; min-height: 130px !important; transform-origin: right center; transition: opacity 0.22s ease, transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } /* Hover leggero "pancia": la linguetta si gonfia appena verso sinistra (linguette ancorate al bordo destro del viewport). */ body.mondo5-page .mondo5-drawer-handles-container .mondo5-drawer-handle:hover, body.mondo5-page .mondo5-drawer-handles-container .mondo5-drawer-handle:focus-visible { transform: translateX(-1px) scaleX(1.035); box-shadow: 0 20px 36px rgba(33, 20, 28, 0.24); filter: brightness(1.03); } @media (prefers-reduced-motion: reduce) { body.mondo5-page .mondo5-drawer-handles-container .mondo5-drawer-handle:hover, body.mondo5-page .mondo5-drawer-handles-container .mondo5-drawer-handle:focus-visible { transform: none; } } /* ============================================================================ * SLIDER HEADER (freccia-[dots/nav]-freccia-close) — visibile su TUTTE le viewport * ============================================================================ */ body.mondo5-page .mondo5-slider-header { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; background: transparent; color: #ece8e0; border-radius: 0; } /* Titolo ora è nel contenuto (.mondo5-overlay-panels), non nell'header */ body.mondo5-page .mondo5-slider-title { display: block; margin: 0; padding: 14px 18px 10px; font-size: 24px; font-weight: 700; text-transform: uppercase; text-align: center; letter-spacing: 0.6px; color: #ece8e0; border-bottom: 1px solid rgba(236, 232, 224, 0.18); } @media (max-width: 991.98px) { body.mondo5-page .mondo5-slider-title { font-size: 26px; } } body.mondo5-page .mondo5-slider-arrow { flex: 0 0 auto; width: 36px; height: 36px; min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(236, 232, 224, 0.14); color: #ece8e0; font-size: 0; line-height: 0; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } body.mondo5-page .mondo5-slider-arrow__icon { width: 10px; height: 10px; display: block; border-top: 3px solid currentColor; border-right: 3px solid currentColor; border-radius: 1px; } body.mondo5-page .mondo5-slider-arrow--prev .mondo5-slider-arrow__icon { transform: rotate(-135deg); } body.mondo5-page .mondo5-slider-arrow--next .mondo5-slider-arrow__icon { transform: rotate(45deg); } body.mondo5-page .mondo5-slider-arrow:hover, body.mondo5-page .mondo5-slider-arrow:focus-visible { background: #ece8e0; color: #6d2336; outline: none; transform: scale(1.05); } /* Close button rotondo: mobile-only, nella riga del titolo allineato orizzontalmente con la freccia next dell'header. */ body.mondo5-page .mondo5-overlay-panels { position: relative; } /* Fade gradient in fondo al pannello: indica scrollabilità senza mostrare scrollbar */ body.mondo5-page .mondo5-overlay-panels::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(to bottom, rgba(109, 35, 54, 0) 0%, #6d2336 100%); pointer-events: none; z-index: 2; } /* Desktop: la close e' una linguetta verticale sul bordo SINISTRO della sidebar, centrata verticalmente. Siccome la sidebar e' sticky a top:20 con height calc(100vh - 40px), il centro sidebar coincide col centro viewport; la linguetta si sposta visivamente col pannello durante lo scroll della pagina. Stile: beige chiaro con chevron ">" via borders ruotati (sharper del glyph unicode). */ body.mondo5-page .mondo5-slider-close { position: absolute; top: 50%; left: -22px; transform: translateY(-50%); width: 22px; height: 72px; padding: 0; border: 0; border-radius: 4px 0 0 4px; background: linear-gradient(180deg, #26211e 0%, #6d2336 100%); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.18s ease, transform 0.18s ease; z-index: 10; box-shadow: 4px 0 10px rgba(20, 14, 12, 0.28); } body.mondo5-page .mondo5-slider-close:hover, body.mondo5-page .mondo5-slider-close:focus-visible { background: #ece8e0; outline: none; } body.mondo5-page .mondo5-slider-close__grip { display: block; width: 10px; height: 10px; background: transparent; border-top: 3px solid rgba(236, 232, 224, 0.85); border-right: 3px solid rgba(236, 232, 224, 0.85); border-radius: 0; transform: rotate(45deg); transition: border-color 0.18s ease; } body.mondo5-page .mondo5-slider-close:hover .mondo5-slider-close__grip, body.mondo5-page .mondo5-slider-close:focus-visible .mondo5-slider-close__grip { border-top-color: #6d2336; border-right-color: #6d2336; } @media (max-width: 991.98px) { /* INVERTED PANEL mobile: bg vinaccio (override su mondo5-layout.css:512 e mondo5-base-layout.css:611 che settano background:#ece8e0). */ body.mondo5-page .mondo5-sidebar-col .sidebar--left { background: linear-gradient(180deg, #242424 0%, #6d2336 100%) !important; color: #ece8e0 !important; border: 0 !important; } /* Su mobile la close e' un pulsante rotondo posizionato A DESTRA dell'arrow-next del carosello, nella stessa riga (top:12). Per far spazio si shifta a sinistra l'arrow-next con margin-right (vedi regola .mondo5-slider-arrow--next qui sotto). */ body.mondo5-page .mondo5-slider-close { position: absolute; top: 12px; left: auto; right: 8px; width: 34px; height: 34px; border-radius: 50%; background: rgba(236, 232, 224, 0.14); color: #ece8e0; font-size: 26px; font-weight: 400; transform: none; box-shadow: none; display: inline-flex; z-index: 2; } body.mondo5-page .mondo5-slider-close:hover, body.mondo5-page .mondo5-slider-close:focus-visible { background: #ece8e0; color: #6d2336; transform: scale(1.05); } /* Shift l'arrow-next a sinistra per liberare spazio a destra dove mettiamo il close (34px + gap 8 = ~42px). */ body.mondo5-page .mondo5-slider-arrow--next { margin-right: 42px; } /* Sostituisce il chevron grip desktop con una vera X su mobile (piu' chiara come affordance di chiusura rispetto a un chevron che puo' confondere con l'arrow-next del carosello adiacente). */ body.mondo5-page .mondo5-slider-close__grip { width: 14px; height: 14px; background: transparent; border: 0; transform: none; position: relative; } body.mondo5-page .mondo5-slider-close__grip::before, body.mondo5-page .mondo5-slider-close__grip::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 1px; } body.mondo5-page .mondo5-slider-close__grip::before { transform: translateY(-50%) rotate(45deg); } body.mondo5-page .mondo5-slider-close__grip::after { transform: translateY(-50%) rotate(-45deg); } } /* ============================================================================ * DOTS NAVIGATOR * ============================================================================ */ body.mondo5-page .mondo5-slider-dots { display: flex; flex: 1 1 auto; justify-content: center; align-items: center; gap: 10px; padding: 0; background: transparent; border-radius: 0; border-top: none; } body.mondo5-page .mondo5-slider-dot { position: relative; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(236, 232, 224, 0.35); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } body.mondo5-page .mondo5-slider-dot:hover, body.mondo5-page .mondo5-slider-dot:focus-visible { background: #ece8e0; outline: none; transform: scale(1.2); } body.mondo5-page .mondo5-slider-dot.is-active { background: #ece8e0; transform: scale(1.3); } /* ============================================================================ * PROGRESS RING (countdown visuale sul dot attivo) * La custom property --mondo5-ring-fill e' animata via @property * (Chrome/Edge/Safari). Fallback senza @property: l'anello rimane pieno, * ma tutto il resto dello slider continua a funzionare normalmente. * La durata arriva da --mondo5-rotate-ms (settato via JS su drawer). * ============================================================================ */ @property --mondo5-ring-fill { syntax: ""; inherits: false; initial-value: 100%; } body.mondo5-page .mondo5-slider-dot-ring { position: absolute; inset: -6px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; } body.mondo5-page .mondo5-slider-dot.is-active .mondo5-slider-dot-ring { opacity: 1; background: conic-gradient( #ece8e0 var(--mondo5-ring-fill, 100%), rgba(236, 232, 224, 0.2) 0 ); -webkit-mask: radial-gradient(circle, transparent 55%, #000 57%); mask: radial-gradient(circle, transparent 55%, #000 57%); animation: mondo5-ring-countdown var(--mondo5-rotate-ms, 5000ms) linear forwards; } body.mondo5-page .mondo5-slider-dots.is-paused .mondo5-slider-dot.is-active .mondo5-slider-dot-ring { animation-play-state: paused; } body.mondo5-page .mondo5-slider-dots.no-ring .mondo5-slider-dot-ring { display: none; } @keyframes mondo5-ring-countdown { from { --mondo5-ring-fill: 100%; } to { --mondo5-ring-fill: 0%; } } /* ============================================================================ * PAUSE / PLAY BUTTON (accanto ai dots) * Icona CSS-drawn: due barrette verticali (pausa) -> triangolo (play) quando * il bottone ha .is-paused. * ============================================================================ */ body.mondo5-page .mondo5-slider-pause { width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(236, 232, 224, 0.75); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } body.mondo5-page .mondo5-slider-pause:hover, body.mondo5-page .mondo5-slider-pause:focus-visible { background: rgba(236, 232, 224, 0.14); color: #ece8e0; outline: none; transform: scale(1.08); } body.mondo5-page .mondo5-slider-pause[hidden] { display: none !important; } body.mondo5-page .mondo5-slider-pause-icon { display: inline-block; width: 12px; height: 12px; position: relative; } /* Icona PAUSA (due barrette verticali) — visibile di default */ body.mondo5-page .mondo5-slider-pause-icon--pause::before, body.mondo5-page .mondo5-slider-pause-icon--pause::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: currentColor; border-radius: 1px; } body.mondo5-page .mondo5-slider-pause-icon--pause::before { left: 2px; } body.mondo5-page .mondo5-slider-pause-icon--pause::after { right: 2px; } /* Icona PLAY (triangolo) — nascosta di default */ body.mondo5-page .mondo5-slider-pause-icon--play { display: none; } body.mondo5-page .mondo5-slider-pause-icon--play::before { content: ""; position: absolute; left: 2px; top: 0; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent currentColor; } /* Stato pausato: swap icone */ body.mondo5-page .mondo5-slider-pause.is-paused .mondo5-slider-pause-icon--pause { display: none; } body.mondo5-page .mondo5-slider-pause.is-paused .mondo5-slider-pause-icon--play { display: inline-block; } @media (max-width: 991.98px) { body.mondo5-page .mondo5-slider-pause { width: 40px; height: 40px; min-width: 40px; min-height: 40px; } } /* ============================================================================ * PANEL TRANSITION (fade) * Panels esistenti usano la classe is-active per switch istantaneo; aggiungiamo * una transizione fade opzionale senza rompere il comportamento mondo3. * ============================================================================ */ body.mondo5-page .mondo5-overlay-panel { transition: opacity 0.3s ease; } body.mondo5-page .mondo5-overlay-panel:not(.is-active) { opacity: 0; } body.mondo5-page .mondo5-overlay-panel.is-active { opacity: 1; } /* ============================================================================ * MOBILE (<992px): frecce e dots tap-friendly (44px min) * ============================================================================ */ @media (max-width: 991.98px) { body.mondo5-page .mondo5-slider-arrow { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } body.mondo5-page .mondo5-slider-arrow__icon { width: 12px; height: 12px; border-top-width: 4px; border-right-width: 4px; } body.mondo5-page .mondo5-slider-dot { width: 12px; height: 12px; } /* Linguette laterali nascoste su mobile: ingombranti in viewport stretto. */ body.mondo5-page .mondo5-drawer-handles-container { display: none !important; } } /* ============================================================================ * PULSANTE "Ultimi Video" NELL'HEADER (solo mobile) * Viene iniettato via JS in .navbar-helpers-bar__topbar. Nascosto su desktop. * ============================================================================ */ .mondo5-mobile-header-btn { display: none; } @media (max-width: 991.98px) { body.mondo5-page .mondo5-mobile-header-btn { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; margin-right: 10px; padding: 7px 14px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #26211e 0%, #6d2336 100%); color: #fff; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; cursor: pointer; white-space: nowrap; box-shadow: 0 2px 6px rgba(109, 35, 54, 0.35); transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } body.mondo5-page .mondo5-mobile-header-btn:hover, body.mondo5-page .mondo5-mobile-header-btn:focus-visible { background: linear-gradient(180deg, #1f1a18 0%, #7d223f 100%); outline: none; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(109, 35, 54, 0.45); } body.mondo5-page .mondo5-mobile-header-btn:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(109, 35, 54, 0.4); } } /* ============================================================================ * OPEN HANDLE: linguetta rotonda agganciata al bordo destro della viewport * quando il drawer e' CHIUSO. Mobile only. Clic = openDrawer(). * ============================================================================ */ body.mondo5-page .mondo5-drawer-open-handle { position: fixed; top: 60%; right: 0; transform: translate(0, -50%); width: 38px; height: 92px; padding: 0; margin: 0; border: 0; border-radius: 32px 0 0 32px; background: linear-gradient(180deg, #26211e 0%, var(--mondo5-accent) 100%); color: #ffffff; box-shadow: 0 18px 34px rgba(33, 20, 28, 0.2); cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 4985; transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.22s ease; } body.mondo5-page .mondo5-drawer-open-handle:hover, body.mondo5-page .mondo5-drawer-open-handle:focus-visible { background: linear-gradient(180deg, #1f1a18 0%, #7d223f 100%); box-shadow: 0 20px 38px rgba(35, 18, 26, 0.32); outline: none; transform: translate(-2px, -50%); } body.mondo5-page .mondo5-drawer-open-handle__chevron { display: inline-block; width: 10px; height: 10px; border-top: 2px solid #fff; border-left: 2px solid #fff; transform: rotate(-45deg); margin-right: -4px; } body.mondo5-page:not(.mondo5-drawer-open) .mondo5-drawer-open-handle { display: inline-flex; } /* Desktop: la open-handle non serve perche' le linguette HOT/NEW/etc. ancorate al bordo destro del viewport fungono gia' da "apri drawer" (clic apre il drawer + seleziona la sezione). */ @media (min-width: 992px) { body.mondo5-page .mondo5-drawer-open-handle { display: none !important; } } /* ============================================================================ * INVERTED PANEL — OVERRIDE TESTI INTERNI * I contenuti dei panels (video desc, comment title/text, figcaption foto/hot, * video descante, review items) sono dichiarati in mondo5-base-layout.css e * mondo5-layout.css con colore scuro (`rgba(34,29,26,.82)`, `#2a2320`, * `#b3005b`). Su bg vinaccio risultano illeggibili: invertiamo a tonalita' * beige (`#ece8e0` / `rgba(236,232,224,.xx)`) con specificita' sufficiente a * vincere quelle regole. * ============================================================================ */ body.mondo5-page .mondo5-overlay-video-desc, body.mondo5-page .mondo5-overlay-comment-text, body.mondo5-page .mondo5-overlay-videos-source .descante { color: rgba(236, 232, 224, 0.88) !important; } body.mondo5-page .mondo5-overlay-comment-title { color: #ece8e0 !important; } body.mondo5-page .mondo5-overlay-comment-title a { color: #f5b8c8 !important; } body.mondo5-page .mondo5-overlay-comment-text { border-top-color: rgba(236, 232, 224, 0.18) !important; } body.mondo5-page .mondo5-overlay-hot-source figcaption, body.mondo5-page .mondo5-overlay-photos-source figcaption { color: #ece8e0 !important; } body.mondo5-page .mondo5-overlay-card-caption { color: #ece8e0 !important; } body.mondo5-page .mondo5-overlay-comments-source .review-item__label, body.mondo5-page .mondo5-overlay-comments-source .review-item__text { color: rgba(236, 232, 224, 0.88) !important; } /* ============================================================================ * FINE mondo5-overrides.css * ============================================================================ */