/* ============================================================ 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: #be1452; } } 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; } /* ============================================================ 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; } html.tema-scuro #ml-mobile-nav .ml-nav-item:hover, html.tema-scuro #ml-mobile-nav .ml-nav-item:active { color: #ec5c93; }