/* AlbaUmbra — disegno "Valle hero" (2026). Foglio di stile del sito nuovo. Tutte le classi proprie iniziano con au-. La struttura (sezioni, righe, colonne) e' quella di VelociBuilder. */ /* caratteri del sito, ospitati qui (cartella /fonts/valle): Barlow per i testi, Barlow Condensed per i titoli. Niente richieste a Google; i file "latin-ext" vengono scaricati solo se servono lettere di altre lingue */ @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/valle/barlow-400-latin-ext.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-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/valle/barlow-400-latin.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-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/valle/barlow-500-latin-ext.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-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/valle/barlow-500-latin.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-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/valle/barlow-600-latin-ext.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-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/valle/barlow-600-latin.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-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/valle/barlow-condensed-500-latin-ext.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-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/valle/barlow-condensed-500-latin.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-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/valle/barlow-condensed-600-latin-ext.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-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/valle/barlow-condensed-600-latin.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-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/valle/barlow-condensed-700-latin-ext.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-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/valle/barlow-condensed-700-latin.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-face { font-family: 'Hurricane'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/valle/hurricane-400-latin.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; } :root { --au-g: #23562a; --au-gd: #15331a; --au-o: #c4500a; --au-od: #a8440a; --au-y: #f2c230; --au-bg: #fbfbf8; --au-ink: #1b1f1a; --au-line: #e3e6dc; --au-mut: #4d5449; --au-txt: #3d443a; --au-soft: #eef3e8; --au-fc: 'Barlow Condensed', 'Arial Narrow', sans-serif; --au-fb: Barlow, Arial, sans-serif; --au-fs: 'Hurricane', 'Snell Roundhand', 'Brush Script MT', cursive; /* corsivo dello slogan dell'apertura (era il carattere del sito precedente) */ --au-pad: clamp(48px, 7vw, 96px); } /* ------------------------------------------------------------ base */ html { scroll-behavior: smooth; scroll-padding-top: 90px; } html body { margin: 0; padding: 0; background: var(--au-bg); color: var(--au-ink); font-family: var(--au-fb); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } #layout_wrapper *, #layout_wrapper *::before, #layout_wrapper *::after { box-sizing: border-box; } #layout_wrapper h1, #layout_wrapper h2, #layout_wrapper h3, #layout_wrapper h4, #layout_wrapper p, #layout_wrapper figure, #layout_wrapper blockquote { margin: 0; } #layout_wrapper ul, #layout_wrapper ol { margin: 0; padding: 0; list-style: none; } #layout_wrapper a { color: var(--au-g); text-decoration: none; } #layout_wrapper a:hover { color: var(--au-gd); text-decoration: underline; } #layout_wrapper img { max-width: 100%; height: auto; } #layout_wrapper h1, #layout_wrapper h2, #layout_wrapper h3 { font-family: var(--au-fc); font-weight: 700; text-transform: uppercase; color: var(--au-gd); line-height: 1; } #layout_wrapper h2 { font-size: clamp(32px, 3.8vw, 50px); text-wrap: balance; } /* titoli delle schede delle liste: dalla mod.47 il widget lista sceglie il livello (H2, H3, H4). Lo stile si aggancia alla classe titolo_scheda e non al tag, cosi' non cambia cambiando il livello; questa base rimette l'aspetto di un h4 (le regole generali di h2 e h3 qui sopra non devono toccarli), poi ogni lista ha la sua regola */ #layout_wrapper .caption .titolo_scheda { font-family: inherit; font-size: 18px; font-weight: 500; line-height: 1.1; text-transform: none; color: inherit; text-wrap: wrap; } /* Contorno di selezione. Bootstrap lo disegna a ogni :focus, quindi restava anche dopo un clic. Qui si toglie quando il fuoco arriva dal mouse o dal dito e si tiene, ben visibile, quando arriva dalla tastiera. */ a:focus:not(:focus-visible), button:focus:not(:focus-visible), .btn:focus:not(:focus-visible), .btn:active:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible), input[type="button"]:focus:not(:focus-visible), input[type="submit"]:focus:not(:focus-visible), input[type="checkbox"]:focus:not(:focus-visible), summary:focus:not(:focus-visible) { outline: 0 !important; } .btn:focus:not(:focus-visible), .navbar-toggle:focus:not(:focus-visible) { box-shadow: none; } a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible, input[type="checkbox"]:focus-visible { outline: 3px solid var(--au-o) !important; outline-offset: 2px; } .au-hero :focus-visible, .au-pagehead :focus-visible, .au-footer :focus-visible, .au-footer-bottom :focus-visible, .au-cta :focus-visible, .au-h-nav .navbar-collapse :focus-visible { outline-color: var(--au-y) !important; } /* sezioni di VelociBuilder: a tutta larghezza, senza i margini di Bootstrap */ .au-sec { padding-left: 0; padding-right: 0; } .au-sec > .row { margin-left: 0; margin-right: 0; } .au-sec > .row::before, .au-sec > .row::after { display: none; } .au-sec > .row > .editor_colonna { float: none; width: auto; min-height: 0; padding-left: 0; padding-right: 0; } .au-in > .row { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; } .au-cols > .row { display: flex; flex-wrap: wrap; gap: 24px 64px; } .au-cols > .row > .editor_colonna { flex: 1 1 380px; min-width: 0; } /* pulsanti e collegamenti */ #layout_wrapper .au-btn { display: inline-flex; align-items: center; gap: 8px; font: 700 18px/1 var(--au-fc); letter-spacing: .06em; text-transform: uppercase; padding: 14px 22px; border-radius: 3px; text-decoration: none; cursor: pointer; } #layout_wrapper .au-btn-orange { background: var(--au-o); color: #fff; } #layout_wrapper .au-btn-orange:hover { background: var(--au-od); color: #fff; } #layout_wrapper .au-btn-ghost { border: 2px solid #fff; padding: 12px 20px; color: #fff; background: rgba(255, 255, 255, .06); backdrop-filter: blur(4px); } #layout_wrapper .au-btn-ghost:hover { background: #fff; color: var(--au-g); } #layout_wrapper .au-btn-white { background: #fff; color: var(--au-od); } #layout_wrapper .au-btn-white:hover { background: #fff3e8; color: var(--au-od); } #layout_wrapper .au-btn-dark { background: var(--au-gd); color: #fff; } #layout_wrapper .au-btn-green { background: var(--au-g); color: #fff; } #layout_wrapper .au-btn-green:hover { background: var(--au-gd); color: #fff; } #layout_wrapper .au-btn-dark:hover { color: #fff; background: #0d2110; } #layout_wrapper .au-link, .au-sec-head > a { font: 700 17px/1.2 var(--au-fc); letter-spacing: .06em; text-transform: uppercase; } .au-kicker { font: 600 15px/1.3 var(--au-fc); letter-spacing: .14em; text-transform: uppercase; color: var(--au-y); } #layout_wrapper .au-kicker a { color: var(--au-y); } /* icone dei collegamenti: disegnate qui, non scritte nel testo (l'editor di VelociBuilder cancella i tag vuoti) */ #layout_wrapper .au-link::after, .au-sec-head > a::after { content: "\f178"; display: inline-block; margin-left: .45em; font: 1em/1 FontAwesome; transition: transform .2s ease; } #layout_wrapper .au-btn[href*="wa.me"]::before { content: "\f232"; font: 20px/1 FontAwesome; } .au-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; } /* ------------------------------------------------------------ intestazione */ .au-header { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 1px 0 var(--au-line); } .au-header::after { content: ""; display: block; height: 3px; background: linear-gradient(90deg, #e8620c, var(--au-y) 50%, var(--au-g)); } .au-header > .au-header-row { display: flex; align-items: center; gap: 10px; max-width: 1280px; margin: 0 auto; padding: 8px 20px; min-height: 68px; position: relative; } .au-h-logo { flex: none; order: 1; } .au-h-logo img { display: block; width: 104px; } .au-h-lang { flex: none; order: 2; margin-left: auto; } .au-h-nav { flex: none; order: 3; position: static; } .au-h-cta { flex: none; order: 4; display: none; } #layout_wrapper .au-h-cta .au-btn { font-size: 17px; padding: 12px 18px; } .au-h-lang .btn-group { display: flex; gap: 2px; } .au-h-lang .item_lingua { float: none; border: 0; border-radius: 3px !important; margin: 0 !important; padding: 8px 9px; background: transparent; color: var(--au-ink); font: 700 0/1 var(--au-fc); letter-spacing: .06em; box-shadow: none; text-shadow: none; } .au-h-lang .item_lingua::after { font-size: 15px; } .au-h-lang .item_lingua[lingua_id="8"]::after { content: "IT"; } .au-h-lang .item_lingua[lingua_id="9"]::after { content: "EN"; } .au-h-lang .item_lingua.active { background: var(--au-g); color: #fff; } .au-h-lang .item_lingua img { display: none; } .au-h-nav .navbar { position: static; margin: 0; border: 0; border-radius: 0; background: none; min-height: 0; } .au-h-nav .navbar-header { float: none; margin: 0; } .au-h-nav .navbar-toggle { display: block; float: none; margin: 0; width: 46px; height: 46px; padding: 0 12px; border: 0; border-radius: 3px; background: var(--au-g) !important; } .au-h-nav .navbar-toggle .icon-bar { width: 22px; background: #fff !important; } .au-h-nav .navbar-collapse { position: absolute; left: 0; right: 0; top: calc(100% + 3px); margin: 0; padding: 12px 20px 28px; border: 0; box-shadow: none; background: var(--au-gd); max-height: calc(100vh - 72px); overflow: auto; } .au-h-nav .navbar-collapse.collapse { display: none !important; } .au-h-nav .navbar-collapse.collapse.in, .au-h-nav .navbar-collapse.collapsing { display: block !important; } .au-h-nav .navbar-nav { display: block !important; float: none !important; margin: 0; } .au-h-nav .navbar-nav > li { float: none; } #layout_wrapper .au-h-nav .navbar-nav li > a { display: block; padding: 10px 0; background: none; color: #fff; font: 600 24px/1.2 var(--au-fc); letter-spacing: .04em; text-transform: uppercase; white-space: normal; } #layout_wrapper .au-h-nav .navbar-nav li > a:hover { color: var(--au-y); text-decoration: none; } #layout_wrapper .au-h-nav .navbar-nav > li.dropdown > a { padding: 12px 0 4px; font-size: 14px; letter-spacing: .14em; color: var(--au-y); pointer-events: none; } .au-h-nav .dropdown-menu { position: static; display: block; float: none; min-width: 0; margin: 0 0 12px; padding: 0 0 12px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); border-radius: 0; background: none; box-shadow: none; } .au-h-nav .caret { display: none; } @media (min-width: 1100px) { .au-header > .au-header-row { gap: 18px; } .au-h-logo img { width: 140px; } .au-h-nav { order: 2; margin-left: auto; } .au-h-lang { order: 3; margin-left: 6px; } .au-h-cta { display: block; } .au-h-nav .navbar-toggle { display: none; } .au-h-nav .navbar-collapse { position: static; padding: 0; background: none; max-height: none; overflow: visible !important; } .au-h-nav .navbar-collapse.collapse { display: block !important; } .au-h-nav .navbar-nav { display: flex !important; align-items: center; gap: 24px; } #layout_wrapper .au-h-nav .navbar-nav li > a { padding: 0; color: var(--au-ink); font-size: 17px; letter-spacing: .06em; } #layout_wrapper .au-h-nav .navbar-nav li > a:hover, #layout_wrapper .au-h-nav .navbar-nav li.au-on > a { color: var(--au-o); } #layout_wrapper .au-h-nav .navbar-nav > li.dropdown > a { padding: 22px 0; font-size: 17px; letter-spacing: .06em; color: var(--au-ink); pointer-events: auto; } .au-h-nav .dropdown { position: relative; } .au-h-nav .dropdown-menu { display: none; position: absolute; top: 100%; left: -20px; min-width: 240px; margin: 0; padding: 10px 0; border: 0; background: var(--au-gd); } .au-h-nav .dropdown:hover > .dropdown-menu, .au-h-nav .dropdown.open > .dropdown-menu, .au-h-nav .dropdown:focus-within > .dropdown-menu { display: block; } #layout_wrapper .au-h-nav .dropdown-menu > li > a { padding: 10px 20px; color: #fff; } #layout_wrapper .au-h-nav .dropdown-menu > li > a:hover { background: var(--au-g); color: var(--au-y); } .au-h-nav .caret { display: inline-block; margin-left: 6px; } } @keyframes auKB { 0% { transform: scale(1.04) translate3d(0, 0, 0); } 100% { transform: scale(1.14) translate3d(-2%, -1.5%, 0); } } @keyframes auKB2 { 0% { transform: scale(1.14) translate3d(1.5%, 1%, 0); } 100% { transform: scale(1.04) translate3d(0, 0, 0); } } @keyframes auBar { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ------------------------------------------------------------ home: numeri, punti chiave, introduzione */ .au-stats { background: #fff; border-bottom: 1px solid var(--au-line); } .au-stats-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-left: 1px solid var(--au-line); } /* la riga a sinistra chiude il primo riquadro */ /* Il numero sta su una riga sua; la dicitura e' il resto del testo della scheda, dentro o fuori dallo : cosi' l'aspetto non cambia se l'editor, correggendo una lettera, la lascia fuori dallo span */ .au-stats-list li { display: block; padding: 26px 12px 24px 16px; border-right: 1px solid var(--au-line); font-size: 15px; line-height: 1.5; color: var(--au-mut); } .au-stats-list strong { display: block; margin-bottom: 4px; font: 700 44px/1 var(--au-fc); color: var(--au-g); } .au-stats-list li > span { font-size: 15px; color: var(--au-mut); } /* solo la dicitura: il numero puo' contenere a sua volta uno span (conteggio) */ .au-keys { padding-top: clamp(40px, 6vw, 64px); } .au-keys-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 2px; background: var(--au-line); border: 2px solid var(--au-line); } /* come sopra: icona e titolo su righe proprie, la descrizione e' il resto del testo, dentro o fuori dallo */ .au-keys-list li { display: block; padding: 20px 22px; background: #fff; font-size: 15px; line-height: 1.5; color: var(--au-mut); } .au-keys-list li > .fa { display: none; } /* icone dei punti chiave: le mette il foglio di stile, in ordine, cosi' restano anche quando il testo viene modificato dall'editor */ .au-keys-list li::before { content: "\f00c"; display: block; margin-bottom: 6px; font: 22px/1 FontAwesome; color: var(--au-o); } .au-keys-list li:nth-child(1)::before { content: "\f0c0"; } .au-keys-list li:nth-child(2)::before { content: "\f185"; } .au-keys-list li:nth-child(3)::before { content: "\f1b9"; } .au-keys-list li:nth-child(4)::before { content: "\f0f4"; } .au-keys-list li:nth-child(5)::before { content: "\f2dc"; } .au-keys-list li:nth-child(6)::before { content: "\f1eb"; } /* terrazza: l'icona del progetto Design, ricostruita su quella originale del sito (sole, tavolo e due sedie) */ .au-keys-list li:nth-child(7)::before { content: ""; display: block; width: 24px; height: 24px; margin-top: -2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c4500a'%3E%3Ccircle cx='12' cy='4.6' r='2.4'/%3E%3Cg stroke='%23c4500a' stroke-width='1.6' stroke-linecap='round'%3E%3Cline x1='12' y1='0.6' x2='12' y2='1'/%3E%3Cline x1='7.8' y1='4.6' x2='8.3' y2='4.6'/%3E%3Cline x1='15.7' y1='4.6' x2='16.2' y2='4.6'/%3E%3Cline x1='9' y1='1.7' x2='9.3' y2='2'/%3E%3Cline x1='15' y1='1.7' x2='14.7' y2='2'/%3E%3C/g%3E%3Crect x='5.5' y='11' width='13' height='2.4' rx='1.2'/%3E%3Crect x='10.9' y='12.5' width='2.2' height='7.5'/%3E%3Crect x='8.5' y='19' width='7' height='2' rx='1'/%3E%3Crect x='1' y='9' width='2.2' height='12.5' rx='1.1'/%3E%3Crect x='1' y='15' width='6' height='2.2' rx='1.1'/%3E%3Crect x='5' y='15' width='2.2' height='6.5' rx='1.1'/%3E%3Crect x='20.8' y='9' width='2.2' height='12.5' rx='1.1'/%3E%3Crect x='17' y='15' width='6' height='2.2' rx='1.1'/%3E%3Crect x='16.8' y='15' width='2.2' height='6.5' rx='1.1'/%3E%3C/svg%3E") center / contain no-repeat; } .au-keys-list li:nth-child(8)::before { content: "\f1b0"; } /* gli animali ammessi (ottava voce) si vedono al secondo posto. L'ordine nel testo non cambia: ogni voce tiene la sua icona */ .au-keys-list li { order: 2; } .au-keys-list li:nth-child(1) { order: 0; } .au-keys-list li:nth-child(8) { order: 1; } .au-keys-list strong { display: block; margin-bottom: 6px; font: 700 24px/1.1 var(--au-fc); text-transform: uppercase; color: var(--au-gd); } .au-keys-list span { font-size: 15px; line-height: 1.5; color: var(--au-mut); } .au-intro { padding-top: var(--au-pad); padding-bottom: var(--au-pad); } .au-intro p, .au-where p { font-size: 18px; line-height: 1.65; color: var(--au-txt); text-wrap: pretty; } #layout_wrapper .au-intro p + p, #layout_wrapper .au-where p { margin-top: 14px; } /* ------------------------------------------------------------ ambienti (lista di VelociBuilder) */ .au-rooms-head { padding-bottom: 20px; } .au-page-home ~ .au-rooms-head { padding-top: 0; } .au-rooms-head { padding-top: var(--au-pad); } .au-rooms .schede_bootstrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 2px; margin: 0; } .au-rooms .schede_bootstrap::before, .au-rooms .schede_bootstrap::after, .au-rooms .schede_bootstrap > .clearfix { display: none !important; } .au-rooms .schede_bootstrap > div { float: none; width: auto; padding: 0; } #layout_wrapper .au-rooms .thumbnail { position: relative; display: flex; flex-direction: column; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--au-gd); color: #fff; overflow: hidden; } #layout_wrapper .au-rooms .thumbnail:hover { text-decoration: none; color: #fff; } #layout_wrapper .au-rooms .thumbnail > .row, #layout_wrapper .au-reviews .thumbnail > .row { display: none; } #layout_wrapper .au-rooms .thumbnail img { display: block; width: 100%; max-width: none; aspect-ratio: 16 / 10; object-fit: cover; } #layout_wrapper .au-rooms .caption { position: relative; flex: 1; display: block; padding: 14px 44px 14px 16px; color: #fff; } #layout_wrapper .au-rooms .caption::after { content: "\f178"; font: 18px/1 FontAwesome; position: absolute; right: 16px; top: 50%; margin-top: -9px; color: var(--au-y); } #layout_wrapper .au-rooms .caption .titolo_scheda { font: 700 21px/1.1 var(--au-fc); letter-spacing: .03em; text-transform: uppercase; color: #fff; } #layout_wrapper .au-rooms .caption p { margin-top: 2px; font-size: 14px; line-height: 1.4; color: #c9d6bf; } #layout_wrapper .au-rooms .caption p:empty { display: none; } @media (min-width: 1100px) { .au-rooms .schede_bootstrap { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } #layout_wrapper .au-rooms .thumbnail img { aspect-ratio: 3 / 4; } #layout_wrapper .au-rooms .schede_bootstrap.au-larghe .thumbnail img { aspect-ratio: 16 / 10; } } /* nelle pagine degli ambienti non si ripete la mattonella della pagina in cui ci si trova */ .au-rooms .schede_bootstrap > div.au-qui { display: none; } /* ------------------------------------------------------------ home: recensioni (lista di VelociBuilder), dove siamo */ .au-reviews { padding-top: var(--au-pad); } .au-reviews:not(:has(.schede_bootstrap)) { display: none; } /* finche' non ci sono recensioni la sezione non compare */ .au-reviews .au-sec-head { align-items: flex-end; margin-bottom: 24px; } .au-scores { display: flex; flex-wrap: wrap; gap: 12px; } #layout_wrapper .au-score { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; background: #fff; border: 1px solid var(--au-line); text-decoration: none; } #layout_wrapper a.au-score:hover { border-color: var(--au-g); box-shadow: 0 8px 18px rgba(21, 51, 26, .12); transform: translateY(-2px); } /* media di Google: riquadro arancione, lettera G accanto al nome, stelle color oro */ #layout_wrapper .au-score-g strong { background: var(--au-o); } #layout_wrapper .au-score-g b::before { content: "\f1a0"; margin-right: 6px; font: 15px/1 FontAwesome; color: var(--au-o); } #layout_wrapper .au-score .au-stars { color: #e0a800; letter-spacing: 1px; } .au-score strong { padding: 8px 10px; background: var(--au-g); color: #fff; font: 700 32px/1 var(--au-fc); } .au-score span { display: flex; flex-direction: column; gap: 2px; } .au-score b { font: 700 18px/1 var(--au-fc); text-transform: uppercase; color: var(--au-gd); } .au-score em { font-style: normal; font-size: 14px; color: var(--au-mut); } /* recensioni in una sola riga che scorre di lato (frecce e barra di avanzamento le aggiunge valle.js) */ .au-reviews .schede_bootstrap { display: flex; gap: 16px; margin: 0; padding: 6px 0 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .au-reviews .schede_bootstrap::-webkit-scrollbar { display: none; } .au-reviews .schede_bootstrap::before, .au-reviews .schede_bootstrap::after, .au-reviews .schede_bootstrap > .clearfix { display: none !important; } .au-reviews .schede_bootstrap > div { flex: 0 0 86%; float: none; width: auto; padding: 0; scroll-snap-align: start; } @media (min-width: 700px) { .au-reviews .schede_bootstrap > div { flex-basis: calc((100% - 16px) / 2); } } @media (min-width: 1100px) { .au-reviews .schede_bootstrap > div { flex-basis: calc((100% - 32px) / 3); } } .au-rev-nav { display: flex; align-items: center; gap: 18px; margin-top: 14px; } .au-rev-bar { flex: 1; height: 3px; background: var(--au-line); overflow: hidden; } .au-rev-bar span { display: block; height: 100%; width: 20%; background: var(--au-g); transition: transform .2s ease; } .au-rev-nav button { width: 46px; height: 46px; border: 0; border-radius: 3px; background: var(--au-g); color: #fff; cursor: pointer; transition: background-color .2s ease, opacity .2s ease; } .au-rev-nav button::before { font: 22px/1 FontAwesome; } .au-rev-nav .au-rev-prev::before { content: "\f104"; } .au-rev-nav .au-rev-next::before { content: "\f105"; } .au-rev-nav button:hover { background: var(--au-gd); } .au-rev-nav button:disabled { opacity: .35; cursor: default; background: var(--au-g); } #layout_wrapper .au-reviews .thumbnail { display: flex; flex-direction: column; gap: 14px; height: 100%; margin: 0; padding: 22px; border: 0; border-top: 3px solid var(--au-g); border-radius: 0; background: #fff; color: var(--au-txt); } #layout_wrapper .au-reviews .thumbnail:hover { text-decoration: none; } /* fonte della recensione: etichetta in alto a sinistra (e' scritta nella scheda, dentro la descrizione) */ #layout_wrapper .au-reviews .thumbnail { position: relative; padding-top: 50px; } #layout_wrapper .au-reviews .caption p > em.au-src { position: absolute; top: 20px; left: 22px; font: 700 14px/1 var(--au-fc); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--au-g); } #layout_wrapper .au-reviews .caption p > em.au-src-google { color: var(--au-o); } #layout_wrapper .au-reviews .thumbnail:has(.au-src-google) { border-top-color: var(--au-o); } #layout_wrapper .au-reviews .thumbnail img { display: none; } #layout_wrapper .au-reviews .caption { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 0; color: inherit; } #layout_wrapper .au-reviews .caption .titolo_scheda { order: 3; margin-top: auto; padding-top: 4px; font: 600 14px/1.4 var(--au-fb); text-transform: none; color: var(--au-mut); } #layout_wrapper .au-reviews .caption p { order: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; font-size: 17px; line-height: 1.55; color: var(--au-txt); } #layout_wrapper .au-reviews .thumbnail.au-open .caption p { display: block; -webkit-line-clamp: unset; line-clamp: unset; } /* "Leggi tutto": compare solo sulle recensioni lunghe (lo aggiunge valle.js) */ #layout_wrapper .au-rev-more { order: 2; align-self: flex-start; font: 700 14px/1 var(--au-fc); letter-spacing: .06em; text-transform: uppercase; color: var(--au-o); cursor: pointer; } #layout_wrapper .au-rev-more:hover { color: var(--au-od); text-decoration: underline; } #layout_wrapper .au-reviews .caption p:empty { display: none; } /* voto della recensione: e' il primo grassetto della descrizione. Booking = numero nel riquadro, Google = stelle */ #layout_wrapper .au-reviews .caption p > strong:first-child { position: absolute; top: 14px; right: 18px; padding: 5px 8px; background: var(--au-g); color: #fff; font: 700 18px/1 var(--au-fc); } #layout_wrapper .au-reviews .thumbnail:has(.au-src-google) .caption p > strong:first-child { padding: 0; background: none; color: var(--au-y); font: 16px/1 var(--au-fb); letter-spacing: 2px; top: 20px; } .au-where { padding-top: var(--au-pad); } /* ------------------------------------------------------------ liste di VelociBuilder usate come blocchi del disegno Markup: .row.schede_bootstrap > div(col) > .thumbnail > img + .caption > .titolo_scheda (titolo: h2, h3 o h4 secondo il livello scelto nel widget) + p (descrizione) */ .au-hero .schede_bootstrap, .au-pan .schede_bootstrap, .au-gal .schede_bootstrap, .au-sections .schede_bootstrap, .au-faq-sec .schede_bootstrap, .au-around .schede_bootstrap, .au-mini .schede_bootstrap { margin: 0; } .au-pan .schede_bootstrap::before, .au-pan .schede_bootstrap::after, .au-gal .schede_bootstrap::before, .au-gal .schede_bootstrap::after, .au-sections .schede_bootstrap::before, .au-sections .schede_bootstrap::after, .au-faq-sec .schede_bootstrap::before, .au-faq-sec .schede_bootstrap::after, .au-around .schede_bootstrap::before, .au-around .schede_bootstrap::after, .au-mini .schede_bootstrap::before, .au-mini .schede_bootstrap::after, .au-hero .schede_bootstrap::before { display: none; } .au-main .schede_bootstrap > .clearfix { display: none !important; } .au-hero .schede_bootstrap > div, .au-pan .schede_bootstrap > div, .au-gal .schede_bootstrap > div, .au-sections .schede_bootstrap > div, .au-faq-sec .schede_bootstrap > div, .au-around .schede_bootstrap > div, .au-mini .schede_bootstrap > div { float: none; width: auto; min-height: 0; padding: 0; } #layout_wrapper .au-hero .thumbnail, #layout_wrapper .au-pan .thumbnail, #layout_wrapper .au-gal .thumbnail, #layout_wrapper .au-sections .thumbnail, #layout_wrapper .au-faq-sec .thumbnail, #layout_wrapper .au-around .thumbnail, #layout_wrapper .au-mini .thumbnail { display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } #layout_wrapper .au-main .thumbnail > .row { display: none; } #layout_wrapper .au-pan .caption, #layout_wrapper .au-gal .caption, #layout_wrapper .au-sections .caption, #layout_wrapper .au-faq-sec .caption, #layout_wrapper .au-around .caption, #layout_wrapper .au-mini .caption { padding: 0; color: inherit; } /* una descrizione salvata dal backoffice arriva dentro un suo

; VelociBuilder la mette in un altro

e nella pagina restano due paragrafi vuoti, prima e dopo il testo: in nessuna lista devono occupare spazio */ #layout_wrapper .thumbnail .caption p:empty { display: none; } /* ------------------------------------------------------------ home: apertura (lista "Home - foto di apertura") */ .au-hero > .row > .editor_colonna { position: relative; height: clamp(560px, min(70vw, calc(100vh - 190px)), 860px); overflow: hidden; background: var(--au-gd); } .au-hero .schede_bootstrap { position: absolute; inset: 0; } .au-hero .schede_bootstrap > div, #layout_wrapper .au-hero .thumbnail { position: static; } #layout_wrapper .au-hero .caption { display: none; } #layout_wrapper .au-hero .schede_bootstrap img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; object-position: 50% 62%; opacity: 0; transition: opacity 1.5s ease-in-out; animation: auKB 16s ease-in-out infinite alternate; will-change: opacity, transform; } #layout_wrapper .au-hero .schede_bootstrap > div:nth-of-type(even) img { animation-name: auKB2; } #layout_wrapper .au-hero .schede_bootstrap:not(.au-js) > div:first-child img, #layout_wrapper .au-hero .schede_bootstrap img.on { opacity: 1; } /* le foto dopo la prima non vengono scaricate finche' non servono: lo script accende una foto alla volta (au-carica) poco prima di mostrarla, o tutte insieme (au-tutte) quando si sceglie una foto con i punti */ #layout_wrapper .au-hero .schede_bootstrap:not(.au-tutte) > div:not(:first-child):not(.au-carica) img { display: none; } .au-hero .schede_bootstrap::after { content: ""; display: block; position: absolute; inset: 0; pointer-events: none; /* velo solo dove serve: dietro ai testi, a sinistra, e via via trasparente verso destra, dove la foto resta com'e'; in basso una sfumatura leggera per i trattini. Dal 5/10/2026 il velo e' circa la meta' di prima: a tenere leggibili i testi sono soprattutto le loro ombre (vedi .au-hero-text). Le distanze partono dal bordo sinistro dei testi (la pagina e' larga al massimo 1280 px), cosi' vale anche sugli schermi molto larghi */ background: linear-gradient(180deg, rgba(13, 30, 16, 0) 66%, rgba(13, 30, 16, .16) 100%), linear-gradient(90deg, rgba(13, 30, 16, .28) 0, rgba(13, 30, 16, .24) calc(max(0px, 50% - 640px) + 300px), rgba(13, 30, 16, .12) calc(max(0px, 50% - 640px) + 700px), rgba(13, 30, 16, .03) calc(max(0px, 50% - 640px) + 920px), rgba(13, 30, 16, 0) calc(max(0px, 50% - 640px) + 1100px)); } /* sul telefono i testi occupano tutta la larghezza: velo dall'alto in basso, piu' leggero di prima */ @media (max-width: 767px) { .au-hero .schede_bootstrap::after { background: linear-gradient(180deg, rgba(13, 30, 16, .08) 0%, rgba(13, 30, 16, .2) 42%, rgba(13, 30, 16, .26) 100%); } } .au-hero-dots { position: absolute; left: 20px; right: 20px; bottom: 24px; z-index: 3; display: flex; gap: 6px; max-width: 1240px; margin: 0 auto; } .au-hero-dots button { flex: 0 0 36px; height: 14px; padding: 5px 0; border: 0; background: transparent; cursor: pointer; } .au-hero-dots button span { display: block; height: 3px; background: rgba(255, 255, 255, .45); overflow: hidden; } .au-hero-dots button.on span::after { content: ""; display: block; height: 100%; background: #fff; transform-origin: left; animation: auBar 5s linear forwards; } .au-hero .editor_colonna > div[id^="testo_"] { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; padding: clamp(72px, 8vw, 96px) 0 clamp(56px, 6vw, 72px); pointer-events: none; } .au-hero-text { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; pointer-events: auto; color: #fff; } .au-hero-text .au-kicker { letter-spacing: .16em; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 1px 12px rgba(0, 0, 0, .55); max-width: 860px; } #layout_wrapper .au-hero-text h1 { max-width: 860px; margin-top: 10px; color: #fff; font-size: clamp(42px, 6.4vw, 84px); line-height: .95; text-wrap: balance; text-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 2px 26px rgba(0, 0, 0, .45); } /* il titolo principale della home (H1) e' la riga piccola con le parole chiave; lo slogan grande e' un paragrafo. L'aspetto e' quello di prima; restano valide anche le regole per la forma precedente (riga in

, slogan in

) */ #layout_wrapper .au-hero-text h1.au-hero-kicker { max-width: 860px; margin-top: 0; font: 600 15px/1.3 var(--au-fc); letter-spacing: .16em; color: var(--au-y); text-wrap: wrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 1px 12px rgba(0, 0, 0, .55); } /* slogan in corsivo (Hurricane), minuscolo: sul telefono la misura segue la larghezza perche' "panorama mozzafiato" resti su una riga. Il carattere ha un solo peso: il contorno sottile (-webkit-text-stroke) gli da' un po' piu' di corpo; per regolarlo basta quel valore */ #layout_wrapper .au-hero-text .au-hero-claim { max-width: 900px; margin-top: 14px; padding-bottom: .08em; font: 400 clamp(44px, max(7.6vw, min(13.2vw, 56px)), 106px)/.9 var(--au-fs); text-transform: none; letter-spacing: 0; color: #fff; -webkit-text-stroke: .016em currentColor; paint-order: stroke fill; text-wrap: balance; text-shadow: 0 1px 3px rgba(0, 0, 0, .42), 0 2px 22px rgba(0, 0, 0, .5), 0 0 56px rgba(0, 0, 0, .22); } #layout_wrapper .au-hero-p { max-width: 900px; text-wrap: pretty; margin-top: 22px; font-size: 18px; line-height: 1.55; color: #f8faf5; text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 1px 14px rgba(0, 0, 0, .6); } #layout_wrapper .au-hero-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } /* ------------------------------------------------------------ home: striscia del panorama (lista "Panorama - foto", schede in evidenza) */ .au-pan { margin-top: var(--au-pad); background: var(--au-gd); } .au-pan .au-sec-head { max-width: 1280px; margin: 0 auto; padding: clamp(28px, 4vw, 48px) 20px 18px; } #layout_wrapper .au-pan h2:not(.titolo_scheda) { color: #fff; } #layout_wrapper .au-pan .au-sec-head a { color: var(--au-y); } .au-pan .schede_bootstrap { display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: clamp(28px, 4vw, 48px); } .au-pan .schede_bootstrap > div { flex: none; width: 72vw; scroll-snap-align: start; } #layout_wrapper .au-pan .thumbnail img { display: block; width: 100% !important; max-width: none; height: clamp(160px, 18vw, 260px) !important; object-fit: cover; } #layout_wrapper .au-pan .caption .titolo_scheda { padding: 12px 16px 0; font: 600 18px/1.2 var(--au-fc); letter-spacing: .04em; text-transform: uppercase; color: #fff; } @media (min-width: 1100px) { .au-pan .schede_bootstrap > div { width: 30vw; } } /* ------------------------------------------------------------ home: luoghi vicini (lista "Dintorni - luoghi", schede in evidenza) */ .au-mini .schede_bootstrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--au-line); border: 2px solid var(--au-line); } #layout_wrapper .au-mini .thumbnail { height: 100%; padding: 14px 16px; background: #fff; } #layout_wrapper .au-mini .caption { display: flex; flex-direction: column-reverse; gap: 2px; } #layout_wrapper .au-mini .caption p { font-size: 0; line-height: 0; } #layout_wrapper .au-mini .caption p strong { font: 700 28px/1 var(--au-fc); color: var(--au-o); } #layout_wrapper .au-mini .caption .titolo_scheda { font: 500 15px/1.4 var(--au-fb); text-transform: none; color: var(--au-ink); } /* ------------------------------------------------------------ fascia di invito, pie' di pagina, barre fisse */ .au-cta { margin-top: var(--au-pad); background: var(--au-o); } .au-cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: clamp(32px, 5vw, 56px) 0; } #layout_wrapper .au-cta h2 { color: #fff; font-size: clamp(32px, 4vw, 52px); } /* testo bianco: il crema #fff3e8 sull'arancio arrivava a 4,28 di contrasto, il minimo e' 4,5 (bianco: 4,67) */ #layout_wrapper .au-cta-in > div p { margin-top: 8px; font-size: 18px; color: #fff; } #layout_wrapper .au-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; } #layout_wrapper:has(.au-page-contatti) .au-cta, #layout_wrapper:has(.au-page-legale) .au-cta { display: none; } #layout_wrapper:has(.au-page-contatti) .au-footer, #layout_wrapper:has(.au-page-legale) .au-footer { margin-top: var(--au-pad); } .au-footer, .au-footer-bottom { background: var(--au-gd); color: #c9d6bf; } .au-footer > .au-ft-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 32px; padding-top: 48px; padding-bottom: 28px; font-size: 15px; line-height: 1.7; } .au-footer strong { color: #fff; font-weight: 600; } #layout_wrapper .au-footer a, #layout_wrapper .au-footer-bottom a { color: #fff; cursor: pointer; } /* loghi nel pie' di pagina, senza riquadro: il logo AlbaUmbra e' la versione a colori con la scritta piccola bianca (Logo_AlbaUmbra_01.png), appena schiarita perche' il nome verde si stacchi dal fondo; il logo Umbria e' reso in bianco */ .au-ft-logo { display: inline-block; } /* i due loghi del pie' di pagina si caricano solo quando servono (loading=lazy): larghezza e proporzioni dichiarate qui (come per le foto delle liste) tengono riservato il loro spazio. object-fit: un logo nuovo con altre proporzioni non viene deformato, resta dentro lo stesso riquadro */ #layout_wrapper .au-ft-logo img { display: block; width: 176px; height: auto; aspect-ratio: 890 / 500; object-fit: contain; filter: brightness(1.28) saturate(1.05); } #layout_wrapper .au-ft-social { display: flex; gap: 8px; margin-top: 14px; } #layout_wrapper .au-ft-social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 3px; background: var(--au-g); font-size: 0; overflow: hidden; } #layout_wrapper .au-ft-social a::before { font: 18px/1 FontAwesome; } #layout_wrapper .au-ft-social a[href*="facebook"]::before { content: "\f09a"; } #layout_wrapper .au-ft-social a[href*="instagram"]::before { content: "\f16d"; } #layout_wrapper .au-ft-social a:hover { background: #2f6f37; text-decoration: none; } .au-ft-badge { min-height: 70px; margin-bottom: 20px; } .au-ft-umbria { display: flex; align-items: center; gap: 14px; font-size: 14px; line-height: 1.35; } #layout_wrapper .au-ft-umbria img { width: 62px; height: auto; aspect-ratio: 558 / 600; object-fit: contain; filter: brightness(0) invert(1); opacity: .82; } .au-footer-bottom { border-top: 3px solid transparent; border-image: linear-gradient(90deg, #e8620c, var(--au-y) 50%, var(--au-g)) 1; } /* barra in fondo: i link a Privacy, Cookie e Preferenze cookie, al centro della pagina. Il testo e' un paragrafo semplice di link scritto dal backoffice, senza classi: lo stile viene dalla classe della sezione (au-footer-bottom). Un a capo o un contenitore lasciati dall'editor non cambiano l'allineamento */ #layout_wrapper .au-footer-bottom p { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 0; padding: 16px 0 28px; font-size: 13px; text-align: center; } #layout_wrapper .au-footer-bottom p br { display: none; } #layout_wrapper .au-footer-bottom p > span { display: contents; } /* sui telefoni stretti il lucchetto dei cookie, fisso in basso a sinistra, arriverebbe sul primo link: la riga gli lascia posto */ @media (max-width: 420px) { #layout_wrapper .au-footer-bottom p { padding-left: 48px; padding-right: 48px; } } .au-fixed { height: 0; } .au-bar-m { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; height: 60px; } #layout_wrapper .au-bar-m a { display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; text-decoration: none; } #layout_wrapper .au-bar-avail { flex: 1; background: var(--au-o); font: 700 19px/1 var(--au-fc); letter-spacing: .06em; text-transform: uppercase; } #layout_wrapper .au-bar-avail::before { content: "\f073"; font: 19px/1 FontAwesome; } #layout_wrapper .au-bar-wa { width: 64px; background: var(--au-g); font-size: 0; } #layout_wrapper .au-bar-wa::before, #layout_wrapper .au-bar-d a::before { content: "\f232"; font: 26px/1 FontAwesome; } .au-bar-d { display: none; } /* il pulsante WhatsApp degli schermi grandi: vedi "pulsanti fissi" piu' sotto */ html body { padding-bottom: 60px; } @media (min-width: 1100px) { .au-bar-m { display: none; } .au-bar-d { display: block; } html body { padding-bottom: 0; } } /* ------------------------------------------------------------ testa delle pagine interne e degli ambienti */ /* foto di apertura delle pagine: widget immagine di VelociBuilder */ #layout_wrapper .au-room-hero img, #layout_wrapper .au-headimg img, #layout_wrapper .au-widephoto img { display: block; width: 100%; max-width: none; object-fit: cover; } #layout_wrapper .au-room-hero img { height: clamp(300px, 46vw, 720px); } /* inquadratura delle foto a fascia: la classe au-yNN sulla sezione dice quale altezza della foto resta in vista (au-y20 = parte alta, au-y50 = centro, au-y80 = parte bassa). Si cambia dall'editor, nel campo classe della sezione. */ #layout_wrapper .au-y10 img { object-position: 50% 10%; } #layout_wrapper .au-y15 img { object-position: 50% 15%; } #layout_wrapper .au-y20 img { object-position: 50% 20%; } #layout_wrapper .au-y25 img { object-position: 50% 25%; } #layout_wrapper .au-y30 img { object-position: 50% 30%; } #layout_wrapper .au-y40 img { object-position: 50% 40%; } #layout_wrapper .au-y45 img { object-position: 50% 45%; } #layout_wrapper .au-y50 img { object-position: 50% 50%; } #layout_wrapper .au-y55 img { object-position: 50% 55%; } #layout_wrapper .au-y60 img { object-position: 50% 60%; } #layout_wrapper .au-y70 img { object-position: 50% 70%; } #layout_wrapper .au-y75 img { object-position: 50% 75%; } #layout_wrapper .au-y80 img { object-position: 50% 80%; } #layout_wrapper .au-y85 img { object-position: 50% 85%; } #layout_wrapper .au-y90 img { object-position: 50% 90%; } #layout_wrapper .au-y35 img { object-position: 50% 35%; } #layout_wrapper .au-y38 img { object-position: 50% 38%; } #layout_wrapper .au-y62 img { object-position: 50% 62%; } #layout_wrapper .au-y65 img { object-position: 50% 65%; } #layout_wrapper .au-y78 img { object-position: 50% 78%; } #layout_wrapper .au-headimg img { height: clamp(200px, 22vw, 320px); background: var(--au-gd); } #layout_wrapper .au-widephoto img { height: clamp(280px, 44vw, 620px); } .au-pagehead { background: var(--au-g); color: #fff; padding: clamp(28px, 4vw, 48px) 0; } /* pagina "non trovata": pulsanti e rimando all'altra lingua dentro la testa verde */ #layout_wrapper .au-404-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } #layout_wrapper .au-404-en { margin-top: 16px; font-size: 15px; } #layout_wrapper .au-404-en a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } #layout_wrapper .au-404-en a:hover { color: var(--au-y); } #layout_wrapper .au-pagehead h1 { max-width: 20ch; margin-top: 10px; color: #fff; font-size: clamp(36px, 5vw, 66px); line-height: .98; text-wrap: balance; } #layout_wrapper .au-lead { max-width: 44em; margin-top: 16px; font-size: 18px; line-height: 1.6; color: #e4ecdc; text-wrap: pretty; } #layout_wrapper .au-lead a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* link nel testo della banda verde (Dintorni -> Trekking) */ #layout_wrapper .au-lead a:hover { color: var(--au-y); } /* ------------------------------------------------------------ pagine degli ambienti */ .au-facts { background: #fff; border-bottom: 1px solid var(--au-line); } .au-facts-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .au-facts-list li { display: flex; align-items: center; gap: 10px; padding: 18px 14px; border-right: 1px solid var(--au-line); font: 600 20px/1.2 var(--au-fc); letter-spacing: .03em; text-transform: uppercase; color: var(--au-gd); } .au-facts-list li::before { content: "\f00c"; font: 15px/1 FontAwesome; color: var(--au-o); } /* sezioni foto + testo (lista "Ambienti - sezioni delle pagine"): foto e testo affiancati, a lati alterni. Il blocco di testo sta al centro della sua colonna, il testo resta allineato a sinistra. */ .au-sections .schede_bootstrap { counter-reset: au-sez; } #layout_wrapper .au-sections .thumbnail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); background: var(--au-bg); counter-increment: au-sez; } #layout_wrapper .au-sections .schede_bootstrap > div:nth-of-type(even) .thumbnail { background: #fff; } #layout_wrapper .au-sections .thumbnail img { display: block; width: 100% !important; height: 100% !important; min-height: 240px; max-height: 460px; max-width: none; aspect-ratio: 16 / 10; object-fit: cover; } #layout_wrapper .au-sections .caption { display: flex; flex-direction: column; justify-content: center; gap: 14px; width: 100%; max-width: 480px; margin: 0 auto; padding: clamp(28px, 5vw, 64px) 20px; text-align: left; } #layout_wrapper .au-sections .caption::before { content: "0" counter(au-sez); font: 700 20px/1 var(--au-fc); color: var(--au-o); } #layout_wrapper .au-sections .caption .titolo_scheda { font: 700 clamp(28px, 3.2vw, 42px)/1 var(--au-fc); text-transform: uppercase; color: var(--au-gd); text-wrap: balance; } #layout_wrapper .au-sections .caption p { font-size: 18px; line-height: 1.65; color: var(--au-txt); text-wrap: pretty; } #layout_wrapper .au-sections .caption p:empty { display: none; } /* su computer l'altezza cresce con la larghezza dello schermo, cosi' sui monitor molto larghi le foto non restano basse */ @media (min-width: 1100px) { #layout_wrapper .au-sections .thumbnail img { aspect-ratio: auto; max-height: none; height: clamp(400px, 32vw, 740px) !important; } } @media (min-width: 1100px) { #layout_wrapper .au-sections .schede_bootstrap > div:nth-of-type(even) .thumbnail img { order: 2; } } .au-inroom { background: var(--au-soft); padding: clamp(40px, 6vw, 72px) 0; } #layout_wrapper .au-inroom h2:not(.titolo_scheda) { margin-bottom: 22px; font-size: clamp(26px, 3vw, 36px); } /* servizi: icone (lista di VelociBuilder) */ .au-icons .schede_bootstrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2px; margin: 0; background: var(--au-line); } .au-inroom .schede_bootstrap { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); background: none; } .au-icons .schede_bootstrap::before, .au-icons .schede_bootstrap::after, .au-icons .schede_bootstrap > .clearfix { display: none !important; } .au-icons .schede_bootstrap > div { float: none; width: auto; padding: 0; } #layout_wrapper .au-icons .thumbnail { display: flex; flex-direction: column; align-items: center; gap: 12px; height: 100%; margin: 0; padding: 22px 12px; border: 0; border-radius: 0; background: #fff; text-align: center; } #layout_wrapper .au-icons .thumbnail img { width: 48px !important; height: 48px !important; object-fit: contain; } #layout_wrapper .au-icons .thumbnail > .row { display: none; } #layout_wrapper .au-icons .caption { padding: 0; color: var(--au-ink); } #layout_wrapper .au-icons .caption .titolo_scheda { font: 500 15px/1.3 var(--au-fb); text-transform: none; color: var(--au-ink); } .au-group { padding-top: clamp(40px, 6vw, 64px); } .au-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin-bottom: 2px; padding-bottom: 12px; border-bottom: 3px solid var(--au-g); } #layout_wrapper .au-group-head h2:not(.titolo_scheda) { font-size: clamp(28px, 3.2vw, 40px); } #layout_wrapper .au-group-head p { font-size: 16px; color: var(--au-mut); } /* ------------------------------------------------------------ panorama (lista "Panorama - foto") */ .au-gal .schede_bootstrap { display: flex; flex-direction: column; gap: 2px; background: var(--au-gd); } #layout_wrapper .au-gal .thumbnail img { display: block; width: 100% !important; height: auto !important; max-width: none; aspect-ratio: 2.13; object-fit: cover; } #layout_wrapper .au-gal .caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 14px 20px; background: var(--au-gd); } #layout_wrapper .au-gal .caption .titolo_scheda { font: 700 20px/1.2 var(--au-fc); letter-spacing: .04em; text-transform: uppercase; color: #fff; } #layout_wrapper .au-gal .caption p { font-size: 15px; color: #c9d6bf; } /* ------------------------------------------------------------ dintorni (lista "Dintorni - luoghi": descrizione = tempo in grassetto + testo) */ .au-around { padding-top: clamp(40px, 6vw, 72px); } /* I luoghi (lista "Dintorni - luoghi"): titolo = luogo, descrizione = tempo in auto in grassetto seguito dal testo, foto dalla libreria. Da 600 px e' un mosaico: nome e tempo sopra la foto, descrizione sotto, il primo luogo grande. Sul telefono una riga per luogo, con la miniatura a sinistra. Un luogo senza foto resta leggibile in tutti e due. */ .au-around .schede_bootstrap > .clearfix { display: none; } /* le interruzioni di riga di VelociBuilder occuperebbero una casella */ #layout_wrapper .au-around .thumbnail > .row { display: none; } #layout_wrapper .au-around .thumbnail img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--au-soft); } #layout_wrapper .au-note { margin-top: 16px; font-size: 14px; color: var(--au-mut); } @media (max-width: 599px) { .au-around .schede_bootstrap { border-top: 3px solid var(--au-g); } #layout_wrapper .au-around .thumbnail { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--au-line); } #layout_wrapper .au-around .thumbnail:not(:has(img)) { display: block; } #layout_wrapper .au-around .thumbnail img { border-radius: 2px; } #layout_wrapper .au-around .caption { font-size: 14.5px; line-height: 1.45; color: var(--au-txt); } #layout_wrapper .au-around .caption .titolo_scheda { display: inline; margin: 0 8px 0 0; font: 700 22px/1.25 var(--au-fc); text-transform: uppercase; color: var(--au-gd); } #layout_wrapper .au-around .caption p { display: inline; } #layout_wrapper .au-around .caption p strong { font: 700 22px/1.25 var(--au-fc); color: var(--au-o); white-space: nowrap; } #layout_wrapper .au-around .caption p strong::after { content: "\A"; white-space: pre; } /* a capo: la descrizione parte dalla riga sotto */ /* il primo luogo, il piu' vicino, in apertura con la foto larga */ #layout_wrapper .au-around .schede_bootstrap > div:first-child .thumbnail { display: block; padding-top: 0; } #layout_wrapper .au-around .schede_bootstrap > div:first-child .thumbnail img { aspect-ratio: 16 / 9; margin-bottom: 12px; border-radius: 0; } } @media (min-width: 600px) { .au-around .schede_bootstrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; } #layout_wrapper .au-around .thumbnail { position: relative; } /* velo scuro nella parte bassa della foto, dove sta il nome */ #layout_wrapper .au-around .thumbnail::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; aspect-ratio: 4 / 3; background: linear-gradient(180deg, rgba(13, 30, 16, 0) 45%, rgba(13, 30, 16, .78) 100%); pointer-events: none; } #layout_wrapper .au-around .thumbnail:not(:has(img))::before { background: var(--au-gd); } #layout_wrapper .au-around .caption { padding: 10px 2px 0; font-size: 14.5px; line-height: 1.45; color: var(--au-txt); } #layout_wrapper .au-around .caption .titolo_scheda { position: absolute; z-index: 2; left: 0; top: 0; box-sizing: border-box; width: 100%; aspect-ratio: 4 / 3; display: flex; align-items: flex-end; margin: 0; padding: 0 14px 12px; font: 700 26px/1 var(--au-fc); text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); pointer-events: none; } #layout_wrapper .au-around .caption p { display: inline; } #layout_wrapper .au-around .caption p strong { position: absolute; z-index: 2; top: 10px; right: 10px; padding: 6px 9px 5px; background: var(--au-o); color: #fff; font: 700 18px/1 var(--au-fc); white-space: nowrap; } /* il primo luogo, il piu' vicino: casella doppia, con il testo sopra la foto */ .au-around .schede_bootstrap > div:first-child { grid-column: span 2; } #layout_wrapper .au-around .schede_bootstrap > div:first-child .thumbnail { display: flex; flex-direction: column; height: 100%; } #layout_wrapper .au-around .schede_bootstrap > div:first-child .thumbnail img { aspect-ratio: 16 / 9; object-position: 50% 35%; } #layout_wrapper .au-around .schede_bootstrap > div:first-child .thumbnail::before { aspect-ratio: auto; bottom: 0; background: linear-gradient(180deg, rgba(13, 30, 16, 0) 40%, rgba(13, 30, 16, .82) 100%); } #layout_wrapper .au-around .schede_bootstrap > div:first-child .caption { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 18px; padding: 0; font-size: 17px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); } #layout_wrapper .au-around .schede_bootstrap > div:first-child .caption .titolo_scheda { position: static; display: block; width: auto; aspect-ratio: auto; margin: 0 0 8px; padding: 0 90px 0 0; font-size: 44px; } #layout_wrapper .au-around .schede_bootstrap > div:first-child .caption p strong { top: 8px; right: 0; text-shadow: none; } } @media (min-width: 700px) { .au-around .schede_bootstrap { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* la casella grande prende l'altezza della riga: la foto riempie lo spazio */ #layout_wrapper .au-around .schede_bootstrap > div:first-child .thumbnail img { flex: 1 1 0; min-height: 0; aspect-ratio: auto; } } @media (min-width: 1200px) { .au-around .schede_bootstrap { grid-template-columns: repeat(4, minmax(0, 1fr)); } .au-around .schede_bootstrap > div:first-child { grid-row: span 2; } } /* crediti delle foto: un paragrafo fitto sotto l'elenco */ .au-crediti { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--au-line); font-size: 12.5px; line-height: 1.6; color: var(--au-mut); } .au-crediti p { display: inline; margin: 0; } .au-crediti .au-crediti-t { font: 600 13px/1.6 var(--au-fc); letter-spacing: .08em; text-transform: uppercase; color: var(--au-gd); } .au-crediti .au-crediti-t::after { content: ". "; } .au-crediti ul { display: inline; margin: 0; padding: 0; list-style: none; } .au-crediti ul::before { content: " "; } .au-crediti li { display: inline; } .au-crediti li + li::before { content: " · "; } #layout_wrapper .au-crediti a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } #layout_wrapper .au-crediti a:hover { color: var(--au-o); } /* ------------------------------------------------------------ trekking (lista "Trekking - percorsi") Una sezione au-trek per zona: titolo della zona (testo) e la lista filtrata con l'etichetta della zona. Descrizione della scheda: un paragrafo con i minuti in auto in grassetto e i dati del percorso in corsivo ("20 min 8 km · 413 m · 3 ore · E"), poi il testo, poi il paragrafo con il link alla fonte. Il tempo diventa il bollino arancione sulla foto, come nella pagina Dintorni; i dati una riga verde. VelociBuilder racchiude la descrizione in un altro paragrafo: i paragrafi si riconoscono da cio' che contengono (em, a). */ .au-trek { padding-top: clamp(40px, 6vw, 72px); } .au-trek .au-sec-head + p { max-width: 46em; margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--au-txt); text-wrap: pretty; } .au-trek [id^="testo_"] { margin-bottom: 24px; } .au-trek .schede_bootstrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin: 0; } .au-trek .schede_bootstrap::before, .au-trek .schede_bootstrap::after, .au-trek .schede_bootstrap > .clearfix { display: none; } .au-trek .schede_bootstrap > div { float: none; width: auto; min-height: 0; padding: 0; } #layout_wrapper .au-trek .thumbnail { position: relative; display: flex; flex-direction: column; height: 100%; margin: 0; padding: 0; border: 1px solid var(--au-line); border-radius: 0; background: #fff; box-shadow: none; } #layout_wrapper .au-trek .thumbnail > .row { display: none; } #layout_wrapper .au-trek .thumbnail img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--au-soft); } #layout_wrapper .au-trek .caption { padding: 16px 18px 18px; font-size: 15px; line-height: 1.55; color: var(--au-txt); } #layout_wrapper .au-trek .caption .titolo_scheda { margin: 0 0 8px; font: 700 26px/1.05 var(--au-fc); text-transform: uppercase; color: var(--au-gd); text-wrap: balance; } #layout_wrapper .au-trek .caption p:empty { display: none; } #layout_wrapper .au-trek .caption p:not(:empty) ~ p:not(:empty) { margin-top: 10px; } #layout_wrapper .au-trek .caption p:has(> em) > strong:first-child { position: absolute; z-index: 2; top: 10px; right: 10px; padding: 6px 9px 5px; background: var(--au-o); color: #fff; font: 700 18px/1 var(--au-fc); white-space: nowrap; } #layout_wrapper .au-trek .thumbnail:not(:has(img)) .caption p:has(> em) > strong:first-child { position: static; display: inline-block; margin: 0 8px 4px 0; } #layout_wrapper .au-trek .caption p:has(> em) > em { font: 600 16px/1.35 var(--au-fc); letter-spacing: .05em; text-transform: uppercase; color: var(--au-g); } #layout_wrapper .au-trek .caption p:has(> a) { font-size: 14px; color: var(--au-mut); } #layout_wrapper .au-trek .caption a { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } #layout_wrapper .au-trek .caption a:hover { color: var(--au-o); } /* da 700 px due schede per riga; una zona con una scheda sola la mostra larga, foto a sinistra e testo a destra */ @media (min-width: 700px) { .au-trek .schede_bootstrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; } .au-trek .schede_bootstrap:not(:has(> div:not(.clearfix) ~ div:not(.clearfix))) { grid-template-columns: minmax(0, 1fr); } #layout_wrapper .au-trek .schede_bootstrap:not(:has(> div:not(.clearfix) ~ div:not(.clearfix))) .thumbnail:has(img) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } #layout_wrapper .au-trek .schede_bootstrap:not(:has(> div:not(.clearfix) ~ div:not(.clearfix))) .thumbnail:has(img) .caption { padding: clamp(18px, 2.4vw, 30px); font-size: 16px; } #layout_wrapper .au-trek .schede_bootstrap:not(:has(> div:not(.clearfix) ~ div:not(.clearfix))) .caption p:has(> em) > strong:first-child { right: auto; left: 10px; } } /* "Prima di partire": consigli su fondo chiaro, crediti delle foto sotto */ .au-trek-info { padding-top: clamp(40px, 6vw, 72px); } #layout_wrapper .au-trek-info h2 { margin-bottom: 14px; } .au-trek-info > .row:first-child [id^="testo_"] { padding: clamp(20px, 3vw, 32px); background: var(--au-soft); border-left: 4px solid var(--au-g); } #layout_wrapper .au-trek-info p, #layout_wrapper .au-trek-info li { max-width: 60em; font-size: 15.5px; line-height: 1.6; color: var(--au-txt); } #layout_wrapper .au-trek-info p + p { margin-top: 10px; } #layout_wrapper .au-trek-info ul { margin-top: 10px; } #layout_wrapper .au-trek-info li { position: relative; padding-left: 18px; } #layout_wrapper .au-trek-info li + li { margin-top: 6px; } #layout_wrapper .au-trek-info p a, #layout_wrapper .au-trek-info li a { text-decoration: underline; text-underline-offset: 2px; } #layout_wrapper .au-trek-info li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--au-o); } #layout_wrapper .au-trek-info .au-crediti p, #layout_wrapper .au-trek-info .au-crediti li { font-size: 12.5px; padding-left: 0; } #layout_wrapper .au-trek-info .au-crediti li::before { content: " · "; position: static; width: auto; height: auto; background: none; } #layout_wrapper .au-trek-info .au-crediti li:first-child::before { content: none; } #layout_wrapper .au-trek-info .au-crediti li + li { margin-top: 0; } /* ------------------------------------------------------------ domande frequenti (lista "Domande frequenti": titolo = domanda, descrizione = risposta) */ .au-faq-sec { padding-top: clamp(40px, 6vw, 72px); } .au-faq-sec > .row { max-width: 900px; } .au-faq-sec .schede_bootstrap { display: flex; flex-direction: column; gap: 6px; } #layout_wrapper .au-faq-sec .thumbnail { border: 1px solid var(--au-line); background: #fff; } #layout_wrapper .au-faq-sec .caption .titolo_scheda { position: relative; padding: 18px 64px 18px 20px; color: var(--au-ink); font: 600 18px/1.35 var(--au-fb); text-transform: none; cursor: pointer; } #layout_wrapper .au-faq-sec .caption .titolo_scheda::after { content: "\f067"; position: absolute; right: 20px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 3px; background: var(--au-g); color: var(--au-y); font: 14px/28px FontAwesome; text-align: center; } #layout_wrapper .au-faq-sec .caption p { padding: 0 20px 20px; font-size: 16px; line-height: 1.65; color: var(--au-txt); } #layout_wrapper .au-faq-sec .caption p:empty { display: none; } #layout_wrapper .au-faq-sec .au-js .thumbnail.au-open { border-color: var(--au-g); background: var(--au-g); } #layout_wrapper .au-faq-sec .au-js .thumbnail.au-open .titolo_scheda { color: #fff; } #layout_wrapper .au-faq-sec .au-js .thumbnail.au-open .titolo_scheda::after { content: "\f068"; } #layout_wrapper .au-faq-sec .au-js .thumbnail.au-open p { color: #e4ecdc; } #layout_wrapper .au-faq-sec .au-js .thumbnail:not(.au-open) .caption p { display: none; } /* ------------------------------------------------------------ tariffe */ .au-rates { padding-top: clamp(40px, 6vw, 72px); } #layout_wrapper .au-rates h2:not(.titolo_scheda) { font-size: clamp(28px, 3.2vw, 40px); } #layout_wrapper .au-prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; margin-top: 20px; background: var(--au-line); border: 2px solid var(--au-g); } .au-prices li { display: flex; flex-direction: column; gap: 6px; padding: 22px 18px; background: #fff; } .au-prices span { font-size: 16px; color: var(--au-mut); } .au-prices strong { font: 700 52px/1 var(--au-fc); color: var(--au-g); } /* tariffe secondo quanti siete: riga dei supplementi sotto i prezzi e calcolo del prezzo (lo script legge i prezzi scritti qui sopra nella pagina; senza script il calcolo resta nascosto) */ /* tariffe: una riga per fascia di notti, una colonna per numero di adulti; la casella scelta nel calcolo e' segnata */ .au-tariffe-box { margin-top: 20px; border: 2px solid var(--au-g); background: #fff; } #layout_wrapper .au-tariffe { width: 100%; margin: 0; border-collapse: collapse; table-layout: fixed; } #layout_wrapper .au-tariffe th, #layout_wrapper .au-tariffe td { padding: 16px 18px; border: 0; border-top: 2px solid var(--au-line); border-left: 2px solid var(--au-line); text-align: left; vertical-align: middle; } #layout_wrapper .au-tariffe tr > :first-child { width: 24%; border-left: 0; } #layout_wrapper .au-tariffe thead th { border-top: 0; border-left-color: rgba(255, 255, 255, .25); background: var(--au-g); font: 700 18px/1.2 var(--au-fc); letter-spacing: .04em; text-transform: uppercase; color: #fff; } #layout_wrapper .au-tariffe tbody th { font: 600 16px/1.3 var(--au-fb); color: var(--au-ink); } #layout_wrapper .au-tariffe td { font: 700 38px/1 var(--au-fc); color: var(--au-g); } #layout_wrapper .au-tariffe td.au-scelta { background: var(--au-soft); box-shadow: inset 0 0 0 3px var(--au-o); } @media (max-width: 640px) { #layout_wrapper .au-tariffe th, #layout_wrapper .au-tariffe td { padding: 12px 8px; } #layout_wrapper .au-tariffe thead th { font-size: 14px; letter-spacing: .02em; } #layout_wrapper .au-tariffe tbody th { font-size: 14px; } #layout_wrapper .au-tariffe td { font-size: 25px; } } /* supplementi per i bambini da 4 a 13 anni: una colonna per fascia di notti, prima riga il primo bambino, seconda gli altri */ .au-tariffe-box-bambini { margin-top: 10px; border-color: var(--au-line); } #layout_wrapper .au-tariffe-bambini tr > :first-child { width: 34%; } #layout_wrapper .au-tariffe-bambini thead th { border-left-color: var(--au-line); background: var(--au-soft); font-size: 16px; color: var(--au-gd); } #layout_wrapper .au-tariffe-bambini td { font-size: 30px; color: var(--au-o); white-space: nowrap; } @media (max-width: 640px) { #layout_wrapper .au-tariffe-bambini thead th { font-size: 13px; } #layout_wrapper .au-tariffe-bambini td { font-size: 22px; } } #layout_wrapper .au-esempi { display: flex; flex-wrap: wrap; gap: 6px 32px; margin: 16px 0 0; font-size: 16px; line-height: 1.5; color: var(--au-txt); } .au-esempi strong { font: 700 24px/1 var(--au-fc); color: var(--au-o); } .au-calc-totale { display: block; margin-top: 2px; font-weight: 600; color: var(--au-ink); } /* nel calcolo: in grande il totale del soggiorno, sotto le notti e il prezzo a notte, poi cio' che e' incluso */ .au-calc-totale:has(.au-calc-anotte) { margin-top: 4px; font-size: 18px; } .au-calc-anotte { font-weight: 700; color: var(--au-g); } .au-calc-incluso { display: block; margin-top: 2px; } #layout_wrapper .au-rates-intro { max-width: 760px; margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--au-txt); } #layout_wrapper .au-prices-extra { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: 10px; border-color: var(--au-line); } .au-prices-extra li { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px; } .au-prices-extra strong { font-size: 30px; color: var(--au-o); white-space: nowrap; } .au-calc { display: none; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 28px; align-items: end; margin-top: 28px; padding: 22px 24px; background: var(--au-soft); border-left: 4px solid var(--au-o); } .au-calc.au-calc-pronto { display: grid; } #layout_wrapper .au-calc h3 { grid-column: 1 / -1; font-size: 22px; } #layout_wrapper .au-calc-campi { display: flex; flex-wrap: wrap; gap: 12px 18px; margin: 0; } .au-calc-campi label { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--au-ink); } .au-calc-campi select { height: 46px; min-width: 104px; padding: 0 12px; border: 2px solid #d5dacd; border-radius: 3px; background: #fff; font: 400 16px/1.4 var(--au-fb); color: var(--au-ink); } .au-calc-campi select:focus { border-color: var(--au-g); outline: 0; } #layout_wrapper .au-calc-esito { margin: 0; text-align: right; font-size: 15px; line-height: 1.4; color: var(--au-txt); } .au-calc-prezzo { display: block; font: 700 56px/1 var(--au-fc); color: var(--au-g); } .au-calc-senza .au-calc-esito { visibility: hidden; } #layout_wrapper .au-calc-azione { grid-column: 1 / -1; margin: 0; } #layout_wrapper .au-calc .au-ospiti-nota { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--au-mut); } @media (max-width: 640px) { .au-calc.au-calc-pronto { grid-template-columns: 1fr; } #layout_wrapper .au-calc-esito { text-align: left; } } .au-conds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px 40px; margin-top: 36px; } .au-conds > div { padding-top: 14px; border-top: 3px solid var(--au-o); } #layout_wrapper .au-conds h3 { font-size: 20px; } #layout_wrapper .au-conds p { margin-top: 6px; font-size: 16px; line-height: 1.6; color: var(--au-txt); } /* ------------------------------------------------------------ contatti */ .au-contact-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); background: var(--au-gd); } #layout_wrapper .au-contact-bar a { display: flex; align-items: center; gap: 14px; padding: 22px 20px; border-right: 1px solid rgba(255, 255, 255, .12); color: #fff; font: 700 22px/1.2 var(--au-fc); } #layout_wrapper .au-contact-bar a:hover { background: var(--au-g); text-decoration: none; } #layout_wrapper .au-contact-bar a::before { width: 30px; font: 28px/1 FontAwesome; color: var(--au-y); text-align: center; transition: transform .2s ease; } #layout_wrapper .au-contact-bar a[href*="wa.me"]::before { content: "\f232"; } #layout_wrapper .au-contact-bar a[href^="tel:"]::before { content: "\f095"; } #layout_wrapper .au-contact-bar a[href^="mailto:"]::before { content: "\f0e0"; } .au-contact, .au-how { padding-top: clamp(40px, 6vw, 72px); } .au-contact > .row { gap: clamp(32px, 5vw, 64px); align-items: flex-start; } #layout_wrapper .au-contact h2:not(.titolo_scheda), #layout_wrapper .au-how h2:not(.titolo_scheda) { font-size: clamp(28px, 3.2vw, 40px); } #layout_wrapper .au-how p { margin-top: 14px; font-size: 17px; line-height: 1.65; color: var(--au-txt); } .au-map { min-height: 280px; background: repeating-linear-gradient(135deg, var(--au-soft) 0 10px, #e4ebdc 10px 20px); } .au-map iframe { display: block; width: 100%; height: 100%; min-height: 350px; } .au-map .embed-responsive { height: 100%; min-height: 350px; padding-bottom: 0; } .au-map .vbc-segnaposto { border: 0; border-radius: 0; background: none; font-family: var(--au-fb); } .au-map .vbc-segnaposto .vbc-tasto { background: var(--au-g); border-color: var(--au-g); border-radius: 3px; font: 700 17px/1 var(--au-fc); text-transform: uppercase; letter-spacing: .04em; min-height: 46px; } /* modulo di contatto (quello di VelociBuilder) */ .au-form form { margin-top: 14px; } .au-form form > h4:empty, .au-form form > h4 { display: none; } .au-form form .row { margin: 0; } /* i campi seguono la larghezza scelta nel backoffice, in dodicesimi: tre elenchi larghi 4 stanno sulla stessa riga, anche sul telefono (sono i tre elenchi degli ospiti) */ .au-form form > .row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 12px; align-items: end; } .au-form form > .row > [class*="col-"] { grid-column: span 12; } .au-form form > .row > .col-md-2 { grid-column: span 2; } .au-form form > .row > .col-md-3 { grid-column: span 3; } .au-form form > .row > .col-md-4 { grid-column: span 4; } .au-form form > .row > .col-md-5 { grid-column: span 5; } .au-form form > .row > .col-md-6 { grid-column: span 6; } .au-form form > .row > .col-md-7 { grid-column: span 7; } .au-form form > .row > .col-md-8 { grid-column: span 8; } .au-form form > .row > .col-md-9 { grid-column: span 9; } .au-form form > .row > .col-md-10 { grid-column: span 10; } /* notti e ospiti: quattro elenchi su una riga (larghezza 3); sul telefono due per riga */ @media (max-width: 600px) { .au-form form > .row > .col-md-3 { grid-column: span 6; } } .au-form .au-ospiti-col label { font-size: 14px; line-height: 1.25; } .au-form .au-ospiti-nota { grid-column: 1 / -1; margin: -6px 0 14px; font-size: 13px; line-height: 1.4; color: var(--au-mut); } .au-form select.form-control option:disabled { color: #b5baae; } .au-form form .row::before, .au-form form .row::after { display: none; } .au-form form [class*="col-"] { float: none; width: auto; padding: 0; } .au-form .form-group { margin-bottom: 14px; } .au-form label { margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--au-ink); } .au-form .form-control { height: 50px; padding: 0 14px; border: 2px solid #d5dacd; border-radius: 3px; background: #fff; box-shadow: none; font: 400 16px/1.4 var(--au-fb); color: var(--au-ink); } .au-form textarea.form-control { height: auto; min-height: 130px; padding: 12px 14px; resize: vertical; } .au-form .form-control:focus { border-color: var(--au-g); box-shadow: none; } .au-form #label_trattamento_dati { display: none; } .au-form .panel { margin: 0; border: 0; background: none; box-shadow: none; } .au-form .panel-body { padding: 0; font-size: 13px; line-height: 1.5; color: var(--au-txt); } .au-form .panel-body input[type="checkbox"] { width: 18px; height: 18px; margin: 0 4px 0 0; vertical-align: -4px; } .au-form .btn { width: 100%; height: 54px; border: 0; border-radius: 3px; background: var(--au-o); color: #fff; font: 700 19px/1 var(--au-fc); letter-spacing: .06em; text-transform: uppercase; } .au-form .btn:hover, .au-form .btn:focus { background: var(--au-od); color: #fff; } .au-form .alert { border-radius: 3px; } /* calendario delle disponibilita' (FullCalendar, quello gia' in uso) */ .au-cal #calendar { max-width: none; margin: 0; } .au-cal .fc { font-family: var(--au-fb); } .au-cal .fc .fc-toolbar.fc-header-toolbar { margin: 0; padding: 10px 10px 10px 18px; background: var(--au-g); color: #fff; } #layout_wrapper .au-cal .fc .fc-toolbar-title { color: #fff; font: 700 26px/1 var(--au-fc); text-transform: uppercase; } .au-cal .fc .fc-button { height: 44px; min-width: 44px; border: 0; border-radius: 3px; background: var(--au-gd); box-shadow: none !important; font: 600 15px/1 var(--au-fc); text-transform: uppercase; } .au-cal .fc .fc-button:hover, .au-cal .fc .fc-button:disabled { background: #0d2110; opacity: 1; } .au-cal .fc .fc-scrollgrid, .au-cal .fc td, .au-cal .fc th { border-color: var(--au-line); } .au-cal .fc .fc-col-header-cell-cushion { padding: 8px 0; color: var(--au-mut); font: 700 15px/1 var(--au-fc); text-transform: uppercase; text-decoration: none; } .au-cal .fc .fc-daygrid-day { background: #fff; } .au-cal .fc .fc-daygrid-day-number { padding: 6px 8px; color: var(--au-gd); font-size: 15px; font-weight: 600; text-decoration: none; } .au-cal .fc .fc-daygrid-day-frame { position: relative; min-height: 62px; } /* giorni occupati: il colore sta sulla casella (classe au-occupato, messa dal calendario) e non sugli eventi di FullCalendar, che coprono piu' giorni insieme e non lasciano accendere un giorno solo. Il giorno diviso a meta' e' "solo partenza": quel giorno arriva un altro ospite, non ci si puo' arrivare ma si puo' ancora partire */ .au-cal .fc .fc-bg-event { display: none; } .au-cal .fc .fc-daygrid-day.au-occupato { background: #f3c9a6 !important; } .au-cal .fc .fc-daygrid-day.au-occupato.au-solo-partenza { background: linear-gradient(to bottom right, #fff 50%, #f3c9a6 50%) !important; } .au-cal .aa-badge { position: absolute; left: 6px; right: 6px; bottom: 6px; z-index: 2; font-size: 11px; font-weight: 600; line-height: 1.2; color: var(--au-g); } .au-cal .fc .au-occupato .fc-daygrid-day-number { color: #7a3a10; } /* scelta delle date sul calendario: arrivo e partenza pieni, i giorni in mezzo velati, l'anteprima tratteggiata */ .au-cal-guida { margin: 0 0 10px; font-size: 15px; color: var(--au-txt); } .au-cal .au-cal-scelta .fc-daygrid-day.au-sceglibile { cursor: pointer; } .au-cal .au-cal-scelta .fc-daygrid-day.au-sceglibile:hover { box-shadow: inset 0 0 0 2px var(--au-g); } .au-cal .au-cal-scelta .fc-daygrid-day.au-sceglibile:focus-visible { outline: 3px solid var(--au-o); outline-offset: -3px; } /* nel modulo: date in sola lettura, notti bloccate quando vengono dalle date, stima del soggiorno */ .au-form input.au-data[readonly] { background: #fff; cursor: pointer; } .au-form select.au-bloccato { pointer-events: none; background-color: var(--au-soft); } .au-form input.au-stima[readonly] { height: auto; padding: 12px 14px; font: 700 20px/1.2 var(--au-fc); letter-spacing: .01em; color: var(--au-gd); background: #e3efe0; border-color: #c9dcc4; box-shadow: none; } .au-form input.au-stima::placeholder { font: 400 15px/1.3 var(--au-fb); letter-spacing: 0; color: var(--au-mut); } .au-form .au-stima-nota { margin: 6px 0 0; font-size: 13.5px; color: var(--au-mut); } /* giorni del mese prima o dopo: stessi colori degli altri (libero bianco, occupato arancio), numero piu' tenue, nome del mese (abbreviato sugli schermi stretti) e sotto "Libero" */ .au-cal .fc .fc-day-other .fc-daygrid-day-top { opacity: 1; } .au-cal .fc .fc-day-other:not(.fc-day-past) .fc-daygrid-day-number { color: var(--au-mut); } .au-cal .aa-badge.is-mese .au-m { display: block; color: var(--au-mut); letter-spacing: .02em; } .au-cal .aa-badge.is-mese .au-l { display: block; color: var(--au-g); } .au-cal .aa-badge .au-m-c { display: none; } @media (max-width: 640px) { .au-cal .aa-badge .au-m-l { display: none; } .au-cal .aa-badge .au-m-c { display: inline; } .au-cal .aa-badge { left: 3px; right: 3px; } } @media (max-width: 360px) { .au-cal .aa-badge { font-size: 10px; } } .au-cal .fc .fc-day-today { background: #fff !important; box-shadow: inset 0 0 0 2px var(--au-g); } /* giorni passati: grigi, senza etichetta e senza il colore di "occupato" */ .au-cal .fc .fc-day-past, .au-cal .fc .fc-day-disabled { background: #e4e6de !important; } .au-cal .fc .fc-day-past .fc-daygrid-day-number { color: #9a9f92; font-weight: 400; } /* la scelta vince su tutto il resto (mese accanto, oggi, giorno occupato in cui si parte): arrivo e partenza pieni, i giorni in mezzo velati, l'anteprima della partenza velata e bordata */ #layout_wrapper .au-cal .fc .fc-daygrid-day.au-sel-dentro, #layout_wrapper .au-cal .fc .fc-daygrid-day.au-sel-prova { background: #e3efe0 !important; } #layout_wrapper .au-cal .fc .fc-daygrid-day.au-sel-prova { box-shadow: inset 0 0 0 2px var(--au-g); } #layout_wrapper .au-cal .fc .au-sel-prova .fc-daygrid-day-number { color: var(--au-gd); } #layout_wrapper .au-cal .fc .fc-daygrid-day.au-sel-arrivo:not(.fc-day-disabled), #layout_wrapper .au-cal .fc .fc-daygrid-day.au-sel-partenza { background: var(--au-g) !important; } #layout_wrapper .au-cal .fc .au-sel-arrivo .fc-daygrid-day-number, #layout_wrapper .au-cal .fc .au-sel-partenza .fc-daygrid-day-number, #layout_wrapper .au-cal .fc .au-sel-arrivo .aa-badge, #layout_wrapper .au-cal .fc .au-sel-partenza .aa-badge, #layout_wrapper .au-cal .fc .au-sel-arrivo .aa-badge .au-m, #layout_wrapper .au-cal .fc .au-sel-arrivo .aa-badge .au-l, #layout_wrapper .au-cal .fc .au-sel-partenza .aa-badge .au-m, #layout_wrapper .au-cal .fc .au-sel-partenza .aa-badge .au-l { color: #fff; } /* riquadri di richiamo: WhatsApp sotto il calendario, contatti e WhatsApp sotto il listino */ .au-cal-wa, .au-rates-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: 22px; padding: 18px 20px; background: var(--au-soft); border-left: 4px solid var(--au-g); } .au-rates-cta { margin-top: 40px; } #layout_wrapper .au-cal-wa p, #layout_wrapper .au-rates-cta p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--au-txt); } #layout_wrapper .au-cal-wa p:first-child, #layout_wrapper .au-rates-cta p:first-child { flex: 1 1 260px; } #layout_wrapper .au-cal-wa strong, #layout_wrapper .au-rates-cta strong { display: block; font: 700 22px/1.1 var(--au-fc); text-transform: uppercase; color: var(--au-gd); } #layout_wrapper .au-rates-btns { display: flex; flex-wrap: wrap; gap: 10px; } .au-cal-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; font-size: 14px; color: var(--au-mut); } .au-cal-legend span { display: flex; align-items: center; gap: 6px; } /* legenda: un quadratino per ogni aspetto che si vede nel calendario. Classi delle voci: au-free libero, au-busy occupato, au-out solo partenza, au-stay le date scelte, au-today oggi, au-past giorni passati, au-src la fonte dei dati */ .au-cal-legend span::before { content: ""; flex: none; width: 16px; height: 16px; background: #fff; border: 1px solid #aab19f; } .au-cal-legend .au-src::before { content: none; } .au-cal-legend span.au-busy::before { background: #f3c9a6; border-color: #dfa574; } .au-cal-legend span.au-out::before { background: linear-gradient(to bottom right, #fff 50%, #f3c9a6 50%); border-color: #dfa574; } .au-cal-legend span.au-stay::before { background: linear-gradient(to right, var(--au-g) 50%, #e3efe0 50%); border-color: var(--au-g); } .au-cal-legend span.au-today::before { border: 2px solid var(--au-g); } .au-cal-legend span.au-past::before { background: #e4e6de; border-color: #b9bdb0; } .au-cal-legend .au-src { flex-basis: 100%; } /* ------------------------------------------------------------ pagine di testo (privacy, cookie) Il testo di queste pagine porta con se' un proprio blocco di stili: qui lo si riallinea al disegno. */ .au-legal > .row { max-width: 900px; } .au-legal { font-size: 16px; line-height: 1.7; color: var(--au-txt); } #layout_wrapper .au-legal .container { width: auto; max-width: none; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; } #layout_wrapper .au-legal h1, #layout_wrapper .au-legal h1 + .muted { background: var(--au-g); box-shadow: 0 0 0 100vmax var(--au-g); clip-path: inset(0 -100vmax); } #layout_wrapper .au-legal h1 { padding: clamp(32px, 5vw, 56px) 0 10px; color: #fff; font-size: clamp(36px, 5vw, 60px); } #layout_wrapper .au-legal h1 + .muted { margin: 0 0 32px; padding: 0 0 clamp(32px, 5vw, 56px); color: #e4ecdc; font-size: 15px; } #layout_wrapper .au-legal h2, #layout_wrapper .au-legal h3, #layout_wrapper .au-legal h4 { margin: 28px 0 8px; font: 700 24px/1.15 var(--au-fc); text-transform: uppercase; color: var(--au-gd); } #layout_wrapper .au-legal h2 span { font-size: inherit !important; } #layout_wrapper .au-legal p { margin: 0 0 12px; } #layout_wrapper .au-legal ul { margin: 0 0 12px; padding-left: 22px; list-style: disc; } #layout_wrapper .au-legal table { display: block; max-width: 100%; overflow-x: auto; } /* ------------------------------------------------------------ banner dei cookie (quello gia' in uso) */ /* barra del consenso di VelociBuilder (Opzioni webmaster): colori e caratteri del sito */ .vbc { --vbc-colore: var(--au-g); --vbc-su-colore: #fff; --vbc-testo: var(--au-ink); --vbc-tenue: var(--au-txt); --vbc-linea: var(--au-line); --vbc-raggio: 4px; font-family: var(--au-fb); } .vbc .vbc-titolo { font: 700 22px/1.15 var(--au-fc); text-transform: uppercase; letter-spacing: .02em; } .vbc .vbc-tasto { font: 700 17px/1 var(--au-fc); text-transform: uppercase; letter-spacing: .04em; border-radius: 3px; min-height: 46px; } .vbc a { color: var(--au-g); } /* pulsanti della barra dei cookie uno sotto l'altro, «Accetta tutti» per primo (anche nella finestra delle preferenze). Accetta e Rifiuta restano uguali per colore e misura: cambia solo l'ordine */ .vbc .vbc-tasti .vbc-tasto { flex: 1 1 100%; } .vbc .vbc-tasti .vbc-tasto[data-vbc-azione="accetta"] { order: -1; } /* ------------------------------------------------------------ passaggio del mouse su schede cliccabili e collegamenti */ #layout_wrapper a, #layout_wrapper .au-btn, #layout_wrapper .item_lingua, #layout_wrapper .navbar-toggle { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; } #layout_wrapper .au-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .18); } #layout_wrapper .au-btn:active { transform: none; box-shadow: none; } #layout_wrapper .au-logo-link:hover { opacity: .85; } #layout_wrapper .au-h-lang .item_lingua:not(.active):hover { background: var(--au-soft); color: var(--au-g); } #layout_wrapper .au-h-nav .navbar-toggle:hover { background: var(--au-gd) !important; } /* collegamenti con la freccia: la freccia avanza */ #layout_wrapper .au-link:hover, .au-sec-head > a:hover { text-decoration: none; } #layout_wrapper .au-link:hover::after, .au-sec-head > a:hover::after { transform: translateX(5px); } /* mattonelle degli ambienti: la foto si avvicina, la fascia si schiarisce, la freccia avanza */ #layout_wrapper .au-rooms a.thumbnail img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); } #layout_wrapper .au-rooms a.thumbnail:hover img { transform: scale(1.06); } #layout_wrapper .au-rooms a.thumbnail .caption { z-index: 1; background: var(--au-gd); transition: background-color .25s ease; } #layout_wrapper .au-rooms a.thumbnail:hover .caption { background: var(--au-g); } #layout_wrapper .au-rooms a.thumbnail .caption::after { transition: transform .25s ease; } #layout_wrapper .au-rooms a.thumbnail:hover .caption::after { transform: translateX(5px); } /* recensioni con il collegamento alla fonte: la scheda si solleva */ #layout_wrapper .au-reviews a.thumbnail { transition: transform .2s ease, box-shadow .2s ease; } #layout_wrapper .au-reviews a.thumbnail:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(21, 51, 26, .14); } /* schede di altre liste, quando hanno un collegamento */ #layout_wrapper .au-icons a.thumbnail:hover, #layout_wrapper .au-mini a.thumbnail:hover, #layout_wrapper .au-around a.thumbnail:hover { background: var(--au-soft); text-decoration: none; } #layout_wrapper .au-gal a.thumbnail img, #layout_wrapper .au-pan a.thumbnail img, #layout_wrapper .au-sections a.thumbnail img { transition: filter .3s ease; } #layout_wrapper .au-gal a.thumbnail:hover img, #layout_wrapper .au-pan a.thumbnail:hover img, #layout_wrapper .au-sections a.thumbnail:hover img { filter: brightness(1.08); } #layout_wrapper .au-sections a.thumbnail:hover .titolo_scheda, #layout_wrapper .au-around a.thumbnail:hover .titolo_scheda { color: var(--au-o); } /* testi: collegamenti dentro i paragrafi, pie' di pagina, barra dei contatti */ #layout_wrapper .au-footer a:hover, #layout_wrapper .au-footer-bottom a:hover { color: var(--au-y); } #layout_wrapper .au-ft-social a:hover { transform: translateY(-2px); color: #fff; } #layout_wrapper .au-contact-bar a:hover::before { transform: scale(1.15); } #layout_wrapper .au-bar-m a:hover, #layout_wrapper .au-bar-d a:hover { filter: brightness(1.1); } .au-faq-sec .caption .titolo_scheda { transition: background-color .2s ease, color .2s ease; } #layout_wrapper .au-faq-sec .thumbnail:not(.au-open) .caption .titolo_scheda:hover { background: var(--au-soft); } .au-hero-dots button span { transition: background-color .2s ease; } .au-hero-dots button:hover span { background: rgba(255, 255, 255, .8); } /* ------------------------------------------------------------ icone di contatti e indirizzo. Le disegna il foglio di stile, non sono scritte nel testo (l'editor toglierebbe i tag vuoti). Indirizzo: basta dare al paragrafo la classe au-indirizzo. Contatti del pie' di pagina: l'icona dipende dal tipo di collegamento (telefono, email, WhatsApp), cosi' vale anche per quelli aggiunti in seguito */ .au-indirizzo { position: relative; padding-left: 28px; } .au-indirizzo::before { content: "\f041"; position: absolute; left: 3px; top: .12em; font: 21px/1 FontAwesome; color: var(--au-o); } .au-footer .au-indirizzo::before { color: var(--au-y); } #layout_wrapper .au-ft-links a { position: relative; display: inline-block; padding-left: 28px; } #layout_wrapper .au-ft-links a::before { position: absolute; left: 0; top: 50%; width: 20px; margin-top: -8px; font: 16px/1 FontAwesome; color: var(--au-y); text-align: center; transition: transform .2s ease; } #layout_wrapper .au-ft-links a[href^="tel:"]::before { content: "\f095"; } #layout_wrapper .au-ft-links a[href^="mailto:"]::before { content: "\f0e0"; font-size: 14px; margin-top: -7px; } #layout_wrapper .au-ft-links a[href*="wa.me"]::before { content: "\f232"; font-size: 18px; margin-top: -9px; } #layout_wrapper .au-ft-links a:not([href^="tel:"]):not([href^="mailto:"]):not([href*="wa.me"])::before { content: "\f059"; } #layout_wrapper .au-ft-links a:hover::before { transform: scale(1.15); } /* ------------------------------------------------------------ MOVIMENTO (lavora con valle.js) Due livelli, come nel sito SempliCert: - apertura della home e testa delle pagine: animazioni del foglio di stile, partono da sole; - logo che vola, titolo battuto, comparsa allo scorrimento: li prepara valle.js. html.au-js la mette il codice in testa al sito, html.au-pronto valle.js appena pronto (o la sicura dopo 4 s): senza script non resta niente di nascosto. Chi chiede meno movimento vede la pagina ferma e completa. */ /* --- logo nell'apertura della home: in cima alla pagina sta sopra il titolo e la barra resta senza; quando la pagina scorre vola al suo posto nella barra, tornando in cima fa il percorso inverso. Stati (classi su ): au-logo-hero, au-logo-volo, au-logo-barra */ #layout_wrapper .au-hero-logo { position: relative; width: clamp(200px, min(30vw, 44vh), 440px); margin: 0 0 clamp(22px, 2.6vw, 36px) -8px; line-height: 0; } #layout_wrapper .au-hero-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)) drop-shadow(0 2px 9px rgba(0, 0, 0, .22)); } /* con il logo il blocco dei testi e' piu' alto: l'apertura tiene la sua altezza e, se non basta, cresce quanto serve */ .au-hero > .row > .editor_colonna:has(.au-hero-logo) { height: auto; min-height: clamp(560px, min(70vw, calc(100vh - 190px)), 860px); display: flex; flex-direction: column; justify-content: center; } .au-hero .editor_colonna > div[id^="testo_"]:has(.au-hero-logo) { position: relative; inset: auto; width: 100%; padding: clamp(18px, 1.8vw, 30px) 0 clamp(52px, 4.4vw, 60px); } .au-h-logo img { transition: opacity .3s ease; } html.au-js:not(.au-logo-volo):not(.au-logo-barra) #layout_wrapper:has(.au-hero-logo) .au-h-logo img { opacity: 0; } html.au-logo-hero .au-h-logo img, html.au-logo-volo .au-h-logo img { opacity: 0; } html.au-logo-volo .au-hero-logo, html.au-logo-barra .au-hero-logo { visibility: hidden; } .au-logo-copia { position: fixed; z-index: 1100; margin: 0; max-width: none !important; transform-origin: 0 0; pointer-events: none; will-change: transform; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)) drop-shadow(0 2px 9px rgba(0, 0, 0, .22)); transition: filter .6s ease, opacity .3s ease; } .au-logo-copia.au-in-barra { filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) drop-shadow(0 0 0 rgba(0, 0, 0, 0)); } .au-logo-copia.au-via { opacity: 0; } /* slogan scritto a mano: le parole ci sono gia', coperte, e lo script le scopre da sinistra a destra una dopo l'altra (vedi piu' sotto, fra le regole del movimento). Ogni parola e' un blocco che non si spezza */ .au-hero-text .au-parola { display: inline-block; white-space: nowrap; } /* --- pulsanti fissi: una sola famiglia. Tondi, stessa ombra, a 20 px dai bordi e tutti alla stessa altezza: lucchetto delle preferenze in basso a sinistra, accesso facilitato in basso a destra, WhatsApp sopra l'accesso facilitato e in asse con lui. Sotto i 1100 px c'e' la barra in fondo (dove WhatsApp ha gia' il suo posto): lucchetto e accesso facilitato stanno 14 px sopra la barra. L'accesso facilitato e' di un servizio esterno e vive in un contenitore suo: le stesse misure gliele passa valle.js (regole "FISSI"); se si cambiano qui vanno cambiate anche li'. */ .au-lucchetto { position: fixed; left: 20px; bottom: 74px; z-index: 890; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--au-gd); color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); cursor: pointer; transition: transform .2s ease, background-color .2s ease, opacity .25s ease, visibility .25s; } .au-lucchetto::before { content: "\f023"; font: 20px/40px FontAwesome; display: block; } .au-lucchetto:hover { transform: translateY(-2px); background: var(--au-g); } .au-lucchetto:focus-visible { outline: 2px solid var(--au-y); outline-offset: 3px; } .au-lucchetto.au-nascosto { opacity: 0; visibility: hidden; pointer-events: none; } /* WhatsApp: 52 px, un po' piu' grande perche' e' l'azione principale; il centro cade sull'asse dell'accesso facilitato */ .au-bar-d { position: fixed; right: 14px; bottom: 76px; z-index: 890; transition: opacity .25s ease, visibility .25s; } #layout_wrapper .au-bar-d a { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--au-g); color: #fff; font-size: 0; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); transition: transform .2s ease, background-color .2s ease; } #layout_wrapper .au-bar-d a:hover { background: #2f6f37; transform: translateY(-2px); text-decoration: none; } /* mentre il banner dei cookie e' aperto WhatsApp si fa da parte, come il lucchetto: non deve coprire la X di chiusura */ html.au-banner-aperto .au-bar-d { opacity: 0; visibility: hidden; pointer-events: none; } @media (min-width: 1100px) { .au-lucchetto { bottom: 20px; } } @media (prefers-reduced-motion: no-preference) { @keyframes auSale { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } } @keyframes auDissolvi { from { opacity: 0; } to { opacity: 1; } } @keyframes auScopri { from { clip-path: inset(-40px 100% -40px -40px); transform: translate3d(-12px, 0, 0); } to { clip-path: inset(-40px); transform: none; } } @keyframes auRiflesso { from { background-position: -120% 0; } to { background-position: 260% 0; } } @keyframes auApre { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } } /* apertura della home: il logo si scopre da sinistra, poi un riflesso di luce lo attraversa una volta. La sagoma del riflesso e' il logo stesso: lo script la imposta sul file che il browser ha scelto; quella scritta qui e' la versione leggera, cosi' non viene scaricato anche il PNG */ .au-hero-logo { animation: auScopri .9s cubic-bezier(.65, 0, .25, 1) .15s both; } .au-hero-logo::after { content: ""; position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--au-logo-forma, url(/libreria/Logo_AlbaUmbra_01.png.webp)) center / 100% 100% no-repeat; mask: var(--au-logo-forma, url(/libreria/Logo_AlbaUmbra_01.png.webp)) center / 100% 100% no-repeat; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .9) 50%, transparent 70%) no-repeat -120% 0 / 60% 100%; animation: auRiflesso 1.2s ease-in-out 1.1s both; } /* testi dell'apertura in sequenza. Con lo script lo slogan viene scritto a mano e testo e pulsanti arrivano appena finisce (html.au-battuto); senza script lo slogan sale e il resto lo segue a tempi fissi */ .au-hero-text > :not(.au-hero-logo):not(.au-batti) { animation: auSale .9s cubic-bezier(.2, .7, .2, 1) both; } .au-hero-text > .au-kicker { animation-delay: .35s; } /* "titolo" qui e' la scritta grande: lo slogan (.au-hero-claim) oppure, nella forma precedente, l'h1 */ .au-hero-text > :is(h1:not(.au-hero-kicker), .au-hero-claim):not(.au-batti) { animation-delay: .5s; } .au-hero-text > :is(h1:not(.au-hero-kicker), .au-hero-claim) ~ * { animation-delay: .7s; } .au-hero-text > :is(h1:not(.au-hero-kicker), .au-hero-claim) ~ .au-hero-btns { animation-delay: .85s; } html.au-js:not(.au-battuto) .au-hero-text > :is(h1:not(.au-hero-kicker), .au-hero-claim) ~ * { animation: none; opacity: 0; } html.au-js.au-battuto .au-hero-text > :is(h1:not(.au-hero-kicker), .au-hero-claim) ~ * { animation-delay: .05s; } html.au-js.au-battuto .au-hero-text > :is(h1:not(.au-hero-kicker), .au-hero-claim) ~ .au-hero-btns { animation-delay: .2s; } html.au-js:not(.au-pronto) .au-hero-text :is(h1:not(.au-hero-kicker), .au-hero-claim) { visibility: hidden; } /* la copertura di ogni parola si ritira verso destra nel tempo che lo script le assegna (--au-t, in proporzione alle lettere); i margini negativi lasciano fuori dal taglio gli svolazzi che escono dal riquadro della parola */ html.au-js .au-hero-text .au-batti:not(.au-finito) .au-parola { clip-path: inset(-.5em calc(100% + .4em) -.5em -.4em); } /* chiusa del tutto, svolazzo di sinistra compreso */ html.au-js .au-hero-text .au-batti:not(.au-finito) .au-parola.au-scritta { clip-path: inset(-.5em -.7em -.5em -.4em); transition: clip-path var(--au-t, .3s) linear; } /* testa delle pagine interne: foto che si apre, poi occhiello, titolo, testo e dati in breve in sequenza */ .au-pagehead [id^="testo_"] > * { animation: auSale .8s cubic-bezier(.2, .7, .2, 1) both; } .au-pagehead [id^="testo_"] > :nth-child(1) { animation-delay: .1s; } .au-pagehead [id^="testo_"] > :nth-child(2) { animation-delay: .22s; } .au-pagehead [id^="testo_"] > :nth-child(n+3) { animation-delay: .38s; } .au-facts-list > li { animation: auSale .7s cubic-bezier(.2, .7, .2, 1) both; } .au-facts-list > li:nth-child(1) { animation-delay: .5s; } .au-facts-list > li:nth-child(2) { animation-delay: .58s; } .au-facts-list > li:nth-child(3) { animation-delay: .66s; } .au-facts-list > li:nth-child(n+4) { animation-delay: .74s; } /* numeri che contano (dati sotto l'apertura, tempi in auto): cifre a larghezza fissa, niente tremolio */ #layout_wrapper .au-conta { display: inline-block; font: inherit; color: inherit; letter-spacing: inherit; font-variant-numeric: tabular-nums; text-align: left; } /* comparsa allo scorrimento: ogni tipo di contenuto con il suo passo (titoli e schede salgono, i paragrafi salgono di meno, le foto si aprono) */ .au-rv { opacity: 0; transform: translate3d(0, 28px, 0); } .au-rv.au-rv-testo { transform: translate3d(0, 16px, 0); } .au-rv.au-rv-foto { transform: scale(1.05); } #layout_wrapper .au-sections .thumbnail { overflow: hidden; } /* la foto che si apre non deve sporgere dal suo riquadro */ .au-rv.au-rv-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); } .au-rv.au-rv-foto.au-rv-in { transition-duration: 1.1s; } .au-lucchetto { animation: auSale .6s ease 1.2s both; } } @media (prefers-reduced-motion: reduce) { #layout_wrapper * { animation: none !important; transition: none !important; } } /* --- panorami a tutto schermo sul telefono (valle.js, galleria au-gal): sulle foto un piccolo segno «apri», la vista nera con la foto intera, titolo e didascalia in basso, contatore, frecce e X; un tocco li nasconde */ @media (max-width: 900px) { #layout_wrapper .au-gal-apribile .thumbnail { position: relative; cursor: zoom-in; } #layout_wrapper .au-gal-apribile .thumbnail::after { content: ""; position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; pointer-events: none; background: rgba(17, 33, 18, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 18px no-repeat; } } .au-vista { display: none; position: fixed; inset: 0; z-index: 2147483647; background: #000; color: #fff; touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; } .au-vista.au-vista-aperta { display: block; } html.au-vista-in-uso, html.au-vista-in-uso body { overflow: hidden; } .au-vista-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .au-vista-testo { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 72px calc(14px + env(safe-area-inset-bottom)) 18px; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); font: 400 15px/1.35 var(--au-fb); transition: opacity .25s ease; } .au-vista-testo strong { display: block; font: 600 19px/1.15 var(--au-fc); letter-spacing: .04em; text-transform: uppercase; } .au-vista-testo span { display: block; margin-top: 3px; opacity: .85; } .au-vista-conta { position: absolute; right: 18px; bottom: calc(16px + env(safe-area-inset-bottom)); font: 600 13px/1 var(--au-fc); letter-spacing: .06em; opacity: .8; transition: opacity .25s ease; } .au-vista button { position: absolute; z-index: 2; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45) center / 22px no-repeat; transition: opacity .25s ease; } .au-vista-chiudi { top: calc(12px + env(safe-area-inset-top)); right: calc(12px + env(safe-area-inset-right)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") !important; } .au-vista-prima, .au-vista-dopo { top: 50%; margin-top: -23px; } .au-vista-prima { left: calc(8px + env(safe-area-inset-left)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") !important; } .au-vista-dopo { right: calc(8px + env(safe-area-inset-right)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") !important; } .au-vista button:focus-visible { outline: 2px solid var(--au-y); outline-offset: 2px; } .au-vista-pulita .au-vista-testo, .au-vista-pulita .au-vista-conta, .au-vista-pulita button { opacity: 0; pointer-events: none; } .au-vista-gira { position: absolute; left: 50%; top: 50%; z-index: 3; margin: 0; padding: 74px 20px 16px; width: min(280px, 80vw); transform: translate(-50%, -50%); border-radius: 10px; background: rgba(0, 0, 0, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='17' y='6' width='14' height='24' rx='2.5'/%3E%3Cpath d='M8 32a16 16 0 0 0 22 10M30 42l-1-5M30 42l-5 1'/%3E%3C/svg%3E") center 14px / 50px no-repeat; font: 600 15px/1.35 var(--au-fb); text-align: center; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .au-vista-invito .au-vista-gira { opacity: 1; } @media (orientation: landscape) { .au-vista-gira { display: none; } }