/* **La velatura cinematografica.** Decisa il 10 agosto 2026 sulle foto tonde delle categorie (views/cura_area.php) e ripresa dall'owner il 16 settembre: *«devi mettere sempre la velatura standard che avevamo deciso per effetto cinema»*. Sta scritta **una volta sola, qui**: una fotografia caricata dalla gestione entra nel mondo scuro del sito senza che nessuno debba ricordarsi di velarla a mano. La stessa riga e' ricopiata nell'anteprima della pagina «Il sito — testi e immagini» (views/admin/pagine.php, .fuoco img), che deve mostrare quello che si vedra' davvero. Se cambia qui, cambia anche li'. */ :root{ --ap5-velatura:saturate(.72) contrast(1.06) brightness(.82) sepia(.12); /* **Lo stesso colore, dove il buio ce l'ha gia' il fondo.** Una fotografia che sta al 32% di opacita' sopra il nero e' gia' scura per conto suo: aggiungerci anche `brightness(.82)` la fa sparire. Qui resta la stessa tinta — la saturazione, il contrasto, il caldo — senza il secondo velo di buio. Serve alle scene delle pagine categoria; l'apertura e le foto usano quella sopra. */ --ap5-velatura-fondo:saturate(.72) contrast(1.06) sepia(.12); /* **Quanto e' alta una fascia del sito, una volta per tutte.** L'owner, il 21 settembre 2026: *«la dimensione corretta di tutti i banner dovrebbe essere come sezione skin scanner»*, e prima: *«le immagini sono enormi»*. Aveva ragione due volte. Ogni fascia aveva un'altezza sua scritta a mano — la SPA e il Viso 780, la stagione 660, il regalo 860 — e la Skin Scanner, l'unica su cui ero intervenuto, 380-560. Risultato: fasce alte come uno schermo intero, con la fotografia enorme e il testo perso in mezzo. Adesso la misura e' **una sola e sta qui**: cambiandola qui cambiano tutte, e non si puo' piu' dimenticarne una. **Il 22 settembre 2026 questo numero era sbagliato, e si vedeva.** L'owner, dopo l'installazione: *«in home nei giorni scorsi c'erano piu' banner con foto che portavano alle pagine, come mai spariscono?»*. Nessuna fascia era sparita — misurate una per una ci sono tutte, e una in piu' («Visita il centro»). Era **l'altezza**: la Skin Scanner, la fascia che l'owner aveva indicato come misura giusta, viene alta **800px** perche' e' il suo testo a decidere; le altre, appese a questo numero, uscivano a **475px**. Quaranta per cento piu' basse del metro che dovevano seguire. Una fotografia in una striscia cosi' non racconta niente, e dall'alto della pagina sembra che il banner non ci sia. Adesso il numero punta davvero dove diceva l'owner: su uno schermo normale una fascia esce fra i 700 e gli 800 pixel, come la Skin Scanner. Sotto, `clamp` la accorcia da sola invece di mangiarsi lo schermo. **Il minimo resta basso di proposito.** Rilievo della revisione: con un minimo alto, una finestra corta — mezzo schermo, un portatile piccolo — si sarebbe ritrovata una fascia piu' alta della finestra stessa, che e' il difetto di partenza tornato dall'altra parte. Sotto i 568 pixel di finestra comanda il 420, e la fascia sta dentro lo schermo. Sul telefono non entra nemmeno in gioco: li' comanda `--ap5-fascia-telefono`, che la fascia se la tiene a 300. [[dle-provare-effetto-non-attributo]] */ --ap5-fascia:clamp(420px,74vh,800px); /* **«Rimpicciolisci» vuol dire fascia piu' bassa, non foto piu' piccola in mezzo al vuoto.** L'owner, il 21 settembre 2026: *«se le riduco ora lo spazio dello sfondo resta cosi' con foto anche piccola. deve trasformarsi tutta la sezione»*. La pagina mette questo numero sulla sezione quando la fotografia e' sotto il 100%, e la fascia si accorcia con lei. */ --ap5-fascia-telefono:300px; /* **La scena di una pagina categoria e' piu' alta di una fascia della home, e c'e' un motivo.** Nella home la fotografia sta in una colonna sua, accanto al testo: si vede tutta, a piena luce. Nelle pagine categoria invece la fotografia **sta dietro** al testo, velata al 32%: e' un fondo, e un fondo per raccontare qualcosa ha bisogno di spazio. Il 21 settembre 2026 le scene sono passate da `90vh` — 1108 pixel su un monitor alto, con le fotografie sdraiate ingrandite due volte e mezza — alla misura della home. L'owner, guardandole: *«forse adesso i banner dei trattamenti sono un po' troppo bassi, le immagini sotto non si vedono quasi piu'»*. Aveva ragione: da un eccesso all'altro. Questa e' la via di mezzo, ed e' una misura sua: circa **tre quarti** di quello che era. La fotografia torna a vedersi e l'ingrandimento resta lontano dal 2,3 di prima. */ --ap5-scena:clamp(460px,66vh,780px); --ap5-ink:#0e0d0c; --ap5-ink-soft:#171513; --ap5-paper:#f3efe9; --ap5-paper-soft:#e8e0d6; --ap5-ivory:#fffaf3; --ap5-champagne:#c7ab82; --ap5-bronze:#95704d; --ap5-muted:#7a7169; --ap5-line:rgba(255,255,255,.13); --ap5-line-dark:rgba(14,13,12,.14); --ap5-max:1320px; --ap5-radius:24px; --ap5-shadow:0 34px 90px rgba(0,0,0,.24) } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--ap5-ink);color:var(--ap5-ivory);font-family:Arial,Helvetica,sans-serif;line-height:1.65} img{display:block;max-width:100%} a{color:inherit} h1,h2,h3,p{margin-top:0} h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;line-height:1.04} h1{font-size:clamp(3.25rem,7.8vw,7.9rem);letter-spacing:-.05em} /* **I titoli delle fasce sono quelli della Skin Scanner.** L'owner, il 21 settembre 2026: *«non c'entra skin scanner, quella e' l'unica visualizzazione corretta, le altre hanno tutte immagini e testi giganti»*. Ed era vero: il titolo di una fascia arrivava a **5,25rem — 84 pixel** — mentre la Skin Scanner, l'unica dove ero intervenuto, stava a 2,4rem. Un titolo alto quanto mezza fotografia costringeva la fascia a essere alta il doppio, ed e' da li' che nascevano sia i testi giganti sia le immagini enormi: le due cose erano lo stesso difetto. */ h2{font-size:clamp(1.7rem,2.6vw,2.4rem);letter-spacing:-.02em;line-height:1.15} h3{font-size:clamp(1.5rem,2.4vw,2.45rem)} p{font-size:clamp(1rem,1.15vw,1.16rem)} .ap5-shell{width:min(calc(100% - 42px),var(--ap5-max));margin:auto} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .skip-link{position:fixed;top:10px;left:10px;z-index:999;background:#fff;color:#111;padding:10px 14px;transform:translateY(-160%)} .skip-link:focus{transform:none} .ap5-eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:700;color:var(--ap5-champagne)} .ap5-lead{font-size:clamp(1.2rem,1.8vw,1.65rem);color:#5b544e} .ap5-section{padding:clamp(90px,10vw,160px) 0} .ap5-dark{background:var(--ap5-ink-soft)} .ap5-section-head{max-width:920px;margin-bottom:54px} .ap5-section-head--center{text-align:center;margin-inline:auto} .ap5-header{position:fixed;inset:0 0 auto;z-index:100;padding:20px 0;color:#fff;transition:.4s} .ap5-header.is-scrolled{background:rgba(14,13,12,.95);backdrop-filter:blur(18px);box-shadow:0 1px 0 rgba(255,255,255,.1)} .ap5-header__inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px} .ap5-brand img{width:176px} .ap5-nav{display:flex;justify-content:center;gap:23px} .ap5-nav a,.ap5-phone{text-decoration:none} .ap5-nav a{position:relative;font-size:.8rem;letter-spacing:.11em;text-transform:uppercase} .ap5-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:1px;background:var(--ap5-champagne);transition:.35s} .ap5-nav a:hover:after{right:0} .ap5-phone{display:flex;flex-direction:column;align-items:flex-end;font-size:.72rem;line-height:1.3} .ap5-phone strong{font-size:.9rem} .ap5-menu-toggle{display:none;border:0;background:none;color:inherit;padding:8px} .ap5-menu-toggle span{display:block;width:24px;height:1px;background:currentColor;margin:5px} .ap5-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#070706} .ap5-hero__media,.ap5-hero__shade,.ap5-hero__beam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ap5-hero__shade{background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.8))} .ap5-hero__beam{background:radial-gradient(circle at 72% 34%,rgba(255,220,170,.2),transparent 22%),radial-gradient(circle at 48% 75%,rgba(255,255,255,.07),transparent 35%);mix-blend-mode:screen;animation:ap5Beam 11s ease-in-out infinite alternate} @keyframes ap5Beam{from{transform:translate3d(-1.5%,0,0) scale(1)}to{transform:translate3d(1.5%,-1%,0) scale(1.03)}} .ap5-hero__content{position:relative;z-index:2;padding-bottom:10vh} .ap5-hero__lead{max-width:760px;font-size:clamp(1.1rem,1.7vw,1.5rem);color:rgba(255,255,255,.82)} .ap5-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} /* **Un pulsante vero non e' un link.** L'owner, il 17 settembre 2026, guardando i riquadri dei massaggi: «leggi sul fondo bianco non si vede». Il difetto: queste regole erano nate per i ``, che non hanno un fondo loro; su un `