/* ========================================================================== Aprica Alpine Apartments — stile del tema Impaginazione sul modello indicato dal titolare (case vacanza con apertura video, titoli in maiuscolo). Caratteri e tono sono quelli del documento d'identità del marchio (materiali/identita/APRICA_ALPINE_IDENTITY.pdf): - caratteri: Ronzino (sans, come «APRICA ALPINE») per titoli e testi, Ortica Linear (serif, come «APARTMENTS») per le scritte piccole spaziate, le frasi d'accento e i numeri; - logo sempre in un colore solo: blu sul chiaro, ghiaccio sul blu e sopra le foto. I COLORI sono cambiati il 13 ottobre 2026 (li ha dati il titolare): blu #1C3144 e ghiaccio #EFF1F3, più l'azzurro dei pulsanti. Prima erano French Blue #203C7F, Bright Marine #3073B7 e Cornsilk #F1ECCA: vedi le variabili qui sotto. Lo stesso giorno: testata più compatta e tendine rifatte (punto 3), apertura nuova delle pagine interne (punto 6), fasce e riquadri blu al posto del crema, «torna su» e chat (punto 8). Si scrive prima il telefono, poi si allarga: 700 / 900 / 1000 / 1024 / 1200 / 1440 px. Indice: 1 basi · 2 pezzi comuni · 3 testata · 4 home · 5 piede · 6 pagine interne · 7 movimento · 8 quello che galleggia ========================================================================== */ /* -------------------------------------------------------------- 1. Basi */ @font-face { font-family: "Ronzino"; src: url("../font/Ronzino-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Ronzino"; src: url("../font/Ronzino-Oblique.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Ronzino"; src: url("../font/Ronzino-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Ronzino"; src: url("../font/Ronzino-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* 13 ott 2026, revisione col cliente (Riccardo Di Carlo, Halldis): «quanti font abbiamo qua? […] io vorrei ridurre i font […] il font di supporto non lo usare sulla pagina, usiamolo solo in "Apartments"». Ortica Linear, il carattere con le grazie del marchio, non si carica più: resta solo nel logo, che è un disegno. Tutte le scritte del sito sono in Ronzino; quelle che erano in Ortica (etichette piccole spaziate, frasi d'accento, numeri) usano --f-accento. */ :root { /* Marchio. Dal 13 ottobre 2026 i colori sono due (il titolare: «quello che è attualmente il blu diventa #1C3144; quello che attualmente è il bianco diventa #EFF1F3; quello che è panna diventa sempre ghiaccio, cioè quello che è bianco»). Bianco e crema quindi sono lo stesso ghiaccio: dove prima una fascia si staccava dall'altra per il colore, adesso la staccano i riquadri blu («al limite metti dei riquadri col colore blu per spezzare»). I nomi delle variabili sono rimasti quelli di prima. */ --blu: #1C3144; /* il blu */ --marine: #2E6EB0; /* l'azzurro di «Prenota» e delle scritte piccole: un filo più scuro, sul ghiaccio si legge */ --crema: #EFF1F3; /* ghiaccio (era il crema) */ --bianco: #EFF1F3; /* ghiaccio (era il bianco) */ /* Sfumature dei due colori */ --notte: #131F2B; /* blu più scuro: fondo sotto le foto mentre caricano */ --blu-2: #27435C; /* blu più chiaro: riquadri dentro il blu, passaggio del puntatore */ --crema-chiara: #EFF1F3; /* fasce: ghiaccio, come il resto */ --carta: #EFF1F3; /* riquadri: ghiaccio */ --platino: #E2E6EA; /* ghiaccio più scuro: segnaposto delle foto, etichette, passaggio del puntatore */ --inchiostro: #1C3144; /* scritte forti: è il blu */ --testo: #2B3947; --tenue: #5C6A78; --filo: #D3D9DF; /* Misure */ --bordo: clamp(20px, 7.7vw, 30px); --largo: 1296px; --barra-h: 60px; /* 13 ott 2026: «il menu sopra fallo più compatto» (era 68, e 92 sul computer) */ --avviso-h: 0px; --logo-grande: min(300px, 76vw); --logo-scala: .27; --logo-top: 8px; --logo-centro: 42vh; /* Caratteri */ --f-testo: "Ronzino", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --f-titoli: "Ronzino", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --f-accento: var(--f-testo); /* era Ortica Linear (con le grazie): vedi la nota sui caratteri in cima */ --molla: cubic-bezier(.2, .7, .2, 1); } @supports (height: 1svh) { :root { --logo-centro: 42svh; } } @media (min-width: 700px) { :root { --bordo: 40px; } } @media (min-width: 1200px) { :root { --bordo: 72px; --barra-h: 70px; --logo-grande: 450px; --logo-scala: .2; --logo-top: 11px; --logo-centro: 46vh; } @supports (height: 1svh) { :root { --logo-centro: 46svh; } } } .aa-senza-avviso { --avviso-h: 0px !important; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--barra-h) + 20px); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; font: 400 16px/1.6 var(--f-testo); color: var(--testo); background: var(--bianco); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overflow-x: clip; } img, video, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; } ul, ol { padding: 0; list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; } input, textarea, select { font: inherit; color: inherit; border-radius: 0; } b, strong { font-weight: 500; } :focus-visible { outline: 2px solid var(--marine); outline-offset: 3px; } [hidden] { display: none !important; } ::selection { background: var(--blu); color: var(--crema); } .aa-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .aa-salta { position: fixed; left: 12px; top: -80px; z-index: 200; padding: 12px 18px; background: var(--blu); color: var(--bianco); text-decoration: none; } .aa-salta:focus { top: 12px; } .aa-senza-eroe main { padding-top: calc(var(--avviso-h) + var(--barra-h)); } /* ----------------------------------------------------- 2. Pezzi comuni */ .aa-c { width: min(100% - 2 * var(--bordo), var(--largo)); margin-inline: auto; } /* Titoli: Ronzino medio in maiuscolo, nel blu del marchio (come «APRICA ALPINE» nel logo). */ .aa-t1, .aa-t2, .aa-t3 { font-family: var(--f-titoli); font-weight: 500; text-transform: uppercase; letter-spacing: .012em; color: var(--blu); text-wrap: balance; } .aa-t1 { font-size: clamp(27px, 1.1rem + 1.6vw, 40px); line-height: 1.14; } .aa-t2 { font-size: clamp(23px, 1rem + 1.05vw, 30px); line-height: 1.2; } .aa-t3 { font-size: clamp(17px, .95rem + .3vw, 20px); line-height: 1.2; } /* Scritta piccola spaziata, in Ortica (come «APARTMENTS» nel logo). */ .aa-occhiello { font: 400 12px/1.6 var(--f-accento); letter-spacing: .32em; text-transform: uppercase; color: var(--marine); margin-bottom: 10px; } .aa-ico { width: 20px; height: 20px; flex: none; } /* Pulsanti: rettangoli pieni, senza angoli tondi. */ .aa-b { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 12px 28px; background: var(--marine); color: var(--bianco); font: 500 13px/1.6 var(--f-testo); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; text-align: center; border: 1px solid transparent; transition: background-color .3s, color .3s, border-color .3s; } .aa-b:hover { background: var(--blu); } .aa-b--bianco { background: var(--bianco); color: var(--blu); } .aa-b--bianco:hover { background: var(--platino); color: var(--blu); } .aa-b--crema { background: var(--crema); color: var(--blu); } .aa-b--crema:hover { background: var(--platino); color: var(--blu); } .aa-b--filo { background: transparent; color: inherit; border-color: currentColor; } .aa-b--filo:hover { background: var(--blu); color: var(--bianco); border-color: var(--blu); } @media (min-width: 900px) { .aa-b { min-height: 50px; padding: 14px 32px; font-size: 13.5px; } } /* Collegamento sottile con la freccia. */ .aa-rimando { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .aa-rimando .aa-ico { width: 16px; height: 16px; transition: transform .35s var(--molla); } .aa-rimando:hover .aa-ico { transform: translateX(4px); } .aa-rimando--scuro { color: var(--blu); } .aa-rimando--indietro .aa-ico { order: -1; transform: rotate(180deg); } .aa-rimando--indietro:hover .aa-ico { transform: rotate(180deg) translateX(4px); } .aa-chip { display: inline-block; padding: 6px 13px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; } .aa-etichette { display: flex; flex-wrap: wrap; gap: 8px; } .aa-etichette li { padding: 5px 12px; border-radius: 999px; background: var(--platino); font-size: 12px; line-height: 1.5; color: var(--testo); } .aa-stelle { display: flex; gap: 2px; color: var(--marine); } .aa-stelle .aa-ico { width: 16px; height: 16px; } /* Giostre: una fila che scorre di lato, con le frecce. */ .aa-giostra__binario, .aa-vet__binario, .aa-social__binario { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .aa-giostra__binario::-webkit-scrollbar, .aa-vet__binario::-webkit-scrollbar, .aa-social__binario::-webkit-scrollbar { display: none; } .aa-frecce { display: flex; gap: 8px; } .aa-freccia { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--filo); background: var(--bianco); color: var(--blu); transition: background-color .25s, color .25s, border-color .25s, opacity .25s; } .aa-freccia:hover:not([disabled]) { background: var(--blu); border-color: var(--blu); color: var(--bianco); } .aa-freccia[disabled] { opacity: .35; cursor: default; } /* Testo lungo (articoli, informative, testo libero delle pagine). */ .aa-prosa { font-size: 16px; line-height: 1.75; color: var(--testo); } .aa-prosa > * + * { margin-top: 1.1em; } .aa-prosa h2 { font: 500 clamp(20px, 1rem + .7vw, 26px)/1.25 var(--f-titoli); text-transform: uppercase; letter-spacing: .012em; color: var(--blu); margin-top: 2em; } .aa-prosa h3 { font: 500 19px/1.4 var(--f-testo); color: var(--blu); margin-top: 1.8em; } .aa-prosa a { color: var(--marine); text-underline-offset: 3px; } .aa-prosa ul, .aa-prosa ol { padding-left: 1.3em; } .aa-prosa ul { list-style: disc; } .aa-prosa ol { list-style: decimal; } .aa-prosa li + li { margin-top: .4em; } .aa-prosa img { width: 100%; } .aa-prosa figcaption { font-size: 13px; color: var(--tenue); margin-top: 8px; } .aa-prosa blockquote { border-left: 2px solid var(--marine); padding-left: 20px; font: 300 22px/1.45 var(--f-accento); color: var(--blu); } /* ---------------------------------------------------------- 3. Testata */ /* La barra è di vetro, come la riga della ricerca sull'apertura; scritte e logo sono sempre bianchi (9 ott 2026, il titolare: «il menu sopra non diventa bianco ma diventa glass blur, e il logo non diventa blu ma rimane quel colore che c'è adesso»). Il vetro ha due toni, e li sceglie tema.js con data-sotto guardando che cosa passa sotto: - "scuro" (un'apertura con la foto, una fascia blu, il piede): lo stesso vetro della riga della ricerca; - "chiaro" (una fascia bianca o crema), e finché tema.js non ha deciso: il vetro si tinge di French Blue, sennò le scritte bianche non si leggerebbero (sul bianco pieno restano sopra 4,5 a 1). In cima alle pagine che aprono con la foto (data-tono="chiaro") il vetro non c'è. */ .aa-testata { position: fixed; inset: 0 0 auto 0; z-index: 60; color: var(--bianco); transition: transform .55s cubic-bezier(.4, 0, .2, 1); } .aa-testata::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(28, 49, 68, .8); border-bottom: 1px solid rgba(255, 255, 255, .4); box-shadow: 0 8px 26px rgba(13, 23, 32, .14); -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25); transition: opacity .8s ease-in-out, background-color .45s ease, box-shadow .45s ease; } .aa-testata[data-sotto="scuro"]::before { background: rgba(255, 255, 255, .15); box-shadow: none; } .aa-testata[data-tono="chiaro"]::before { opacity: 0; } /* Sul vetro il contorno di chi ha il fuoco è bianco (le voci delle tendine, che sono su fondo bianco, tengono il loro). */ .aa-barra__menu:focus-visible, .aa-nav__voce > a:focus-visible, .aa-logo:focus-visible, .aa-barra__lingue a:focus-visible, .aa-barra__prenota:focus-visible { outline-color: var(--bianco); } /* Con la barra di WordPress (chi è entrato nella Bacheca) la testata comincia sotto di lei, non dietro. */ .admin-bar .aa-testata { top: 32px; } @media (max-width: 782px) { .admin-bar .aa-testata { top: 46px; } } @media (max-width: 600px) { .admin-bar .aa-testata.e-scesa { top: 0; } /* qui la barra di WordPress scorre via con la pagina */ } .aa-testata.e-scesa { transform: translateY(calc(-1 * var(--avviso-h))); } .aa-avviso { position: relative; display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 46px; background: var(--blu); color: var(--bianco); font-size: 13px; line-height: 1.35; text-align: center; } /* Tutta la fascia è un collegamento alle prenotazioni (revisione col cliente: «lo rendo tutto cliccabile? Sì»): il collegamento si allarga a tutta la fascia; la ✕ gli sta sopra. */ .aa-avviso__tutto { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; text-wrap: balance; } .aa-avviso__tutto::after { content: ""; position: absolute; inset: 0; } .aa-avviso__tutto .aa-ico { flex: none; width: 14px; height: 14px; transition: transform .35s var(--molla); } .aa-avviso__tutto:hover span, .aa-avviso__tutto:focus-visible span { text-decoration: underline; text-underline-offset: 3px; } .aa-avviso__tutto:hover .aa-ico { transform: translateX(4px); } .aa-avviso__tutto:focus-visible { outline: 0; } .aa-avviso__chiudi { position: absolute; z-index: 1; right: 8px; top: 50%; width: 32px; height: 32px; margin-top: -16px; display: grid; place-items: center; color: var(--bianco); } .aa-avviso__chiudi .aa-ico { width: 14px; height: 14px; } .aa-senza-avviso .aa-avviso { display: none; } .aa-barra { position: relative; height: var(--barra-h); display: flex; align-items: center; justify-content: space-between; padding-inline: 14px; transition: color .8s ease-in-out; } @media (min-width: 700px) { .aa-barra { padding-inline: 28px; } } .aa-barra__menu { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding-right: 8px; font-size: 13.5px; letter-spacing: .04em; } .aa-barra__menu .aa-ico { width: 22px; height: 22px; } .aa-barra__menu span { display: none; } @media (min-width: 480px) { .aa-barra__menu span { display: inline; } } .aa-barra__azioni { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; margin-left: auto; } /* «Prenota» in testata è una pillola nel colore del marchio, anche sopra le foto (come nelle altre strutture). */ .aa-barra__prenota { min-height: 36px; padding: 6px 18px; font-size: 12px; border-radius: 999px; } /* Le lingue: le sigle «IT» «EN», tutte in vista nella barra, a sinistra (13 ott 2026: il pomeriggio il titolare aveva chiesto le bandierine «in bella vista», a sinistra «visto che a destra c'è prenota»; la sera, nella revisione col cliente: «io ci metto solo IT EN, senza bandiere […] va bene come hai fatto, togli le bandiere e basta»). Sul telefono stanno accanto al menu: accanto a «Prenota» non c'è posto. La lingua in cui si è ha il filo sotto, come la voce di menu della pagina in cui si è; nel menu del telefono c'è il nome intero. Le regole di .aa-bandiera servono solo se le bandierine tornano (aa_bandiere con l'ultimo argomento). */ .aa-bandiere { display: flex; align-items: center; } .aa-bandiere a { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 6px; font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-decoration: none; opacity: .66; transition: opacity .25s; } .aa-bandiere a:hover, .aa-bandiere a:focus-visible, .aa-bandiere a[aria-current] { opacity: 1; } .aa-bandiere a[aria-current]::after { content: ""; position: absolute; left: 6px; right: calc(6px + .12em); bottom: 9px; height: 1.5px; background: currentColor; } .aa-bandiera { flex: none; width: 22px; height: 16.5px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .55); } .aa-barra__lingue { position: relative; z-index: 3; margin-right: auto; } .aa-bandiere--pannello { gap: 12px; } .aa-bandiere--pannello a { font-size: 14px; font-weight: 400; letter-spacing: .04em; } .aa-bandiere--pannello a[aria-current] { font-weight: 500; } .aa-bandiere--pannello a[aria-current]::after { right: 6px; bottom: 7px; height: 1px; } .aa-nav { display: none; } /* Il logo: nasce grande (misura vera) e in barra è rimpicciolito con una trasformazione, così il passaggio è fluido. In testata è sempre bianco: sopra le foto e sopra il vetro della barra. */ .aa-logo { position: absolute; left: 50%; top: var(--logo-top); z-index: 2; width: var(--logo-grande); aspect-ratio: 563.64 / 305.01; /* proporzioni del logo ufficiale */ color: var(--bianco); transform-origin: 50% 0; transform: translateX(-50%) scale(var(--logo-scala)); transition: transform .8s cubic-bezier(.45, .05, .25, 1); --logo-giu: calc(var(--logo-centro) - var(--logo-grande) * .2706 - var(--avviso-h) - var(--logo-top)); /* .2706 = metà altezza: proporzioni del logo */ } .aa-logo__disegno { width: 100%; height: 100%; overflow: visible; } .aa-logo__cime, .aa-logo__lettere { fill: currentColor; transition: fill .8s ease-in-out; } .aa-testata[data-logo="grande"] .aa-logo { transform: translateX(-50%) translateY(var(--logo-giu)) scale(1); } /* Le righe degli appartamenti nei menu (tendina del computer e menu del telefono): foto, nome e due numeri. */ .aa-tendina__voce { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px 12px 8px 8px; text-decoration: none; transition: background-color .2s; } .aa-tendina__voce:hover, .aa-tendina__voce:focus-visible { background: rgba(46, 110, 176, .62); } /* l'azzurro del marchio: «quando ci passi sopra si colora» */ .aa-tendina__foto { display: block; width: 62px; height: 62px; overflow: hidden; background: var(--notte); } .aa-tendina__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--molla); } .aa-tendina__voce:hover .aa-tendina__foto img { transform: scale(1.08); } .aa-tendina__nome { display: block; overflow: hidden; font: 500 13px/1.35 var(--f-titoli); letter-spacing: .09em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; } .aa-tendina__dati { display: block; margin-top: 3px; overflow: hidden; font-size: 12.5px; line-height: 1.4; color: rgba(239, 241, 243, .72); text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 1200px) { .aa-barra { padding-inline: 30px; } .aa-barra__menu { display: none; } .aa-barra__prenota { min-width: 118px; min-height: 38px; padding: 7px 22px; font-size: 12.5px; } .aa-barra__lingue { gap: 4px; margin-left: -6px; } /* Il menu sta ai due lati del logo, LARGO: le quattro voci hanno i centri al 25, 41,7, 58,3 e 75 % della larghezza, come nelle altre strutture della catena. (13 ott 2026: il pomeriggio il titolare le aveva volute raccolte vicino al logo, «fallo più compatto»; la sera, nella revisione col cliente: «appartamenti, struttura, Aprica e contatti li puoi allargare di più […] sul desktop sono tutti accumulati al centro […] come Le Mallet».) Ogni metà è una griglia di tre colonne uguali: a sinistra le voci stanno nella seconda e nella terza, a destra nella prima e nella seconda; la colonna che resta è delle lingue da una parte e di «Prenota» dall'altra. */ .aa-nav { display: flex; position: absolute; inset: 0; z-index: 1; } .aa-nav__lista { flex: 1 1 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; justify-items: center; height: 100%; min-width: 0; } .aa-nav__lista--sx .aa-nav__voce:first-child { grid-column: 2; } .aa-nav__voce { position: relative; display: flex; align-items: center; height: 100%; } /* 16,7 px = i 14,5 di prima per 1,15 (14 ott 2026, sera: «fai un 115% i font attuali del menu»); la freccina con loro */ .aa-nav__voce > a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 2px; font-size: 16.7px; letter-spacing: .02em; text-decoration: none; white-space: nowrap; } /* la linea è sempre di 2 px: al passaggio come sulla pagina in cui si è (16 ott 2026, il titolare: «deve essere sempre della stessa altezza, come se fosse sottolineato, anche se ci passo un attimo sopra»; prima al passaggio era 1 px) */ .aa-nav__voce > a span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--molla); padding-bottom: 3px; } .aa-nav__voce > a:hover span, .aa-nav__voce:focus-within > a span, .aa-nav__voce > a[aria-current] span { background-size: 100% 2px; } .aa-nav__voce > a .aa-ico { width: 15px; height: 15px; transition: transform .3s; } .aa-nav__voce--tendina:hover > a .aa-ico, .aa-nav__voce--tendina:focus-within > a .aa-ico { transform: rotate(180deg); } /* La tendina degli appartamenti: ogni appartamento ha la sua foto, il nome e due numeri (13 ott 2026: «i menu fanno cagare […] il menu fatto come si deve»). Era un riquadro blu pieno; la sera, nella revisione col cliente: «mi compare questo menu a tendina blu forte: possiamo fare un menu a tendina glass, o celestino, un po' meno impattante? […] l'importante è che sia glass, e quando ci passi sopra si colora […] deve essere meno box». Ora è di vetro come la barra (tinto di blu quanto basta per leggere le scritte sopra una foto chiara), senza ombra pesante, con un filo fra una riga e l'altra; la riga su cui si passa si colora d'azzurro. */ .aa-nav__tendina { position: absolute; top: calc(100% - 4px); left: -22px; width: 372px; padding: 6px; background: rgba(28, 49, 68, .6); color: var(--crema); border: 1px solid rgba(239, 241, 243, .34); box-shadow: 0 14px 36px rgba(8, 14, 20, .18); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s, transform .32s var(--molla), visibility 0s .32s; } .aa-nav__tendina li + li { border-top: 1px solid rgba(239, 241, 243, .16); } .aa-nav__voce--tendina:hover .aa-nav__tendina, .aa-nav__voce--tendina:focus-within .aa-nav__tendina { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .aa-nav__tendina a:focus-visible { outline-color: var(--crema); outline-offset: -2px; } } /* Menu a tutto schermo (telefono e tablet): blu col crema, come il logo sulla pagina dei colori. */ .aa-pannello { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; padding: 14px var(--bordo) 30px; background: var(--blu); color: var(--crema); overflow-y: auto; transform: translateX(-100%); visibility: hidden; transition: transform .5s cubic-bezier(.4, 0, .2, 1), visibility 0s .5s; } .aa-pannello.e-aperto { transform: none; visibility: visible; transition: transform .5s cubic-bezier(.4, 0, .2, 1); } .aa-pannello__testa { display: flex; align-items: center; justify-content: space-between; min-height: 52px; } .aa-pannello__simbolo { width: 58px; color: var(--crema); } .aa-pannello__chiudi { width: 44px; height: 44px; display: grid; place-items: center; margin-right: -10px; } .aa-pannello__chiudi .aa-ico { width: 26px; height: 26px; } .aa-pannello__voci { margin-top: 26px; } .aa-pannello__voci > li { border-bottom: 1px solid rgba(239, 241, 243, .22); } .aa-pannello__voci > li > a { display: block; padding: 17px 0; font: 500 23px/1.2 var(--f-titoli); text-transform: uppercase; letter-spacing: .012em; text-decoration: none; } .aa-pannello__figli { display: grid; gap: 2px; padding: 0 0 16px; } .aa-pannello__figli .aa-tendina__voce { grid-template-columns: 54px minmax(0, 1fr); margin-inline: -8px; } .aa-pannello__figli .aa-tendina__foto { width: 54px; height: 54px; } @media (min-width: 700px) { .aa-pannello__figli { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; } } .aa-pannello__piede { margin-top: auto; padding-top: 30px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; } .aa-pannello__piede .aa-b { border-radius: 999px; } @media (min-width: 1200px) { .aa-pannello { display: none; } } .aa-blocca { overflow: hidden; } /* -------------------------------------------------------------- 4. Home */ /* Velo d'avvio: la pagina si apre sul blu del marchio col logo crema al centro, poi compare il video e il logo diventa bianco. */ .aa-avvio { position: fixed; inset: 0; z-index: 50; background: var(--blu); pointer-events: none; animation: aa-avvio .9s 1.1s cubic-bezier(.4, 0, .2, 1) forwards; } @keyframes aa-avvio { to { opacity: 0; visibility: hidden; } } .aa-home .aa-testata .aa-logo { animation: aa-logo-avvio .9s 1.1s cubic-bezier(.4, 0, .2, 1) both; } @keyframes aa-logo-avvio { from { color: var(--crema); } to { color: var(--bianco); } } @media (prefers-reduced-motion: reduce) { .aa-avvio { display: none; } } .aa-eroe { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 100vh; min-height: 100svh; color: var(--bianco); background: var(--notte); overflow: hidden; } .aa-eroe__poster, .aa-eroe__poster img, .aa-eroe__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .aa-eroe__video { opacity: 0; transition: opacity 1.2s ease; } .aa-eroe__video.e-pronto { opacity: 1; } .aa-eroe__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 23, 32, .5) 0%, rgba(13, 23, 32, .24) 34%, rgba(13, 23, 32, .3) 62%, rgba(13, 23, 32, .54) 100%); } .aa-eroe__testi { position: relative; z-index: 2; padding-bottom: clamp(56px, 13vh, 144px); text-align: center; } /* La frase d'apertura è in Ortica: il lato «elegante» del marchio. */ .aa-eroe__motto { max-width: 17em; margin: 0 auto 22px; font: 300 clamp(20px, 1.05rem + .7vw, 27px)/1.25 var(--f-accento); letter-spacing: .005em; text-wrap: balance; } @media (min-width: 900px) { .aa-eroe__testi { padding-bottom: clamp(90px, 15vh, 140px); } .aa-eroe__motto { max-width: none; margin-bottom: 30px; } } /* Sul telefono la ricerca è una pillola bianca che apre un foglio dal basso. */ .aa-eroe__pillola { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; max-width: 420px; margin-inline: auto; padding: 12px 12px 12px 24px; background: var(--bianco); color: var(--blu); border-radius: 999px; text-align: left; box-shadow: 0 12px 32px rgba(13, 23, 32, .26); } .aa-eroe__pillola b { display: block; font-weight: 500; font-size: 16px; line-height: 1.3; } .aa-eroe__pillola small { display: block; font-size: 14px; color: var(--tenue); } .aa-eroe__pillola i { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--marine); color: var(--bianco); } .aa-foglio { position: fixed; inset: 0; z-index: 90; visibility: hidden; transition: visibility 0s .45s; } .aa-foglio.e-aperto { visibility: visible; transition-delay: 0s; } .aa-foglio__fondo { position: absolute; inset: 0; background: rgba(13, 23, 32, .55); opacity: 0; transition: opacity .4s; } .aa-foglio.e-aperto .aa-foglio__fondo { opacity: 1; } .aa-foglio__carta { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px var(--bordo) calc(26px + env(safe-area-inset-bottom)); background: var(--bianco); color: var(--blu); border-radius: 18px 18px 0 0; text-align: left; transform: translateY(102%); transition: transform .45s cubic-bezier(.3, .8, .3, 1); } .aa-foglio.e-aperto .aa-foglio__carta { transform: none; } .aa-foglio__testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 17px; } .aa-foglio__testa button { width: 40px; height: 40px; display: grid; place-items: center; margin-right: -8px; } /* La ricerca delle date: di base è una colonna chiara (foglio del telefono, riquadro della scheda). */ .aa-cerca { display: grid; gap: 10px; color: var(--blu); text-align: left; } .aa-cerca__campo { position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px; border: 1px solid var(--filo); background: var(--bianco); font-size: 15px; } .aa-cerca__campo .aa-ico { color: var(--tenue); } .aa-cerca__campo--data { cursor: pointer; } .aa-cerca__campo--data input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } .aa-cerca__campo--data:focus-within { outline: 2px solid var(--marine); outline-offset: 2px; } .aa-cerca__etichetta { color: var(--tenue); } .aa-cerca__etichetta.ha-valore { color: var(--blu); font-weight: 500; } .aa-cerca__ospiti { flex: 1; } .aa-cerca__ospiti b { font-weight: 500; } .aa-cerca__tondo { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--filo); transition: background-color .2s, border-color .2s; } .aa-cerca__tondo:hover { background: var(--platino); } .aa-cerca__tondo .aa-ico { width: 16px; height: 16px; color: inherit; } .aa-cerca__vai { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; background: var(--marine); color: var(--bianco); font-size: 13.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; transition: background-color .3s, color .3s; } .aa-cerca__vai:hover { background: var(--blu); } .aa-cerca__vai .aa-ico { width: 18px; height: 18px; } /* Da 900 px in su, nell'apertura, la ricerca diventa una riga di vetro sopra il video. */ @media (min-width: 900px) { .aa-eroe__pillola { display: none; } .aa-foglio { position: static; visibility: visible; } .aa-foglio__fondo, .aa-foglio__testa { display: none; } .aa-foglio__carta { position: static; padding: 0; background: none; color: inherit; border-radius: 0; transform: none; text-align: center; } .aa-cerca--barra { display: flex; align-items: center; gap: 0; width: min(760px, 100%); height: 60px; margin-inline: auto; padding: 0 10px 0 6px; color: var(--bianco); border-radius: 999px; border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25); } .aa-cerca--barra .aa-cerca__campo { min-height: 0; height: 28px; padding: 0 20px; border: 0; background: none; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; } .aa-cerca--barra .aa-cerca__campo .aa-ico { width: 16px; height: 16px; color: var(--bianco); } .aa-cerca--barra .aa-cerca__campo--data { flex: 0 0 158px; border-right: 1px solid rgba(255, 255, 255, .32); } .aa-cerca--barra .aa-cerca__campo--data input { inset: -16px 0; height: auto; } .aa-cerca--barra .aa-cerca__etichetta, .aa-cerca--barra .aa-cerca__etichetta.ha-valore { color: var(--bianco); white-space: nowrap; } .aa-cerca--barra .aa-cerca__campo--ospiti { flex: 1; gap: 10px; font-size: 14px; letter-spacing: 0; text-transform: none; } .aa-cerca--barra .aa-cerca__ospiti { flex: none; margin-right: 6px; white-space: nowrap; } .aa-cerca--barra .aa-cerca__tondo { width: 40px; height: 40px; border: 0; background: rgba(255, 255, 255, .22); } .aa-cerca--barra .aa-cerca__tondo:hover { background: rgba(255, 255, 255, .36); } .aa-cerca--barra .aa-cerca__vai { min-height: 0; height: 40px; border-radius: 999px; background: var(--bianco); color: var(--blu); font-size: 12.5px; letter-spacing: .06em; } .aa-cerca--barra .aa-cerca__vai:hover { background: var(--marine); color: var(--bianco); } /* revisione col cliente: «quando vado col cursore su Cerca si deve colorare azzurro» */ } /* Benvenuto */ .aa-benv { padding: 44px 0 30px; } .aa-benv__griglia { display: grid; gap: 26px; } .aa-benv__occhiello { max-width: 21em; margin-top: 16px; font: 300 clamp(18px, 1rem + .35vw, 21px)/1.45 var(--f-accento); color: var(--blu); } .aa-benv__piccola { display: none; } .aa-benv__grande { position: relative; } .aa-benv__grande img { width: 100%; aspect-ratio: 753 / 502; object-fit: cover; } .aa-bollo { position: absolute; right: 4%; bottom: 6%; width: clamp(108px, 30vw, 136px); aspect-ratio: 1; display: grid; place-content: center; gap: 3px; padding: 12px; border-radius: 50%; background: var(--blu); color: var(--crema); text-align: center; outline: 1px solid rgba(239, 241, 243, .55); outline-offset: -6px; } .aa-bollo b { font: 500 clamp(17px, 4.6vw, 22px)/1.1 var(--f-titoli); } .aa-bollo span { font: 400 clamp(8.5px, 2.3vw, 10px)/1.4 var(--f-accento); letter-spacing: .16em; text-transform: uppercase; } .aa-benv__testo { margin-top: 22px; } .aa-benv__azione { margin-top: 26px; text-align: center; } @media (min-width: 1024px) { .aa-benv { padding: 100px 0 32px; } .aa-benv__griglia { grid-template-columns: minmax(0, 471fr) minmax(0, 753fr); gap: 72px; align-items: start; } .aa-benv__piccola { display: block; width: 380px; max-width: 100%; aspect-ratio: 380 / 400; margin-top: 30px; object-fit: cover; } .aa-benv__azione { text-align: left; } } /* Numeri: in Ortica, grandi. Dal 13 ott 2026 è una fascia blu: spezza la fila delle fasce chiare, che ora hanno tutte lo stesso ghiaccio. */ .aa-numeri { padding: 44px 0; background: var(--blu); color: var(--crema); } .aa-numeri .aa-t1 { color: var(--crema); } .aa-numeri__titolo { text-align: center; } .aa-numeri__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 16px; margin-top: 32px; text-align: center; } .aa-numeri__lista b { display: block; font: 300 clamp(34px, 4.3vw, 60px)/1 var(--f-accento); color: var(--crema); white-space: nowrap; } .aa-numeri__lista span { display: block; max-width: 20em; margin: 12px auto 0; font-size: 12px; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: rgba(239, 241, 243, .74); } @media (min-width: 900px) { .aa-numeri { padding: 70px 0; } .aa-numeri__lista { grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 46px; } .aa-numeri__lista li { padding: 6px 20px; } .aa-numeri__lista li + li { border-left: 1px solid rgba(239, 241, 243, .22); } } /* Recensioni */ .aa-rec { padding: 46px 0 46px; } .aa-rec__griglia { display: grid; gap: 26px; } .aa-rec__sx { text-align: center; } .aa-rec__voti { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); justify-content: center; gap: 12px; margin-top: 24px; } .aa-rec__voti li { display: flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border: 1px solid var(--filo); border-radius: 999px; font-size: 14px; } .aa-rec__voti .aa-ico { width: 14px; height: 14px; color: var(--marine); } .aa-giostra { min-width: 0; } .aa-giostra__binario { gap: 20px; } .aa-rec__scheda { flex: 0 0 min(330px, 86%); scroll-snap-align: start; padding: 26px; background: var(--blu); color: var(--crema); } .aa-rec__nome { font-weight: 500; color: var(--crema); } .aa-rec__quando { font-size: 12px; color: rgba(239, 241, 243, .7); } .aa-rec__scheda .aa-stelle { color: var(--marine); } /* l'azzurro di «Prenota» (16 ott 2026, il titolare) */ .aa-rec__scheda .aa-stelle { margin: 14px 0 8px; } .aa-rec__testo { font: 300 17px/1.5 var(--f-accento); color: var(--crema); } .aa-rec .aa-frecce { margin-top: 20px; } @media (min-width: 1024px) { .aa-rec { padding: 90px 0 90px; } .aa-rec__griglia { grid-template-columns: 432px minmax(0, 1fr); gap: 72px; align-items: start; } .aa-rec__sx { text-align: left; } .aa-rec__voti { justify-content: start; } } /* Mosaico «Trova il tuo soggiorno» */ .aa-mos { padding: 30px 0; background: var(--crema-chiara); } /* Sul crema la scritta piccola va in French Blue: il Bright Marine lì non si legge abbastanza. */ .aa-mos .aa-occhiello { color: var(--blu); } .aa-mos__testa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 22px; } .aa-mos__testa .aa-rimando { margin-left: auto; padding-bottom: 6px; } .aa-mos__griglia { display: grid; gap: 3px; } .aa-mos__casa { position: relative; display: flex; align-items: flex-end; min-height: 250px; overflow: hidden; color: var(--bianco); text-decoration: none; background: var(--notte); } .aa-mos__casa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--molla); } .aa-mos__casa:hover img, .aa-mos__casa:focus-visible img { transform: scale(1.05); } .aa-mos__casa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 23, 32, 0) 28%, rgba(13, 23, 32, .72) 100%); } .aa-mos__testi { position: relative; z-index: 1; padding: 24px 26px; } .aa-mos__titolo { margin-top: 14px; font: 500 20px/1.2 var(--f-titoli); letter-spacing: .012em; text-transform: uppercase; } .aa-mos__testo { max-width: 480px; margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .92); } .aa-mos__vai { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; } .aa-mos__vai .aa-ico { width: 15px; height: 15px; transition: transform .35s var(--molla); } .aa-mos__casa:hover .aa-mos__vai .aa-ico { transform: translateX(4px); } @media (min-width: 900px) { .aa-mos { padding: 80px 0; } .aa-mos__testa { margin-bottom: 28px; } .aa-mos__griglia { grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: 320px 320px; } .aa-mos__casa { min-height: 0; } .aa-mos__casa:nth-child(1) { grid-row: 1 / 3; } .aa-mos__casa:nth-child(4) { grid-column: 2 / 4; } .aa-mos__casa:nth-child(1) .aa-mos__titolo { font-size: 24px; } .aa-mos__testi { padding: 28px 30px; } } /* Vetrina degli appartamenti */ .aa-vet { padding: 30px 0 40px; background: var(--carta); overflow: hidden; } .aa-vet__testa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; } .aa-vet__sotto { margin-top: 10px; font: 300 19px/1.4 var(--f-accento); color: var(--blu); } .aa-vet__comandi { display: flex; align-items: center; gap: 8px; } .aa-vet__comandi .aa-b { margin-left: 6px; } .aa-vet__binario { gap: 16px; padding-inline: max(var(--bordo), calc((100vw - var(--largo)) / 2)); scroll-padding-inline: max(var(--bordo), calc((100vw - var(--largo)) / 2)); } .aa-vet__scheda { flex: 0 0 min(978px, 82vw); scroll-snap-align: start; } .aa-vet__scheda a { position: relative; display: block; height: clamp(440px, 118vw, 500px); overflow: hidden; color: var(--blu); text-decoration: none; } .aa-vet__foto { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--molla); } .aa-vet__scheda a:hover .aa-vet__foto { transform: scale(1.04); } .aa-vet__dati { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; background: var(--bianco); } .aa-vet__luogo { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 14px; color: var(--testo); } .aa-vet__luogo .aa-ico { width: 15px; height: 15px; } .aa-vet__numeri { display: flex; gap: 12px; font-size: 15px; white-space: nowrap; } .aa-vet__numeri li { display: flex; align-items: center; gap: 5px; } .aa-vet__numeri li + li { padding-left: 12px; border-left: 1px solid var(--filo); } .aa-vet__numeri .aa-ico { width: 18px; height: 18px; } @media (min-width: 900px) { .aa-vet { padding: 80px 0; } .aa-vet__binario { gap: 24px; } .aa-vet__scheda a { height: clamp(460px, 40vw, 560px); } .aa-vet__dati { left: 40px; right: auto; bottom: 40px; min-width: 460px; gap: 40px; padding: 22px 28px; } } /* I tre pregi: foto e testo che si alternano */ .aa-pregi { padding: 46px 0 6px; } .aa-pregi__testa { max-width: 1000px; margin: 0 auto 34px; text-align: center; } .aa-pregi__occhiello { max-width: 34em; margin: 16px auto 0; font: 300 clamp(18px, 1rem + .35vw, 21px)/1.45 var(--f-accento); color: var(--blu); } .aa-pregio { display: grid; gap: 22px; margin-bottom: 44px; } .aa-pregio__foto { order: -1; overflow: hidden; } .aa-pregio__foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .aa-pregio__testi p { margin: 16px 0 24px; font-size: 15.5px; line-height: 1.7; } @media (min-width: 900px) { .aa-pregi { padding: 80px 0 20px; } .aa-pregi__testa { margin-bottom: 70px; } .aa-pregio { grid-template-columns: minmax(0, 450fr) minmax(0, 654fr); gap: clamp(48px, 7vw, 120px); align-items: center; margin-bottom: 100px; } .aa-pregio__foto { order: 0; } .aa-pregio__foto img { aspect-ratio: 654 / 440; } .aa-pregio:nth-of-type(even) { grid-template-columns: minmax(0, 654fr) minmax(0, 450fr); } .aa-pregio:nth-of-type(even) .aa-pregio__foto { order: -1; } } /* Invito a prenotare: la busta col biglietto */ .aa-invito { position: relative; padding: 60px 0; color: var(--bianco); background: var(--notte); overflow: hidden; } .aa-invito__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .aa-invito::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 23, 32, .56), rgba(13, 23, 32, .4)); } .aa-invito__griglia { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; } .aa-invito__sx { display: grid; justify-items: center; gap: 0; } /* il pulsante sotto la busta ha la misura degli altri pulsanti (16 ott 2026, Revisione sito di Riccardo, richiesta 17: «il box azzurro grande come quello del Contattaci più sotto»; prima era largo 280 px) */ .aa-invito__sx .aa-b { margin-top: -8px; position: relative; z-index: 2; } .aa-invito__dx { text-align: center; } .aa-invito__dx .aa-t1 { color: var(--bianco); } .aa-invito__dx p { max-width: 26em; margin: 14px auto 0; font: 300 20px/1.45 var(--f-accento); } .aa-lettera { position: relative; width: min(440px, 100%); aspect-ratio: 440 / 350; filter: drop-shadow(0 18px 30px rgba(8, 14, 20, .4)); } .aa-lettera__dietro { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: var(--notte); } .aa-lettera__carta { position: absolute; left: 10%; right: 10%; top: 0; height: 78%; display: flex; flex-direction: column; align-items: center; padding: 8% 5% 0; background: var(--crema); color: var(--blu); text-align: center; transform: rotate(-1.5deg); transition: transform .7s var(--molla); } .aa-invito__sx:hover .aa-lettera__carta { transform: rotate(-1.5deg) translateY(-12px); } .aa-lettera__carta small { font: 400 clamp(8px, 2.2vw, 10.5px)/1.5 var(--f-accento); letter-spacing: .26em; text-transform: uppercase; } .aa-lettera__carta b { margin-top: 8px; font: 500 clamp(20px, 5.8vw, 30px)/1.08 var(--f-titoli); letter-spacing: .012em; text-transform: uppercase; } .aa-lettera__carta .aa-logo__disegno { width: 21%; height: auto; margin-top: 10px; } .aa-lettera__davanti { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: var(--blu); clip-path: polygon(0 0, 50% 60%, 100% 0, 100% 100%, 0 100%); } .aa-lettera__davanti::before, .aa-lettera__davanti::after { content: ""; position: absolute; inset: 0; background: var(--blu-2); } .aa-lettera__davanti::before { clip-path: polygon(0 0, 50% 60%, 0 100%); } .aa-lettera__davanti::after { clip-path: polygon(100% 0, 50% 60%, 100% 100%); background: #223B52; } @media (min-width: 900px) { .aa-invito { display: flex; align-items: center; min-height: 695px; padding: 100px 0; } .aa-invito__griglia { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 90px; width: min(100% - 2 * var(--bordo), var(--largo)); } .aa-invito__dx { text-align: left; } .aa-invito__dx p { margin-left: 0; font-size: 22px; } } /* Instagram */ .aa-social { padding: 36px 0; } .aa-social__titolo { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; font: 400 13px/1.4 var(--f-accento); letter-spacing: .28em; text-transform: uppercase; color: var(--blu); } .aa-social__titolo .aa-ico { width: 26px; height: 26px; } .aa-social__titolo a { text-decoration: none; } .aa-social__binario { gap: 20px; } .aa-social__binario > * { flex: 0 0 calc((100% - 20px) / 2); aspect-ratio: 1; overflow: hidden; scroll-snap-align: start; } .aa-social__binario img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--molla); } .aa-social__binario > *:hover img { transform: scale(1.05); } .aa-social__piede { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; font-size: 12px; letter-spacing: .1em; color: var(--blu); } .aa-social__piede.e-fermo { display: none; } @media (min-width: 900px) { .aa-social { padding: 80px 0; } .aa-social__binario > * { flex-basis: calc((100% - 80px) / 5); } } /* Domande frequenti */ .aa-faq { padding: 50px 0; background: var(--blu); color: var(--crema); } .aa-faq .aa-t2 { color: var(--crema); } .aa-faq__lista { margin-top: 10px; } .aa-faq__voce { border-bottom: 1px solid rgba(239, 241, 243, .2); } .aa-faq__voce summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font: 500 13.5px/1.6 var(--f-titoli); letter-spacing: .1em; text-transform: uppercase; color: var(--crema); } .aa-faq__voce summary::-webkit-details-marker { display: none; } .aa-faq__voce summary:focus-visible { outline-color: var(--crema); } .aa-faq__segno { width: 18px; height: 18px; color: var(--crema); transition: transform .35s var(--molla); } .aa-faq__voce[open] .aa-faq__segno { transform: rotate(45deg); } .aa-faq__risposta { max-width: 920px; padding: 0 0 24px; } .aa-faq__risposta p + p { margin-top: .8em; } @media (min-width: 1024px) { .aa-faq { padding: 80px 0; } } /* Riquadro col bordo a motivo: dal 13 ott 2026 la cornice è blu (le cime in ghiaccio) e dentro c'è il ghiaccio. */ .aa-riq { position: relative; padding: 50px var(--bordo); } .aa-riq--foto { padding-block: 70px; background: var(--notte); } .aa-riq__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .aa-riq--foto::after { content: ""; position: absolute; inset: 0; background: rgba(13, 23, 32, .3); } .aa-riq__cornice { position: relative; z-index: 1; max-width: 934px; margin-inline: auto; padding: clamp(14px, 2.4vw, 30px); background: var(--blu) url("../img/motivo.svg") 0 0 / 46px 46px; } .aa-riq__dentro { padding: clamp(34px, 6vw, 72px) clamp(20px, 5vw, 80px); background: var(--carta); text-align: center; } .aa-riq__dentro p { max-width: 28em; margin: 14px auto 0; font: 300 19px/1.45 var(--f-accento); color: var(--blu); } .aa-riq__dentro .aa-b { margin-top: 26px; } @media (min-width: 1024px) { .aa-riq { padding-block: 80px; } .aa-riq--foto { padding-block: 100px; } } /* Fascia prima del piede (pagine interne) */ .aa-fine { padding: 44px 0; background: var(--crema-chiara) url("../img/motivo-largo.svg") 50% 50% / 420px auto; border-top: 1px solid var(--filo); } .aa-fine__riga { display: grid; justify-items: center; gap: 22px; text-align: center; } .aa-fine__logo { width: 180px; color: var(--blu); } .aa-fine__logo .aa-logo__disegno { width: 100%; height: auto; } @media (min-width: 1024px) { .aa-fine { padding: 70px 0; } .aa-fine__riga { grid-template-columns: 200px minmax(0, 1fr) auto; justify-items: start; align-items: center; gap: 60px; text-align: left; } .aa-fine__logo { width: 200px; } } /* ------------------------------------------------------------ 5. Piede */ /* Blu col crema: è il logo come sta sulla pagina dei colori dell'identità. */ .aa-piede { padding: 34px 0 34px; background: var(--blu); font-size: 15px; color: var(--crema); } /* (16 ott 2026, Revisione sito di Riccardo, richiesta 16: tolta la fila delle foto degli appartamenti in cima al piede) */ /* I titoli delle colonne: un riquadrino azzurro (revisione col cliente: «i titoli li puoi fare con dei piccoli boxetti azzurri […] che staccano dalle voci»). */ .aa-piede h3 { font: 500 11px/1.4 var(--f-testo); letter-spacing: .18em; text-transform: uppercase; color: var(--bianco); } .aa-piede h3 span { display: inline-block; padding: 6px 11px 5px; background: var(--marine); } .aa-piede .aa-rimando { color: var(--crema); } .aa-piede__colonne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; padding: 40px 0 26px; } .aa-piede__marchio { grid-column: 1 / -1; } .aa-piede__logo { display: block; width: 170px; color: var(--crema); } .aa-piede__logo .aa-logo__disegno { width: 100%; height: auto; } /* «Managed by» col logo di Halldis by Vita, a colori, sotto il logo della struttura (come nel piede di Le Mallet). È l'unico posto del sito dove Halldis è nominata. */ .aa-piede__gestito { display: flex; align-items: center; gap: 14px; margin-top: 24px; } /* 16 ott 2026, Revisione sito di Riccardo (15, «cambia font»): non più la scritta piccola in maiuscolo spaziato, ma «Managed by» in corsivo, nella misura delle voci del piede, accanto al logo */ .aa-piede__gestito span { font: italic 400 16px/1.3 var(--f-testo); color: rgba(239, 241, 243, .86); } .aa-piede__gestito img { width: 74px; height: auto; } .aa-piede__legali { margin-top: 16px; padding-top: 15px; border-top: 1px solid rgba(239, 241, 243, .2); } .aa-piede h3 { margin-bottom: 16px; } .aa-piede li { margin-bottom: 9px; color: var(--bianco); } .aa-piede a { text-decoration: none; } .aa-piede a:hover { text-decoration: underline; text-underline-offset: 3px; } .aa-piede__fondo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 22px; border-top: 1px solid rgba(239, 241, 243, .24); } /* l'indirizzo della colonna «Dove», su tre righe (16 ott 2026, richiesta 22) */ .aa-piede__indirizzo { line-height: 1.55; } /* «Seguici sui social» (14 ott 2026, sera): una colonna come le altre, fra il logo e il Menu, con l'icona accanto al nome */ .aa-piede__social li > * { display: inline-flex; align-items: center; gap: 10px; } .aa-piede__social .aa-ico { width: 18px; height: 18px; flex: none; } /* sul telefono una riga intera, coi due nomi uno accanto all'altro: l'etichetta in una colonna stretta andava a capo */ @media (max-width: 899px) { .aa-piede__social { grid-column: 1 / -1; } .aa-piede__social ul { display: flex; flex-wrap: wrap; gap: 4px 28px; } } .aa-piede__legale { margin-left: auto; font-size: 13px; line-height: 1.7; color: rgba(239, 241, 243, .78); text-align: right; } .aa-piede__crediti { margin-top: 18px; font-size: 12.5px; line-height: 1.6; color: rgba(239, 241, 243, .78); } .aa-piede__crediti summary { display: inline-block; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; list-style: none; } .aa-piede__crediti summary::-webkit-details-marker { display: none; } .aa-piede__crediti p { margin-top: 10px; } .aa-piede__crediti ul { margin-top: 6px; columns: 2 320px; column-gap: 40px; } .aa-piede__crediti li { margin-bottom: 4px; break-inside: avoid; color: inherit; } .aa-piede__crediti a { text-decoration: underline; text-underline-offset: 2px; } @media (min-width: 900px) { .aa-piede { padding-top: 40px; } /* Quattro colonne su tutta la larghezza, a distanze uguali (16 ott 2026, il titolare: «il Dove con quella linea lunga non si capisce, metti il Dove più a destra»; poi: «quattro colonne che vanno da sinistra a destra a tutta la larghezza: quelle a sinistra e a destra vanno bene, le due centrali in modo che sia simmetrico»). Il logo sul bordo sinistro, «Dove» sul bordo destro come la riga del copyright, Social e Aprica Alpine in mezzo con lo stesso spazio fra tutte; ogni colonna è larga quanto quello che ha dentro, e la linea sopra Privacy e Cookie è lunga quanto l'indirizzo */ .aa-piede__colonne { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 30px 40px; padding: 50px 0 36px; } .aa-piede__gestito img { width: 84px; } .aa-piede__marchio { grid-column: auto; } } /* --------------------------------------------------- 6. Pagine interne */ /* Apertura con la foto (13 ott 2026). Il titolare, con la foto di un'apertura («African Forest»): «la parte "LA STRUTTURA" devi farlo completamente diverso in ogni sezione […] qua tipo "Aprica e dintorni" l'hero lo devi cambiare». Prima: la foto col titolo al centro. Ora: la foto a tutto schermo e una LASTRA DI VETRO blu; il titolo è enorme e attraversa il bordo della lastra, e le lettere cambiano passando: dentro il vetro sono solo contorno, fuori piene. Come è fatto (inc/aiuti.php, aa_testa_pagina): - il titolo è scritto due volte, una sopra l'altra (.aa-testa__titoli è una griglia a una casella): la copia piena è l'

vero, quella a contorno è nascosta ai lettori di schermo. Ognuna è ritagliata (clip-path) da una parte del bordo, e il bordo della lastra è il bordo della scatola del titolo: coincidono per costruzione; - la riga più lunga (.aa-testa__riga--lunga) esce dal bordo di una parte della sua lunghezza (--fuori), contata sulle lettere (--n) perché una riga non sa quanto è larga: .6em è il passo medio del Ronzino in maiuscolo; - il corpo (--corpo) si regola sulle lettere della riga più lunga (--lettere), così ogni titolo riempie lo stesso spazio, da «CONTATTI» ad «APRICA E DINTORNI»; - telefono: la lastra sta in basso, comincia a metà altezza del titolo (.aa-testa__titoli::before) e lo taglia in orizzontale: sopra pieno sulla foto, sotto a contorno sul vetro; - computer: la lastra è un lato intero (.aa-testa__vetro), a sinistra (--sx) o a destra (--dx): si alterna da una pagina all'altra. Dal lato libero stanno i segni delle pagine e le frecce verso la pagina prima e dopo. */ @property --fuori { syntax: ""; inherits: true; initial-value: .42; } .aa-testa { --corpo: clamp(38px, calc(84vw / (var(--lettere, 9) * .6)), 104px); --fuori: .42; position: relative; z-index: 0; display: flex; align-items: flex-end; min-height: max(520px, 78vh); min-height: max(520px, 78svh); padding: calc(var(--avviso-h) + var(--barra-h) + 24px) 0 0; color: var(--bianco); background: var(--notte); overflow: hidden; } .aa-testa--alta { min-height: max(560px, 100vh); min-height: max(560px, 100svh); } /* bassa: per l'elenco e la scheda degli appartamenti («sopra magari un po' più bassino»): solo il titolo */ /* (sul telefono: il titolo è contato più largo, .66 per lettera invece di .6, perché qui ci vanno i nomi degli appartamenti, con lettere larghe come M e O: «MONOLOCALE» arrivava al bordo dello schermo; e niente frecce, che senza la frase e «Scopri» finirebbero sopra il titolo) */ .aa-testa--bassa { --corpo: clamp(34px, calc(84vw / (var(--lettere, 9) * .66)), 96px); min-height: max(340px, 48vh); min-height: max(340px, 48svh); } .aa-testa--bassa .aa-testa__giro { display: none; } .aa-testa__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .aa-testa__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13, 23, 32, .52), rgba(13, 23, 32, .14) 36%, rgba(13, 23, 32, .22)); } .aa-testa__dentro { position: relative; width: 100%; padding: 0 var(--bordo) 36px; } .aa-testa__blocco { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: flex-start; } .aa-testa__vetro { display: none; } .aa-testa__occhiello { position: relative; z-index: 1; margin-bottom: 14px; font: 400 11px/1.6 var(--f-accento); letter-spacing: .34em; text-transform: uppercase; } /* (la colonna è minmax(0, 1fr): senza, la scatola si allargava quanto la riga lunga finché questa non era uscita abbastanza dal bordo, e durante l'entrata le altre righe finivano fuori dalla lastra) */ .aa-testa__titoli { position: relative; z-index: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-self: stretch; } .aa-testa__titoli::before { content: ""; position: absolute; z-index: -1; top: 50%; left: -50vw; right: -50vw; height: 200vh; background: rgba(28, 49, 68, .62); border-top: 1px solid rgba(239, 241, 243, .45); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); } .aa-testa__titolo { grid-area: 1 / 1; min-width: 0; margin: 0; font: 700 var(--corpo)/.9 var(--f-titoli); letter-spacing: -.012em; text-transform: uppercase; white-space: nowrap; } .aa-testa__riga { display: block; } .aa-testa__titolo--pieno { clip-path: inset(-100vh -100vw 50% -100vw); } .aa-testa__titolo--filo { color: transparent; -webkit-text-stroke: 1.2px var(--crema); clip-path: inset(50% -100vw -100vh -100vw); } .aa-testa__sotto { position: relative; z-index: 1; max-width: 24em; margin-top: 18px; font: 300 clamp(17px, 1rem + .4vw, 21px)/1.42 var(--f-accento); } /* «La struttura»: sotto il titolo non c'è una frase ma il nome della struttura, piccolo e spaziato come l'occhiello (revisione col cliente: «la struttura, e sotto ci scrivi Aprica Alpine Apartments, quello che hai messo sopra»). */ .aa-testa__sotto--etichetta { max-width: none; margin-top: 16px; font: 400 11px/1.6 var(--f-accento); letter-spacing: .34em; text-transform: uppercase; } .aa-testa__scopri { position: relative; z-index: 1; margin-top: 22px; min-height: 44px; color: var(--crema); } .aa-testa__scopri .aa-ico { width: 15px; height: 15px; } .aa-testa__scopri:hover .aa-ico { transform: translateY(4px); } .aa-testa__dopo { display: block; height: 0; } /* I segni delle pagine e le frecce: sul telefono restano le frecce, in basso a destra, sopra il vetro. */ .aa-testa__giro { position: absolute; z-index: 2; right: calc(var(--bordo) + 62px); bottom: 30px; } .aa-testa__segni { display: none; } .aa-testa__frecce { display: flex; gap: 8px; } .aa-testa__freccia { width: 46px; height: 46px; display: grid; place-items: center; color: var(--crema); background: rgba(239, 241, 243, .2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .25s, color .25s; } .aa-testa__freccia + .aa-testa__freccia { background: rgba(13, 23, 32, .55); } .aa-testa__freccia:hover, .aa-testa__freccia:focus-visible { background: var(--crema); color: var(--blu); } .aa-testa__freccia:focus-visible, .aa-testa__segni a:focus-visible, .aa-testa__scopri:focus-visible { outline-color: var(--crema); } .aa-testa__freccia .aa-ico { width: 18px; height: 18px; } /* Quanto è larga la lastra (--vetro-l) lo sa tutta la pagina, non solo l'apertura: nei Contatti il riquadro blu «Scrivici» comincia sotto il suo stesso bordo (vedi «Contatti»). */ @media (min-width: 1000px) { :root { --vetro-l: 43vw; } } @media (min-width: 1000px) { /* la riga lunga è larga metà schermo; le altre righe devono stare dentro la lastra (--altre: le loro lettere) */ .aa-testa { --corpo: clamp(56px, min(calc(50vw / (var(--lettere, 9) * .6)), calc((var(--vetro-l) - var(--bordo)) / (var(--altre, .01) * .64))), 178px); align-items: center; min-height: max(560px, 72vh); padding-bottom: 24px; } .aa-testa--alta { min-height: clamp(640px, 100vh, 960px); } .aa-testa--bassa { --corpo: clamp(52px, min(calc(44vw / (var(--lettere, 9) * .6)), calc((var(--vetro-l) - var(--bordo)) / (var(--altre, .01) * .64))), 138px); min-height: max(400px, 50vh); } .aa-testa--bassa .aa-testa__giro { display: block; } .aa-testa--bassa .aa-testa__segni { display: none; } .aa-testa--bassa .aa-testa__frecce { bottom: 30px; } .aa-testa__dentro { display: flex; padding: 0; } .aa-testa--dx .aa-testa__dentro { justify-content: flex-end; } .aa-testa__blocco { width: var(--vetro-l); padding-left: max(var(--bordo), calc((100vw - var(--largo)) / 2)); } .aa-testa--dx .aa-testa__blocco { padding-left: 0; padding-right: max(var(--bordo), calc((100vw - var(--largo)) / 2)); } .aa-testa__vetro { display: block; position: absolute; z-index: -1; top: -100vh; bottom: -100vh; left: -100vw; right: 0; background: rgba(28, 49, 68, .58); border-right: 1px solid rgba(239, 241, 243, .45); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); } .aa-testa--dx .aa-testa__vetro { left: 0; right: -100vw; border-right: 0; border-left: 1px solid rgba(239, 241, 243, .45); } .aa-testa__titoli::before { display: none; } .aa-testa__occhiello { margin-bottom: 20px; font-size: 12px; } .aa-testa--dx .aa-testa__occhiello, .aa-testa--dx .aa-testa__sotto, .aa-testa--dx .aa-testa__scopri { margin-left: 56px; } .aa-testa__titolo { text-align: right; } .aa-testa--dx .aa-testa__titolo { text-align: left; } .aa-testa__riga--lunga { margin-right: calc(-1 * var(--fuori) * var(--n, 9) * .6em); } .aa-testa--dx .aa-testa__riga--lunga { margin-right: 0; margin-left: calc(-1 * var(--fuori) * var(--n, 9) * .6em); } .aa-testa__titolo--pieno { clip-path: inset(-100vh -100vw -100vh 100%); } .aa-testa__titolo--filo { -webkit-text-stroke-width: 1.5px; clip-path: inset(-100vh 0 -100vh -100vw); } .aa-testa--dx .aa-testa__titolo--pieno { clip-path: inset(-100vh 100% -100vh -100vw); } .aa-testa--dx .aa-testa__titolo--filo { clip-path: inset(-100vh -100vw -100vh 0); } .aa-testa__sotto { margin-top: 26px; padding-right: 56px; } .aa-testa__sotto--etichetta { margin-top: 22px; font-size: 12px; } .aa-testa--dx .aa-testa__sotto { padding-right: 0; } .aa-testa__scopri { margin-top: 26px; } .aa-testa__giro { position: static; } .aa-testa__segni { position: absolute; z-index: 2; top: 50%; right: max(var(--bordo), calc((100vw - var(--largo)) / 2)); display: flex; flex-direction: column; align-items: center; gap: 16px; transform: translateY(-50%); } .aa-testa--dx .aa-testa__segni { right: auto; left: max(var(--bordo), calc((100vw - var(--largo)) / 2)); } .aa-testa__segni::before, .aa-testa__segni::after { content: ""; width: 1px; height: 30px; background: rgba(239, 241, 243, .7); } .aa-testa__segni a { display: grid; place-items: center; width: 26px; height: 26px; } .aa-testa__segni a::before { content: ""; width: 10px; height: 10px; border: 1px solid var(--crema); transform: rotate(45deg); transition: background-color .25s, transform .35s var(--molla); } .aa-testa__segni a:hover::before, .aa-testa__segni a:focus-visible::before { background: rgba(239, 241, 243, .5); transform: rotate(45deg) scale(1.2); } .aa-testa__segni a[aria-current]::before { background: var(--crema); } /* a destra le frecce lasciano il posto alla chat, che galleggia nell'angolo */ .aa-testa__frecce { position: absolute; z-index: 2; right: calc(max(var(--bordo), (100vw - var(--largo)) / 2) + 84px); bottom: 44px; gap: 14px; } .aa-testa--dx .aa-testa__frecce { right: auto; left: max(var(--bordo), calc((100vw - var(--largo)) / 2)); } .aa-testa__freccia { width: 54px; height: 54px; } } /* Da 1200 px c'è il menu ai due lati del logo: il bordo della lastra passa nello spazio fra il logo e la voce più vicina, da una parte o dall'altra, così non taglia nessuna scritta. Col menu largo (voci al 41,7 e al 58,3 %, logo di 90 px al centro) quello spazio è stretto e si allarga con lo schermo: il bordo sta a metà fra la fine di «La struttura» e l'inizio del logo, cioè a un ventiquattresimo di schermo (più 3 px) dal centro. Col menu raccolto del pomeriggio erano 71 px fissi. */ @media (min-width: 1200px) { :root { --vetro-l: calc(45.8333vw - 3px); } } /* Entrata: la foto si assesta, la lastra scivola dentro dal suo lato, le righe salgono, poi la riga lunga attraversa il bordo (e passando da contorno diventa piena). Solo con gli script accesi e senza «meno movimento». */ .aa-js .aa-testa__foto { animation: aa-testa-foto 2.8s var(--molla) both; } .aa-js .aa-testa__titoli::before { animation: aa-testa-sale .95s .1s cubic-bezier(.3, .8, .3, 1) both; } .aa-js .aa-testa__riga { animation: aa-sale 1s .45s var(--molla) both; } .aa-js .aa-testa__riga + .aa-testa__riga { animation-delay: .57s; } .aa-js .aa-testa__occhiello { animation: aa-sale .9s .35s var(--molla) both; } .aa-js .aa-testa__sotto { animation: aa-sale .9s .95s var(--molla) both; } .aa-js .aa-testa__scopri, .aa-js .aa-testa__giro { animation: aa-sale .9s 1.1s var(--molla) both; } @keyframes aa-testa-foto { from { transform: scale(1.09); } } @keyframes aa-testa-sale { from { transform: translateY(60vh); } } @keyframes aa-testa-entra { from { transform: translateX(var(--da, -100%)); } } @keyframes aa-testa-esce { from { --fuori: 0; } } @media (min-width: 1000px) { .aa-js .aa-testa__vetro { animation: aa-testa-entra 1s .1s cubic-bezier(.3, .8, .3, 1) both; } .aa-js .aa-testa--dx .aa-testa__vetro { --da: 100%; } .aa-js .aa-testa__titolo { animation: aa-testa-esce 1.25s .85s cubic-bezier(.3, .8, .2, 1) both; } .aa-js .aa-testa__giro { animation: none; } .aa-js .aa-testa__segni, .aa-js .aa-testa__frecce { animation: aa-testa-appare .9s 1.2s ease both; } } @keyframes aa-testa-appare { from { opacity: 0; } } /* Elenco degli appartamenti */ .aa-elenco { padding: 40px 0 60px; } .aa-elenco__testa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 30px; margin-bottom: 26px; } .aa-elenco__testo { max-width: 32em; font: 300 clamp(19px, 1rem + .5vw, 23px)/1.45 var(--f-accento); color: var(--blu); } .aa-elenco__conta { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--filo); border-radius: 999px; font-size: 13px; white-space: nowrap; } .aa-elenco__griglia { display: grid; gap: 26px 24px; } .aa-elenco__nota { margin-top: 30px; font-size: 14px; color: var(--tenue); } .aa-elenco__prosa { max-width: 760px; margin-top: 40px; } @media (min-width: 700px) { .aa-elenco__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .aa-elenco { padding: 64px 0 90px; } .aa-elenco__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } .aa-elenco__griglia[data-quante="4"], .aa-elenco__griglia[data-quante="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Scheda di un appartamento nell'elenco */ .aa-app { border: 1px solid var(--filo); border-radius: 8px; overflow: hidden; background: var(--bianco); transition: box-shadow .35s, transform .35s var(--molla); } .aa-app:hover { box-shadow: 0 16px 36px rgba(19, 33, 46, .14); transform: translateY(-3px); } .aa-app__link { display: block; color: inherit; text-decoration: none; } .aa-app__foto { aspect-ratio: 4 / 5; overflow: hidden; background: var(--platino); } .aa-app__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--molla); } .aa-app:hover .aa-app__foto img { transform: scale(1.04); } .aa-app__corpo { padding: 16px 16px 18px; } .aa-app__nome { overflow: hidden; font: 500 14px/1.5 var(--f-titoli); letter-spacing: .1em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; color: var(--blu); } .aa-app__luogo, .aa-app__dati { margin-top: 2px; font-size: 13px; color: var(--tenue); } .aa-app .aa-etichette { margin-top: 12px; } .aa-app__piede { margin-top: 16px; font-size: 13px; color: var(--testo); } .aa-app__piede b { font-size: 17px; color: var(--blu); } .aa-app__ospiti { display: inline-flex; align-items: center; gap: 6px; } .aa-app__ospiti .aa-ico { width: 16px; height: 16px; } /* Pagina di un appartamento. Rifatta il 13 ott 2026 (il titolare, con la scheda di prima e due modelli: «non questa immagine gigante buttata là: fai una disposizione fatta meglio»). In cima c'è l'apertura bassa di vetro col nome; qui: la galleria a riquadri (la foto grande e, accanto, le altre: toccandone una va al posto della grande), la scheda coi numeri, poi due colonne: a sinistra descrizione, letti, servizi, regole, posizione con la mappa; a destra il riquadro delle date, che resta in vista scorrendo. I riquadri hanno gli angoli appena tondi, come le schede dell'elenco. */ .aa-sch { padding: 26px 0 70px; } .aa-sch__dentro { width: min(100% - 2 * var(--bordo), 1180px); margin-inline: auto; } /* La galleria */ .aa-sch__galleria { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } /* minmax(0, …): sennò la fila delle foto piccole allarga la pagina */ .aa-sch__mini { min-width: 0; } .aa-sch__grande { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--platino); } .aa-sch__grande img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .22s ease; } .aa-sch__grande img.e-cambia { opacity: 0; } .aa-sch__grande figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 46px 18px 14px; background: linear-gradient(180deg, rgba(13, 23, 32, 0), rgba(13, 23, 32, .68)); color: var(--bianco); font-size: 13.5px; pointer-events: none; } .aa-sch__grande figcaption > span:first-child { font: 400 12px/1.5 var(--f-accento); letter-spacing: .26em; text-transform: uppercase; } .aa-sch__conta { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; } .aa-sch__conta b { font-weight: 500; } .aa-sch__miniature { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .aa-sch__miniature::-webkit-scrollbar { display: none; } .aa-sch__miniature li { flex: 1 0 clamp(92px, 26vw, 160px); } /* fino a tre riempiono la riga; di più, scorrono */ .aa-sch__miniature button { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--platino); } .aa-sch__miniature img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--molla); } .aa-sch__miniature button:hover img { transform: scale(1.06); } /* la foto che si sta guardando ha il filo blu dentro il bordo */ .aa-sch__miniature button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--bianco); transition: box-shadow .25s; } .aa-sch__miniature button[aria-current]::after { box-shadow: inset 0 0 0 3px var(--bianco), inset 0 0 0 5px var(--blu); } .aa-sch__miniature button > span { position: absolute; left: 8px; bottom: 8px; z-index: 1; max-width: calc(100% - 16px); overflow: hidden; padding: 3px 8px; border-radius: 4px; background: rgba(13, 23, 32, .62); color: var(--bianco); font-size: 11px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 1000px) { .aa-sch { padding: 44px 0 90px; } .aa-sch__galleria { grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); gap: 12px; } .aa-sch__galleria--sola { grid-template-columns: minmax(0, 1fr); } .aa-sch__grande { aspect-ratio: 16 / 10.2; } .aa-sch__galleria--sola .aa-sch__grande { aspect-ratio: 21 / 9; } /* accanto: le foto a due a due, alte quanto serve per riempire l'altezza della grande (due file; tre da cinque foto in su; oltre le sei scorrono) */ .aa-sch__mini { position: relative; } .aa-sch__miniature { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc((100% - 12px) / 2); gap: 12px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; } .aa-sch__mini[data-quante="5"] .aa-sch__miniature, .aa-sch__mini[data-quante="6"] .aa-sch__miniature, .aa-sch__mini[data-tante] .aa-sch__miniature { grid-auto-rows: calc((100% - 24px) / 3); } .aa-sch__miniature li { min-height: 0; } /* niente buchi: con le foto dispari l'ultima è larga due colonne; con due sole stanno una sopra l'altra */ .aa-sch__miniature li:last-child:nth-child(odd) { grid-column: 1 / -1; } .aa-sch__mini[data-quante="2"] .aa-sch__miniature { grid-template-columns: minmax(0, 1fr); } .aa-sch__miniature button { height: 100%; aspect-ratio: auto; } } /* La scheda coi numeri */ .aa-sch__colonne { display: grid; gap: 34px; margin-top: 22px; } .aa-sch__corpo { min-width: 0; } .aa-sch__carta { padding: 22px 20px; border: 1px solid var(--filo); border-radius: 10px; } .aa-sch__carta-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; } .aa-sch__sotto { display: flex; align-items: center; gap: 6px; font-size: 14.5px; color: var(--blu); } .aa-sch__sotto .aa-ico { width: 16px; height: 16px; } .aa-sch__prezzo { font-size: 14px; } .aa-sch__prezzo b { font-size: 22px; font-weight: 500; color: var(--blu); } .aa-sch__numeri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--filo); } .aa-sch__numeri li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; } .aa-sch__numeri .aa-ico { width: 22px; height: 22px; color: var(--blu); } .aa-sch__numeri b { font-size: 16px; font-weight: 500; color: var(--blu); } .aa-sch__carta .aa-etichette { margin-top: 18px; } @media (min-width: 700px) { .aa-sch__carta { padding: 26px 28px; } .aa-sch__numeri { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 26px; } } /* Le sezioni */ .aa-sch h2 { margin: 46px 0 16px; font: 500 20px/1.3 var(--f-titoli); letter-spacing: .012em; text-transform: uppercase; color: var(--blu); } .aa-sch__letti { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; } .aa-sch__letti li { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; min-width: 180px; padding: 12px 16px; border: 1px solid var(--filo); border-radius: 8px; color: var(--blu); } .aa-sch__letti b { display: block; font-weight: 500; font-size: 14px; } .aa-sch__letti small { display: block; font-size: 12px; color: var(--tenue); } .aa-sch__attacco { font: 300 clamp(20px, 1rem + .5vw, 23px)/1.4 var(--f-accento); color: var(--blu); } .aa-sch__punti { margin: 16px 0 6px; } .aa-sch__punti li { position: relative; padding-left: 22px; margin-bottom: 6px; } .aa-sch__punti li::before { content: ""; position: absolute; left: 4px; top: .78em; width: 8px; height: 1px; background: var(--marine); } .aa-sch__resto { margin-top: 14px; font-size: 15.5px; } .aa-sch__testo.e-chiuso .aa-sch__resto { display: none; } .aa-sch__leggi { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14px; font-weight: 500; color: var(--blu); } .aa-sch__leggi .aa-ico { width: 16px; height: 16px; transition: transform .3s; } .aa-sch__leggi[aria-expanded="true"] .aa-ico { transform: rotate(180deg); } /* i servizi: un riquadrino con la spunta e la scritta, a colonne */ .aa-sch__servizi { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 20px; } .aa-sch__servizi li { display: flex; align-items: center; gap: 12px; font-size: 15px; } .aa-sch__servizi i { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--filo); border-radius: 8px; color: var(--blu); } .aa-sch__servizi .aa-ico { width: 16px; height: 16px; } .aa-sch__regole { border: 1px solid var(--filo); border-radius: 10px; padding: 4px 20px; } .aa-sch__regole details { border-bottom: 1px solid var(--filo); } .aa-sch__regole details:last-child { border-bottom: 0; } .aa-sch__regole summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; cursor: pointer; list-style: none; font-size: 15px; color: var(--blu); } .aa-sch__regole summary::-webkit-details-marker { display: none; } .aa-sch__regole summary .aa-ico { width: 16px; height: 16px; color: var(--tenue); transition: transform .3s; } .aa-sch__regole details[open] summary .aa-ico { transform: rotate(180deg); } .aa-sch__regole details > div { padding: 0 0 16px; font-size: 14.5px; color: var(--testo); } .aa-sch__dove-testa { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 46px 0 16px; } .aa-sch__dove-testa h2 { margin: 0; } /* la posizione: la mappa ferma dei Contatti e, sotto, il luogo e due righe */ .aa-sch__dove { overflow: hidden; border: 1px solid var(--filo); border-radius: 10px; } .aa-sch__mappa { position: relative; overflow: hidden; background: var(--platino); } .aa-sch__mappa img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .aa-sch__dove-testo { padding: 18px 20px 20px; font-size: 15px; line-height: 1.6; } .aa-sch__luogo { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-weight: 500; color: var(--blu); } .aa-sch__luogo .aa-ico { width: 16px; height: 16px; } /* Il riquadro delle date */ .aa-sch__lato { overflow: hidden; border: 1px solid var(--filo); border-radius: 10px; background: var(--bianco); box-shadow: 0 18px 40px rgba(19, 33, 46, .09); scroll-margin-top: calc(var(--barra-h) + 16px); } .aa-sch__lato-testa { padding: 18px 22px; background: var(--blu); color: var(--crema); } .aa-sch__lato-titolo { font: 500 14px/1.4 var(--f-titoli); letter-spacing: .1em; text-transform: uppercase; } .aa-sch__lato-nome { margin-top: 3px; font-size: 13px; color: rgba(239, 241, 243, .78); } .aa-sch__lato-corpo { padding: 20px 22px 22px; } .aa-sch__lato-corpo .aa-sch__prezzo { margin-bottom: 14px; } .aa-sch__lato .aa-b { width: 100%; } .aa-sch__nota { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--tenue); text-align: center; } .aa-sch__altri { margin-top: 30px; } .aa-sch__altri-griglia { display: flex; gap: 16px; margin-top: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; } .aa-sch__altri-griglia::-webkit-scrollbar { display: none; } .aa-sch__altri-griglia .aa-app { flex: 0 0 min(260px, 72%); scroll-snap-align: start; } .aa-sch__altri-griglia .aa-app__foto { aspect-ratio: 4 / 3; } /* più basse che nell'elenco: sennò il blocco è alto uno schermo */ /* Sul telefono il riquadro delle date sta in fondo alla scheda: questa barra fissa ci porta con un tocco. */ .aa-sch__fisso { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px var(--bordo) calc(10px + env(safe-area-inset-bottom)); background: var(--bianco); box-shadow: 0 -4px 18px rgba(19, 33, 46, .14); font-size: 13px; color: var(--tenue); text-decoration: none; } .aa-sch__fisso b { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; background: var(--marine); color: var(--bianco); font-weight: 500; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; } .single-appartamento .aa-piede { padding-bottom: 96px; } @media (min-width: 1000px) { .aa-sch__colonne { grid-template-columns: minmax(0, 1fr) 360px; gap: 44px; align-items: start; margin-top: 26px; } .aa-sch__lato { position: sticky; top: calc(var(--barra-h) + 24px); } .aa-sch__fisso { display: none; } .single-appartamento .aa-piede { padding-bottom: 34px; } .aa-sch__altri { margin-top: 60px; } .aa-sch__altri-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); overflow: visible; } .aa-sch__altri-griglia .aa-app { flex: none; } } /* La struttura */ .aa-storia { padding: 50px 0; } .aa-storia__griglia { display: grid; gap: 34px; } .aa-storia__testi p { margin-top: 16px; font-size: 15.5px; line-height: 1.7; } .aa-storia__testi .aa-t1 + p { margin-top: 24px; font: 300 clamp(20px, 1rem + .5vw, 23px)/1.42 var(--f-accento); color: var(--blu); } .aa-storia__testi .aa-b { margin-top: 28px; } .aa-storia__foto { position: relative; z-index: 0; display: grid; gap: 14px; } .aa-storia__foto::before { content: ""; position: absolute; z-index: -1; right: calc(-1 * var(--bordo)); top: 12%; width: 56%; height: 64%; background: var(--blu); } .aa-storia__piccola { margin-left: 8%; } .aa-storia__grande { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .aa-storia__piccola { width: 55%; aspect-ratio: 4 / 3; object-fit: cover; } @media (min-width: 1024px) { .aa-storia { padding: 100px 0; } .aa-storia__griglia { grid-template-columns: minmax(0, 520fr) minmax(0, 612fr); gap: clamp(60px, 11vw, 164px); align-items: start; } .aa-storia__foto { gap: 30px; } .aa-storia__foto::before { right: -44px; top: -44px; width: 58%; height: 72%; } .aa-storia__piccola { margin: -90px 0 0 -70px; outline: 12px solid var(--bianco); } } /* «Tre vette. Tre A. Un unico segno.»: il concetto del marchio, crema sul blu. */ .aa-segno { padding: 56px 0; background: var(--blu); color: var(--crema); } .aa-segno__griglia { display: grid; gap: 30px; justify-items: center; text-align: center; } .aa-segno__simbolo { width: min(220px, 56vw); color: var(--crema); } .aa-segno__simbolo .aa-logo__disegno { width: 100%; height: auto; } .aa-segno .aa-occhiello { color: var(--crema); opacity: .85; } .aa-segno .aa-t1 { color: var(--crema); } .aa-segno__testi p { max-width: 30em; margin: 18px auto 0; font: 300 clamp(18px, 1rem + .4vw, 22px)/1.45 var(--f-accento); } @media (min-width: 900px) { .aa-segno { padding: 100px 0; } .aa-segno__griglia { grid-template-columns: minmax(0, 420fr) minmax(0, 700fr); gap: 80px; align-items: center; justify-items: start; text-align: left; } .aa-segno__simbolo { width: min(340px, 100%); justify-self: center; } .aa-segno__testi p { margin-left: 0; } } .aa-perche { padding: 50px 0; background: var(--crema-chiara); text-align: center; } .aa-perche__testo { max-width: 640px; margin: 18px auto 0; font: 300 clamp(18px, 1rem + .35vw, 21px)/1.45 var(--f-accento); color: var(--blu); } .aa-perche__testo p + p { margin-top: 12px; } .aa-perche__voci { display: grid; gap: 12px; max-width: 780px; margin: 30px auto 0; } .aa-perche__voci li { padding: 34px 18px 30px; background: var(--blu); color: var(--crema); } .aa-perche__voci small { display: block; font: 400 11px/1.4 var(--f-accento); letter-spacing: .3em; text-transform: uppercase; color: rgba(239, 241, 243, .78); } .aa-perche__voci b { display: block; margin: 12px 0 8px; font: 300 44px/1 var(--f-accento); color: var(--crema); } .aa-perche__voci span { display: block; font-size: 12.5px; color: rgba(239, 241, 243, .78); } @media (min-width: 700px) { .aa-perche { padding: 90px 0; } .aa-perche__voci { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; max-width: 1060px; } .aa-perche__voci li:nth-child(2) { transform: translateY(26px); } .aa-perche { padding-bottom: 116px; } } .aa-valori { padding: 50px 0; } .aa-valori__titolo { text-align: center; } .aa-valori__linguette { display: flex; margin-top: 30px; border-bottom: 1px solid var(--filo); overflow-x: auto; scrollbar-width: none; } .aa-valori__linguette::-webkit-scrollbar { display: none; } .aa-valori__linguette button { flex: 1 0 auto; min-width: 120px; padding: 16px 14px; font-size: 14.5px; color: var(--tenue); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .25s, border-color .25s; } .aa-valori__linguette button:hover { color: var(--blu); } .aa-valori__linguette button[aria-selected="true"] { color: var(--blu); font-weight: 500; border-bottom-color: var(--blu); } /* Le schede girano da sole (revisione col cliente: «deve andare in loop, girare da solo […] poi se clicchi su uno ti fermi»; tema.js, punto 7). Mentre girano, sotto la linguetta accesa il filo si riempie nel tempo che manca alla prossima; fermate, torna il filo pieno di sempre. */ .aa-valori__linguette button { position: relative; } .aa-valori.e-gira .aa-valori__linguette button[aria-selected="true"] { border-bottom-color: rgba(28, 49, 68, .2); } .aa-valori.e-gira .aa-valori__linguette button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--blu); transform-origin: 0 50%; animation: aa-gira var(--gira, 5.2s) linear both; } @keyframes aa-gira { from { transform: scaleX(0); } } .aa-valori__scheda { display: grid; margin-top: 30px; background: var(--blu); color: var(--crema); animation: aa-compare .6s var(--molla); } .aa-valori__foto img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .aa-valori__testi { padding: 30px 26px 36px; } .aa-valori__testi h3 { margin-bottom: 14px; font: 400 13px/1.5 var(--f-accento); letter-spacing: .32em; text-transform: uppercase; color: rgba(239, 241, 243, .78); } .aa-valori__testi p { max-width: 24em; font: 300 clamp(20px, 1rem + .5vw, 24px)/1.4 var(--f-accento); color: var(--crema); } @keyframes aa-compare { from { opacity: 0; transform: translateY(12px); } } @media (min-width: 900px) { .aa-valori { padding: 100px 0 60px; } .aa-valori__scheda { grid-template-columns: minmax(0, 612fr) minmax(0, 612fr); align-items: stretch; margin-top: 48px; } /* la scheda è alta quanto la foto, che ha la sua forma: senza, una foto in piedi la farebbe alta due schermi */ .aa-valori__foto { position: relative; aspect-ratio: 5 / 4; overflow: hidden; } .aa-valori__foto img { position: absolute; inset: 0; aspect-ratio: auto; } .aa-valori__testi { align-self: center; padding: 56px clamp(40px, 6vw, 90px); } } /* Aprica: la guida della zona */ .aa-guida-uno { padding: 50px 0 30px; } .aa-guida-uno__griglia, .aa-guida-due__griglia { display: grid; gap: 28px; } .aa-guida__testi p { margin-top: 16px; font-size: 15.5px; line-height: 1.75; } .aa-guida-uno__foto img { width: 100%; aspect-ratio: 700 / 680; object-fit: cover; } .aa-guida-due { padding: 20px 0 50px; } .aa-guida-due__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } @media (min-width: 1024px) { .aa-guida-uno { padding: 80px 0 40px; } .aa-guida-uno__griglia { grid-template-columns: minmax(0, 500fr) minmax(0, 700fr); gap: 96px; align-items: center; } .aa-guida-due { padding: 0 0 80px; margin-top: -60px; } .aa-guida-due__griglia { grid-template-columns: minmax(0, 400fr) minmax(0, 700fr); gap: 100px; align-items: end; padding-left: 100px; } .aa-guida-due__foto img { aspect-ratio: 400 / 580; } .aa-guida-due .aa-guida__testi { padding-bottom: 40px; } } .aa-esplora { padding: 50px 0; background: var(--crema-chiara); } .aa-esplora__titolo { text-align: center; } .aa-esplora__griglia { display: grid; gap: 16px; margin-top: 30px; } .aa-esplora__casa { position: relative; aspect-ratio: 1; overflow: hidden; color: var(--bianco); background: var(--notte); cursor: default; } .aa-esplora__casa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--molla), filter .5s; } .aa-esplora__casa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 23, 32, 0) 45%, rgba(13, 23, 32, .68)); transition: background-color .5s; } .aa-esplora__casa h3 { position: absolute; left: 20px; right: 20px; bottom: 26px; z-index: 1; font: 400 13px/1.5 var(--f-accento); letter-spacing: .32em; text-transform: uppercase; text-align: center; transition: transform .55s var(--molla); } /* Il testo che compare al passaggio e, quando c'è, il collegamento all'articolo del magazine (13 ott 2026, revisione col cliente: le guide in fondo alla pagina sono tolte, «lo mettiamo in seno all'Aprica da vivere»). Finché il riquadro è chiuso il collegamento non si può toccare: col dito il primo tocco apre il testo, il secondo lo segue. */ .aa-esplora__dentro { position: absolute; left: 26px; right: 26px; top: 50%; z-index: 1; display: grid; justify-items: center; gap: 12px; text-align: center; opacity: 0; transform: translateY(calc(-50% + 14px)); transition: opacity .45s, transform .55s var(--molla); pointer-events: none; } .aa-esplora__dentro p { font-size: 14.5px; line-height: 1.6; } .aa-esplora__vai { min-height: 40px; color: var(--bianco); } .aa-esplora__vai:focus-visible { outline-color: var(--bianco); } .aa-esplora__casa:hover img, .aa-esplora__casa:focus img, .aa-esplora__casa:focus-within img, .aa-esplora__casa.e-aperta img { transform: scale(1.06); filter: brightness(.7); } .aa-esplora__casa:hover::after, .aa-esplora__casa:focus::after, .aa-esplora__casa:focus-within::after, .aa-esplora__casa.e-aperta::after { background-color: rgba(19, 33, 46, .62); } .aa-esplora__casa:hover .aa-esplora__dentro, .aa-esplora__casa:focus .aa-esplora__dentro, .aa-esplora__casa:focus-within .aa-esplora__dentro, .aa-esplora__casa.e-aperta .aa-esplora__dentro { opacity: 1; transform: translateY(-50%); pointer-events: auto; } @media (min-width: 600px) { .aa-esplora__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .aa-esplora { padding: 90px 0; } .aa-esplora__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; margin-top: 50px; } } .aa-clima { background: var(--blu); color: var(--crema); } .aa-clima .aa-t2 { color: var(--crema); } .aa-clima__griglia { display: grid; gap: 20px; padding-block: 50px; } .aa-clima__griglia p { font-size: 15.5px; line-height: 1.75; } @media (min-width: 900px) { .aa-clima__griglia { grid-template-columns: 1fr 1fr; gap: 0; padding-block: 0; align-items: center; } .aa-clima__griglia > * { padding: 80px 0; } .aa-clima__griglia > :first-child { padding-right: 72px; } .aa-clima__griglia > :last-child { padding-left: 72px; border-left: 1px solid rgba(239, 241, 243, .24); } } .aa-guide { padding: 50px 0; } .aa-guide__testa { text-align: center; } .aa-guide__testa p { max-width: 30em; margin: 14px auto 0; font: 300 19px/1.45 var(--f-accento); color: var(--blu); } .aa-guide__griglia { display: grid; gap: 20px; margin-top: 30px; } .aa-guide__griglia a { display: block; padding: 14px 14px 0; background: var(--blu); color: var(--crema); text-decoration: none; } .aa-guide__foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; } .aa-guide__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--molla); } .aa-guide__griglia a:hover img { transform: scale(1.05); } .aa-guide__nome { display: block; padding: 18px 4px 20px; font: 500 13px/1.5 var(--f-titoli); letter-spacing: .1em; text-transform: uppercase; } .aa-guide__chiusa { margin-top: 44px; text-align: center; } .aa-guide__chiusa p { max-width: 28em; margin: 0 auto 24px; font: 300 19px/1.45 var(--f-accento); color: var(--blu); } @media (min-width: 900px) { .aa-guide { padding: 100px 0; } .aa-guide__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; } } /* Contatti */ .aa-contatti { display: grid; } .aa-contatti__sx { padding: 46px var(--bordo); } .aa-contatti__dx { padding: 46px var(--bordo) 56px; background: var(--blu); color: var(--crema); scroll-margin-top: var(--barra-h); } .aa-contatti__dx .aa-t1 { color: var(--crema); } .aa-contatti__titolo { max-width: 18em; margin-bottom: 14px; color: var(--blu); } /* 16 ott 2026, richiesta 32 */ .aa-contatti__testo { max-width: 24em; font: 300 clamp(19px, 1rem + .4vw, 22px)/1.45 var(--f-accento); color: var(--blu); } .aa-recapito { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; align-items: center; margin-top: 30px; } .aa-recapito__icona { grid-row: 1 / 3; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--filo); border-radius: 50%; color: var(--blu); } .aa-recapito h2 { font: 400 11.5px/1.4 var(--f-accento); letter-spacing: .3em; text-transform: uppercase; color: var(--marine); } .aa-recapito a { font-size: clamp(17px, 1rem + .4vw, 22px); color: var(--blu); text-decoration: none; overflow-wrap: anywhere; } .aa-recapito a:hover { text-decoration: underline; text-underline-offset: 4px; } .aa-contatti__social { display: flex; gap: 16px; margin-top: 34px; color: var(--blu); } @media (min-width: 1000px) { /* Il riquadro blu «Scrivici» è largo quanto la lastra di vetro dell'apertura, che qui sta a destra: i due bordi cadono uno sotto l'altro (13 ott 2026, revisione col cliente: «la parte blurrata di Contatti mi deve essere a filo con Scrivici sotto, non deve fare questo staccato […] deve coincidere, è una croce»). Prima erano due metà uguali, e il bordo del blu stava più a sinistra di quello del vetro. */ .aa-contatti { grid-template-columns: minmax(0, 1fr) var(--vetro-l, 50%); } .aa-contatti__sx { padding: 96px 60px 96px max(var(--bordo), calc((100vw - var(--largo)) / 2)); } .aa-contatti__dx { padding: 96px max(var(--bordo), calc((100vw - var(--largo)) / 2)) 110px 72px; } } /* «Dove siamo»: la mappa e, sopra il suo bordo, il riquadro blu (13 ott 2026: i Contatti sul modello di una pagina d'albergo col riquadro «Location & Maps»; le due metà col modulo qui sopra restano). La mappa è un'immagine ferma nei due colori del sito (strumenti/mappa.py): il segnaposto sta al centro esatto, e l'immagine si ritaglia sempre intorno al centro, quindi cade sul paese a ogni larghezza. */ .aa-dove { padding: 50px 0 34px; } .aa-dove__griglia { display: grid; } .aa-dove__mappa { position: relative; overflow: hidden; background: var(--platino); } .aa-dove__mappa img { width: 100%; height: 100%; aspect-ratio: 10 / 9; object-fit: cover; } /* Il segnaposto è il logo della struttura (16 ott 2026, il titolare: «sulla mappa, ogni volta che c'è, metti proprio il logo della struttura al posto del pallino»): un cerchio con le tre cime e la punta in basso che tocca il punto esatto, al centro dell'immagine. Intorno resta l'onda. Dal 27 ott 2026 è blu col logo bianco («fai l'etichetta blu con il logo bianco, al contrario di com'è ora»; prima era bianca col logo blu). */ .aa-dove__segno { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -72px 0 0 -29px; display: grid; place-items: center; border-radius: 50%; background: var(--blu); color: var(--bianco); box-shadow: 0 10px 24px rgba(8, 14, 20, .38); } .aa-dove__segno::before { content: ""; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 14px; margin-left: -7px; background: var(--blu); transform: rotate(45deg); border-radius: 0 0 3px 0; } .aa-dove__segno .aa-logo__disegno { position: relative; width: 32px; height: auto; margin-top: -3px; } .aa-dove__segno .aa-logo__cime { fill: currentColor; } .aa-dove__segno::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--blu); animation: aa-onda-segno 2.6s ease-out infinite; } @keyframes aa-onda-segno { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } } @media (max-width: 699px) { .aa-dove__segno { width: 48px; height: 48px; margin: -60px 0 0 -24px; } .aa-dove__segno .aa-logo__disegno { width: 26px; } } @keyframes aa-onda { from { transform: scale(1); opacity: .9; } to { transform: scale(4); opacity: 0; } } .aa-dove__fonte { position: absolute; right: 0; bottom: 0; padding: 3px 8px; background: rgba(239, 241, 243, .88); font-size: 11px; line-height: 1.5; color: var(--testo); text-decoration: none; } .aa-dove__fonte:hover { text-decoration: underline; } .aa-dove__scheda { position: relative; z-index: 1; order: 2; margin: -46px 16px 0; padding: 30px 24px 32px; background: var(--blu); color: var(--crema); } .aa-dove__scheda .aa-occhiello { color: rgba(239, 241, 243, .8); } .aa-dove__scheda .aa-t2 { color: var(--crema); } .aa-dove__luogo { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14.5px; } .aa-dove__luogo .aa-ico { width: 17px; height: 17px; } .aa-dove__scheda > p:not([class]) { margin-top: 14px; font-size: 15px; line-height: 1.7; color: rgba(239, 241, 243, .88); } .aa-dove__scheda .aa-b { margin-top: 24px; } @media (min-width: 900px) { .aa-dove { padding: 100px 0 56px; } .aa-dove__griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; } .aa-dove__scheda { grid-column: 1 / 6; grid-row: 1; order: 0; margin: 0; padding: 50px 46px 52px; } .aa-dove__mappa { grid-column: 5 / 13; grid-row: 1; } .aa-dove__mappa img { aspect-ratio: 16 / 10; } } /* «Come arrivare»: quattro riquadri col filo; col puntatore sopra diventano blu. */ .aa-arrivare { padding: 30px 0 60px; } .aa-arrivare__testa { text-align: center; } .aa-arrivare__testa p { max-width: 30em; margin: 14px auto 0; font: 300 19px/1.45 var(--f-accento); color: var(--blu); } .aa-arrivare__voci { display: grid; gap: 12px; margin-top: 30px; } .aa-arrivare__voci li { padding: 26px 24px 28px; border: 1px solid var(--filo); transition: background-color .3s, color .3s, border-color .3s; } .aa-arrivare__icona { display: grid; place-items: center; width: 52px; height: 52px; background: var(--blu); color: var(--crema); transition: background-color .3s, color .3s; } .aa-arrivare__icona .aa-ico { width: 24px; height: 24px; } .aa-arrivare__voci h3 { margin-top: 18px; font: 500 14px/1.4 var(--f-titoli); letter-spacing: .1em; text-transform: uppercase; color: var(--blu); transition: color .3s; } .aa-arrivare__voci p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; } @media (hover: hover) { .aa-arrivare__voci li:hover { background: var(--blu); border-color: var(--blu); color: var(--crema); } .aa-arrivare__voci li:hover h3 { color: var(--crema); } .aa-arrivare__voci li:hover .aa-arrivare__icona { background: var(--crema); color: var(--blu); } } @media (min-width: 700px) { .aa-arrivare__voci { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (min-width: 1100px) { .aa-arrivare { padding: 50px 0 104px; } .aa-arrivare__voci { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 46px; } } /* Il modulo: campi col solo filo sotto, etichetta che sale quando si scrive */ .aa-modulo { margin-top: 26px; } .aa-modulo__campi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 28px; } .aa-campo { position: relative; padding-top: 18px; } .aa-campo__dentro { display: block; width: 100%; padding: 10px 0 12px; border: 0; border-bottom: 1px solid rgba(239, 241, 243, .55); background: none; color: var(--bianco); font-size: 16px; line-height: 1.4; outline: 0; transition: border-color .25s; color-scheme: dark; } textarea.aa-campo__dentro { resize: vertical; min-height: 92px; } .aa-campo__dentro:focus { border-bottom-color: var(--bianco); } .aa-campo__etichetta { position: absolute; left: 0; top: 28px; font-size: 14.5px; color: rgba(239, 241, 243, .92); pointer-events: none; transform-origin: 0 0; transition: transform .25s var(--molla), color .25s; } .aa-campo__dentro:focus + .aa-campo__etichetta, .aa-campo__dentro:not(:placeholder-shown) + .aa-campo__etichetta, .aa-campo__dentro[type="date"] + .aa-campo__etichetta { transform: translateY(-24px) scale(.8); color: var(--crema); } /* Un campo sbagliato si segna col filo più spesso e con una freccia: niente rosso, non è nei colori del marchio. */ .aa-campo.e-sbagliato .aa-campo__dentro { border-bottom-color: var(--bianco); border-bottom-width: 2px; } .aa-campo.e-sbagliato .aa-campo__etichetta { color: var(--bianco); font-weight: 500; } .aa-campo.e-sbagliato .aa-campo__etichetta::after { content: " ←"; } .aa-consenso { display: flex; gap: 12px; align-items: flex-start; margin-top: 26px; font-size: 13.5px; line-height: 1.55; cursor: pointer; } .aa-consenso input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--crema); } .aa-consenso a { color: var(--bianco); text-underline-offset: 3px; } .aa-consenso.e-sbagliato span { color: var(--bianco); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .aa-modulo__fine { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; } .aa-modulo__invia { min-width: 150px; border-radius: 999px; background: var(--crema); color: var(--blu); } .aa-modulo__invia:hover { background: var(--platino); } .aa-modulo__invia .aa-ico { width: 16px; height: 16px; } .aa-modulo__invia[disabled] { opacity: .6; cursor: progress; } .aa-modulo__nota { font-size: 12.5px; opacity: .85; } .aa-modulo__esito { margin-top: 18px; font-size: 15px; } .aa-modulo__esito:empty { display: none; } .aa-modulo__esito.e-ok { padding: 14px 18px; background: rgba(239, 241, 243, .14); border-left: 2px solid var(--crema); color: var(--bianco); } .aa-modulo__esito.e-errore { padding: 12px 16px; border: 1px solid rgba(239, 241, 243, .7); color: var(--bianco); } .aa-modulo__trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (min-width: 600px) { .aa-modulo__campi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aa-campo--largo { grid-column: 1 / -1; } } /* Magazine */ .aa-mag { padding: 36px 0 60px; } .aa-mag--senza-eroe { padding-top: 44px; } .aa-mag__titolo { margin-bottom: 30px; } .aa-mag__vuoto { padding: 40px 0; text-align: center; color: var(--tenue); } .aa-mag__primo { display: grid; gap: 22px; margin-bottom: 30px; } .aa-mag__lato { display: grid; gap: 18px; align-content: start; } .aa-mag__griglia { display: grid; gap: 30px 24px; } .aa-art a { display: block; color: var(--blu); text-decoration: none; } .aa-art__foto { display: block; overflow: hidden; background: var(--platino); } .aa-art__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--molla); } .aa-art a:hover .aa-art__foto img { transform: scale(1.04); } .aa-art time { display: block; font: 400 11.5px/1.5 var(--f-accento); letter-spacing: .24em; text-transform: uppercase; color: var(--marine); } .aa-art__titolo { display: block; margin-top: 8px; font: 500 17px/1.3 var(--f-titoli); letter-spacing: .012em; text-transform: uppercase; text-wrap: balance; } .aa-art--griglia .aa-art__foto { aspect-ratio: 1; } .aa-art--griglia .aa-art__testi { display: block; padding-top: 14px; } .aa-art--grande a { position: relative; min-height: 340px; height: 100%; color: var(--bianco); } .aa-art--grande .aa-art__foto { position: absolute; inset: 0; } .aa-art--grande .aa-art__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 23, 32, 0) 45%, rgba(13, 23, 32, .76)); } .aa-art--grande .aa-art__testi { position: absolute; left: 22px; right: 22px; bottom: 22px; } .aa-art--grande time { color: var(--crema); } .aa-art--grande .aa-art__titolo { font-size: clamp(19px, 1rem + .7vw, 26px); } .aa-art--lato a { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: start; } .aa-art--lato .aa-art__foto { aspect-ratio: 1; } .aa-art--lato .aa-art__titolo { font-size: 15px; } .aa-mag--altri { background: var(--carta); padding-top: 50px; border-top: 1px solid var(--filo); } .aa-mag--altri .aa-t2 { margin-bottom: 26px; } .aa-pagine { margin-top: 44px; } .aa-pagine .nav-links { display: flex; justify-content: center; align-items: center; gap: 8px; } .aa-pagine .page-numbers { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 8px; border: 1px solid var(--filo); color: var(--blu); text-decoration: none; } .aa-pagine .page-numbers.current { background: var(--blu); border-color: var(--blu); color: var(--bianco); } .aa-pagine .page-numbers.dots { border: 0; } @media (min-width: 700px) { .aa-mag__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .aa-mag { padding: 72px 0 100px; } .aa-mag__primo { grid-template-columns: minmax(0, 790fr) minmax(0, 476fr); gap: 30px; } .aa-art--grande a { min-height: 500px; } .aa-art--lato a { grid-template-columns: 140px minmax(0, 1fr); gap: 18px; } .aa-art--lato .aa-art__titolo { font-size: 16px; } .aa-mag__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 32px; } } /* Articolo e pagine di solo testo */ .aa-articolo { padding: 40px 0 70px; } .aa-articolo__testa { max-width: 900px; text-align: center; } .aa-articolo__testa .aa-rimando { margin-bottom: 26px; } .aa-articolo__testa time { display: block; margin-top: 16px; font: 400 12px/1.5 var(--f-accento); letter-spacing: .3em; text-transform: uppercase; color: var(--marine); } .aa-articolo__foto { margin-top: 34px; } .aa-articolo__foto img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; } .aa-articolo__testo { width: min(100% - 2 * var(--bordo), 760px); margin: 40px auto 0; } .aa-articolo__testo > p:first-child { font: 300 clamp(20px, 1rem + .6vw, 24px)/1.45 var(--f-accento); color: var(--blu); } .aa-articolo--pagina .aa-articolo__testa { text-align: left; max-width: 760px; } .aa-articolo--pagina .aa-articolo__testo > p:first-child { font: inherit; color: inherit; } @media (min-width: 1024px) { .aa-articolo { padding: 70px 0 110px; } .aa-articolo__testo { margin-top: 60px; font-size: 17px; } } /* Pagine di solo testo (privacy, cookie): una fascia blu col titolo, che comincia in cima alla pagina, dietro la barra (13 ott 2026: «cookie policy e privacy policy generiche dello stesso stile del sito con gli stessi colori»). */ .aa-articolo--pagina { padding-top: 0; } .aa-pagina-testa { margin-top: calc(-1 * (var(--avviso-h) + var(--barra-h))); padding: calc(var(--avviso-h) + var(--barra-h) + 46px) var(--bordo) 46px; background: var(--blu) url("../img/motivo.svg") 0 100% / 46px 46px repeat-x; color: var(--crema); } .aa-pagina-testa__dentro { width: min(100%, 760px); margin-inline: auto; padding-bottom: 28px; } .aa-pagina-testa .aa-occhiello { color: rgba(239, 241, 243, .8); } .aa-pagina-testa .aa-t1 { color: var(--crema); } .aa-pagina-testa__data { margin-top: 14px; font-size: 13px; color: rgba(239, 241, 243, .76); } .aa-articolo--pagina .aa-prosa h2 { padding-top: 1.6em; border-top: 1px solid var(--filo); } .aa-articolo--pagina .aa-prosa h2:first-child { padding-top: 0; border-top: 0; margin-top: 0; } .aa-articolo--pagina .aa-prosa table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .aa-articolo--pagina .aa-prosa th, .aa-articolo--pagina .aa-prosa td { padding: 10px 12px; border: 1px solid var(--filo); text-align: left; vertical-align: top; } .aa-articolo--pagina .aa-prosa th { background: var(--blu); border-color: var(--blu); color: var(--crema); font-weight: 500; } .aa-nota-bozza { padding: 16px 18px; border-left: 3px solid var(--blu); background: var(--platino); font-size: 14.5px; } @media (min-width: 1024px) { .aa-pagina-testa { padding-bottom: 60px; } .aa-pagina-testa { padding-top: calc(var(--avviso-h) + var(--barra-h) + 70px); } } /* Pagina non trovata */ .aa-nulla { padding: 90px 0 110px; text-align: center; } .aa-nulla__simbolo { display: block; width: 96px; margin: 0 auto 30px; color: var(--blu); } .aa-nulla p { max-width: 24em; margin: 14px auto 28px; font: 300 20px/1.45 var(--f-accento); color: var(--blu); } /* --------------------------------------------------------- 7. Movimento */ /* Entrate: i blocchi salgono piano quando arrivano a schermo. Solo con gli script accesi e senza «meno movimento». */ .aa-js [data-aa-entra] { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1.1s var(--molla); } .aa-js [data-aa-entra].e-visto { opacity: 1; transform: none; } /* Nell'apertura si animano la frase, la pillola e la barra, mai il loro contenitore: dentro c'è il foglio del telefono, che è «fisso», e un contenitore trasformato lo terrebbe prigioniero. */ .aa-js .aa-eroe__motto, .aa-js .aa-eroe__pillola { animation: aa-sale 1.1s 1.5s var(--molla) both; } .aa-js .aa-eroe__pillola { animation-delay: 1.65s; } @media (min-width: 900px) { .aa-js .aa-cerca--barra { animation: aa-sale 1.1s 1.65s var(--molla) both; } } @keyframes aa-sale { from { opacity: 0; transform: translateY(22px); } } /* ------------------------------------------- 8. Quello che galleggia: «torna su» e chat */ /* 13 ott 2026, il titolare: «metti tipo una chat in basso a destra per poter parlare con un operatore generico, non lo compilare poi valutiamo. Invece a sinistra metti il torna su, cioè che dopo un po' che scrolli c'è il torna su». Stanno sotto la testata e sotto il menu del telefono. Nella scheda di un appartamento, sul telefono, c'è già la barra fissa delle date: lì salgono sopra di lei. */ .aa-su, .aa-chat { position: fixed; z-index: 55; bottom: calc(16px + env(safe-area-inset-bottom)); } /* Il «torna su» ha dentro le tre cime del logo, che si compongono mentre si scende (13 ott 2026, il titolare: «fai tipo un effetto col logo, tipo le tre montagne che mano a mano che scendi si compongono»): l'ombra delle cime c'è sempre, tenue; quelle piene crescono dal basso, una alla volta da sinistra, seguendo lo scorrimento (i ritagli li muove tema.js, punto 14); in fondo alla pagina il logo è intero. Sotto le cime c'è la scritta («metti la scritta torna su qui sotto il logo»): per farcela stare il cerchio è più grande della chat. */ .aa-su { left: 14px; width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 50%; border: 1px solid var(--filo); background: var(--bianco); color: var(--blu); box-shadow: 0 10px 26px rgba(8, 14, 20, .2); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .3s, transform .4s var(--molla), visibility 0s .4s, background-color .25s, color .25s, border-color .25s; } .aa-su.e-visibile { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .aa-su__cime { width: 25px; height: auto; overflow: visible; transition: transform .35s var(--molla); } .aa-su__cime path { fill: currentColor; } .aa-su__ombra { opacity: .2; } .aa-su__scritta { font-size: 8.5px; font-weight: 700; line-height: 1; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; } .aa-su:focus-visible { background: var(--blu); border-color: var(--blu); color: var(--crema); } @media (hover: hover) { .aa-su:hover { background: var(--blu); border-color: var(--blu); color: var(--crema); } .aa-su:hover .aa-su__cime { transform: translateY(-3px); } } /* La chat sta SOPRA la testata (60): in cima alla home il logo grande fa parte della testata, e a chat aperta le finiva sopra (13 ott 2026, il titolare, con la foto: «se c'è il logo dell'hero gli va sopra e non va bene: la chat sta sempre in primo piano se la apri»). Resta sotto il menu del telefono (80) e il foglio delle date (90), che prendono tutto lo schermo. Il «torna su» resta a 55. */ .aa-chat { right: 16px; z-index: 70; } /* come il «torna su», la chat compare appena si supera l'apertura (regola dei siti Digitato, safesite del 28 ott 2026); aperta resta in vista anche se si torna su */ .aa-chat { opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .3s, transform .4s var(--molla), visibility 0s .4s; } .aa-chat.e-visibile, .aa-chat.e-aperta { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .aa-chat__tasto { position: relative; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--blu); color: var(--crema); box-shadow: 0 12px 30px rgba(8, 14, 20, .34), inset 0 0 0 1px rgba(239, 241, 243, .22); transition: transform .35s var(--molla), background-color .25s; } .aa-chat__tasto:hover { transform: scale(1.06); background: var(--blu-2); } .aa-chat__tasto .aa-ico { grid-area: 1 / 1; width: 24px; height: 24px; transition: opacity .25s, transform .35s var(--molla); } .aa-chat__ico-chiudi { opacity: 0; transform: rotate(-60deg) scale(.6); } .aa-chat.e-aperta .aa-chat__ico-apri { opacity: 0; transform: rotate(60deg) scale(.6); } .aa-chat.e-aperta .aa-chat__ico-chiudi { opacity: 1; transform: none; } /* un cerchio che si allarga, ogni tanto: dice che lì si può scrivere (si ferma quando la chat è aperta) */ .aa-js .aa-chat__tasto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--blu); animation: aa-chat-onda 4.5s 2.5s ease-out infinite; } .aa-chat.e-aperta .aa-chat__tasto::after { animation: none; opacity: 0; } @keyframes aa-chat-onda { 0% { transform: scale(1); opacity: .7; } 28%, 100% { transform: scale(1.7); opacity: 0; } } .aa-chat__foglio { position: absolute; right: 0; bottom: 70px; width: min(340px, calc(100vw - 32px)); max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; display: block; background: var(--bianco); color: var(--testo); border: 1px solid var(--filo); box-shadow: 0 30px 70px rgba(8, 14, 20, .36); transform-origin: 100% 100%; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.96); transition: opacity .25s, transform .35s var(--molla), visibility 0s .35s; } .aa-chat__foglio[hidden] { display: none; } .aa-chat.e-aperta .aa-chat__foglio { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .aa-chat__testa { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--blu); color: var(--crema); } .aa-chat__simbolo { flex: none; width: 40px; } .aa-chat__simbolo .aa-logo__disegno { width: 100%; height: auto; } .aa-chat__testa b { display: block; font: 500 14px/1.3 var(--f-titoli); letter-spacing: .08em; text-transform: uppercase; } .aa-chat__testa p span { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(239, 241, 243, .76); } .aa-chat__corpo { display: grid; justify-items: start; gap: 14px; padding: 20px 18px 18px; } .aa-chat__fumetto { max-width: 92%; padding: 12px 14px; background: var(--platino); font-size: 14.5px; line-height: 1.55; } .aa-chat__corpo .aa-b { min-height: 40px; padding: 8px 20px; font-size: 12px; } .aa-chat__piede { display: flex; gap: 8px; padding: 12px 14px 0; border-top: 1px solid var(--filo); } .aa-chat__campo { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--filo); background: transparent; font-size: 14px; } .aa-chat__campo:disabled { opacity: .7; cursor: not-allowed; } .aa-chat__manda { flex: none; width: 42px; height: 42px; display: grid; place-items: center; background: var(--blu); color: var(--crema); opacity: .45; } .aa-chat__manda .aa-ico { width: 18px; height: 18px; } .aa-chat__nota { padding: 8px 14px 12px; font-size: 11.5px; color: var(--tenue); } @media (max-width: 999px) { .single-appartamento .aa-su, .single-appartamento .aa-chat, .single-appartamento .aa-news { bottom: calc(82px + env(safe-area-inset-bottom)); } } /* Il riquadrino della newsletter (13 ott 2026, revisione col cliente: «vorrei un pop-up basso, qualcosa di meno impattante […] uno piccolino, basso, in un angolo: se non ti iscrivi lo chiudi e buonanotte»). Sta in basso a sinistra, dove più giù comparirà il «torna su»: finché c'è, il «torna su» non si mostra. Sul telefono lascia a destra il posto della chat. Compare da solo dopo qualche secondo (tema.js, punto 16). */ .aa-news { position: fixed; z-index: 56; left: 14px; right: 84px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 330px; padding: 16px 16px 14px; border: 1px solid var(--filo); background: var(--bianco); color: var(--testo); box-shadow: 0 14px 34px rgba(8, 14, 20, .2); opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .45s var(--molla); } .aa-news[hidden] { display: none; } .aa-news.e-visibile { opacity: 1; transform: none; } .aa-news.e-visibile ~ .aa-su { opacity: 0; visibility: hidden; } .aa-news__chiudi { position: absolute; top: 2px; right: 2px; width: 40px; height: 40px; display: grid; place-items: center; color: var(--tenue); } .aa-news__chiudi:hover { color: var(--blu); } .aa-news__chiudi .aa-ico { width: 15px; height: 15px; } .aa-news__titolo { padding-right: 34px; font: 500 12px/1.4 var(--f-titoli); letter-spacing: .16em; text-transform: uppercase; color: var(--blu); } .aa-news__testo { margin-top: 4px; font-size: 13.5px; line-height: 1.45; } .aa-news__riga { display: flex; margin-top: 12px; } .aa-news__riga input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--filo); border-right: 0; background: #fff; font: inherit; font-size: 16px; color: var(--blu); } .aa-news__riga input:focus { outline: 0; border-color: var(--blu); } .aa-news__invia { flex: none; height: 42px; padding: 0 14px; background: var(--marine); color: var(--bianco); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; transition: background-color .25s; } .aa-news__invia:hover { background: var(--blu); } .aa-news__invia:disabled { opacity: .6; } .aa-news__consenso { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--tenue); cursor: pointer; } .aa-news__consenso input { flex: none; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--blu); } .aa-news__consenso a { color: var(--blu); text-underline-offset: 2px; } .aa-news__consenso.e-sbagliato { color: #A3271C; } .aa-news__esito { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: #A3271C; } .aa-news__esito:empty { display: none; } .aa-news.e-fatto .aa-news__modulo > :not(.aa-news__esito), .aa-news.e-fatto .aa-news__testo { display: none; } .aa-news.e-fatto .aa-news__esito { margin-top: 6px; font-size: 13.5px; color: var(--blu); } @media (min-width: 900px) { .aa-su { left: 24px; width: 70px; height: 70px; } .aa-su__cime { width: 28px; } .aa-su__scritta { font-size: 9px; } .aa-chat { right: 24px; } .aa-su, .aa-chat { bottom: 24px; } .aa-news { left: 24px; right: auto; bottom: 24px; width: 330px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media print { .aa-testata, .aa-pannello, .aa-avvio, .aa-foglio, .aa-eroe__pillola, .aa-fine, .aa-riq, .aa-sch__fisso, .aa-su, .aa-chat, .aa-news, .aa-testa__giro { display: none !important; } main { padding-top: 0 !important; } } /* --------------------------------------------- 9. Le modifiche del 14 ottobre 2026 (in ordine, come le ha date il titolare) Vincono sulle regole di prima perché vengono dopo. Ogni blocco porta il numero del punto. */ /* 1. Il menu del computer diviso in cinque parti uguali: due voci, il logo, due voci. Le quattro voci e il logo hanno i centri al 20, 35, 50, 65 e 80 % della larghezza, alla stessa distanza fra loro (prima: 25, 41,7 e 58,3, 75 %, col logo stretto fra le due voci di mezzo). Ogni metà della barra è una griglia di dieci colonne: una voce ne prende due. */ @media (min-width: 1200px) { .aa-nav__lista { grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: 100%; } .aa-nav__lista .aa-nav__voce { grid-row: 1; justify-content: center; } .aa-nav__lista--sx .aa-nav__voce:nth-child(1) { grid-column: 4 / span 2; } .aa-nav__lista--sx .aa-nav__voce:nth-child(2) { grid-column: 7 / span 2; } .aa-nav__lista--dx .aa-nav__voce:nth-child(1) { grid-column: 3 / span 2; } .aa-nav__lista--dx .aa-nav__voce:nth-child(2) { grid-column: 6 / span 2; } .aa-nav__tendina { left: 50%; margin-left: -186px; } /* la tendina sotto la sua voce, al centro */ } /* 2. La tendina degli appartamenti: vetro chiaro e trasparente, non più tinto di blu («box degli appartamenti con effetto vetro, glassato, trasparente, non blu»). Le scritte diventano blu: si leggono sopra le foto e sul ghiaccio. */ @media (min-width: 1200px) { .aa-nav__tendina { background: rgba(239, 241, 243, .5); color: var(--blu); border-color: rgba(255, 255, 255, .6); box-shadow: 0 16px 40px rgba(8, 14, 20, .16); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); } .aa-nav__tendina li + li { border-top-color: rgba(28, 49, 68, .12); } .aa-nav__tendina .aa-tendina__dati { color: rgba(28, 49, 68, .7); } .aa-nav__tendina a:focus-visible { outline: 0; } } /* 3. Al clic (e al passaggio) su una voce: niente riquadro pieno, solo una linea sotto. Nella tendina la riga non si colora più d'azzurro: si sottolinea il nome. Le voci della barra non hanno più il contorno a riquadro col fuoco della tastiera: chi naviga con la tastiera vede la stessa linea, più spessa. */ .aa-tendina__voce:hover, .aa-tendina__voce:focus-visible { background: transparent; } .aa-tendina__nome { background: linear-gradient(var(--marine), var(--marine)) 0 100% / 0 1.5px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--molla); } .aa-tendina__voce:hover .aa-tendina__nome, .aa-tendina__voce:focus-visible .aa-tendina__nome { background-size: 100% 1.5px; } .aa-tendina__voce:focus-visible { outline: 0; } @media (min-width: 1200px) { .aa-nav__voce > a:focus-visible { outline: 0; } .aa-nav__voce > a:focus-visible span { background-size: 100% 2px; } } /* 4. In home quattro riquadri degli appartamenti, tutti in vista (era una giostra con le frecce): quattro in fila sul computer, due per riga sul tablet, uno sotto l'altro sul telefono. I dati stanno in una lastra di vetro chiaro. */ .aa-vet--quattro .aa-vet__griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .aa-vet--quattro .aa-vet__scheda a { height: clamp(320px, 92vw, 420px); } .aa-vet--quattro .aa-vet__dati { left: 12px; right: 12px; bottom: 12px; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 14px 16px; background: rgba(239, 241, 243, .55); border: 1px solid rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); } .aa-vet--quattro .aa-vet__dati .aa-t3 { font-size: 16px; } .aa-vet--quattro .aa-vet__luogo { margin-top: 4px; font-size: 13px; color: var(--blu); } .aa-vet--quattro .aa-vet__numeri { gap: 10px; font-size: 14px; color: var(--blu); } .aa-vet--quattro .aa-vet__numeri li + li { padding-left: 10px; border-left-color: rgba(28, 49, 68, .2); } @media (min-width: 700px) { .aa-vet--quattro .aa-vet__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .aa-vet--quattro .aa-vet__scheda a { height: 400px; } } @media (min-width: 1100px) { .aa-vet--quattro .aa-vet__griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .aa-vet--quattro .aa-vet__scheda a { height: clamp(420px, 34vw, 480px); } .aa-vet--quattro .aa-vet__dati { min-width: 0; padding: 18px 22px 20px; } } /* il vetro coi dati occupa tutto il fondo della scheda, senza margini intorno (16 ott 2026, il titolare: «mettilo senza margini, occupa da sinistra a destra e in basso»): resta solo il filo chiaro in alto */ .aa-vet--quattro .aa-vet__dati { left: 0; right: 0; bottom: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .55); } /* 5. La busta è l'iscrizione alla newsletter: «Iscriviti alla newsletter» scritto sul biglietto, «Iscriviti» sotto la busta, a destra il titolo, una riga e il modulo del riquadrino in versione chiara su scuro (14 ott 2026, sera: prima l'iscrizione stava a destra con titolo e testo suoi, sotto «Prenota direttamente da qui»). Sul computer il pulsante del modulo è quello sotto la busta; sul telefono, dove la busta sta sopra, resta quello accanto al campo. */ .aa-invito__news { max-width: 26em; margin: 26px auto 0; text-align: left; } .aa-invito__news .aa-news__riga { margin-top: 0; } .aa-invito__sx .aa-invito__iscriviti { background: var(--marine); color: var(--bianco); } .aa-invito__sx .aa-invito__iscriviti:hover { background: #275D96; } .aa-invito__sx .aa-invito__iscriviti:active { background: var(--notte); } .aa-invito__iscriviti[hidden] { display: none; } @media (max-width: 899px) { .aa-invito__sx .aa-invito__iscriviti { display: none; } } @media (min-width: 900px) { .aa-invito__news .aa-news__invia { display: none; } .aa-invito__news .aa-news__riga input { border-right: 1px solid rgba(255, 255, 255, .5); } } .aa-invito__news .aa-news__riga input { height: 48px; border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .94); } .aa-invito__news .aa-news__invia { height: 48px; padding: 0 20px; } .aa-invito__news .aa-news__invia:hover { background: #275D96; } .aa-invito__news .aa-news__invia:active { background: var(--notte); } .aa-invito__news .aa-news__consenso { color: rgba(239, 241, 243, .85); } .aa-invito__news .aa-news__consenso a { color: var(--bianco); } .aa-invito__news .aa-news__consenso input { accent-color: var(--marine); } .aa-invito__news .aa-news__consenso.e-sbagliato { color: #FFB4AA; } .aa-invito__news .aa-news__esito { color: #FFB4AA; } .aa-invito__news .e-fatto > :not(.aa-news__esito) { display: none; } .aa-invito__news .e-fatto .aa-news__esito { color: var(--bianco); font-size: 15px; } @media (min-width: 900px) { .aa-invito__news { margin-left: 0; } } /* 6. «Perché sceglierci»: i tre riquadri allineati (quello di mezzo era più basso di 26 px, apposta). */ @media (min-width: 700px) { .aa-perche__voci li:nth-child(2) { transform: none; } .aa-perche { padding-bottom: 90px; } } /* 7. Le linee sotto la voce della pagina in cui si è (per esempio «Aprica») e sotto la lingua scelta (IT, EN): nello stesso azzurro di «Prenota». Anche la linea che compare passando sopra le voci. */ @media (min-width: 1200px) { .aa-nav__voce > a span { background-image: linear-gradient(var(--marine), var(--marine)); } .aa-nav__voce > a[aria-current] span { background-size: 100% 2px; } } .aa-bandiere a[aria-current]::after { height: 2px; background: var(--marine); } /* 8. Nel piede la colonna «Contatti» si chiama «Dove siamo» (footer.php). 9. La mappa di Google si apre da «Apri la mappa» (aa_mappa_google_url): nei Contatti resta la mappa ferma a due colori. */ /* 10. «Invia» (Contatti) e «Apri la mappa»: azzurri come «Prenota», blu scuro al clic. Stanno sul blu: passando sopra si scuriscono appena, al clic diventano blu notte. */ .aa-modulo__invia { background: var(--marine); color: var(--bianco); } .aa-modulo__invia:hover, .aa-dove__scheda .aa-b:hover { background: #275D96; color: var(--bianco); } .aa-modulo__invia:active, .aa-dove__scheda .aa-b:active { background: var(--notte); color: var(--bianco); } .aa-dove__scheda .aa-b { background: var(--marine); color: var(--bianco); } /* 12. (14 ott 2026, sera) «Cerca» nella barra sopra la foto della home: azzurro già di partenza, come «Prenota» («il cerca deve essere azzurro di default»). Era bianco e diventava azzurro solo passandoci sopra; ora passandoci sopra si scurisce appena e al clic diventa blu notte, come «Invia» e «Apri la mappa». */ .aa-cerca--barra .aa-cerca__vai { background: var(--marine); color: var(--bianco); } .aa-cerca--barra .aa-cerca__vai:hover { background: #275D96; color: var(--bianco); } .aa-cerca--barra .aa-cerca__vai:active { background: var(--notte); color: var(--bianco); } /* «Non sono un robot» (28 ott 2026, inc/robot.php e tema.js punto 11b, come su Arredi Curto): la finestra che si apre premendo «Invia» o «Iscriviti». Una casella grande: tutta la riga si clicca. Stati: a riposo, .e-controllo (rotella), .e-fatto (spunta). Nei colori del sito: blu, ghiaccio e l'azzurro di «Prenota». */ .aa-robot { width: min(23rem, calc(100vw - 2rem)); max-width: none; margin: auto; padding: 0; border: 1px solid var(--filo); border-radius: 16px; background: #fff; color: var(--blu); font-family: var(--f-testo); overscroll-behavior: contain; box-shadow: 0 30px 80px rgba(13, 23, 32, .4); } .aa-robot::backdrop { background: rgba(19, 31, 43, .66); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .aa-robot__riquadro { display: grid; gap: 14px; padding: 26px 24px 22px; text-align: left; } .aa-robot__occhiello { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--marine); } .aa-robot__titolo { margin: -6px 0 0; font: 500 24px/1.2 var(--f-titoli); color: var(--blu); } .aa-robot__aiuto { margin: 0; font-size: 15px; line-height: 1.5; color: var(--testo); } .aa-robot__casella { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 72px; margin-top: 4px; padding: 12px 20px; border: 2px solid var(--blu); border-radius: 12px; background: #fff; color: var(--blu); font-size: 19px; font-weight: 500; line-height: 1.2; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s, border-color .2s, box-shadow .2s; } .aa-robot__casella:hover { box-shadow: 0 0 0 4px rgba(46, 110, 176, .18); } .aa-robot__casella:focus-visible { outline: 3px solid var(--marine); outline-offset: 3px; } .aa-robot__segno { position: relative; flex: none; width: 30px; height: 30px; box-sizing: border-box; border: 2px solid var(--blu); border-radius: 6px; background: #fff; transition: background-color .2s, border-color .2s; } .aa-robot__nome { min-width: 0; } .aa-robot__casella.e-controllo { cursor: progress; } .aa-robot__casella.e-controllo .aa-robot__segno { border-color: var(--filo); border-top-color: var(--marine); border-radius: 50%; background: transparent; animation: aa-robot-gira .75s linear infinite; } .aa-robot__casella.e-fatto { cursor: default; border-color: var(--marine); background: rgba(46, 110, 176, .08); box-shadow: none; } .aa-robot__casella.e-fatto .aa-robot__segno { border-color: var(--marine); background: var(--marine); } .aa-robot__casella.e-fatto .aa-robot__segno::after { content: ""; position: absolute; left: 8px; top: 3px; width: 8px; height: 15px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); } @keyframes aa-robot-gira { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .aa-robot__casella.e-controllo .aa-robot__segno { animation-duration: 2s; } } .aa-robot__stato { margin: 0; font-size: 14px; line-height: 1.45; color: #9B2C2C; } .aa-robot__stato:empty { display: none; } .aa-robot__annulla { justify-self: start; min-height: 40px; padding: 0 2px; font-size: 14px; color: var(--tenue); text-decoration: underline; text-underline-offset: 3px; } .aa-robot__annulla:hover { color: var(--blu); } .aa-robot-nojs { margin: 12px 0 0; font-size: 14px; color: #9B2C2C; } /* 29 ott 2026 — scheda dell'appartamento: la scelta dell'unità nel riquadro delle date */ .aa-cerca__campo--unita { cursor: pointer; } .aa-cerca__campo--unita select { flex: 1; min-width: 0; height: 52px; margin: 0; padding: 0 26px 0 0; border: 0; background: none; color: var(--blu); font: inherit; font-weight: 500; cursor: pointer; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; } .aa-cerca__campo--unita select:focus { outline: none; } .aa-cerca__campo--unita:focus-within { outline: 2px solid var(--marine); outline-offset: 2px; } .aa-cerca__campo--unita .aa-cerca__giu { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; }