@charset "utf-8"; /* Theme Name: TEATRO 25.6 DEV Theme URI: https://marcospadoni.it Description: Tema Child per il tema BlankSlate (_UNDERSCORE) Author: Marco Spadoni - Lorenzo Spadoni Author URI: http://marcospadoni.it Template: blankslate Version: 2.5.7 refactor */ /* ========================================================================= 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,wdth,wght@0,75..100,300..800;1,75..100,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-superlight: #bbbbbb; --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-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; --font-size-base: 16px; /* --- 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); } */ /* ========================================================================== 2. Stili Generali (Reset, Body, Tipografia) ========================================================================== */ html { scroll-behavior: smooth; } body { font-family: var(--font-primary); background-color: #fff; 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; font-weight: 700; } h2 { font-size: 2.2rem; font-weight: 700; } h3 { font-size: 1.6rem; line-height: 1; font-weight: 700; margin-block: 10px; } .info-accordion-mobile h3, aside h3 { font-size: 1.5rem; } h4 { font-size: 1.3rem; } p, .site-description, .entry-meta .author.vcard { font-family: var(--font-primary); line-height: 1.1; } strong { font-weight: 700; } 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; } nav ul { padding-left: 0; margin: 0; list-style-type: none; } nav ul li { margin: 5px 0; } a { color: var(--link-color); transition: color 0.3s ease; } a:hover { color: var(--link-color-hover); } h1.entry-title, h2.entry-title, h3.entry-title { margin-block: 30px; } /* ========================================================================== 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-wrapper, .flex-wrap { display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-start; gap: var(--spacing-xl); /*max-width: 1620px;*/ margin-inline: auto; width: 100%; 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.) ========================================================================== */ /* --- 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; } a.ui-btn { display: block; width: fit-content; background-color: transparent; padding: var(--spacing-s); margin: var(--spacing-s) auto var(--spacing-xxxl); text-decoration: none; font-size: 1.2rem; color: var(--primary-color); font-weight: 600; border: 2px solid var(--primary-color); } a.ui-btn::before { content: '> '; } a.ui-btn:hover { background-color: var(--primary-color-dark); border-color: var(--primary-color-dark); color: var(--text-color-inverted); } .button-container { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0; z-index: 1000; gap: var(--spacing-s); } .grid-prod .button-container > a { width: 100%; display: inline-block; text-align: center; text-decoration: none; font-size: 1em; font-weight: 400; } .grid-prod .production-grid p.prod-regia span.regia-name { font-weight: 700; text-transform: uppercase; } .prod-regia .regia-prefix, .prod-regia .regia-name { display: block; } .archive article.article-stagione-2025-2026 div.item-wrapper div.article-content div.button-container { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0; z-index: 1000; gap: var(--spacing-s); bottom: 10px; position: static; width: fit-content; padding: 10px; /* left: 50%; */ /*transform: none;*/ width: auto; } .archive article.article-stagione-2025-2026 div.item-wrapper div.article-content div.button-container > a { width: 100%; display: inline-block; text-align: center; text-decoration: none; font-size: 1em; font-weight: 400; padding-inline: 30px; } .archive article.article-stagione-2025-2026 div.item-wrapper div.article-content div.button-container > a::after { content: ' >>'; } .archive div.prod-crediti div.label-container { position: absolute; top: -41px; left: 0; width: 100%; } .prod-crediti .data-evento { color: var(--text-color-light); justify-content: left !important; margin-bottom: 5px; border-bottom: 2px dotted #ccc; padding-bottom: 5px; } .grid-prod .scopri-button { background-color: var(--background-color); color: var(--ui-black); } .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); } .grid-prod .prod-crediti p.prod-data{ color: var(--text-color-light); } .data-evento > strong, .prod-data > strong { display: flex; flex-wrap: wrap; justify-content: left !important; align-items: baseline; } .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); } /*------------------PAGINA sale----------------*/ .page .cover-sale h3.wp-block-heading { font-size: 3em; } .page .cover-sale h3.wp-block-heading a { text-decoration: none; } .page .cover-sale h3.wp-block-heading strong a, .page .cover-sale h3.wp-block-heading a strong { font-weight: 900 !important; } .page div.entry-content { margin-top: 40px; max-width: 1240px; margin: 0 auto; } /* --- 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; } .wpcf7-form input { border: none; margin-block: 5px; } .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; } /* --- Cards --- */ .grid-prod .article-content { width: 100% !important; margin-top: -5px; background-color: var(--background-color-grey-secondary); } /* Assicura che le card in una riga abbiano la stessa altezza */ .grid-prod article .item-wrapper { height: 100%; display: flex; flex-direction: column; } /* Fa in modo che il contenuto si espanda e spinga il bottone in basso */ .grid-prod article .article-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; } .grid-prod div.prod-crediti { padding: var(--spacing-m); background: transparent; position: relative; z-index: 1; color: var(--text-color); width: 100%; } article div.article-content .prod-crediti h3 a { text-decoration: none; } 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: '−'; } #tab-content-orari .schedule-times-cell .time-prefix, #tab-content-orari .schedule-date-cell .day-name { text-align: right; } #tab-content-orari .schedule-table-aside td span { width: 100px; padding-inline: 10px; display: inline-block; } #tab-content-orari .schedule-table-aside .time-block, #tab-content-orari .schedule-table-aside .day-number { text-align: left; } #tab-content-orari .schedule-times-cell .time-prefix { max-width: fit-content; padding-right: 0; } 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); } /*------------------CONTENITORE PER TAB------------------*/ .tab-item { container-type: inline-size; container-name: acordion-tab; } @container acordion-tab (max-width: 400px){ .tab-content { /* ok anche il padding sul container */ padding: var(--spacing-s); } .tab-content td.schedule-date-cell, .tab-content td.schedule-date-cell time span { text-align: right !important; margin-right: 0 !important; padding-right: 0 !important; width: fit-content !important; min-width: 100px; } .tab-content .schedule-times-cell, .tab-content .schedule-times-cell span { text-align: left !important; padding-inline: 5px !important; } } /* --- 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) ========================================================================== */ /* --- Header --- */ #header { background-color: var(--primary-color); position: relative; padding-bottom: var(--spacing-xxs); } #branding { padding: 60px 0 0; width: 96%; margin-inline: auto; } #branding a.custom-logo-link { display: block; max-width: 560px; } #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: 14px; left: 14px; display: block; width: 135px; } /*.header-btn-area a.logo-viola { position: absolute; top: 18px; left: 16px; display: block; width: 140px; }*/ .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: 20px; width: 100% !important; margin-top: 10px; border-top: 2px solid #ccc; padding-top: 5px; } #header #header-tools ul.header-tools { display: flex; flex-wrap: wrap; align-items: center; align-content: center; margin-block: 0; } #header #header-tools ul.header-tools li { list-style: none; margin: 0 var(--spacing-xs); } #header #header-tools ul.header-tools li a { color: var(--text-color); text-decoration: none; font-weight: normal; font-size: 0.9rem; display: flex; align-items: center; } #header #header-tools ul.header-tools li a:hover, #header #header-tools ul.header-tools li a:hover label { color: var(--link-color); cursor: pointer; } #header #header-tools ul.header-tools li a.icon { height: fit-content; } #header #header-tools ul.header-tools li a.social-icon { height: 20px; display: block; } #header #header-tools ul.header-tools li a span.tool-icon { display: inline-block; margin-right: 5px; } #header #header-tools ul.header-tools li a.icon span.tool-icon img, #header #header-tools ul.header-tools li a span.tool-icon img { width: 22px; height: auto; } #header #header-tools ul.header-tools li a label.tooltype { } #header #search { width: fit-content; position: static; margin: 0 var(--spacing-s) var(--spacing-s) 0; margin-top: 8px; } #header 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 ul.social { display: flex; margin-block: 0; width: fit-content; margin-inline: 0; gap: 0; } #header ul.social li { display: inline-flex; height: 25px; width: 25px; margin: 0; } #header ul.social li a { height: 100%; width: 100%; } #header ul.social li a img { height: 100%; width: auto; } .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: uppercase !important; font-weight: bold; height: 20px; line-height: 28px; margin-inline: 10px; 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; } /* --- Custom SVG Icon Styling --- */ .svg-icon { display: inline-block; width: 24px; height: 24px; background-color: var(--text-color, black); /* Fallback to black */ -webkit-mask-size: cover; mask-size: cover; transition: background-color 0.3s ease; } a:hover .svg-icon, button:hover .svg-icon { background-color: var(--primary-color); } /* Specific Icon Masks */ .icon-news { -webkit-mask-image: url('assets/img/icons/news_48-black.svg'); mask-image: url('assets/img/icons/news_48-black.svg'); } .icon-help { -webkit-mask-image: url('assets/img/icons/help_48dp_black.svg'); mask-image: url('assets/img/icons/help_48dp_black.svg'); } .icon-instagram { -webkit-mask-image: url('assets/img/icons/instagram.svg'); mask-image: url('assets/img/icons/instagram.svg'); } .icon-youtube { -webkit-mask-image: url('assets/img/icons/youtube.svg'); mask-image: url('assets/img/icons/youtube.svg'); } .icon-facebook { -webkit-mask-image: url('assets/img/icons/facebook.svg'); mask-image: url('assets/img/icons/facebook.svg'); } .icon-search { width: 28px; height: 28px; -webkit-mask-image: url('assets/img/icons/search_black-48.svg'); mask-image: url('assets/img/icons/search_black-48.svg'); } /* --- Smart Search Bar --- */ .smart-search-container { position: relative; display: flex; align-items: center; } .smart-search-form { display: flex; align-items: center; } .smart-search-field { width: 0; padding: 5px 0; border: none; border-radius: 15px; outline: none; background-color: white; transition: width 0.4s ease-in-out, padding 0.4s ease-in-out; opacity: 0; box-sizing: border-box; } .smart-search-submit { background: transparent !important; border: none; cursor: pointer; padding: 0; margin-left: 0px; z-index: 2; display: flex; align-items: center; justify-content: center; } /* Desktop: Expand on hover */ @media (min-width: 768px) { .smart-search-container:hover .smart-search-field { width: 200px; padding: 5px 10px 5px 15px; border: 1px solid #ccc; opacity: 1; } .smart-search-container:hover .smart-search-submit { margin-left: -32px; /* Position icon over the input */ } } /* Mobile: Expand on .active class */ .smart-search-container.active .smart-search-field { width: 150px; /* Or any width suitable for mobile */ padding: 5px 10px 5px 15px; border: 1px solid #ccc; opacity: 1; } .smart-search-container.active .smart-search-submit { margin-left: -32px; } /* Make service icons larger to match search icon */ #header #header-tools ul.header-tools li a span.tool-icon.svg-icon { width: 26px; height: 26px; } /* --- Stili per Header Sticky --- */ #head-wrapper { position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; background-color: var(--primary-color); width: 100%; transition: box-shadow 0.3s ease-in-out; } #head-wrapper.scrolled { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .scrolled #header div#branding { max-width: 300px; } /*---------------Header sticked minimale------------------*/ #header .flexbox .header-btn-area { flex: 1; order: 2; } .scrolled #header #branding, #header #header-tools { background-color: transparent; width: fit-content; order: 1 } .scrolled #header #branding { margin-top: 8px; } .scrolled .header-btn-area a.logo-viola { position: absolute; top: 14px; left: 14px; display: block; width: 135px; order: 2; } .scrolled header#header div.flexbox div#branding, .scrolled #header div#branding { width: 96% !important; order: 1; padding: 60px 0 0 0; max-width:max-content; } /* 1. Imposta il contenitore dell'icona come flex per allineare icona e testo */ #header #header-tools li a.icon { display: flex; align-items: center; } #header #header-tools li a.icon span.tooltype { width: fit-content; display: none; } /* 2. Stile di base dell'etichetta: nascosta ma pronta per l'animazione */ .scrolled #header #header-tools li a.icon span.tooltype { max-width: 0; opacity: 0; white-space: nowrap; overflow: hidden; transition: max-width 0.4s ease-out, opacity 0.3s ease, margin-left 0.4s ease-out; margin-left: 0; } /* 3. Stile al passaggio del mouse (:hover): Rendi l'etichetta visibile */ #header #header-tools li:hover > a.icon > span.tooltype { max-width: 150px; opacity: 1; margin-left: 8px; } /* --- 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-widgets-area { display: flex; justify-content: center; padding-block: var(--spacing-xl); flex-direction: column; } #footer .widget-col { margin-inline: var(--spacing-xl) !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); } .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 .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%; } /* ========================================================================== 6. Page/Template Specific Styles ========================================================================== */ .page main#content figure.entry-thumbnail { width: 100%; overflow: hidden; } /* --- Generic Headings --- */ h1.entry-title { font-size: 2.3rem; font-weight: bold; text-align: left; margin-block: var(--spacing-s); text-transform: capitalize; padding-left: 50px; line-height: 0.9; } h1.entry-title::before, h2.entry-title::before { content: ">> " !important; font-weight: 900; margin-left: -50px; } h2.entry-title { font-size: 2rem; font-weight: bold; text-align: left !important; margin-block: var(--spacing-l); text-transform: capitalize; } h3.galleria-titolo { font-size: 1.6rem; font-weight: bold; margin-bottom: var(--spacing-l); } /* --- Home Page --- */ .home .content-area { padding-top: 0px; width: 100%; } .home .section-banner.desktop h1.main-title { text-align: center; } .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; } .home .section-banner.desktop { display: none; width: 100%; } .home .section-banner.mobile { display: block; width: 100%; } .home .section-banner img { width: 100%; } body.home section.production-slider-wrapper h2.entry-title.season { display: block; } body.home section.production-slider-wrapper { /*background-color: #000000;*/ /*padding-block: 30px;*/ } .home #teatri { padding-block: var(--spacing-xl) !important; } /*-------------------istituzionali---------------------*/ main#content div.flex-wrapper.istituzionale { padding-inline: 0; } main#content div.flex-wrapper.istituzionale article .entry-content { padding-inline: 30px; } .page div.entry-content { margin-top: 40px; max-width: 1240px; margin: 0 auto; } .istituzionale header.header h1.entry-title { padding-block: 60px; font-size: 2.5rem; } .istituzionale h2 { font-size: 2rem; margin-top: 2rem; } .istituzionale h3 { font-size: 1.5rem; margin-top: 1.5rem; line-height: 1.2; } .istituzionale h4 { font-size: 1.2rem; margin-top: 1.5rem; line-height: 1.2; } .istituzionale p { font-size: 1em; line-height: 1.2; } .flex-wrapper.istituzionale .entry-content ul.wp-block-list { margin-left: var(--spacing-s); padding-left: 0; } .flex-wrapper.istituzionale .entry-content ul.wp-block-list li { line-height: 1.2em; margin-block: 10px; list-style-type: disc; } /* ------------- Single & Archive Pages ---------------- */ /*------------campo regia single produzione---------------*/ .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-xxl); border-bottom: none; } .single-produzione .locandina .crediti-minori-section .crediti-minori-toggle h4.crediti-minori-header { font-size: var(--font-size-base); line-height: 36px; font-weight: 400; cursor: pointer; } .locandina .crediti-minori-section .crediti-minori-toggle.open h4.crediti-minori-header { border-bottom: none; } .locandina .crediti-minori-section .open .crediti-minori-content { padding: 0; border: none; background-color: #transparent; margin: 0; } div.locandina div.crediti h3.regia { text-transform: uppercase; } div.locandina div.crediti h3.regia span.di-e-con, div.locandina div.crediti h3.regia span.di-e-con { text-transform: lowercase; font-size: 16px; font-weight: 400; color: var(--text-color); } 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); } /*------------------labels----------------*/ div.prod-crediti div.label-container { position: absolute; top: -30px; left: 0; width: 100%; } div.prod-crediti div.label-container .item-label { display: inline-block; padding: 4px 10px; font-size: 16px; line-height: 16px; font-weight: 600; line-height: 1; color: #ffffff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0; text-decoration: none; transition: background-color 0.2s ease-in-out; } /*-------------STAGIONE---------------*/ .grid-prod article .item-wrapper { position: relative; } body.archive article .item-wrapper .prod-img a { display: block; } body.archive article .item-wrapper .prod-img a img { width: 100%; height: auto; } /* ========================================================================= 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; } /*----------------------------FORM----------------------------*/ /* Stile base del form */ #wpcf7-f261-p260-o1 .wpcf7-form { max-width: 600px; /* larghezza massima form */ margin: 2rem auto; /* centrato e con spazio sopra/sotto */ font-family: sans-serif; /* font semplice */ font-size: 16px; color: #333; } /* Etichette */ #wpcf7-f261-p260-o1 .wpcf7-form label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #111; line-height: 2em; } /* Campi input e textarea */ #wpcf7-f261-p260-o1 .wpcf7-form input[type="text"], #wpcf7-f261-p260-o1 .wpcf7-form input[type="email"], #wpcf7-f261-p260-o1 .wpcf7-form input[type="url"], #wpcf7-f261-p260-o1 .wpcf7-form input[type="tel"], #wpcf7-f261-p260-o1 .wpcf7-form input[type="number"], #wpcf7-f261-p260-o1 .wpcf7-form input[type="date"], #wpcf7-f261-p260-o1 .wpcf7-form textarea { width: 100%; padding: 0.75rem 1rem; margin-bottom: 1.5rem; border: none; /* niente bordo */ outline: 2px solid #444; /* outline visibile e squadrato */ border-radius: 0; /* no arrotondamenti */ background: #fff; color: #222; font-size: 1rem; transition: outline-color 0.2s ease; } /* Effetto focus */ #wpcf7-f261-p260-o1 .wpcf7-form input:focus, #wpcf7-f261-p260-o1 .wpcf7-form textarea:focus { outline-color: #000; /* più scuro al focus */ } /* Pulsante */ #wpcf7-f261-p260-o1 .wpcf7-form input[type="submit"] { padding: 0.75rem 2rem; background: #000; color: #fff; font-size: 1rem; font-weight: bold; border: none; border-radius: 0; cursor: pointer; transition: background 0.2s ease; } #wpcf7-f261-p260-o1 .wpcf7-form input[type="submit"]:hover { background: #444; } /* Messaggi di risposta */ #wpcf7-f261-p260-o1 .wpcf7-response-output { margin-top: 1rem; padding: 1rem; font-size: 0.9rem; border: 1px solid #ccc; background: #f9f9f9; } /* ========================================================================= 9. Media Queries ========================================================================== */ /* --- Tablet (768px+) --- */ @media all and (min-width: 768px) { #branding { max-width: 360px; padding: var(--spacing-s); margin-inline: 0 auto; } .header-btn-area a.logo-viola { position: absolute; top: 14px; right: 80px; display: block; width: 170px; left: auto; } .scrolled header#header div.flexbox div#branding, .scrolled #header div#branding { max-width: 360px; padding: var(--spacing-xs); margin-inline: 0 auto; margin-top: 0; } .scrolled header#header div.flexbox .header-btn-area a.logo-viola { position: absolute; top: 14px; right: 80px; display: block; width: 170px; left: auto; } #header #header-tools { justify-content: right; width: 100% !important; margin-top: 0; border-top: none; padding-top: 0; } .header-sub-row { display: flex; flex-direction: row; justify-content: center; gap: 10px 10px; flex-wrap: wrap; align-content: flex-end; } #header #header-tools li a.icon span.tooltype { width: fit-content; display: inline-block; } /*.header-sub-row > * { flex: 0 0 calc(30.3333% - 1px); box-sizing: border-box; margin: 10px; }*/ h1.entry-title { font-size: 3rem; color: var(--primary-color); max-width: 1240px; margin-inline: auto; } .produzione h1.entry-title { margin-inline: 0; } h2.entry-title { font-size: 2.5rem; color: var(--primary-color); } h1.entry-title::before, h2.entry-title::before { content: ">>"; color: var(--primary-color-dark); margin-right: var(--spacing-s); font-weight: 700; letter-spacing: -3px; } .flex-wrapper, .flex-wrap { display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-start; gap: var(--spacing-xxxl); /* max-width: 1620px; */ margin-inline: auto; width: 100%; flex-direction: row; } .home .section-banner.desktop { display: block; width: 100%; } .home .section-banner.mobile { display: none; width: 100%; } 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; } .video-thumb { width: 49%; } .grid-gallery a { flex: 0 0 calc(33.333% - 20px); } .promo-abbonamenti-archive { padding: var(--spacing-xl); } .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; } main#content div#primary.content-area .flex-wrap.section-banner img { max-width: 100%; } } /* --- Laptop (1020px+) --- */ @media all and (min-width: 1020px) { .header-btn-area a.logo-viola { position: absolute; top: 10px; right: 10px; display: block; width: 170px; } #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 .flex-cont #branding { flex: 1; max-width: 480px; } #header .flex-cont .header-btn-area { flex: 1; } div#header-tools div#search { /*display: none; momentaneamente tolgo la visibilità */ } #header #header-tools { display: flex; align-items: center; justify-content: flex-end; flex-direction: row; flex-wrap: nowrap; gap: 20px; /* align-content: center; */ width: 100%; } #header .header-sub-row #header-tools > * { flex: 0 1 auto; box-sizing: border-box; margin: 10px; } /*---------------Header sticked minimale------------------*/ #header .flexbox .header-btn-area { flex: 1; order: 2; } .scrolled #header #branding, #header #header-tools { background-color: transparent; width: fit-content; order: 1 } .scrolled header#header div.flexbox .header-btn-area a.logo-viola { position: absolute; top: 16px; right: 60px; display: block; width: 170px; order: 2; } .scrolled #header div#branding { max-width: 300px; order: 1; } .footer-widgets-area { flex-direction: row; 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 - 40px); } .header-sub-row { justify-content: flex-end; } #menu #menu-nav { display: flex; position: static; width: 100%; height: auto; background-color: transparent; top: 0; bottom: 0; z-index: 1; padding: 0; border-top: 1px solid #fff; padding-left: 10px; } ul.sub-menu { position: absolute; z-index: 10; display: none; } #menu-nav li:hover>ul.sub-menu { display: block; } #menu #menu-nav li { border-block: none !important; margin: 0; } .sub-menu li a { background-color: var(--primary-color-dark); border: 1px solid var(--background-color); } #menu a { color: var(--txt-bianco); padding: 32px 16px; font-size: 16px; text-decoration: none; width: 100%; display: inline-block; } #menu-nav .menu-item ul.sub-menu .menu-item ul.sub-menu { transform: translateX(50px); } #menu a:hover { color: var(--ui-yellow-hover); } #menu a.burg-icon { display: none; } .promo-tabs-container .promo-tab { width: 49%; } .promo-tabs-container .promo-tab h3.tab-header.ui-btn, .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 { max-width: 1200px; 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; /*top: 20px; right: 20px;*/ } .tabs-wrapper-accordion { display: flex; flex-wrap: nowrap; /*gap: var(--spacing-xs);*/ 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; } .flex-wrapper { display: flex; flex-direction: row; } /* ------------- layout pagina ----------------*/ .flex-wrapper > article.page { flex: 7; min-width: 0; } .flex-wrapper > aside.sidebar { flex: 3; min-width: 0; } /* ------------- layout produzione ------------*/ #header .flexbox #branding { flex: 1; /* elastico */ max-width: 480px; /* non supera i 480px */ } #header .flexbox .header-btn-area { flex: 1; /* occupa tutto lo spazio rimanente */ } .header-btn-area a.logo-viola { position: absolute; top: 10px; right: 10px; display: block; width: 170px; } .header-btn-area a.logo-viola img { width: 100%; height: auto; } .header-btn-area a.newsletter, a.btn.white-outline-btn.newsletter { position: static; } #menu #menu-nav li a { padding-block: var(--spacing-m); } /*---------------Header sticked minimale------------------*/ #header .flexbox .header-btn-area { flex: 1; order: 2; } .scrolled #header #branding, #header #header-tools { background-color: transparent; width: fit-content !important; order: 1 } .scrolled .header-btn-area a.logo-viola { position: static !important; /*top: 10px; right: 10px;*/ display: block; width: 170px; order: 2; } .scrolled #header div#branding { max-width: 300px; order: 1; } .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 { flex: 7; order: 2; } .flex-wrapper aside { flex: 3; order: 3; background-color: var(--background-color-grey); } main#content aside { flex: 3; !important; } .page figure.entry-thumbnail, .page figure.entry-thumbnail img { width: 100%; height: auto; } } /* --- 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 desktop e nascondi quella mobile */ .desktop-only { display: block; /* o 'flex', a seconda del layout */ } .mobile-only { display: none !important; } /* Sotto una certa larghezza (es. 1024px), inverti la visibilità */ @media (max-width: 1024px) { .desktop-only { display: none !important; } .mobile-only { display: block !important; } } /* * CSS per il wrapping intelligente delle date nelle card */ .data-evento > strong, .prod-data > strong { display: flex; flex-wrap: wrap; /* Permette di andare a capo */ justify-content: left; /* Allinea al centro quando c'è spazio */ align-items: baseline; } /* Rende ogni parte della data un blocco indivisibile */ .date-part { white-space: wrap; } /* Stile per il separatore */ .date-separator { margin: 0; transition: opacity 0.2s ease; } /* * Logica per nascondere il trattino: * Quando il contenitore flex va a capo, il secondo elemento * si posiziona all'inizio della nuova riga. * Questo CSS nasconde il trattino quando è il primo elemento visibile della sua riga. * Funziona su browser moderni che supportano :has(). */ .data-evento > strong:has(.date-separator:first-child), .prod-data > strong:has(.date-separator:first-child) { /* Questa regola si applicherebbe se il trattino fosse il primo elemento, ma con flex-wrap non è un selettore affidabile. Useremo un approccio con le media query come fallback robusto. */ } /* Approccio robusto con Media Query per schermi piccoli dove è probabile l' "a capo" */ @media (max-width: 400px) { /* Nasconde il trattino */ .date-separator { /*display: inline-block;*/ } /* Forza la visualizzazione su due righe e centra il testo */ .data-evento > strong, .prod-data > strong { flex-direction: row; align-items: left; line-height: 1.2; } } /* Nasconde la regia nelle card dei caroselli in homepage */ .home .production-article-item .prod-regia { display: none; } /* Stile per il contenitore della label nella pagina singola produzione */ .single-produzione-labels { margin-bottom: 20px; /* Aggiunge spazio sotto la label */ text-align: left; /* Allinea a sinistra */ }