/* Font ospitati in locale: nessuna richiesta a Google, CSP chiusa. Sono file VARIABLE: un solo file copre tutti i pesi dichiarati. */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/montserrat-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/montserrat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 500 600; font-display: swap; src: url("/assets/fonts/playfair-display-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 500 600; font-display: swap; src: url("/assets/fonts/playfair-display-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("/assets/fonts/playfair-display-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("/assets/fonts/playfair-display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ════════════════════════════════════════════════════════════════ RIFLESSOLOGIA DA YLENIA Impianto editoriale: filetti al posto dei riquadri, numeri nel margine, immagini che escono dalla gabbia, ritmo verticale volutamente irregolare. Le sezioni non devono avere tutte la stessa forma: e' quello che fa sembrare un sito un tema. ════════════════════════════════════════════════════════════════ */ /* ── I DUE TEMI ─────────────────────────────────────────────────── Ogni colore che cambia con il tema e' scritto una volta sola, con `light-dark(chiaro, scuro)`. Quale dei due valga lo decide `color-scheme`, che qui sotto vale «light dark»: cioe' segue il sistema operativo. L'interruttore in testata mette `data-tema` sul tag e forza `color-scheme` in un verso o nell'altro — quindi la stessa riga serve sia il tema automatico sia la scelta manuale. 🔴 Ogni token e' dichiarato due volte: prima il valore chiaro da solo, poi la versione con `light-dark()`. Non e' un doppione da ripulire: e' la rete per i browser che `light-dark()` non ce l'hanno. Loro tengono la prima riga e vedono il sito chiaro, che e' esattamente quello che vedevano prima. 🔴 `color-scheme` non e' solo per noi: dice anche al browser di disegnare in scuro le cose che non passano dal nostro CSS — la barra di scorrimento, il calendario dentro , i menu a tendina. Senza, restano bianche in mezzo al buio. */ :root { color-scheme: light dark; --ink: #2f3131; --ink: light-dark(#2f3131, #e6e4df); --muted: #68706c; --muted: light-dark(#68706c, #a2a8a3); --sage: #8a9a84; --sage: light-dark(#8a9a84, #9db095); /* 🔴 --sage-dark non cambia: e' il fondo del riquadro dello studio e dei bottoni pieni, non un colore di testo. Per l'accento scritto c'e' --link, che invece si schiarisce. */ --sage-dark: #52624f; --sage-soft: #e6ebe3; --sage-soft: light-dark(#e6ebe3, #28312a); --sand: #e8ded1; --sand: light-dark(#e8ded1, #34302b); /* 🔴 Si chiama --accento e non --verde per un motivo: e' il secondo colore che passa di qui (prima era un mattone caldo) e a restare sara' il ruolo, non la tinta. Un token che porta il nome di un colore che non ha piu' e' la bugia che poi qualcuno si trascina per anni. */ --accento: #006039; --accento: light-dark(#006039, #3fa878); /* Lo stesso accento per il testo piccolo. Sul chiaro il verde e' gia' abbastanza scuro da bastare da solo, e serve appena un filo di stacco in piu'; sullo scuro il problema si ribalta e va schiarito. */ --accento-ink: #00563a; --accento-ink: light-dark(#00563a, #62c298); --cream: #f7f4ee; --cream: light-dark(#f7f4ee, #171918); --white: #fffdf9; --white: light-dark(#fffdf9, #1f2221); --line: rgba(47,49,49,.15); --line: light-dark(rgba(47,49,49,.15), rgba(232,230,225,.14)); --danger: #9b3333; --danger: light-dark(#9b3333, #e08585); /* Token che il tema scuro ribalta. I nomi dicono a cosa servono e non che colore sono: «--field» resta il bordo di un campo anche quando da grigio scuro diventa grigio chiaro. */ --link: #52624f; /* l'accento quando e' testo, non fondo */ --link: light-dark(#52624f, #a8bc9f); --field: rgba(47,49,49,.22); /* bordo di campi, chip, barra di scorrimento */ --field: light-dark(rgba(47,49,49,.22), rgba(232,230,225,.2)); --field-hover: rgba(47,49,49,.38); --field-hover: light-dark(rgba(47,49,49,.38), rgba(232,230,225,.36)); --velo: rgba(47,49,49,.06); /* fondi appena accennati: badge, codice */ --velo: light-dark(rgba(47,49,49,.06), rgba(232,230,225,.07)); --header-bg: rgba(247,244,238,.94); --header-bg: light-dark(rgba(247,244,238,.94), rgba(23,25,24,.9)); --header-bg-scrolled: rgba(255,253,249,.96); --header-bg-scrolled: light-dark(rgba(255,253,249,.96), rgba(31,34,33,.96)); --surface-float: rgba(255,253,249,.97); /* il banner dei cookie */ --surface-float: light-dark(rgba(255,253,249,.97), rgba(31,34,33,.98)); /* 🔴 Token che il tema scuro NON tocca: sono le superfici volutamente scure — il piede, il riquadro dello studio, la barra dell'amministrazione — e il testo che ci sta sopra. Se seguissero il tema, in scuro diventerebbero bianco su bianco. */ --ink-solid: #2f3131; --on-solid: #fffdf9; --cream-solid: #f7f4ee; --sand-solid: #e8ded1; --serif: "Playfair Display", Georgia, serif; --sans: "Montserrat", Arial, sans-serif; --shadow: 0 28px 70px rgba(47,49,49,.12); --shadow: 0 28px 70px light-dark(rgba(47,49,49,.12), rgba(0,0,0,.55)); /* Ritmo verticale: tre respiri diversi, scelti sezione per sezione. */ --pad-s: clamp(46px, 6vw, 74px); --pad-m: clamp(64px, 9vw, 116px); --pad-l: clamp(84px, 13vw, 168px); --gutter: clamp(18px, 2.4vw, 44px); --measure: 62ch; /* Forme. L'arco e' il motivo che tiene insieme il sito: lo stesso profilo della finestra dello studio, ripetuto su ogni fotografia. Niente rettangoli a spigolo vivo. */ --arch: clamp(90px, 15vw, 230px); --arch-foot: clamp(14px, 2vw, 28px); --slab: clamp(24px, 3.4vw, 56px); } /* L'interruttore. `only` impedisce al browser di tornare all'altro tema. */ :root[data-tema="chiaro"] { color-scheme: only light; } :root[data-tema="scuro"] { color-scheme: only dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 104px; } /* TRANSIZIONE FRA PAGINE — il sito e' fatto di pagine PHP separate, ma dove il browser lo supporta il passaggio da una all'altra diventa una dissolvenza continua invece di un lampo bianco. Nessun JavaScript. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out .28s cubic-bezier(.4,0,1,1) both; } ::view-transition-new(root) { animation: vt-in .42s cubic-bezier(0,0,.2,1) both; } @keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(12px); } } /* Filo di avanzamento della lettura. Animazione legata allo scorrimento, in CSS: senza supporto resta invisibile e non manca nulla. */ .scroll-line { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; transform: scaleX(0); transform-origin: 0 50%; background: var(--accento); pointer-events: none; } @supports (animation-timeline: scroll()) { .scroll-line { animation: scroll-progress linear both; animation-timeline: scroll(root block); } @keyframes scroll-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } } body { margin: 0; color: var(--ink); background: var(--cream); font: 400 15px/1.75 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; } a { color: var(--link); text-decoration: none; } img { display: block; max-width: 100%; height: auto; } h1, h2, h3 { margin-top: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -.035em; } h1 em, h2 em, h3 em { font-style: normal; color: var(--accento); } p { margin-top: 0; } figure { margin: 0; } .skip-link { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 10px 14px; color: var(--on-solid); background: var(--ink-solid); } .skip-link:focus { left: 12px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } .num { font-variant-numeric: tabular-nums; } /* La gabbia: dodici colonne, e la possibilita' di uscirne. */ .container { width: min(1320px, 100% - clamp(28px, 6vw, 104px)); margin-inline: auto; } .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); } .measure { max-width: var(--measure); } /* ── Testata ─────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); border-bottom: 1px solid transparent; backdrop-filter: blur(18px); transition: border-color .3s ease, background .3s ease; } .site-header.is-scrolled { background: var(--header-bg-scrolled); border-bottom-color: var(--line); } .nav { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 30px; transition: min-height .3s ease; } .site-header.is-scrolled .nav { min-height: 74px; } .brand { display: inline-flex; align-items: center; color: var(--ink); } .brand-copy { display: grid; line-height: 1; } .brand strong { font: 500 21px/1 var(--serif); letter-spacing: -.025em; } .brand small { margin-top: 6px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; } .nav-links { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); } .nav-links > a:not(.button) { position: relative; padding-block: 32px; color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: .04em; } .nav-links > a:not(.button)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 25px; height: 1px; background: var(--accento); transition: right .25s ease; } .nav-links > a:hover::after, .nav-links > a[aria-current="page"]::after { right: 0; } /* Il pannello, campi in due lingue: l'italiano a sinistra, l'inglese a destra, sulla stessa riga. Affiancati si vede subito quale manca. */ .campo-bilingue { align-items: start; } .tag-lingua { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; color: var(--muted); background: var(--velo); font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } /* Il selettore di lingua: due lettere, non una bandiera. Una bandiera dice il paese, non la lingua — e l'inglese di questo sito serve a chi passa da Gaeta, non ai soli britannici. */ .lingua-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 38px; padding: 0 9px; border: 1px solid var(--field); border-radius: 999px; color: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: .1em; transition: color .2s ease, border-color .2s ease; } .lingua-switch:hover { color: var(--link); border-color: var(--field-hover); } /* L'interruttore del tema. Una sola icona con due gruppi dentro: si mostra il sole quando il tema e' chiaro, la luna quando e' scuro. La riga con `:not([data-tema])` copre il mezzo secondo prima che il JavaScript scriva l'attributo: senza, chi ha il sistema in scuro vedrebbe il sole. */ .tema-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--field); border-radius: 999px; color: var(--ink); background: transparent; cursor: pointer; transition: color .2s ease, border-color .2s ease, transform .2s ease; } .tema-toggle:hover { color: var(--link); border-color: var(--field-hover); transform: rotate(-12deg); } .tema-luna { display: none; } :root[data-tema="scuro"] .tema-sole { display: none; } :root[data-tema="scuro"] .tema-luna { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-tema]) .tema-sole { display: none; } :root:not([data-tema]) .tema-luna { display: block; } } /* Lingua e tema: un gruppo staccato dalle voci di menu da un filo verticale. La distanza fra i due e' minore di quella fra le voci — e' quello che li fa leggere come una cosa sola. */ .nav-utility { display: inline-flex; align-items: center; gap: 8px; padding-left: clamp(14px, 1.6vw, 22px); border-left: 1px solid var(--line); } .nav-toggle { display: none; width: 43px; height: 43px; border: 1px solid var(--line); border-radius: 50%; background: transparent; } .nav-toggle span:not(.sr-only) { display: block; width: 18px; height: 1px; margin: 5px auto; background: var(--ink); } /* ── Controlli ───────────────────────────────────────────────── */ .button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border: 1px solid var(--sage-dark); border-radius: 999px; color: var(--on-solid); background: var(--sage-dark); font: 700 10px/1 var(--sans); letter-spacing: .095em; text-transform: uppercase; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; } .button:hover { transform: translateY(-2px); background: var(--ink-solid); border-color: var(--ink-solid); } .button-small { min-height: 42px; padding-inline: 18px; } /* 🔴 `.button` porta `display: inline-flex`, che ha specificita' maggiore della regola `[hidden] { display: none }` del browser: senza questa riga un bottone con l'attributo `hidden` resta visibile, e il JavaScript che crede di averlo nascosto non se ne accorge. Vale per qualunque bottone del sito, non solo per quelli del banner cookie. */ .button[hidden] { display: none; } .button-outline, .button-light { color: var(--ink); background: transparent; border-color: var(--field-hover); } .button-outline:hover, .button-light:hover { color: var(--on-solid); background: var(--ink-solid); } .button-outline-light { color: var(--on-solid); background: transparent; border-color: rgba(255,255,255,.5); } .button-outline-light:hover { color: var(--ink-solid); background: var(--on-solid); } .button-wide { width: 100%; } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; } /* Il collegamento di testo con filetto: la seconda azione non e' mai una seconda pillola, o la pagina diventa una fila di pulsanti. */ .arrow-link, .text-link { width: fit-content; display: inline-flex; align-items: baseline; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid currentColor; color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .04em; } .arrow-link span, .text-link span, .footer-cta span { display: inline-block; transition: transform .22s ease; } .arrow-link:hover span, .text-link:hover span, .footer-cta:hover span { transform: translateX(5px); } /* ── Voci tipografiche ricorrenti ────────────────────────────── */ .eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--accento-ink); font-size: 9px; font-weight: 700; letter-spacing: .21em; text-transform: uppercase; } .eyebrow::before { content: ""; width: 30px; height: 1px; background: currentColor; } .marginalia { margin: 0; color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .caption { margin: 14px 0 0; color: var(--muted); font: italic 400 13px/1.5 var(--serif); max-width: 34ch; } .pullquote { margin: 0 0 26px; font: italic 500 clamp(23px, 2.5vw, 33px)/1.35 var(--serif); letter-spacing: -.02em; text-wrap: balance; } .notice { margin: 24px 0; padding: 14px 0 14px 17px; border-left: 2px solid var(--accento); color: var(--muted); font-size: 11.5px; line-height: 1.7; } /* L'intestazione di sezione: un filetto, il numero fuori dalla colonna del testo, il titolo grande, la nota piccola a destra. */ .rule-head { align-items: baseline; padding-top: 20px; border-top: 1px solid var(--ink); margin-bottom: clamp(38px, 5vw, 70px); } .rule-head .rule-num { grid-column: 1 / 2; font: italic 500 15px/1 var(--serif); color: var(--accento-ink); } .rule-head .rule-title { grid-column: 2 / 9; margin: 0; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.02; } .rule-head .rule-note { grid-column: 9 / -1; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.7; } /* Variante centrata. Con un titolo corto la versione asimmetrica lascia un buco fra il titolo e la nota a destra: qui numero, titolo e nota stanno incolonnati al centro. */ .rule-head-center { justify-items: center; text-align: center; } .rule-head-center .rule-num { grid-column: 1 / -1; margin-bottom: 12px; } .rule-head-center .rule-title { grid-column: 3 / 11; } .rule-head-center .rule-note { grid-column: 4 / 10; margin-top: 18px; max-width: 56ch; text-align: center; } /* ── Apertura ────────────────────────────────────────────────── */ .hero { padding-top: clamp(30px, 5vw, 62px); overflow: clip; } .hero-grid { align-items: end; } .hero-copy { grid-column: 1 / 7; padding-bottom: clamp(26px, 4vw, 58px); } .hero h1 { margin: 0; font-size: clamp(52px, 6.6vw, 104px); line-height: .93; letter-spacing: -.045em; } .hero h1 em { display: block; } .hero-intro { max-width: 44ch; margin: 30px 0 0; color: var(--muted); font-size: 15px; line-height: 1.8; } .hero-figure { grid-column: 7 / -1; } .hero-figure .caption { max-width: 32ch; } /* ARCO — una figura con la sommita' curva e il piede appena stondato. `overflow: clip` tiene l'immagine dentro il profilo mentre si muove. */ .arch { position: relative; overflow: clip; border-radius: var(--arch) var(--arch) var(--arch-foot) var(--arch-foot); background: var(--sand); } .arch img { width: 100%; height: 100%; object-fit: cover; display: block; } /* L'altezza e' legata anche alla finestra: su uno schermo basso un'immagine da 780px spingerebbe titolo e azione sotto la piega. `svh` evita i salti delle barre del browser mobile. */ .hero-figure .arch { height: min(clamp(400px, 62vw, 760px), 64svh); } .hero-figure img { object-position: 50% 36%; filter: saturate(.88) contrast(.98); } /* PARALLASSE — l'immagine scorre piu' lenta della pagina. E' un'animazione CSS legata alla posizione dell'elemento nella finestra: nessun listener di scroll, nessun lavoro in JavaScript, e si spegne con reduced-motion. */ @supports (animation-timeline: view()) { .arch img { animation: arch-parallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } @keyframes arch-parallax { from { transform: translateY(-4%) scale(1.12); } to { transform: translateY(4%) scale(1.12); } } } .hero-baseline { margin-top: clamp(26px, 3.5vw, 48px); padding-top: 16px; border-top: 1px solid var(--line); align-items: baseline; row-gap: 10px; } .hero-baseline > *:nth-child(1) { grid-column: 1 / 5; } .hero-baseline > *:nth-child(2) { grid-column: 5 / 9; } .hero-baseline > *:nth-child(3) { grid-column: 9 / -1; justify-self: end; } .hero-baseline a { color: var(--muted); } .hero-baseline a:hover { color: var(--ink); } /* ── Fascia dell'invito ────────────────────────────────────────── Al posto della striscia scorrevole: una fascia scura, ferma, con una frase in serif e l'azione dentro. Niente movimento, niente arancione a tutta larghezza: il colore forte resta un accento. */ .claim { margin: clamp(44px, 6vw, 92px) clamp(10px, 2vw, 30px) 0; padding: clamp(56px, 7vw, 100px) 0; border-radius: var(--slab); color: var(--cream-solid); background: var(--ink-solid); } .claim-grid { align-items: end; row-gap: 36px; } .claim-body { grid-column: 1 / 8; } .claim-label { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 26px; color: var(--sand-solid); font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .claim-label span { display: inline-flex; align-items: center; gap: 14px; } .claim-label span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; } .claim-label span:last-child::after { display: none; } .claim-body p:not(.claim-label) { margin: 0; max-width: 26ch; font: 500 clamp(28px, 3.5vw, 50px)/1.12 var(--serif); letter-spacing: -.03em; } .claim-body em { font-style: italic; color: var(--sand-solid); } .claim-actions { grid-column: 9 / -1; display: grid; gap: 20px; justify-items: start; } /* Sul fondo scuro l'azione e' chiara: massimo contrasto, nessun bordo. */ .claim-actions .button { color: var(--ink-solid); background: var(--cream-solid); border-color: var(--cream-solid); } .claim-actions .button:hover { color: var(--ink-solid); background: var(--on-solid); border-color: var(--on-solid); transform: translateY(-2px); } .claim-actions .arrow-link { color: var(--sand-solid); } .claim-actions .arrow-link:hover { color: var(--cream-solid); } /* La valutazione: le stelle in oro, il resto come una nota a margine. Sul fondo scuro non serve altro colore per farsi vedere. */ .valutazione { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 6px 0 0; padding-top: 20px; border-top: 1px solid rgba(232,222,209,.22); color: rgba(250,247,242,.72); font-size: 12px; letter-spacing: .01em; } .valutazione .stelle { color: #e0a83c; font-size: 14px; letter-spacing: .1em; } .valutazione a { color: inherit; border-bottom: 1px solid rgba(232,222,209,.3); transition: color .16s ease, border-color .16s ease; } .valutazione a:hover { color: var(--cream-solid); border-color: var(--cream-solid); } .valutazione .num { color: var(--cream-solid); font-weight: 600; } /* ── Indice dei trattamenti ────────────────────────────────────── Non schede: un indice, come quello di un catalogo. Numero nel margine, nome grande, prezzo incolonnato a destra, filetti. */ .section { padding: var(--pad-m) 0; } .section-l { padding: var(--pad-l) 0; } .section-s { padding: var(--pad-s) 0; } .index-list { border-top: 1px solid var(--line); } .index-row { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto 1.6rem; align-items: baseline; column-gap: var(--gutter); padding: clamp(22px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--line); color: var(--ink); transition: background .25s ease, padding-left .25s ease; } .index-row:hover { background: linear-gradient(90deg, rgba(232,222,209,.5), transparent 72%); padding-left: 10px; } .index-num { font: italic 500 15px/1 var(--serif); color: var(--accento-ink); } .index-name { display: block; margin: 0 0 7px; font: 500 clamp(24px, 3vw, 38px)/1.08 var(--serif); letter-spacing: -.03em; } .index-desc { display: block; max-width: 56ch; color: var(--muted); font-size: 12.5px; line-height: 1.7; } .index-meta { display: grid; justify-items: end; gap: 4px; text-align: right; } .index-meta .dur { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .index-meta .price { font: 500 20px/1 var(--serif); } .index-arrow { justify-self: end; color: var(--accento-ink); font-size: 17px; transition: transform .25s ease; } .index-row:hover .index-arrow { transform: translateX(6px); } .index-after { margin: 30px 0 0; align-items: baseline; row-gap: 18px; } .index-after p { grid-column: 1 / 8; margin: 0; max-width: 58ch; color: var(--muted); font-size: 12.5px; } .index-after a { grid-column: 9 / -1; justify-self: end; } /* ── Doppia pagina: fotografia fuori gabbia, testo in colonna ─── */ .spread { position: relative; align-items: center; row-gap: 34px; } .spread-figure { grid-column: 1 / 7; } .spread-figure .arch { height: clamp(400px, 52vw, 660px); } .spread-figure img { filter: saturate(.8); } .spread-body { grid-column: 8 / -1; } .spread h2 { margin: 0 0 24px; font-size: clamp(32px, 3.9vw, 54px); line-height: 1.04; } .spread-body > p:not(.eyebrow):not(.pullquote):not(.notice) { color: var(--muted); max-width: var(--measure); } .value-list { display: grid; margin: 30px 0; border-top: 1px solid var(--line); } .value-list p { display: grid; grid-template-columns: 3.2rem 1fr; gap: var(--gutter); margin: 0; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); } .value-list b { font: italic 500 14px/1.4 var(--serif); color: var(--accento-ink); } .value-list strong { display: block; margin-bottom: 3px; color: var(--ink); font: 500 16px/1.3 var(--serif); } /* ── Neonati ────────────────────────────────────────────────────── Nessun bordo: il verde entra e esce in sfumatura, cosi' la sezione non si legge come una lastra appoggiata sopra la precedente. Dietro il testo c'e' un arco disegnato col solo bordo. */ .baby { position: relative; padding: var(--pad-l) 0; overflow: clip; background: linear-gradient(180deg, var(--cream) 0%, var(--sage-soft) 26%, var(--sage-soft) 74%, var(--cream) 100%); } /* Un passaggio centrato: tutto il resto della pagina e' asimmetrico, e questo cambio di ritmo fa da respiro. Nessuna fotografia: il colore e lo spazio bastano. */ .baby-body { grid-column: 4 / 11; text-align: center; } .baby-body .eyebrow { justify-content: center; } .baby-body h2 { margin: 0 0 24px; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.04; } .baby-body > p:not(.eyebrow):not(.notice) { margin-inline: auto; max-width: 48ch; color: var(--muted); font-size: 15.5px; } .baby-body .notice { display: inline-block; margin: 30px auto; padding: 0 0 0 17px; border-left-color: var(--sage-dark); text-align: left; max-width: 52ch; } .baby-body .arrow-link { margin-inline: auto; } /* ── Tre passi: righe a filetto, numeri appesi nel margine ───── */ .steps { list-style: none; width: min(760px, 100%); margin: 0 auto; padding: 0; border-top: 1px solid var(--ink); } .steps > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: clamp(16px, 2vw, 30px); padding: clamp(20px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--line); } .steps b { font: italic 500 15px/1.5 var(--serif); color: var(--accento-ink); } .steps h3 { margin: 0 0 5px; font-size: clamp(20px, 2.1vw, 26px); } .steps p { margin: 0; color: var(--muted); font-size: 12.5px; } /* ── Studio: mappa fuori gabbia a destra ─────────────────────── */ .studio { margin-inline: clamp(10px, 2vw, 30px); border-radius: var(--slab); background: var(--sage-dark); color: var(--on-solid); } .studio .eyebrow { color: var(--sand-solid); } .studio h2 { color: var(--on-solid); margin: 0 0 26px; font-size: clamp(32px, 3.9vw, 54px); line-height: 1.04; } .studio h2 em { color: var(--sand-solid); } .studio-grid { align-items: center; row-gap: 40px; } .studio-body { grid-column: 1 / 6; } .studio-map { grid-column: 7 / -1; } /* La mappa e' un arco e scende sotto il bordo della lastra: il confine fra una sezione e l'altra viene attraversato, non solo accostato. */ .studio-map .arch { height: clamp(320px, 42vw, 500px); margin-bottom: calc(-1 * clamp(40px, 6vw, 96px)); background: var(--cream); } .studio-map iframe { width: 100%; height: 100%; display: block; border: 0; filter: grayscale(.3); } .studio-map .text-link { margin-top: 16px; color: var(--on-solid); } .meta-list { display: grid; margin: 0 0 30px; border-top: 1px solid rgba(255,255,255,.2); } .meta-list div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.2); font-size: 12.5px; } .meta-list dt { color: rgba(255,255,255,.78); font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding-top: 3px; } .meta-list dd { margin: 0; color: var(--on-solid); } .meta-list a { color: var(--on-solid); border-bottom: 1px solid rgba(255,255,255,.35); } /* Su fondo chiaro la stessa lista cambia solo i filetti e i colori. */ .meta-list-light { border-top-color: var(--ink); } .meta-list-light div { border-bottom-color: var(--line); } .meta-list-light dt { color: var(--muted); } .meta-list-light dd { color: var(--ink); } .meta-list-light a { color: var(--link); border-bottom-color: rgba(82,98,79,.4); } /* ── Domande ─────────────────────────────────────────────────── */ .faq-grid { row-gap: 40px; } .faq-aside { grid-column: 1 / 5; position: sticky; top: 132px; align-self: start; } .faq-aside h2 { margin: 0 0 18px; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.05; } .faq-aside > p:not(.eyebrow) { max-width: 30ch; color: var(--muted); font-size: 12.5px; } .faq-list { grid-column: 6 / -1; border-top: 1px solid var(--ink); } .faq-list details { border-bottom: 1px solid var(--line); } .faq-list summary { display: grid; grid-template-columns: 1fr 24px; gap: 20px; align-items: baseline; padding: 22px 0; list-style: none; cursor: pointer; font: 500 clamp(18px, 1.9vw, 24px)/1.3 var(--serif); } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary span { justify-self: end; color: var(--accento-ink); font: 300 22px/1 var(--sans); transition: transform .25s ease; } .faq-list details[open] summary span { transform: rotate(45deg); } .faq-list details p { max-width: var(--measure); margin: 0 0 24px; color: var(--muted); font-size: 13.5px; } /* ── Chiusura ───────────────────────────────────────────────────── Su fondo sabbia, non sull'accento pieno: il testo piccolo su un fondo d'accento non raggiunge il contrasto richiesto. */ .closing { padding: var(--pad-l) 0 calc(var(--pad-l) + clamp(20px, 3vw, 40px)); background: linear-gradient(180deg, var(--cream) 0%, var(--sand) 42%, var(--sand) 100%); } .closing h2 { grid-column: 1 / 10; margin: 0; font-size: clamp(38px, 5.6vw, 82px); line-height: 1.02; letter-spacing: -.04em; } .closing-grid { row-gap: 40px; align-items: end; } .closing-actions { grid-column: 10 / -1; display: grid; gap: 18px; justify-items: start; } /* ── Pagine interne ──────────────────────────────────────────── */ .page-hero { padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); } .page-hero h1 { margin: 0 0 22px; font-size: clamp(44px, 6vw, 84px); line-height: .98; letter-spacing: -.04em; } .page-hero-copy { grid-column: 1 / 9; } .page-hero-note { grid-column: 9 / -1; align-self: end; color: var(--muted); font-size: 12.5px; line-height: 1.75; } .page-hero .container > p:not(.eyebrow) { max-width: var(--measure); color: var(--muted); font-size: 15.5px; } .split { align-items: start; row-gap: 40px; } .split-figure { grid-column: 1 / 6; position: sticky; top: 124px; } .split-figure .arch { height: clamp(380px, 46vw, 620px); } .split-body { grid-column: 7 / -1; } .split-body h2 { margin: 34px 0 12px; font-size: clamp(23px, 2.3vw, 30px); } .split-body > p { max-width: var(--measure); color: var(--muted); } .split-body .large-copy { color: var(--ink); font: 500 clamp(19px, 2vw, 25px)/1.55 var(--serif); } .cert-list { margin: 0 0 30px; padding: 0; list-style: none; border-top: 1px solid var(--line); } .cert-list li { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .meta { color: var(--accento-ink); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } /* L'invito a leggere le altre su Google, sotto le otto schede. */ .altre-recensioni { display: grid; justify-items: center; gap: 16px; margin-top: clamp(30px, 4vw, 52px); text-align: center; } .altre-recensioni p { margin: 0; color: var(--muted); font-size: 13.5px; } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .card { padding: 30px; background: var(--cream); } .card h2 { margin: 12px 0 10px; font-size: 22px; } .card p { color: var(--muted); font-size: 13px; } .card time { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; } .stars { margin: 0; color: var(--accento-ink); letter-spacing: .12em; } .narrow { max-width: 68ch; } .narrow h2 { margin: 44px 0 12px; font-size: clamp(22px, 2.2vw, 29px); } .narrow > p { color: var(--muted); font-size: 15px; line-height: 1.85; } .mini-card, .summary-box { padding: 32px; border: 1px solid var(--line); background: var(--white); } .summary-box p { margin: 0 0 8px; } .split-body details { border-top: 1px solid var(--line); } .split-body details:last-of-type { border-bottom: 1px solid var(--line); } .split-body summary { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; list-style: none; cursor: pointer; font: 500 17px var(--serif); } .split-body summary::-webkit-details-marker { display: none; } .split-body summary span { color: var(--accento-ink); font: 300 20px/1 var(--sans); transition: transform .25s ease; } .split-body details[open] summary span { transform: rotate(45deg); } .split-body details p { margin: 0 0 16px; font-size: 13px; } /* ── Moduli ──────────────────────────────────────────────────── */ .booking-layout { align-items: start; row-gap: 40px; } .booking-aside { grid-column: 1 / 5; position: sticky; top: 124px; } .booking-aside h2 { margin: 0 0 14px; font-size: 26px; } .booking-aside p, .booking-aside li { color: var(--muted); font-size: 12.5px; } .booking-aside ul { padding-left: 17px; } .booking-form { grid-column: 6 / -1; } .contact-grid { align-items: start; row-gap: 48px; } .contact-body { grid-column: 1 / 6; } .contact-form { grid-column: 7 / -1; } form { display: grid; gap: 18px; } fieldset { display: grid; gap: 15px; padding: 0 0 24px; margin: 0; border: 0; border-bottom: 1px solid var(--line); } legend { padding: 0; color: var(--accento-ink); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } label { display: grid; gap: 8px; font-size: 11px; font-weight: 600; } input, select, textarea { width: 100%; min-height: 49px; padding: 12px 14px; border: 1px solid var(--field); border-radius: 8px; color: var(--ink); background: var(--white); font: 400 14px var(--sans); } input:hover, select:hover, textarea:hover { border-color: var(--field-hover); } textarea { resize: vertical; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; } .check { display: flex; align-items: flex-start; gap: 11px; font-weight: 400; font-size: 12px; } .check input { width: auto; min-height: auto; margin-top: 4px; } .form-status { min-height: 22px; color: var(--link); font-size: 12.5px; font-weight: 600; } .form-status.error { color: var(--danger); } .hp { position: absolute; left: -9999px; } .service-summary { padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px; } /* ── Scelta dell'orario ─────────────────────────────────────────────── Fascia e orario si scelgono da bottoni, non da un menu a tendina: su un telefono un elenco di quaranta voci e' un muro, e non si vede a colpo d'occhio quanto e' pieno un pomeriggio. */ .campo-data { max-width: 260px; } .slot-step { display: grid; gap: 11px; } .slot-label { margin: 0; color: var(--accento-ink); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .slot-msg { margin: 0; color: var(--muted); font-size: 12.5px; } .slot-msg[hidden] { display: none; } .chip { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; min-width: 82px; padding: 12px 16px; border: 1px solid var(--field); border-radius: 8px; background: var(--white); color: var(--ink); font: 600 13.5px/1 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; } /* `:hover` e' piu' specifico di `[aria-pressed]`: senza l'esclusione, la pastiglia scelta si schiarisce appena il cursore le passa sopra. */ .chip:hover:not(:disabled):not([aria-pressed="true"]) { border-color: var(--ink); background: var(--sage-soft); } .chip:has(input:checked):hover { color: var(--on-solid); background: var(--sage-dark); border-color: var(--sage-dark); } /* Il radio copre la pastiglia e resta invisibile: il clic e il tasto Tab funzionano come su un radio normale, perche' e' un radio. */ .chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; } .chip:has(input:checked), .chip[aria-pressed="true"] { color: var(--on-solid); background: var(--sage-dark); border-color: var(--sage-dark); } .chip:has(input:focus-visible) { outline: 2px solid var(--sage-dark); outline-offset: 3px; } .chip:disabled { color: var(--muted); background: transparent; border-style: dashed; cursor: not-allowed; } /* La fascia porta due righe: il nome e, sotto, le ore. */ .chip-fascia { flex-direction: column; gap: 3px; min-width: 132px; padding: 10px 18px; } .chip-fascia strong { font-weight: 600; font-size: 13.5px; } .chip-fascia small { font-size: 10.5px; opacity: .7; letter-spacing: .04em; } .chip:disabled:hover { background: transparent; border-color: var(--field); } .map { margin-top: 26px; height: clamp(300px, 34vw, 380px); } .map iframe { width: 100%; height: 100%; display: block; border: 0; filter: grayscale(.3); } /* ── LA MAPPA NEL TEMA SCURO ────────────────────────────────────── L'iframe e' di Google: dentro non possiamo entrare, e nella pagina scura resterebbe l'unico rettangolo bianco acceso. Si scurisce da fuori, con un filtro. 🔴 `invert()` da solo non basta e fa danni: invertendo i colori l'acqua azzurra diventa arancione e i parchi verdi diventano magenta. `hue-rotate(180deg)` subito dopo li rimanda dove stavano — e' la coppia che va usata sempre insieme, mai una sola. L'inversione e' 0,93 e non 1: l'ultimo 7% e' quello che tiene la mappa un po' morbida invece di sbatterla sul nero pieno. */ :root[data-tema="scuro"] .map iframe, :root[data-tema="scuro"] .studio-map iframe { filter: grayscale(.4) invert(.93) hue-rotate(185deg) brightness(.92) contrast(.92); } @media (prefers-color-scheme: dark) { /* Il mezzo secondo prima che il JavaScript scriva data-tema, e il caso di chi il JavaScript non ce l'ha: senza questa riga la mappa lampeggerebbe bianca a ogni caricamento. */ :root:not([data-tema]) .map iframe, :root:not([data-tema]) .studio-map iframe { filter: grayscale(.4) invert(.93) hue-rotate(185deg) brightness(.92) contrast(.92); } } /* Il passaggio da un tema all'altro non deve essere uno scatto. */ .map iframe, .studio-map iframe { transition: filter .3s ease; } /* Focus da tastiera: contorno solido, non un velo trasparente. */ :focus-visible { outline: 2px solid var(--sage-dark); outline-offset: 3px; border-radius: 3px; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; } .studio :focus-visible, .closing :focus-visible, .site-footer :focus-visible, .whatsapp-float:focus-visible, .admin-sidebar :focus-visible { outline-color: var(--cream-solid); } @supports not selector(:focus-visible) { input:focus, select:focus, textarea:focus, button:focus, a:focus { outline: 2px solid var(--sage-dark); outline-offset: 3px; } } /* ── Chiusura di pagina ──────────────────────────────────────── */ .site-footer { padding: clamp(56px, 7vw, 88px) 0 26px; color: rgba(255,255,255,.7); background: var(--ink-solid); } .site-footer a, .site-footer p { color: rgba(255,255,255,.74); } .site-footer .brand { color: var(--on-solid); } .site-footer .brand small { color: rgba(255,255,255,.5); } .footer-grid { row-gap: 40px; } .footer-intro { grid-column: 1 / 6; } .footer-nav { grid-column: 7 / 10; } .footer-contact { grid-column: 10 / -1; } .footer-intro > p { max-width: 42ch; margin-top: 24px; font-size: 13px; } .site-footer h2 { margin: 0 0 18px; color: var(--on-solid); font: 500 18px var(--serif); } .site-footer p { font-size: 13px; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin: 8px 0; font-size: 13px; } .footer-cta { display: inline-flex; gap: 16px; margin-top: 24px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.35); color: var(--on-solid) !important; font-size: 10px; font-weight: 700; letter-spacing: .06em; } .footer-social { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; } .footer-social a { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-top: 52px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.6); font-size: 9.5px; letter-spacing: .06em; } .footer-credit { display: block; margin-top: 10px; color: rgba(255,255,255,.45); font-size: 9.5px; letter-spacing: .06em; } .footer-credit a { color: rgba(255,255,255,.6); border-bottom: 1px solid rgba(255,255,255,.22); } .footer-credit a:hover { color: var(--on-solid); border-bottom-color: var(--on-solid); } .footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; } .footer-legal a { color: rgba(255,255,255,.6); } .footer-legal a:hover { color: var(--on-solid); } .avviso-gestisci { padding: 0; border: 0; color: rgba(255,255,255,.6); background: transparent; font: inherit; cursor: pointer; } .avviso-gestisci:hover { color: var(--on-solid); } /* Mentre il banner e' aperto il bottone WhatsApp gli finisce sotto: si ritira, e torna appena la scelta e' fatta. */ body:has(.avviso-consenso:not([hidden])) .whatsapp-float { opacity: 0; transform: translateY(8px); pointer-events: none; } .whatsapp-float { transition: opacity .25s ease, transform .25s ease; position: fixed; right: 20px; bottom: 20px; z-index: 40; padding: 12px 16px; border-radius: 999px; color: var(--on-solid); background: #397158; font-size: 10px; font-weight: 700; letter-spacing: .06em; box-shadow: 0 12px 28px var(--field); } /* 🔴 Il centraggio NON passa da un transform. Con `left/right` e `margin-inline: auto` la posizione orizzontale e' decisa dal layout, e l'animazione d'ingresso muove solo l'asse Y: se l'animazione viene interrotta, sovrascritta o non parte, il banner resta comunque al centro. Con `translateX(-50%)` bastava perdere quel transform per ritrovarselo a filo del bordo destro, mezzo fuori dallo schermo. */ .avviso-consenso { position: fixed; left: 16px; right: 16px; bottom: 22px; z-index: 70; width: min(760px, calc(100% - 32px)); margin-inline: auto; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-float); box-shadow: 0 24px 70px var(--line); backdrop-filter: blur(18px); animation: avviso-entra .45s cubic-bezier(.2,.8,.2,1) both; } .avviso-consenso[hidden] { display: none !important; } .avviso-testo { display: grid; gap: 5px; } /* Il banner ha tre righe possibili: testo, scelte (chiuse di partenza) e bottoni. Le scelte occupano tutta la larghezza quando si aprono. 🔴 `minmax(220px, 1fr)` e non `minmax(0, 1fr)`: con lo zero la colonna del testo puo' restringersi fino a sparire quando i bottoni chiedono spazio, e con tre bottoni succede davvero. Il testo resta nell'HTML — quindi i controlli automatici lo trovano — ma non lo legge nessuno. Il minimo in pixel e' quello che glielo impedisce. */ .avviso-consenso { grid-template-columns: minmax(220px, 1fr) auto; } .avviso-link a { font-size: 11.5px; border-bottom: 1px solid var(--field); } .avviso-scelte { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--line); } .avviso-scelte .check { margin: 0; font-size: 12.5px; } .avviso-nota { margin: 6px 0 0 28px; color: var(--muted); font-size: 11px; line-height: 1.55; } .avviso-testo strong { font: 500 18px/1.2 var(--serif); } .avviso-consenso p { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.55; } .avviso-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .avviso-azioni .button { min-height: 42px; padding-inline: 16px; white-space: nowrap; } @keyframes avviso-entra { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* ── Movimento ───────────────────────────────────────────────── */ /* L'apertura e' un'animazione CSS con `both`: il titolo e' l'elemento piu' importante della pagina e non deve attendere JavaScript. */ .hero-copy > *, .hero-figure { animation: hero-in .85s cubic-bezier(.2,.75,.25,1) both; } .hero-copy > :nth-child(1) { animation-delay: .10s; } .hero-copy > :nth-child(2) { animation-delay: .18s; } .hero-copy > :nth-child(3) { animation-delay: .26s; } .hero-copy > :nth-child(4) { animation-delay: .34s; } .hero-figure { animation-name: hero-in-figure; animation-delay: .14s; } @keyframes hero-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes hero-in-figure { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } .js .reveal { opacity: 0; transform: translateY(26px); } .js .reveal.is-visible { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.75,.25,1) var(--reveal-delay, 0ms), transform .7s cubic-bezier(.2,.75,.25,1) var(--reveal-delay, 0ms); } .arch img { transition: filter .6s ease; } .arch:hover img { filter: saturate(.95); } @media (pointer: fine) { ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--field); border-radius: 10px; } } /* ════════════════════════════════════════════════════════════════ PANNELLO Stessi token del sito, ma un mestiere diverso: qui si lavora. Piu' denso, gerarchia netta, tabelle con intestazione, e gli stati colorati per esito (verde/ambra/rosso) invece che tutti uguali. ════════════════════════════════════════════════════════════════ */ .admin-body { min-height: 100dvh; display: grid; grid-template-columns: 236px minmax(0, 1fr); background: var(--cream); } /* ── Colonna di sinistra ─────────────────────────────────────────── */ .admin-sidebar { position: sticky; top: 0; align-self: start; height: 100dvh; display: flex; flex-direction: column; padding: 26px 18px 20px; color: var(--cream-solid); background: var(--ink-solid); } .admin-sidebar .brand { margin: 0 8px 30px; color: var(--on-solid); } .admin-sidebar .brand strong { font-size: 19px; } .admin-sidebar .brand small { color: rgba(255,255,255,.5); } .admin-sidebar nav { display: grid; gap: 1px; } .admin-sidebar nav a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 7px; color: rgba(255,255,255,.62); font-size: 13px; font-weight: 500; transition: background .16s ease, color .16s ease; } .admin-sidebar nav a:hover { color: var(--on-solid); background: rgba(255,255,255,.06); } .admin-sidebar nav a[aria-current="page"] { color: var(--ink); background: var(--sand); font-weight: 600; } /* Le due voci di servizio si staccano dalle sezioni vere. */ .admin-sidebar nav a:nth-last-child(2) { margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); border-radius: 0 0 7px 7px; } .pallino { min-width: 19px; padding: 2px 6px; border-radius: 999px; color: var(--ink); background: var(--sand); font-size: 10.5px; font-weight: 700; text-align: center; } .admin-sidebar nav a[aria-current="page"] .pallino { color: var(--cream-solid); background: var(--ink-solid); } .admin-archivio { margin: auto 8px 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.42); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } /* ── Area di lavoro ──────────────────────────────────────────────── */ .admin-main { min-width: 0; padding: 26px clamp(20px, 3vw, 44px) 72px; } .admin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; } .admin-head h1 { margin: 0; font-size: clamp(27px, 2.6vw, 34px); letter-spacing: -.03em; } .admin-main h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; } .admin-hint { margin: 6px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.6; } /* Riquadri: fondo bianco, un filetto, nessuna ombra. */ .admin-panel { margin-bottom: 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); overflow: clip; } .admin-panel > h2 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: rgba(232,222,209,.28); } .admin-panel > h2 .periodo { color: var(--muted); font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .admin-panel > p, .admin-panel > form, .admin-panel > .admin-table, .admin-panel > .agenda, .admin-panel > div { padding-inline: 20px; } .admin-panel > p { margin: 14px 0; color: var(--muted); font-size: 12.5px; line-height: 1.65; } .admin-panel > form { padding-block: 18px; } .admin-panel > .admin-table, .admin-panel > .agenda { padding-bottom: 4px; } /* Numeri in evidenza */ .admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; margin-bottom: 22px; } .stat { padding: 15px 18px 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); } .stat span { display: block; color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } .stat strong { display: block; margin-top: 8px; font: 500 30px/1 var(--serif); font-variant-numeric: tabular-nums; } /* ── Statistiche ─────────────────────────────────────────────────── */ /* Le barre sono SVG: le altezze arrivano come attributi, perche' la CSP del sito non permette gli stili scritti dentro il tag. */ .admin-due { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; } .admin-due .admin-panel { margin-bottom: 0; } .grafico { display: block; width: calc(100% - 40px); height: 168px; margin: 20px; } .grafico .barra { fill: var(--sage-dark); transition: fill .16s ease; } .grafico .barra:hover { fill: var(--accento); } .grafico .barra.vuota { fill: var(--line); } .grafico-giorni { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; list-style: none; margin: 0; padding: 0 20px 18px; } .grafico-giorni li { display: grid; gap: 3px; text-align: center; } .grafico-giorni .gg { color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; } .grafico-giorni .nn { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .lista-barre { list-style: none; margin: 0; padding: 4px 20px 20px; } .lista-barre li { display: grid; grid-template-columns: minmax(0, 1fr) 104px 38px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); } .lista-barre li:last-child { border-bottom: 0; } .lista-barre .voce { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; } .lista-barre .num { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } .barra-riga { width: 100%; height: 6px; } .barra-riga .barra { fill: var(--sage-dark); } /* Lo stato della sincronizzazione: un filetto colorato dice come sta. */ .stato-sync { border-left: 3px solid var(--line); background: rgba(232,222,209,.2); } .admin-panel > .stato-sync { margin: 0; padding: 13px 20px; } .stato-sync.ok { border-left-color: var(--sage-dark); } .stato-sync.attesa { border-left-color: #8a5a12; } .stato-sync.spento { border-left-color: var(--danger); } /* ── Agenda del giorno ───────────────────────────────────────────── */ .agenda { list-style: none; margin: 0; padding: 0; } .agenda li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--line); } .agenda li:last-child { border-bottom: 0; } .agenda-ora { font: 500 20px/1.2 var(--serif); font-variant-numeric: tabular-nums; } .agenda-corpo { font-size: 12.5px; line-height: 1.65; } .agenda-corpo strong { font-size: 13.5px; } .agenda-corpo em { color: var(--muted); } /* ── Tabelle ─────────────────────────────────────────────────────── */ .admin-table { display: grid; } .admin-table > .riga-titoli { display: grid; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--ink); color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .admin-table > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; line-height: 1.65; } .admin-table > div:last-child { border-bottom: 0; } .admin-table > div:not(.riga-titoli):hover { background: rgba(232,222,209,.16); } .admin-table p { margin: 5px 0 0; color: var(--muted); } .admin-table a { color: var(--link); } .booking-admin > div { grid-template-columns: 1.15fr 1fr 124px 1.3fr; } .messaggi-admin > div { grid-template-columns: .95fr 1.7fr 104px .95fr; } .servizi-admin > div { grid-template-columns: .95fr 1.35fr 96px 1fr; } .recensioni-admin > div { grid-template-columns: 1fr 1.85fr 96px .95fr; } /* Dove non c'e' un'azione, si dice perche': una cella vuota sembra un guasto. */ .admin-inerte { color: var(--muted); font-size: 11px; font-style: italic; } .admin-vuoto { padding: 26px 20px; color: var(--muted); font-size: 12.5px; } /* ── Stati: il colore dice com'e' andata ─────────────────────────── */ .badge { width: fit-content; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; } .badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .badge-attesa { color: #8a5a12; background: rgba(251,191,36,.14); border-color: rgba(138,90,18,.3); } .badge-ok { color: #2f6b3d; background: rgba(74,222,128,.13); border-color: rgba(47,107,61,.28); } .badge-no { color: var(--danger); background: rgba(155,51,51,.09); border-color: rgba(155,51,51,.28); } .badge-fatto { color: var(--muted); background: var(--velo); border-color: var(--line); } .tag-canale { display: inline-block; margin-left: 4px; padding: 2px 7px; border-radius: 999px; color: var(--on-solid); background: var(--accento); font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; } /* ── Schede di navigazione ───────────────────────────────────────── */ .admin-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 20px; border-bottom: 1px solid var(--line); } .admin-tabs a { padding: 10px 15px; margin-bottom: -1px; color: var(--muted); font-size: 12.5px; font-weight: 600; border-bottom: 2px solid transparent; } .admin-tabs a:hover { color: var(--ink); } .admin-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accento); } /* ── Filtri ──────────────────────────────────────────────────────── */ .admin-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); } .admin-filters input, .admin-filters select { width: auto; min-height: 38px; padding: 8px 11px; font-size: 12.5px; } .admin-filters input[name="q"] { min-width: 230px; flex: 1 1 230px; } /* ── Moduli ──────────────────────────────────────────────────────── */ .admin-form { display: grid; gap: 15px; max-width: none; } .admin-form label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .admin-form input, .admin-form select, .admin-form textarea { min-height: 42px; padding: 10px 12px; font-size: 13.5px; text-transform: none; letter-spacing: normal; } .admin-form textarea { min-height: 58px; } .admin-form .check { font-size: 12.5px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink); } .settings-form { max-width: 720px; } .admin-gruppo { display: grid; gap: 15px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); } .admin-gruppo h2 { margin: 0; font-size: 16px; color: var(--accento-ink); letter-spacing: .04em; text-transform: uppercase; } /* Due colonne dove i campi sono corti. */ .admin-form .grid-2 { gap: 15px; } .availability-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 12px; align-items: end; padding: 14px 0; border-bottom: 1px solid var(--line); } .availability-row label { font-size: 9.5px; } .availability-row input, .availability-row select { min-height: 38px; padding: 8px 10px; font-size: 12.5px; } /* ── Azioni ──────────────────────────────────────────────────────── */ .admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; } .admin-actions button:not(.button), .admin-form button:not(.button) { min-height: 32px; padding: 6px 11px; border: 1px solid var(--field); border-radius: 7px; color: var(--ink); background: var(--white); font: 600 11.5px/1 var(--sans); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } .admin-actions button:not(.button):hover { border-color: var(--sage-dark); background: var(--sage-soft); } .admin-actions button[value="delete"]:hover { color: var(--on-solid); border-color: var(--danger); background: var(--danger); } .admin-actions button[disabled] { opacity: .32; cursor: not-allowed; } .admin-actions a.button { min-height: 32px; padding: 6px 12px; border-radius: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; text-transform: none; } .admin-actions textarea { min-height: 40px; } /* Avvisi che riguardano la pagina intera */ .admin-avviso { margin: 0 0 20px; padding: 14px 16px; border: 1px solid rgba(180,83,9,.3); border-left-width: 3px; border-radius: 8px; background: rgba(251,191,36,.09); color: var(--ink); font-size: 12.5px; line-height: 1.65; } .admin-avviso code { padding: 1px 5px; border-radius: 4px; background: var(--velo); font-size: 11.5px; } .admin-main > .form-status { margin-bottom: 18px; padding: 11px 15px; border: 1px solid rgba(82,98,79,.28); border-radius: 8px; background: rgba(230,235,227,.6); font-size: 12.5px; } .admin-main > .form-status.error { border-color: rgba(155,51,51,.3); background: rgba(155,51,51,.07); } /* ── Accesso ─────────────────────────────────────────────────────── */ .login-page { min-height: 100dvh; display: grid; place-items: center; padding: 20px; background: var(--sand); } .login-card { width: min(430px, 100%); padding: 36px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); } .login-card h1 { margin: 24px 0 16px; font-size: 28px; } .login-card > p { margin-bottom: 20px; color: var(--muted); font-size: 12.5px; line-height: 1.65; } .login-card label { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .login-card input { min-height: 44px; font-size: 14px; } .login-card .button { margin-top: 6px; } /* ── Adattamento ───────────────────────────────────────────────── Tre soglie, sempre le stesse: 1080 (la gabbia si stringe), 860 (una colonna sola e menu a tendina), 560 (tutto impilato). */ @media (max-width: 1080px) { .hero-copy { grid-column: 1 / 8; } .hero-figure { grid-column: 8 / -1; } .rule-head .rule-title { grid-column: 2 / -1; } .rule-head .rule-note { grid-column: 2 / -1; margin-top: 16px; } .rule-head-center .rule-title { grid-column: 2 / 12; } .rule-head-center .rule-note { grid-column: 2 / 12; } .spread-figure { grid-column: 1 / 7; } .spread-body { grid-column: 7 / -1; } .baby-body { grid-column: 2 / 12; } .studio-body { grid-column: 1 / 6; } .studio-map { grid-column: 6 / -1; } .faq-aside { grid-column: 1 / 5; } .faq-list { grid-column: 5 / -1; } .booking-aside, .contact-body { grid-column: 1 / 5; } .booking-form, .contact-form { grid-column: 5 / -1; } .split-figure { grid-column: 1 / 6; } .split-body { grid-column: 6 / -1; } .page-hero-copy { grid-column: 1 / -1; } .page-hero-note { grid-column: 1 / -1; margin-top: 20px; } .closing h2 { grid-column: 1 / -1; } .closing-actions { grid-column: 1 / -1; } .claim-body { grid-column: 1 / 8; } .claim-actions { grid-column: 8 / -1; } .footer-intro { grid-column: 1 / 5; } .footer-nav { grid-column: 6 / 9; } .footer-contact { grid-column: 9 / -1; } .index-after p { grid-column: 1 / 9; } } @media (max-width: 860px) { .nav { min-height: 78px; } .site-header.is-scrolled .nav { min-height: 70px; } .nav-toggle { display: block; } /* 🔴 Nel menu a tendina le voci sono a tutta larghezza: senza questa riga il gruppo si stira con loro, e il pulsante della lingua diventa una barra da 347px con dentro «EN» in mezzo. Qui torna una riga sola, allineata a sinistra, sotto un filo orizzontale invece che verticale. */ .nav-links .nav-utility { align-self: flex-start; margin-top: 18px; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); gap: 10px; } .nav-links .nav-utility .lingua-switch { width: auto; } .nav-links { position: absolute; inset: 78px 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px clamp(14px, 3vw, 52px) 26px; border-bottom: 1px solid var(--line); background: var(--cream); box-shadow: 0 20px 40px var(--line); } .nav-links.is-open { display: flex; } .nav-links > a:not(.button) { padding: 16px 0; border-bottom: 1px solid var(--line); } .nav-links > a:not(.button)::after { display: none; } .nav-cta { margin-top: 18px; } /* Una colonna sola: ogni blocco della gabbia occupa tutta la riga. */ .hero-copy, .hero-figure, .hero-baseline > *, .claim-body, .claim-actions, .rule-head .rule-num, .rule-head .rule-title, .rule-head .rule-note, .rule-head-center .rule-title, .rule-head-center .rule-note, .spread-figure, .spread-body, .baby-body, .studio-body, .studio-map, .faq-aside, .faq-list, .booking-aside, .booking-form, .contact-body, .contact-form, .split-figure, .split-body, .page-hero-copy, .page-hero-note, .closing h2, .closing-actions, .footer-intro, .footer-nav, .footer-contact, .index-after p, .index-after a { grid-column: 1 / -1; } /* A colonna singola lo sconfinamento diventa a piena larghezza, ma la didascalia rientra nella gabbia: allineata al bordo dello schermo sembrerebbe un errore. */ .hero-figure { margin-inline: calc((100% - 100vw) / 2); } .hero-figure .caption { padding-inline: clamp(14px, 3vw, 52px); max-width: none; } /* Le regole :nth-child della riga di metadati sono piu' specifiche di `.hero-baseline > *`: qui vanno annullate una per una. */ .hero-baseline > *:nth-child(1), .hero-baseline > *:nth-child(2), .hero-baseline > *:nth-child(3) { grid-column: 1 / -1; justify-self: start; } .baby-figure { margin-left: calc((100% - 100vw) / 2); margin-right: calc((100% - 100vw) / 2); } .hero-grid { row-gap: 34px; } /* L'altezza la decide l'arco, non l'immagine: e' l'arco che ritaglia. */ .hero-figure .arch { height: clamp(340px, 68vw, 480px); } .rule-head .rule-num { margin-bottom: 10px; } .rule-head .rule-note { margin-top: 18px; } .faq-aside, .booking-aside, .split-figure { position: static; } .index-after a { justify-self: start; } .closing-actions, .claim-actions { justify-items: start; } .claim-body p:not(.claim-label) { max-width: none; } .footer-bottom { margin-top: 40px; } } @media (max-width: 560px) { .brand strong { font-size: 18px; } .hero { padding-top: 26px; } .hero h1 { font-size: clamp(40px, 12.5vw, 56px); } .hero-intro { font-size: 14.5px; } .actions { align-items: stretch; flex-direction: column; } .actions .button { width: 100%; } .index-row { grid-template-columns: 2.6rem minmax(0, 1fr); row-gap: 12px; } .index-meta { grid-column: 2; justify-items: start; text-align: left; display: flex; align-items: baseline; gap: 12px; } .index-arrow { display: none; } .index-row:hover { padding-left: 0; } .value-list p, .steps > li { grid-template-columns: 2.4rem 1fr; } :root { --arch: clamp(60px, 22vw, 120px); --slab: 20px; } .claim, .studio { margin-inline: 8px; } .meta-list div { grid-template-columns: 1fr; gap: 4px; } .grid-2 { grid-template-columns: 1fr; } .grafico-giorni .gg { font-size: 8.5px; } .lista-barre li { grid-template-columns: minmax(0, 1fr) 64px 32px; gap: 10px; } .cards { grid-template-columns: 1fr; } .card, .mini-card, .summary-box { padding: 24px; } .avviso-consenso { bottom: 12px; grid-template-columns: 1fr; gap: 15px; padding: 19px; } /* 🔴 In colonna, non «1fr 1fr»: i bottoni sono tre, e su due colonne il terzo resta spaiato con una cella vuota accanto. */ .avviso-azioni { display: flex; flex-direction: column; align-items: stretch; } .avviso-azioni .button { width: 100%; padding-inline: 10px; } .whatsapp-float { right: 12px; bottom: 12px; } } @media (max-width: 980px) { .admin-body { grid-template-columns: 1fr; } .admin-sidebar { position: static; height: auto; padding: 18px 16px; } .admin-sidebar .brand { margin-bottom: 18px; } .admin-sidebar nav { display: flex; flex-wrap: wrap; gap: 4px; } .admin-sidebar nav a { padding: 8px 12px; } .admin-sidebar nav a:nth-last-child(2) { margin-top: 0; padding-top: 8px; border-top: 0; border-radius: 7px; } .admin-archivio { margin: 14px 0 0; } /* Le tabelle diventano schede: l'intestazione non ha piu' senso. */ .admin-table > .riga-titoli { display: none; } .admin-table > div, .booking-admin > div, .messaggi-admin > div, .servizi-admin > div { grid-template-columns: 1fr; gap: 8px; } .availability-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agenda li { grid-template-columns: 62px 1fr; } .agenda li .badge { grid-column: 2; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } .js .reveal { opacity: 1 !important; transform: none !important; } .hero-copy > *, .hero-figure { animation: none !important; } }