/* === base.css === */ /* ========================================================================== Bedouin — base: font, design token, reset. Valori misurati sugli stili calcolati di bedouin.it (Chrome, 21-09-2026), non copiati dallo spec: dove i due divergono vince il sito vivo. ========================================================================== */ /* --- Font self-hosted ---------------------------------------------------- Inter: file variabile, asse wght 100–900 (il CSS usa da 100 a 900). Nessun intervallo di peso dichiarato, come sul vivo: Chrome applica comunque il peso richiesto tramite l'asse. Il file intero (190 KB, 900 caratteri, assi opsz+wght) era la richiesta piu' pesante della pagina e in preload rubava la banda ai CSS che sbloccano il disegno (FCP 3,6 s). Diviso in due sottoinsiemi con unicode-range, come fa Google Fonts: le pagine italiane e inglesi scaricano solo il primo. L'asse opsz e' fissato a 14 (il suo valore di default) perche' nessuna regola usa font-optical-sizing o font-variation-settings. latin 64 KB — tutto il sito tranne due caratteri latin-ext 75 KB — solo dove compare "ā" (/prodotti/) Rigenerare dopo un aggiornamento di Inter: scripts/build_fonts.py */ @font-face { font-family: "Inter Display"; src: url("../../fonts/InterVariable-latin.woff2") format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+2264, U+FEFF, U+FFFD; } @font-face { font-family: "Inter Display"; src: url("../../fonts/InterVariable-latinext.woff2") format("woff2"); font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* DM Mono: i 12 file che Elementor scaricava da Google Fonts (latin + latin-ext). */ @font-face { font-family: "DM Mono"; font-style: italic; font-weight: 300; src: url("../../fonts/dmmono-75f3f285.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; } @font-face { font-family: "DM Mono"; font-style: italic; font-weight: 300; src: url("../../fonts/dmmono-9a087a1b.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; } @font-face { font-family: "DM Mono"; font-style: italic; font-weight: 400; src: url("../../fonts/dmmono-32e9ba6a.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; } @font-face { font-family: "DM Mono"; font-style: italic; font-weight: 400; src: url("../../fonts/dmmono-cb2a35ab.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; } @font-face { font-family: "DM Mono"; font-style: italic; font-weight: 500; src: url("../../fonts/dmmono-719d7d41.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; } @font-face { font-family: "DM Mono"; font-style: italic; font-weight: 500; src: url("../../fonts/dmmono-c32e5a77.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 300; src: url("../../fonts/dmmono-63d829a7.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 300; src: url("../../fonts/dmmono-c5d273fb.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; src: url("../../fonts/dmmono-9ad76cd0.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; src: url("../../fonts/dmmono-a175863f.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; src: url("../../fonts/dmmono-36c1af8e.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; } @font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; src: url("../../fonts/dmmono-6a59878c.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; } /* artifex-hand-cf arriva da Adobe Fonts (kit hci5pck), caricato in functions.php. */ /* --- Design token -------------------------------------------------------- Breakpoint (le media query non leggono le variabili: valori da ripetere a mano) mobile ≤ 767px Elementor mobile tablet 768–1024 Elementor tablet desktop ≥ 1025px header ≤ 991px solo l'header passa a hamburger qui, non a 1024 Il sito vivo NON ha breakpoint laptop/widescreen attivi: 1440 e 1920 condividono gli stessi valori, cambia solo lo spazio disponibile. */ :root { /* colori del kit Elementor 15 */ --color-beige: #fffae7; /* Beige: sfondi chiari, testo su scuro */ --color-nero: #1c1d20; /* Nero: sezioni scure, footer */ --color-mattone: #91441e; /* Mattone: CTA */ /* colori scritti a mano nei widget */ --color-mattone-caldo: #8b4528; /* testo CTA header, hover sottomenu */ --color-testo: #1a1917; /* testo su beige nelle pagine */ --color-beige-supporto: #cec9b8; /* bordi, divisori */ --color-ardesia: #2c313a; /* voci sottomenu desktop, chiudi menu mobile, header crema */ --color-header-line: #e5e5e5; /* filo sotto l'header crema */ --color-footer-label: #868582; /* etichette colonne footer */ --color-footer-credit: #929088; /* "Designed by" */ --color-body: #333; /* testo di default (reset Hello Elementor) */ --color-link: #c36; /* link di default (reset Hello Elementor) */ --color-link-hover: #336; --color-bg: #fff; /* sfondo body: si vede nella fascia di 20px sopra la prima sezione */ /* famiglie */ --font-display: "artifex-hand-cf", "Artifex Hand CF", serif; --font-sans: "Inter Display", "Inter", sans-serif; --font-mono: "DM Mono", monospace; --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* scala tipografica misurata (header, menu, footer) */ --fs-nav: 0.85rem; /* 13.6px voci menu desktop, lingua */ --fs-subnav: 0.8rem; /* 12.8px sottomenu desktop e mobile */ --fs-cta-header: 0.95rem; /* 15.2px "Preventivo" */ --fs-offcanvas: 1.6rem; /* 25.6px voci menu mobile */ --fs-footer-claim: 69px; /* "Nomadic art of life" */ --fs-footer-claim-m: 30px; --fs-footer-link: 18px; --fs-footer-link-m: 14px; --fs-footer-label: 12px; --fs-footer-legal: 14px; --fs-footer-legal-m: 12px; /* scala dei titoli di pagina (censimento del CSS Elementor sulle 19 pagine): ogni widget ha il suo valore in px, questi sono i piu' ricorrenti. Le pagine (milestone 3) useranno i valori esatti di ogni sezione. */ --fs-title-xl: 61px; --fs-title-l: 50px; --fs-title-m: 29px; --fs-title-l-tablet: 46px; --fs-title-m-mobile: 24px; /* spaziature */ --space-container: 10px; /* padding di default dei container Elementor */ --gap-container: 20px; /* gap di default dei container Elementor */ --gutter: 50px; /* margine laterale delle fasce (desktop e tablet) */ --gutter-mobile: 20px; --header-pad-y: 30px; --header-pad-x: 40px; --header-pad-mobile: 20px; /* movimento */ --ease-out-power2: cubic-bezier(0.215, 0.61, 0.355, 1); /* = GSAP power2.out */ } /* --- Reset --------------------------------------------------------------- Sottoinsieme del reset di Hello Elementor che il sito vivo eredita: le misure di header e footer dipendono da queste regole (line-height 1.5, colori link). */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-system); font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--color-body); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin-block: 0.5rem 1rem; font-family: inherit; font-weight: 500; line-height: 1.2; color: inherit; } p { margin-block: 0 0.9rem; } a { background-color: transparent; color: var(--color-link); text-decoration: none; } a:hover, a:active { color: var(--color-link-hover); } b, strong { font-weight: bolder; } img { border-style: none; height: auto; max-width: 100%; } ul, ol, li { margin-block: 0; } button { font-family: inherit; font-size: 1rem; line-height: 1.5; margin: 0; } /* Lenis (scorrimento morbido, assets/js/smooth-scroll.js): regole della libreria */ html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* "Riduci movimento": cambi di stato istantanei (header crema, menu mobile, hover). Anche il ritardo va azzerato, altrimenti il pannello chiuso resta visibile 0.45s. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; } } /* === header.css === */ /* ========================================================================== Header: barra fissa trasparente + menu mobile off-canvas. Fonte: CSS dei due widget HTML del template 13629 + il "CSS personalizzato" Elementor del secondo widget. Le due fonti si contraddicevano: qui c'e' il risultato finale della cascata, verificato sugli stili calcolati del sito vivo. ========================================================================== */ /* Contenitore di header e off-canvas: contiene solo elementi fissi, quindi e' alto 0. CORREZIONE rispetto al sito vivo: li' il container Elementor e' alto 20px (gap tra due widget vuoti) e lascia una fascia bianca sopra la prima sezione da 768px in su. Qui la fascia non c'e': nei confronti usare --ref-crop-top 20@768,1024,1440,1920. Lo z-index crea il contesto di impilamento (99999, da mobile 99, come sul vivo). */ .bedouin-header-wrap { position: relative; z-index: 99999; } /* Sentinella per header-sticky.js: quando esce dallo schermo si e' scrollato oltre 120px (la soglia "sticky start" impostata nel template Animation Addons). */ .bedouin-header-sentinel { position: absolute; top: 120px; left: 0; width: 1px; height: 1px; pointer-events: none; } /* --- Barra --------------------------------------------------------------- Trasparente in cima alla pagina, crema dopo lo scroll (.is-scrolled, header-sticky.js). CORREZIONE rispetto al sito vivo: li' le regole dello stato crema esistono ma nessuno script le attiva, e sopra le sezioni beige il menu bianco sparisce. */ .bedouin-site-header { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; padding: var(--header-pad-y) var(--header-pad-x); background-color: transparent; border-bottom: 1px solid transparent; transition: background-color 0.4s ease, padding 0.4s ease, border-bottom-color 0.4s ease; } .bedouin-header-inner { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .bedouin-header-logo { position: relative; display: block; height: 36px; } .bedouin-header-logo img { display: block; width: auto; height: 100%; transition: opacity 0.4s ease, transform 0.3s ease; } /* logo scuro sovrapposto, visibile solo nello stato crema */ .bedouin-header-logo .logo-dark { position: absolute; top: 0; left: 0; opacity: 0; } .bedouin-header-logo:hover img { transform: scale(1.05); } /* --- Menu desktop -------------------------------------------------------- */ .bedouin-desktop-nav { display: flex; gap: 40px; align-items: center; } .bedouin-desktop-nav a.menu-item, .bedouin-desktop-nav .menu-item-wrapper > span { position: relative; display: flex; align-items: center; gap: 8px; padding-bottom: 5px; font-family: var(--font-sans); font-size: var(--fs-nav); font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-beige); text-decoration: none; cursor: pointer; transition: color 0.4s ease; } .bedouin-desktop-nav .menu-item-parent, .bedouin-desktop-nav .menu-item-parent:hover { color: inherit; text-decoration: none; } /* sottolineatura che si allarga */ .bedouin-desktop-nav a.menu-item::after, .bedouin-desktop-nav .menu-item-wrapper > span::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: var(--color-beige); transition: width 0.3s ease, background-color 0.4s ease; } .bedouin-desktop-nav a.menu-item:hover::after, .bedouin-desktop-nav .menu-item-wrapper:hover > span::after, .bedouin-desktop-nav .menu-item-wrapper:focus-within > span::after { width: 100%; } /* Voce con sottomenu. Il padding compensato dal margine negativo tiene aperto il sottomenu mentre il mouse scende. Vale anche per le voci del menu mobile (stessa classe). */ .bedouin-menu-item-has-children { position: relative; padding-bottom: 15px; margin-bottom: -15px; } .bedouin-desktop-dropdown-arrow { width: 12px; height: 12px; transition: transform 0.3s ease; } .bedouin-menu-item-has-children:hover .bedouin-desktop-dropdown-arrow, .bedouin-menu-item-has-children:focus-within .bedouin-desktop-dropdown-arrow { transform: rotate(180deg); } .bedouin-desktop-submenu { position: absolute; top: 100%; left: 50%; display: flex; flex-direction: column; gap: 15px; min-width: 180px; padding: 20px 25px; background-color: var(--color-beige); border: 1px solid rgba(0, 0, 0, 0.03); border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; } .bedouin-menu-item-has-children:hover .bedouin-desktop-submenu, .bedouin-menu-item-has-children:focus-within .bedouin-desktop-submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .bedouin-desktop-submenu a { font-family: var(--font-sans); font-size: var(--fs-subnav); font-weight: 400; letter-spacing: 1px; text-transform: uppercase; text-align: center; color: var(--color-ardesia); text-decoration: none; transition: color 0.3s ease; } .bedouin-desktop-submenu a:hover { color: var(--color-mattone-caldo); } /* --- Selettore lingua (markup di TranslatePress) -------------------------- Gli !important battono il CSS del plugin, che arriva con selettori propri. */ .bedouin-lang-switcher { display: flex; align-items: center; } .desktop-lang::before { content: ""; display: block; width: 1px; height: 15px; margin-right: 25px; margin-left: -5px; background-color: var(--color-beige); opacity: 0.4; transition: background-color 0.4s ease; } .bedouin-lang-switcher .trp-language-switcher { position: relative; border: none !important; background: transparent !important; } .bedouin-lang-switcher .trp-ls-shortcode-current-language { display: none !important; } .bedouin-lang-switcher .trp-ls-shortcode-language { display: block !important; position: static !important; width: auto !important; border: none !important; background: transparent !important; box-shadow: none !important; } .bedouin-lang-switcher a, .bedouin-lang-switcher a span { font-family: var(--font-sans) !important; font-size: var(--fs-nav) !important; font-weight: 500 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--color-beige) !important; text-decoration: none !important; background: transparent !important; transition: opacity 0.3s ease, color 0.4s ease !important; } .bedouin-lang-switcher a:hover { opacity: 0.6; } .mobile-lang { display: none; } .desktop-lang { display: flex; } /* --- Azioni: CTA e hamburger --------------------------------------------- */ .bedouin-header-actions { display: flex; align-items: center; gap: 30px; } .bedouin-header-cta { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px 24px; font-family: var(--font-display); font-size: var(--fs-cta-header); letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; color: var(--color-mattone-caldo); background-color: var(--color-beige); border: 1px solid var(--color-beige); transition: color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.4s ease, border-color 0.4s ease; } /* riempimento mattone da sinistra all'hover */ .bedouin-header-cta::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-color: var(--color-mattone-caldo); transform-origin: left; transform: scaleX(0); transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .bedouin-header-cta:hover { color: var(--color-beige); } .bedouin-header-cta:hover::before { transform: scaleX(1); } .bedouin-hamburger-btn { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 12px; padding: 0; background: transparent; border: none; cursor: pointer; } .bedouin-hamburger-btn:focus:not(:focus-visible) { outline: none; } .bedouin-hamburger-btn span { display: block; width: 100%; height: 1.5px; background-color: var(--color-beige); transition: transform 0.3s ease, background-color 0.4s ease; } .bedouin-hamburger-btn:hover span:first-child { transform: translateY(-2px); } .bedouin-hamburger-btn:hover span:last-child { transform: translateY(2px); } /* --- Stato crema (dopo 120px di scroll) ----------------------------------- Regole dello stato ".wcf-sticky-header" scritte nel widget 4e57ad56 del sito vivo. */ .bedouin-header-wrap.is-scrolled .bedouin-site-header { padding: 15px var(--header-pad-x); background-color: var(--color-beige); border-bottom-color: var(--color-header-line); } .is-scrolled .bedouin-header-logo .logo-light { opacity: 0; } .is-scrolled .bedouin-header-logo .logo-dark { opacity: 1; } .is-scrolled .bedouin-desktop-nav a.menu-item, .is-scrolled .bedouin-desktop-nav .menu-item-wrapper > span { color: var(--color-ardesia); } .is-scrolled .bedouin-desktop-nav a.menu-item::after, .is-scrolled .bedouin-desktop-nav .menu-item-wrapper > span::after { background-color: var(--color-ardesia); } .is-scrolled .bedouin-hamburger-btn span { background-color: var(--color-ardesia); } .is-scrolled .bedouin-header-cta { color: var(--color-mattone-caldo); background-color: transparent; border-color: var(--color-mattone-caldo); } /* Sul vivo la regola sopra (con !important) batteva anche l'hover: testo mattone sul riempimento mattone, cioe' "Preventivo" invisibile al passaggio del mouse. Corretto. */ .is-scrolled .bedouin-header-cta:hover { color: var(--color-beige); } .is-scrolled .bedouin-lang-switcher a, .is-scrolled .bedouin-lang-switcher a span { color: var(--color-ardesia) !important; } .is-scrolled .desktop-lang::before { background-color: var(--color-ardesia); } @media (max-width: 991px) { .bedouin-site-header { padding: var(--header-pad-mobile); transform: translateZ(0); backface-visibility: hidden; } .bedouin-header-wrap.is-scrolled .bedouin-site-header { padding: 15px var(--header-pad-mobile); } .bedouin-hamburger-btn { display: flex; } .bedouin-desktop-nav, .bedouin-header-cta, .desktop-lang { display: none; } .mobile-lang { display: flex; } .bedouin-header-actions { gap: 20px; } } @media (max-width: 767px) { .bedouin-header-wrap { z-index: 99; } } /* ========================================================================== Menu mobile off-canvas ========================================================================== */ .bedouin-offcanvas-overlay { position: fixed; inset: 0; z-index: 9998; background: rgba(28, 29, 32, 0.6); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; } .bedouin-offcanvas-overlay.is-open { opacity: 1; visibility: visible; } /* Pannello che scorre da destra, in apertura e in chiusura. CORREZIONE rispetto al sito vivo: li' due regole in conflitto (right:-100% animato + translateX(100%) non animato) lo facevano aprire scorrendo e chiudere di scatto. Qui un solo meccanismo, transform (niente ricalcolo del layout). visibility nascosta a pannello chiuso, con ritardo pari alla transizione: l'ombra non sborda sul bordo destro della pagina e i link del menu chiuso escono dal giro del Tab. */ .bedouin-offcanvas { position: fixed; top: 0; right: 0; z-index: 9999; display: flex; width: 340px; max-width: 85vw; height: 100%; overflow-y: auto; background-color: var(--color-beige); box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08); transform: translateX(100%); visibility: hidden; transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s linear 0.45s; } .bedouin-offcanvas.is-open { transform: translateX(0); visibility: visible; transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s linear 0s; } @media (min-width: 992px) { .bedouin-offcanvas, .bedouin-offcanvas-overlay { display: none; } } .bedouin-offcanvas-inner { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; min-height: 100%; padding: 2.5rem 2rem; } body.bedouin-menu-open { overflow: hidden; touch-action: none; } .bedouin-menu-close { position: absolute; top: 24px; right: 24px; display: inline-block; padding: 0; margin: 0; font-family: inherit; font-size: 2.6rem; font-weight: 500; line-height: 1; color: var(--color-ardesia); text-align: center; white-space: nowrap; background: transparent; border: none; border-radius: 0; box-shadow: none; cursor: pointer; transition: opacity 0.3s ease; } .bedouin-menu-close:hover { opacity: 0.5; } .bedouin-menu-nav { display: flex; flex-direction: column; margin-top: 1rem; } .bedouin-menu-nav > a { display: block; padding: 0.9rem 0; font-family: var(--font-display); font-size: var(--fs-offcanvas); color: var(--color-nero); text-decoration: none; border-bottom: 1px solid rgba(28, 29, 32, 0.08); transition: opacity 0.3s ease; } .bedouin-menu-nav > a:hover, .bedouin-submenu-toggle:hover { color: var(--color-nero); opacity: 0.5; } .bedouin-submenu-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.9rem 0; margin: 0; font-family: var(--font-display); font-size: var(--fs-offcanvas); font-weight: 500; line-height: 1.2; color: var(--color-nero); text-align: left; white-space: nowrap; background: none; border: none; border-bottom: 1px solid rgba(28, 29, 32, 0.08); /* raggio ereditato sul sito vivo dallo stile pulsanti del kit Elementor: incurva appena le estremita' del filo inferiore */ border-radius: 4px; box-shadow: none; appearance: none; user-select: none; cursor: pointer; transition: opacity 0.3s ease; } .bedouin-submenu-toggle:focus:not(:focus-visible) { outline: none; } .bedouin-dropdown-arrow { width: 18px; height: 18px; pointer-events: none; transition: transform 0.3s ease; } .bedouin-menu-item-has-children.is-open .bedouin-dropdown-arrow { transform: rotate(180deg); } .bedouin-submenu { display: flex; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .bedouin-menu-item-has-children.is-open .bedouin-submenu { max-height: 300px; margin-top: 20px; } .bedouin-submenu a { display: block; padding: 0.5rem 0; font-family: var(--font-mono); font-size: var(--fs-subnav); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-nero); text-decoration: none; opacity: 0.6; transition: opacity 0.3s ease; } .bedouin-submenu a:hover { color: var(--color-nero); opacity: 1; } .bedouin-menu-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; width: 100%; margin-top: auto; padding-top: 2rem; padding-bottom: 30px; } .bedouin-menu-socials { display: flex; gap: 1rem; margin-bottom: 32px; } .bedouin-menu-socials a { color: var(--color-nero); text-decoration: none; opacity: 0.4; transition: opacity 0.3s ease; } .bedouin-menu-socials a:hover { color: var(--color-nero); opacity: 1; } .bedouin-menu-socials svg { width: 20px; height: 20px; } .bedouin-menu-cta { position: relative; z-index: 1; display: block; width: 100%; overflow: hidden; padding: 1.1rem 2rem; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; text-decoration: none; color: var(--color-beige); background-color: var(--color-nero); border: 1px solid var(--color-nero); transition: color 0.3s ease; } /* velo beige che entra da sinistra all'hover ed esce a destra */ .bedouin-menu-cta::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-color: var(--color-beige); transform: translateX(-101%); } .bedouin-menu-cta:hover { color: var(--color-nero); } .bedouin-menu-cta:hover::before { animation: bedouinMenuSlideIn 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); } .bedouin-menu-cta:not(:hover)::before { animation: bedouinMenuSlideOut 0.4s forwards cubic-bezier(0.4, 0, 0.2, 1); } @keyframes bedouinMenuSlideIn { from { transform: translateX(-101%); } to { transform: translateX(0); } } @keyframes bedouinMenuSlideOut { from { transform: translateX(0); } to { transform: translateX(101%); } } /* --- Barra di amministrazione di WordPress (la vede solo chi è collegato) ------------------- È fissa in alto con z-index 100000, sopra il nostro header fisso: senza questa regola copre logo e menu. Sotto i 783px WordPress la fa scorrere con la pagina, quindi lì l'header resta a 0 (con un margine fisso resterebbe uno spazio vuoto appena si scorre). */ @media screen and (min-width: 783px) { body.admin-bar .bedouin-site-header, body.admin-bar .bedouin-offcanvas { top: 32px; } body.admin-bar .bedouin-offcanvas { height: calc(100% - 32px); } } /* === footer.css === */ /* ========================================================================== Footer (template Elementor 12793). Misure dei container Elementor riportate 1:1: larghezze in %, padding di default di 10px solo dove il sito vivo non lo azzerava, altezze minime in vh. ========================================================================== */ /* --- Fascia scura -------------------------------------------------------- */ .site-footer__main { display: flex; flex-direction: column; min-height: 75vh; padding: 0 var(--gutter); background-color: var(--color-nero); } .site-footer__inner { display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; align-items: center; gap: var(--gap-container); width: 100%; padding-top: 50px; } .site-footer__cols { position: relative; display: flex; align-items: center; gap: var(--gap-container); width: 95%; min-width: 0; padding: var(--space-container); } .site-footer__brand, .site-footer__col { position: relative; display: flex; flex-direction: column; gap: var(--gap-container); min-width: 0; } /* le quattro colonne partono da 100% / 37% / 37% / 37% e si restringono in proporzione */ .site-footer__brand { width: 100%; padding: var(--space-container); } .site-footer__col { width: 37%; } .site-footer__col--1 { padding: var(--space-container); } .site-footer__claim { width: 368px; max-width: 100%; margin: 0; padding: 0; font-family: var(--font-display); font-size: var(--fs-footer-claim); font-weight: 100; line-height: 1; color: var(--color-beige); } .site-footer__label { margin: 0; padding: 0; font-family: var(--font-display); font-size: var(--fs-footer-label); font-weight: 500; line-height: 1; color: var(--color-footer-label); } .site-footer__list { margin: 0; padding: 0; list-style: none; } .site-footer__list li { position: relative; display: flex; align-items: center; } .site-footer__list li:not(:last-child) { padding-bottom: 5px; } .site-footer__list li:not(:first-child) { margin-top: 5px; } .site-footer__list a { display: flex; align-items: center; width: 100%; font-family: var(--font-display); font-size: var(--fs-footer-link); font-weight: 300; } .site-footer__list span { color: var(--color-beige); transition: color 0.3s; } /* --- Logotipo "bedouin" -------------------------------------------------- */ .site-footer__wordmark-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; overflow: hidden; } .site-footer__wordmark { width: 100%; margin-top: 50px; overflow: hidden; text-align: center; } /* SVG stirato alla misura del box, come sul sito vivo (object-fit: fill) */ .site-footer__wordmark img { display: inline-block; vertical-align: middle; width: 90vw; max-width: 100%; height: 31vh; object-fit: fill; } /* --- Barra legale beige -------------------------------------------------- */ .site-footer__bar { display: flex; flex-direction: column; padding: 0 var(--gutter); background-color: var(--color-beige); } .site-footer__bar-inner { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; align-self: center; gap: var(--gap-container); width: 95%; min-height: 97px; } .site-footer__legal, .site-footer__credit { margin: 0; padding: 0; font-family: var(--font-display); font-size: var(--fs-footer-legal); font-weight: 600; line-height: 1; } .site-footer__credit { color: var(--color-footer-credit); } .site-footer__credit a, .site-footer__credit a:hover { color: inherit; } /* --- Tablet (≤1024) ------------------------------------------------------ */ @media (max-width: 1024px) { .site-footer__inner { padding-top: 100px; } .site-footer__cols { flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 60px 20px; width: 100%; padding: 0; } .site-footer__claim { width: 348px; } .site-footer__col { width: 32%; padding: 0; } .site-footer__col--2, .site-footer__col--3 { justify-content: center; align-items: flex-start; margin-bottom: 30px; } .site-footer__col--3 { width: 30%; } .site-footer__list li:not(:last-child) { padding-bottom: 2.5px; } .site-footer__list li:not(:first-child) { margin-top: 2.5px; } .site-footer__wordmark { margin-top: 100px; } .site-footer__wordmark img { width: 86vw; max-width: 88vw; height: 156px; } .site-footer__bar-inner { width: 100%; min-height: 64px; } } /* --- Mobile (≤767) ------------------------------------------------------- */ @media (max-width: 767px) { .site-footer__main { min-height: 49vh; padding: 0 var(--gutter-mobile); } .site-footer__inner { padding-top: 50px; } .site-footer__cols { justify-content: space-between; gap: 40px 20px; margin-bottom: -27px; } .site-footer__brand { width: 44%; padding: 0; } .site-footer__claim { width: 100%; font-size: var(--fs-footer-claim-m); } .site-footer__col { width: 46%; align-items: flex-start; } .site-footer__col--3 { width: 46%; } .site-footer__list li:not(:last-child) { padding-bottom: 2px; } .site-footer__list li:not(:first-child) { margin-top: 2px; } .site-footer__list a { font-size: var(--fs-footer-link-m); } .site-footer__wordmark { margin: 30px 0 -10px; } .site-footer__wordmark img { width: 93%; max-width: 92vw; height: 85px; } .site-footer__bar { padding: 10px var(--gutter-mobile); } .site-footer__bar-inner { flex-wrap: nowrap; gap: 0; min-height: 9px; } .site-footer__legal { width: 183px; max-width: 183px; font-size: var(--fs-footer-legal-m); line-height: 1.5em; } .site-footer__credit { width: 87px; max-width: 87px; font-size: var(--fs-footer-legal-m); line-height: 15px; text-align: end; } } /* --- Animazioni d'ingresso (footer-reveal.js) ----------------------------- Le classi .reveal-pending le mette lo script: senza JS, o con "riduci movimento", il footer resta visibile e fermo. Equivalenti CSS delle animazioni GSAP del sito vivo. */ .reveal-pending[data-reveal="fade-left"] { opacity: 0; transform: translateX(-50px); } .reveal-pending[data-reveal="wipe"] { transform: translateY(-100%); } .reveal-pending[data-reveal="wipe"] img { transform: translateY(100%) scale(1.3); } .reveal-pending.is-revealed[data-reveal="fade-left"] { opacity: 1; transform: none; transition: opacity 1.5s var(--ease-out-power2) var(--reveal-delay, 0s), transform 1.5s var(--ease-out-power2) var(--reveal-delay, 0s); } .reveal-pending.is-revealed[data-reveal="wipe"], .reveal-pending.is-revealed[data-reveal="wipe"] img { transform: none; transition: transform 1.5s var(--ease-out-power2); } /* === components/button.css === */ /* ========================================================================== Bottone (widget "wcf--button" di Animation Addons, effetto "rollover-left"). All'hover un fondo mattone entra da sinistra e il testo diventa beige; uscendo il fondo si ritira verso destra. Sul vivo animava width/left/right: qui lo stesso movimento con transform: scaleX (niente ricalcolo del layout). .btn--outline bordo mattone, fondo trasparente (es. "scopri le nostre tende") .btn--solid fondo beige, senza bordo (es. sopra le foto scure) La larghezza la decide il contenitore: il bottone lo riempie (width 100%), come sul vivo; per un bottone largo quanto il testo basta un contenitore che non si allarga (in una colonna flex: align-self: flex-start). ========================================================================== */ .btn { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 20px 30px; overflow: hidden; font-family: var(--font-mono); font-size: 18px; font-weight: 500; line-height: 24px; letter-spacing: -0.5px; text-transform: uppercase; color: var(--color-mattone); transition: color 0.4s var(--ease-out-power2), background-color 0.4s var(--ease-out-power2); } .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--color-mattone); transform: scaleX(0); transform-origin: right center; transition: transform 0.4s cubic-bezier(0.42, 0, 0.58, 1); } .btn:hover, .btn:focus-visible { color: var(--color-beige); } .btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); transform-origin: left center; } .btn--outline { border: 1px solid var(--color-mattone); background-color: transparent; } .btn--solid { border: 0; background-color: var(--color-beige); } @media (max-width: 1024px) { .btn { font-size: 16px; } } /* === components/reveal.css === */ /* ========================================================================== Animazioni d'ingresso allo scroll (reveal.js). Due meccanismi: 1. [data-anim] — l'elemento entra da una posizione spostata e trasparente. Rifa' il "fade" di Animation Addons (GSAP "from") e le animazioni d'ingresso di Elementor (es. fadeInRight). Si regola con variabili CSS nell'attributo style: --anim-x / --anim-y spostamento di partenza (es. -40px, 50px, 100%) default 0 --anim-duration durata default 1s --anim-delay ritardo default 0s --anim-ease curva default power2.out di GSAP Parte quando l'elemento arriva all'85% dell'altezza dello schermo ("top 85%"). data-anim-watch="parent" = osserva il genitore (per chi parte fuori dal suo box, es. spostato del 100%: altrimenti non entrerebbe mai nello schermo). 2. [data-inview="0.15"] — lo script mette subito .inview-pending e aggiunge .is-inview quando l'elemento e' visibile per la frazione indicata. Lo stile dei due stati lo scrive il componente, e deve nascondere solo con .inview-pending (cosi' senza JS si vede): .x.inview-pending { opacity: 0; } .x.inview-pending.is-inview { opacity: 1; } (es. .bdn-anim nei pannelli della home, copiato dal widget del vivo). Senza JS o con "riduci movimento": tutto visibile e fermo (le classi .anim-pending le mette solo lo script). ========================================================================== */ .anim-pending { opacity: 0; transform: translate(var(--anim-x, 0), var(--anim-y, 0)); } .anim-pending.is-animated { opacity: 1; transform: none; transition: opacity var(--anim-duration, 1s) var(--anim-ease, var(--ease-out-power2)) var(--anim-delay, 0s), transform var(--anim-duration, 1s) var(--anim-ease, var(--ease-out-power2)) var(--anim-delay, 0s); } /* === components/service.css === */ /* ========================================================================== Pagine servizio (Noleggio 11717, Glamping 12106, Produzione 12082): blocchi che le tre pagine Elementor condividono con gli STESSI id (le pagine sono state clonate l'una dall'altra). Qui la struttura comune; i valori che cambiano da pagina a pagina (sfondi, velo, larghezze e corpi dei testi) stanno in css/pages/page-.css, caricato solo su quella pagina. .service-hero hero a tutto schermo (container 4b7a06c0) .service-cards titolo + testi + 4 card (container 156fed8f, widget HTML 3db44593) .service-intro testo a sinistra, foto a destra (container 491f410c: Glamping, Produzione) .service-gallery galleria image-box-slider (container de135cf: Noleggio, Glamping) .service-cta foto su carta + riquadro "preventivo" (container 500e0726: Noleggio, Glamping) La FAQ comune e' in service-faq.css, i bottoni in button.css. Valori dal CSS Elementor delle tre pagine e dai widget HTML, verificati sugli stili calcolati del vivo. Breakpoint: tablet <=1024, mobile <=767. ========================================================================== */ /* --- Hero (4b7a06c0) ------------------------------------------------------- Sfondo: --service-hero-bg (url) nel CSS di pagina. Velo: sfumatura dal trasparente al #1d1313 al 62%, con l'opacita' del container Elementor (--service-hero-overlay). */ .service-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 20px; min-height: 100vh; padding: 0 5vw 6vw; background-image: var(--service-hero-bg); background-position: center center; background-repeat: no-repeat; background-size: cover; } .service-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(28, 29, 32, 0) 0%, #1d1313 62%); opacity: var(--service-hero-overlay, 0.64); } .service-hero__content { position: relative; display: flex; flex-direction: column; gap: 30px; width: 100%; } .service-hero__title { width: 100%; max-width: 100%; margin: 0; font-family: var(--font-display); font-size: 50px; font-weight: 600; line-height: 56px; letter-spacing: -3px; color: var(--color-beige); } .service-hero__text { width: 47%; max-width: 47%; font-family: var(--font-sans); font-size: 20px; font-weight: 400; line-height: 26px; letter-spacing: -0.5px; color: #b4b1a3; } .service-hero__cta { align-self: flex-start; } /* bottone "rollover-left" beige su foto: bordo e testo beige, all'hover entra il mattone */ .service-hero .btn { border-color: var(--color-beige); color: var(--color-beige); } @media (max-width: 1024px) { .service-hero__title { font-size: 5vw; letter-spacing: -2px; } .service-hero__text { width: 594px; max-width: min(594px, 100%); font-size: 2.2vw; } } @media (max-width: 767px) { .service-hero { padding: 0 5vw 20vw; } .service-hero::before { opacity: var(--service-hero-overlay-m, 0.89); } .service-hero__title { font-size: 37px; line-height: 40px; letter-spacing: -1.1px; } .service-hero__text { font-size: 17px; line-height: 23px; } .service-hero__cta { align-self: stretch; text-align: center; } .service-hero .btn { padding: 20px 0; } } /* --- Titolo, testi e 4 card (156fed8f + widget HTML 3db44593) --------------- CSS del widget portato di peso (identico sulle tre pagine); cambiano solo i padding del container, nel CSS di pagina. */ .service-cards { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; padding: 0 5vw 3vw; background-color: var(--color-beige); } .bedouin-custom-section { width: 100%; max-width: 100%; margin: 0 auto; padding: 80px 0; background-color: transparent; } .bedouin-top-row { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; margin-bottom: 70px; align-items: start; } .bedouin-top-title-wrapper { display: flex; flex-direction: column; } .bedouin-section-title { margin: 0 0 10px; font-family: var(--font-display); font-size: 61px; line-height: 58px; letter-spacing: -3px; color: var(--color-nero); } .bedouin-section-subtitle { margin: 0; font-family: var(--font-mono); font-size: 18px; font-weight: 400; letter-spacing: -0.5px; text-transform: uppercase; color: var(--color-nero); } .bedouin-top-text-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .bedouin-intro-text { margin: 0; font-family: var(--font-sans); font-size: 24px; font-weight: 400; line-height: 33px; letter-spacing: -1px; color: var(--color-nero); } .bedouin-intro-text strong { font-weight: 600; color: var(--color-nero); } .bedouin-features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .bedouin-feature-card { display: flex; flex-direction: column; cursor: pointer; text-decoration: none; } .bedouin-feature-image-wrapper { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; margin-bottom: 25px; border-radius: 2px; background-color: var(--color-header-line); } .bedouin-feature-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .bedouin-feature-card:hover .bedouin-feature-image-wrapper img { transform: scale(1.06); } .bedouin-feature-content { display: flex; flex-direction: column; } .bedouin-feature-title { position: relative; margin: 0 0 15px; padding-bottom: 15px; font-family: var(--font-display); font-size: 1.6rem; color: var(--color-ardesia); } .bedouin-feature-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 30px; height: 1.5px; background-color: var(--color-mattone-caldo); transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } .bedouin-feature-card:hover .bedouin-feature-title::after { width: 60px; } .bedouin-feature-text { margin: 0; font-family: var(--font-sans); font-size: 0.95rem; line-height: 1.6; color: #5a5e65; } @media (max-width: 1024px) { .bedouin-section-title { font-size: 50px; line-height: 48px; letter-spacing: -3px; } .bedouin-intro-text { font-size: 20px; line-height: 28px; letter-spacing: -1px; } .bedouin-top-row { grid-template-columns: 1fr; gap: 30px; margin-bottom: 50px; } .bedouin-features-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; } } @media (max-width: 767px) { .bedouin-custom-section { margin-top: -24px; padding: 60px 0; } .bedouin-top-text-wrapper { grid-template-columns: 1fr; gap: 20px; } .bedouin-features-grid { grid-template-columns: 1fr; gap: 50px; } .bedouin-feature-image-wrapper { aspect-ratio: 4 / 3; } } /* --- Testo a sinistra, foto a destra (491f410c: Glamping, Produzione) -------- La foto entra da destra (fade AAE); la sezione ritaglia in orizzontale. */ .service-intro { display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 5vw 0 5vw 5vw; background-color: var(--color-beige); } .service-intro__row { display: flex; gap: 20px; } .service-intro__text { display: flex; flex: 0 1 auto; flex-direction: column; justify-content: center; align-items: flex-end; gap: 20px; width: 100%; min-width: 0; } .service-intro__text > * { align-self: flex-start; } .service-intro__title { width: 646px; max-width: 100%; margin: 0 0 20px; font-family: var(--font-display); font-size: 50px; font-weight: 400; line-height: 56px; letter-spacing: -3px; color: var(--color-nero); } .service-intro__p { width: 700px; max-width: 100%; font-family: var(--font-sans); font-size: 24px; font-weight: 400; line-height: 33px; letter-spacing: -1px; color: var(--color-nero); } .service-intro__p p { margin-block-end: 0; } .service-intro__media { display: flex; flex: 0 1 auto; flex-direction: column; justify-content: center; align-self: center; min-width: 0; text-align: end; } .service-intro__img { display: block; width: 40vw; max-width: none; height: 70vh; object-fit: cover; object-position: center center; } @media (max-width: 1024px) { .service-intro { padding: 10vw 5vw 5vw; } .service-intro__row { flex-direction: column; } .service-intro__title { width: 546px; margin-bottom: 10px; font-size: 43px; line-height: 48px; } .service-intro__p { width: 100%; font-size: 20px; line-height: 28px; } .service-intro__media { align-self: flex-start; width: 100%; text-align: start; } .service-intro__img { width: 99vw; height: 419px; } } @media (max-width: 767px) { .service-intro { padding: 20vw 5vw 0; } .service-intro__row { flex-wrap: wrap; } .service-intro__p { padding-right: 20px; } } /* --- Galleria (de135cf + image-box-slider) ------------------------------------ */ .service-gallery { padding: 10vw 0; background-color: var(--color-nero); } @media (max-width: 1024px) { .service-gallery { padding: 60px 20px 100px; } } /* --- "Parlaci del tuo evento" (500e0726) ------------------------------------- A sinistra (sotto, fino a 1024px) la carta con il titolo "NOMADIC ART OF LIFE" ripetuto come filigrana e la foto al centro; a destra il riquadro con la foto sfocata e velo nero. */ .service-cta { display: flex; flex-direction: column; justify-content: center; min-height: 60vh; overflow: hidden; padding: 30px; background: url("https://bedouin.it/wp-content/uploads/2026/03/Background-1536x970-1.png") center center / cover no-repeat; } .service-cta__inner { display: flex; justify-content: space-evenly; align-self: center; gap: 20px; width: 100%; } .service-cta__paper { position: relative; display: flex; flex: 0 0 auto; justify-content: center; align-items: center; width: 50%; min-height: 769px; overflow: hidden; padding: 0 5px; background-image: url("https://bedouin.it/wp-content/uploads/2026/03/Carta.webp"); } .service-cta__watermark { position: absolute; top: 0; left: 1px; margin: 0; font-family: var(--font-display); font-size: clamp(40px, 10vw, 58px); font-weight: 600; line-height: 59px; letter-spacing: -0.4px; text-align: center; color: rgba(0, 0, 0, 0.08); word-break: break-all; hyphens: auto; } .service-cta__img { position: relative; z-index: 2; display: block; width: 30vw; max-width: none; height: 50vh; object-fit: cover; object-position: center center; } .service-cta__box { position: relative; display: flex; flex: 0 1 auto; flex-direction: column; justify-content: center; gap: 20px; width: 50%; min-width: 0; padding: 30px 50px 60px; background: url("https://bedouin.it/wp-content/uploads/2026/03/Bedouin-Glamp-09-scaled-2.jpg") center center / cover no-repeat; } .service-cta__box::before { content: ""; position: absolute; inset: 0; background-color: #000; opacity: 0.3; } .service-cta__box > * { position: relative; align-self: flex-start; } .service-cta__title { width: 719px; max-width: 100%; margin: 0 0 20px; font-family: var(--font-display); font-size: 50px; font-weight: 400; line-height: 56px; letter-spacing: -3px; color: var(--color-beige); } .service-cta__text { width: 700px; max-width: 100%; margin: 0 0 10px; font-family: var(--font-sans); font-size: 24px; font-weight: 400; line-height: 33px; letter-spacing: -1px; color: var(--color-beige); } .service-cta__text p { margin-block-end: 0; } .service-cta__text--last { margin-bottom: 40px; } /* bottone su fondo beige: testo e bordo mattone, all'hover entra il mattone */ .service-cta .btn { background-color: var(--color-beige); } @media (max-width: 1024px) { .service-cta__inner { flex-direction: column; } .service-cta__paper { order: 99999; width: 100%; min-height: 502px; } .service-cta__watermark { line-height: 59px; } .service-cta__img { width: 405px; height: 369px; } .service-cta__box { width: 100%; min-height: 490px; padding: 5vw; } .service-cta__title { margin-bottom: 10px; font-size: 43px; line-height: 48px; } .service-cta__text, .service-cta__text--last { margin-bottom: 0; font-size: 20px; line-height: 28px; } } @media (max-width: 767px) { .service-cta { padding: 0 5px; } .service-cta__inner { padding: 30px 0; } .service-cta__paper { min-height: 485px; } .service-cta__watermark { line-height: 1em; } .service-cta__img { align-self: center; width: 268px; height: 329px; } .service-cta__box { min-height: 575px; padding: 30px 15px 70px; } .service-cta__title { margin-bottom: 40px; font-size: 37px; line-height: 39px; letter-spacing: -2px; } .service-cta__text { padding-right: 20px; } .service-cta__text--last { margin-bottom: 20px; } .service-cta__btn { align-self: stretch; text-align: center; } .service-cta .btn { padding: 20px 0; } } /* === components/service-faq.css === */ /* ========================================================================== FAQ delle pagine servizio (container 48f2634b + widget HTML 33b4a711, identico su Noleggio, Glamping e Produzione): titolo, sottotitolo, due colonne di categorie, domande a fisarmonica. Comportamento in service-faq.js (una aperta alla volta, apertura/chiusura scorrevole). Markup (classi del widget del vivo): section.service-faq > .bedouin-faq-section[data-faq-accordion] > h2.bedouin-faq-main-title + p.bedouin-faq-subtitle + .bedouin-faq-grid > .bedouin-faq-column > .bedouin-faq-category > h3 + .bedouin-faq-item > button.bedouin-faq-question + div.bedouin-faq-answer > div.bedouin-faq-answer-content Differenze dal CSS del widget, perche' conta il calcolato del vivo: la domanda e' un