@charset "utf-8"; /* Theme Name: TEATRO 25.6 REFACTOR Theme URI: https://marcospadoni.it Description: Tema Standalone custom per Teatro Sala Umberto (Ex Child di BlankSlate). Author: Marco Spadoni - Lorenzo Spadoni Author URI: http://marcospadoni.com Version: 2.5.8 standalone Text Domain: teatro256 */ /* ========================================================================= IMPORTS ========================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"); /* ========================================================================== 1. THEMING & VARIABLES ========================================================================== */ :root { /* --- Colori Primari di Brand --- */ --primary-color: #D40000; --primary-color-dark: #8a000d; --primary-color-legacy: #c60013; /* Valore precedente, mantenuto per riferimento */ /* --- Colori di Testo --- */ --text-color: #111111; --text-color-dark: #333333; --text-color-medium: #555555; --text-color-light: #666666; --text-color-accent: #272727; --text-color-inverted: #ffffff; --link-color: var(--primary-color); --link-color-hover: var(--primary-color-dark); /* --- Colori di Sfondo --- */ --background-color: #ffffff; --background-color-light: #f5f5f5; --background-color-soft: #f8f9fa; --background-color-grey: #efefef; --background-color-grey-secondary: #f3f3f3; --background-color-grey-medium: #d3d3d3; --background-color-grey-dark: #cecece; --background-color-dark: #1a1a1a; --background-overlay: rgba(0, 0, 0, 0.75); /* --- Colori per Bordi e Separatori --- */ --border-color: #dddddd; --border-color-white: #ffffff; --border-color-light: #eeeeee; --border-color-medium: #e0e0e0; --border-color-dark: #cccccc; --border-color-grey: #bababa; --border-color-faint: #f0f0f0; /* --- Colori Funzionali (UI) --- */ --ui-blue: #013d7c; --ui-blue-dark: #0056b3; --ui-blue-light: #007bff; --ui-yellow-accent: #e0ff01; --ui-yellow-hover: #ffc800; --ui-red-error: #ff4444; --ui-green: green; --ui-orange: orange; --ui-black: #000000; /* --- Tipografia --- */ --font-primary: "Open Sans", sans-serif; --font-secondary: "Poppins", sans-serif; /* --- Spaziature --- */ --spacing-unit: 8px; --spacing-xxs: calc(var(--spacing-unit) * 0.5); /* 4px */ --spacing-xs: var(--spacing-unit); /* 8px */ --spacing-s: calc(var(--spacing-unit) * 1.25); /* 10px */ --spacing-m: calc(var(--spacing-unit) * 2); /* 16px */ --spacing-l: calc(var(--spacing-unit) * 2.5); /* 20px */ --spacing-xl: calc(var(--spacing-unit) * 3.75); /* 30px */ --spacing-xxl: calc(var(--spacing-unit) * 5); /* 40px */ --spacing-xxxl: calc(var(--spacing-unit) * 7.5); /* 60px */ /* --- Alias per retrocompatibilità --- */ --rosso-primario: var(--primary-color); --rosso-secondario: var(--primary-color-dark); --grigio-chiaro: var(--background-color-grey); --my-bianco: var(--background-color); --txt-bianco: var(--text-color-inverted); } /* ========================================================================== * TEMI ALTERNATIVI * Per attivare un tema, aggiungere la classe corrispondente al tag * es. * ========================================================================== */ /* .theme-blue { --primary-color: #0000FF; --primary-color-dark: #0000CC; } .theme-white { --primary-color: #FFFFFF; --primary-color-dark: #F0F0F0; --text-color: #000000; --text-color-inverted: #000000; --header-bg-color: var(--primary-color); --footer-bg-color: var(--primary-color); } */ /* Prima di iniziare, Compenso la WP Admin Bar quando l'header è in stato scrolled */ .admin-bar #head-wrapper.scrolled { top: 32px; } @media screen and (max-width: 782px) { .admin-bar #head-wrapper.scrolled { top: 46px; } } /* ========================================================================== 2. Stili Generali (Reset, Body, Tipografia) ========================================================================== */ html { scroll-behavior: smooth; } body { font-family: var(--font-primary); background-color: var(--background-color); width: 100%; height: 100%; color: var(--text-color); } * { box-sizing: border-box; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); font-weight: bold; } h1 { font-size: 2.5rem; line-height: 2.5rem; margin-block: 1rem; } h2 { font-size: 2.1rem; } h3 { font-size: 1.4rem; line-height: 2rem; } h4 { font-size: 1.3rem; } p, .site-description, .entry-meta .author.vcard { font-family: var(--font-primary); line-height: normal; } strong { font-weight: 600; } em { font-style: italic; } ul { padding-left: var(--spacing-xxl); margin: var(--spacing-s) 0; } body>ul { list-style-type: disc; } body>ul li { margin: 5px 0; } a { color: var(--link-color); transition: color 0.3s ease; } a:hover { color: var(--link-color-hover); } /* ========================================================================== 3. Layout Principale (Wrapper, Container, Grid) ========================================================================== */ #wrapper { position: relative; } .content-area { padding-top: var(--spacing-xl); } main#content { display: flex; flex-wrap: wrap; } .grid { display: flex; flex-wrap: wrap; } div.setion-wrap.grid { flex-wrap: nowrap; flex-direction: column; } .flex-wrap { display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-start; gap: var(--spacing-xl); max-width: 1620px; margin-inline: auto; } .home .flex-wrap { display: flex; flex-wrap: wrap; align-content: center; justify-content: space-between; gap: 0; max-width: 2700px; margin-inline: auto; } .flex-wrapper { display: flex; flex-direction: column; } ul.breadcrumbs { display: flex; list-style-type: none; padding-left: 0; } ul.breadcrumbs li { font-size: 16px; margin-right: var(--spacing-s); } ul.breadcrumbs li::after { content: " > "; } ul.breadcrumbs li:last-child:after { content: ""; } /* ========================================================================== 4. Componenti UI (Bottoni, Form, Card, Tabs, etc.) ========================================================================== */ /*--------------- menu -------------*/ nav#menu ul { padding-left: 0; margin: 0; list-style-type: none; } nav#menu ul li { margin: 5px 0; } nav#menu ul li a { color: var(--text-color-inverted); text-transform: uppercase; } /* --- Bottoni --- */ a.btn.red-btn { display: block; background-color: var(--primary-color); color: var(--text-color-inverted); text-decoration: none; padding: var(--spacing-s) var(--spacing-l); font-weight: bold; min-width: 150px; text-align: center; } a.btn.white-outline-btn { display: block; background-color: transparent; color: var(--text-color-inverted); border: 2px solid var(--background-color); padding: var(--spacing-xs) 5px; font-weight: bold; min-width: 200px; text-align: center; text-decoration: none; } html body a.ui-btn { display: block; width: 100%; background-color: transparent; padding: 0 20px; margin: 0 auto; text-decoration: none; font-size: 1em !important; color: var(--primary-color); font-weight: 600; border: 2px solid var(--primary-color); line-height: 2; text-align: center; } html body a.ui-btn.inverse { background-color: var(--primary-color); color: var(--text-color-inverted); border: 2px solid var(--primary-color); } body.home div.hcb-content a.ui-btn, body.home .section-cta a.sect-discover-btn.ui-btn { min-width: 250px !important; width: max-content !important; } /*body main #container a.ui-btn::before { content: '> '; }*/ body main #container a.ui-btn:hover { background-color: var(--primary-color-dark); border-color: var(--primary-color-dark); color: var(--text-color-inverted); } html body .grid-prod .prod-card a.ui-btn { width: inherit; } .button-container { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0; z-index: 1000; gap: var(--spacing-s); } a.button { font-size: 1rem; display: inline-block; text-align: center; text-decoration: none; font-weight: 700; padding-inline: 30px; background-color: var(--primary-color); color: var(--background-color); border: 2px solid var(--primary-color); } a.button.inverse { font-size: 1rem; display: inline-block; text-align: center; text-decoration: none; font-weight: 700; padding-inline: 30px; background-color: var(--background-color); color: var(--primary-color); border: 2px solid var(--primary-color); } /*.grid-prod .button-container>a { width: 30%; display: inline-block; text-align: center; text-decoration: none; font-size: 1.2em; font-weight: 700; }*/ .grid-prod .item-wrapper div.article-content div.button-container { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 10px; z-index: 1000; gap: 0; bottom: 8px; /*position: absolute; width: calc(100% - 16px); left: 50%; transform: translateX(-50%);*/ } /*.grid-prod .item-wrapper a.scopri-button { width: 100%; display: inline-block; text-align: center; text-decoration: none; font-weight: 700; padding-inline: 30px; background-color: var(--primary-color); color: var(--background-color); border: 2px solid var(--primary-color); } .grid-prod .item-wrapper a.biglietti-button { width: 100%; display: inline-block; text-align: center; text-decoration: none; font-weight: 700; padding-inline: 30px; background-color: var(--background-color); color: var(--primary-color); border: 2px solid var(--primary-color); line-height: 1.8em; height: auto !important; }*/ /*.grid-prod .scopri-button:hover { background-color: var(--primary-color-dark); color: var(--text-color-inverted); }*/ /*.grid-prod .biglietti-button-style { background-color: var(--primary-color); color: var(--text-color-inverted); }*/ /*.grid-prod .biglietti-button-style:hover { background-color: var(--primary-color-dark); color: var(--text-color-inverted); }*/ .grid-prod .prosa-button-style { background-color: var(--primary-color-dark); color: var(--text-color-inverted); } .grid-prod .musical-button-style { background-color: var(--background-color); color: var(--ui-black); } .btn-scopri { display: inline-block; background: var(--primary-color); color: var(--text-color-inverted); padding: var(--spacing-xs) var(--spacing-l); text-decoration: none; /*border-radius: 20px;*/ font-size: 0.9rem; transition: background 0.3s ease; } .btn-scopri:hover { background: var(--primary-color-dark); } /* --- Form --- */ form input[type="text"], form input[type="email"], form textarea { font-size: 16px !important; } .row.form-booking { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: var(--spacing-l); gap: var(--spacing-l); } aside .form-booking .form-group textarea, aside .form-booking .form-group input { background-color: var(--background-color-grey); } aside .form-booking .form-group .wpcf7-submit { background-color: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); font-size: 1.2rem; font-family: var(--font-primary); font-weight: 600; text-transform: lowercase; } /* --- Labels & Badges --- */ .sold-out-label, .label-container a.genere.item { display: inline-block; background: var(--ui-blue); padding: var(--spacing-xxs) var(--spacing-s); color: var(--text-color-inverted); text-decoration: none; font-weight: bold; text-transform: uppercase; } .badge-esaurito, .badge-scaduto { position: absolute; top: 15px; right: 15px; padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; text-transform: uppercase; color: var(--text-color-inverted); } .badge-esaurito { background: var(--ui-red-error); } .badge-scaduto { background: var(--text-color-light); } .tipo-badge { display: inline-block; background: var(--primary-color); color: var(--text-color-inverted); padding: 4px 12px; border-radius: 15px; font-size: 0.75rem; margin-bottom: var(--spacing-s); text-transform: uppercase; } .single-promo-abbonamenti .badge-obbligatorio { background: var(--primary-color); color: var(--text-color-inverted); padding: 2px var(--spacing-xs); border-radius: 12px; font-size: 0.7rem; display: inline-block; margin-bottom: 5px; } article.grid-item.category-spazio-arte-su-gallery { position: relative; overflow: hidden; border-radius: 0px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .category-spazio-arte-su-gallery .card-content-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: var(--background-overlay); display: flex; flex-direction: column; justify-content: flex-start; padding: var(--spacing-l); color: var(--text-color-inverted); } .promo-abb-card { background: var(--background-color); border-radius: var(--spacing-xs); overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .promo-abb-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } /* --- Tabs & Accordions --- */ .tabs-wrapper-accordion { margin: var(--spacing-l) 0; } .tab-item { border: 1px solid var(--primary-color); margin-bottom: 10px; } .tab-header { width: 100%; padding: 5px 15px; background: transparent; border: none; color: var(--primary-color); font-weight: 600; cursor: pointer; text-align: left; transition: background-color 0.2s ease, color 0.2s ease; position: relative; font-family: var(--font-primary); font-size: 1.2rem; } #tab-item-acquista.tab-item a.tab-header { display: block; text-decoration: none; padding: 9px 15px; } .tab-item.active>.tab-header, .tab-header:hover { background-color: var(--primary-color-dark); color: var(--text-color-inverted); } .tab-content { padding: var(--spacing-l); background-color: var(--background-color-soft); border-top: 2px solid var(--primary-color); display: none; } .tab-item.active .tab-content { display: block; } .tab-header::before { content: '+'; margin-right: var(--spacing-s); font-weight: bold; } .tab-item.active>.tab-header::before { content: '−'; } aside.single-prod-aside .tabella-prezzi.tab h3, aside.single-prod-aside .tab h3.widgettitle, aside.single-prod-aside .tab h3.widget-title { cursor: pointer; margin-bottom: 10px; text-transform: lowercase; text-transform: capitalize; background-color: transparent; color: var(--rosso-primario); width: 100%; padding: 10px; border: 2px var(--rosso-primario) solid; font-size: 1.2rem; font-weight: 600; } main#content div.flex-wrapper aside.single-prod-aside div.widget.widget-acquista { line-height: 2rem; margin-bottom: 15px; } .promo-tabs-container .promo-tab h3.tab-header.ui-btn::before, aside .tab h3::before { content: "+ "; } aside.single-prod-aside .widget-acquista .button-primary.button-acquista-aside { line-height: 30px; } aside.single-prod-aside .tab:hover, aside.single-prod-aside .tab:active { background-color: var(--primary-color-dark); border-color: var(--primary-color-dark); color: var(--text-color-inverted !important); } aside.single-prod-aside .tab:hover a, aside.single-prod-aside .tab:active a { color: var(--text-color-inverted !important); } aside.single-prod-aside #tab-content-orari .durata-cont { margin-top: 20px; } aside.single-prod-aside #tab-content-orari.tab-content span { display: inline-block !important; width: 35%; } aside.single-prod-aside #tab-content-orari.tab-content span.day-name { margin-right: 10px; } aside.single-prod-aside #tab-content-orari.tab-content span.day-number { text-align: right; } /* --- Galleries --- */ .grid-gallery { display: flex; flex-wrap: wrap; gap: var(--spacing-l); margin-top: var(--spacing-l); } .grid-gallery a { flex: 0 0 calc(50% - var(--spacing-s)); aspect-ratio: 1 / 1; display: block; overflow: hidden; border-radius: var(--spacing-xs); transition: transform 0.3s ease, box-shadow 0.3s ease; } .video-gallery { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: var(--spacing-l); } .video-thumb { width: 100%; max-width: 500px; aspect-ratio: 16 / 9; background: var(--ui-black); position: relative; border-radius: var(--spacing-xs); overflow: hidden; margin-bottom: var(--spacing-m); } .video-preview { width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)); display: flex; align-items: center; justify-content: center; color: var(--text-color-inverted); font-size: 3rem; transition: background 0.3s ease; } /* ========================================================================== 5. Sezioni Specifiche (Header, Footer, Sidebar) ========================================================================== */ /* --- Stili per Header Sticky --- */ #head-wrapper { position: -webkit-sticky; /* Per compatibilità con Safari */ position: sticky; top: 0; z-index: 1020; /* Un valore alto per tenerlo sopra gli altri contenuti */ background-color: var(--primary-color); /* Assicura che l'header abbia uno sfondo solido quando scorre */ width: 100%; transition: box-shadow 0.3s ease-in-out; } #head-wrapper.scrolled #header-tools { display: none; } #head-wrapper.scrolled { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } /* --- Header --- */ #header { background-color: var(--primary-color); position: relative; padding-bottom: var(--spacing-s); } #branding { padding: var(--spacing-xs) var(--spacing-s) var(--spacing-xs); width: auto; height: auto; } #branding a.custom-logo-link { display: block; max-width: 80vw; } #branding .custom-logo-link img.mobile-logo, #branding .custom-logo-link img.custom-logo { width: 100%; height: auto; } #header #branding #site-title div.desktop { display: none !important; } #header #branding #site-title div.mobile { display: block !important; } /* .header-btn-area a.logo-viola { position: absolute; top: 10px; right: 70px; display: block; width: 170px; } .header-btn-area a.logo-viola img { width: 100%; } */ /*#header #header-tools { display: flex; align-items: center; justify-content: center; flex-direction: row; flex-wrap: wrap; gap: 10px; width: 100%; padding-inline: 10px; }*/ /*#header-tools #search { width: fit-content; position: static; margin: 0 var(--spacing-s) var(--spacing-s) 0; margin-top: 8px; display: none; } #header-tools div#search .search-form .search-field { border: none; border-radius: 12px; background-color: var(--background-color); padding: 7px 2px; margin-right: var(--spacing-s); box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.44), inset 1px 1px 2px rgba(0, 0, 0, 0.44); width: 100px; } #header-tools ul.social { display: flex; margin-bottom: 0; width: fit-content; margin-inline: 0; gap: 4px; margin-top: 0; } #header-tools ul.social li { display: inline-flex; height: 30px; width: 25px; margin: 0; } #header-tools ul.social li a { height: 100%; width: 100%; } #header-tools ul.social li a img { height: 100%; width: auto; } #header-tools a.btn.newsletter { display: flex; align-items: center; gap: 5px; color: var(--text-color-inverted); text-decoration: none; font-weight: 600; border: none; padding: 0; margin: 0; }*/ /*.header-sub-row { display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap; align-items: flex-start; gap: 10px 10px; } .header-sub-row div.assist-btn-cl { background-color: var(--primary-color-dark); width: 160px; position: static; border-radius: 16px 0; border: 2px solid var(--background-color); box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6); height: 32px; } .header-sub-row div.assist-btn-cl:hover { background-color: var(--rosso-primario); } .header-sub-row div.assist-btn-cl a.assist-btn-a-cl { color: var(--txt-bianco); text-transform: lowercase; font-weight: 600; height: 20px; line-height: 28px; margin-inline: 5px; text-decoration: none; } #header .header-sub-row #search input.search-submit { display: inline-block; background-color: transparent; color: var(--text-color-inverted); border: 2px solid var(--background-color); padding: var(--spacing-xs) 16px; font-weight: bold; text-align: center; text-decoration: none; line-height: 0.8rem; font-size: 1rem; cursor: pointer; }*/ /* --- Footer --- */ #footer { background-color: var(--primary-color); color: var(--text-color-inverted); padding: 0; } #footer p, #footer a, #footer h3, #footer h4 { color: var(--text-color-inverted); } footer#footer figure.footer-logo { max-width: 250px; margin-bottom: 30px; } #footer ul#menu-menu-footer.menu { margin-top: 10px; } #footer ul#menu-menu-footer.menu li { border-top: 0; line-height: 30px; padding: 6px; margin: 0; border-bottom: 2px solid #9f000f; border-top: 2px solid #D43D02; } #footer ul#menu-menu-footer.menu li:hover { background-color: var(--primary-color-dark); border-top: 2px solid #9f000f; /*border-bottom: 2px solid #D43D02;*/ } #footer ul#menu-menu-footer.menu li a { text-decoration: none; text-transform: uppercase; } .footer-widgets-area { display: flex; justify-content: center; padding-block: var(--spacing-xl); flex-direction: column; } #footer .widget-col { margin-inline: var(--spacing-l) !important; } #copyright { background-color: var(--primary-color-dark); color: var(--text-color-inverted); font-size: 12px !important; text-align: center; padding: 5px 0 15px; margin-inline: auto; width: 100%; } /* --- Sidebar --- */ main#content aside { width: 100%; padding-inline: var(--spacing-xl); padding-top: 120px; background-color: var(--background-color-grey); } aside.single-prod-aside .widget { margin-bottom: var(--spacing-xxl); } .sidebar h3.widget-sidebar { font-size: 20px; font-weight: 800; margin-bottom: var(--spacing-l); margin-top: 0px; border-bottom: 1px dotted var(--text-color-accent); padding-bottom: 5px; text-transform: uppercase; } .sidebar.sidebar-stagione p a { color: var(--primary-color-dark); text-decoration: none; font-weight: bold; font-style: normal; } aside.sidebar .aside-widgets-area .widget, aside.sidebar.sidebar-teatro .aside-widgets-area .widget { margin-bottom: var(--spacing-xxl); } aside .widget h3 { font-size: 1.5rem; font-weight: bold; margin-bottom: var(--spacing-s); } aside.single-prod-aside a.button.btn.ui-btn { margin: 0; width: 100%; } /*------------------SIDEBAR TEATRO-------------------*/ /* ========================================================================== 6. Page/Template Specific Styles ========================================================================== */ /* --- Generic Headings --- */ h1.entry-title { font-size: 2.5rem; font-weight: bold; text-align: left; margin-block: var(--spacing-l); text-transform: capitalize; color: var(--primary-color); } h2.entry-title { font-size: 2rem; font-weight: bold; text-align: left !important; margin-block: var(--spacing-xxl); text-transform: capitalize; color: var(--primary-color); } h3.galleria-titolo { font-size: 1.6rem; font-weight: bold; margin-bottom: var(--spacing-l); } /* --------------------- Home Page ------------------------- */ /*--------home ui-----------*/ body.home div.section-cta { padding-block: 20px; } .home .content-area { padding-top: 0px; width: 100%; } .home section#home-banner h1.main-title { font-size: 2.5rem; color: var(--primary-color); text-align: center !important; } .home h2.entry-title { text-align: center !important; } .sect-stagione-2025-2026 h2.entry-title.season { display: none; } .home main#content .section-banner.futurroma-banner { border-style: solid; border-color: var(--ui-yellow-accent); border-width: var(--spacing-l) 0; } body.home section#home-banner.home-banner { margin-bottom: 30px; } body.home section.production-slider-wrapper { /*background-color: #000000;*/ /*padding-block: 30px;*/ } .home #teatri { padding-block: var(--spacing-xl) !important; } .home .slider-dark { background-color: var(--background-color-grey-secondary); } /*----teatri-----*/ .home #teatri.teatri { background-color: var(--primary-color); background-image: url(https://salaumberto.com/wp-content/uploads/2025/09/bk-001.jpg); background-size: cover; background-position: center center; background-attachment: fixed; color: #ffffff; width: 100%; margin-top: 10px; position: relative; } .home #teatri.teatri::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--background-overlay); z-index: 0; } .home #teatri .flex-wrap { display: flex; flex-wrap: wrap; gap: var(--spacing-xxxs); } .home #teatri .flex-wrap article a img { width: 100%; height: auto; } .home #teatri .flex-wrap article a { display: inline-block; width: 100%; height: auto; } .home #teatri .flex-wrap article { max-width: 48%; z-index: 2; } .home #teatri .flex-wrap article:first-of-type { max-width: 100%; width: 100%; z-index: 2; } #teatri>div:nth-child(1)>article:nth-child(1)>a:nth-child(1), .home #teatri .flex-wrap article:first-of-type a { display: inline-block; margin-inline: auto; width: 51%; height: auto; } .home #teatri header h2 { padding: 20px; color: #fff; text-align: left; } /*----fine teatri-----*/ /*----scuole-----*/ .home #scuole.scuole { background-color: var(--primary-color); background-image: url(https://salaumberto.com/wp-content/uploads/2025/09/bk-001.jpg); background-size: cover; background-position: center center; background-attachment: fixed; color: #ffffff; width: 100%; margin-top: 10px; position: relative; } .home #scuole.scuole .flex-wrap { display: flex; flex-wrap: wrap; gap: var(--spacing-xxxs); } .home #scuole.scuole .flex-wrap article a img { width: 100%; height: auto; } .home #scuole.scuole .flex-wrap article a { display: inline-block; width: 100%; height: auto; } .home #scuole.scuole .flex-wrap article { max-width: 48%; } .home #scuole.scuole header h2 { padding: 20px; color: #fff; text-align: left; } /*----fine scuole-----*/ /*----------------------------------------------------------------------- Single & Archive Pages ----------------------------------------------------------------------- */ .single-produzione article.produzione { padding-block: var(--spacing-xl) var(--spacing-xxxl); margin-inline: var(--spacing-l); } .single-produzione .mobile-header.mobile-only img { width: 100%; } .single-produzione div.large-header.desktop-only img { width: 100%; } .single-produzione div.locandina { margin-bottom: var(--spacing-l); padding-bottom: var(--spacing-m); border-bottom: 1px solid var(--border-color-dark); } .single-produzione .locandina .crediti .regia .di-e-con { font-size: 1rem; font-weight: 400; } .single-produzione .locandina .crediti p { margin-block: 0; } .single-produzione .locandina .crediti-minori-section h3.crediti-minori-header { font-size: 1em; font-weight: 600; } .sottotitolo { color: var(--primary-color); font-weight: bolder; } .single-produzione h1.entry-title { margin-block: 10px; } .locandina .crediti h3.regia { margin-block: 5px; font-size: 1.4rem; line-height: 1.4rem; margin-block: 5px; } .single-produzione .data-evento .evento-date p { font-size: 1.2em; font-weight: bold; color: var(--text-color-light); font-style: italic; text-transform: uppercase; border-bottom: 1px solid #ccc; margin-block: 20px 10px; } .single .produzione h3.attore_principale { margin-block: 10px; } .single-produzione article.produzione.type-produzione p.sottotitolo { font-size: 1.4em; font-weight: bold; color: var(--primary-color); text-transform: uppercase; margin-block: 0 10px; } body.archive aside.sidebar { background-color: var(--background-color-grey); padding: var(--spacing-xl); } body.category-spazio-arte-su-gallery main#content .posts-grid-container { display: flex; flex-wrap: wrap; gap: var(--spacing-xl); padding: var(--spacing-xl); } body.category-spazio-arte-su-gallery main#content article.post { flex-basis: calc(50% - (var(--spacing-xl) / 2)); width: calc(50% - (var(--spacing-xl) / 2)); position: relative; overflow: hidden; background-color: var(--background-color-dark); aspect-ratio: 4 / 3; } .page-template-page-teatro main#content article, .page-template-page-teatro-02 main#content article { padding: var(--spacing-xl); } main#content article div.wp-block-cover.my-cover { aspect-ratio: 1 / 1 !important; max-height: 580px; } main#content article div.wp-block-cover.my-cover .wp-block-cover__inner-container h2 { color: var(--text-color-inverted); font-size: 3em !important; margin-top: 0; margin-bottom: var(--spacing-xl); } /*-------------STAGIONE---------------*/ .grid-prod article .item-wrapper { position: relative; } /* --- Cards spettacoli --- */ .grid-prod .article-content { width: 100% !important; margin-top: 0; background-color: var(--background-color-grey-secondary) !important; } .grid-prod .prod-crediti p { margin: 0; } .grid-prod .prod-crediti { padding: var(--spacing-m); background: transparent; position: relative; z-index: 1; color: var(--text-color); width: 100%; } .grid-prod .prod-crediti h3 { margin: 0; line-height: 1.4rem; margin-top: 10px; text-transform: uppercase; } .grid-prod .prod-crediti h3 a { text-decoration: none; } .grid-prod .item-wrapper .prod-img { aspect-ratio: 1 / 1; width: 100%; overflow: hidden; } body.archive article .item-wrapper .prod-img a { display: block; width: 100%; height: 100%; } body.archive article .item-wrapper .prod-img a img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /*----fine cards spettacoli----*/ /*--------------------ARTICOLI-------------------*/ .single-post header#page-header { width: 100%; height: fit-content; } .single-post header#page-header img { width: 100%; height: auto; } .single-post .content-area.flex-wrapper { padding-block: 0; } /*---------------CONTATTI----------------*/ .form-group p { margin-block: 10px; } /* ========================================================================= 7. Utility Classes ========================================================================== */ .list-unstyled { padding-left: 0; list-style: none; } ul.social { padding-left: 0; margin-left: -5px; list-style: none; } .clean-cont { max-width: 800px; margin: 0 auto; padding: 2em; background-color: var(--background-color); border-radius: var(--spacing-xs); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } /* ========================================================================= 8. Patches & Fixes ========================================================================== */ #tab-item-acquista.tab-item a.tab-header::before, #tab-item-acquista.tab-item.active>.tab-header::before, #tab-item-acquista.tab-item .tab-header::before { content: '>' !important; } .tax-categoria-produzioni #container .button-container { display: none; } .single-produzione .locandina div.data-evento { display: none; } .single-produzione .large-header { display: none; } .page a.post-edit-link { display: none; } .single-produzione .form-content.content-tab { background-color: var(--background-color-grey-dark); } .single-prod-aside .widget-prenota.active .content-tab { background-color: var(--background-color-grey-medium); } .page-id-5570 .sp-easy-accordion div.ea-card.sp-ea-single .ea-body p a.btn-assist.green { background-color: var(--ui-green); color: var(--text-color-inverted); } .page-id-5570 .sp-easy-accordion div.ea-card.sp-ea-single .ea-body p a.btn-assist.orange { background-color: var(--ui-orange); color: var(--text-color-inverted); } div.ea-card .wpcf7-form-control-wrap input.wpcf7-tel { background: #f3f3f3; } .sp-easy-accordion a.btn-assist { display: inline-block; margin-inline: 10px; text-decoration: none; /* border: 1px solid var(--text-color); */ padding: 10px; margin-top: 20px; } div.ea-card form.wpcf7-form.init .row .form-group p { margin-top: 30px; } /* ========================================================================= 9. Media Queries ========================================================================== */ @media all and (min-width: 480px) { .footer-widgets-area { display: flex; justify-content: center; padding-block: var(--spacing-xl); flex-direction: row; flex-wrap: wrap; } #footer .widget-col { width: 40%; } } /* --- Tablet (768px+) --- */ @media all and (min-width: 768px) { #branding { max-width: 480px; padding: var(--spacing-l); } ----- */ .header-sub-row { display: flex; flex-direction: row; justify-content: center; gap: 10px 10px; flex-wrap: wrap; align-content: flex-end; } h1.entry-title { font-size: 3rem; color: var(--primary-color); } h2.entry-title { font-size: 2.5rem; color: var(--primary-color); } #footer ul#menu-menu-footer.menu li { border-top: 0; line-height: 30px; padding: 6px; margin: 0; border-bottom: 1px solid #ffffff; border-top: none; } footer#footer figure.footer-logo { max-width: 300px; margin-bottom: 30px; } #home-banner h1.main-title::before, h1.entry-title::before, h2.entry-title::before { display: none; content: ">>"; color: var(--primary-color-dark); margin-right: var(--spacing-s); font-weight: 700; letter-spacing: -3px; } /*-----------------------------------------*/ /*-----------------HOME--------------------*/ /*-----------------------------------------*/ /*----teatri-----*/ .home #teatri .flex-wrap article { max-width: 19%; } .home #teatri .flex-wrap article:first-of-type { max-width: 19%; width: 19%; text-align: center; } #teatri>div:nth-child(1)>article:nth-child(1)>a:nth-child(1), .home #teatri .flex-wrap article:first-of-type a { display: inline-block; margin-inline: auto; width: 80%; height: auto; } .home #teatri .flex-wrap article a { width: 80%; display: block; margin-inline: auto; } .home #teatri header h2 { padding: 20px 30px 0; color: #fff; text-align: center; font-size: 2.5rem; } /*----scuole-----*/ .home #scuole.scuole .flex-wrap article { max-width: 23%; } .home #scuole.scuole .flex-wrap article a { width: 60%; display: block; margin-inline: auto; } .home #scuole.scuole header h2 { padding: 20px 30px 0; color: #fff; text-align: center; font-size: 2.5rem; } body.archive #content #container #article-sections-group { padding: var(--spacing-xxxl); } body.archive .flex-wrap article { width: calc(50% - 15px); } .grid-prod .article-content { position: relative; z-index: 1000; width: 100%; min-height: 190px; } /*----------------------GRIGLIA STAGIONE-------------------------*/ /* ---------- card height equalizer ---------- */ .grid-prod .flex-wrap article, body.archive .flex-wrap article { display: flex; flex-direction: column; } .grid-prod article .item-wrapper { position: relative; display: flex; flex-direction: column; flex: 1; } .grid-prod .article-content { position: relative; z-index: 1000; width: 100%; min-height: unset; display: flex; flex-direction: column; flex: 1; } .grid-prod .prod-crediti { padding: var(--spacing-m); background: transparent; position: relative; z-index: 1; color: var(--text-color); width: 100%; flex: 1; } .grid-prod .item-wrapper div.article-content div.button-container { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0 var(--spacing-m) var(--spacing-m); z-index: 1000; gap: 0; position: static; width: 100%; transform: none; left: auto; bottom: auto; } /* ---------- / card height equalizer ---------- */ .video-thumb { width: 49%; } .grid-gallery a { flex: 0 0 calc(33.333% - 20px); } .promo-abbonamenti-archive { padding: 0; } .promo-abbonamenti-archive .main-title { font-size: 2.2rem; } .promo-abb-list { grid-template-columns: repeat(2, 1fr); gap: 25px; } .single-promo-abbonamenti .flex-wrapper { display: flex; gap: var(--spacing-xl); } .single-promo-abbonamenti article { flex: 1; padding: var(--spacing-xl); } .single-promo-abbonamenti .single-promo-aside { width: 300px; margin-top: 0; padding-top: 0; border-top: none; } .promo-abb-card-horizontal { background-color: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 2px solid #e53e3e; aspect-ratio: 2 / 1; width: 90%; margin: 0 auto; } } /* ------ Laptop -----*/ @media all and (min-width: 1020px) { #header #branding #site-title div.desktop { display: block !important; } #header #branding #site-title div.mobile { display: none !important; } #header { padding-bottom: 0px; } #header .flex-cont { display: flex; } header#header div.flexbox { display: flex; justify-content: space-between; } #header .flexbox #branding { flex: 1; max-width: 400px; padding: var(--spacing-s); transition: max-width 0.35s ease, padding 0.35s ease; margin-left: 0; } #header .flex-cont .header-btn-area { flex: 1; } .desktop-only { display: block !important; } .mobile-only { display: none !important; } /* Solo quando manca header_image e si usa la locandina nel content */ .locandina--con-img { display: flex; gap: 24px; align-items: flex-start; } .locandina--con-img .locandina-img { flex-shrink: 0; width: 30%; /* aggiusta a piacere */ } .flex-wrapper { display: flex; flex-direction: row; flex-wrap: wrap; } .footer-widgets-area { flex-direction: row; flex-wrap: nowrap; padding: var(--spacing-xxxl) var(--spacing-xl); } #footer .widget-col { width: 25%; } .grid-prod .flex-wrap article, body.archive .flex-wrap article { width: calc(100% / 3 - 20px); } .header-sub-row { justify-content: flex-end; } */ #menu a.burg-icon { display: none; } /* ============================================================================= MENU DESKTOP + SUBMENU - VERSIONE PULITA E OTTIMIZZATA ============================================================================= Struttura: - Top level: orizzontale, flex - Dropdown (1° livello): sotto il parent - Sub-sub-menu (2° livello): a destra del parent - Ultime 2 voci: dropdown/sub-menu a sinistra (anti-overflow) Animazioni: - Fade in/out con opacity - Leggero slide dall'alto - Delay sulla chiusura per migliorare UX ============================================================================= */ /* ========================= CONTENITORE MENU PRINCIPALE ========================= */ #menu #menu-nav { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; position: static; width: 100%; height: auto; padding: 0 0 0 10px; margin: 0; background-color: var(--primary-color-dark); border-top: 1px solid var(--border-color-white); z-index: 100; } /* ========================= RESET BASE LI ========================= */ #menu #menu-nav li { list-style: none; margin: 0; padding: 0; border: none !important; } /* ========================= TOP LEVEL - Voci principali ========================= */ #menu #menu-nav>li { position: relative; } #menu #menu-nav>li>a { display: inline-block; padding: 32px 16px; color: var(--txt-bianco); font-size: 16px; text-decoration: none; white-space: nowrap; transition: color 0.2s ease; } #menu #menu-nav>li>a:hover { color: var(--ui-yellow-hover); } /* ========================= DROPDOWN (1° livello) ========================= */ #menu #menu-nav>li>ul.sub-menu { position: absolute; top: 100%; left: 0; right: auto; z-index: 110; min-width: 220px; width: max-content; max-width: min(520px, 90vw); /* Stato iniziale: nascosto */ visibility: hidden; opacity: 0; transform: translateY(-8px); /* Animazione */ transition: visibility 0s linear 0.15s, opacity 0.2s ease, transform 0.2s ease; } /* Dropdown per ULTIME 2 voci: allineato a destra */ #menu #menu-nav>li:nth-last-child(-n+2)>ul.sub-menu { left: auto; right: 0; } /* Mostra dropdown on hover */ #menu #menu-nav>li:hover>ul.sub-menu { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s; } /* ========================= LINK NEI SUBMENU ========================= */ #menu #menu-nav ul.sub-menu>li { position: relative; } #menu #menu-nav ul.sub-menu>li>a { display: block; padding: 14px 20px; background-color: var(--primary-color-dark); color: var(--txt-bianco); font-size: 15px; text-decoration: none; white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: background-color 0.2s ease, color 0.2s ease; } #menu #menu-nav ul.sub-menu>li:last-child>a { border-bottom: none; } #menu #menu-nav ul.sub-menu>li>a:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--ui-yellow-hover); } /* ========================= SUB-SUB-MENU (2° livello) ========================= */ #menu #menu-nav ul.sub-menu>li>ul.sub-menu { position: absolute; top: 0; left: 100%; right: auto; z-index: 120; min-width: 200px; width: max-content; max-width: min(520px, 90vw); /* Stato iniziale: nascosto */ visibility: hidden; opacity: 0; transform: translateX(-8px); /* Animazione */ transition: visibility 0s linear 0.15s, opacity 0.2s ease, transform 0.2s ease; } /* Sub-sub-menu per ULTIME 2 voci: apre a sinistra */ #menu #menu-nav>li:nth-last-child(-n+2) ul.sub-menu>li>ul.sub-menu { left: auto; right: 100%; transform: translateX(8px); } /* Mostra sub-sub-menu on hover */ #menu #menu-nav ul.sub-menu>li:hover>ul.sub-menu { visibility: visible; opacity: 1; transform: translateX(0); transition-delay: 0s; } /* ===================================== MENU SCROLLED ===================================== */ /*----------menu-----------*/ #menu #menu-nav>li>a { display: inline-block; padding: 16px; color: var(--txt-bianco); font-size: 16px; text-decoration: none; white-space: nowrap; transition: color 0.2s ease; } .scrolled #menu #menu-nav>li>a { display: inline-block; padding: 8px 16px; color: var(--txt-bianco); font-size: 16px; text-decoration: none; white-space: nowrap; } /* ========================= AREA INVISIBILE "PONTE" Facilita il passaggio del mouse tra parent e sub-menu ========================= */ #menu #menu-nav ul.sub-menu>li.menu-item-has-children::after { content: ''; position: absolute; top: 0; right: -10px; width: 10px; height: 100%; background: transparent; } /* Per sub-menu che aprono a sinistra */ #menu #menu-nav>li:nth-last-child(-n+2) ul.sub-menu>li.menu-item-has-children::after { right: auto; left: -10px; } /* ========================= INDICATORE FRECCIA per voci con sub-menu ========================= */ #menu #menu-nav ul.sub-menu>li.menu-item-has-children>a::after { content: '›'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; opacity: 0.6; transition: opacity 0.2s ease, transform 0.2s ease; } #menu #menu-nav ul.sub-menu>li.menu-item-has-children:hover>a::after { opacity: 1; transform: translateY(-50%) translateX(3px); } /* Freccia a sinistra per ultime voci */ #menu #menu-nav>li:nth-last-child(-n+2) ul.sub-menu>li.menu-item-has-children>a::after { content: '‹'; right: auto; left: 12px; } #menu #menu-nav>li:nth-last-child(-n+2) ul.sub-menu>li.menu-item-has-children>a { padding-left: 30px; } #menu #menu-nav>li:nth-last-child(-n+2) ul.sub-menu>li.menu-item-has-children:hover>a::after { transform: translateY(-50%) translateX(-3px); } /* ========================= OMBRA DROPDOWN (profondità) ========================= */ #menu #menu-nav ul.sub-menu { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } /*---------FINE MENU DESKTOP + SUBMENU---------*/ /*---------------------------------------------*/ /*------------------------------------------*/ .single-produzione aside .tab.active h3 { background-color: transparent; color: var(--primary-color-dark); border: 2px solid var(--primary-color-dark); } .single.single-post main#content article { width: 100% !important; } .single-produzione article.produzione { margin-inline: 100px; } .single.single-post h1.entry-title a { color: var(--primary-color); } .page-template-page-teatro main#content article h2, .page-template-page-teatro-02 main#content article h2 { color: var(--primary-color); } .page-template-page-teatro-02 main#content article#post-3177 h3 { color: var(--primary-color-dark); } .promo-abbonamenti-archive { margin: 0 auto; } .promo-abb-list { grid-template-columns: repeat(3, 1fr); } .promo-abbonamenti-archive .sidebar-promo-abb { width: 300px; flex-shrink: 0; margin-top: 0; } .header-btn-area a.logo-viola img { width: 100%; height: auto; } .header-sub-row { justify-content: flex-end; } .header-btn-area a.newsletter, a.btn.white-outline-btn.newsletter { position: static; } .tabs-wrapper-accordion { display: flex; flex-wrap: nowrap; flex-direction: column; } .tab-item { display: block; } .tab-header { order: 1; flex: 1; text-align: left; margin-bottom: 0; margin-right: -2px; border: 2px solid var(--primary-color); } .tab-content { order: 2; flex-basis: 100%; } .tab-item.active>.tab-header { background-color: var(--primary-color); color: var(--text-color-inverted); } #tab-content-prenota .form-group { width: calc(50% - var(--spacing-s)); } } /* --- Large Desktop (1240px+) --- */ @media all and (min-width: 1240px) { header#header div.flexbox { display: flex; } #header .flexbox #branding { flex: 1; max-width: 400px; padding-top: var(--spacing-l) transition: max-width 0.35s ease, padding 0.35s ease; } .scrolled #header .flexbox #branding { max-width: 200px; padding: 10px 10px 0; } #head-wrapper.scrolled #header-tools { display: flex; justify-content: flex-end; } #head-wrapper.scrolled a.btn.white-outline-btn { display: block; background-color: transparent; color: var(--text-color-inverted); border: none; padding: 0; font-weight: bold; min-width: auto; text-align: center; text-decoration: none; } #branding a.custom-logo-link { max-width: 700px; } #header .flexbox .header-btn-area { flex: 1; } .header-btn-area a.newsletter, a.btn.white-outline-btn.newsletter { position: static; } #menu #menu-nav li a { padding-block: var(--spacing-m); } .home .grid-prod .flex-wrap { max-width: 1620px !important; margin-inline: auto; } main #container { display: flex; width: 100%; } main #container #article-sections-group { width: 70vw; padding: var(--spacing-xl); } .tax-categoria-produzioni main#content #container aside { width: 30vw; background-color: var(--background-color-grey); } .single-produzione .large-header { display: block; width: 100%; } .single-produzione .large-header img { width: 100%; height: auto; } .single-produzione .class-header { display: none; } .single-produzione #content .flex-wrapper { display: flex; margin-inline: auto; } .single-produzione article.produzione { width: calc(66% - 100px); order: 2; } .flex-wrapper { display: flex !important; width: 100%; } .flex-wrapper aside { order: 3; background-color: var(--background-color-grey); } /* ------------------PAGINA TEATRO------------------ */ main#content aside { width: calc(33%) !important; } main#content figure.entry-thumbnail { width: 100%; max-height: 400px; overflow: hidden; } main#content figure.entry-thumbnail img { width: 100%; height: auto; } .page-id-213 main#content figure.entry-thumbnail img { width: 102%; margin-left: -1%; margin-top: -20%; } main#content .flex-wrapper article .entry-content { max-width: 1080px; margin-inline: auto; } #content .flex-wrapper article { /*width: calc(66% - 100px);*/ } #content .flex-wrapper article { flex-grow: 2; flex-basis: 0; min-width: 0; padding-inline: var(--spacing-xxxl); } #content .flex-wrapper aside { flex-grow: 1; /* L'aside occuperà 1/3 dello spazio */ flex-basis: 0; min-width: 0; } } /* --- Print --- */ @media print { .production-info-tabs-wrapper .tab-content-panel { display: block !important; border: none; padding: var(--spacing-s) 0; } .production-info-tab-nav { display: none; } .locandina .crediti-minori-content { display: block !important; } } /* Per default, mostra la versione mobile e nascondi quella desktop */ .desktop-only { display: none; } .mobile-only { display: block; } /* Sopra una certa larghezza (es. 1024px), inverti la visibilità */ @media (min-width: 1024px) { .desktop-only { display: block !important; } .mobile-only { display: none !important; } /* Solo quando manca header_image e si usa la locandina nel content */ .locandina--con-img { display: flex; gap: 24px; align-items: flex-start; } .locandina--con-img .locandina-img { flex-shrink: 0; width: 30%; /* aggiusta a piacere */ } .locandina--con-img .locandina-img img { width: 100%; height: auto; display: block; } } /*-----------------------------------PATCH ABBO-------------------------------------*/ /* --- Media Query per Desktop (e schermi più grandi) --- */ /* Applica questi stili quando la larghezza dello schermo è almeno 768px */ @media (min-width: 768px) {}