/* Theme Name: Zorba Theme URI: https://www.zorbasociale.it/wp-content/uploads/2026/04/zorbacooperativaLOGO-300x107.png Template: Divi Author: Arancio Altra Comunicazione Version: 1.0.1785500399 Updated: 2026-08-12 */ /* ============================================================ INDICE GENERALE CSS ============================================================ 00. REGOLE CONDIVISE 00.01 Menu Divi desktop — base comune 00.02 Ricerca menu Divi 01. ZORBA — COOPERATIVA 01.01 Blog Servizi / Comunità 01.02 Archivio Progetti 01.03 Filtri Progetti 01.04 Menu Desktop 01.05 Menu Mobile Fullscreen 02. ALLE S.E.R.R.E. 02.01 Carosello e Card Eventi 02.02 Menu Desktop 02.03 Menu Mobile Fullscreen 02.04 Card e Icone SVG animate ============================================================ */ /* ============================================================ 00. REGOLE CONDIVISE ------------------------------------------------------------ INDICE 00.01 Menu Divi desktop — base comune 00.02 Ricerca menu Divi ============================================================ */ /* ------------------------------------------------------------ 00.01 MENU DIVI DESKTOP — BASE COMUNE ------------------------------------------------------------ */ @media (min-width: 981px) { #menu-serre .et-menu-nav > ul > li, #menu-zorba .et-menu-nav > ul > li { position: relative; } #menu-serre .et-menu-nav > ul > li > ul.sub-menu, #menu-zorba .et-menu-nav > ul > li > ul.sub-menu { top: 100% !important; left: 50% !important; right: auto !important; margin-top: -10px !important; transform: translateX(-50%) !important; -webkit-transform: translateX(-50%) !important; box-sizing: border-box; z-index: 9999 !important; border-top: 1px solid #ffffff !important; border-radius: 50px; background: #fff !important; } #menu-serre .et-menu-nav > ul > li > ul.sub-menu > li, #menu-zorba .et-menu-nav > ul > li > ul.sub-menu > li { padding: 0 !important; margin: 0 !important; box-sizing: border-box; } #menu-serre .et-menu-nav > ul > li > ul.sub-menu > li > a, #menu-zorba .et-menu-nav > ul > li > ul.sub-menu > li > a { display: flex !important; align-items: center; width: 100% !important; min-height: 48px; padding: 12px 16px !important; box-sizing: border-box; } /* ------------------------------------------------------------ 00.02 RICERCA MENU DIVI ------------------------------------------------------------ */ .et_pb_menu .et_pb_menu__search { background: #fff !important; border-radius: 50px !important; height: 50px !important; top: 10px !important; position: relative !important; box-shadow: 0 8px 22px rgba(0,0,0,.08) !important; } .et_pb_menu .et_pb_menu__search-input { background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; color: #118f3b !important; padding-left: 22px !important; } .et_pb_menu .et_pb_menu__search-input::placeholder { color: #8c8c8c !important; opacity: 1 !important; } .et_pb_menu .et_pb_menu__close-search-button { color: #666 !important; margin-right: 18px !important; } .et_pb_menu .et_pb_menu__close-search-button::before { color: #118f3b !important; } } /* ============================================================ 01. ZORBA — COOPERATIVA ------------------------------------------------------------ INDICE 01.01 Blog Servizi / Comunità 01.02 Archivio Progetti 01.03 Filtri Progetti 01.04 Menu Desktop 01.05 Menu Mobile Fullscreen ============================================================ */ /* ========================================================= 01.01 ZORBA — BLOG SERVIZI / COMUNITÀ Logo SEMPRE INTEGRO + forma bianca + 2 forme organiche posteriori + 8 varianti automatiche ========================================================= */ /* ------------------------------------------------------------ INDICE 01.01 — BLOG SERVIZI / COMUNITÀ 01.01.01 Colori delle due famiglie 01.01.02 Card Divi 01.01.03 Contenitore grafico 01.01.04 Prima forma posteriore 01.01.05 Seconda forma posteriore 01.01.06 Link immagine 01.01.07 Forma bianca principale 01.01.08 Logo 01.01.09 Elimina overlay Divi 01.01.10–17 Varianti automatiche 1–8 01.01.18 Hover — forme posteriori 01.01.19 Hover — forma bianca 01.01.20 Hover — logo 01.01.21 Testo — rimuove card/bordi Divi 01.01.22 Blocco anti-crop Divi 01.01.23 Tablet 01.01.24 Smartphone 01.01.25 Palette colori forme posteriori ------------------------------------------------------------ */ /* ========================================================= 01.01.01 COLORI DELLE DUE FAMIGLIE ========================================================= */ .zorba-blog-comunita { --zorba-shape-1: #eee8df; --zorba-shape-2: #d9cec1; } .zorba-blog-servizi { --zorba-shape-1: #ebe9e2; --zorba-shape-2: #d5d8cf; } /* ========================================================= 01.01.02 CARD DIVI ========================================================= */ .zorba-blog .et_pb_post, .zorba-blog .et_pb_blog_grid .et_pb_post, .zorba-blog.et_pb_blog_grid_wrapper .et_pb_post { position: relative !important; padding: 0 !important; margin-bottom: 45px !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } /* ========================================================= 01.01.03 CONTENITORE GRAFICO ========================================================= */ .zorba-blog .et_pb_image_container { position: relative !important; width: 88% !important; aspect-ratio: 1 / 1 !important; margin: 15px auto 30px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; overflow: visible !important; isolation: isolate; } /* ========================================================= 01.01.04 PRIMA FORMA POSTERIORE ========================================================= */ .zorba-blog .et_pb_image_container::before { content: ""; position: absolute; z-index: 0; width: 94%; height: 94%; left: 0; top: 5%; background: var(--zorba-shape-1); border-radius: 54% 46% 57% 43% / 44% 56% 46% 54%; transform: translate(-14px, 9px) rotate(-4deg); pointer-events: none; transition: transform 1.5s cubic-bezier(.22,.61,.36,1), border-radius 1.5s cubic-bezier(.22,.61,.36,1); } /* ========================================================= 01.01.05 SECONDA FORMA POSTERIORE ========================================================= */ .zorba-blog .et_pb_image_container::after { content: ""; position: absolute; z-index: 1; width: 91%; height: 91%; right: 0; top: 2%; background: var(--zorba-shape-2); border-radius: 43% 57% 47% 53% / 56% 44% 54% 46%; transform: translate(15px, -8px) rotate(4deg); pointer-events: none; transition: transform 1.6s cubic-bezier(.22,.61,.36,1), border-radius 1.6s cubic-bezier(.22,.61,.36,1); } /* ========================================================= 01.01.06 LINK DELL'IMMAGINE NON deve tagliare assolutamente nulla ========================================================= */ .zorba-blog .entry-featured-image-url { position: relative !important; z-index: 3 !important; width: 84% !important; aspect-ratio: 1 / 1 !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 01.01.07 FORMA BIANCA PRINCIPALE È una forma SEPARATA. Non è una maschera dell'immagine. ========================================================= */ .zorba-blog .entry-featured-image-url::before { content: ""; position: absolute; z-index: 0; inset: 0; background: #fff; border-radius: 46% 54% 49% 51% / 53% 47% 55% 45%; box-shadow: 0 10px 28px rgba(0,0,0,.07); pointer-events: none; transition: transform 1.3s cubic-bezier(.22,.61,.36,1), border-radius 1.3s cubic-bezier(.22,.61,.36,1), box-shadow 1.3s ease; } /* ========================================================= 01.01.08 LOGO QUESTO È IL BLOCCO FONDAMENTALE - nessun border-radius - nessun clipping - nessun crop - rapporto originale preservato ========================================================= */ body .zorba-blog .et_pb_image_container .entry-featured-image-url > img { position: absolute !important; z-index: 5 !important; top: 50% !important; left: 50% !important; display: block !important; /* * Creiamo un'area interna sicura. * Il contenuto dell'immagine viene adattato con contain. */ width: 70% !important; height: 70% !important; max-width: 70% !important; max-height: 70% !important; min-width: 0 !important; min-height: 0 !important; object-fit: contain !important; object-position: center center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important; clip: auto !important; clip-path: none !important; mask: none !important; -webkit-mask: none !important; overflow: visible !important; transform: translate(-50%, -50%) !important; transition: transform 1.2s cubic-bezier(.22,.61,.36,1) !important; } /* ========================================================= 01.01.09 ELIMINA OVERLAY DIVI ========================================================= */ .zorba-blog .et_overlay, .zorba-blog .et_pb_inline_icon { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* ========================================================= 01.01.10 VARIANTE 1 ========================================================= */ .zorba-blog .et_pb_post:nth-child(8n+1) .entry-featured-image-url::before { border-radius: 46% 54% 49% 51% / 53% 47% 55% 45%; } .zorba-blog .et_pb_post:nth-child(8n+1) .et_pb_image_container::before { border-radius: 54% 46% 57% 43% / 44% 56% 46% 54%; transform: translate(-14px, 9px) rotate(-4deg); } .zorba-blog .et_pb_post:nth-child(8n+1) .et_pb_image_container::after { border-radius: 43% 57% 47% 53% / 56% 44% 54% 46%; transform: translate(15px, -8px) rotate(4deg); } /* ========================================================= 01.01.11 VARIANTE 2 ========================================================= */ .zorba-blog .et_pb_post:nth-child(8n+2) .entry-featured-image-url::before { border-radius: 53% 47% 55% 45% / 46% 54% 44% 56%; } .zorba-blog .et_pb_post:nth-child(8n+2) .et_pb_image_container::before { border-radius: 45% 55% 43% 57% / 57% 43% 52% 48%; transform: translate(13px, 10px) rotate(4deg); } .zorba-blog .et_pb_post:nth-child(8n+2) .et_pb_image_container::after { border-radius: 57% 43% 52% 48% / 45% 55% 47% 53%; transform: translate(-12px, -8px) rotate(-3deg); } /* ========================================================= 01.01.12 VARIANTE 3 ========================================================= */ .zorba-blog .et_pb_post:nth-child(8n+3) .entry-featured-image-url::before { border-radius: 48% 52% 44% 56% / 55% 45% 53% 47%; } .zorba-blog .et_pb_post:nth-child(8n+3) .et_pb_image_container::before { border-radius: 58% 42% 48% 52% / 47% 53% 57% 43%; transform: translate(-9px, -5px) rotate(-2deg); } .zorba-blog .et_pb_post:nth-child(8n+3) .et_pb_image_container::after { border-radius: 42% 58% 55% 45% / 53% 47% 43% 57%; transform: translate(13px, 9px) rotate(3deg); } /* ========================================================= 01.01.13 VARIANTE 4 ========================================================= */ .zorba-blog .et_pb_post:nth-child(8n+4) .entry-featured-image-url::before { border-radius: 57% 43% 48% 52% / 43% 57% 51% 49%; } .zorba-blog .et_pb_post:nth-child(8n+4) .et_pb_image_container::before { border-radius: 41% 59% 54% 46% / 56% 44% 48% 52%; transform: translate(16px, 5px) rotate(5deg); } .zorba-blog .et_pb_post:nth-child(8n+4) .et_pb_image_container::after { border-radius: 55% 45% 41% 59% / 48% 52% 58% 42%; transform: translate(-15px, -5px) rotate(-5deg); } /* ========================================================= 01.01.14 VARIANTE 5 ========================================================= */ .zorba-blog .et_pb_post:nth-child(8n+5) .entry-featured-image-url::before { border-radius: 44% 56% 58% 42% / 52% 48% 43% 57%; } .zorba-blog .et_pb_post:nth-child(8n+5) .et_pb_image_container::before { border-radius: 56% 44% 46% 54% / 42% 58% 55% 45%; transform: translate(-16px, -3px) rotate(-5deg); } .zorba-blog .et_pb_post:nth-child(8n+5) .et_pb_image_container::after { border-radius: 46% 54% 59% 41% / 57% 43% 46% 54%; transform: translate(11px, 12px) rotate(2deg); } /* ========================================================= 01.01.15 VARIANTE 6 ========================================================= */ .zorba-blog .et_pb_post:nth-child(8n+6) .entry-featured-image-url::before { border-radius: 55% 45% 43% 57% / 48% 52% 58% 42%; } .zorba-blog .et_pb_post:nth-child(8n+6) .et_pb_image_container::before { border-radius: 43% 57% 56% 44% / 52% 48% 42% 58%; transform: translate(8px, 13px) rotate(3deg); } .zorba-blog .et_pb_post:nth-child(8n+6) .et_pb_image_container::after { border-radius: 59% 41% 47% 53% / 44% 56% 53% 47%; transform: translate(-14px, -10px) rotate(-4deg); } /* ========================================================= 01.01.16 VARIANTE 7 ========================================================= */ .zorba-blog .et_pb_post:nth-child(8n+7) .entry-featured-image-url::before { border-radius: 42% 58% 53% 47% / 57% 43% 49% 51%; } .zorba-blog .et_pb_post:nth-child(8n+7) .et_pb_image_container::before { border-radius: 60% 40% 52% 48% / 46% 54% 58% 42%; transform: translate(-10px, 12px) rotate(-3deg); } .zorba-blog .et_pb_post:nth-child(8n+7) .et_pb_image_container::after { border-radius: 44% 56% 42% 58% / 55% 45% 50% 50%; transform: translate(17px, -5px) rotate(5deg); } /* ========================================================= 01.01.17 VARIANTE 8 ========================================================= */ .zorba-blog .et_pb_post:nth-child(8n+8) .entry-featured-image-url::before { border-radius: 59% 41% 46% 54% / 45% 55% 57% 43%; } .zorba-blog .et_pb_post:nth-child(8n+8) .et_pb_image_container::before { border-radius: 47% 53% 59% 41% / 58% 42% 45% 55%; transform: translate(15px, -7px) rotate(4deg); } .zorba-blog .et_pb_post:nth-child(8n+8) .et_pb_image_container::after { border-radius: 55% 45% 43% 57% / 41% 59% 54% 46%; transform: translate(-13px, 11px) rotate(-4deg); } /* ========================================================= 01.01.18 HOVER — FORME POSTERIORI ========================================================= */ .zorba-blog .et_pb_post:hover .et_pb_image_container::before { border-radius: 42% 58% 48% 52% / 57% 43% 55% 45%; transform: translate(-23px, 14px) rotate(-7deg) scale(1.035); } .zorba-blog .et_pb_post:hover .et_pb_image_container::after { border-radius: 58% 42% 54% 46% / 43% 57% 47% 53%; transform: translate(23px, -13px) rotate(7deg) scale(1.03); } /* ========================================================= 01.01.19 HOVER — FORMA BIANCA ========================================================= */ .zorba-blog .et_pb_post:hover .entry-featured-image-url::before { border-radius: 52% 48% 56% 44% / 45% 55% 47% 53%; transform: translateY(-3px) scale(.99); box-shadow: 0 15px 32px rgba(0,0,0,.10); } /* ========================================================= 01.01.20 HOVER — LOGO Manteniamo SEMPRE il translate di centratura. ========================================================= */ body .zorba-blog .et_pb_post:hover .et_pb_image_container .entry-featured-image-url > img { transform: translate(-50%, -50%) scale(1.035) !important; } /* ========================================================= 01.01.21 TESTO — RIMUOVE CARD/BORDI DIVI ========================================================= */ .zorba-blog .entry-title, .zorba-blog .post-meta, .zorba-blog .post-content, .zorba-blog .post-content-inner { border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; } .zorba-blog .entry-title { margin-top: 0 !important; padding: 0 0 8px !important; } .zorba-blog .post-meta { margin-bottom: 10px !important; } /* ========================================================= 01.01.22 BLOCCO ANTI-CROP DIVI Nessun antenato dell'immagine deve ritagliarla. ========================================================= */ body .zorba-blog .et_pb_post, body .zorba-blog .et_pb_image_container, body .zorba-blog .entry-featured-image-url { overflow: visible !important; } /* ========================================================= 01.01.23 TABLET ========================================================= */ @media (max-width: 980px) { .zorba-blog .et_pb_image_container { width: 90% !important; } .zorba-blog .entry-featured-image-url { width: 84% !important; } body .zorba-blog .et_pb_image_container .entry-featured-image-url > img { width: 68% !important; height: 68% !important; max-width: 68% !important; max-height: 68% !important; } } /* ========================================================= 01.01.24 SMARTPHONE ========================================================= */ @media (max-width: 767px) { .zorba-blog .et_pb_image_container { width: 88% !important; margin-top: 10px !important; margin-bottom: 25px !important; } .zorba-blog .entry-featured-image-url { width: 86% !important; } /* * Su mobile lasciamo ancora più margine * per garantire che qualsiasi logo resti completo. */ body .zorba-blog .et_pb_image_container .entry-featured-image-url > img { width: 66% !important; height: 66% !important; max-width: 66% !important; max-height: 66% !important; } /* movimento più contenuto */ .zorba-blog .et_pb_post:hover .et_pb_image_container::before { transform: translate(-10px, 6px) rotate(-3deg); } .zorba-blog .et_pb_post:hover .et_pb_image_container::after { transform: translate(10px, -6px) rotate(3deg); } .zorba-blog .et_pb_post:hover .entry-featured-image-url::before { transform: none; } body .zorba-blog .et_pb_post:hover .et_pb_image_container .entry-featured-image-url > img { transform: translate(-50%, -50%) scale(1.02) !important; } } /* ========================================================= 01.01.25 ZORBA BLOG — COLORI FORME POSTERIORI 8 combinazioni automatiche ========================================================= */ /* --------------------------------------------------------- 01.01.25.01 COMUNITÀ RESIDENZIALI Toni più caldi / morbidi --------------------------------------------------------- */ .zorba-blog-comunita .et_pb_post:nth-child(8n+5) { --zorba-shape-1: #F3CDB9; --zorba-shape-2: #E9A987; } .zorba-blog-comunita .et_pb_post:nth-child(8n+2) { --zorba-shape-1: #D7E6D1; --zorba-shape-2: #AFC8A5; } .zorba-blog-comunita .et_pb_post:nth-child(8n+3) { --zorba-shape-1: #F4DEAC; --zorba-shape-2: #E8C672; } .zorba-blog-comunita .et_pb_post:nth-child(8n+4) { --zorba-shape-1: #D8D5EB; --zorba-shape-2: #B8B0D5; } .zorba-blog-comunita .et_pb_post:nth-child(8n+1) { --zorba-shape-1: #CFE5E4; --zorba-shape-2: #9CC9C5; } .zorba-blog-comunita .et_pb_post:nth-child(8n+6) { --zorba-shape-1: #F1D4D9; --zorba-shape-2: #DFA9B4; } .zorba-blog-comunita .et_pb_post:nth-child(8n+7) { --zorba-shape-1: #E6D8C7; --zorba-shape-2: #CDB69B; } .zorba-blog-comunita .et_pb_post:nth-child(8n+8) { --zorba-shape-1: #D6E0BB; --zorba-shape-2: #B6C88A; } /* --------------------------------------------------------- 01.01.25.02 SERVIZI EDUCATIVI Toni un po' più vivaci --------------------------------------------------------- */ .zorba-blog-servizi .et_pb_post:nth-child(8n+5) { --zorba-shape-1: #F6C6A8; --zorba-shape-2: #ED8E58; } .zorba-blog-servizi .et_pb_post:nth-child(8n+2) { --zorba-shape-1: #C8E7D0; --zorba-shape-2: #8EC69C; } .zorba-blog-servizi .et_pb_post:nth-child(8n+3) { --zorba-shape-1: #F6E39F; --zorba-shape-2: #E8C953; } .zorba-blog-servizi .et_pb_post:nth-child(8n+4) { --zorba-shape-1: #C9DCEE; --zorba-shape-2: #8FB5D8; } .zorba-blog-servizi .et_pb_post:nth-child(8n+1) { --zorba-shape-1: #E3CDE8; --zorba-shape-2: #C39ACB; } .zorba-blog-servizi .et_pb_post:nth-child(8n+6) { --zorba-shape-1: #F3CACF; --zorba-shape-2: #DE969F; } .zorba-blog-servizi .et_pb_post:nth-child(8n+7) { --zorba-shape-1: #C9E5E1; --zorba-shape-2: #8AC4BC; } .zorba-blog-servizi .et_pb_post:nth-child(8n+8) { --zorba-shape-1: #EAD4B7; --zorba-shape-2: #D1AA77; } /* ============================================================ 01.02 ZORBA — ARCHIVIO PROGETTI ------------------------------------------------------------ INDICE 01.02.01 Base card e contenitore immagine 01.02.02 Immagine principale 01.02.03 Overlay Divi disattivato 01.02.04 Nove forme astratte 01.02.05 Morph desktop 01.02.06 Logo progetto 01.02.07 Crossfade foto → logo 01.02.08 Touch 01.02.09 Accessibilità ============================================================ */ /* ------------------------------------------------------------ 01.02.01 BASE CARD E CONTENITORE IMMAGINE ------------------------------------------------------------ */ .zorba-progetti .et_pb_portfolio_item { transform: translateY(0); transition: transform 1s cubic-bezier(.16, 1, .3, 1); } .zorba-progetti .et_portfolio_image { position: relative; display: block; width: 100%; overflow: hidden; transform: none !important; transform-origin: center; border: 0 !important; outline: 0 !important; box-shadow: none !important; filter: none !important; transition: border-radius 1.35s cubic-bezier(.16, 1, .3, 1) !important; } /* ------------------------------------------------------------ 01.02.02 IMMAGINE PRINCIPALE ------------------------------------------------------------ */ .zorba-progetti .et_portfolio_image > img:not(.zorba-project-logo) { position: relative; z-index: 1; display: block; width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: auto !important; object-fit: initial !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; transform: none !important; transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1) !important; } /* ------------------------------------------------------------ 01.02.03 OVERLAY DIVI DISATTIVATO ------------------------------------------------------------ */ .zorba-progetti .et_portfolio_image .et_overlay, .zorba-progetti .et_overlay { display: none !important; visibility: hidden !important; opacity: 0 !important; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; } .zorba-progetti .et_portfolio_image::before, .zorba-progetti .et_portfolio_image::after, .zorba-progetti .et_overlay::before, .zorba-progetti .et_overlay::after { display: none !important; visibility: hidden !important; content: none !important; } .zorba-progetti .et_pb_portfolio_item > a, .zorba-progetti .et_pb_portfolio_item > a:hover, .zorba-progetti .et_pb_portfolio_item a:focus, .zorba-progetti .et_pb_portfolio_item a:focus-visible { border: 0 !important; outline: 0 !important; box-shadow: none !important; } /* ------------------------------------------------------------ 01.02.04 NOVE FORME ASTRATTE ------------------------------------------------------------ */ .zorba-progetti .et_pb_portfolio_item:nth-child(9n+1) .et_portfolio_image { border-radius: 48% 42% 46% 50% / 44% 52% 46% 50%; } .zorba-progetti .et_pb_portfolio_item:nth-child(9n+2) .et_portfolio_image { border-radius: 52% 26% 48% 30% / 42% 54% 46% 56%; } .zorba-progetti .et_pb_portfolio_item:nth-child(9n+3) .et_portfolio_image { border-radius: 36% 48% 34% 44% / 48% 36% 50% 40%; } .zorba-progetti .et_pb_portfolio_item:nth-child(9n+4) .et_portfolio_image { border-radius: 46% 38% 50% 42% / 38% 52% 40% 50%; } .zorba-progetti .et_pb_portfolio_item:nth-child(9n+5) .et_portfolio_image { border-radius: 30% 52% 34% 48% / 54% 40% 56% 44%; } .zorba-progetti .et_pb_portfolio_item:nth-child(9n+6) .et_portfolio_image { border-radius: 44% 34% 48% 38% / 36% 50% 40% 48%; } .zorba-progetti .et_pb_portfolio_item:nth-child(9n+7) .et_portfolio_image { border-radius: 46% 52% 42% 48% / 52% 40% 50% 44%; } .zorba-progetti .et_pb_portfolio_item:nth-child(9n+8) .et_portfolio_image { border-radius: 54% 30% 50% 26% / 44% 52% 42% 56%; } .zorba-progetti .et_pb_portfolio_item:nth-child(9n) .et_portfolio_image { border-radius: 34% 46% 40% 50% / 50% 38% 46% 36%; } /* ------------------------------------------------------------ 01.02.05 MORPH DESKTOP Cambia solo la forma. Nessun scaleX / scaleY sul contenitore. ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { .zorba-progetti .et_pb_portfolio_item:hover { transform: translateY(-7px); } .zorba-progetti .et_pb_portfolio_item:nth-child(odd):hover .et_portfolio_image { border-radius: 66% 18% 58% 24% / 22% 70% 28% 64%; transform: none !important; } .zorba-progetti .et_pb_portfolio_item:nth-child(even):hover .et_portfolio_image { border-radius: 18% 68% 26% 60% / 66% 24% 72% 20%; transform: none !important; } } /* ------------------------------------------------------------ 01.02.06 LOGO PROGETTO ------------------------------------------------------------ */ .zorba-project-logo { display: none; } .zorba-progetti .et_portfolio_image > img.zorba-project-logo { position: absolute !important; inset: 0 !important; z-index: 2; display: block; width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover !important; object-position: center !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; opacity: 0 !important; visibility: visible !important; filter: none !important; /* * NESSUNA trasformazione: * il logo rimane integro. */ transform: none !important; pointer-events: none; transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1) !important; } /* ------------------------------------------------------------ 01.02.07 CROSSFADE FOTO → LOGO ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { .zorba-progetti .et_pb_portfolio_item:hover .et_portfolio_image > img:not(.zorba-project-logo) { opacity: 0 !important; } .zorba-progetti .et_pb_portfolio_item:hover .et_portfolio_image > img.zorba-project-logo { opacity: 1 !important; transform: none !important; } } /* ------------------------------------------------------------ 01.02.08 TOUCH Foto sempre visibile. ------------------------------------------------------------ */ @media (hover: none), (pointer: coarse) { .zorba-progetti .et_pb_portfolio_item { transition: transform .55s cubic-bezier(.16, 1, .3, 1); } .zorba-progetti .et_portfolio_image { transition: border-radius .7s cubic-bezier(.16, 1, .3, 1) !important; transform: none !important; } .zorba-progetti .et_portfolio_image > img:not(.zorba-project-logo) { opacity: 1 !important; } .zorba-progetti .et_portfolio_image > img.zorba-project-logo { opacity: 0 !important; } } /* ------------------------------------------------------------ 01.02.09 ACCESSIBILITÀ ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .zorba-progetti .et_pb_portfolio_item, .zorba-progetti .et_portfolio_image, .zorba-progetti .et_portfolio_image > img { transition: none !important; } .zorba-progetti .et_pb_portfolio_item:hover, .zorba-progetti .et_pb_portfolio_item:active, .zorba-progetti .et_pb_portfolio_item:hover .et_portfolio_image, .zorba-progetti .et_pb_portfolio_item:active .et_portfolio_image { transform: none !important; } } /* ============================================================ 01.03 ZORBA — FILTRI PROGETTI ------------------------------------------------------------ INDICE 01.03.01 Base desktop 01.03.02 Hover e stato attivo 01.03.03 Tablet 768–980 px 01.03.04 Smartphone ≤767 px ============================================================ */ /* ------------------------------------------------------------ 01.03.01 BASE DESKTOP ------------------------------------------------------------ */ .filtri-progetti .et_pb_portfolio_filters { margin: 0 0 38px; } .filtri-progetti .et_pb_portfolio_filters ul { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; width: 81%; margin: 0 10%; padding: 0; list-style: none; } .filtri-progetti .et_pb_portfolio_filter { float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .filtri-progetti .et_pb_portfolio_filter a { display: inline-flex; align-items: center; justify-content: center; width: auto !important; min-height: 42px; padding: 9px 17px !important; color: #565656 !important; background: #ffffff !important; border: 1px solid rgba(86, 86, 86, .22) !important; border-radius: 999px !important; font-size: 14px; font-weight: 600; line-height: 1.15; text-align: center; text-transform: capitalize; box-shadow: none !important; transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease; } /* ------------------------------------------------------------ 01.03.02 HOVER E STATO ATTIVO ------------------------------------------------------------ */ .filtri-progetti .et_pb_portfolio_filter a:hover { opacity: 1 !important; color: #ed721a !important; background: rgba(237, 114, 26, .06) !important; border-color: #ed721a !important; transform: translateY(-2px); } .filtri-progetti .et_pb_portfolio_filter a.active { opacity: 1 !important; color: #ffffff !important; background: #ed721a !important; border-color: #ed721a !important; } /* ------------------------------------------------------------ 01.03.03 TABLET — 768–980 PX ------------------------------------------------------------ */ @media (min-width: 768px) and (max-width: 980px) { .filtri-progetti .et_pb_portfolio_filters { margin-bottom: 30px; } .filtri-progetti .et_pb_portfolio_filters ul { gap: 8px; } .filtri-progetti .et_pb_portfolio_filter a { min-height: 40px; padding: 8px 14px !important; font-size: 13px; } } /* ------------------------------------------------------------ 01.03.04 SMARTPHONE TAG MULTILINEA BILANCIATI ------------------------------------------------------------ */ @media only screen and (max-width: 767px) { .filtri-progetti .et_pb_portfolio_filters { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; max-width: 100% !important; margin: 0 0 28px !important; padding: 0 3px !important; overflow: visible !important; } .filtri-progetti .et_pb_portfolio_filters ul { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; gap: 5px 3px !important; margin: 0 auto !important; padding: 0 !important; list-style: none !important; } .filtri-progetti .et_pb_portfolio_filters li { display: block !important; float: none !important; width: auto !important; max-width: 90% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } .filtri-progetti .et_pb_portfolio_filters li a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; min-height: 0; padding: 8px 5px !important; font-size: 12px !important; line-height: 1.2 !important; letter-spacing: .01em !important; text-align: center !important; white-space: normal !important; border: 1px solid rgba(0,0,0,.12) !important; border-radius: 999px !important; box-shadow: none !important; transform: none !important; } .filtri-progetti .et_pb_portfolio_filters li a.active { border-color: transparent !important; } } /* ============================================================ 01.04 ZORBA — CAROSELLO PROGETTI HOME NORMALE - forma principale bianca - logo originale integro - 2 forme colorate posteriori HOVER - logo → foto - freccia - movimento forme posteriori ------------------------------------------------------------ INDICE 01.04.01 Struttura carosello 01.04.02 Card progetto 01.04.03 Forma principale 01.04.04 Forma posteriore 1 01.04.05 Forma posteriore 2 01.04.06 Logo progetto 01.04.07 Foto progetto 01.04.08 Link / overlay 01.04.09 Freccia 01.04.10 Palette colori 01.04.11 Nove varianti forme 01.04.12 Hover forme 01.04.13 Hover logo → foto 01.04.14 Mobile / touch 01.04.15 Accessibilità ============================================================ */ /* ------------------------------------------------------------ 01.04.01 STRUTTURA CAROSELLO ------------------------------------------------------------ */ .zorba-progetti-home { overflow: visible !important; } .zorba-progetti-home .et_pb_portfolio_items { height: 260px !important; min-height: 260px !important; overflow: visible !important; } .zorba-progetti-home .et_pb_carousel_group { height: 260px !important; overflow: visible !important; } /* ------------------------------------------------------------ 01.04.02 CARD PROGETTO ------------------------------------------------------------ */ .zorba-progetti-home .et_pb_portfolio_item { height: 260px !important; overflow: visible !important; --zorba-project-back-1: #d8d2ee; --zorba-project-back-2: #9484cf; } /* ------------------------------------------------------------ 01.04.03 FORMA PRINCIPALE Orizzontale, morbida, coerente con Portfolio Progetti ------------------------------------------------------------ */ .zorba-progetti-home .et_pb_portfolio_image { position: relative !important; display: block !important; width: 86% !important; aspect-ratio: 1.45 / 1 !important; height: auto !important; margin: 28px auto 20px !important; overflow: visible !important; background: #ffffff !important; border: 0 !important; outline: 0 !important; box-shadow: 0 12px 28px rgba(20, 35, 30, .09); isolation: isolate; transform: none !important; transition: border-radius 1.35s cubic-bezier(.22,.61,.36,1), box-shadow 1.2s ease !important; } /* ------------------------------------------------------------ 01.04.04 FORMA POSTERIORE 1 ------------------------------------------------------------ */ .zorba-progetti-home .et_pb_portfolio_image::before { content: ""; position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; background: var(--zorba-project-back-1); border-radius: 58% 42% 51% 49% / 44% 58% 42% 56%; transform: translate(-15px, 10px) rotate(-4deg); pointer-events: none; transition: transform 1.55s cubic-bezier(.22,.61,.36,1), border-radius 1.55s cubic-bezier(.22,.61,.36,1); } /* ------------------------------------------------------------ 01.04.05 FORMA POSTERIORE 2 ------------------------------------------------------------ */ .zorba-progetti-home .et_pb_portfolio_image::after { content: ""; position: absolute; z-index: -1; width: 96%; height: 96%; left: 2%; top: 2%; background: var(--zorba-project-back-2); border-radius: 43% 57% 55% 45% / 57% 43% 52% 48%; transform: translate(16px, -10px) rotate(4deg); pointer-events: none; transition: transform 1.65s cubic-bezier(.22,.61,.36,1), border-radius 1.65s cubic-bezier(.22,.61,.36,1); } /* ------------------------------------------------------------ 01.04.06 LOGO PROGETTO ------------------------------------------------------------ */ .zorba-progetti-home .et_pb_portfolio_image > img.zorba-project-logo-home { position: absolute !important; inset: 0 !important; z-index: 4 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: center center !important; padding: 0 !important; box-sizing: border-box !important; background: #ffffff !important; border: 0 !important; border-radius: inherit !important; outline: 0 !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; transform: none !important; pointer-events: none !important; transition: opacity .9s cubic-bezier(.4,0,.2,1), transform 1.15s cubic-bezier(.22,.61,.36,1) !important; } /* ------------------------------------------------------------ 01.04.07 FOTO PROGETTO ------------------------------------------------------------ */ .zorba-progetti-home .et_pb_portfolio_image > img:not(.zorba-project-logo-home) { position: absolute !important; inset: 0 !important; z-index: 3 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center center !important; padding: 0 !important; border: 0 !important; border-radius: inherit !important; outline: 0 !important; opacity: 0 !important; filter: none !important; transform: none !important; transition: opacity 1s cubic-bezier(.4,0,.2,1) !important; } /* ------------------------------------------------------------ 01.04.08 LINK / OVERLAY ------------------------------------------------------------ */ .zorba-progetti-home .et_pb_portfolio_image .meta { position: absolute !important; inset: 0 !important; z-index: 10 !important; background: transparent !important; pointer-events: none; } .zorba-progetti-home .et_pb_portfolio_image .meta > a { position: absolute !important; inset: 0 !important; display: block !important; pointer-events: auto; } .zorba-progetti-home .et_overlay { position: absolute !important; inset: 0 !important; display: block !important; visibility: visible !important; opacity: 1 !important; background: transparent !important; border: 0 !important; border-radius: inherit !important; } /* ------------------------------------------------------------ 01.04.09 FRECCIA Bianca, centrale, senza fondo ------------------------------------------------------------ */ .zorba-progetti-home .et_pb_portfolio_image .meta > a::after { content: "➜" !important; position: absolute !important; top: 50% !important; left: 50% !important; z-index: 50 !important; color: #ffffff !important; background: transparent !important; font-family: "Poppins" sans-serif !important; font-size: 52px !important; font-weight: 500 !important; line-height: 1 !important; border: 0 !important; box-shadow: none !important; opacity: 0 !important; transform: translate(-60%, -50%) scale(.85) !important; pointer-events: none !important; transition: opacity .55s ease, transform .8s cubic-bezier(.22,.61,.36,1) !important; } /* ------------------------------------------------------------ 01.04.10 PALETTE COLORI Palette scalate di una posizione ------------------------------------------------------------ */ .zorba-progetti-home .et_pb_portfolio_image::before { background: var( --zorba-project-back-1, #d8d2ee ); } .zorba-progetti-home .et_pb_portfolio_image::after { background: var( --zorba-project-back-2, #8977cb ); } /* ------------------------------------------------------------ 01.04.11 NOVE VARIANTI FORME Riprende la famiglia visiva del Portfolio Progetti ------------------------------------------------------------ */ .zorba-progetti-home .et_pb_portfolio_item:nth-child(9n+1) .et_pb_portfolio_image { border-radius: 48% 42% 46% 50% / 44% 52% 46% 50%; } .zorba-progetti-home .et_pb_portfolio_item:nth-child(9n+2) .et_pb_portfolio_image { border-radius: 52% 26% 48% 30% / 42% 54% 46% 56%; } .zorba-progetti-home .et_pb_portfolio_item:nth-child(9n+3) .et_pb_portfolio_image { border-radius: 36% 48% 34% 44% / 48% 36% 50% 40%; } .zorba-progetti-home .et_pb_portfolio_item:nth-child(9n+4) .et_pb_portfolio_image { border-radius: 46% 38% 50% 42% / 38% 52% 40% 50%; } .zorba-progetti-home .et_pb_portfolio_item:nth-child(9n+5) .et_pb_portfolio_image { border-radius: 30% 52% 34% 48% / 54% 40% 56% 44%; } .zorba-progetti-home .et_pb_portfolio_item:nth-child(9n+6) .et_pb_portfolio_image { border-radius: 44% 34% 48% 38% / 36% 50% 40% 48%; } .zorba-progetti-home .et_pb_portfolio_item:nth-child(9n+7) .et_pb_portfolio_image { border-radius: 46% 52% 42% 48% / 52% 40% 50% 44%; } .zorba-progetti-home .et_pb_portfolio_item:nth-child(9n+8) .et_pb_portfolio_image { border-radius: 54% 30% 50% 26% / 44% 52% 42% 56%; } .zorba-progetti-home .et_pb_portfolio_item:nth-child(9n) .et_pb_portfolio_image { border-radius: 34% 46% 40% 50% / 50% 38% 46% 36%; } /* ------------------------------------------------------------ 01.04.12 HOVER — MOVIMENTO FORME ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { .zorba-progetti-home .et_pb_portfolio_item:hover .et_pb_portfolio_image::before { border-radius: 43% 57% 48% 52% / 57% 43% 55% 45%; transform: translate(-22px, 15px) rotate(-7deg) scale(1.035); } .zorba-progetti-home .et_pb_portfolio_item:hover .et_pb_portfolio_image::after { border-radius: 58% 42% 54% 46% / 43% 57% 47% 53%; transform: translate(22px, -14px) rotate(7deg) scale(1.03); } .zorba-progetti-home .et_pb_portfolio_item:nth-child(odd):hover .et_pb_portfolio_image { border-radius: 66% 18% 58% 24% / 22% 70% 28% 64%; box-shadow: 0 17px 34px rgba(20,35,30,.15); transform: none !important; } .zorba-progetti-home .et_pb_portfolio_item:nth-child(even):hover .et_pb_portfolio_image { border-radius: 18% 68% 26% 60% / 66% 24% 72% 20%; box-shadow: 0 17px 34px rgba(20,35,30,.15); transform: none !important; } } /* ------------------------------------------------------------ 01.04.13 HOVER — LOGO → FOTO ------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { .zorba-progetti-home .et_pb_portfolio_item:hover .zorba-project-logo-home { opacity: 0 !important; transform: scale(.97) !important; } .zorba-progetti-home .et_pb_portfolio_item:hover .et_pb_portfolio_image > img:not(.zorba-project-logo-home) { opacity: 1 !important; } .zorba-progetti-home .et_pb_portfolio_item:hover .et_pb_portfolio_image .meta > a::after { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; } } /* ------------------------------------------------------------ 01.04.14 MOBILE / TOUCH ------------------------------------------------------------ */ @media (hover: none), (pointer: coarse) { .zorba-progetti-home .zorba-project-logo-home { opacity: 1 !important; transform: none !important; } .zorba-progetti-home .et_pb_portfolio_image > img:not(.zorba-project-logo-home) { opacity: 0 !important; } .zorba-progetti-home .et_overlay::before { opacity: 0 !important; } .zorba-progetti-home .et_pb_portfolio_image::before, .zorba-progetti-home .et_pb_portfolio_image::after { transition: none !important; } } /* ------------------------------------------------------------ 01.04.15 ACCESSIBILITÀ ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .zorba-progetti-home .et_pb_portfolio_image, .zorba-progetti-home .et_pb_portfolio_image::before, .zorba-progetti-home .et_pb_portfolio_image::after, .zorba-progetti-home .et_pb_portfolio_image > img, .zorba-progetti-home .et_overlay::before { transition: none !important; } } /* ============================================================ 01.04 ZORBA — MENU DESKTOP ------------------------------------------------------------ INDICE 01.04.01 Hover / voci attive 01.04.02 Sottomenu a griglia compatta ============================================================ */ @media (min-width: 981px) { /* ------------------------------------------------------------ 01.04.01 HOVER / VOCI ATTIVE ------------------------------------------------------------ */ #menu-zorba .et-menu-nav > ul > li > a, #menu-zorba .et-menu-nav > ul > li.current-menu-item > a, #menu-zorba .et-menu-nav > ul > li.current-menu-ancestor > a { opacity: 1; color: #ED721A !important; } #menu-zorba .et-menu-nav > ul > li > ul.sub-menu li:hover > a, #menu-zorba .et-menu-nav > ul > li > ul.sub-menu .current-menu-item > a { opacity: 1; color: #ED721A !important; background: transparent; } #menu-zorba .et-menu-nav a { transition: color .25s ease, opacity .25s ease; } /* ------------------------------------------------------------ 01.04.02 SOTTOMENU A GRIGLIA COMPATTA ------------------------------------------------------------ */ #menu-zorba .et-menu-nav > ul > li > ul.sub-menu { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: 450px !important; min-width: 500px; padding: 8px 20px !important; row-gap: 4px; border-radius: 36px; margin-top: -10px; } #menu-zorba .et-menu-nav > ul > li > ul.sub-menu > li { display: flex !important; align-items: stretch; justify-content: center; width: 100% !important; min-width: 0; padding: 0 !important; margin: 0 !important; } #menu-zorba .et-menu-nav > ul > li > ul.sub-menu > li > a { display: flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 42px; padding: 6px 8px !important; text-align: center; line-height: 1.15; white-space: normal !important; text-transform: none; } } /* ========================================================= 01.05 ZORBA — MENU MOBILE FULLSCREEN ========================================================= */ /* ------------------------------------------------------------ INDICE 01.05 — MENU MOBILE ZORBA 01.05.01 Struttura Divi 01.05.02 Pannello fullscreen 01.05.03 Animazione apertura 01.05.04 Nascondi sottomenu 01.05.05 Elimina indicatori sottomenu 01.05.06 Voci principali 01.05.07 Entrata sfalsata 01.05.08 Link principali 01.05.09 Voce attiva 01.05.10 Hover / tap 01.05.11 Logo Zorba 01.05.12 Entrata logo 01.05.13 Elimina bordi/separatori 01.05.14 Voci con sottomenu 01.05.15 X di chiusura 01.05.16 Smartphone piccoli 01.05.17 Smartphone bassi ------------------------------------------------------------ */ @media only screen and (max-width: 980px) { /* ===================================================== 01.05.01 STRUTTURA DIVI ===================================================== */ #menu-zorba, #menu-zorba .et_pb_menu_inner_container, #menu-zorba .et_pb_menu__wrap, #menu-zorba .et_mobile_nav_menu, #menu-zorba .mobile_nav { overflow: visible !important; } /* ===================================================== 01.05.02 PANNELLO FULLSCREEN ===================================================== */ #menu-zorba .mobile_nav.opened .et_mobile_menu { position: fixed !important; inset: 0 !important; width: 100vw !important; max-width: none !important; height: 100vh !important; height: 100dvh !important; min-height: 100vh !important; margin: 0 !important; padding: 90px 25px 50px !important; box-sizing: border-box !important; background: rgba(255, 255, 255, 0.90) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 0 !important; border-radius: 0 !important; box-shadow: none !important; z-index: 2147483646 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; overflow-x: hidden !important; overflow-y: auto !important; animation: zorbaMenuIn .45s cubic-bezier(.22, 1, .36, 1) both; } /* ===================================================== 01.05.03 ANIMAZIONE APERTURA ===================================================== */ @keyframes zorbaMenuIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } } /* ===================================================== 01.05.04 NASCONDI TUTTI I SOTTOMENU SOLO SU MOBILE ===================================================== */ #menu-zorba .et_mobile_menu .sub-menu, #menu-zorba .et_mobile_menu ul.sub-menu, #menu-zorba .mobile_nav.opened .et_mobile_menu .sub-menu, #menu-zorba .mobile_nav.opened .et_mobile_menu ul.sub-menu, #menu-zorba .et_mobile_menu .menu-item-has-children > .sub-menu { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* ===================================================== 01.05.05 ELIMINA FRECCE / INDICATORI SOTTOMENU ===================================================== */ #menu-zorba .et_mobile_menu .menu-item-has-children > a::before, #menu-zorba .et_mobile_menu .menu-item-has-children > a::after { display: none !important; content: none !important; } /* ===================================================== 01.05.06 VOCI PRINCIPALI Home Chi siamo Servizi Progetti Sostienici ===================================================== */ #menu-zorba .mobile_nav.opened .et_mobile_menu > li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important; border: 0 !important; background: transparent !important; opacity: 0; transform: translateY(18px); animation: zorbaMenuItemIn .55s cubic-bezier(.22, 1, .36, 1) forwards; } /* ===================================================== 01.05.07 ENTRATA SFALSATA ===================================================== */ #menu-zorba .mobile_nav.opened .et_mobile_menu > li:nth-child(1) { animation-delay: .06s; } #menu-zorba .mobile_nav.opened .et_mobile_menu > li:nth-child(2) { animation-delay: .12s; } #menu-zorba .mobile_nav.opened .et_mobile_menu > li:nth-child(3) { animation-delay: .18s; } #menu-zorba .mobile_nav.opened .et_mobile_menu > li:nth-child(4) { animation-delay: .24s; } #menu-zorba .mobile_nav.opened .et_mobile_menu > li:nth-child(5) { animation-delay: .30s; } @keyframes zorbaMenuItemIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ===================================================== 01.05.08 LINK PRINCIPALI ===================================================== */ #menu-zorba .mobile_nav.opened .et_mobile_menu > li > a { display: inline-block !important; width: auto !important; margin: 0 !important; padding: 14px 18px !important; color: #23463C !important; background: transparent !important; border: 0 !important; font-size: clamp(29px, 7vw, 35px) !important; line-height: 1.08 !important; font-weight: 700 !important; letter-spacing: -0.4px !important; text-align: center !important; opacity: 1 !important; transition: color .30s ease, transform .35s cubic-bezier(.22, 1, .36, 1) !important; } /* ===================================================== 01.05.09 VOCE ATTIVA ===================================================== */ #menu-zorba .mobile_nav.opened .et_mobile_menu > li.current-menu-item > a, #menu-zorba .mobile_nav.opened .et_mobile_menu > li.current-menu-ancestor > a { color: #ED721A !important; } /* ===================================================== 01.05.10 HOVER / TAP ===================================================== */ #menu-zorba .mobile_nav.opened .et_mobile_menu > li > a:hover, #menu-zorba .mobile_nav.opened .et_mobile_menu > li > a:active { color: #ED721A !important; background: transparent !important; opacity: 1 !important; transform: translateY(-3px); } /* ===================================================== 01.05.11 LOGO ZORBA — IN ALTO NEL FULLSCREEN MOBILE ===================================================== */ #menu-zorba .mobile_nav.opened .et_mobile_menu::before { content: "" !important; display: block !important; position: fixed !important; top: 25px !important; left: 50% !important; width: 200px !important; height: 75px !important; margin: 0 !important; background-image: url("https://www.zorbacooperativasociale.it/dev/wp-content/uploads/2026/04/zorbacooperativaLOGO.png") !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; transform: translateX(-50%); pointer-events: none !important; z-index: 2147483647 !important; opacity: 0; animation: zorbaLogoIn .65s .08s cubic-bezier(.22, 1, .36, 1) forwards; } /* ===================================================== 01.05.12 ENTRATA LOGO ===================================================== */ @keyframes zorbaLogoIn { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ===================================================== 01.05.13 ELIMINA BORDI / SEPARATORI DIVI ===================================================== */ #menu-zorba .mobile_nav.opened .et_mobile_menu > li, #menu-zorba .mobile_nav.opened .et_mobile_menu > li > a { border: 0 !important; border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; } /* ===================================================== 01.05.14 VOCI CHE POSSIEDONO SOTTOMENU Si comportano come link normali ===================================================== */ #menu-zorba .mobile_nav.opened .et_mobile_menu > li.menu-item-has-children > a { padding-right: 18px !important; background: transparent !important; } /* ===================================================== 01.05.15 X DI CHIUSURA ===================================================== */ #menu-zorba .mobile_nav.opened .mobile_menu_bar { position: fixed !important; top: 20px !important; right: 20px !important; width: 50px !important; height: 50px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; z-index: 2147483647 !important; } /* hamburger → X */ #menu-zorba .mobile_nav.opened .mobile_menu_bar::before { content: "×" !important; position: static !important; display: block !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 45px !important; line-height: 1 !important; font-weight: 300 !important; color: #23463C !important; transform: rotate(0deg); transition: color .25s ease, transform .45s cubic-bezier(.22, 1, .36, 1) !important; } #menu-zorba .mobile_nav.opened .mobile_menu_bar:hover::before { color: #ED721A !important; transform: rotate(90deg); } } /* ========================================================= 01.05.16 ZORBA — SMARTPHONE PICCOLI ========================================================= */ @media only screen and (max-width: 480px) { #menu-zorba .mobile_nav.opened .et_mobile_menu { padding-left: 18px !important; padding-right: 18px !important; } #menu-zorba .mobile_nav.opened .et_mobile_menu > li > a { font-size: 29px !important; padding-top: 13px !important; padding-bottom: 13px !important; } } /* ========================================================= 01.05.17 ZORBA — SMARTPHONE BASSI ========================================================= */ @media only screen and (max-width: 767px) and (max-height: 650px) { #menu-zorba .mobile_nav.opened .et_mobile_menu { justify-content: center !important; padding-top: 65px !important; padding-bottom: 25px !important; } #menu-zorba .mobile_nav.opened .et_mobile_menu > li > a { font-size: 25px !important; padding-top: 9px !important; padding-bottom: 9px !important; } } /* ============================================================ 02. ALLE S.E.R.R.E. ------------------------------------------------------------ INDICE 02.01 Carosello e Card Eventi 02.02 Menu Desktop 02.03 Menu Mobile Fullscreen 02.04 Card e Icone SVG animate ============================================================ */ /* ============================================================ 02.01 ALLE S.E.R.R.E. — CAROSELLO E CARD EVENTI ------------------------------------------------------------ INDICE 02.01.01 Carosello — slide e sfondo 02.01.02 Carosello — immagine 02.01.03 Carosello — pulsante 02.01.04 Card evento 02.01.05 Immagine card 02.01.06 Badge data 02.01.07 Titolo 02.01.08 Orario 02.01.09 Freccia 02.01.10 Meta evento 02.01.11 Link e livelli 02.01.12 Tablet ============================================================ */ /* 02.01.01 Slide del carosello */ .evento-slide { position: relative; min-height: 500px; overflow: hidden; isolation: isolate; } /* 02.01.01.01 Modulo Codice usato come sfondo */ .evento-slide-bg { position: absolute !important; inset: 0; width: 100%; height: 100%; margin: 0 !important; z-index: 0; } /* 02.01.01.02 Contenitore interno del Modulo Codice */ .evento-slide-bg .et_pb_code_inner { width: 100%; height: 100%; } /* 02.01.02 Immagine della galleria WooCommerce */ .evento-slide-bg .adc-carousel-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* 02.01.03 Pulsante sopra l'immagine */ .evento-slide-button { position: absolute !important; left: 50%; bottom: 40px; transform: translateX(-50%); z-index: 2; width: max-content; margin: 0 !important; } /* =========================================== EVENTI - ALLE S.E.R.R.E. =========================================== */ /* ---------- 02.01.04 CARD ---------- */ .serre-evento-card { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden; background: #ffffff; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); transition: transform 0.30s ease, box-shadow 0.30s ease; } .serre-evento-card { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.15); } /* ---------- 02.01.05 IMMAGINE ---------- */ .serre-evento-media { width: 100%; height: 240px; margin: 0 !important; overflow: hidden; } .serre-evento-media, .serre-evento-media .et_pb_image_wrap { display: block; } .serre-evento-media .et_pb_image_wrap { width: 100%; height: 100%; } .serre-evento-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.45s ease; } .serre-evento-card .serre-evento-media img { transform: scale(1.05); } /* ---------- 02.01.06 BADGE ---------- */ .serre-evento-badge-module { position: absolute !important; top: 204px; left: 24px; z-index: 30; margin: 0 !important; } .serre-evento-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62px; height: 72px; padding: 5px; color: #ffffff; background: #ed721a; border-radius: 13px; box-shadow: 0 7px 18px rgba(0, 0, 0, 0.18); line-height: 1; } .serre-evento-badge-giorno { font-size: 25px; line-height: 1; font-family: 'Nunito',Helvetica,Arial,Lucida,sans-serif; font-weight: 900; } /* Più giorni nel badge: 18–20 */ .serre-single-date .serre-evento-badge--multi .serre-evento-badge-giorno { font-size: 35px !important; letter-spacing: -0.04em; } .serre-evento-card .serre-evento-badge--multi .serre-evento-badge-giorno { font-size: 20px !important; font-family: 'Nunito',Helvetica,Arial,Lucida,sans-serif; font-weight: 900; } .serre-evento-badge-mese { margin-top: 5px; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; line-height: 1; font-family: 'Nunito',Helvetica,Arial,Lucida,sans-serif; font-weight: 900; } /* ---------- 02.01.07 TITOLO ---------- */ .serre-evento-title { min-height: 47px; margin: 8px 72px 18px 24px !important; } .serre-evento-title h1, .serre-evento-title h2, .serre-evento-title h3, .serre-evento-title h4, .serre-evento-title h5, .serre-evento-title h6 { display: block; margin: 0; overflow: hidden; max-height: 60px; color: #ed721a !important; font-size: 30px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0; font-family: 'Nunito',Helvetica,Arial,Lucida,sans-serif; } /* ---------- 02.01.08 ORARIO ACCANTO AL BADGE ---------- */ .serre-evento-info { min-height: 20px; margin: -20px 20px 0 104px !important; display: flex; align-items: center; } .serre-evento-data { display: flex; align-items: center; line-height: 1; } .serre-evento-ora { margin: 0; color: #5d5d5d; font-size: 15px; font-weight: 700; } /* ---------- 02.01.09 FRECCIA ACCANTO AL TITOLO ---------- */ .serre-evento-arrow { position: absolute !important; right: 20px; bottom: 18px; z-index: 20; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 !important; border-radius: 50%; /*transition: transform 0.25s ease, background-color 0.25s ease;*/ } .serre-evento-arrow .et_pb_icon_wrap { display: flex; align-items: center; justify-content: center; } .serre-evento-arrow .et-pb-icon { color: #2c4f44 !important; font-size: 21px !important; } .serre-evento-card .serre-evento-arrow { background: #2c4f44; } .serre-evento-card .et-pb-icon { color: #ffffff !important; } /*==================================* *02.01.10 META EVENTO* *===================================*/ .serre-evento-meta-module{ margin:-20px 20px 12px 96px!important; } .serre-evento-meta{ display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size:14px; font-weight:600; color:#999; } .serre-evento-meta-item{ display: flex; align-items: center; gap: 6px; } .serre-evento-meta-item i{ font-size:15px; color:#2c4f44; width: 16px; text-align: center; } .serre-evento-meta-item i{ color:#ed721a; } /* ---------- 02.01.11 LINK E LIVELLI ---------- */ .serre-evento-card > a { position: relative; z-index: 40; } .serre-evento-media { position: relative; z-index: 1; } .serre-evento-title, .serre-evento-info, .serre-evento-arrow { position: relative; z-index: 10; } /* ---------- 02.01.12 TABLET ---------- */ @media (max-width: 980px) { .serre-evento-media { height: 220px; } .serre-evento-badge-module { top: 184px; } .serre-evento-title { margin-top: 46px !important; } } /* ============================================================ 02.02 ALLE S.E.R.R.E. — MENU DESKTOP ------------------------------------------------------------ INDICE 02.02.01 Sottomenu orizzontali 02.02.02 Ricerca e spaziatura modulo ============================================================ */ @media (min-width: 981px) { #menu-alleserre > li:last-child { margin-right: 50px !important; } #menu-serre .et_pb_menu__search { top: 30px !important; } /* ========================================================== MENU S.E.R.R.E. — HOVER / VOCE PAGINA CORRENTE / ICONE Tocca solo il primo livello: i sottomenu restano invariati. ========================================================== */ /* Voci testuali principali — stato normale */ #menu-serre .et-menu-nav > ul > li:not(.serre-account-menu) > a { color: #ffffff !important; opacity: 1 !important; text-decoration: none !important; transition: opacity .25s ease !important; } /* Voci testuali principali — hover 50% */ #menu-serre .et-menu-nav > ul > li:not(.serre-account-menu) > a:hover { color: #ffffff !important; opacity: .5 !important; } /* Voci testuali principali — pagina attiva sottolineata */ #menu-serre .et-menu-nav > ul > li:not(.serre-account-menu).current-menu-item > a, #menu-serre .et-menu-nav > ul > li:not(.serre-account-menu).current_page_item > a, #menu-serre .et-menu-nav > ul > li:not(.serre-account-menu).current-menu-ancestor > a, #menu-serre .et-menu-nav > ul > li:not(.serre-account-menu) > a[aria-current="page"] { color: #ffffff !important; opacity: 1 !important; text-decoration-line: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; } /* Anche la voce attiva, in hover, scende al 50% */ #menu-serre .et-menu-nav > ul > li:not(.serre-account-menu).current-menu-item > a:hover, #menu-serre .et-menu-nav > ul > li:not(.serre-account-menu).current_page_item > a:hover, #menu-serre .et-menu-nav > ul > li:not(.serre-account-menu).current-menu-ancestor > a:hover, #menu-serre .et-menu-nav > ul > li:not(.serre-account-menu) > a[aria-current="page"]:hover { opacity: .5 !important; } /* Icone native Divi — hover 50%, nessuna sottolineatura */ #menu-serre .et_pb_menu__cart-button, #menu-serre .et_pb_menu__search-button { opacity: 1 !important; text-decoration: none !important; transition: opacity .25s ease, color .25s ease !important; } #menu-serre .et_pb_menu__cart-button:hover, #menu-serre .et_pb_menu__search-button:hover { opacity: .5 !important; } /* Carrello attivo: arancio, senza underline */ body.woocommerce-cart #menu-serre .et_pb_menu__cart-button { color: #ed721a !important; opacity: 1 !important; text-decoration: none !important; } body.woocommerce-cart #menu-serre .et_pb_menu__cart-button:hover { opacity: .5 !important; } /* ------------------------------------------------------------ 02.02.01 SOTTOMENU ORIZZONTALI ------------------------------------------------------------ */ #menu-serre .et-menu-nav > ul > li > ul.sub-menu { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; width: max-content !important; min-width: max-content !important; padding: 0 4px !important; gap: 0; box-shadow: none !important; -webkit-box-shadow: none !important; } #menu-serre .et-menu-nav > ul > li > ul.sub-menu > li { display: flex !important; flex: 0 0 auto !important; width: auto !important; } #menu-serre .et-menu-nav > ul > li > ul.sub-menu > li > a { width: auto !important; white-space: nowrap !important; min-height: 48px; padding: 12px 16px !important; color: #23463C; } /* ------------------------------------------------------------ 02.02.02 RICERCA E SPAZIATURA MODULO ------------------------------------------------------------ */ #menu-serre { margin-right: 40px; } #menu-serre .et_pb_menu__wrap { padding-top: 20px; } #menu-serre .et_pb_menu__search-container { padding-top: 20px; } #menu-serre .et_pb_menu__search-input { color: #ffffff; border-bottom: 1px solid #ffffff; } } /* ========================================================= 02.03 ALLE S.E.R.R.E. — MENU MOBILE FULLSCREEN I sottomenu restano sul desktop ma sono nascosti su mobile ========================================================= */ /* ------------------------------------------------------------ INDICE 02.03 — MENU MOBILE S.E.R.R.E. 02.03.01 Struttura Divi 02.03.02 Menu fullscreen 02.03.03 Animazione apertura 02.03.04 Nascondi sottomenu 02.03.05 Elimina indicatori Divi 02.03.06 Voci principali 02.03.07 Entrata sfalsata 02.03.08 Link principali 02.03.09 Elimina bordi/separatori 02.03.10 Voci con sottomenu 02.03.11 X di chiusura 02.03.12 Smartphone piccoli 02.03.13 Smartphone bassi 02.03.14 Logo S.E.R.R.E. ------------------------------------------------------------ */ @media only screen and (max-width: 980px) { /* ===================================================== 02.03.01 STRUTTURA DIVI Permette al menu di occupare tutta la viewport ===================================================== */ #menu-serre, #menu-serre .et_pb_menu_inner_container, #menu-serre .et_pb_menu__wrap, #menu-serre .et_mobile_nav_menu, #menu-serre .mobile_nav { overflow: visible !important; } /* ===================================================== 02.03.02 MENU SERRE FULLSCREEN ===================================================== */ #menu-serre .mobile_nav.opened #mobile_menu1 { position: fixed !important; inset: 0 !important; width: 100vw !important; max-width: none !important; height: 100vh !important; height: 100dvh !important; min-height: 100vh !important; margin: 0 !important; padding: 90px 25px 50px !important; box-sizing: border-box !important; /* sfondo bianco 90% */ background: rgba(255, 255, 255, 0.90) !important; /* sfocatura contenuto sottostante */ -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 0 !important; border-radius: 0 !important; box-shadow: none !important; /* livello praticamente massimo */ z-index: 2147483646 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; overflow-x: hidden !important; overflow-y: auto !important; animation: serreMenuIn .45s cubic-bezier(.22, 1, .36, 1) both; } /* ===================================================== 02.03.03 ANIMAZIONE APERTURA ===================================================== */ @keyframes serreMenuIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: scale(1); } } /* ===================================================== 02.03.04 NASCONDI I SOTTOMENU SOLO SU MOBILE ===================================================== */ #menu-serre #mobile_menu1 .sub-menu, #menu-serre .mobile_nav.opened #mobile_menu1 .sub-menu, #menu-serre #mobile_menu1 .menu-item-has-children > .sub-menu { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; pointer-events: none !important; } /* ===================================================== 02.03.05 TOGLIE EVENTUALI INDICATORI DEL SOTTOMENU DIVI ===================================================== */ #menu-serre #mobile_menu1 .menu-item-has-children > a::after, #menu-serre #mobile_menu1 .menu-item-has-children > a::before { display: none !important; content: none !important; } /* ===================================================== 02.03.06 VOCI PRINCIPALI ===================================================== */ #menu-serre .mobile_nav.opened #mobile_menu1 > li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: center !important; border: 0 !important; background: transparent !important; opacity: 0; transform: translateY(18px); animation: serreMenuItemIn .55s cubic-bezier(.22, 1, .36, 1) forwards; } /* ===================================================== 02.03.07 ENTRATA SFALSATA DELLE 4 VOCI ===================================================== */ #menu-serre .mobile_nav.opened #mobile_menu1 > li:nth-child(1) { animation-delay: .06s; } #menu-serre .mobile_nav.opened #mobile_menu1 > li:nth-child(2) { animation-delay: .12s; } #menu-serre .mobile_nav.opened #mobile_menu1 > li:nth-child(3) { animation-delay: .18s; } #menu-serre .mobile_nav.opened #mobile_menu1 > li:nth-child(4) { animation-delay: .24s; } @keyframes serreMenuItemIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* ===================================================== 02.03.08 LINK PRINCIPALI ===================================================== */ #menu-serre .mobile_nav.opened #mobile_menu1 > li > a { display: inline-block !important; width: auto !important; margin: 0 !important; padding: 14px 18px !important; color: #164b34 !important; background: transparent !important; border: 0 !important; font-size: clamp(29px, 7vw, 35px) !important; line-height: 1.08 !important; font-weight: 700 !important; letter-spacing: -0.4px !important; text-align: center !important; opacity: 1 !important; transition: color .30s ease, transform .35s cubic-bezier(.22, 1, .36, 1) !important; } /* hover */ #menu-serre .mobile_nav.opened #mobile_menu1 > li > a:hover { color: #ed721a !important; background: transparent !important; opacity: 1 !important; transform: translateY(-3px); } /* ===================================================== 02.03.09 ELIMINA BORDI / SEPARATORI DIVI ===================================================== */ #menu-serre .mobile_nav.opened #mobile_menu1 > li, #menu-serre .mobile_nav.opened #mobile_menu1 > li > a { border: 0 !important; border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; } /* ===================================================== 02.03.10 VOCE CHE POSSIEDE SOTTOMENU Sul mobile deve comportarsi visivamente come una normale voce del menu. ===================================================== */ #menu-serre .mobile_nav.opened #mobile_menu1 > li.menu-item-has-children > a { padding-right: 18px !important; background: transparent !important; } /* ===================================================== 02.03.11 X DI CHIUSURA ===================================================== */ #menu-serre .mobile_nav.opened .mobile_menu_bar { position: fixed !important; top: 20px !important; right: 20px !important; width: 50px !important; height: 50px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; /* sopra il pannello */ z-index: 2147483647 !important; } /* trasformiamo hamburger in X */ #menu-serre .mobile_nav.opened .mobile_menu_bar::before { content: "×" !important; position: static !important; display: block !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 45px !important; line-height: 1 !important; font-weight: 300 !important; color: #164b34 !important; transform: rotate(0deg); transition: color .25s ease, transform .45s cubic-bezier(.22, 1, .36, 1) !important; } /* hover X */ #menu-serre .mobile_nav.opened .mobile_menu_bar:hover::before { color: #ed721a !important; transform: rotate(90deg); } } /* ========================================================= 02.03.12 SMARTPHONE PICCOLI ========================================================= */ @media only screen and (max-width: 480px) { #menu-serre .mobile_nav.opened #mobile_menu1 { padding-left: 18px !important; padding-right: 18px !important; } #menu-serre .mobile_nav.opened #mobile_menu1 > li > a { font-size: 29px !important; padding-top: 13px !important; padding-bottom: 13px !important; } } /* ========================================================= 02.03.13 SMARTPHONE BASSI ========================================================= */ @media only screen and (max-width: 767px) and (max-height: 650px) { #menu-serre .mobile_nav.opened #mobile_menu1 { justify-content: center !important; padding-top: 65px !important; padding-bottom: 25px !important; } #menu-serre .mobile_nav.opened #mobile_menu1 > li > a { font-size: 25px !important; padding-top: 9px !important; padding-bottom: 9px !important; } } /* ===================================================== 02.03.14 LOGO S.E.R.R.E. NEL MENU FULLSCREEN ===================================================== */ #menu-serre .mobile_nav.opened #mobile_menu1::before { content: ""; position: absolute !important; top: 0; left: 47% !important; width: 220px !important; height: 126px !important; transform: translateX(-50%) !important; background-image: url("https://www.zorbacooperativasociale.it/dev/wp-content/uploads/2026/08/LogoSerre.gif") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; pointer-events: none !important; z-index: 2147483647 !important; opacity: 0; animation: serreLogoIn .6s .12s cubic-bezier(.22, 1, .36, 1) forwards; } @keyframes serreLogoIn { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* ========================================================= 02.04 ALLE S.E.R.R.E. — 02.04.01 CARD E ICONE ANIMATE ========================================================= */ /* ========================================================= CARD ========================================================= */ .serre-card { position: relative; overflow: visible; border-radius: 22px; cursor: pointer; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; will-change: transform; } .serre-card .et_pb_code, .serre-card .et_pb_code_inner { overflow: visible; } .serre-card .et_pb_code_inner { display: flex; justify-content: center; align-items: center; } /* ========================================================= 02.04.02 SVG ========================================================= */ .serre-icon { display: block; width: min(140px, 42vw); max-width: 100%; height: auto; margin: 0 auto; overflow: visible; transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease; will-change: transform; } /* ========================================================= 02.04.03 TITOLI ========================================================= */ .serre-card .et_pb_heading { transition: transform .35s cubic-bezier(.2,.8,.2,1); } /* ========================================================= 02.04.04 AQUILONE ========================================================= */ .serre-kite { transform-box: fill-box; transform-origin: center; animation: serre-kite-breeze 8s ease-in-out infinite; will-change: transform; } .serre-kite__tail { transform-box: fill-box; transform-origin: center top; animation: serre-kite-tail-breeze 8s ease-in-out infinite; will-change: transform; } @keyframes serre-kite-breeze { 0%, 55%, 100% { transform: translate(0,0) rotate(0deg); } 63% { transform: translate(3px,-4px) rotate(3deg); } 72% { transform: translate(-4px,-10px) rotate(-5deg); } 82% { transform: translate(3px,-5px) rotate(2deg); } 91% { transform: translate(0,0) rotate(0deg); } } @keyframes serre-kite-tail-breeze { 0%, 55%, 100% { transform: rotate(0deg); } 66% { transform: rotate(7deg); } 75% { transform: rotate(-6deg); } 84% { transform: rotate(3deg); } 92% { transform: rotate(0deg); } } /* ========================================================= 02.04.05 FOGLIA ========================================================= */ .serre-leaf { transform-box: fill-box; transform-origin: 42px 168px; animation: serre-leaf-breeze 9s ease-in-out infinite; will-change: transform; } @keyframes serre-leaf-breeze { 0%, 62%, 100% { transform: translate(0,0) rotate(0deg); } 70% { transform: translate(4px,-5px) rotate(6deg); } 78% { transform: translate(-3px,-8px) rotate(-5deg); } 87% { transform: translate(2px,-3px) rotate(3deg); } 94% { transform: translate(0,0) rotate(0deg); } } /* ========================================================= 02.04.06 FUMETTO ========================================================= */ .serre-bubble { transform-box: fill-box; transform-origin: center; animation: serre-bubble-float 7s ease-in-out infinite; will-change: transform; } @keyframes serre-bubble-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } /* ========================================================= 02.04.07 PALLINI DEL FUMETTO ========================================================= */ .serre-icon .serre-bubble__dot, .serre-bubble__dot { fill: #ffffff !important; opacity: 0; transform-box: fill-box; transform-origin: center; animation: serre-dot-show 2.4s ease-in-out infinite; } .serre-bubble__dot--1 { animation-delay: 0s; } .serre-bubble__dot--2 { animation-delay: .28s; } .serre-bubble__dot--3 { animation-delay: .56s; } @keyframes serre-dot-show { 0%, 18% { opacity: 0; transform: scale(.65); } 35%, 72% { opacity: 1; transform: scale(1); } 88%, 100% { opacity: 0; transform: scale(.65); } } /* ========================================================= 02.04.08 GIRANDOLA ========================================================= */ .serre-pinwheel { transform-box: fill-box; transform-origin: center; animation: serre-pinwheel-breeze 12s ease-in-out infinite; will-change: transform; } @keyframes serre-pinwheel-breeze { 0%, 66% { transform: rotate(0deg); } 74% { transform: rotate(95deg); } 82% { transform: rotate(185deg); } 88% { transform: rotate(245deg); } 93% { transform: rotate(262deg); } 96% { transform: rotate(256deg); } 100% { transform: rotate(260deg); } } /* ========================================================= 02.04.09 HOVER SOLO DESKTOP ========================================================= */ @media (hover: hover) and (pointer: fine) { .serre-card:hover { transform: translateY(-6px); } .serre-card:hover .serre-icon { transform: scale(1.045); } .serre-card:hover .et_pb_heading { transform: translateY(-2px); } .serre-card:hover .et_pb_heading h3 { color: #118f3b; } /* AQUILONE */ .serre-card:hover .serre-kite { animation: serre-kite-hover 1.25s ease-in-out infinite; } .serre-card:hover .serre-kite__tail { animation: serre-kite-tail-hover 1.25s ease-in-out infinite; } @keyframes serre-kite-hover { 0%, 100% { transform: translate(0,0) rotate(0deg); } 30% { transform: translate(4px,-8px) rotate(5deg); } 60% { transform: translate(-5px,-12px) rotate(-6deg); } 82% { transform: translate(2px,-5px) rotate(2deg); } } @keyframes serre-kite-tail-hover { 0%, 100% { transform: rotate(0deg); } 35% { transform: rotate(10deg); } 65% { transform: rotate(-8deg); } 85% { transform: rotate(4deg); } } /* FOGLIA */ .serre-card:hover .serre-leaf { animation: serre-leaf-hover 1.3s ease-in-out infinite; } @keyframes serre-leaf-hover { 0%, 100% { transform: translate(0,0) rotate(0deg); } 25% { transform: translate(5px,-7px) rotate(8deg); } 52% { transform: translate(-4px,-11px) rotate(-7deg); } 76% { transform: translate(3px,-5px) rotate(4deg); } } /* FUMETTO */ .serre-card:hover .serre-bubble { animation: serre-bubble-hover 1.4s ease-in-out infinite; } .serre-card:hover .serre-bubble__dot { animation-duration: 1.25s; } @keyframes serre-bubble-hover { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.015); } } /* GIRANDOLA */ .serre-card:hover .serre-pinwheel { animation: serre-pinwheel-hover 1.5s ease-out; } @keyframes serre-pinwheel-hover { 0% { transform: rotate(0deg); } 55% { transform: rotate(190deg); } 78% { transform: rotate(255deg); } 90% { transform: rotate(268deg); } 100% { transform: rotate(265deg); } } } /* ============================================================ 02.05 ALLE S.E.R.R.E. — TEMPLATE SINGOLO EVENTO ------------------------------------------------------------ INDICE 02.05.01 Banner evento 02.05.02 Testata evento 02.05.03 Blocco data + titolo + meta 02.05.04 Badge data 02.05.05 Titolo 02.05.06 Meta 02.05.07 CTA Prenota 02.05.08 Contenuto libero 02.05.09 Box biglietti 02.05.09.01 Box generale 02.05.09.02 Testo 02.05.09.03 Form 02.05.09.04 Variazioni 02.05.09.05 Select 02.05.09.06 Reset X 02.05.09.07 Prezzo 02.05.09.08 Quantità 02.05.09.09 Pulsante carrello 02.05.09.10 Freccia hover 02.05.09.11 Biglietti non disponibili 02.05.10 Desktop 02.05.11 Tablet 02.05.12 Smartphone 02.05.13 Smartphone stretto ============================================================ */ body.woocommerce-cart #main-content, body.woocommerce-checkout #main-content, body.woocommerce-order-pay #main-content, body.woocommerce-order-received #main-content, body.woocommerce-account #main-content { background-color: #F6EEEB !important; } body.woocommerce-cart #main-content .et_pb_section, body.woocommerce-checkout #main-content .et_pb_section, body.woocommerce-order-pay #main-content .et_pb_section, body.woocommerce-order-received #main-content .et_pb_section, body.woocommerce-account #main-content .et_pb_section { background-color: transparent !important; } body.woocommerce-cart .et_pb_section_0_tb_header, body.woocommerce-checkout .et_pb_section_0_tb_header, body.woocommerce-order-pay .et_pb_section_0_tb_header, body.woocommerce-order-received .et_pb_section_0_tb_header, body.woocommerce-account .et_pb_section_0_tb_header { background-color: #F6EEEB !important; } /* ============================================================ 02.05.01 BANNER EVENTO Prima immagine della galleria WooCommerce ============================================================ */ .serre-single-header-photo { display: block; width: 100%; height: 340px; margin: 0; padding: 0; overflow: hidden; line-height: 0; background: #f6eeeb; } .serre-single-header-photo img, .serre-single-header-photo .adc-carousel-image, .serre-single-header-photo .serre-evento-banner-image { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; } .serre-single-banner-row { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ============================================================ 02.05.02 TESTATA EVENTO ============================================================ */ .serre-single-head { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 45px; padding: 52px 34px 45px; } /* ============================================================ 02.05.03 BLOCCO DATA + TITOLO + META ============================================================ */ .serre-single-heading-row { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: 28px; } .serre-single-heading-content { flex: 1 1 auto; min-width: 0; } /* ============================================================ 02.05.04 BADGE DATA ============================================================ */ .serre-single-date { position: static !important; flex: 0 0 auto; margin: 0 !important; padding: 0 !important; } .serre-single-date .serre-evento-badge { display: flex !important; flex-direction: column; align-items: center; justify-content: center; width: 108px !important; height: 108px !important; margin: 0 !important; border-radius: 25px !important; background: #ed721a !important; box-shadow: 0 15px 32px rgba(35, 70, 60, 0.16) !important; } .serre-single-date .serre-evento-badge-giorno { margin: 0 !important; color: #ffffff !important; font-family: "Nunito", sans-serif !important; font-size: 42px !important; line-height: 0.9 !important; font-weight: 900 !important; } .serre-single-date .serre-evento-badge-mese { margin: 8px 0 0 !important; color: #ffffff !important; font-family: "Nunito", sans-serif !important; font-size: 14px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.06em; } /* ============================================================ 02.05.05 TITOLO ============================================================ */ .serre-single-title { max-width: 900px; margin: 0 0 13px !important; padding: 0 !important; color: #ed721a !important; font-family: "Nunito", sans-serif !important; font-size: clamp(40px, 4vw, 62px) !important; line-height: 1.02 !important; font-weight: 900 !important; text-transform: none !important; } /* ============================================================ 02.05.06 META Ora + prezzo / range prezzo nella testata ============================================================ */ .serre-single-meta { margin: 0 !important; padding: 0 !important; } .serre-single-meta-items { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; } .serre-single-meta-item { display: inline-flex; align-items: center; gap: 9px; color: #6c6c6c; font-family: "Nunito", sans-serif; font-size: 18px; line-height: 1.2; font-weight: 700; white-space: nowrap; } .serre-single-meta-item i { color: #ed721a; font-size: 20px; line-height: 1; } /* ============================================================ 02.05.07 CTA PRENOTA ============================================================ */ .serre-single-cta { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 20px; margin: 0 !important; padding: 16px 26px; border: 0; border-radius: 999px; background: #23463c; color: #ffffff !important; font-family: "Nunito", sans-serif; font-size: 14px; line-height: 1; font-weight: 900; letter-spacing: 0.035em; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; box-shadow: none; transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; } .serre-single-cta span { display: inline-block; font-size: 23px; line-height: 1; transition: transform 0.3s ease; } @media (hover: hover) { .serre-single-cta:hover { background: #1d3d34; transform: translateX(5px); box-shadow: 0 10px 24px rgba(35, 70, 60, 0.18); } .serre-single-cta:hover span { transform: translateX(4px); } } /* ============================================================ 02.05.08 CONTENUTO LIBERO Modulo Post Content del singolo evento ============================================================ */ .serre-evento-content { width: 100%; padding: 45px 0 65px; } .serre-evento-content .et_pb_post_content, .serre-evento-content .et_pb_module_inner { width: 100%; } .serre-evento-content p { line-height: 1.7; } /* ============================================================ S.E.R.R.E. — NOTA PERSONALIZZAZIONE PARTECIPAZIONE ============================================================ */ .serre-single-ticket-custom-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(35,70,60,.10); color: #666; font-family: "Nunito", sans-serif; font-size: 13px; line-height: 1.5; } .serre-single-ticket-custom-note i { flex: 0 0 auto; margin-top: 3px; color: #ed721a; font-size: 15px; } .serre-single-ticket-custom-note p { margin: 0 !important; padding: 0 !important; } .serre-single-ticket-custom-note strong { color: #23463c; font-weight: 900; } /* ============================================================ 02.05.09 BOX BIGLIETTI ============================================================ Struttura:

Biglietti

Scegli le opzioni disponibili per il tuo biglietto e procedi con la prenotazione.

[serre_evento_biglietti]
============================================================ */ /* ============================================================ 02.05.09.01 BOX GENERALE ============================================================ */ #serre-biglietti { scroll-margin-top: 40px; } .serre-single-tickets { display: grid; grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 50px; width: 100%; margin: 35px auto; padding: 38px 44px; border-radius: 30px; background: rgba(255, 255, 255, 0.68); box-shadow: 0 15px 40px rgba(35, 70, 60, 0.07); } /* ============================================================ 02.05.09.02 TESTO BIGLIETTI ============================================================ */ .serre-single-ticket-copy { align-self: center; } .serre-single-ticket-copy h2 { margin: 0 0 16px !important; padding: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 34px !important; line-height: 1 !important; font-weight: 900 !important; } .serre-single-ticket-copy p { max-width: 220px; margin: 0 !important; color: #555555; font-family: "Nunito", sans-serif; font-size: 15px; line-height: 1.55; } /* ============================================================ 02.05.09.03 FORM ============================================================ */ .serre-single-ticket-form { width: 100%; max-width: 650px; margin-left: auto; } .serre-single-ticket-form form.cart, .serre-single-ticket-form form.variations_form { width: 100%; margin: 0 !important; } /* ============================================================ 02.05.09.04 VARIAZIONI — BASE Tablet e mobile partono da questa struttura ============================================================ */ .serre-single-ticket-form table.variations { display: block; width: 100%; margin: 0 0 16px !important; border: 0 !important; } .serre-single-ticket-form table.variations tbody { display: flex; flex-direction: column; width: 100%; gap: 10px; } .serre-single-ticket-form table.variations tr { display: grid; grid-template-columns: 95px minmax(0, 1fr); align-items: center; width: 100%; gap: 15px; margin: 0 !important; } .serre-single-ticket-form table.variations th.label { display: block; width: auto !important; margin: 0 !important; padding: 0 !important; text-align: left !important; vertical-align: middle !important; } .serre-single-ticket-form table.variations th.label label { display: block; margin: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 13px !important; line-height: 1.15 !important; font-weight: 900 !important; letter-spacing: 0.045em; text-transform: uppercase; } /* ============================================================ S.E.R.R.E. — ICONA INFO VARIAZIONE Fuori dal flusso della label: non altera l'allineamento verticale delle select. ============================================================ */ .serre-single-ticket-form table.variations th.label label { position: relative; display: inline-block !important; } .serre-single-ticket-form table.variations th.label label .serre-variation-info-wrap { position: absolute !important; left: calc(100% + 7px); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; margin: 0 !important; padding: 0 !important; } .serre-single-ticket-form table.variations td.value { display: block; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* * L'ultima value contiene: * SELECT + X RESET. * * In questo modo la X resta sempre * verticalmente allineata al campo. */ .serre-single-ticket-form table.variations tr:last-child td.value { display: grid !important; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; column-gap: 10px; width: 100% !important; } /* ============================================================ 02.05.09.05 SELECT ============================================================ */ .serre-single-ticket-form table.variations select { display: block; width: 100% !important; min-width: 0 !important; height: 46px !important; margin: 0 !important; padding: 0 15px !important; border: 1px solid rgba(35, 70, 60, 0.16) !important; border-radius: 13px !important; background-color: #ffffff !important; color: #555555 !important; font-family: "Nunito", sans-serif !important; font-size: 15px !important; line-height: 1 !important; font-weight: 700 !important; box-shadow: 0 4px 12px rgba(35, 70, 60, 0.04); cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .serre-single-ticket-form table.variations select:hover { border-color: rgba(237, 114, 26, 0.45) !important; } .serre-single-ticket-form table.variations select:focus { outline: none !important; border-color: #ed721a !important; box-shadow: 0 0 0 3px rgba(237, 114, 26, 0.09) !important; } /* ============================================================ 02.05.09.06 RESET VARIAZIONI — X Sostituisce completamente la scritta "Svuota" ============================================================ */ .serre-single-ticket-form .reset_variations { display: inline-flex !important; align-items: center; justify-content: center; position: static !important; width: 34px !important; min-width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50%; background: rgba(35, 70, 60, 0.07); color: transparent !important; font-size: 0 !important; line-height: 1 !important; text-decoration: none !important; transition: background-color 0.2s ease, transform 0.2s ease; } .serre-single-ticket-form .reset_variations::before { content: "×" !important; display: block !important; position: static !important; margin: 0 !important; color: #23463c !important; font-family: Arial, sans-serif !important; font-size: 22px !important; line-height: 1 !important; font-weight: 400 !important; } .serre-single-ticket-form .reset_variations::after { content: none !important; display: none !important; } @media (hover: hover) { .serre-single-ticket-form .reset_variations:hover { background: rgba(237, 114, 26, 0.12); transform: rotate(90deg); } .serre-single-ticket-form .reset_variations:hover::before { color: #ed721a !important; } } /* ============================================================ 02.05.09.07 VARIAZIONE SELEZIONATA + PREZZO ============================================================ */ .serre-single-ticket-form .single_variation_wrap { margin-top: 12px; } .serre-single-ticket-form .woocommerce-variation { margin: 0 !important; } .serre-single-ticket-form .woocommerce-variation-description { margin: 0 0 10px !important; color: #666666; font-family: "Nunito", sans-serif; font-size: 14px; line-height: 1.5; } .serre-single-ticket-form .woocommerce-variation-price { margin: 0 0 12px !important; } .serre-single-ticket-form .woocommerce-variation-price .price, .serre-single-ticket-form .woocommerce-variation-price .amount { color: #ed721a !important; font-family: "Nunito", sans-serif !important; font-size: 22px !important; line-height: 1 !important; font-weight: 900 !important; white-space: nowrap; } /* ============================================================ 02.05.09.08 QUANTITÀ ============================================================ */ .serre-single-ticket-form .woocommerce-variation-add-to-cart, .serre-single-ticket-form form.cart:not(.variations_form) { display: flex !important; align-items: center; flex-wrap: nowrap; gap: 14px; } .serre-single-ticket-form .quantity { flex: 0 0 auto; margin: 0 !important; } .serre-single-ticket-form .quantity input.qty { width: 62px !important; min-width: 62px !important; height: 48px !important; margin: 0 !important; padding: 0 8px !important; border: 1px solid rgba(35, 70, 60, 0.16) !important; border-radius: 13px !important; background: #ffffff !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 16px !important; font-weight: 900 !important; text-align: center; box-shadow: none !important; } /* ============================================================ 02.05.09.09 PULSANTE AGGIUNGI AL CARRELLO ============================================================ */ .serre-single-ticket-form button.single_add_to_cart_button, .serre-single-ticket-form .button.single_add_to_cart_button { position: relative !important; display: inline-flex !important; align-items: center; justify-content: center; flex: 0 1 auto; min-width: 240px; min-height: 48px !important; margin: 0 !important; /* Spazio riservato alla freccia originale Divi */ padding: 0 52px 0 28px !important; border: 0 !important; border-radius: 999px !important; background: #23463c !important; color: #ffffff !important; font-family: "Nunito", sans-serif !important; font-size: 14px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0.025em; text-transform: uppercase !important; box-shadow: none !important; /* Impedisce alla freccia di uscire dal pill-button */ overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; } .serre-single-ticket-form button.single_add_to_cart_button.disabled, .serre-single-ticket-form .button.single_add_to_cart_button.disabled { opacity: 0.45 !important; cursor: not-allowed; transform: none !important; box-shadow: none !important; } /* ============================================================ 02.05.09.10 FRECCIA HOVER PULSANTE Mantiene l'icona originale Divi e la contiene nel pulsante ============================================================ */ .serre-single-ticket-form button.single_add_to_cart_button::after, .serre-single-ticket-form .button.single_add_to_cart_button::after { position: absolute !important; top: 50% !important; right: 20px !important; left: auto !important; width: 20px !important; height: 20px !important; margin: 0 !important; color: #ffffff !important; font-family: "ETmodules" !important; font-size: 20px !important; font-weight: 400 !important; line-height: 20px !important; text-align: center; opacity: 0 !important; transform: translateY(-50%) translateX(-4px) !important; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease !important; } @media (hover: hover) { .serre-single-ticket-form button.single_add_to_cart_button:hover, .serre-single-ticket-form .button.single_add_to_cart_button:hover { background: #1d3d34 !important; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(35, 70, 60, 0.15) !important; } .serre-single-ticket-form button.single_add_to_cart_button:hover::after, .serre-single-ticket-form .button.single_add_to_cart_button:hover::after { opacity: 1 !important; transform: translateY(-50%) translateX(0) !important; } } /* ============================================================ 02.05.09.11 BIGLIETTI — NON DISPONIBILI ============================================================ */ .serre-single-tickets--unavailable { display: flex !important; grid-template-columns: none !important; align-items: center; justify-content: flex-start; gap: 22px; width: 100%; padding: 32px 38px; box-sizing: border-box; background: rgba(255, 255, 255, .82); border-radius: 28px; box-shadow: 0 15px 40px rgba(35, 70, 60, .07); } /* Icona */ .serre-single-ticket-unavailable-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%; background: rgba(237, 114, 26, .10); color: #ed721a; font-size: 24px; } /* Testo */ .serre-single-ticket-unavailable-copy { min-width: 0; } .serre-single-ticket-unavailable-copy h2 { margin: 0 0 5px !important; padding: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 23px !important; line-height: 1.15 !important; font-weight: 900 !important; } .serre-single-ticket-unavailable-copy p { margin: 0 !important; padding: 0 !important; color: #6c6c6c; font-family: "Nunito", sans-serif; font-size: 15px; line-height: 1.5; } /* Smartphone */ @media (max-width: 767px) { .serre-single-tickets--unavailable { align-items: flex-start; gap: 16px; padding: 24px 20px; } .serre-single-ticket-unavailable-icon { flex-basis: 48px; width: 48px; height: 48px; font-size: 20px; } .serre-single-ticket-unavailable-copy h2 { font-size: 19px !important; } .serre-single-ticket-unavailable-copy p { font-size: 14px; } } /* ============================================================ 02.05.10 DESKTOP Variazioni affiancate + riga acquisto ============================================================ */ @media (min-width: 981px) { /* -------------------------------------------------------- VARIAZIONI DINAMICHE 1 variabile = 1 colonna 2 variabili = 2 colonne 3 variabili = 3 colonne -------------------------------------------------------- */ .serre-single-ticket-form table.variations { margin-bottom: 14px !important; overflow: visible !important; } .serre-single-ticket-form table.variations tbody { display: grid !important; grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) ); gap: 16px; width: 100%; overflow: visible !important; } /* Singola variabile: label sopra / select sotto */ .serre-single-ticket-form table.variations tr { display: flex !important; flex-direction: column; align-items: stretch; gap: 7px; width: 100%; margin: 0 !important; overflow: visible !important; } .serre-single-ticket-form table.variations th.label { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .serre-single-ticket-form table.variations th.label label { margin: 0 !important; font-size: 12px !important; line-height: 1.2 !important; } .serre-single-ticket-form table.variations td.value { display: block !important; position: static !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* * Ultima variabile: * SELECT + X sulla stessa riga. */ .serre-single-ticket-form table.variations tr:last-child td.value { display: grid !important; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; column-gap: 10px; } .serre-single-ticket-form table.variations tr:last-child td.value select { grid-column: 1; width: 100% !important; margin: 0 !important; } .serre-single-ticket-form table.variations tr:last-child .reset_variations { grid-column: 2; align-self: center; justify-self: center; margin: 0 !important; } /* -------------------------------------------------------- RIGA ACQUISTO [ quantità ] [ pulsante ] [ prezzo ] -------------------------------------------------------- */ .serre-single-ticket-form .single_variation_wrap { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cart price"; align-items: center; gap: 30px; width: 100%; margin-top: 18px; } /* Prezzo a destra */ .serre-single-ticket-form .woocommerce-variation { grid-area: price; display: flex !important; align-items: center; justify-content: flex-end; margin: 0 !important; } .serre-single-ticket-form .woocommerce-variation-price { margin: 0 !important; white-space: nowrap; } .serre-single-ticket-form .woocommerce-variation-price .price, .serre-single-ticket-form .woocommerce-variation-price .amount { margin: 0 !important; font-size: 25px !important; white-space: nowrap; } /* Quantità + pulsante a sinistra */ .serre-single-ticket-form .woocommerce-variation-add-to-cart { grid-area: cart; display: flex !important; align-items: center; gap: 16px; margin: 0 !important; } } /* ============================================================ 02.05.11 TABLET ============================================================ */ @media (max-width: 980px) { /* Banner */ .serre-single-header-photo { height: 280px; } /* Testata */ .serre-single-head { gap: 25px; padding: 35px 28px 40px; } .serre-single-heading-row { gap: 20px; } /* Badge */ .serre-single-date .serre-evento-badge { width: 92px !important; height: 92px !important; border-radius: 22px !important; } .serre-single-date .serre-evento-badge-giorno { font-size: 36px !important; } .serre-single-date .serre-evento-badge-mese { margin-top: 6px !important; font-size: 12px !important; } /* Titolo */ .serre-single-title { font-size: clamp( 34px, 5vw, 50px ) !important; } /* Meta */ .serre-single-meta-item { font-size: 16px; } .serre-single-meta-item i { font-size: 18px; } /* CTA */ .serre-single-cta { padding: 14px 20px; font-size: 12px; } /* Biglietti */ .serre-single-tickets { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; width: 92%; padding: 32px; } .serre-single-ticket-form { max-width: none; } } /* ============================================================ 02.05.12 SMARTPHONE ============================================================ */ @media (max-width: 767px) { /* Banner */ .serre-single-header-photo { height: 220px; } /* Testata */ .serre-single-head { flex-direction: column; align-items: stretch; gap: 22px; padding: 28px 18px 34px; } .serre-single-heading-row { align-items: flex-start; gap: 15px; } /* Badge */ .serre-single-date .serre-evento-badge { width: 74px !important; height: 74px !important; border-radius: 18px !important; } .serre-single-date .serre-evento-badge-giorno { font-size: 29px !important; } .serre-single-date .serre-evento-badge-mese { margin-top: 5px !important; font-size: 10px !important; } /* Titolo */ .serre-single-title { margin-bottom: 9px !important; font-size: clamp( 28px, 8vw, 40px ) !important; line-height: 1.04 !important; } /* Meta */ .serre-single-meta-items { gap: 7px 15px; } .serre-single-meta-item { gap: 6px; font-size: 14px; white-space: normal; } .serre-single-meta-item i { font-size: 16px; } /* CTA */ .serre-single-cta { align-self: flex-start; margin-left: 89px !important; padding: 13px 19px; font-size: 12px; } /* Contenuto libero */ .serre-evento-content { padding: 30px 0 45px; } /* Box biglietti */ .serre-single-tickets { display: block; width: calc(100% - 36px); margin: 25px auto; padding: 28px 22px; border-radius: 24px; } .serre-single-ticket-copy { margin-bottom: 26px; } .serre-single-ticket-copy h2 { margin-bottom: 12px !important; font-size: 30px !important; } .serre-single-ticket-copy p { max-width: none; } .serre-single-ticket-form { width: 100%; max-width: none; margin: 0; } /* Variabili: label sopra / select sotto */ .serre-single-ticket-form table.variations tr { grid-template-columns: 1fr; gap: 6px; } .serre-single-ticket-form table.variations tbody { gap: 15px; } .serre-single-ticket-form table.variations select { height: 48px !important; } /* Prezzo */ .serre-single-ticket-form .woocommerce-variation-price .price, .serre-single-ticket-form .woocommerce-variation-price .amount { font-size: 21px !important; } /* Quantità + pulsante */ .serre-single-ticket-form .woocommerce-variation-add-to-cart, .serre-single-ticket-form form.cart:not(.variations_form) { flex-wrap: wrap; align-items: center; } .serre-single-ticket-form button.single_add_to_cart_button, .serre-single-ticket-form .button.single_add_to_cart_button { flex: 1; min-width: 190px; } } /* ============================================================ 02.05.13 SMARTPHONE STRETTO ============================================================ */ @media (max-width: 480px) { .serre-single-heading-row { gap: 13px; } .serre-single-date .serre-evento-badge { width: 68px !important; height: 68px !important; } .serre-single-date .serre-evento-badge-giorno { font-size: 22px !important; } .serre-single-date .serre-evento-badge--multi .serre-evento-badge-giorno { font-size: 22px !important; letter-spacing: -0.04em; } .serre-single-title { font-size: clamp( 22px, 7vw, 28px ) !important; } .serre-single-cta { margin-left: 0 !important; width: 100%; } /* Biglietti */ .serre-single-tickets { width: calc(100% - 24px); padding: 24px 18px; } .serre-single-ticket-form .woocommerce-variation-add-to-cart, .serre-single-ticket-form form.cart:not(.variations_form) { gap: 10px; } .serre-single-ticket-form button.single_add_to_cart_button, .serre-single-ticket-form .button.single_add_to_cart_button { min-width: 175px; padding: 0 42px 0 18px !important; font-size: 12px !important; } } /* ============================================================ 02.06 ALLE S.E.R.R.E. — CARRELLO WOOCOMMERCE ------------------------------------------------------------ 02.06.01 Layout pagina / no sidebar 02.06.02 Testata e ritorno eventi 02.06.03 Step prenotazione 02.06.04 Titolo 02.06.05 Layout WooCommerce desktop 02.06.06 Avvisi WooCommerce 02.06.07 Box prodotti 02.06.08 Prodotto / variazioni / quantità 02.06.09 Coupon + aggiorna carrello 02.06.10 Totale carrello 02.06.11 Checkout + nota 02.06.12 Carrello vuoto 02.06.13 Cross-sell 02.06.14 Tablet 02.06.15 Smartphone — struttura generale 02.06.16 Smartphone stretto — testata / checkout 02.06.17 Carrello mobile definitivo 02.06.18 Smartphone stretto — carrello ============================================================ */ /* ============================================================ 02.06.01 LAYOUT PAGINA / NO SIDEBAR ============================================================ */ body.woocommerce-cart #sidebar { display: none !important; } body.woocommerce-cart #left-area { width: 100% !important; padding-right: 0 !important; } body.woocommerce-cart #main-content .container::before { display: none !important; } body.woocommerce-cart #main-content { background: #f6eeeb; } .serre-cart-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 50px 0 78px; color: #555; font-family: "Nunito", sans-serif; } /* ============================================================ 02.06.02 TESTATA E RITORNO EVENTI ============================================================ */ .serre-cart-topbar { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 28px; } .serre-cart-context { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; } .serre-cart-kicker { order: 2; display: inline-flex; align-items: center; color: #23463c; font-size: 12px; line-height: 1; font-weight: 900; letter-spacing: .12em; } .serre-cart-back { order: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid rgba(35, 70, 60, .16); border-radius: 999px; background: rgba(255, 255, 255, .58); color: #23463c !important; font-size: 12px; line-height: 1; font-weight: 900; text-decoration: none !important; transition: transform .25s ease, border-color .25s ease, background-color .25s ease, color .25s ease; } .serre-cart-back > span:first-child { color: #ed721a; font-size: 16px; line-height: 1; transition: transform .25s ease; } @media (hover: hover) { .serre-cart-back:hover { border-color: rgba(237, 114, 26, .42); background: #fff; color: #ed721a !important; transform: translateX(-2px); } .serre-cart-back:hover > span:first-child { transform: translateX(-2px); } } /* ============================================================ 02.06.03 STEP PRENOTAZIONE ============================================================ */ .serre-cart-steps { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: #8a8a8a; font-size: 12px; font-weight: 800; white-space: nowrap; } .serre-cart-step { display: inline-flex; align-items: center; gap: 7px; } .serre-cart-step b { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(35, 70, 60, .08); color: #23463c; font-size: 11px; font-weight: 900; } .serre-cart-step.is-active { color: #23463c; } .serre-cart-step.is-active b { background: #ed721a; color: #fff; } .serre-cart-step-line { display: block; width: 28px; height: 1px; background: rgba(35, 70, 60, .18); } /* ============================================================ 02.06.04 TITOLO ============================================================ */ .serre-cart-heading { max-width: 760px; margin: 0 0 32px; } .serre-cart-heading h1 { margin: 0 0 13px !important; padding: 0 !important; color: #ed721a !important; font-family: "Nunito", sans-serif !important; font-size: clamp(42px, 5vw, 66px) !important; line-height: 1 !important; font-weight: 900 !important; } .serre-cart-heading p { max-width: 650px; margin: 0; color: #626262; font-size: 17px; line-height: 1.65; } /* ============================================================ 02.06.05 LAYOUT WOOCOMMERCE DESKTOP Prodotti 62% / Totale 38% ============================================================ */ .serre-cart-content .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 24px; width: 100%; } @media (min-width: 981px) { .serre-cart-content .cart-collaterals { width: 340px !important; max-width: 340px !important; justify-self: end; } } .serre-cart-content .woocommerce-notices-wrapper { grid-column: 1 / -1; width: 100%; } .serre-cart-content .woocommerce-cart-form { grid-column: 1; min-width: 0; } .serre-cart-content .cart-collaterals { grid-column: 2; min-width: 0; } /* disattiva i vecchi float WooCommerce */ .serre-cart-content .woocommerce-cart-form, .serre-cart-content .cart-collaterals, .serre-cart-content .cart_totals, .serre-cart-content .cross-sells { float: none !important; } .serre-cart-content .woocommerce::before, .serre-cart-content .woocommerce::after, .serre-cart-content .cart-collaterals::before, .serre-cart-content .cart-collaterals::after { display: none !important; content: none !important; } /* ============================================================ 02.06.06 AVVISI WOOCOMMERCE ============================================================ */ /* Base comune */ .serre-cart-content .woocommerce-message, .serre-cart-content .woocommerce-info, .serre-cart-content .woocommerce-error { display: block !important; width: 100% !important; margin: 0 0 20px !important; padding: 17px 20px 17px 20px !important; border: 0 !important; border-left: 5px solid rgba(35, 70, 60, .22) !important; border-radius: 14px !important; background: #ffffff !important; color: #4f4f4f !important; font-family: "Nunito", sans-serif !important; font-size: 14px !important; line-height: 1.45 !important; box-shadow: 0 8px 24px rgba(35, 70, 60, .06); } /* Messaggi informativi / neutri */ .serre-cart-content .woocommerce-info, .serre-cart-content .cart-empty.woocommerce-info { background: #ffffff !important; color: #4f4f4f !important; border-left-color: rgba(35, 70, 60, .22) !important; } /* Conferme / messaggi generici */ .serre-cart-content .woocommerce-message:not(:has(.restore-item)) { background: #ffffff !important; color: #4f4f4f !important; border-left-color: #ed721a !important; } /* Errori e azioni negative */ .serre-cart-content .woocommerce-error, .serre-cart-content .woocommerce-message:has(.restore-item) { background: #fff1f0 !important; color: #8f2f2f !important; border-left-color: #d64545 !important; } /* Icone */ .serre-cart-content .woocommerce-message::before, .serre-cart-content .woocommerce-info::before, .serre-cart-content .woocommerce-error::before { top: 17px !important; left: 19px !important; color: #ed721a !important; } .serre-cart-content .woocommerce-message:has(.restore-item)::before, .serre-cart-content .woocommerce-error::before { color: #d64545 !important; } /* Link */ .serre-cart-content .woocommerce-info a, .serre-cart-content .woocommerce-message a { color: #23463c !important; font-weight: 900 !important; } .serre-cart-content .woocommerce-message:has(.restore-item) .restore-item { color: #b53131 !important; text-decoration: underline !important; } /* Nel carrello non serve "Visualizza carrello" */ body.woocommerce-cart .serre-cart-content .woocommerce-message a.wc-forward { display: none !important; } body.woocommerce-cart .serre-cart-content .woocommerce-message { padding-right: 22px !important; } /* Liste interne */ .serre-cart-content .woocommerce-error li, .serre-cart-content .woocommerce-message li, .serre-cart-content .woocommerce-info li { margin: 0 !important; } /* Robustezza: se WooCommerce inserisce un avviso dentro la riga azioni */ .serre-cart-content .woocommerce-cart-form td.actions .woocommerce-error, .serre-cart-content .woocommerce-cart-form td.actions .woocommerce-message, .serre-cart-content .woocommerce-cart-form td.actions .woocommerce-info, .serre-cart-content .woocommerce-cart-form td.actions .woocommerce-notices-wrapper { grid-column: 1 / -1; flex: 0 0 100% !important; width: 100% !important; margin: 10px 0 0 !important; float: none !important; clear: both !important; } /* ============================================================ 02.06.07 BOX PRODOTTI ============================================================ */ .serre-cart-content .woocommerce-cart-form { width: 100% !important; margin: 0 !important; padding: 12px 26px 24px; border-radius: 28px; background: rgba(255, 255, 255, .78); box-shadow: 0 15px 40px rgba(35, 70, 60, .07); } .serre-cart-content table.shop_table { width: 100% !important; max-width: 100% !important; margin: 0 !important; table-layout: fixed !important; border: 0 !important; border-collapse: separate !important; border-spacing: 0 !important; background: transparent !important; } .serre-cart-content table.shop_table th, .serre-cart-content table.shop_table td { border: 0 !important; } /* Larghezze colonne carrello — struttura stabile */ .serre-cart-content .woocommerce-cart-form th.product-remove, .serre-cart-content .woocommerce-cart-form td.product-remove { width: 42px !important; min-width: 42px !important; max-width: 42px !important; box-sizing: border-box !important; text-align: center !important; } .serre-cart-content .woocommerce-cart-form th.product-thumbnail, .serre-cart-content .woocommerce-cart-form td.product-thumbnail { width: 104px !important; min-width: 104px !important; max-width: 104px !important; box-sizing: border-box !important; } /* PRODOTTO è l'unica colonna elastica */ .serre-cart-content .woocommerce-cart-form th.product-name, .serre-cart-content .woocommerce-cart-form td.product-name { width: auto !important; min-width: 0 !important; box-sizing: border-box !important; } .serre-cart-content .woocommerce-cart-form th.product-price, .serre-cart-content .woocommerce-cart-form td.product-price { width: 82px !important; min-width: 82px !important; max-width: 82px !important; box-sizing: border-box !important; white-space: nowrap !important; } .serre-cart-content .woocommerce-cart-form th.product-quantity, .serre-cart-content .woocommerce-cart-form td.product-quantity { width: 98px !important; min-width: 98px !important; max-width: 98px !important; box-sizing: border-box !important; text-align: center !important; } .serre-cart-content .woocommerce-cart-form th.product-subtotal, .serre-cart-content .woocommerce-cart-form td.product-subtotal { width: 100px !important; min-width: 100px !important; max-width: 100px !important; box-sizing: border-box !important; text-align: right !important; white-space: nowrap !important; } .serre-cart-content .woocommerce-cart-form table.shop_table thead th { padding: 17px 12px 12px !important; border-bottom: 1px solid rgba(35, 70, 60, .10) !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 11px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .055em; text-transform: uppercase; } /* Prezzo / Quantità / Subtotale restano su una riga */ .serre-cart-content .woocommerce-cart-form th.product-price, .serre-cart-content .woocommerce-cart-form th.product-quantity, .serre-cart-content .woocommerce-cart-form th.product-subtotal { white-space: nowrap !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } .serre-cart-content .woocommerce-cart-form table.shop_table tbody tr.woocommerce-cart-form__cart-item td { /*border-bottom: 1px solid rgba(35, 70, 60, .08) !important;*/ vertical-align: middle !important; } .woocommerce table.shop_table_responsive tr:nth-child(2n) td, .woocommerce-page table.shop_table_responsive tr:nth-child(2n) td { background-color: initial !important; } /* ============================================================ 02.06.08 PRODOTTO / VARIAZIONI / QUANTITÀ ============================================================ */ .serre-cart-content .product-thumbnail { overflow: visible !important; } .serre-cart-content .product-thumbnail a { display: block !important; width: 84px !important; height: 84px !important; max-width: 84px !important; } .serre-cart-content .product-thumbnail img { display: block !important; width: 84px !important; min-width: 84px !important; max-width: 84px !important; height: 84px !important; min-height: 84px !important; margin: 0 !important; object-fit: cover !important; object-position: center !important; border-radius: 16px; box-shadow: 0 8px 20px rgba(35, 70, 60, .08); } .serre-cart-content .product-name { overflow-wrap: anywhere; } .serre-cart-content .product-name a { color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 20px; line-height: 1.25; font-weight: 900; text-decoration: none !important; } .serre-cart-content .woocommerce-cart-form .variation { margin: 7px 0 0 !important; color: #777; font-size: 14px; line-height: 1.4; } .serre-cart-content .woocommerce-cart-form .variation dt, .serre-cart-content .woocommerce-cart-form .variation dd { float: none; margin: 0 4px 0 0 !important; } .serre-cart-content .product-price, .serre-cart-content .product-subtotal, .serre-cart-content .product-price .amount, .serre-cart-content .product-subtotal .amount { color: #ed721a !important; font-weight: 900; white-space: nowrap; } .serre-cart-content a.remove { display: inline-flex !important; align-items: center; justify-content: center; width: 32px !important; height: 32px !important; border-radius: 50% !important; background: rgba(237, 114, 26, .08) !important; color: #ed721a !important; font-family: Arial, sans-serif !important; font-size: 21px !important; line-height: 1 !important; transition: color .2s ease, background-color .2s ease, transform .2s ease; } @media (hover: hover) { .serre-cart-content a.remove:hover { background: #ed721a !important; color: #fff !important; transform: rotate(90deg); } } .serre-cart-content .woocommerce-cart-form td.product-quantity .quantity { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 0 !important; } .serre-cart-content .quantity .qty { width: 66px !important; height: 46px !important; padding: 0 8px !important; border: 1px solid rgba(35, 70, 60, .16) !important; border-radius: 13px !important; background: #fff !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 15px !important; font-weight: 900 !important; text-align: center; box-shadow: none !important; } /* ============================================================ 02.06.09 COUPON + AGGIORNA CARRELLO ============================================================ */ /* ------------------------------------------------------------ CELLA AZIONI NON trasformarla in flex/grid: deve mantenere il colspan WooCommerce ------------------------------------------------------------ */ .serre-cart-content .woocommerce-cart-form td.actions { display: table-cell !important; width: auto !important; padding: 22px 8px 0 !important; box-sizing: border-box !important; text-align: left !important; vertical-align: middle !important; } /* clearfix */ .serre-cart-content .woocommerce-cart-form td.actions::after { content: ""; display: table; clear: both; } /* ------------------------------------------------------------ GRUPPO COUPON — SINISTRA ------------------------------------------------------------ */ .serre-cart-content .woocommerce-cart-form td.actions .coupon { display: inline-flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 10px !important; width: auto !important; margin: 0 !important; padding: 0 !important; float: left !important; } /* ------------------------------------------------------------ CAMPO CODICE ------------------------------------------------------------ */ .serre-cart-content .woocommerce-cart-form td.actions .coupon .input-text { display: block !important; width: 165px !important; min-width: 165px !important; max-width: 165px !important; height: 46px !important; margin: 0 !important; padding: 0 17px !important; box-sizing: border-box !important; border: 1.5px solid rgba(35, 70, 60, .25) !important; border-radius: 999px !important; background: #fffdf8 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 13px !important; line-height: normal !important; font-weight: 600 !important; outline: none !important; box-shadow: 0 3px 10px rgba(35, 70, 60, .04) !important; } .serre-cart-content .woocommerce-cart-form td.actions .coupon .input-text::placeholder { color: #777 !important; opacity: 1 !important; } /* ------------------------------------------------------------ BASE PULSANTI ------------------------------------------------------------ */ .serre-cart-content .woocommerce-cart-form td.actions button[name="apply_coupon"], .serre-cart-content .woocommerce-cart-form td.actions button[name="update_cart"] { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 42px 0 20px !important; box-sizing: border-box !important; border: 0 !important; border-radius: 999px !important; color: #ffffff !important; font-family: "Nunito", sans-serif !important; font-size: 11px !important; line-height: 1 !important; font-weight: 900 !important; text-transform: uppercase !important; white-space: nowrap !important; box-shadow: none !important; } /* ------------------------------------------------------------ APPLICA CODICE — TORTORA ------------------------------------------------------------ */ .serre-cart-content .woocommerce-cart-form td.actions button[name="apply_coupon"] { min-width: 150px !important; background: #d3b7a4 !important; font-size: 0 !important; float: none !important; } .serre-cart-content .woocommerce-cart-form td.actions button[name="apply_coupon"]::before { content: "APPLICA CODICE" !important; position: static !important; display: inline-block !important; margin: 0 !important; color: #ffffff !important; font-family: "Nunito", sans-serif !important; font-size: 11px !important; line-height: 1 !important; font-weight: 900 !important; opacity: 1 !important; transform: none !important; } /* ------------------------------------------------------------ AGGIORNA CARRELLO — DESTRA ------------------------------------------------------------ */ .serre-cart-content .woocommerce-cart-form td.actions button[name="update_cart"] { min-width: 180px !important; margin: 0 !important; float: right !important; background: #ed721a !important; } /* ------------------------------------------------------------ FRECCE ------------------------------------------------------------ */ .serre-cart-content .woocommerce-cart-form td.actions button[name="apply_coupon"]::after, .serre-cart-content .woocommerce-cart-form td.actions button[name="update_cart"]::after { content: "»" !important; position: absolute !important; top: 50% !important; right: 16px !important; left: auto !important; display: block !important; margin: 0 !important; color: #ffffff !important; font-family: Arial, sans-serif !important; font-size: 20px !important; line-height: 1 !important; opacity: 1 !important; transform: translateY(-50%) !important; pointer-events: none !important; } /* ------------------------------------------------------------ AGGIORNA DISABILITATO ------------------------------------------------------------ */ .serre-cart-content .woocommerce-cart-form td.actions button[name="update_cart"]:disabled, .serre-cart-content .woocommerce-cart-form td.actions button[name="update_cart"]:disabled[disabled] { background: rgba(237, 114, 26, .35) !important; color: rgba(255,255,255,.92) !important; opacity: 1 !important; cursor: not-allowed !important; } @media (hover: hover) { .serre-cart-content .woocommerce-cart-form td.actions button[name="apply_coupon"]:hover { background: #c7a58e !important; transform: translateY(-2px) !important; } .serre-cart-content .woocommerce-cart-form td.actions button[name="update_cart"]:hover { background: #d96112 !important; transform: translateY(-2px) !important; } .serre-cart-content .woocommerce-cart-form td.actions button[name="apply_coupon"]:hover::after, .serre-cart-content .woocommerce-cart-form td.actions button[name="update_cart"]:hover::after { transform: translate(3px, -50%) !important; } } /* ============================================================ 02.06.10 TOTALE CARRELLO ============================================================ */ .serre-cart-content .cart-collaterals { display: block !important; width: 100% !important; margin: 0 !important; } .serre-cart-content .cart-collaterals .cart_totals { width: 100% !important; margin: 0 !important; padding: 28px 30px 26px; border-radius: 28px; background: #fff; box-shadow: 0 15px 40px rgba(35, 70, 60, .08); } .serre-cart-content .cart_totals h2 { margin: 0 0 19px !important; padding: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 26px !important; line-height: 1 !important; font-weight: 900 !important; } .serre-cart-content .cart_totals table.shop_table { margin-bottom: 22px !important; table-layout: auto !important; } .serre-cart-content .cart_totals table.shop_table th, .serre-cart-content .cart_totals table.shop_table td { padding: 13px 0 !important; border-bottom: 1px solid rgba(35, 70, 60, .08) !important; color: #666; } .serre-cart-content .cart_totals table.shop_table th { color: #23463c !important; font-weight: 800; } .serre-cart-content .cart_totals .order-total th, .serre-cart-content .cart_totals .order-total td { padding-top: 18px !important; border-bottom: 0 !important; color: #23463c !important; font-size: 18px; font-weight: 900; } /* importo totale principale */ .serre-cart-content .cart_totals .order-total td > strong > .amount, .serre-cart-content .cart_totals .order-total td > .amount { color: #ed721a !important; font-size: 22px !important; line-height: 1.1 !important; font-weight: 900 !important; white-space: nowrap; } /* IVA inclusa: piccola e sotto al totale */ .serre-cart-content .cart_totals .order-total .includes_tax { display: block !important; margin: 6px 0 0 !important; color: #8a8a8a !important; font-family: "Nunito", sans-serif !important; font-size: 10px !important; line-height: 1.35 !important; font-weight: 600 !important; text-align: left !important; white-space: normal !important; } .serre-cart-content .cart_totals .order-total .includes_tax .amount { color: #8a8a8a !important; font-size: 10px !important; line-height: 1.35 !important; font-weight: 700 !important; } /* ============================================================ 02.06.11 CHECKOUT + NOTA ============================================================ */ .serre-cart-content .wc-proceed-to-checkout { padding: 0 !important; } .serre-cart-content .wc-proceed-to-checkout .checkout-button { position: relative; display: flex !important; align-items: center; justify-content: center; width: 100% !important; min-height: 54px; margin: 0 !important; padding: 0 50px 0 26px !important; border: 0 !important; border-radius: 999px !important; background: #23463c !important; color: #fff !important; font-family: "Nunito", sans-serif !important; font-size: 14px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .025em; text-transform: uppercase; box-shadow: none !important; transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease; } .serre-cart-content .wc-proceed-to-checkout .checkout-button::after { content: "»" !important; position: absolute !important; top: 40% !important; right: 22px !important; left: auto !important; margin: 0 !important; color: #fff !important; font-family: Arial, sans-serif !important; font-size: 23px !important; line-height: 1 !important; opacity: 1 !important; transform: translateY(-50%) !important; transition: transform .25s ease !important; } .serre-cart-checkout-note { margin: 14px 8px 0 !important; color: #898989; font-family: "Nunito", sans-serif; font-size: 12px; line-height: 1.45; text-align: center; } /* prima che lo script la sposti, non lascia spazio fuori dal box */ .serre-cart-shell > .serre-cart-checkout-note { display: none; } @media (hover: hover) { .serre-cart-content .wc-proceed-to-checkout .checkout-button:hover { background: #1d3d34 !important; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(35, 70, 60, .18) !important; } .serre-cart-content .wc-proceed-to-checkout .checkout-button:hover::after { transform: translate(4px, -50%) !important; } } /* ============================================================ 02.06.12 CARRELLO VUOTO ============================================================ */ .serre-cart-content .cart-empty.woocommerce-info { grid-column: 1 / -1; } .serre-cart-content .return-to-shop { /*grid-column: 1 / -1; margin: 0 !important;*/ display: none; } /* ============================================================ PULSANTE RITORNA AL NEGOZIO Freccia a SINISTRA ============================================================ */ .serre-cart-content .return-to-shop .button { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-height: 46px !important; padding: 0 24px 0 20px !important; border: 0 !important; border-radius: 999px !important; background: #23463c !important; color: #ffffff !important; font-family: "Nunito", sans-serif !important; font-size: 12px !important; line-height: 1 !important; font-weight: 900 !important; text-transform: uppercase !important; box-shadow: none !important; } /* Elimina completamente la freccia automatica Divi */ .serre-cart-content .return-to-shop .button::after { content: none !important; display: none !important; opacity: 0 !important; } /* Nostra freccia verso SINISTRA */ .serre-cart-content .return-to-shop .button::before { content: "‹" !important; position: static !important; display: inline-block !important; margin: 0 !important; color: #ffffff !important; font-family: Arial, sans-serif !important; font-size: 24px !important; line-height: 1 !important; opacity: 1 !important; transform: translateX(0) !important; transition: transform .25s ease !important; } /* Hover */ @media (hover: hover) { .serre-cart-content .return-to-shop .button:hover { background: #1d3d34 !important; } .serre-cart-content .return-to-shop .button:hover::before { transform: translateX(-4px) !important; } } /* ============================================================ 02.06.13 CROSS-SELL ============================================================ */ .serre-cart-content .cross-sells { width: 100% !important; margin: 24px 0 0 !important; } .serre-cart-content .cross-sells > h2 { margin: 0 0 16px !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 22px !important; font-weight: 900 !important; } .serre-cart-content .cross-sells ul.products { display: grid !important; grid-template-columns: 1fr; gap: 16px; margin: 0 !important; } .serre-cart-content .cross-sells ul.products li.product { float: none !important; width: 100% !important; } /* ============================================================ 02.06.14 TABLET ============================================================ */ @media (max-width: 980px) { .serre-cart-shell { width: min(92%, 900px); padding-top: 42px; } .serre-cart-topbar { align-items: flex-start; } .serre-cart-steps { gap: 7px; } .serre-cart-step-line { width: 18px; } .serre-cart-content .woocommerce { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr); gap: 20px; } .serre-cart-content .woocommerce-cart-form { padding: 10px 18px 22px; } .serre-cart-content .woocommerce-cart-form th.product-thumbnail, .serre-cart-content .woocommerce-cart-form td.product-thumbnail { width: 82px !important; min-width: 82px !important; } .serre-cart-content .product-thumbnail a, .serre-cart-content .product-thumbnail img { width: 66px !important; min-width: 66px !important; max-width: 66px !important; height: 66px !important; min-height: 66px !important; } } /* ============================================================ 02.06.15 SMARTPHONE Struttura generale della pagina. Il contenuto del carrello è gestito da 02.06.17. ============================================================ */ @media (max-width: 767px) { .serre-cart-shell { width: calc(100% - 28px); padding: 32px 0 58px; } .serre-cart-topbar { display: block; margin-bottom: 24px; } .serre-cart-context { gap: 10px 12px; } .serre-cart-steps { justify-content: flex-start; margin-top: 18px; padding-bottom: 3px; overflow-x: auto; } .serre-cart-heading { margin-bottom: 24px; } .serre-cart-heading h1 { font-size: clamp(36px, 12vw, 48px) !important; } .serre-cart-heading p { font-size: 15px; } .serre-cart-content .woocommerce { display: grid; grid-template-columns: 1fr; gap: 20px; } .serre-cart-content .woocommerce-notices-wrapper, .serre-cart-content .woocommerce-cart-form, .serre-cart-content .cart-collaterals, .serre-cart-content .cart-empty.woocommerce-info, .serre-cart-content .return-to-shop { grid-column: 1; } .serre-cart-content .cross-sells { margin-top: 20px !important; } } /* ============================================================ 02.06.16 SMARTPHONE STRETTO Solo testata / navigazione / checkout. Il carrello stretto è gestito da 02.06.18. ============================================================ */ @media (max-width: 480px) { .serre-cart-step { font-size: 11px; } .serre-cart-step-line { width: 12px; } .serre-cart-back { min-height: 34px; padding: 0 12px; font-size: 11px; } .serre-cart-content .wc-proceed-to-checkout .checkout-button { padding-left: 20px !important; padding-right: 46px !important; font-size: 12px !important; } } /* ============================================================ 02.06.17 CARRELLO — MOBILE DEFINITIVO Override finale WooCommerce responsive ============================================================ */ @media (max-width: 767px) { /* ======================================================== BOX CARRELLO ======================================================== */ .serre-cart-content .woocommerce-cart-form { width: 100% !important; margin: 0 !important; padding: 12px 16px 18px !important; border-radius: 24px !important; overflow: hidden; } /* tabella diventa contenitore normale */ .serre-cart-content .woocommerce-cart-form table.shop_table { display: block !important; width: 100% !important; table-layout: auto !important; margin: 0 !important; } .serre-cart-content .woocommerce-cart-form table.shop_table thead { display: none !important; } .serre-cart-content .woocommerce-cart-form table.shop_table tbody { display: block !important; width: 100% !important; } /* ======================================================== SINGOLO PRODOTTO — MOBILE IN LINEA Sinistra: nome + varianti Destra: prezzo + quantità + totale ======================================================== */ .serre-cart-content .woocommerce-cart-form tr.woocommerce-cart-form__cart-item { display: grid !important; grid-template-columns: 28px minmax(0, 1fr) clamp(112px, 34vw, 132px); grid-template-areas: "remove name price" ". name quantity" ". name subtotal"; column-gap: 10px; row-gap: 5px; align-items: start; width: 100% !important; margin: 0 !important; padding: 18px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(35, 70, 60, .09) !important; box-sizing: border-box; } /* reset celle WooCommerce mobile */ .serre-cart-content .woocommerce-cart-form tr.woocommerce-cart-form__cart-item td { width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; float: none !important; border: 0 !important; box-sizing: border-box !important; } /* X RIMUOVI */ .serre-cart-content .woocommerce-cart-form td.product-remove { grid-area: remove; display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; padding: 2px 0 0 !important; } .serre-cart-content .woocommerce-cart-form td.product-remove::before { display: none !important; content: none !important; } .serre-cart-content a.remove { width: 28px !important; height: 28px !important; margin: 0 !important; font-size: 18px !important; } /* FOTO NASCOSTA SU MOBILE */ .serre-cart-content .woocommerce-cart-form td.product-thumbnail { display: none !important; } /* NOME + VARIAZIONI — COLONNA SINISTRA */ .serre-cart-content .woocommerce-cart-form td.product-name { grid-area: name; display: block !important; padding: 0 8px 0 0 !important; text-align: left !important; overflow-wrap: normal !important; word-break: normal !important; } .serre-cart-content .woocommerce-cart-form td.product-name::before { display: none !important; content: none !important; } .serre-cart-content .woocommerce-cart-form td.product-name > a { display: block !important; margin: 0 0 7px !important; color: #23463c !important; font-size: 17px !important; line-height: 1.15 !important; font-weight: 900 !important; text-align: left !important; } .serre-cart-content .woocommerce-cart-form .variation { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 4px; row-gap: 2px; margin: 0 !important; color: #777; font-size: 11px !important; line-height: 1.3 !important; } .serre-cart-content .woocommerce-cart-form .variation dt, .serre-cart-content .woocommerce-cart-form .variation dd { display: block !important; float: none !important; margin: 0 !important; padding: 0 !important; font-size: 11px !important; line-height: 1.3 !important; } .serre-cart-content .woocommerce-cart-form .variation dt { color: #23463c; font-weight: 800; } .serre-cart-content .woocommerce-cart-form .variation dd p { margin: 0 !important; padding: 0 !important; } /* PREZZO / QUANTITÀ / TOTALE — COLONNA DESTRA */ .serre-cart-content .woocommerce-cart-form td.product-price, .serre-cart-content .woocommerce-cart-form td.product-quantity, .serre-cart-content .woocommerce-cart-form td.product-subtotal { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px; width: 100% !important; min-width: 0 !important; min-height: 34px; padding: 3px 0 !important; border: 0 !important; text-align: right !important; } .serre-cart-content .woocommerce-cart-form td.product-price { grid-area: price; } .serre-cart-content .woocommerce-cart-form td.product-quantity { grid-area: quantity; } .serre-cart-content .woocommerce-cart-form td.product-subtotal { grid-area: subtotal; padding-top: 5px !important; border-top: 1px solid rgba(35, 70, 60, .08) !important; } /* etichette colonna destra */ .serre-cart-content .woocommerce-cart-form td.product-price::before { content: "Prezzo" !important; } .serre-cart-content .woocommerce-cart-form td.product-quantity::before { content: "Q.tà" !important; } .serre-cart-content .woocommerce-cart-form td.product-subtotal::before { content: "Totale" !important; } .serre-cart-content .woocommerce-cart-form td.product-price::before, .serre-cart-content .woocommerce-cart-form td.product-quantity::before, .serre-cart-content .woocommerce-cart-form td.product-subtotal::before { display: block !important; float: none !important; flex: 0 0 auto; width: auto !important; margin: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 9px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .035em; text-transform: uppercase; } /* importi */ .serre-cart-content .woocommerce-cart-form td.product-price .amount, .serre-cart-content .woocommerce-cart-form td.product-subtotal .amount { font-size: 14px !important; line-height: 1 !important; font-weight: 900 !important; white-space: nowrap !important; } /* quantità */ .serre-cart-content .woocommerce-cart-form td.product-quantity .quantity { display: flex !important; justify-content: flex-end !important; width: auto !important; margin: 0 !important; float: none !important; } .serre-cart-content .woocommerce-cart-form .quantity .qty { width: 48px !important; min-width: 48px !important; height: 34px !important; margin: 0 !important; padding: 0 4px !important; font-size: 13px !important; } /* ======================================================== RIGA COUPON / AGGIORNA ======================================================== */ .serre-cart-content .woocommerce-cart-form td.actions { display: block !important; width: 100% !important; padding: 20px 0 2px !important; box-sizing: border-box !important; text-align: left !important; } .serre-cart-content .woocommerce-cart-form td.actions::before { display: none !important; content: none !important; } .serre-cart-content .woocommerce-cart-form td.actions .coupon { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center !important; gap: 10px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; } .serre-cart-content .woocommerce-cart-form td.actions .coupon .input-text { width: 100% !important; min-width: 0 !important; max-width: none !important; height: 46px !important; margin: 0 !important; } .serre-cart-content .woocommerce-cart-form td.actions button[name="apply_coupon"] { width: auto !important; min-width: 140px !important; height: 46px !important; margin: 0 !important; float: none !important; } .serre-cart-content .woocommerce-cart-form td.actions button[name="update_cart"] { display: flex !important; width: 100% !important; min-width: 0 !important; height: 46px !important; margin: 12px 0 0 !important; float: none !important; } /* ======================================================== TOTALE ======================================================== */ .serre-cart-content .cart-collaterals { width: 100% !important; margin: 0 !important; } .serre-cart-content .cart-collaterals .cart_totals { width: 100% !important; padding: 22px 20px !important; border-radius: 24px !important; box-sizing: border-box; } .serre-cart-content .cart_totals h2 { font-size: 25px !important; margin-bottom: 16px !important; } .serre-cart-content .wc-proceed-to-checkout .checkout-button { min-height: 50px !important; font-size: 12px !important; } .serre-cart-checkout-note { margin-top: 12px !important; font-size: 11px !important; line-height: 1.4 !important; } } /* ============================================================ 02.06.18 SMARTPHONE STRETTO ============================================================ */ @media (max-width: 480px) { /* coupon uno sotto l'altro */ .serre-cart-content .woocommerce-cart-form td.actions .coupon { grid-template-columns: 1fr !important; } .serre-cart-content .woocommerce-cart-form td.actions button[name="apply_coupon"] { width: 100% !important; min-width: 0 !important; } /* prodotto ancora più compatto */ .serre-cart-content .woocommerce-cart-form tr.woocommerce-cart-form__cart-item { grid-template-columns: 26px minmax(0, 1fr) 108px; column-gap: 8px; } .serre-cart-content .woocommerce-cart-form td.product-name { padding-right: 5px !important; } .serre-cart-content .woocommerce-cart-form td.product-name > a { font-size: 16px !important; } .serre-cart-content .woocommerce-cart-form .variation, .serre-cart-content .woocommerce-cart-form .variation dt, .serre-cart-content .woocommerce-cart-form .variation dd { font-size: 11px !important; } .serre-cart-content .woocommerce-cart-form td.product-price::before, .serre-cart-content .woocommerce-cart-form td.product-quantity::before, .serre-cart-content .woocommerce-cart-form td.product-subtotal::before { font-size: 10px !important; } .serre-cart-content .woocommerce-cart-form td.product-price .amount, .serre-cart-content .woocommerce-cart-form td.product-subtotal .amount { font-size: 13px !important; } .serre-cart-content .woocommerce-cart-form .quantity .qty { width: 44px !important; min-width: 44px !important; height: 32px !important; } } /* ============================================================ TOUCH — NIENTE FRECCIA HOVER SUL PULSANTE CARRELLO Nota: riguarda il form biglietti del singolo evento. ============================================================ */ @media (hover: none) and (pointer: coarse) { .serre-single-ticket-form button.single_add_to_cart_button, .serre-single-ticket-form .button.single_add_to_cart_button { padding-right: 25px !important; } .serre-single-ticket-form button.single_add_to_cart_button::after, .serre-single-ticket-form .button.single_add_to_cart_button::after { display: none !important; } } /* ============================================================ 02.07 S.E.R.R.E. — POPUP AGGIUNTA AL CARRELLO ============================================================ */ body.serre-popup-open { overflow: hidden; } /* Overlay */ .serre-added-popup { position: fixed; z-index: 999999; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; animation: serrePopupFadeIn .25s ease both; } .serre-added-popup__backdrop { position: absolute; inset: 0; background: rgba(35, 70, 60, .30); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* Box */ .serre-added-popup__dialog { position: relative; z-index: 2; width: min(560px, 100%); padding: 42px 42px 36px; box-sizing: border-box; border-radius: 32px; background: #fffdf8; box-shadow: 0 25px 70px rgba(35, 70, 60, .20); text-align: center; animation: serrePopupIn .35s cubic-bezier(.22,.61,.36,1) both; } /* X */ .serre-added-popup__close { position: absolute; top: 18px; right: 18px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(35,70,60,.07); color: #23463c; font-family: Arial, sans-serif; font-size: 24px; line-height: 1; cursor: pointer; transition: background-color .25s ease, color .25s ease, transform .25s ease; } /* Ticket */ .serre-added-popup__icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin: 0 auto 20px; border-radius: 50%; background: rgba(237,114,26,.11); color: #ed721a; font-size: 27px; } /* Kicker */ .serre-added-popup__kicker { display: block; margin-bottom: 7px; color: #ed721a; font-family: "Nunito", sans-serif; font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: .12em; } /* Titolo */ .serre-added-popup__content h2 { margin: 0 0 11px !important; padding: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 34px !important; line-height: 1.05 !important; font-weight: 900 !important; } /* Testo */ .serre-added-popup__content p { max-width: 420px; margin: 0 auto !important; color: #686868; font-family: "Nunito", sans-serif; font-size: 15px; line-height: 1.55; } /* Pulsanti */ .serre-added-popup__actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; } .serre-added-popup__button { display: inline-flex !important; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 23px !important; box-sizing: border-box; border: 0 !important; border-radius: 999px; font-family: "Nunito", sans-serif !important; font-size: 11px !important; line-height: 1 !important; font-weight: 900 !important; text-transform: uppercase; text-decoration: none !important; cursor: pointer; transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease; } /* Continua */ .serre-added-popup__button--continue { background: #f3e9e2 !important; color: #23463c !important; } .serre-added-popup__button--continue span { color: #ed721a; font-family: Arial, sans-serif; font-size: 21px; transition: transform .25s ease; } /* Carrello */ .serre-added-popup__button--cart { background: #23463c !important; color: #ffffff !important; } .serre-added-popup__button--cart span { font-family: Arial, sans-serif; font-size: 20px; transition: transform .25s ease; } /* Hover */ @media (hover: hover) { .serre-added-popup__close:hover { background: rgba(237,114,26,.12); color: #ed721a; transform: rotate(90deg); } .serre-added-popup__button--continue:hover { background: #eadbd1 !important; transform: translateY(-2px); } .serre-added-popup__button--continue:hover span { transform: translateX(-3px); } .serre-added-popup__button--cart:hover { background: #1d3d34 !important; transform: translateY(-2px); box-shadow: 0 9px 20px rgba(35,70,60,.16); } .serre-added-popup__button--cart:hover span { transform: translateX(3px); } } /* Chiusura */ .serre-added-popup.is-closing { animation: serrePopupFadeOut .28s ease both; } .serre-added-popup.is-closing .serre-added-popup__dialog { animation: serrePopupOut .28s ease both; } /* Animazioni */ @keyframes serrePopupFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes serrePopupFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes serrePopupIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes serrePopupOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(12px) scale(.98); } } /* Smartphone */ @media (max-width: 600px) { .serre-added-popup { padding: 18px; } .serre-added-popup__dialog { padding: 38px 22px 25px; border-radius: 26px; } .serre-added-popup__icon { width: 58px; height: 58px; font-size: 23px; } .serre-added-popup__content h2 { font-size: 28px !important; } .serre-added-popup__actions { flex-direction: column-reverse; align-items: stretch; } .serre-added-popup__button { width: 100%; } } /* ============================================================ 02.08 S.E.R.R.E. — CHECKOUT / CONFERMA ============================================================ */ /* ------------------------------------------------------------ 02.08.01 Pagina / no sidebar ------------------------------------------------------------ */ body.woocommerce-checkout #sidebar { display: none !important; } body.woocommerce-checkout #left-area { width: 100% !important; padding-right: 0 !important; } body.woocommerce-checkout #main-content .container::before { display: none !important; } body.woocommerce-checkout #main-content { background: #f6eeeb; } .serre-checkout-page { background: #f6eeeb; } .serre-checkout-shell { width: min(92%, 1180px) !important; max-width: 1180px !important; margin: 0 auto !important; padding: 48px 0 78px !important; } /* ------------------------------------------------------------ 02.08.02 Testata / ritorno carrello ------------------------------------------------------------ */ .serre-checkout-topbar { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 38px; } .serre-checkout-context { display: flex; align-items: center; gap: 14px; min-width: 0; } .serre-checkout-back { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 15px; border-radius: 999px; background: rgba(255,255,255,.72); color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 11px !important; line-height: 1 !important; font-weight: 900 !important; text-decoration: none !important; box-shadow: 0 6px 18px rgba(35,70,60,.05); transition: transform .25s ease, background-color .25s ease; } .serre-checkout-back span { color: #ed721a; font-family: Arial, sans-serif; font-size: 21px; line-height: 1; transition: transform .25s ease; } .serre-checkout-kicker { color: #23463c; font-family: "Nunito", sans-serif; font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: .11em; } @media (hover:hover) { .serre-checkout-back:hover { background: #ffffff; transform: translateY(-1px); } .serre-checkout-back:hover span { transform: translateX(-3px); } } /* ------------------------------------------------------------ 02.08.03 Step prenotazione ------------------------------------------------------------ */ .serre-checkout-steps { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex: 0 0 auto; } .serre-checkout-step { display: inline-flex; align-items: center; gap: 6px; color: rgba(35,70,60,.48); font-family: "Nunito", sans-serif; font-size: 12px; line-height: 1; font-weight: 800; white-space: nowrap; } .serre-checkout-step b { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid rgba(35,70,60,.18); border-radius: 50%; background: rgba(255,255,255,.45); font-size: 10px; font-weight: 900; } .serre-checkout-step.is-complete { color: rgba(35,70,60,.72); } .serre-checkout-step.is-complete b { border-color: rgba(35,70,60,.18); background: rgba(35,70,60,.08); color: #23463c; } .serre-checkout-step.is-active { color: #ed721a; } .serre-checkout-step.is-active b { border-color: #ed721a; background: #ed721a; color: #fff; } .serre-checkout-step-line { display: block; width: 28px; height: 1px; background: rgba(35,70,60,.17); } /* ------------------------------------------------------------ 02.08.04 Titolo pagina ------------------------------------------------------------ */ .serre-checkout-heading { margin: 0; } .serre-checkout-eyebrow { display: block; margin-bottom: 9px; color: #ed721a; font-family: "Nunito", sans-serif; font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: .12em; } .serre-checkout-heading h1 { margin: 0 0 10px !important; padding: 0 !important; color: #ed721a !important; font-family: "Nunito", sans-serif !important; font-size: clamp(42px, 5vw, 62px) !important; line-height: .98 !important; font-weight: 900 !important; letter-spacing: -.035em; } .serre-checkout-heading p { max-width: 660px; margin: 0 !important; color: #676767; font-family: "Nunito", sans-serif; font-size: 16px; line-height: 1.55; } /* ------------------------------------------------------------ 02.08.05 Layout checkout desktop ------------------------------------------------------------ */ .serre-checkout-shell .woocommerce { width: 100%; } .serre-checkout-shell form.checkout.woocommerce-checkout { display: grid !important; grid-template-columns: minmax(0, 1fr) 390px; grid-template-areas: "customer review-title" "customer review"; align-items: start; gap: 0 26px; width: 100%; } .serre-checkout-shell #customer_details { grid-area: customer; display: block !important; width: 100% !important; margin: 0 !important; padding: 30px 32px 32px !important; box-sizing: border-box; border-radius: 28px; background: rgba(255,255,255,.84); box-shadow: 0 15px 40px rgba(35,70,60,.07); } .serre-checkout-shell #customer_details .col-1, .serre-checkout-shell #customer_details .col-2 { float: none !important; width: 100% !important; margin: 0 !important; } .serre-checkout-shell #customer_details .col-2:empty { display: none !important; } .serre-checkout-shell #order_review_heading { grid-area: review-title; width: 100% !important; margin: 0 !important; padding: 28px 28px 12px !important; box-sizing: border-box; border-radius: 28px 28px 0 0; background: rgba(255,255,255,.92); color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 25px !important; line-height: 1.1 !important; font-weight: 900 !important; box-shadow: 0 15px 40px rgba(35,70,60,.07); } .serre-checkout-shell #order_review { grid-area: review; width: 100% !important; margin: 0 !important; padding: 0 28px 28px !important; box-sizing: border-box; border-radius: 0 0 28px 28px; background: rgba(255,255,255,.92); box-shadow: 0 15px 40px rgba(35,70,60,.07); } /* ------------------------------------------------------------ 02.08.06 Titoli sezioni dati ------------------------------------------------------------ */ .serre-checkout-shell .woocommerce-billing-fields > h3, .serre-checkout-shell .woocommerce-shipping-fields > h3, .serre-checkout-shell .woocommerce-additional-fields > h3 { margin: 0 0 22px !important; padding: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 27px !important; line-height: 1.1 !important; font-weight: 900 !important; } .serre-checkout-shell .woocommerce-additional-fields, .serre-checkout-shell .woocommerce-shipping-fields { margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(35,70,60,.08); } /* Elimina solo la prima linea prima dei partecipanti */ .serre-checkout-shell .woocommerce-additional-fields { border-top: 0 !important; } /* ------------------------------------------------------------ 02.08.07 Campi form ------------------------------------------------------------ */ .serre-checkout-shell form.checkout .form-row { margin: 0 0 17px !important; padding: 0 !important; } .serre-checkout-shell form.checkout .form-row label { display: block; margin: 0 0 7px !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 900 !important; letter-spacing: .035em; text-transform: uppercase; } .serre-checkout-shell form.checkout .form-row .required { color: #ed721a !important; } .serre-checkout-shell form.checkout input.input-text, .serre-checkout-shell form.checkout input[type="email"], .serre-checkout-shell form.checkout input[type="tel"], .serre-checkout-shell form.checkout input[type="text"], .serre-checkout-shell form.checkout select, .serre-checkout-shell form.checkout textarea, .serre-checkout-shell .select2-container .select2-selection--single { width: 100% !important; min-height: 50px !important; margin: 0 !important; padding: 0 16px !important; box-sizing: border-box !important; border: 1.5px solid rgba(35,70,60,.17) !important; border-radius: 15px !important; background: #fffdf8 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 16px !important; font-weight: 600 !important; outline: none !important; box-shadow: none !important; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .serre-checkout-shell form.checkout textarea { min-height: 110px !important; padding-top: 14px !important; padding-bottom: 14px !important; resize: vertical; } .serre-checkout-shell .select2-container .select2-selection--single { display: flex !important; align-items: center; } .serre-checkout-shell .select2-container--default .select2-selection--single .select2-selection__rendered { width: 100%; padding: 0 28px 0 0 !important; color: #23463c !important; line-height: 1.2 !important; } .serre-checkout-shell .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50% !important; right: 12px !important; transform: translateY(-50%); } .serre-checkout-shell form.checkout input:focus, .serre-checkout-shell form.checkout textarea:focus, .serre-checkout-shell form.checkout select:focus, .serre-checkout-shell .select2-container--open .select2-selection--single { border-color: #ed721a !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(237,114,26,.08) !important; } .serre-checkout-shell form.checkout .woocommerce-invalid input.input-text, .serre-checkout-shell form.checkout .woocommerce-invalid select, .serre-checkout-shell form.checkout .woocommerce-invalid .select2-selection { border-color: #d64545 !important; } /* ------------------------------------------------------------ 02.08.08 Riepilogo prenotazione ------------------------------------------------------------ */ .serre-checkout-shell #order_review table.shop_table { width: 100% !important; margin: 0 0 18px !important; border: 0 !important; border-collapse: collapse !important; background: transparent !important; } .serre-checkout-shell #order_review table.shop_table th, .serre-checkout-shell #order_review table.shop_table td { padding: 13px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(35,70,60,.08) !important; color: #555 !important; font-family: "Nunito", sans-serif !important; font-size: 18px !important; line-height: 1.4 !important; vertical-align: top; } .serre-checkout-shell #order_review table.shop_table th { color: #23463c !important; font-weight: 900 !important; } .serre-checkout-shell #order_review .product-name { padding-right: 14px !important; color: #23463c !important; font-weight: 800 !important; } .serre-checkout-shell #order_review .product-total, .serre-checkout-shell #order_review tfoot td { text-align: right !important; white-space: nowrap; } .serre-checkout-shell #order_review .product-quantity { color: #888; font-weight: 700; } .serre-checkout-shell #order_review .variation { margin: 5px 0 0 !important; color: #777; font-size: 14px !important; line-height: 1.35; } .serre-checkout-shell #order_review .variation dt, .serre-checkout-shell #order_review .variation dd { margin: 0 3px 0 0 !important; } .serre-checkout-shell #order_review tr.order-total th, .serre-checkout-shell #order_review tr.order-total td { padding-top: 17px !important; border-bottom: 0 !important; color: #ed721a !important; font-size: 18px !important; font-weight: 900 !important; } .serre-checkout-shell #order_review tr.order-total .amount { color: #ed721a !important; font-weight: 900 !important; } .serre-checkout-shell #order_review small.includes_tax, .serre-checkout-shell #order_review .tax_label { display: block; margin-top: 3px; color: #8a8a8a !important; font-size: 14px !important; font-weight: 600 !important; } .serre-checkout-shell small.includes_tax, .serre-checkout-shell small.includes_tax .amount, .serre-checkout-shell small.includes_tax .woocommerce-Price-currencySymbol { font-size: 14px !important; } /* Totale principale */ .serre-checkout-shell .order-total > td > strong .amount { font-size: 24px !important; } /* IVA inclusa: 1,73 € più piccolo */ .serre-checkout-shell .order-total small.includes_tax, .serre-checkout-shell .order-total small.includes_tax .amount, .serre-checkout-shell .order-total small.includes_tax .woocommerce-Price-currencySymbol { font-size: 10px !important; line-height: 1.3 !important; font-weight: 600 !important; color: #8a8a8a !important; } /* ============================================================ S.E.R.R.E. — PARTECIPANTI / VARIAZIONI BIGLIETTO ============================================================ */ .fooevents-attendee .fooevents-variation-desc { display: inline-flex !important; align-items: center; margin: 0 8px 12px 0 !important; padding: 7px 12px; border-radius: 999px; background: #f6eeeb; color: #23463c; font-family: "Nunito", sans-serif; font-size: 12px; line-height: 1.2; font-weight: 600; vertical-align: middle; } .fooevents-attendee .fooevents-variation-desc p { margin: 0 !important; padding: 0 !important; } .fooevents-attendee .fooevents-variation-desc strong { color: #23463c; font-weight: 900; } h4.fooevents-attendee-number{ color:#ed721a !important } .fooevents-copy-from-purchaser{ color:#9e918d; } /* ============================================================ S.E.R.R.E. — CAMPI PARTECIPANTE 2x2 Desktop: NOME COGNOME EMAIL TELEFONO ============================================================ */ @media (min-width: 768px) { .serre-checkout-shell .fooevents-attendee { display: flex !important; flex-wrap: wrap !important; column-gap: 22px; row-gap: 0; width: 100%; } /* Titolo "Partecipante X" */ .serre-checkout-shell .fooevents-attendee > h4 { flex: 0 0 100% !important; width: 100% !important; } /* * Badge variazioni: * Persona / Giorni / Pranzo ecc. * Restano affiancati. */ .serre-checkout-shell .fooevents-attendee > .fooevents-variation-desc { flex: 0 0 auto !important; width: auto !important; } /* "Usa dati intestatario" su riga intera */ .serre-checkout-shell .fooevents-attendee > .fooevents-copy-from-purchaser { flex: 0 0 100% !important; width: 100% !important; } /* Campi FooEvents */ .serre-checkout-shell .fooevents-attendee > p.form-row, .serre-checkout-shell .fooevents-attendee > div.form-row { float: none !important; flex: 0 0 calc(50% - 11px) !important; width: calc(50% - 11px) !important; max-width: calc(50% - 11px) !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } /* Input sempre larghi quanto la loro colonna */ .serre-checkout-shell .fooevents-attendee input[type="text"], .serre-checkout-shell .fooevents-attendee input[type="email"], .serre-checkout-shell .fooevents-attendee input[type="tel"] { width: 100% !important; max-width: none !important; box-sizing: border-box; } } /* ============================================================ MOBILE — UN CAMPO PER RIGA ============================================================ */ @media (max-width: 767px) { .serre-checkout-shell .fooevents-attendee { display: block !important; width: 100% !important; } .serre-checkout-shell .fooevents-attendee > p.form-row, .serre-checkout-shell .fooevents-attendee > div.form-row { float: none !important; display: block !important; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } .serre-checkout-shell .fooevents-attendee input[type="text"], .serre-checkout-shell .fooevents-attendee input[type="email"], .serre-checkout-shell .fooevents-attendee input[type="tel"] { width: 100% !important; max-width: none !important; } } /* ------------------------------------------------------------ 02.08.09 Pagamento ------------------------------------------------------------ */ .serre-checkout-shell #payment { margin-top: 20px !important; border-radius: 20px !important; background: #f7efeb !important; } .serre-checkout-shell #payment ul.payment_methods { margin: 0 !important; padding: 18px !important; border: 0 !important; } .serre-checkout-shell #payment ul.payment_methods li { margin: 0 0 10px !important; color: #23463c !important; font-family: "Nunito", sans-serif; font-size: 16px; font-weight: 800; } .serre-checkout-shell #payment .payment_box { margin: 10px 0 0 !important; padding: 14px 15px !important; border-radius: 14px !important; background: #ffffff !important; color: #666 !important; font-family: "Nunito", sans-serif; font-size: 12px; line-height: 1.45; } .serre-checkout-shell #payment .payment_box::before { display: none !important; } .serre-checkout-shell #payment .place-order { margin: 0 !important; padding: 18px !important; } .serre-checkout-shell #payment .woocommerce-privacy-policy-text, .serre-checkout-shell #payment .woocommerce-terms-and-conditions-wrapper { color: #777; font-family: "Nunito", sans-serif; /*font-size: 11px;*/ line-height: 1.45; text-align: justify !important; } .serre-checkout-shell #payment a { color: #ed721a !important; font-weight: 800; } /* ------------------------------------------------------------ 02.08.10 Pulsante conferma ------------------------------------------------------------ */ .serre-checkout-shell #place_order { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 54px !important; margin: 14px 0 14px !important; padding: 0 48px 0 24px !important; border: 0 !important; border-radius: 999px !important; background: #EE7C2A !important; color: #ffffff !important; font-family: "Nunito", sans-serif !important; font-size: 15px !important; line-height: 1 !important; font-weight: 900 !important; text-transform: uppercase !important; box-shadow: none !important; transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease !important; } .serre-checkout-shell #place_order::after { content: "»" !important; position: absolute !important; top: 50% !important; right: 20px !important; left: auto !important; margin: 0 !important; color: #ffffff !important; font-family: Arial, sans-serif !important; font-size: 21px !important; line-height: 1 !important; opacity: 1 !important; transform: translateY(-50%) !important; transition: transform .25s ease !important; } .serre-checkout-note { margin: 12px 2px 0 !important; color: #7b7b7b; font-family: "Nunito", sans-serif; font-size: 12px; line-height: 1.45; text-align: center; } .woocommerce-checkout #payment ul.payment_methods li[class*="payment_method_xpay"] label img { width: auto; } @media (hover:hover) { .serre-checkout-shell #place_order:hover { background: #1d3d34 !important; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(35,70,60,.14) !important; } .serre-checkout-shell #place_order:hover::after { transform: translate(4px,-50%) !important; } } /* ------------------------------------------------------------ 02.08.11 Avvisi checkout ------------------------------------------------------------ */ .serre-checkout-shell .woocommerce-NoticeGroup, .serre-checkout-shell .woocommerce-notices-wrapper { grid-column: 1 / -1; width: 100%; } .serre-checkout-shell .woocommerce-error, .serre-checkout-shell .woocommerce-message, .serre-checkout-shell .woocommerce-info { margin: 0 0 22px !important; padding: 16px 18px 16px 48px !important; border: 0 !important; border-radius: 16px !important; background: #ffffff !important; color: #4f4f4f !important; font-family: "Nunito", sans-serif !important; font-size: 13px !important; line-height: 1.45 !important; box-shadow: 0 8px 24px rgba(35,70,60,.05); } .serre-checkout-shell .woocommerce-error { background: #fff1f0 !important; color: #8f2f2f !important; } .serre-checkout-shell .woocommerce-error::before { color: #d64545 !important; } .serre-checkout-shell .woocommerce-message::before, .serre-checkout-shell .woocommerce-info::before { color: #ed721a !important; } /* ------------------------------------------------------------ 02.08.12 Tablet ------------------------------------------------------------ */ @media (max-width: 980px) { .serre-checkout-shell { width: min(92%, 900px) !important; padding-top: 42px !important; } .serre-checkout-topbar { align-items: flex-start; } .serre-checkout-steps { gap: 7px; } .serre-checkout-step-line { width: 18px; } .serre-checkout-shell form.checkout.woocommerce-checkout { grid-template-columns: minmax(0, 1fr) 330px; gap: 0 20px; } .serre-checkout-shell #customer_details { padding: 26px 24px 28px !important; } .serre-checkout-shell #order_review_heading { padding: 24px 22px 10px !important; } .serre-checkout-shell #order_review { padding: 0 22px 22px !important; } } /* ------------------------------------------------------------ 02.08.13 Smartphone ------------------------------------------------------------ */ @media (max-width: 767px) { .serre-checkout-shell { width: calc(100% - 28px) !important; padding: 32px 0 58px !important; } .serre-checkout-topbar { display: block; margin-bottom: 24px; } .serre-checkout-context { gap: 10px 12px; } .serre-checkout-steps { justify-content: flex-start; margin-top: 18px; padding-bottom: 3px; overflow-x: auto; scrollbar-width: none; } .serre-checkout-steps::-webkit-scrollbar { display: none; } .serre-checkout-heading { margin-bottom: 24px; } .serre-checkout-heading h1 { font-size: clamp(36px, 12vw, 48px) !important; } .serre-checkout-heading p { font-size: 15px; } .serre-checkout-shell form.checkout.woocommerce-checkout { display: grid !important; grid-template-columns: 1fr; grid-template-areas: "customer" "review-title" "review"; gap: 18px; } .serre-checkout-shell #customer_details { padding: 24px 18px 26px !important; border-radius: 22px; } .serre-checkout-shell #order_review_heading { margin-bottom: -18px !important; padding: 24px 20px 12px !important; border-radius: 22px 22px 0 0; } .serre-checkout-shell #order_review { padding: 0 20px 22px !important; border-radius: 0 0 22px 22px; } .serre-checkout-shell .form-row-first, .serre-checkout-shell .form-row-last { float: none !important; width: 100% !important; } .serre-checkout-shell .woocommerce-billing-fields > h3, .serre-checkout-shell .woocommerce-shipping-fields > h3, .serre-checkout-shell .woocommerce-additional-fields > h3 { font-size: 24px !important; } } /* ------------------------------------------------------------ 02.08.14 Smartphone stretto ------------------------------------------------------------ */ @media (max-width: 480px) { .serre-checkout-step { font-size: 11px; } .serre-checkout-step-line { width: 12px; } .serre-checkout-back { min-height: 34px; padding: 0 12px; font-size: 10px !important; } .serre-checkout-shell #order_review table.shop_table th, .serre-checkout-shell #order_review table.shop_table td { font-size: 12px !important; } } /* ============================================================ 02.09 S.E.R.R.E. — ORDINE RICEVUTO ============================================================ */ /* ------------------------------------------------------------ 02.09.01 Testata conferma ------------------------------------------------------------ */ body.woocommerce-order-received .serre-checkout-topbar { margin-bottom: 28px; } body.woocommerce-order-received .serre-checkout-context { min-height: 38px; } .serre-checkout-heading--confirmation { max-width: 760px; margin: 0 auto 34px; text-align: center; } .serre-checkout-success-icon { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: rgba(35,70,60,.10); color: #23463c; font-family: Arial, sans-serif; font-size: 30px; line-height: 1; font-weight: 700; } .serre-checkout-heading--confirmation p { margin-left: auto !important; margin-right: auto !important; } /* ------------------------------------------------------------ 02.09.02 Contenitore ordine ------------------------------------------------------------ */ body.woocommerce-order-received .serre-checkout-shell .woocommerce { display: block !important; } body.woocommerce-order-received .serre-checkout-shell .woocommerce-order { width: min(100%, 860px); margin: 0 auto; } body.woocommerce-order-received .woocommerce-thankyou-order-received.woocommerce-notice--success { display: none !important; } /* ------------------------------------------------------------ 02.09.03 Riepilogo numero / data / totale ------------------------------------------------------------ */ body.woocommerce-order-received ul.woocommerce-order-overview { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; width: 100%; margin: 0 0 22px !important; padding: 0 !important; border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: 0 15px 40px rgba(35,70,60,.07); overflow: hidden; } body.woocommerce-order-received ul.woocommerce-order-overview li { float: none !important; width: auto !important; min-width: 0; margin: 0 !important; padding: 20px 18px !important; border-right: 1px solid rgba(35,70,60,.08) !important; color: #777 !important; font-family: "Nunito", sans-serif !important; font-size: 10px !important; line-height: 1.3 !important; font-weight: 800 !important; letter-spacing: .04em; text-transform: uppercase !important; } body.woocommerce-order-received ul.woocommerce-order-overview li:last-child { border-right: 0 !important; } body.woocommerce-order-received ul.woocommerce-order-overview li strong { display: block; margin-top: 6px; color: #23463c !important; font-size: 15px !important; line-height: 1.25 !important; font-weight: 900 !important; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; } body.woocommerce-order-received ul.woocommerce-order-overview li.woocommerce-order-overview__total strong { color: #ed721a !important; font-size: 18px !important; } /* ------------------------------------------------------------ 02.09.04 Dettagli ordine ------------------------------------------------------------ */ body.woocommerce-order-received .woocommerce-order-details, body.woocommerce-order-received .woocommerce-customer-details { width: 100%; margin: 0 0 22px !important; padding: 28px 30px !important; box-sizing: border-box; border-radius: 24px; background: rgba(255,255,255,.88); box-shadow: 0 15px 40px rgba(35,70,60,.07); } body.woocommerce-order-received .woocommerce-order-details__title, body.woocommerce-order-received .woocommerce-customer-details h2 { margin: 0 0 18px !important; padding: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 25px !important; line-height: 1.1 !important; font-weight: 900 !important; } body.woocommerce-order-received .woocommerce-order-details table.shop_table { width: 100% !important; margin: 0 !important; border: 0 !important; border-collapse: collapse !important; background: transparent !important; } body.woocommerce-order-received .woocommerce-order-details table.shop_table th, body.woocommerce-order-received .woocommerce-order-details table.shop_table td { padding: 13px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(35,70,60,.08) !important; color: #555 !important; font-family: "Nunito", sans-serif !important; font-size: 16px !important; line-height: 1.45 !important; } body.woocommerce-order-received .woocommerce-order-details table.shop_table th { color: #23463c !important; font-weight: 900 !important; } body.woocommerce-order-received .woocommerce-order-details table.shop_table td:last-child, body.woocommerce-order-received .woocommerce-order-details table.shop_table tfoot td { text-align: right !important; white-space: nowrap; } body.woocommerce-order-received .woocommerce-order-details table.shop_table tr:last-child th, body.woocommerce-order-received .woocommerce-order-details table.shop_table tr:last-child td { border-bottom: 0 !important; } body.woocommerce-order-received .woocommerce-order-details .wc-item-meta { margin: 5px 0 0 !important; padding: 0 !important; color: #777; font-size: 11px; line-height: 1.4; } body.woocommerce-order-received .woocommerce-order-details .wc-item-meta li { margin: 0 0 2px !important; } body.woocommerce-order-received .woocommerce-order-details .wc-item-meta p, body.woocommerce-order-received .woocommerce-order-details .wc-item-meta strong { display: inline; margin: 0 !important; } /* ------------------------------------------------------------ 02.09.05 Dati cliente ------------------------------------------------------------ */ body.woocommerce-order-received .woocommerce-customer-details address { margin: 0 !important; padding: 0 !important; border: 0 !important; color: #666 !important; font-family: "Nunito", sans-serif !important; font-size: 13px !important; line-height: 1.65 !important; } body.woocommerce-order-received .woocommerce-customer-details--phone, body.woocommerce-order-received .woocommerce-customer-details--email { margin: 8px 0 0 !important; padding-left: 0 !important; } body.woocommerce-order-received .woocommerce-customer-details--phone::before, body.woocommerce-order-received .woocommerce-customer-details--email::before { display: none !important; } /* ------------------------------------------------------------ 02.09.06 CTA ritorno eventi ------------------------------------------------------------ */ .serre-confirmation-actions { display: flex; justify-content: center; margin: 30px 0 0; } .serre-confirmation-events { display: inline-flex !important; align-items: center; justify-content: center; gap: 11px; min-height: 50px; padding: 0 24px !important; border-radius: 999px; background: #23463c; color: #ffffff !important; font-family: "Nunito", sans-serif !important; font-size: 11px !important; line-height: 1 !important; font-weight: 900 !important; text-decoration: none !important; transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease; } .serre-confirmation-events span { font-family: Arial, sans-serif; font-size: 20px; line-height: 1; transition: transform .25s ease; } @media (hover:hover) { .serre-confirmation-events:hover { background: #1d3d34; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(35,70,60,.14); } .serre-confirmation-events:hover span { transform: translateX(3px); } } /* ------------------------------------------------------------ 02.08.07.01 Layout compatto dati prenotazione ------------------------------------------------------------ */ .serre-checkout-shell .woocommerce-billing-fields__field-wrapper { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; row-gap: 0; } /* neutralizza il vecchio layout WooCommerce */ .serre-checkout-shell .woocommerce-billing-fields__field-wrapper .form-row { float: none !important; clear: none !important; width: 100% !important; max-width: none !important; box-sizing: border-box; } /* NOME + COGNOME */ .serre-checkout-shell #billing_first_name_field, .serre-checkout-shell #billing_last_name_field { grid-column: span 6; } /* CODICE FISCALE */ .serre-checkout-shell #billing_codice_fiscale_field { grid-column: 1 / -1; } /* PAESE */ .serre-checkout-shell #billing_country_field { grid-column: 1 / -1; } /* CAP | CITTÀ | PROVINCIA */ .serre-checkout-shell #billing_postcode_field { order: 40; grid-column: span 3; } .serre-checkout-shell #billing_city_field { order: 50; grid-column: span 6; } .serre-checkout-shell #billing_state_field { order: 60; grid-column: span 3; } /* VIA */ .serre-checkout-shell #billing_address_1_field { grid-column: 1 / -1; } /* TELEFONO + EMAIL */ .serre-checkout-shell #billing_phone_field { grid-column: span 5; } .serre-checkout-shell #billing_email_field { grid-column: span 7; } /* ------------------------------------------------------------ Tablet / smartphone ------------------------------------------------------------ */ @media (max-width: 767px) { .serre-checkout-shell .woocommerce-billing-fields__field-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; } /* Campi a tutta larghezza */ .serre-checkout-shell #billing_first_name_field, .serre-checkout-shell #billing_last_name_field, .serre-checkout-shell #billing_codice_fiscale_field, .serre-checkout-shell #billing_postcode_field, .serre-checkout-shell #billing_city_field, .serre-checkout-shell #billing_state_field, .serre-checkout-shell #billing_address_1_field, .serre-checkout-shell #billing_country_field, .serre-checkout-shell #billing_phone_field, .serre-checkout-shell #billing_email_field { grid-column: 1 / -1; } /* Ordine: CAP → Città → Provincia */ .serre-checkout-shell #billing_postcode_field { order: 40; } .serre-checkout-shell #billing_city_field { order: 50; } .serre-checkout-shell #billing_state_field { order: 60; } } /* ============================================================ 02.08.xx CODICE FISCALE — FEEDBACK VALIDAZIONE ============================================================ */ .serre-checkout-shell #billing_codice_fiscale { text-transform: uppercase; } .serre-checkout-shell #billing_codice_fiscale_field .description { display: none !important; } .serre-checkout-shell .serre-cf-feedback { display: block; margin: 7px 2px 0; font-family: "Nunito", sans-serif; font-size: 11px; line-height: 1.4; font-weight: 800; } .serre-checkout-shell .serre-cf-valid #billing_codice_fiscale { border-color: #478766 !important; box-shadow: 0 0 0 3px rgba(71,135,102,.08) !important; } .serre-checkout-shell .serre-cf-valid .serre-cf-feedback { color: #478766; } .serre-checkout-shell .serre-cf-invalid #billing_codice_fiscale { border-color: #c95050 !important; box-shadow: 0 0 0 3px rgba(201,80,80,.08) !important; } .serre-checkout-shell .serre-cf-invalid .serre-cf-feedback { color: #a83d3d; } /* ============================================================ 02.08.15 FIX COUPON + COLONNA RIEPILOGO/PAGAMENTO ============================================================ */ /* ------------------------------------------------------------ COUPON ------------------------------------------------------------ */ .serre-checkout-shell .woocommerce-form-coupon-toggle { width: 100%; margin: 0 0 28px !important; } .serre-checkout-shell .woocommerce-form-coupon-toggle .woocommerce-info { display: flex !important; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; width: 100%; min-height: 58px; margin: 0 !important; padding: 14px 22px !important; border: 0 !important; border-radius: 18px !important; background: rgba(255,255,255,.88) !important; color: #666 !important; font-family: "Nunito", sans-serif !important; font-size: 14px !important; line-height: 1.35 !important; font-weight: 600 !important; text-align: center; box-shadow: 0 8px 24px rgba(35,70,60,.035); } /* toglie icona standard Woo */ .serre-checkout-shell .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none !important; } /* link apri coupon */ .serre-checkout-shell .woocommerce-form-coupon-toggle .showcoupon { display: inline-flex !important; align-items: center; color: #ed721a !important; font-weight: 900 !important; text-decoration: none !important; } /* piccola freccia */ .serre-checkout-shell .woocommerce-form-coupon-toggle .showcoupon::after { content: "⌄"; display: inline-block; margin-left: 5px; font-size: 14px; line-height: 1; transform: translateY(-1px); } /* form coupon aperto */ .serre-checkout-shell form.checkout_coupon { display: flex; align-items: center; gap: 12px; width: 100%; margin: -12px 0 28px !important; padding: 18px !important; border: 0 !important; border-radius: 18px !important; background: rgba(255,255,255,.88); box-shadow: 0 8px 24px rgba(35,70,60,.035); } /* colonne Woo del coupon */ .serre-checkout-shell form.checkout_coupon .form-row { float: none !important; width: auto !important; margin: 0 !important; } .serre-checkout-shell form.checkout_coupon .form-row-first { flex: 1 1 auto; } .serre-checkout-shell form.checkout_coupon .form-row-last { flex: 0 0 auto; } /* input coupon */ .serre-checkout-shell form.checkout_coupon input.input-text { width: 100% !important; min-height: 46px !important; padding: 0 15px !important; border: 1.5px solid rgba(35,70,60,.16) !important; border-radius: 14px !important; background: #fffdf8 !important; font-family: "Nunito", sans-serif !important; } /* pulsante coupon */ .serre-checkout-shell form.checkout_coupon button.button { min-height: 46px !important; padding: 0 20px !important; border: 0 !important; border-radius: 999px !important; background: #23463c !important; color: #fff !important; font-family: "Nunito", sans-serif !important; font-size: 11px !important; font-weight: 900 !important; text-transform: uppercase; } /* ============================================================ FIX COLONNA DESTRA evita il grande spazio vuoto prima del riepilogo ============================================================ */ @media (min-width: 981px) { .serre-checkout-shell form.checkout.woocommerce-checkout { display: grid !important; grid-template-columns: minmax(0, 1fr) 390px; grid-template-areas: none !important; grid-template-rows: auto !important; align-items: start !important; gap: 26px !important; } /* DATI */ .serre-checkout-shell #customer_details { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: start !important; } /* * Nascondiamo il titolo Woo separato: * è lui che crea la seconda riga problematica. */ .serre-checkout-shell #order_review_heading { display: none !important; } /* RIEPILOGO + PAGAMENTO diventano un unico box */ .serre-checkout-shell #order_review { grid-column: 2 !important; grid-row: 1 !important; position: relative; width: 100% !important; margin: 0 !important; padding: 82px 28px 28px !important; border-radius: 28px !important; background: rgba(255,255,255,.92) !important; box-shadow: 0 15px 40px rgba(35,70,60,.07); overflow: visible !important; align-self: start !important; } /* ricreiamo "La tua prenotazione" dentro lo stesso box */ .serre-checkout-shell #order_review::before { content: "La tua prenotazione"; position: absolute; top: 28px; left: 28px; right: 28px; color: #23463c; font-family: "Nunito", sans-serif; font-size: 25px; line-height: 1.1; font-weight: 900; } /* il pagamento non deve essere tagliato */ .serre-checkout-shell #payment { width: 100% !important; max-height: none !important; overflow: visible !important; } .serre-checkout-shell #payment .payment_methods, .serre-checkout-shell #payment .payment_box, .serre-checkout-shell #payment .place-order { max-height: none !important; overflow: visible !important; } } /* ------------------------------------------------------------ TABLET ------------------------------------------------------------ */ @media (min-width: 768px) and (max-width: 980px) { .serre-checkout-shell form.checkout.woocommerce-checkout { grid-template-columns: minmax(0,1fr) 330px !important; grid-template-areas: none !important; gap: 20px !important; } .serre-checkout-shell #customer_details { grid-column: 1 !important; grid-row: 1 !important; } .serre-checkout-shell #order_review_heading { display: none !important; } .serre-checkout-shell #order_review { grid-column: 2 !important; grid-row: 1 !important; position: relative; padding: 76px 22px 22px !important; border-radius: 24px !important; overflow: visible !important; } .serre-checkout-shell #order_review::before { content: "La tua prenotazione"; position: absolute; top: 24px; left: 22px; color: #23463c; font-family: "Nunito", sans-serif; font-size: 23px; font-weight: 900; } } /* ------------------------------------------------------------ MOBILE COUPON ------------------------------------------------------------ */ @media (max-width: 767px) { .serre-checkout-shell .woocommerce-form-coupon-toggle .woocommerce-info { justify-content: flex-start; min-height: 0; padding: 15px 17px !important; text-align: left; } .serre-checkout-shell form.checkout_coupon { flex-direction: column; align-items: stretch; } .serre-checkout-shell form.checkout_coupon .form-row { width: 100% !important; } .serre-checkout-shell form.checkout_coupon button.button { width: 100% !important; } } /* ============================================================ 02.08.16 RIEPILOGO / PAGAMENTO STICKY DESKTOP ============================================================ */ @media (min-width: 981px) { .serre-checkout-shell form.checkout.woocommerce-checkout { align-items: start !important; overflow: visible !important; } .serre-checkout-shell #order_review { position: sticky !important; top: 50px !important; align-self: start !important; max-height: calc(100vh - 56px); overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: thin; } } /* ============================================================ 02.08.17 AVVISO DATI DI FATTURAZIONE ============================================================ */ .serre-checkout-fiscal-notice { display: flex; align-items: center; gap: 18px; width: 100%; margin: 0 0 20px; padding: 20px 24px; box-sizing: border-box; border-radius: 18px; background: #fff7e8; color: #6f512b; font-family: "Nunito", sans-serif; box-shadow: 0 8px 24px rgba(35,70,60,.035); } .serre-checkout-fiscal-notice__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border: 2px solid #b47627; border-radius: 50%; color: #b47627; font-size: 19px; line-height: 1; font-weight: 900; } .serre-checkout-fiscal-notice__text { min-width: 0; } .serre-checkout-fiscal-notice__text strong { display: block; margin: 0 0 3px; color: #7c5421; font-size: 14px; line-height: 1.35; font-weight: 900; } .serre-checkout-fiscal-notice__text p { margin: 0 !important; color: #735832; font-size: 13px; line-height: 1.55; font-weight: 600; } /* MOBILE */ @media (max-width: 767px) { .serre-checkout-fiscal-notice { align-items: flex-start; gap: 13px; padding: 17px 16px; border-radius: 16px; } .serre-checkout-fiscal-notice__icon { width: 30px; height: 30px; font-size: 16px; } .serre-checkout-fiscal-notice__text strong { font-size: 13px; } .serre-checkout-fiscal-notice__text p { font-size: 12px; } } /* ------------------------------------------------------------ 02.09.07 Mobile conferma ------------------------------------------------------------ */ @media (max-width: 767px) { .serre-checkout-heading--confirmation { margin-bottom: 26px; } .serre-checkout-success-icon { width: 62px; height: 62px; margin-bottom: 17px; font-size: 27px; } body.woocommerce-order-received ul.woocommerce-order-overview { grid-template-columns: repeat(2, minmax(0,1fr)); border-radius: 20px; } body.woocommerce-order-received ul.woocommerce-order-overview li { border-bottom: 1px solid rgba(35,70,60,.08) !important; } body.woocommerce-order-received ul.woocommerce-order-overview li:nth-child(2n) { border-right: 0 !important; } body.woocommerce-order-received ul.woocommerce-order-overview li:nth-last-child(-n+2) { border-bottom: 0 !important; } body.woocommerce-order-received .woocommerce-order-details, body.woocommerce-order-received .woocommerce-customer-details { padding: 24px 20px !important; border-radius: 20px; } } @media (max-width: 480px) { body.woocommerce-order-received ul.woocommerce-order-overview { grid-template-columns: 1fr; } body.woocommerce-order-received ul.woocommerce-order-overview li { border-right: 0 !important; border-bottom: 1px solid rgba(35,70,60,.08) !important; } body.woocommerce-order-received ul.woocommerce-order-overview li:last-child { border-bottom: 0 !important; } .serre-confirmation-events { width: 100%; } } /* ============================================================ 02.08.18 CHECKOUT — ORDINE CAMPI + SELECT S.E.R.R.E. ============================================================ */ /* ------------------------------------------------------------ 02.08.18.01 Griglia dati di prenotazione — desktop Ordine visivo forzato anche se WooCommerce aggiorna i campi. ------------------------------------------------------------ */ @media (min-width: 768px) { .serre-checkout-shell .woocommerce-billing-fields__field-wrapper { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 18px; row-gap: 0; } .serre-checkout-shell .woocommerce-billing-fields__field-wrapper > .form-row { width: auto !important; float: none !important; clear: none !important; min-width: 0; } /* COGNOME | NOME */ .serre-checkout-shell #billing_last_name_field { order: 10; grid-column: span 6; } .serre-checkout-shell #billing_first_name_field { order: 20; grid-column: span 6; } /* CODICE FISCALE */ .serre-checkout-shell #billing_codice_fiscale_field { order: 30; grid-column: 1 / -1; } /* CAP | CITTÀ | PROVINCIA */ .serre-checkout-shell #billing_postcode_field { order: 40; grid-column: span 3; } .serre-checkout-shell #billing_city_field { order: 50; grid-column: span 6; } .serre-checkout-shell #billing_state_field { order: 60; grid-column: span 3; } /* VIA E NUMERO */ .serre-checkout-shell #billing_address_1_field { order: 70; grid-column: 1 / -1; } /* PAESE/REGIONE — SEMPRE DOPO CITTÀ/PROVINCIA/CAP E VIA */ .serre-checkout-shell #billing_country_field { order: 80; grid-column: 1 / -1; } /* TELEFONO | EMAIL */ .serre-checkout-shell #billing_phone_field { order: 90; grid-column: span 5; } .serre-checkout-shell #billing_email_field { order: 100; grid-column: span 7; } } /* ------------------------------------------------------------ 02.08.18.02 Smartphone ------------------------------------------------------------ */ @media (max-width: 767px) { .serre-checkout-shell .woocommerce-billing-fields__field-wrapper { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 0; } .serre-checkout-shell .woocommerce-billing-fields__field-wrapper > .form-row { width: auto !important; float: none !important; clear: none !important; grid-column: 1 / -1; } .serre-checkout-shell #billing_last_name_field { order: 10; } .serre-checkout-shell #billing_first_name_field { order: 20; } .serre-checkout-shell #billing_codice_fiscale_field { order: 30; } .serre-checkout-shell #billing_postcode_field { order: 40; grid-column: 1 / -1; } .serre-checkout-shell #billing_city_field { order: 50; grid-column: 1 / -1; } .serre-checkout-shell #billing_state_field { order: 60; grid-column: 1 / -1; } .serre-checkout-shell #billing_address_1_field { order: 70; } .serre-checkout-shell #billing_country_field { order: 80; } .serre-checkout-shell #billing_phone_field { order: 90; } .serre-checkout-shell #billing_email_field { order: 100; } } /* ------------------------------------------------------------ 02.08.18.03 Select nativi — campo chiuso ------------------------------------------------------------ */ .serre-checkout-shell form.checkout select { min-height: 50px !important; padding: 0 44px 0 16px !important; border: 1.5px solid rgba(35, 70, 60, .20) !important; border-radius: 16px !important; background-color: #fffdf8 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; box-shadow: none !important; outline: none !important; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .serre-checkout-shell form.checkout select:hover { border-color: rgba(35, 70, 60, .38) !important; } .serre-checkout-shell form.checkout select:focus { border-color: #ed721a !important; background-color: #ffffff !important; box-shadow: 0 0 0 4px rgba(237, 114, 26, .10) !important; } .serre-checkout-shell form.checkout select option { background: #fffdf8; color: #23463c; } /* ------------------------------------------------------------ 02.08.18.04 SelectWoo / Select2 — campo chiuso ------------------------------------------------------------ */ .serre-checkout-shell .select2-container { width: 100% !important; } .serre-checkout-shell .select2-container--default .select2-selection--single { display: flex !important; align-items: center !important; width: 100% !important; height: 50px !important; min-height: 50px !important; padding: 0 44px 0 16px !important; border: 1.5px solid rgba(35, 70, 60, .20) !important; border-radius: 16px !important; background: #fffdf8 !important; box-shadow: none !important; outline: none !important; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .serre-checkout-shell .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 700 !important; } .serre-checkout-shell .select2-container--default .select2-selection--single .select2-selection__placeholder { color: rgba(35, 70, 60, .55) !important; } .serre-checkout-shell .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50% !important; right: 14px !important; width: 24px !important; height: 24px !important; transform: translateY(-50%); } .serre-checkout-shell .select2-container--open .select2-selection--single { border-color: #ed721a !important; background: #ffffff !important; box-shadow: 0 0 0 4px rgba(237, 114, 26, .10) !important; } /* ------------------------------------------------------------ 02.08.18.05 SelectWoo / Select2 — menu aperto Il dropdown viene aggiunto direttamente al body, quindi non può essere selezionato come figlio di .serre-checkout-shell. ------------------------------------------------------------ */ body.woocommerce-checkout .select2-container--open .select2-dropdown { margin-top: 7px !important; overflow: hidden !important; border: 1.5px solid rgba(35, 70, 60, .18) !important; border-radius: 16px !important; background: #fffdf8 !important; box-shadow: 0 16px 38px rgba(35, 70, 60, .14) !important; } body.woocommerce-checkout .select2-container--open .select2-search--dropdown { padding: 10px !important; background: #fffdf8 !important; } body.woocommerce-checkout .select2-container--open .select2-search__field { height: 40px !important; padding: 0 12px !important; border: 1.5px solid rgba(35, 70, 60, .18) !important; border-radius: 11px !important; background: #ffffff !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 14px !important; outline: none !important; box-shadow: none !important; } body.woocommerce-checkout .select2-container--open .select2-search__field:focus { border-color: #ed721a !important; box-shadow: 0 0 0 3px rgba(237, 114, 26, .08) !important; } body.woocommerce-checkout .select2-container--open .select2-results__options { max-height: 265px !important; } body.woocommerce-checkout .select2-container--open .select2-results__option { padding: 11px 14px !important; background: #fffdf8 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 14px !important; line-height: 1.3 !important; font-weight: 700 !important; } body.woocommerce-checkout .select2-container--open .select2-results__option[aria-selected="true"], body.woocommerce-checkout .select2-container--open .select2-results__option--selected { background: #f6eeeb !important; color: #23463c !important; } body.woocommerce-checkout .select2-container--open .select2-results__option--highlighted[aria-selected], body.woocommerce-checkout .select2-container--open .select2-results__option--highlighted.select2-results__option--selectable { background: #ed721a !important; color: #ffffff !important; } /* ------------------------------------------------------------ 02.08.18.06 Telefono — obbligatorio ------------------------------------------------------------ */ /* Elimina eventuale dicitura "(facoltativo)" */ .serre-checkout-shell #billing_phone_field .optional { display: none !important; } /* Evita un eventuale doppio asterisco WooCommerce */ .serre-checkout-shell #billing_phone_field label .required { display: none !important; } /* Asterisco obbligatorio */ .serre-checkout-shell #billing_phone_field label::after { content: " *"; color: #ed721a; font-weight: 900; } /* ============================================================ 02.08.19 S.E.R.R.E. — CAP / COMUNE / EMAIL ============================================================ */ /* ------------------------------------------------------------ 02.08.19.01 Telefono obbligatorio — asterisco coerente ------------------------------------------------------------ */ /* ------------------------------------------------------------ 02.08.19.02 Nessuna descrizione fissa sotto il CF ------------------------------------------------------------ */ /* ------------------------------------------------------------ 02.08.19.03 Feedback CAP / Comune ------------------------------------------------------------ */ .serre-checkout-shell .serre-geo-feedback { display: block ruby !important; min-height: 0; margin: 7px 2px 0; color: #777; font-family: "Nunito", sans-serif; font-size: 11px; line-height: 1.4; font-weight: 700; } .serre-checkout-shell .serre-geo-feedback:empty { display: none; } .serre-checkout-shell .serre-geo-feedback.is-ok { color: #478766; } .serre-checkout-shell .serre-geo-feedback.is-error { color: #a83d3d; } .serre-checkout-shell .serre-geo-feedback.is-loading { color: #8a6a42; } /* ------------------------------------------------------------ 02.08.19.04 Suggerimenti Comune generati da CAP / digitazione ------------------------------------------------------------ */ .serre-checkout-shell #billing_city_field, .serre-checkout-shell #billing_postcode_field { position: relative; } .serre-checkout-shell .serre-geo-choices { position: absolute; z-index: 9999; top: calc(100% - 8px); left: 0; right: 0; display: flex; flex-direction: column; gap: 0; max-height: 270px; margin: 0; padding: 7px; overflow-y: auto; border: 1.5px solid rgba(35,70,60,.16); border-radius: 16px; background: #fffdf8; box-shadow: 0 16px 38px rgba(35,70,60,.14); } .serre-checkout-shell .serre-geo-choice { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 44px; margin: 0 !important; padding: 9px 12px !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 14px !important; line-height: 1.25 !important; font-weight: 800 !important; text-align: left; cursor: pointer; box-shadow: none !important; } .serre-checkout-shell .serre-geo-choice small { flex: 0 0 auto; color: #8a8a8a; font-size: 10px; line-height: 1.2; font-weight: 800; white-space: nowrap; } @media (hover:hover) { .serre-checkout-shell .serre-geo-choice:hover { background: #ed721a !important; color: #ffffff !important; } .serre-checkout-shell .serre-geo-choice:hover small { color: rgba(255,255,255,.82); } } .serre-checkout-shell .serre-geo-choice:focus-visible { outline: 2px solid #ed721a; outline-offset: 1px; } /* ------------------------------------------------------------ 02.08.19.05 Email — feedback validazione ------------------------------------------------------------ */ .serre-checkout-shell .serre-email-feedback { display: block; margin: 7px 2px 0; font-family: "Nunito", sans-serif; font-size: 11px; line-height: 1.4; font-weight: 800; } .serre-checkout-shell .serre-email-feedback:empty { display: none; } .serre-checkout-shell .serre-email-valid #billing_email { border-color: #478766 !important; box-shadow: 0 0 0 3px rgba(71,135,102,.08) !important; } .serre-checkout-shell .serre-email-valid .serre-email-feedback { color: #478766; } .serre-checkout-shell .serre-email-invalid #billing_email { border-color: #c95050 !important; box-shadow: 0 0 0 3px rgba(201,80,80,.08) !important; } .serre-checkout-shell .serre-email-invalid .serre-email-feedback { color: #a83d3d; } /* ------------------------------------------------------------ 02.08.19.06 Smartphone ------------------------------------------------------------ */ @media (max-width: 767px) { .serre-checkout-shell .serre-geo-choices { top: calc(100% - 6px); max-height: 235px; border-radius: 14px; } .serre-checkout-shell .serre-geo-choice { min-height: 42px; font-size: 13px !important; } } /* ========================================= S.E.R.R.E. — EVENTI PASSATI ========================================= */ /* La ROW non deve tagliare l'ombra */ .serre-eventi-passati-scroll { overflow: visible !important; } /* ========================================================= DESKTOP — 3 EVENTI ========================================================= */ .serre-eventi-passati-scroll > .et_pb_column { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow: visible !important; gap: 20px; scroll-snap-type: x proximity; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; } /* Singolo elemento generato dal Loop */ .serre-eventi-passati-scroll .serre-eventi-grid { flex: 0 0 calc((100% - 40px) / 3) !important; min-width: 0; overflow: visible !important; scroll-snap-align: start; } /* La card non deve ritagliare la propria ombra */ .serre-eventi-passati-scroll .serre-evento-card { overflow: visible !important; } /* ========================================================= COLORI EVENTI PASSATI ========================================================= */ /* Badge data */ .serre-eventi-passati-scroll .serre-evento-badge { background: #118f3b !important; } /* Titolo */ .serre-eventi-passati-scroll .serre-evento-title h1, .serre-eventi-passati-scroll .serre-evento-title h2, .serre-eventi-passati-scroll .serre-evento-title h3, .serre-eventi-passati-scroll .serre-evento-title h4, .serre-eventi-passati-scroll .serre-evento-title h5, .serre-eventi-passati-scroll .serre-evento-title h6 { color: #118f3b !important; } /* Icone orario / prezzo */ .serre-eventi-passati-scroll .serre-evento-meta-item i { color: #118f3b !important; } /* ========================================================= TABLET — 2 EVENTI ========================================================= */ @media (max-width: 980px) { .serre-eventi-passati-scroll .serre-eventi-grid { flex-basis: calc((100% - 20px) / 2) !important; } } /* ========================================================= SMARTPHONE — UNA CARD, LEGGERMENTE PIÙ PICCOLA ========================================================= */ @media (max-width: 767px) { .serre-eventi-passati-scroll > .et_pb_column { flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; gap: 18px; width: 100% !important; padding: 20px 18px 28px !important; scroll-snap-type: none; overscroll-behavior-inline: auto; } .serre-eventi-passati-scroll .serre-eventi-grid { flex: 0 0 auto !important; width: 100% !important; max-width: 94% !important; min-width: 0 !important; scroll-snap-align: none; } } /* ========================================= S.E.R.R.E. — ANIMAZIONE PULSANTE EVENTO ========================================= */ .serre-evento-arrow { transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease !important; will-change: transform; } /* Icona interna */ .serre-evento-arrow .et-pb-icon { display: inline-block; transition: transform .35s cubic-bezier(.2,.7,.3,1) !important; } /* HOVER */ @media (hover: hover) { .serre-evento-arrow:hover { transform: translateX(6px) scale(1.05) !important; box-shadow: 0 8px 20px rgba(0,0,0,.14); } .serre-evento-arrow:hover .et-pb-icon { transform: translateX(4px) !important; } } /* CLICK */ .serre-evento-arrow:active { transform: translateX(4px) scale(.96) !important; } @media (hover: hover) { .serre-evento-card:hover .serre-evento-arrow { transform: translateX(6px) scale(1.05) !important; } .serre-evento-card:hover .serre-evento-arrow .et-pb-icon { transform: translateX(4px) !important; } } /* ========================================================= 02.04.10 TOUCH niente hover bloccato ========================================================= */ @media (hover: none) and (pointer: coarse) { .serre-card:hover, .serre-card:active { transform: none !important; box-shadow: none !important; } .serre-card:hover .et_pb_heading, .serre-card:active .et_pb_heading { transform: none !important; } } /* ========================================================= 02.04.11 FOCUS ========================================================= */ .serre-card:focus-within { transform: translateY(-4px); box-shadow: 0 16px 35px rgba(20,50,30,.12); } .serre-card a:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; } /* ============================================================ 02.09 — S.E.R.R.E. / PAGINA PRENOTAZIONE RICEVUTA WooCommerce order-received ============================================================ */ /* ------------------------------------------------------------ 02.09.01 Testata conclusiva ------------------------------------------------------------ */ body.woocommerce-order-received .serre-checkout-heading--confirmation { max-width: 760px; margin: 34px auto 0 !important; text-align: center; } body.woocommerce-order-received .serre-checkout-success-icon { display: flex !important; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 22px !important; border-radius: 50%; background: rgba(35, 70, 60, .10); color: #23463c; font-size: 34px; line-height: 1; font-weight: 900; } body.woocommerce-order-received .serre-checkout-heading--confirmation h1 { margin: 0 0 13px !important; color: #ed721a !important; font-family: "Nunito", sans-serif !important; font-size: clamp(38px, 5vw, 58px) !important; line-height: 1 !important; font-weight: 900 !important; } body.woocommerce-order-received .serre-checkout-heading--confirmation p { width: 100% !important; margin: 0 auto !important; color: #696969 !important; font-size: 16px !important; line-height: 1.55 !important; } /* ------------------------------------------------------------ 02.09.02 Contenitore generale WooCommerce ------------------------------------------------------------ */ body.woocommerce-order-received .serre-thankyou { width: 100%; } body.woocommerce-order-received .serre-thankyou > * { box-sizing: border-box; } /* ------------------------------------------------------------ 02.09.03 Riepilogo iniziale Prenotazione / Data / Email / Totale / Pagamento ------------------------------------------------------------ */ body.woocommerce-order-received .serre-thankyou-overview { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100% !important; margin: 0 0 22px !important; padding: 0 !important; border: 0 !important; border-radius: 24px; background: #fff !important; box-shadow: 0 14px 40px rgba(35, 70, 60, .065); list-style: none !important; overflow: hidden; } body.woocommerce-order-received .serre-thankyou-overview li { display: flex !important; flex-direction: column; justify-content: center; min-width: 0; margin: 0 !important; padding: 21px 20px !important; border: 0 !important; border-right: 1px solid rgba(35, 70, 60, .08) !important; color: #818181 !important; font-family: "Nunito", sans-serif !important; font-size: 10px !important; line-height: 1.2 !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .04em; } body.woocommerce-order-received .serre-thankyou-overview li:last-child { border-right: 0 !important; } body.woocommerce-order-received .serre-thankyou-overview li strong { display: block; min-width: 0; margin-top: 7px; color: #23463c !important; font-size: 15px !important; line-height: 1.25 !important; font-weight: 900 !important; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; } body.woocommerce-order-received .serre-thankyou-overview .woocommerce-order-overview__total strong { color: #ed721a !important; font-size: 18px !important; } /* ------------------------------------------------------------ 02.09.04 Stato pagamento ------------------------------------------------------------ */ body.woocommerce-order-received .serre-thankyou-payment-state { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin: 0 0 20px !important; padding: 15px 18px !important; border-radius: 15px; background: rgba(35, 70, 60, .055); color: #666; font-family: "Nunito", sans-serif; font-size: 13px; line-height: 1.45; } body.woocommerce-order-received .serre-thankyou-payment-state strong { color: #23463c; font-weight: 900; } body.woocommerce-order-received .serre-thankyou-payment-state.is-paid { background: rgba(44, 132, 83, .08); } body.woocommerce-order-received .serre-thankyou-payment-state.is-pending { background: rgba(237, 114, 26, .08); } body.woocommerce-order-received .serre-thankyou-payment-state.is-pending strong { color: #ed721a; } /* ------------------------------------------------------------ 02.09.05 Bonifico bancario ------------------------------------------------------------ */ body.woocommerce-order-received .woocommerce-bacs-bank-details { margin: 0 0 32px !important; padding: 27px 30px 25px !important; border: 0 !important; border-radius: 24px; background: #f8efe9 !important; box-shadow: none !important; } body.woocommerce-order-received .woocommerce-bacs-bank-details-heading { margin: 0 0 7px !important; padding: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 25px !important; line-height: 1.15 !important; font-weight: 900 !important; } body.woocommerce-order-received .wc-bacs-bank-details-account-name { margin: 0 0 18px !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 17px !important; line-height: 1.3 !important; font-weight: 900 !important; } body.woocommerce-order-received ul.wc-bacs-bank-details { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0 !important; padding: 0 !important; list-style: none !important; } body.woocommerce-order-received ul.wc-bacs-bank-details li { min-width: 0; margin: 0 !important; padding: 8px 17px !important; border: 0 !important; border-right: 1px solid rgba(35, 70, 60, .10) !important; color: #858585; font-family: "Nunito", sans-serif; font-size: 13px !important; line-height: 1.3; font-weight: 700; text-transform: uppercase; } body.woocommerce-order-received ul.wc-bacs-bank-details li:first-child { padding-left: 0 !important; } body.woocommerce-order-received ul.wc-bacs-bank-details li:last-child { border-right: 0 !important; } body.woocommerce-order-received ul.wc-bacs-bank-details li strong { display: block; margin-top: 4px; color: #555 !important; font-size: 1fpx !important; line-height: 1.3; font-weight: 900 !important; text-transform: none; overflow-wrap: anywhere; } /* ------------------------------------------------------------ 02.09.06 FooEvents — messaggio biglietti ------------------------------------------------------------ */ body.woocommerce-order-received #fooevents-thankyou-tickets { margin: 0 0 28px !important; padding: 17px 20px !important; border: 0 !important; border-radius: 16px; background: rgba(35, 70, 60, .06); color: #23463c; font-family: "Nunito", sans-serif; font-size: 13px; line-height: 1.5; font-weight: 700; } body.woocommerce-order-received #fooevents-thankyou-tickets p { margin: 0 !important; padding: 0 !important; } /* ------------------------------------------------------------ 02.09.07 Dettagli prenotazione ------------------------------------------------------------ */ body.woocommerce-order-received .woocommerce-order-details { margin: 0 0 30px !important; padding: 28px 30px !important; border-radius: 24px; background: #fff; box-shadow: 0 14px 40px rgba(35, 70, 60, .055); } body.woocommerce-order-received .woocommerce-order-details__title { margin: 0 0 22px !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 27px !important; line-height: 1.1 !important; font-weight: 900 !important; } body.woocommerce-order-received .woocommerce-table--order-details { margin: 0 !important; border: 0 !important; border-collapse: collapse !important; background: transparent !important; } body.woocommerce-order-received .woocommerce-table--order-details th, body.woocommerce-order-received .woocommerce-table--order-details td { padding: 15px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(35, 70, 60, .08) !important; } body.woocommerce-order-received .woocommerce-table--order-details thead th { color: #23463c !important; font-size: 12px !important; font-weight: 900 !important; text-transform: uppercase; } body.woocommerce-order-received .woocommerce-order-details .product-name > a { color: #23463c !important; font-family: "Nunito", sans-serif; font-size: 17px !important; font-weight: 900 !important; text-decoration: none !important; } body.woocommerce-order-received .woocommerce-order-details .product-name > a:hover { color: #ed721a !important; } body.woocommerce-order-received .woocommerce-order-details .product-quantity { margin-left: 5px; color: #999 !important; font-size: 12px !important; font-weight: 700; } /* variazioni / dati evento — una riga per ogni informazione */ body.woocommerce-order-received .woocommerce-order-details .wc-item-meta { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 4px !important; margin: 8px 0 0 !important; padding: 0 !important; list-style: none !important; } body.woocommerce-order-received .woocommerce-order-details .wc-item-meta li { display: flex !important; align-items: baseline !important; gap: 5px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #777 !important; font-size: 15px !important; line-height: 1.4 !important; } body.woocommerce-order-received .woocommerce-order-details .wc-item-meta li strong { flex: 0 0 auto !important; color: #23463c !important; font-weight: 900 !important; } body.woocommerce-order-received .woocommerce-order-details .wc-item-meta li p { display: inline !important; margin: 0 !important; padding: 0 !important; color: #777 !important; } /* Totali */ body.woocommerce-order-received .woocommerce-table--order-details tfoot th { color: #23463c !important; font-weight: 900 !important; } body.woocommerce-order-received .woocommerce-table--order-details tfoot td { text-align: right; color: #555; } body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th, body.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td { border-bottom: 0 !important; } body.woocommerce-order-received small.includes_tax, body.woocommerce-order-received small.includes_tax .amount, body.woocommerce-order-received small.includes_tax .woocommerce-Price-currencySymbol { font-size: 10px !important; line-height: 1.3 !important; font-weight: 600 !important; color: #929292 !important; } /* ------------------------------------------------------------ 02.09.08 Dati di fatturazione ------------------------------------------------------------ */ body.woocommerce-order-received .woocommerce-customer-details { margin: 0 0 30px !important; padding: 28px 30px !important; border-radius: 24px; background: #fff; box-shadow: 0 14px 40px rgba(35, 70, 60, .055); } body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column__title { margin: 0 0 18px !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 24px !important; line-height: 1.1 !important; font-weight: 900 !important; } body.woocommerce-order-received .woocommerce-customer-details address { margin: 0 !important; padding: 0 !important; border: 0 !important; color: #666 !important; font-family: "Nunito", sans-serif !important; font-size: 16px !important; line-height: 1.65 !important; } body.woocommerce-order-received .woocommerce-customer-details--phone, body.woocommerce-order-received .woocommerce-customer-details--email { margin: 5px 0 0 !important; color: #23463c !important; font-weight: 800; } /* ------------------------------------------------------------ 02.09.09 Pulsante finale ------------------------------------------------------------ */ body.woocommerce-order-received .serre-confirmation-actions { margin-top: 30px !important; text-align: center; } body.woocommerce-order-received .serre-confirmation-events { display: inline-flex !important; align-items: center; justify-content: center; gap: 13px; min-height: 52px; padding: 0 28px !important; border-radius: 999px; background: #ed721a !important; color: #fff !important; font-family: "Nunito", sans-serif !important; font-size: 13px !important; font-weight: 900 !important; text-decoration: none !important; } body.woocommerce-order-received .serre-confirmation-events span { font-size: 22px; line-height: 1; } body.woocommerce-order-received .serre-confirmation-events:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(237, 114, 26, .22); } /* ============================================================ 02.09.10 TABLET ============================================================ */ @media (max-width: 980px) { body.woocommerce-order-received .serre-thankyou-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.woocommerce-order-received .serre-thankyou-overview li { border-right: 0 !important; border-bottom: 1px solid rgba(35, 70, 60, .08) !important; } body.woocommerce-order-received ul.wc-bacs-bank-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.woocommerce-order-received ul.wc-bacs-bank-details li { padding: 11px 0 !important; border-right: 0 !important; border-bottom: 1px solid rgba(35, 70, 60, .09) !important; } } /* ============================================================ 02.09.11 SMARTPHONE ============================================================ */ @media (max-width: 767px) { body.woocommerce-order-received .serre-checkout-heading--confirmation { margin: 26px auto 38px !important; } body.woocommerce-order-received .serre-checkout-success-icon { width: 62px; height: 62px; margin-bottom: 18px !important; font-size: 29px; } body.woocommerce-order-received .serre-checkout-heading--confirmation h1 { font-size: 37px !important; } body.woocommerce-order-received .serre-checkout-heading--confirmation p { font-size: 14px !important; } body.woocommerce-order-received .serre-thankyou-overview { grid-template-columns: 1fr 1fr; border-radius: 18px; } body.woocommerce-order-received .serre-thankyou-overview li { padding: 17px 16px !important; } body.woocommerce-order-received .serre-thankyou-overview li:nth-child(odd) { border-right: 1px solid rgba(35, 70, 60, .08) !important; } body.woocommerce-order-received .serre-thankyou-payment-state { display: block; padding: 14px 16px !important; } body.woocommerce-order-received .serre-thankyou-payment-state strong { display: block; margin-bottom: 2px; } body.woocommerce-order-received .woocommerce-bacs-bank-details, body.woocommerce-order-received .woocommerce-order-details, body.woocommerce-order-received .woocommerce-customer-details { padding: 22px 20px !important; border-radius: 19px; } body.woocommerce-order-received ul.wc-bacs-bank-details { grid-template-columns: 1fr; } body.woocommerce-order-received .woocommerce-table--order-details th, body.woocommerce-order-received .woocommerce-table--order-details td { padding: 13px 0 !important; } } /* ============================================================ 02.09.12 SMARTPHONE STRETTO ============================================================ */ @media (max-width: 480px) { body.woocommerce-order-received .serre-thankyou-overview { grid-template-columns: 1fr; } body.woocommerce-order-received .serre-thankyou-overview li { border-right: 0 !important; } body.woocommerce-order-received .serre-thankyou-overview li strong { font-size: 14px !important; } body.woocommerce-order-received .serre-thankyou-overview .woocommerce-order-overview__total strong { font-size: 17px !important; } } /* ============================================================ 02.09.13 FIX CLEARFIX WOOCOMMERCE NELLE GRIGLIE ============================================================ */ .serre-checkout-shell ul.woocommerce-order-overview::before, .serre-checkout-shell ul.woocommerce-order-overview::after, .serre-checkout-shell ul.wc-bacs-bank-details::before, .serre-checkout-shell ul.wc-bacs-bank-details::after { content: none !important; display: none !important; } /* ============================================================ 02.09.14 PAGINA FINALE — LARGHEZZA 100% ============================================================ */ .serre-checkout-shell .woocommerce, .serre-checkout-shell .woocommerce-order, .serre-checkout-shell .serre-thankyou { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } .serre-checkout-shell .serre-thankyou-overview { width: 100% !important; max-width: none !important; display: grid !important; grid-template-columns: 1fr 1fr 1.35fr .8fr 1.2fr !important; } .serre-checkout-shell .woocommerce-bacs-bank-details { width: 100% !important; max-width: none !important; } .serre-checkout-shell ul.wc-bacs-bank-details { width: 100% !important; display: grid !important; grid-template-columns: 1.1fr 1.2fr .8fr 1.6fr .8fr !important; } /* ============================================================ 02.09.15 PAGINA FINALE — TESTI DETTAGLI PIÙ LEGGIBILI ============================================================ */ /* Riepilogo iniziale: etichette */ .serre-checkout-shell .serre-thankyou-overview li { font-size: 12px !important; } /* Riepilogo iniziale: valori */ .serre-checkout-shell .serre-thankyou-overview li strong { font-size: 14px !important; } /* Totale leggermente più evidente */ .serre-checkout-shell .serre-thankyou-overview .woocommerce-order-overview__total strong { font-size: 18px !important; } /* Stato pagamento */ .serre-checkout-shell .serre-thankyou-payment-state { font-size: 14px !important; } /* Dati bancari: etichette */ .serre-checkout-shell ul.wc-bacs-bank-details li { font-size: 12px !important; } /* Dati bancari: valori */ .serre-checkout-shell ul.wc-bacs-bank-details li strong { font-size: 14px !important; } /* Messaggio FooEvents */ .serre-checkout-shell #fooevents-thankyou-tickets { font-size: 14px !important; } /* Tabella dettagli prenotazione */ .serre-checkout-shell .woocommerce-order-details table.shop_table th, .serre-checkout-shell .woocommerce-order-details table.shop_table td { font-size: 14px !important; } /* Variazioni: Persona / Giorni / Pranzo */ .serre-checkout-shell .woocommerce-order-details .wc-item-meta, .serre-checkout-shell .woocommerce-order-details .wc-item-meta li { font-size: 12px !important; } /* Dati fatturazione */ .serre-checkout-shell .woocommerce-customer-details address { font-size: 14px !important; } /* Telefono / email */ .serre-checkout-shell .woocommerce-customer-details--phone, .serre-checkout-shell .woocommerce-customer-details--email { font-size: 14px !important; } /* ============================================================ 03.00 S.E.R.R.E. — ACCOUNT UNICO ============================================================ */ /* WooCommerce: niente menu laterale, contenuto a tutta larghezza */ .woocommerce-account .woocommerce-MyAccount-navigation { display: none !important; } .woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: 100% !important; max-width: none !important; } .serre-account { width: 100%; color: #23463c; font-family: "Nunito", sans-serif; } /* ------------------------------------------------------------ 03.01 Testata account ------------------------------------------------------------ */ .serre-account-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin: 0 0 42px; padding: 0 0 28px; border-bottom: 1px solid rgba(35,70,60,.10); } .serre-account-kicker, .serre-account-section__eyebrow { display: block; margin: 0 0 7px; color: #ed721a; font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: .08em; } .serre-account-head h1 { margin: 0 0 8px !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: clamp(38px, 5vw, 56px) !important; line-height: 1 !important; font-weight: 900 !important; } .serre-account-head p { margin: 0 !important; color: #6f6f6f; font-size: 18px; line-height: 1.5; } .serre-account-head__user { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 9px; } .serre-account-user-email { margin-right: 5px; color: #ED721A; font-size: 14px; font-weight: 700; } .serre-account-link { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border: 1px solid rgba(35,70,60,.16); border-radius: 999px; background: #fff; color: #23463c !important; font-size: 13px; line-height: 1; font-weight: 900; text-decoration: none !important; } .serre-account-link--logout { border-color: transparent; background: #f6eeeb; } /* ------------------------------------------------------------ 03.02 Sezioni ------------------------------------------------------------ */ .serre-account-section { margin: 0 0 46px; } .serre-account-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 18px; } .serre-account-section__head h2 { margin: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 28px !important; line-height: 1.05 !important; font-weight: 900 !important; } .serre-account-section__head > p { max-width: 420px; margin: 0 !important; color: #777; font-size: 12px; line-height: 1.45; text-align: right; } /* ------------------------------------------------------------ 03.03 Prenotazioni ------------------------------------------------------------ */ .serre-account-orders { display: grid; gap: 16px; } .serre-account-order { overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 14px 40px rgba(35,70,60,.06); } .serre-account-order__top { display: grid; grid-template-columns: .9fr 1.25fr 1.25fr .8fr; border-bottom: 1px solid rgba(35,70,60,.08); } .serre-account-order__top > div { min-width: 0; padding: 17px 20px; border-right: 1px solid rgba(35,70,60,.08); } .serre-account-order__top > div:last-child { border-right: 0; } .serre-account-order__top span { margin: 0 0 5px; color: #ed721a; font-size: 15px; line-height: 1.1; font-weight: 800; letter-spacing: .04em; } .serre-account-order__top strong { display: block; color: #23463c; font-size: 14px; line-height: 1.25; font-weight: 900; } .serre-account-order__total strong { color: #ed721a; font-size: 17px; } .serre-account-order__items { padding: 18px 20px 12px; } .serre-account-event { padding: 0 0 13px; } .serre-account-event + .serre-account-event { padding-top: 13px; border-top: 1px solid rgba(35,70,60,.07); } .serre-account-event__main { display: flex; align-items: baseline; gap: 7px; } .serre-account-event__title { color: #ed721a; font-size: 28px; line-height: 1.25; font-weight: 900; } .serre-account-event__qty { color: #999; font-size: 12px; font-weight: 700; } .serre-account-event__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 7px; } .serre-account-event__meta span { color: #777; font-size: 16px; line-height: 1.35; } .serre-account-event__meta b { color: #23463c; font-weight: 900; } .serre-account-order__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 20px 17px; background: #fbf7f4; } .serre-account-order__payment { color: #777; font-size: 12px; line-height: 1.4; } .serre-account-order__payment strong { color: #23463c; font-weight: 900; } .serre-account-button { display: inline-flex !important; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px !important; border: 0 !important; border-radius: 999px !important; background: #ed721a !important; color: #fff !important; font-family: "Nunito", sans-serif !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; text-decoration: none !important; } /* ------------------------------------------------------------ 03.04 Biglietti FooEvents ------------------------------------------------------------ */ .serre-account-tickets h1 { display: none; } .serre-account-tickets { padding: 24px; border-radius: 24px; background: #f6eeeb; } .serre-account-tickets table, .serre-account-tickets .shop_table { width: 100% !important; margin: 0 !important; border: 0 !important; background: transparent !important; } /* ============================================================ ACCOUNT — LINK SCARICA BIGLIETTO ============================================================ */ .serre-account-tickets table a { color: #ed721a !important; font-weight: 900 !important; text-decoration: none !important; transition: opacity .2s ease; } .serre-account-tickets table a:hover { opacity: .65 !important; } .serre-account-tickets th, .serre-account-tickets td { padding: 13px 10px !important; border: 0 !important; border-bottom: 1px solid rgba(35,70,60,.10) !important; color: #555 !important; font-size: 16px !important; line-height: 1.4 !important; } .serre-account-tickets th { color: #23463c !important; font-weight: 900 !important; } .serre-account-tickets a.button, .serre-account-tickets .button { border-radius: 999px !important; background: #23463c !important; color: #fff !important; font-size: 10px !important; font-weight: 900 !important; } .serre-account-admin-note, .serre-account-no-tickets, .serre-account-empty { margin: 0 !important; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.72); color: #666; font-size: 13px; line-height: 1.5; } /* ------------------------------------------------------------ 03.05 Tablet / mobile ------------------------------------------------------------ */ @media (max-width: 980px) { .serre-account-head { align-items: flex-start; flex-direction: column; } .serre-account-head__user { justify-content: flex-start; } .serre-account-order__top { grid-template-columns: repeat(2, minmax(0,1fr)); } .serre-account-order__top > div:nth-child(2n) { border-right: 0; } } @media (max-width: 767px) { .serre-account-head { margin-bottom: 34px; } .serre-account-head h1 { font-size: 38px !important; } .serre-account-head__user { width: 100%; } .serre-account-user-email { width: 100%; margin: 0 0 3px; } .serre-account-section__head { align-items: flex-start; flex-direction: column; gap: 8px; } .serre-account-section__head > p { max-width: none; text-align: left; } .serre-account-order__top { grid-template-columns: 1fr 1fr; } .serre-account-order__top > div { padding: 15px 16px; } .serre-account-order__items { padding: 17px 16px 10px; } .serre-account-order__bottom { align-items: flex-start; flex-direction: column; padding: 13px 16px 16px; } .serre-account-event__meta { gap: 5px 12px; } .serre-account-tickets { padding: 18px 16px; border-radius: 20px; overflow-x: auto; } } /* ============================================================ ALLE S.E.R.R.E. — ACCOUNT HEADER Desktop: icona accanto al carrello Mobile: voce servizio nel menu ============================================================ */ /* ------------------------------------------------------------ DESKTOP ------------------------------------------------------------ */ @media (min-width: 981px) { #menu-serre .et_pb_menu__menu .serre-account-menu { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; min-width: 40px !important; margin: 0 4px 0 8px !important; padding: 0 !important; } #menu-serre .et_pb_menu__menu .serre-account-menu > a { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; color: #ffffff !important; text-decoration: none !important; transition: opacity .25s ease, color .25s ease; } #menu-serre .serre-account-menu > a .wpmi__icon { margin: 0 !important; padding: 0 !important; color: currentColor !important; font-size: 19px !important; line-height: 1 !important; } /* Account — hover 50%, senza cambiare colore */ #menu-serre .serre-account-menu > a:hover { color: #ffffff !important; opacity: .5 !important; transform: none !important; text-decoration: none !important; } /* Account attivo: arancio, mai sottolineato */ body.woocommerce-account #menu-serre .serre-account-menu > a, #menu-serre .serre-account-menu.current-menu-item > a, #menu-serre .serre-account-menu.current_page_item > a, #menu-serre .serre-account-menu.current-menu-ancestor > a { background: transparent !important; color: #ed721a !important; opacity: 1 !important; text-decoration: none !important; border-bottom: 0 !important; } body.woocommerce-account #menu-serre .serre-account-menu > a:hover, #menu-serre .serre-account-menu.current-menu-item > a:hover, #menu-serre .serre-account-menu.current_page_item > a:hover, #menu-serre .serre-account-menu.current-menu-ancestor > a:hover { color: #ed721a !important; opacity: .5 !important; } } /* ------------------------------------------------------------ MOBILE ------------------------------------------------------------ */ @media (max-width: 980px) { #menu-serre .et_mobile_menu > li.serre-account-menu { display: block !important; position: relative; width: 100% !important; margin: 18px 0 0 !important; padding: 20px 0 0 !important; text-align: center !important; } /* separatore prima dell'account */ #menu-serre .et_mobile_menu > li.serre-account-menu::before { content: ""; display: block; width: 48px; height: 1px; margin: 0 auto 17px; background: rgba(35, 70, 60, .18); } #menu-serre .et_mobile_menu > li.serre-account-menu > a { display: flex !important; flex-direction: column; align-items: center; justify-content: center; width: auto !important; margin: 0 auto !important; padding: 6px 20px !important; border: 0 !important; background: transparent !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 17px !important; line-height: 1.15 !important; font-weight: 900 !important; text-align: center !important; } /* icona esistente Font Awesome */ #menu-serre .et_mobile_menu .serre-account-menu .wpmi__icon { display: block !important; margin: 0 0 7px !important; color: currentColor !important; font-size: 22px !important; line-height: 1 !important; } /* aggiungiamo il testo perché il link contiene solo l'icona */ #menu-serre .et_mobile_menu .serre-account-menu > a::after { content: "Il mio account\A Prenotazioni e biglietti"; display: block; white-space: pre-line; color: #23463c; font-family: "Nunito", sans-serif; font-size: 17px; line-height: 1.45; font-weight: 900; text-align: center; } #menu-serre .et_mobile_menu .serre-account-menu > a:hover, #menu-serre .et_mobile_menu .serre-account-menu > a:active { color: #ed721a !important; background: transparent !important; } } /* ============================================================ 03.06 ACCOUNT — LAYOUT COMUNE A TUTTI GLI ENDPOINT ============================================================ */ /* sfondo + distanza dall'header */ body.woocommerce-account #main-content { padding-top: 100px !important; background-color: #F6EEEB !important; } /* contenitore WooCommerce comune: dashboard, modifica dati, password, ecc. */ body.woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: calc(100% - 48px) !important; max-width: 1240px !important; margin-left: auto !important; margin-right: auto !important; padding-bottom: 70px !important; box-sizing: border-box; } /* il nostro dashboard personalizzato occupa tutto il contenitore Woo appena definito */ body.woocommerce-account .serre-account { width: 100% !important; max-width: none !important; margin: 0 !important; } /* ============================================================ TABLET / MOBILE ============================================================ */ @media (max-width: 980px) { body.woocommerce-account #main-content { padding-top: 120px !important; } body.woocommerce-account .woocommerce-MyAccount-content { width: calc(100% - 32px) !important; padding-bottom: 50px !important; } } /* ============================================================ 03.07.01 ACCOUNT — TESTATA MODIFICA DATI ============================================================ */ .serre-edit-account-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; width: 100%; margin: 0 0 26px; } /* ------------------------------------------------------------ TESTO ------------------------------------------------------------ */ .serre-edit-account-kicker { display: block; margin: 0 0 8px; color: #ed721a; font-family: "Nunito", sans-serif; font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: .08em; } .serre-edit-account-head h1 { margin: 0 0 9px !important; padding: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: clamp(34px, 4vw, 48px) !important; line-height: 1 !important; font-weight: 900 !important; } .serre-edit-account-head p { margin: 0 !important; padding: 0 !important; color: #777; font-family: "Nunito", sans-serif; font-size: 14px; line-height: 1.5; } /* ------------------------------------------------------------ TORNA AL MIO ACCOUNT ------------------------------------------------------------ */ .serre-edit-account-back { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; min-height: 42px; padding: 0 18px !important; background: #ffffff !important; border: 1px solid rgba(35, 70, 60, .14) !important; border-radius: 999px !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 10px !important; line-height: 1 !important; font-weight: 900 !important; text-transform: uppercase; text-decoration: none !important; box-shadow: 0 6px 18px rgba(35,70,60,.04); transition: color .2s ease, transform .2s ease, border-color .2s ease; } .serre-edit-account-back span { color: #ed721a; font-family: Arial, sans-serif; font-size: 18px; line-height: 1; transition: transform .2s ease; } @media (hover:hover) { .serre-edit-account-back:hover { color: #ed721a !important; border-color: rgba(237,114,26,.35) !important; transform: translateY(-1px); } .serre-edit-account-back:hover span { transform: translateX(-3px); } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 767px) { .serre-edit-account-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 22px; } .serre-edit-account-head h1 { font-size: 34px !important; } .serre-edit-account-back { min-height: 40px; padding: 0 15px !important; } } /* ============================================================ 03.07 ACCOUNT — MODIFICA DATI /mio-account/edit-account/ ============================================================ */ /* ------------------------------------------------------------ FORM PRINCIPALE ------------------------------------------------------------ */ body.woocommerce-account .woocommerce-EditAccountForm { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; width: 100% !important; margin: 0 !important; padding: 34px 36px !important; background: #ffffff !important; border: 0 !important; border-radius: 26px !important; box-shadow: 0 14px 40px rgba(35, 70, 60, .06); box-sizing: border-box; } /* elimina float WooCommerce */ body.woocommerce-account .woocommerce-EditAccountForm .form-row { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* campi larghi su tutta la riga */ body.woocommerce-account .woocommerce-EditAccountForm .form-row-wide { grid-column: 1 / -1; } /* ------------------------------------------------------------ LABEL ------------------------------------------------------------ */ body.woocommerce-account .woocommerce-EditAccountForm label { display: block !important; margin: 0 0 7px !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 900 !important; letter-spacing: .055em; text-transform: uppercase; } /* asterisco obbligatorio */ body.woocommerce-account .woocommerce-EditAccountForm .required { color: #ed721a !important; } /* ------------------------------------------------------------ INPUT ------------------------------------------------------------ */ body.woocommerce-account .woocommerce-EditAccountForm input.input-text, body.woocommerce-account .woocommerce-EditAccountForm input[type="text"], body.woocommerce-account .woocommerce-EditAccountForm input[type="email"], body.woocommerce-account .woocommerce-EditAccountForm input[type="password"] { display: block !important; width: 100% !important; height: 50px !important; margin: 0 !important; padding: 0 16px !important; background: #fbf8f6 !important; border: 1px solid rgba(35, 70, 60, .14) !important; border-radius: 13px !important; outline: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 14px !important; line-height: 1 !important; font-weight: 700 !important; box-shadow: none !important; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; } /* focus */ body.woocommerce-account .woocommerce-EditAccountForm input.input-text:focus, body.woocommerce-account .woocommerce-EditAccountForm input[type="text"]:focus, body.woocommerce-account .woocommerce-EditAccountForm input[type="email"]:focus, body.woocommerce-account .woocommerce-EditAccountForm input[type="password"]:focus { background: #ffffff !important; border-color: #ed721a !important; box-shadow: 0 0 0 3px rgba(237, 114, 26, .09) !important; } /* ------------------------------------------------------------ TESTO DI SUPPORTO es. nome visualizzato ------------------------------------------------------------ */ body.woocommerce-account .woocommerce-EditAccountForm span em, body.woocommerce-account .woocommerce-EditAccountForm .form-row em { display: block; margin-top: 7px; color: #888 !important; font-size: 11px !important; line-height: 1.4; font-style: normal !important; } /* ============================================================ CAMBIO PASSWORD ============================================================ */ body.woocommerce-account .woocommerce-EditAccountForm fieldset { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 17px; min-width: 0; margin: 10px 0 0 !important; padding: 24px 26px 26px !important; background: #F6EEEB; border: 0 !important; border-radius: 20px !important; } /* titolo "Modifica password" */ body.woocommerce-account .woocommerce-EditAccountForm fieldset legend { margin: 0 !important; padding: 0 8px !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 20px !important; line-height: 1.1 !important; font-weight: 900 !important; } /* campi password bianchi sul box rosa */ body.woocommerce-account .woocommerce-EditAccountForm fieldset input { background: #ffffff !important; } /* contenitore password */ body.woocommerce-account .woocommerce-EditAccountForm .password-input { display: block !important; position: relative !important; } /* occhietto mostra/nascondi password */ body.woocommerce-account .woocommerce-EditAccountForm .show-password-input { top: 50% !important; right: 16px !important; transform: translateY(-50%) !important; color: #23463c !important; } /* ============================================================ PULSANTE SALVA ============================================================ */ body.woocommerce-account .woocommerce-EditAccountForm > p:not(.form-row) { grid-column: 1 / -1; margin: 4px 0 0 !important; padding: 0 !important; } body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"], body.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button { display: inline-flex !important; align-items: center; justify-content: center; min-height: 48px !important; padding: 0 25px !important; background: #ed721a !important; border: 0 !important; border-radius: 999px !important; color: #ffffff !important; font-family: "Nunito", sans-serif !important; font-size: 11px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .04em; text-transform: uppercase; box-shadow: none !important; cursor: pointer; transition: opacity .2s ease, transform .2s ease; } @media (hover:hover) { body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover, body.woocommerce-account .woocommerce-EditAccountForm .woocommerce-Button:hover { opacity: .78 !important; transform: translateY(-1px); } } /* ============================================================ MESSAGGI WOOCOMMERCE ============================================================ */ body.woocommerce-account .woocommerce-message, body.woocommerce-account .woocommerce-error, body.woocommerce-account .woocommerce-info { margin: 0 0 24px !important; padding: 16px 20px !important; background: #ffffff !important; border: 0 !important; border-radius: 16px !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; box-shadow: 0 8px 24px rgba(35, 70, 60, .05); } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 767px) { body.woocommerce-account .woocommerce-EditAccountForm { grid-template-columns: 1fr; gap: 16px; padding: 24px 18px !important; border-radius: 20px !important; } body.woocommerce-account .woocommerce-EditAccountForm .form-row-wide { grid-column: auto; } body.woocommerce-account .woocommerce-EditAccountForm fieldset { grid-column: auto; padding: 21px 17px 22px !important; border-radius: 17px !important; } body.woocommerce-account .woocommerce-EditAccountForm > p:not(.form-row) { grid-column: auto; } body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"] { width: 100% !important; } } /* ------------------------------------------------------------ 03.08.02-bis RESET CLEARFIX WooCommerce ------------------------------------------------------------ */ body.woocommerce-account:not(.logged-in) #customer_login::before, body.woocommerce-account:not(.logged-in) #customer_login::after, body.woocommerce-account:not(.logged-in) #customer_login > .u-column1::before, body.woocommerce-account:not(.logged-in) #customer_login > .u-column1::after, body.woocommerce-account:not(.logged-in) #customer_login > .u-column2::before, body.woocommerce-account:not(.logged-in) #customer_login > .u-column2::after { content: none !important; display: none !important; } /* ============================================================ 03.08 ACCOUNT — LOGIN / REGISTRAZIONE ============================================================ */ /* ------------------------------------------------------------ 03.08.01 TESTATA ------------------------------------------------------------ */ body.woocommerce-account:not(.logged-in) .serre-login-head { width: 100%; margin: 0 0 34px; text-align: center; } body.woocommerce-account:not(.logged-in) .serre-login-kicker { display: block; margin: 0 0 8px; color: #ed721a; font-family: "Nunito", sans-serif; font-size: 11px; line-height: 1; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } body.woocommerce-account:not(.logged-in) .serre-login-head h1 { margin: 0 0 10px !important; padding: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: clamp(38px, 4vw, 50px) !important; line-height: 1 !important; font-weight: 900 !important; } body.woocommerce-account:not(.logged-in) .serre-login-head p { max-width: 560px; margin: 0 auto !important; color: #777; font-family: "Nunito", sans-serif; font-size: 14px; line-height: 1.5; } /* ------------------------------------------------------------ 03.08.02 CONTENITORE ------------------------------------------------------------ */ body.woocommerce-account:not(.logged-in) .woocommerce { width: calc(100% - 48px) !important; max-width: 1180px !important; margin: 0 auto !important; padding-bottom: 70px !important; box-sizing: border-box; } /* ------------------------------------------------------------ 03.08.03 DUE COLONNE ------------------------------------------------------------ */ body.woocommerce-account:not(.logged-in) #customer_login { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; width: 100%; margin: 0 !important; } /* ogni colonna diventa una card completa */ body.woocommerce-account:not(.logged-in) #customer_login > .u-column1, body.woocommerce-account:not(.logged-in) #customer_login > .u-column2 { float: none !important; width: 100% !important; min-width: 0; margin: 0 !important; padding: 30px 32px 32px !important; background: #ffffff !important; border: 0 !important; border-radius: 24px !important; box-shadow: 0 14px 40px rgba(35,70,60,.06); box-sizing: border-box; } /* ------------------------------------------------------------ 03.08.04 TITOLI CARD ------------------------------------------------------------ */ body.woocommerce-account:not(.logged-in) #customer_login > div > h2 { margin: 0 0 25px !important; padding: 0 0 16px !important; border-bottom: 1px solid rgba(35,70,60,.09); color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 25px !important; line-height: 1.05 !important; font-weight: 900 !important; } /* ------------------------------------------------------------ 03.08.05 FORM — rimuoviamo lo stile Woo ------------------------------------------------------------ */ body.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-login, body.woocommerce-account:not(.logged-in) #customer_login .woocommerce-form-register { margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ------------------------------------------------------------ 03.08.06 RIGHE ------------------------------------------------------------ */ body.woocommerce-account:not(.logged-in) #customer_login .form-row { float: none !important; width: 100% !important; margin: 0 0 18px !important; padding: 0 !important; } /* ------------------------------------------------------------ 03.08.07 LABEL ------------------------------------------------------------ */ body.woocommerce-account:not(.logged-in) #customer_login .form-row > label:not(.woocommerce-form-login__rememberme) { display: block !important; margin: 0 0 7px !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 900 !important; letter-spacing: .045em; text-transform: uppercase; } body.woocommerce-account:not(.logged-in) #customer_login .required { color: #ed721a !important; } /* ------------------------------------------------------------ 03.08.08 INPUT ------------------------------------------------------------ */ body.woocommerce-account:not(.logged-in) #customer_login input.input-text { display: block !important; width: 100% !important; height: 50px !important; margin: 0 !important; padding: 0 16px !important; background: #fbf8f6 !important; border: 1px solid rgba(35,70,60,.14) !important; border-radius: 13px !important; outline: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 14px !important; line-height: 1 !important; font-weight: 700 !important; box-shadow: none !important; box-sizing: border-box; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; } body.woocommerce-account:not(.logged-in) #customer_login input.input-text:focus { background: #ffffff !important; border-color: #ed721a !important; box-shadow: 0 0 0 3px rgba(237,114,26,.09) !important; } /* ------------------------------------------------------------ 03.08.09 PASSWORD / OCCHIETTO ------------------------------------------------------------ */ body.woocommerce-account:not(.logged-in) #customer_login .password-input { position: relative !important; display: block !important; } body.woocommerce-account:not(.logged-in) #customer_login .password-input input { padding-right: 48px !important; } body.woocommerce-account:not(.logged-in) #customer_login .show-password-input { position: absolute !important; top: 50% !important; right: 16px !important; transform: translateY(-50%) !important; color: #23463c !important; } /* ------------------------------------------------------------ 03.08.10 RIGA ACCEDI + RICORDAMI ------------------------------------------------------------ */ body.woocommerce-account:not(.logged-in) .woocommerce-form-login p.form-row:has(.woocommerce-form-login__rememberme) { display: flex !important; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 12px; margin-top: 4px !important; } /* ricordami */ body.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme { display: inline-flex !important; align-items: center; gap: 7px; margin: 0 !important; color: #666 !important; font-family: "Nunito", sans-serif !important; font-size: 12px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer; } body.woocommerce-account:not(.logged-in) #rememberme { width: 16px !important; height: 16px !important; margin: 0 !important; accent-color: #ed721a; } /* ------------------------------------------------------------ 03.08.11 PULSANTI ------------------------------------------------------------ */ body.woocommerce-account:not(.logged-in) #customer_login button.button { display: inline-flex !important; align-items: center; justify-content: center; min-height: 46px !important; margin: 0 !important; padding: 0 23px !important; background: #ed721a !important; border: 0 !important; border-radius: 999px !important; color: #ffffff !important; font-family: "Nunito", sans-serif !important; font-size: 11px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: .04em; text-transform: uppercase; box-shadow: none !important; cursor: pointer; transition: opacity .2s ease, transform .2s ease; } @media (hover:hover) { body.woocommerce-account:not(.logged-in) #customer_login button.button:hover { opacity: .75 !important; transform: translateY(-1px); } } /* ------------------------------------------------------------ 03.08.12 PASSWORD DIMENTICATA ------------------------------------------------------------ */ body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword { margin: 17px 0 0 !important; } body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a { color: #ed721a !important; font-family: "Nunito", sans-serif !important; font-size: 12px !important; font-weight: 900 !important; text-decoration: none !important; } body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a:hover { opacity: .65; } /* ------------------------------------------------------------ 03.08.13 REGISTRAZIONE ------------------------------------------------------------ */ body.woocommerce-account:not(.logged-in) .woocommerce-form-register > p:not(.form-row) { margin: 0 0 15px !important; color: #777; font-family: "Nunito", sans-serif; font-size: 12px; line-height: 1.55; } body.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text { margin: 0 0 19px !important; padding: 15px 17px; background: #f6eeeb; border-radius: 14px; } body.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text p { margin: 0 !important; color: #777; font-family: "Nunito", sans-serif; font-size: 11px; line-height: 1.55; } body.woocommerce-account:not(.logged-in) .woocommerce-privacy-policy-text a { color: #ed721a !important; font-weight: 900 !important; text-decoration: none !important; } /* ------------------------------------------------------------ 03.08.14 MOBILE ------------------------------------------------------------ */ @media (max-width: 767px) { body.woocommerce-account:not(.logged-in) .woocommerce { width: calc(100% - 32px) !important; padding-bottom: 50px !important; } body.woocommerce-account:not(.logged-in) #customer_login { grid-template-columns: 1fr; gap: 28px; } body.woocommerce-account:not(.logged-in) #customer_login > .u-column1, body.woocommerce-account:not(.logged-in) #customer_login > .u-column2 { padding: 24px 19px 25px !important; border-radius: 20px !important; } body.woocommerce-account:not(.logged-in) #customer_login > div > h2 { font-size: 23px !important; } body.woocommerce-account:not(.logged-in) .woocommerce-form-login p.form-row:has(.woocommerce-form-login__rememberme) { align-items: flex-start; flex-direction: column; } } body.serre-evento-passato .serre-single-cta { display: none !important; } /* ============================================================ S.E.R.R.E. — NEWSLETTER Nome + Cognome affiancati ============================================================ */ .serre-newsletter .et_pb_newsletter_fields { display: flex !important; flex-wrap: wrap !important; column-gap: 16px; row-gap: 18px; } /* Nome */ .serre-newsletter .et_pb_newsletter_field:has( input[name="et_pb_signup_firstname"] ) { flex: 0 0 calc(50% - 8px) !important; width: calc(50% - 8px) !important; margin: 0 !important; } /* Cognome */ .serre-newsletter .et_pb_newsletter_field:has( input[name="et_pb_signup_lastname"] ) { flex: 0 0 calc(50% - 8px) !important; width: calc(50% - 8px) !important; margin: 0 !important; } /* Email */ .serre-newsletter .et_pb_newsletter_field:has( input[type="email"] ) { flex: 0 0 100% !important; width: 100% !important; margin: 0 !important; } /* Pulsante */ .serre-newsletter .et_pb_newsletter_button_wrap { flex: 0 0 100% !important; width: 100% !important; margin: 0 !important; } /* Smartphone */ @media (max-width: 767px) { .serre-newsletter .et_pb_newsletter_field:has( input[name="et_pb_signup_firstname"] ), .serre-newsletter .et_pb_newsletter_field:has( input[name="et_pb_signup_lastname"] ) { flex: 0 0 100% !important; width: 100% !important; } } /* ============================================================ S.E.R.R.E. — TORNA AGLI EVENTI + ALLINEAMENTO TESTATA ============================================================ */ .serre-single-heading-row { display: flex; align-items: flex-start; } /* Colonna badge */ .serre-single-date-column { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; } /* Link sopra al badge, senza alterare l'allineamento */ .serre-single-back { position: absolute; left: 0; bottom: calc(100% + 12px); margin: 0 !important; padding: 0 !important; display: block ruby; } /* LINK */ .serre-single-head .serre-single-back a.serre-back-events, .serre-single-head .serre-single-back a.serre-back-events:link, .serre-single-head .serre-single-back a.serre-back-events:visited { display: inline-flex !important; align-items: center !important; gap: 8px; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.15 !important; text-decoration: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; transition: color .2s ease, gap .2s ease; } /* Testo */ .serre-single-head .serre-single-back a.serre-back-events span { color: inherit !important; } /* Freccia */ .serre-single-head .serre-single-back a.serre-back-events i { color: #ed721a !important; font-size: 12px !important; } /* Hover */ .serre-single-head .serre-single-back a.serre-back-events:hover, .serre-single-head .serre-single-back a.serre-back-events:focus { color: #ed721a !important; gap: 11px; text-decoration: none !important; } /* Badge */ .serre-single-date { flex: 0 0 auto; margin: 0 !important; } /* Titolo allineato al bordo superiore del badge */ .serre-single-heading-content { align-self: flex-start; min-width: 0; } .serre-single-title { margin-top: 0 !important; } /* ========================================================== MOBILE – ACCOUNT: SOLO ICONA ========================================================== */ @media (max-width: 980px) { /* nasconde il testo "Il mio account" */ .menu-account-icon > a { font-size: 0 !important; line-height: 1 !important; } /* mantiene visibile l'icona creata con ::before */ .menu-account-icon > a::before { font-size: 24px !important; } /* non mostra "Prenotazioni e biglietti" nel menu */ .menu-account-icon > ul.sub-menu { display: none !important; } } /* ================================================== MODULI FORMINATOR – NUOVO SITO ZORBA Modulo verde: zorba-form zorba-form-verde Modulo arancione: zorba-form zorba-form-arancione ================================================== */ .zorba-form { --zorba-orange: #ED721A; --zorba-orange-dark: #C9570E; --zorba-text: #302B27; --zorba-muted: #746D67; --zorba-border: #DDD4CC; --zorba-white: #FFFFFF; --zorba-error: #B42318; --zorba-success: #39764B; } /* ================================================== COLORI DI FONDO ================================================== */ /* Variante verde */ .zorba-form.zorba-form-verde .forminator-ui.forminator-custom-form { /*background-color: #EFF5E9 !important;*/ border-color: rgba(93, 125, 69, 0.24) !important; border: 10px solid; } /* Variante arancione */ .zorba-form.zorba-form-arancione .forminator-ui.forminator-custom-form { /*background-color: #FFF0E5 !important;*/ border-color: rgba(237, 114, 26, 0.26) !important; border: 10px solid; } /* ================================================== CONTENITORE GENERALE ================================================== */ .zorba-form .forminator-ui.forminator-custom-form { margin: 0 !important; padding: 36px !important; border-width: 1px !important; border-style: solid !important; border-radius: 32px !important; box-shadow: 0 12px 35px rgba(48, 43, 39, 0.07) !important; } /* Se manca una delle classi colore */ .zorba-form:not(.zorba-form-verde):not(.zorba-form-arancione) .forminator-ui.forminator-custom-form { background-color: #FFF9F3 !important; border-color: rgba(237, 114, 26, 0.20) !important; } /* Spazio tra le righe */ .zorba-form .forminator-row { margin-bottom: 20px !important; } /* Correzione dimensionamento */ .zorba-form .forminator-ui *, .zorba-form .forminator-ui *::before, .zorba-form .forminator-ui *::after { box-sizing: border-box; } /* ================================================== ETICHETTE E TESTI ================================================== */ .zorba-form .forminator-label { display: block !important; margin: 0 0 8px !important; color: var(--zorba-text) !important; font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.4 !important; } /* Asterisco dei campi obbligatori */ .zorba-form .forminator-required { color: var(--zorba-orange) !important; } /* Descrizioni sotto i campi */ .zorba-form .forminator-description, .zorba-form .forminator-field-description { margin-top: 7px !important; color: var(--zorba-muted) !important; font-family: inherit !important; font-size: 13px !important; line-height: 1.5 !important; } /* ================================================== CAMPI ================================================== */ .zorba-form .forminator-input, .zorba-form .forminator-textarea, .zorba-form .forminator-select2 .selection .select2-selection { width: 100% !important; min-height: 52px !important; padding: 13px 17px !important; color: var(--zorba-text) !important; background-color: var(--zorba-white) !important; border: 1px solid var(--zorba-border) !important; border-radius: 20px !important; box-shadow: none !important; font-family: inherit !important; font-size: 16px !important; line-height: 1.5 !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important; } /* Area messaggio */ .zorba-form .forminator-textarea { min-height: 150px !important; padding-top: 15px !important; resize: vertical !important; } /* Testi segnaposto */ .zorba-form .forminator-input::placeholder, .zorba-form .forminator-textarea::placeholder { color: #A39A92 !important; opacity: 1 !important; } /* Campi selezionati */ .zorba-form .forminator-input:focus, .zorba-form .forminator-textarea:focus, .zorba-form .forminator-select2.select2-container--open .selection .select2-selection { background-color: var(--zorba-white) !important; border-color: var(--zorba-orange) !important; box-shadow: 0 0 0 4px rgba(237, 114, 26, 0.13) !important; outline: none !important; } /* ================================================== MENU A TENDINA ================================================== */ .zorba-form .forminator-select2 .select2-selection__rendered { padding: 0 !important; color: var(--zorba-text) !important; line-height: 24px !important; } .zorba-form .forminator-select2 .select2-selection__arrow { top: 50% !important; right: 15px !important; transform: translateY(-50%) !important; } /* ================================================== CHECKBOX E PULSANTI RADIO ================================================== */ .zorba-form .forminator-checkbox, .zorba-form .forminator-radio { color: var(--zorba-text) !important; font-family: inherit !important; font-size: 15px !important; line-height: 1.55 !important; } .zorba-form .forminator-checkbox span[aria-hidden], .zorba-form .forminator-radio span[aria-hidden] { background-color: var(--zorba-white) !important; border: 1px solid var(--zorba-border) !important; } .zorba-form .forminator-checkbox input:checked + span[aria-hidden], .zorba-form .forminator-radio input:checked + span[aria-hidden] { background-color: var(--zorba-orange) !important; border-color: var(--zorba-orange) !important; } /* Link informativa privacy */ .zorba-form .forminator-checkbox__label a, .zorba-form .forminator-description a { color: var(--zorba-orange-dark) !important; font-weight: 700 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* ================================================== CARICAMENTO CURRICULUM ================================================== */ .zorba-form .forminator-file-upload { padding: 18px !important; background-color: var(--zorba-white) !important; border: 1px dashed var(--zorba-orange) !important; border-radius: 20px !important; } /* Pulsante selezione file */ .zorba-form .forminator-button-upload { padding: 11px 18px !important; color: var(--zorba-orange-dark) !important; background-color: rgba(237, 114, 26, 0.10) !important; border: 1px solid rgba(237, 114, 26, 0.35) !important; border-radius: 16px !important; box-shadow: none !important; font-family: inherit !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important; } .zorba-form .forminator-button-upload:hover { color: var(--zorba-white) !important; background-color: var(--zorba-orange) !important; border-color: var(--zorba-orange) !important; } /* Nome del file */ .zorba-form .forminator-file-upload span, .zorba-form .forminator-uploaded-file { color: var(--zorba-muted) !important; font-size: 14px !important; } /* ================================================== PULSANTE INVIO ================================================== */ .zorba-form .forminator-button-submit { min-height: 52px !important; padding: 14px 30px !important; color: var(--zorba-white) !important; background-color: var(--zorba-orange) !important; border: 1px solid var(--zorba-orange) !important; border-radius: 50px !important; box-shadow: none !important; font-family: inherit !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; cursor: pointer !important; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important; } .zorba-form .forminator-button-submit:hover { color: var(--zorba-white) !important; background-color: var(--zorba-orange-dark) !important; border-color: var(--zorba-orange-dark) !important; transform: translateY(-2px) !important; } .zorba-form .forminator-button-submit:focus { box-shadow: 0 0 0 4px rgba(237, 114, 26, 0.18) !important; outline: none !important; } /* ================================================== ERRORI ================================================== */ .zorba-form .forminator-error-message { margin-top: 7px !important; color: var(--zorba-error) !important; font-family: inherit !important; font-size: 13px !important; font-weight: 600 !important; } .zorba-form .forminator-field.forminator-has_error .forminator-input, .zorba-form .forminator-field.forminator-has_error .forminator-textarea, .zorba-form .forminator-field.forminator-has_error .forminator-select2 .selection .select2-selection { border-color: var(--zorba-error) !important; } /* ================================================== MESSAGGI DI CONFERMA ================================================== */ .zorba-form .forminator-response-message { margin: 0 0 24px !important; padding: 17px 20px !important; color: var(--zorba-text) !important; background-color: var(--zorba-white) !important; border: 0 !important; border-left: 4px solid var(--zorba-orange) !important; border-radius: 18px !important; box-shadow: none !important; font-family: inherit !important; } .zorba-form .forminator-response-message.forminator-success { background-color: #F3FAF5 !important; border-left-color: var(--zorba-success) !important; } /* ================================================== SMARTPHONE ================================================== */ @media (max-width: 767px) { .zorba-form .forminator-ui.forminator-custom-form { padding: 25px 18px !important; border-radius: 24px !important; } .zorba-form .forminator-row { margin-bottom: 16px !important; } .zorba-form .forminator-input, .zorba-form .forminator-textarea, .zorba-form .forminator-select2 .selection .select2-selection { border-radius: 17px !important; } .zorba-form .forminator-file-upload { border-radius: 17px !important; } .zorba-form .forminator-button-submit { width: 100% !important; } } /* Campo di selezione bianco */ #forminator-module-2313 .select2-selection--single { background: #ffffff !important; } /* Tendina con le opzioni bianca */ .forminator-select-dropdown, .forminator-select-dropdown .select2-dropdown, .forminator-select-dropdown .select2-results, .forminator-select-dropdown .select2-results__options, .forminator-select-dropdown .select2-results__option { background: #ffffff !important; } /* Opzione selezionata */ .forminator-select-dropdown .select2-results__option[aria-selected="true"], .forminator-select-dropdown .select2-results__option--selected { color: #ffffff !important; background: #ed721a !important; } /* Opzione al passaggio del mouse o tramite tastiera */ .forminator-select-dropdown .select2-results__option--highlighted { color: #ffffff !important; background: #ed721a !important; } /* ================================================== TUTTE LE GALLERIE DIVI ================================================== */ /* Overlay */ .et_pb_gallery .et_overlay { background: rgba(30, 45, 35, 0.18); border: 0; opacity: 0; transition: opacity 0.3s ease; } .et_pb_gallery .et_pb_gallery_image:hover .et_overlay { opacity: 1; } /* Forma organica arancione */ .et_pb_gallery .et_overlay::before { content: ""; position: absolute; top: 50%; left: 50%; width: 64px; height: 60px; margin: 0; background: #ed721a; border-radius: 58% 42% 52% 48% / 45% 58% 42% 55%; transform: translate(-50%, -50%) rotate(-6deg) scale(0.85); transition: transform 0.3s ease; box-shadow: 0 5px 18px rgba(0, 0, 0, 0.16); } /* Cerchio della lente */ .et_pb_gallery .et_overlay::after { content: ""; position: absolute; top: 50%; left: 50%; width: 19px; height: 19px; box-sizing: border-box; border: 3px solid #fff; border-radius: 50%; transform: translate(-58%, -62%); } /* Permette di disegnare il manico della lente */ .et_pb_gallery .et_pb_gallery_image { position: relative; } /* Manico della lente */ .et_pb_gallery .et_pb_gallery_image::after { content: ""; position: absolute; z-index: 10; top: calc(50% + 9px); left: calc(50% + 8px); width: 11px; height: 3px; background: #fff; border-radius: 10px; transform: rotate(45deg); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .et_pb_gallery .et_pb_gallery_image:hover::after { opacity: 1; } .et_pb_gallery .et_pb_gallery_image:hover .et_overlay::before { transform: translate(-50%, -50%) rotate(4deg) scale(1); } /* Nasconde il nome della fotografia nel lightbox */ .mfp-bottom-bar .mfp-title { display: none !important; } @media (min-width: 981px) { body #page-container #menu-serre .et-menu-nav #menu-alleserre > li > ul.sub-menu { background-color: #ffffff !important; border-radius: 50px !important; border-top: 1px solid #ffffff !important; box-shadow: none !important; overflow: hidden !important; } body #page-container #menu-serre .et-menu-nav #menu-alleserre > li > ul.sub-menu > li > a { color: #23463c !important; background-color: transparent !important; } } /* ========================================================= ACCOUNT - MENU MOBILE ALLE S.E.R.R.E. ========================================================= */ /* voce account */ #menu-serre #mobile_menu1 .serre-account-menu { text-align: center !important; } /* link account: icona + testo sulla stessa riga */ #menu-serre #mobile_menu1 .serre-account-menu > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: auto !important; margin: 0 auto !important; text-align: center !important; white-space: nowrap !important; } /* elimina eventuali testi vecchi */ #menu-serre #mobile_menu1 .serre-account-menu > a::before { content: none !important; display: none !important; } /* testo non loggato */ #menu-serre #mobile_menu1 .serre-account-menu > a::after { content: "ACCEDI" !important; display: inline !important; white-space: nowrap !important; margin: 0 !important; } /* testo loggato */ body.logged-in #menu-serre #mobile_menu1 .serre-account-menu > a::after { content: "IL MIO ACCOUNT" !important; } /* icona */ #menu-serre #mobile_menu1 .serre-account-menu > a i { display: inline-block !important; margin: 0 !important; line-height: 1 !important; vertical-align: middle !important; } /* ========================================================= S.E.R.R.E. — FORM BIGLIETTI Desktop: - campi al 30%, allineati a sinistra - 1 campo -> colonna 1 - 2 campi -> colonne 1-2 - 3 campi -> colonne 1-2-3 - con FooEvents Booking DATA occupa la colonna 1 - QTÀ + pulsante sempre sulla seconda riga ========================================================= */ #serre-biglietti .variations_form { display: grid !important; grid-template-columns: 30% 30% 30% !important; grid-template-rows: auto auto !important; column-gap: 5% !important; row-gap: 20px !important; width: 100% !important; align-items: end !important; justify-content: start !important; } /* Appiattiamo i wrapper WooCommerce */ #serre-biglietti .variations, #serre-biglietti .variations tbody, #serre-biglietti .single_variation_wrap, #serre-biglietti .woocommerce-variation-add-to-cart { display: contents !important; } /* Prezzo variazione non necessario qui */ #serre-biglietti .woocommerce-variation.single_variation { display: none !important; } /* ========================================================= VARIAZIONI WOOCOMMERCE ========================================================= */ #serre-biglietti .variations tr { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } /* prodotto con data singola: le variazioni partono subito da sinistra */ #serre-biglietti .variations tr:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; } #serre-biglietti .variations tr:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; } #serre-biglietti .variations tr:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; } /* ========================================================= FOOEVENTS BOOKINGS — DATA MULTIPLA Se il campo Data esiste: DATA -> colonna 1 PERSONA -> colonna 2 eventuale altro attributo -> colonna 3 ========================================================= */ #serre-biglietti .fooevents-bookings-date { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } #serre-biglietti .variations_form:has(.fooevents-bookings-date) .variations tr:nth-child(1) { grid-column: 2 !important; } #serre-biglietti .variations_form:has(.fooevents-bookings-date) .variations tr:nth-child(2) { grid-column: 3 !important; } /* ========================================================= LABEL ========================================================= */ #serre-biglietti .variations th, #serre-biglietti .variations td { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; text-align: left !important; } /* Il tooltip informativo deve poter uscire dal campo senza essere tagliato */ #serre-biglietti, #serre-biglietti .serre-single-ticket-form, #serre-biglietti .variations_form, #serre-biglietti .variations, #serre-biglietti .variations tbody, #serre-biglietti .variations tr, #serre-biglietti .variations th, #serre-biglietti .variations td, #serre-biglietti .variations th.label, #serre-biglietti .variations th.label label { overflow: visible !important; } #serre-biglietti .variations th.label { margin-bottom: 8px !important; } #serre-biglietti .variations th.label label { position: relative !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; width: auto !important; margin: 0 !important; color: #174c42 !important; font-size: 14px !important; line-height: 18px !important; font-weight: 800 !important; letter-spacing: .05em !important; text-transform: uppercase !important; overflow: visible !important; } /* Icona info realmente accanto al titolo della select */ #serre-biglietti .variations th.label label .serre-variation-info-wrap { position: static !important; left: auto !important; top: auto !important; transform: none !important; display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; z-index: 1000 !important; } /* ========================================================= LABEL DATA FOOEVENTS ========================================================= */ #serre-biglietti .fooevents-bookings-date > label { display: block !important; margin: 0 0 8px !important; padding: 0 !important; font-size: 0 !important; line-height: 18px !important; } #serre-biglietti .fooevents-bookings-date > label::before { content: "DATA"; color: #174c42; font-size: 14px; line-height: 18px; font-weight: 800; letter-spacing: .05em; font-family: "nunito"; } #serre-biglietti .fooevents-bookings-date > label::after { content: " *"; color: #a40000; font-size: 14px; font-weight: 700; } #serre-biglietti .fooevents-bookings-date .woocommerce-input-wrapper { display: block !important; width: 100% !important; } /* ========================================================= SELECT ========================================================= */ #serre-biglietti .fooevents-bookings-date select, #serre-biglietti .variations select { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: 52px !important; min-height: 52px !important; margin: 0 !important; padding: 0 42px 0 18px !important; border: 1px solid #d4dcd8 !important; border-radius: 16px !important; background-color: #fff !important; color: #555 !important; font-size: 16px !important; font-weight: 500 !important; box-shadow: none !important; box-sizing: border-box !important; } /* ========================================================= QTÀ ========================================================= */ #serre-biglietti .quantity { grid-column: 1 !important; grid-row: 2 !important; position: relative !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 26px 0 0 !important; } #serre-biglietti .quantity::before { content: "QTÀ"; position: absolute; top: 0; left: 0; color: #174c42; font-size: 14px; line-height: 18px; font-weight: 800; letter-spacing: .05em; font-family: "nunito"; } #serre-biglietti .quantity .qty { display: block !important; width: 100% !important; max-width: none !important; height: 52px !important; min-height: 52px !important; margin: 0 !important; padding: 0 12px !important; border: 1px solid #d4dcd8 !important; border-radius: 16px !important; background: #fff !important; color: #174c42 !important; font-size: 18px !important; font-weight: 700 !important; text-align: center !important; box-shadow: none !important; box-sizing: border-box !important; } /* ========================================================= AGGIUNGI AL CARRELLO ========================================================= */ #serre-biglietti .single_add_to_cart_button { grid-column: 2 / 4 !important; grid-row: 2 !important; align-self: end !important; justify-self: start !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 80% !important; max-width: none !important; height: 52px !important; min-height: 52px !important; margin: 26px 0 0 !important; padding: 0 26px !important; border-radius: 999px !important; white-space: nowrap !important; box-sizing: border-box !important; } /* reset variazioni */ #serre-biglietti .reset_variations, #serre-biglietti .reset_variations_alert { display: none !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 980px) and (min-width: 768px) { #serre-biglietti .variations_form { grid-template-columns: calc(50% - 10px) calc(50% - 10px) !important; grid-template-rows: auto !important; column-gap: 20px !important; row-gap: 18px !important; } #serre-biglietti .fooevents-bookings-date, #serre-biglietti .variations tr, #serre-biglietti .quantity, #serre-biglietti .single_add_to_cart_button { grid-row: auto !important; } #serre-biglietti .variations tr:nth-child(1), #serre-biglietti .variations tr:nth-child(2), #serre-biglietti .variations tr:nth-child(3), #serre-biglietti .variations_form:has(.fooevents-bookings-date) .variations tr:nth-child(1), #serre-biglietti .variations_form:has(.fooevents-bookings-date) .variations tr:nth-child(2) { grid-column: auto !important; } #serre-biglietti .quantity { grid-column: 1 !important; } #serre-biglietti .single_add_to_cart_button { grid-column: 2 !important; width: 100% !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { #serre-biglietti .variations_form { grid-template-columns: 1fr !important; grid-template-rows: auto !important; column-gap: 0 !important; row-gap: 16px !important; } #serre-biglietti .fooevents-bookings-date, #serre-biglietti .variations tr, #serre-biglietti .quantity, #serre-biglietti .single_add_to_cart_button, #serre-biglietti .variations_form:has(.fooevents-bookings-date) .variations tr:nth-child(1), #serre-biglietti .variations_form:has(.fooevents-bookings-date) .variations tr:nth-child(2) { grid-column: 1 !important; grid-row: auto !important; } #serre-biglietti .single_add_to_cart_button { width: 100% !important; margin-top: 0 !important; } } /* ========================================= CARRELLO — aggiungi altri biglietti ========================================= */ .serre-cart-add-more { margin-top: 24px; } .serre-cart-add-more__button { display: inline-flex; align-items: center; gap: 10px; color: #174c42 !important; font-size: 15px; font-weight: 800; letter-spacing: .04em; text-decoration: none !important; transition: opacity .2s ease; } .serre-cart-add-more__button:hover { opacity: .7; } .serre-cart-add-more__plus { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 2px solid #174c42; border-radius: 50%; font-size: 20px; line-height: 1; } /* ========================================= CHECKOUT — metadati biglietto DATA + MENU sulla stessa riga ========================================= */ .woocommerce-checkout-review-order-table .variation { display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px !important; } .woocommerce-checkout-review-order-table .variation dt, .woocommerce-checkout-review-order-table .variation dd { float: none !important; clear: none !important; margin: 0 !important; padding: 0 !important; } .woocommerce-checkout-review-order-table .variation dt { font-weight: 700 !important; } .woocommerce-checkout-review-order-table .variation dd p { margin: 0 !important; } .woocommerce-checkout-review-order-table .serre-checkout-date { display: inline-block; margin: 5px 12px 0 0; color: #666; font-size: 14px; line-height: 1.4; } .woocommerce-checkout-review-order-table .serre-checkout-date strong { font-weight: 700; } /* Menu accanto alla data */ .woocommerce-checkout-review-order-table dl.variation { display: inline-flex !important; align-items: center !important; gap: 4px !important; margin: 5px 0 0 0 !important; vertical-align: top; } .woocommerce-checkout-review-order-table dl.variation dt, .woocommerce-checkout-review-order-table dl.variation dd { float: none !important; clear: none !important; margin: 0 !important; padding: 0 !important; } .woocommerce-checkout-review-order-table dl.variation dd p { margin: 0 !important; } /* ========================================= ORDINE RICEVUTO — DATI EVENTO ========================================= */ .serre-order-event-meta { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 4px !important; margin: 8px 0 0 !important; padding: 0 !important; color: #777 !important; font-size: 15px !important; line-height: 1.4 !important; list-style: none !important; } .serre-order-event-meta li, .serre-order-event-meta__item { display: flex !important; align-items: baseline !important; gap: 5px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .serre-order-event-meta li strong, .serre-order-event-meta__item strong { flex: 0 0 auto !important; color: #23463c !important; font-weight: 900 !important; } .serre-order-event-meta li p { display: inline !important; margin: 0 !important; padding: 0 !important; color: #777 !important; } .serre-order-card-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 15px; line-height: 1.4; color: #666; } .serre-order-card-meta span { display: inline-block; } .serre-order-card-meta strong { color: #174c42; font-weight: 700; } .serre-account-event__meta { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; } .serre-account-event__meta-item { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 10px; font-size: 16px; line-height: 1.45; } .serre-account-event__meta-item b { color: #174c42; font-weight: 800; } .serre-account-event__meta-item em { color: #777; font-style: normal; font-weight: 400; } /* ============================================================ CARRELLO — QUANTITÀ FISSA FOOEVENTS Stesso aspetto dell'input quantità, ma non modificabile ============================================================ */ .serre-cart-content .woocommerce-cart-form td.product-quantity:not(:has(input[type="number"])) { position: relative !important; isolation: isolate; height: 46px !important; min-height: 46px !important; padding: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 16px !important; font-weight: 900 !important; line-height: 46px !important; text-align: center !important; vertical-align: middle !important; } /* riquadro dietro al numero */ .serre-cart-content .woocommerce-cart-form td.product-quantity:not(:has(input[type="number"]))::before { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; width: 66px; height: 46px; transform: translate(-50%, -50%); background: #ffffff; border: 1px solid rgba(35, 70, 60, .16); border-radius: 13px; box-sizing: border-box; } /* il campo tecnico resta invisibile */ .serre-cart-content .woocommerce-cart-form td.product-quantity input[type="hidden"] { display: none !important; } /* ============================================================ S.E.R.R.E. — CHECKOUT PRIVACY + TERMINI DI PAGAMENTO / DUE POPUP ============================================================ */ /* ------------------------------------------------------------ AREA LEGALE NATIVA WOOCOMMERCE ------------------------------------------------------------ */ body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: 18px 0 16px !important; padding: 17px 18px !important; border: 1px solid rgba(35, 70, 60, .12) !important; border-radius: 16px !important; background: rgba(255, 255, 255, .72) !important; box-sizing: border-box !important; } /* testo privacy */ body.woocommerce-checkout .woocommerce-privacy-policy-text { margin: 0 0 13px !important; color: #666 !important; font-family: "Nunito", sans-serif !important; font-size: 13px !important; line-height: 1.55 !important; } body.woocommerce-checkout .woocommerce-privacy-policy-text p { margin: 0 !important; } /* link privacy + termini */ body.woocommerce-checkout .woocommerce-privacy-policy-link, body.woocommerce-checkout .woocommerce-terms-and-conditions-link { color: #23463c !important; font-weight: 900 !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 3px !important; cursor: pointer !important; } body.woocommerce-checkout .woocommerce-privacy-policy-link:hover, body.woocommerce-checkout .woocommerce-terms-and-conditions-link:hover { color: #ed721a !important; } /* riga checkbox termini */ body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row.validate-required { margin: 0 !important; padding: 0 !important; } /* label */ body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text { color: #555 !important; font-family: "Nunito", sans-serif !important; font-size: 13px !important; line-height: 1.45 !important; } /* checkbox nativo, reso coerente */ body.woocommerce-checkout input#terms { width: 19px !important; height: 19px !important; margin: 1px 8px 0 0 !important; accent-color: #ed721a; vertical-align: top !important; } /* il contenitore inline dei termini non serve: i termini si leggono nel popup */ body.woocommerce-checkout .woocommerce-terms-and-conditions { display: none !important; } /* ------------------------------------------------------------ BLOCCO SCROLL QUANDO UN POPUP È APERTO ------------------------------------------------------------ */ html.serre-legal-modal-open, html.serre-legal-modal-open body { overflow: hidden !important; } /* ------------------------------------------------------------ POPUP ------------------------------------------------------------ */ .serre-legal-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; } .serre-legal-modal[hidden] { display: none !important; } .serre-legal-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 36, 32, .62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } /* finestra */ .serre-legal-modal__dialog { position: relative; z-index: 2; display: flex; flex-direction: column; width: min(780px, 100%); max-height: min(84vh, 780px); overflow: hidden; border-radius: 26px; background: #faf7f0; box-shadow: 0 28px 80px rgba(20, 36, 32, .26); outline: none; } /* X */ .serre-legal-modal__close { position: absolute; top: 18px; right: 18px; z-index: 5; display: inline-flex !important; align-items: center; justify-content: center; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 0 3px !important; border: 1px solid rgba(35, 70, 60, .12) !important; border-radius: 50% !important; background: #fff !important; color: #23463c !important; font-family: Arial, sans-serif !important; font-size: 27px !important; font-weight: 400 !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer !important; } /* header */ .serre-legal-modal__header { flex: 0 0 auto; padding: 30px 70px 20px 30px; border-bottom: 1px solid rgba(35, 70, 60, .08); } .serre-legal-modal__eyebrow { display: block; margin: 0 0 7px !important; color: #ed721a !important; font-family: "Nunito", sans-serif !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 900 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } .serre-legal-modal__header h2 { margin: 0 0 8px !important; padding: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: clamp(24px, 3vw, 34px) !important; line-height: 1.08 !important; font-weight: 900 !important; } .serre-legal-modal__header p { margin: 0 !important; color: #6b6b6b !important; font-family: "Nunito", sans-serif !important; font-size: 14px !important; line-height: 1.5 !important; } /* contenuto scrollabile */ .serre-legal-modal__content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 30px 28px; color: #555 !important; font-family: "Nunito", sans-serif !important; font-size: 15px !important; line-height: 1.65 !important; } .serre-legal-modal__content > :first-child { margin-top: 0 !important; } .serre-legal-modal__content > :last-child { margin-bottom: 0 !important; } .serre-legal-modal__content h1, .serre-legal-modal__content h2, .serre-legal-modal__content h3, .serre-legal-modal__content h4 { color: #23463c !important; font-family: "Nunito", sans-serif !important; font-weight: 900 !important; } .serre-legal-modal__content a { color: #ed721a !important; text-decoration: underline !important; text-underline-offset: 2px !important; } /* footer */ .serre-legal-modal__footer { flex: 0 0 auto; padding: 18px 30px 24px; border-top: 1px solid rgba(35, 70, 60, .08); background: rgba(250, 247, 240, .97); } /* pulsanti */ .serre-legal-modal__button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 50px !important; margin: 0 !important; padding: 13px 20px !important; border-radius: 999px !important; font-family: "Nunito", sans-serif !important; font-size: 14px !important; line-height: 1.2 !important; font-weight: 900 !important; letter-spacing: .025em !important; box-shadow: none !important; cursor: pointer !important; transition: transform .2s ease, opacity .2s ease !important; } .serre-legal-modal__button:hover { transform: translateY(-1px); } /* Privacy: bottone neutro */ .serre-legal-modal__button--secondary { border: 1px solid rgba(35, 70, 60, .18) !important; background: #fff !important; color: #23463c !important; } /* Termini: bottone accettazione */ .serre-legal-modal__button--accept { border: 0 !important; background: #ed721a !important; color: #fff !important; } /* ------------------------------------------------------------ MOBILE ------------------------------------------------------------ */ @media (max-width: 767px) { body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: 15px 0 14px !important; padding: 15px !important; border-radius: 14px !important; } body.woocommerce-checkout .woocommerce-privacy-policy-text { font-size: 12px !important; line-height: 1.5 !important; } body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text { font-size: 13px !important; } .serre-legal-modal { align-items: flex-end; padding: 12px; } .serre-legal-modal__dialog { width: 100%; max-height: 90vh; border-radius: 24px 24px 18px 18px; } .serre-legal-modal__header { padding: 24px 58px 17px 20px; } .serre-legal-modal__header h2 { font-size: 24px !important; } .serre-legal-modal__header p { font-size: 13px !important; } .serre-legal-modal__close { top: 14px; right: 14px; width: 36px !important; height: 36px !important; font-size: 24px !important; } .serre-legal-modal__content { padding: 20px; font-size: 14px !important; line-height: 1.6 !important; } .serre-legal-modal__footer { padding: 14px 20px 20px; } } /* ============================================================ 02.05.09.12 FOOEVENTS BOOKINGS — PRODOTTI SEMPLICI Layout adattivo per data / slot / quantità / pulsante ============================================================ */ /* Campi tecnici: mai visibili */ .serre-single-ticket-form #fooevents_bookings_method_field, .serre-single-ticket-form #fooevents-bookings-stock { display: none !important; } /* Form semplice FooEvents */ .serre-single-ticket-form form.cart:not(.variations_form) { display: grid !important; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) 70px auto; align-items: end; gap: 14px; width: 100%; } /* Campi FooEvents */ .serre-single-ticket-form form.cart:not(.variations_form) .form-row { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Label FooEvents */ .serre-single-ticket-form form.cart:not(.variations_form) .form-row > label { display: block; margin: 0 0 7px !important; padding: 0 !important; color: #23463c !important; font-family: "Nunito", sans-serif !important; font-size: 12px !important; line-height: 1.2 !important; font-weight: 900 !important; letter-spacing: .045em; text-transform: uppercase; } /* Select FooEvents */ .serre-single-ticket-form form.cart:not(.variations_form) select { display: block; width: 100% !important; min-width: 0 !important; height: 48px !important; margin: 0 !important; padding: 0 15px !important; border: 1px solid rgba(35, 70, 60, 0.16) !important; border-radius: 13px !important; background-color: #fff !important; color: #555 !important; font-family: "Nunito", sans-serif !important; font-size: 15px !important; font-weight: 700 !important; } /* Quantità */ .serre-single-ticket-form form.cart:not(.variations_form) .quantity { margin: 0 !important; } /* Pulsante */ .serre-single-ticket-form form.cart:not(.variations_form) .single_add_to_cart_button { align-self: end; } .serre-eventi-grid .entry:has(.not-found-title) { display: none !important; }