/* ============================================================ TEMA SCURO - modernolatina.com ------------------------------------------------------------ ADDITIVO: tutte le regole sono attive SOLO quando . Il tema chiaro (default) non viene mai toccato. I selettori ricalcano quelli del CSS principale (con prefisso html.tema-scuro) per avere specificita' >= alla regola light corrispondente. Palette: bg #15171c / superfici #1c1f26-#20242c / testo #cfd2d8-#c3c6cc / muted #9aa0a8 / accent #ec5c93 (rosa brand schiarito per contrasto) / accent cinema #4ab3ba. ============================================================ */ /* ---- Toggle chiaro/scuro (elemento nuovo, valido in entrambi i temi) ---- */ .theme-toggle { cursor: pointer; margin-left: 8px; padding-left: 10px; border-left: 1px solid #ccc; display: inline-flex; align-items: center; } .theme-toggle .ic-sun { display: none; } .theme-toggle .ic-moon { display: inline-block; } html.tema-scuro .theme-toggle .ic-moon { display: none; } html.tema-scuro .theme-toggle .ic-sun { display: inline-block; } html.tema-scuro .theme-toggle { border-left-color: #363b45; } /* Toggle mobile: nascosto su desktop, visibile in responsive accanto all'hamburger. Riusa .theme-toggle (swap icone + binding JS) ma senza bordo/margine. */ .theme-toggle-mobile { display: none; border-left: none; margin-left: 0; padding-left: 0; } @media screen and (max-width: 1035px) { .theme-toggle-mobile { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; right: 1.5em; margin-top: -20px; width: 40px; height: 40px; z-index: 999; cursor: pointer; } .theme-toggle-mobile svg { width: 26px; height: 26px; fill: #C1ED0B; } } html.tema-scuro .theme-toggle-mobile svg { fill: #ec5c93; } /* ============================================================ BASE PAGINA ============================================================ */ html.tema-scuro body { background-color: #15171c; color: #cfd2d8; } /* ---- Logo: in dark usa la versione bianca (file del preloader) ---- header + logo del menu mobile responsive. !important per battere il display:block inline sull' light. */ .ml-logo-dark { display: none !important; } html.tema-scuro .ml-logo-light { display: none !important; } html.tema-scuro .logo .ml-logo-dark { display: block !important; } html.tema-scuro .voce-logo-mobile .ml-logo-dark { display: inline-block !important; } /* loghi Opera / OLH nella barra info-aggiuntive */ html.tema-scuro .info-aggiuntive .ml-logo-dark { display: block !important; } /* ============================================================ HEADER / BARRA FISSA ============================================================ */ html.tema-scuro header { background-color: #1c1f26; box-shadow: 0 1px 3px rgba(0,0,0,0.6); } /* info-aggiuntive (tel / loghi / social) */ html.tema-scuro header .contenitore-header .info-aggiuntive p { border-right-color: #363b45; color: #cfd2d8; } html.tema-scuro header .contenitore-header .info-aggiuntive p:nth-child(1) { color: #ec5c93; } html.tema-scuro header .contenitore-header .info-aggiuntive p a svg { fill: #ec5c93; } /* Icona YouTube: e' disegnata come cornice con interno TRASPARENTE; in light l'interno mostra il bianco della pagina (schermo bianco + triangolo rosa). In dark l'interno mostrava lo sfondo scuro (sembrava nera). Fix: un disco BIANCO dietro fa da "schermo" identico al light. Cornice e triangolo restano rosa (ereditano fill). In light il disco resta trasparente. */ .info-aggiuntive p a.yt svg .yt-disc { fill: transparent; } html.tema-scuro .info-aggiuntive p a.yt svg .yt-disc { fill: #ffffff; } /* menu desktop - voci 1o livello */ html.tema-scuro header .contenitore-header nav ul li a { color: #e4e6ea; } html.tema-scuro header .contenitore-header nav ul li a:hover, html.tema-scuro header .contenitore-header nav ul li:hover > a, html.tema-scuro header .contenitore-header nav ul li.active > a { color: #ec5c93; } /* sottomenu a tendina */ html.tema-scuro header .contenitore-header nav ul li ul { background-color: #20242c; box-shadow: 0 1px 3px rgba(0,0,0,0.6); } html.tema-scuro header .contenitore-header nav ul li ul .shadow_hide { background-color: #20242c; } html.tema-scuro header .contenitore-header nav ul li ul li a { color: #c3c6cc; } html.tema-scuro header .contenitore-header nav ul li ul li a.active { color: #ec5c93; } /* menu mobile (nav a scomparsa) + separatori interni */ html.tema-scuro header .contenitore-header nav { background-color: #1c1f26; box-shadow: 2px 0 5px rgba(0,0,0,0.6); } html.tema-scuro header .contenitore-header nav .rapid-icon-link, html.tema-scuro header .contenitore-header nav ul, html.tema-scuro header .contenitore-header nav ul .voce-aggiuntiva { border-top-color: #363b45; } /* hamburger (cubo 3D: faccia .left = barre piene, faccia .right = X). Si ricalca ESATTAMENTE la cascata del CSS light, sostituendo #000 -> bianco e mantenendo trasparenti le facce che devono restarlo. L'ordine conta. */ html.tema-scuro header .contenitore-header .hamburger { background-color: rgba(28,31,38,0.85); } /* 1) barre piene nere -> bianche (span + :before + :after) */ html.tema-scuro header .contenitore-header .hamburger a.menu-trigger span, html.tema-scuro header .contenitore-header .hamburger a.menu-trigger span:before, html.tema-scuro header .contenitore-header .hamburger a.menu-trigger span:after { background-color: #e4e6ea; } /* 2) faccia destra (e suoi pseudo) torna trasparente */ html.tema-scuro header .contenitore-header .hamburger a.menu-trigger span.right, html.tema-scuro header .contenitore-header .hamburger a.menu-trigger span.right:before, html.tema-scuro header .contenitore-header .hamburger a.menu-trigger span.right:after { background-color: transparent; } /* 3) bracci della X (right:before/after) -> bianchi */ html.tema-scuro header .contenitore-header .hamburger a.menu-trigger span.right:before, html.tema-scuro header .contenitore-header .hamburger a.menu-trigger span.right:after { background-color: #e4e6ea; } /* freccette / label archivio (bordi inline ddd) */ html.tema-scuro header nav .archivio-arrow { border-color: #888; } html.tema-scuro header nav .archivio-label { border-top-color: #363b45 !important; } /* ============================================================ HOME - slider citazioni ============================================================ */ html.tema-scuro .container-quote { background-color: #1e2128; } html.tema-scuro .container-quote .slider-quote .slider-nascosto { background-color: #1e2128; } html.tema-scuro .container-quote .slider-quote .flickity-viewport .cell p, html.tema-scuro .container-quote .slider-quote .flickity-viewport .cell div, html.tema-scuro .container-quote .slider-quote .flickity-viewport .cell .bubble p a { color: #c3c6cc; } html.tema-scuro .container-quote .slider-quote .flickity-viewport .cell h3, html.tema-scuro .container-quote .slider-quote .slider-nascosto .contenitore-titolo h2 { color: #ec5c93; } html.tema-scuro .container-quote .slider-quote .slider-nascosto .contenitore-titolo h2 span { color: #9aa0a8; } /* ============================================================ SCHEDA SPETTACOLO (dettaglio) ============================================================ */ /* titoli accent rosa -> schiarito */ html.tema-scuro .page_spettacoli_dett section .max-width .content .introduzione h1, html.tema-scuro .page_spettacoli_dett section .max-width aside .sezione h3, html.tema-scuro .page_spettacoli_dett section .max-width aside .sezione.orari h2 { color: #ec5c93; } /* testi descrittivi */ html.tema-scuro .page_spettacoli_dett section .max-width .content .introduzione p.date { color: #9aa0a8; } html.tema-scuro .page_spettacoli_dett section .max-width .content .introduzione p.type { color: #9aa0a8; } html.tema-scuro .page_spettacoli_dett section .max-width .content .introduzione div.desc, html.tema-scuro .page_spettacoli_dett section .max-width .content .descrizione-syn, html.tema-scuro .page_spettacoli_dett section .max-width .content .synopsis p.descrizione-syn { color: #c3c6cc; } html.tema-scuro .page_spettacoli_dett section .max-width aside .sezione p, html.tema-scuro .page_spettacoli_dett section .max-width aside .sezione p a { color: #c3c6cc; } html.tema-scuro .page_spettacoli_dett section .max-width aside .sezione p a.active { color: #ec5c93; } /* descrizione WYSIWYG (puo' avere color inline tipo "black") -> forzata leggibile */ html.tema-scuro .page_spettacoli_dett .dettagli-syn, html.tema-scuro .page_spettacoli_dett .dettagli-syn * { color: #c8cbd1 !important; } html.tema-scuro .page_spettacoli_dett .dettagli-syn a { color: #ec5c93 !important; } /* blocco SHARE (border+testo pink !important) */ html.tema-scuro .page_spettacoli_dett .share, html.tema-scuro .share { border-color: #ec5c93 !important; color: #ec5c93 !important; } html.tema-scuro .share p, html.tema-scuro .share p a { color: #ec5c93 !important; } html.tema-scuro .share svg { fill: #ec5c93 !important; } /* override: SHARE nel gallery slider e nel box spettacolo in scena -> bianchi come in light mode */ html.tema-scuro .index section .gallery .cell .contenitore-testo .share, html.tema-scuro .index section .box-spettacolo-scena div:nth-child(2) .contenitore-testo .posizionamento-testi .more-info .share { border-color: #fff !important; color: #fff !important; } html.tema-scuro .index section .gallery .cell .contenitore-testo .share p, html.tema-scuro .index section .gallery .cell .contenitore-testo .share p a, html.tema-scuro .index section .box-spettacolo-scena div:nth-child(2) .contenitore-testo .posizionamento-testi .more-info .share p, html.tema-scuro .index section .box-spettacolo-scena div:nth-child(2) .contenitore-testo .posizionamento-testi .more-info .share p a { color: #fff !important; } html.tema-scuro .index section .gallery .cell .contenitore-testo .share svg, html.tema-scuro .index section .box-spettacolo-scena div:nth-child(2) .contenitore-testo .posizionamento-testi .more-info .share svg { fill: #fff !important; } /* hover: sfondo bianco, testo nero (come il pulsante "scopri lo spettacolo") */ html.tema-scuro .index section .gallery .cell .contenitore-testo .share:hover, html.tema-scuro .index section .box-spettacolo-scena div:nth-child(2) .contenitore-testo .posizionamento-testi .more-info .share:hover { background-color: #fff !important; color: #000 !important; } html.tema-scuro .index section .gallery .cell .contenitore-testo .share:hover p, html.tema-scuro .index section .gallery .cell .contenitore-testo .share:hover p a, html.tema-scuro .index section .box-spettacolo-scena div:nth-child(2) .contenitore-testo .posizionamento-testi .more-info .share:hover p, html.tema-scuro .index section .box-spettacolo-scena div:nth-child(2) .contenitore-testo .posizionamento-testi .more-info .share:hover p a { color: #000 !important; } html.tema-scuro .index section .gallery .cell .contenitore-testo .share:hover svg, html.tema-scuro .index section .box-spettacolo-scena div:nth-child(2) .contenitore-testo .posizionamento-testi .more-info .share:hover svg { fill: #000 !important; } /* spettacoli correlati */ html.tema-scuro .sp-cor-title { color: #c3c6cc; } html.tema-scuro .sp-cor-date { color: #9aa0a8; } html.tema-scuro .sp-correlati-item.active .sp-cor-title, html.tema-scuro .sp-correlati-item a:hover .sp-cor-title { color: #ec5c93; } /* box newsletter in aside */ html.tema-scuro .newsletter-aside p { color: #c3c6cc; } /* variante CINEMA (accent teal) */ html.tema-scuro .page_spettacoli_dett.cinema section .max-width .content .introduzione h1, html.tema-scuro .page_spettacoli_dett.cinema section .max-width aside .sezione h3, html.tema-scuro .page_spettacoli_dett.cinema section .max-width aside .sezione p a.active { color: #4ab3ba; } /* ============================================================ PAGINA GENERICA (testo) ============================================================ */ html.tema-scuro .page_pagina_dett .container-detail .content .testo, html.tema-scuro .page_pagina_dett .container-detail .content .testo h3 { color: #c3c6cc; } html.tema-scuro .page_pagina_dett .container-detail .content .testo h2 { color: #ec5c93; } html.tema-scuro .page_pagina_dett .container-detail .content .testo a { color: #ec5c93; } /* ============================================================ MAPPA footer (placeholder dietro iframe) ============================================================ */ html.tema-scuro footer section #cd-google-map #google-container { background-color: #2a2d34; } /* ---- Patrocinio Comune di Latina in footer: nero in tema scuro (default chiaro: bianco) ---- */ html.tema-scuro .footer-patrocinio span { color: #000 !important; } /* ============================================================ BARRA NAVIGAZIONE MOBILE FISSA IN BASSO ============================================================ */ html.tema-scuro #ml-mobile-nav { background: #1c1f26; border-top-color: #2a2e38; box-shadow: 0 -1px 5px rgba(0,0,0,0.45); } html.tema-scuro #ml-mobile-nav .ml-nav-item { color: #9aa0a8; } html.tema-scuro #ml-mobile-nav .ml-nav-item.ml-nav-menu { color: #9aa0a8; } /* Titolo "PARTNER & SPONSOR" (chip sopra il border-top della sezione) */ html.tema-scuro .titolo-partner h2 { background-color: #15171c; color: #cfd2d8; } html.tema-scuro #ml-mobile-nav .ml-nav-item:hover, html.tema-scuro #ml-mobile-nav .ml-nav-item:active { color: #ec5c93; } /* Modale/pagina newsletter (_newsletter_modal.php): in tema scuro allineata al verde brand del sito */ html.tema-scuro .ml-nl-box { background: #1d1d22; color: #f2f2f2; border-color: rgba(193,237,11,.3); box-shadow: 0 25px 60px rgba(0,0,0,.55); } html.tema-scuro .ml-nl-x { color: #C1ED0B; } html.tema-scuro .ml-nl-x:hover { color: #fff; } html.tema-scuro .ml-nl-head h3, html.tema-scuro .ml-nl-title { color: #fff; } html.tema-scuro .ml-nl-sub { color: #c8c8cc; } html.tema-scuro .ml-nl-sub strong { color: #C1ED0B; } html.tema-scuro .ml-nl-field label { color: #d8d8dc; } html.tema-scuro .ml-nl-field label span { color: #C1ED0B; } html.tema-scuro .ml-nl-field input { border-color: #3a3a42; background: #26262c; color: #fff; } html.tema-scuro .ml-nl-field input:focus { border-color: #C1ED0B; box-shadow: 0 0 0 3px rgba(193,237,11,.25); } html.tema-scuro .ml-nl-check { color: #bdbdc2; } html.tema-scuro .ml-nl-check input { accent-color: #C1ED0B; } html.tema-scuro .ml-nl-check a { color: #C1ED0B; } html.tema-scuro .ml-nl-submit { background: #C1ED0B; color: #1d1d22; } html.tema-scuro .ml-nl-submit:hover { background: #a9d100; } html.tema-scuro .ml-nl-icon-a { fill: #C1ED0B; } html.tema-scuro .ml-nl-icon-b { fill: rgba(193,237,11,.35); } html.tema-scuro .ml-nl-msg.is-err { background: rgba(200,60,60,.15); border-color: rgba(200,60,60,.5); color: #ffb4b4; } html.tema-scuro .ml-nl-msg.is-ok { background: rgba(80,170,90,.15); border-color: rgba(80,170,90,.5); color: #b6e9bd; } /* V2B2 (rif. R-EQJFREXR): lo sfondo dello slider resta chiaro anche in tema scuro, quindi lo SHARE del gallery slider resta SEMPRE nero (testo, bordo, icone) in entrambi i temi. Hover invariato: sfondo nero, testo/icone bianchi. */ html.tema-scuro .index section .gallery .cell .contenitore-testo .share { border-color: #000 !important; color: #000 !important; } html.tema-scuro .index section .gallery .cell .contenitore-testo .share p, html.tema-scuro .index section .gallery .cell .contenitore-testo .share p a { color: #000 !important; } html.tema-scuro .index section .gallery .cell .contenitore-testo .share svg { fill: #000 !important; } html.tema-scuro .index section .gallery .cell .contenitore-testo .share:hover { background-color: #000 !important; color: #fff !important; } html.tema-scuro .index section .gallery .cell .contenitore-testo .share:hover p, html.tema-scuro .index section .gallery .cell .contenitore-testo .share:hover p a { color: #fff !important; } html.tema-scuro .index section .gallery .cell .contenitore-testo .share:hover svg { fill: #fff !important; } /* V2B2 (rif. R-EWM955ZS): sezione RASSEGNA STAMPA in tema scuro - accenti da rosa a verde acceso brand */ html.tema-scuro .container-quote .slider-quote .flickity-viewport .cell h3, html.tema-scuro .container-quote .slider-quote .slider-nascosto .contenitore-titolo h2 { color: #C1ED0B; } /* V2B2: in tema scuro ogni testo che in chiaro usa color #5c7302 passa a #C1ED0B (verde acceso). Generato da audit automatico su style.css + attributo per gli stili inline nelle view. */ html.tema-scuro a.link-text { color: #C1ED0B !important; } html.tema-scuro .share { color: #C1ED0B !important; } html.tema-scuro .contenitore-bollo h5 { color: #C1ED0B !important; } html.tema-scuro .popup-newsletter .container-newsletter-content.servi-edition a.button { color: #C1ED0B !important; } html.tema-scuro .popup-newsletter .container-newsletter-content a.button:hover { color: #C1ED0B !important; } html.tema-scuro .popup-newsletter .container-sale-content a.button:hover { color: #C1ED0B !important; } html.tema-scuro #informativa-cookie .max-width .contenitore-testo-cookie p a:hover { color: #C1ED0B !important; } html.tema-scuro header .contenitore-header nav ul li a:hover { color: #C1ED0B !important; } html.tema-scuro header .contenitore-header nav ul li:hover>a { color: #C1ED0B !important; } html.tema-scuro header .contenitore-header nav ul li ul li a.active { color: #C1ED0B !important; } html.tema-scuro header .contenitore-header nav ul li.active>a { color: #C1ED0B !important; } html.tema-scuro header .contenitore-header .info-aggiuntive p:nth-child(1) { color: #C1ED0B !important; } html.tema-scuro .index section .box-spettacolo-scena div:nth-child(2) .contenitore-testo .posizionamento-testi .more-info .buy:hover a { color: #C1ED0B !important; } html.tema-scuro .index section .box-spettacolo-prossimo .max-width .apply_effect figure figcaption h2 { color: #C1ED0B !important; } html.tema-scuro .index section .box-acquisto-stagione .max-width:hover h3 { color: #C1ED0B !important; } html.tema-scuro .index section .contenitore-news .max-width h2 { color: #C1ED0B !important; } html.tema-scuro .index section .contenitore-news .max-width .contenitore-testo .box .corpo p b a, html.tema-scuro .index section .contenitore-news .max-width .contenitore-testo .box .corpo p strong a { color: #C1ED0B !important; } html.tema-scuro .index section .contenitore-news .max-width .contenitore-testo .box .corpo div a, html.tema-scuro .index section .contenitore-news .max-width .contenitore-testo .box .corpo p a { color: #C1ED0B !important; } html.tema-scuro .index section .contenitore-news .max-width .contenitore-testo .box .corpo h4 { color: #C1ED0B !important; } html.tema-scuro .index section .contenitore-widget .column #instafeed .error-ist { color: #C1ED0B !important; } html.tema-scuro .index section .contenitore-widget .column #yt-playlist ul.slider li h4 { color: #C1ED0B !important; } html.tema-scuro .container-quote .slider-quote .flickity-viewport .cell h3 { color: #C1ED0B !important; } html.tema-scuro .container-quote .slider-quote .slider-nascosto .contenitore-titolo h2 { color: #C1ED0B !important; } html.tema-scuro .generic-page .container h1 { color: #C1ED0B !important; } html.tema-scuro .generic-page .container .max-width .content table tbody tr td a.button_table:hover { color: #C1ED0B !important; } html.tema-scuro .generic-page .container .max-width .content table tbody .subscription-type td div h2 { color: #C1ED0B !important; } html.tema-scuro .generic-page .container aside .sezione h3 { color: #C1ED0B !important; } html.tema-scuro .generic-page .container aside .sezione .share p { color: #C1ED0B !important; } html.tema-scuro .page_rental section .max-width .content .contenitore-download h3 { color: #C1ED0B !important; } html.tema-scuro .page_rental section .max-width .content h4 { color: #C1ED0B !important; } html.tema-scuro .page_rental section .max-width aside form fieldset ul li input.bottone:hover { color: #C1ED0B !important; } html.tema-scuro .page_rental section .max-width aside form fieldset ul li label.active { color: #C1ED0B !important; } html.tema-scuro .page_promo section.container .max-width .content .slider_promo .cell h3 { color: #C1ED0B !important; } html.tema-scuro .page_login .content-wrap #signIn:hover { color: #C1ED0B !important; } html.tema-scuro .page_2_col section .content div a:hover { color: #C1ED0B !important; } html.tema-scuro .page_staff section div .contenitore-staff .contenitore-titolo h2 { color: #C1ED0B !important; } html.tema-scuro .page_staff section div .contenitore-staff .contenitore_link_contact a:hover { color: #C1ED0B !important; } html.tema-scuro .page_spettacoli #effect-svg .apply_effect figure figcaption h2 { color: #C1ED0B !important; } html.tema-scuro .page_spettacoli_dett section .max-width .content .introduzione h1 { color: #C1ED0B !important; } html.tema-scuro .page_spettacoli_dett section .max-width .content .more-info .buy:hover a { color: #C1ED0B !important; } html.tema-scuro .page_spettacoli_dett section .max-width aside .sezione p a.active { color: #C1ED0B !important; } html.tema-scuro .page_spettacoli_dett section .max-width aside .sezione h3 { color: #C1ED0B !important; } html.tema-scuro .page_spettacoli_dett section .max-width aside .sezione.orari h2 { color: #C1ED0B !important; } html.tema-scuro .customBox { color: #C1ED0B !important; } html.tema-scuro .page_pagina_dett .container-detail .content .testo h2 { color: #C1ED0B !important; } html.tema-scuro .page_pagina_dett .container-detail .content .testo a { color: #C1ED0B !important; } html.tema-scuro .sidebar-titolo { color: #C1ED0B !important; } html.tema-scuro .sidebar-sp-item a:hover .sidebar-sp-titolo { color: #C1ED0B !important; } html.tema-scuro .sidebar-sp-data { color: #C1ED0B !important; } html.tema-scuro .sidebar-link-tutti { color: #C1ED0B !important; } html.tema-scuro .sidebar-tel a { color: #C1ED0B !important; } html.tema-scuro .sidebar-btn-nl { color: #C1ED0B !important; } html.tema-scuro .sidebar-affitto-icona svg { color: #C1ED0B !important; } html.tema-scuro .sidebar-btn-affitto { color: #C1ED0B !important; } html.tema-scuro .sp-replica-giorno { color: #C1ED0B !important; } html.tema-scuro .sp-correlati-item a:hover .sp-cor-title { color: #C1ED0B !important; } html.tema-scuro .sp-correlati-item.active .sp-cor-title { color: #C1ED0B !important; } html.tema-scuro [style*="color:#5c7302"], html.tema-scuro [style*="color: #5c7302"] { color: #C1ED0B !important; } /* ============================================================ Tema scuro - grassetti nei testi dinamici in verde fosforescente (rif. richiesta 2026-07-21). Vale per il contenuto gestito da admin2: pagine dinamiche (.testo) e sinossi spettacoli (.dettagli-syn). ============================================================ */ html.tema-scuro .page_pagina_dett .container-detail .content .testo strong, html.tema-scuro .page_pagina_dett .container-detail .content .testo b, html.tema-scuro .page_spettacoli_dett .dettagli-syn strong, html.tema-scuro .page_spettacoli_dett .dettagli-syn b { color: #C1ED0B !important; } /* ============================================================ Tema scuro - frecce carosello "DICONO DI NOI" (rif. R-WN9TYKE9) ============================================================ */ html.tema-scuro .container-quote .slider-quote .flickity-prev-next-button .arrow { fill: #ffffff !important; }