/* RiminiScenze Olistiche — sistema di design condiviso OGNI valore è ancorato al materiale reale del brand, mai a un default: --ink = blu-teal profondo della SUA fotografia d'acqua in home --rose = magenta del SUO wordmark --leaf = verde-lime pastello delle SUE sezioni (non il "verde salvia", che è il default 2026) --paper = off-white con bias teal derivato da --ink (non il crema #faf8f5, idem default) Font: Newsreader — Fraunces e Instrument Serif sono nominati esplicitamente in vault/knowledge-ai-website-tells come i serif-default della "seconda ondata" AI (New Yorker 2026). Newsreader ha ottica variabile e un disegno editoriale, fuori da quel cluster. */ /* I font NON si caricano da qui con @import: obbligherebbe il browser a scaricare prima questo CSS, poi scoprire l'import, poi il font — tre viaggi in fila. Sono in con preconnect. */ :root{ --font-display:"Newsreader",Georgia,"Times New Roman",serif; --font-body:"Archivo",ui-sans-serif,system-ui,-apple-system,sans-serif; --ink:#0F2B36; --ink-soft:#3C5763; /* spark.earth direction: bianco/neutro dominante — paper alzato di luminosità ma con lo stesso bias teal di prima (non grigio puro, non crema): resta ancorato al brand, si sente solo meno. */ --paper:#F8FAF9; --surface:#FFFFFF; --rose:#A8355F; --rose-d:#832646; --leaf:#C2D2A4; --leaf-pale:#EBF1DF; /* alias storici: alcune regole/pagine usano ancora --sage* */ --sage:#C2D2A4; --sage-pale:#EBF1DF; --gold:#C9A15A; /* accento caldo per hover/decorazioni al posto del pastello salvia: terra/oro, non pastello, come richiesto dalla direzione spark.earth — il verde resta solo per il badge "live" (stato). */ --wash:color-mix(in srgb, var(--gold) 11%, var(--surface)); --line:rgba(15,43,54,.14); --shadow:0 20px 50px -28px rgba(15,43,54,.35); --radius-s:3px; --radius-m:7px; --radius-l:16px; --ease-expo:cubic-bezier(.16,1,.3,1); /* un solo valore per il margine laterale: .wrap lo usa come padding, .testi-bleed come margine negativo. Se divergono, il full-bleed sborda invece di arrivare esatto al bordo. */ --gutter:clamp(20px,4vw,48px); } *{box-sizing:border-box} /* Guardia globale: nessun elemento decorativo che sporge (spirali, gradienti) deve poter creare scroll orizzontale. Difesa a livello di documento, non solo sui singoli contenitori. */ html,body{overflow-x:clip;max-width:100%} html{scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; } ::selection{background:var(--rose);color:#fff} img{max-width:100%;display:block} a{color:inherit} button{font:inherit} h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.05; letter-spacing:-.01em; text-wrap:balance; margin:0; } h1{font-size:clamp(2.2rem,5vw,4.2rem);font-weight:400;letter-spacing:-.02em} h2{font-size:clamp(1.6rem,3.2vw,2.6rem)} h3{font-size:clamp(1.15rem,2vw,1.5rem)} p{margin:0 0 1rem;max-width:62ch} .lead{font-size:1.15rem;color:var(--ink-soft);max-width:56ch} .eyebrow{ font-family:"Archivo";font-size:.72rem;letter-spacing:.22em;text-transform:uppercase; color:var(--rose);font-weight:600;display:inline-flex;align-items:center;gap:.6rem; } .eyebrow::before{content:"";width:22px;height:1px;background:var(--rose)} /* niente corsivo: "serif corsivo su accento" è, insieme a crema+salvia, il pacchetto-default della seconda ondata AI. L'accento lo porta il colore del brand, che è già distintivo di suo. */ em.accent{font-style:normal;color:var(--rose);font-family:var(--font-display)} .wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)} .wrap-narrow{max-width:820px;margin:0 auto;padding:0 var(--gutter)} /* ===== Nav ===== */ .site-nav{ position:sticky;top:0;z-index:40; background:color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .site-nav .row{display:flex;align-items:center;justify-content:space-between;padding:.9rem var(--gutter);gap:1.5rem} .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);min-width:0} /* FIX (logo ufficiale, 19/08): l'SVG ricostruito a mano aveva un viewBox quadrato 120x120 forzato a 30x30; l'immagine reale (estratta dal PDF vettoriale del brand) ha proporzioni leggermente diverse (240x213) — width fisso + height:auto invece di 30x30 fisso, altrimenti l'immagine vera verrebbe schiacciata verticalmente dell'8% circa. */ .brand .mark{height:40px;width:auto;flex-shrink:0} /* Il nome e' l'immagine che ha mandato lei (22/09), non piu' testo: niente ellissi, niente pezzi nascosti. Si rimpicciolisce, non si taglia. flex-shrink perche' su uno schermo stretto ceda prima il nome del bottone del menu, e max-width perche' non superi mai meta' barra. */ .brand .word-img{height:34px;width:auto;max-width:min(60vw,240px);object-fit:contain;object-position:left center;flex-shrink:1;min-width:0} @media (max-width:420px){ /* Fino al 22/09 qui si nascondeva " Olistiche" e si tagliava il resto con l'ellissi: dal telefono di Jyoti si leggeva "RiminiScen…". Ora il nome e' un'immagine e si scala intera. Lo spazio in barra e' conteso: "Prenota" e il bottone del menu ne prendono 143px fissi, e quel che resta e' del nome. Qui si stringe tutto il resto — i vuoti, non il nome — perche' a 320px (il telefono piu' piccolo ancora in giro) "OLISTICHE" resti leggibile. */ .brand .mark{height:34px} .brand .word-img{height:28px} .brand{gap:.35rem} .site-nav .row{gap:.5rem} .nav-cta{padding:.55rem .85rem;font-size:.86rem} } .nav-links{display:flex;align-items:center;gap:1.9rem;list-style:none;margin:0;padding:0} .nav-links a{ text-decoration:none;font-size:.92rem;color:var(--ink-soft);position:relative; transition:color .2s var(--ease-expo); } .nav-links a:hover,.nav-links a.active{color:var(--rose)} .nav-links .has-drop{position:relative} .dropdown{ position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%); background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m); box-shadow:var(--shadow);padding:.5rem;min-width:220px; opacity:0;visibility:hidden;translate:0 6px; transition:opacity .22s var(--ease-expo),translate .22s var(--ease-expo),visibility .22s; } .has-drop:hover .dropdown,.has-drop:focus-within .dropdown{opacity:1;visibility:visible;translate:0 0} .dropdown a{display:block;padding:.55rem .8rem;border-radius:var(--radius-s);color:var(--ink)} .dropdown a:hover{background:var(--wash);color:var(--rose-d)} /* ===== Tendina a due livelli ===== Prima la tendina di Discipline conteneva, di fila, sette discipline PIÙ tutte le loro schede: venti voci in colonna, più alte dello schermo di un portatile, e senza modo di scorrerle (Jyoti, 14/09: "non riesco a scorrere il menù fino in fondo… i livelli di Reiki compaiono solo quando vado su Reiki"). Ora il primo livello sono le discipline; le schede si aprono di fianco. Il pulsante "›" serve al dito e alla tastiera: col mouse basta passarci sopra. */ .drop-item{position:relative;display:flex;align-items:center} .drop-item > a{flex:1} .apri-sub{ display:none;background:none;border:0;cursor:pointer;line-height:1; padding:.4rem .5rem;color:var(--ink-soft);font-size:1.1rem;border-radius:var(--radius-s); } .apri-sub:hover{color:var(--rose-d);background:var(--wash)} .drop-item.has-sub > a::after{content:"›";margin-left:.5rem;color:var(--ink-soft)} .sub-dropdown{ position:absolute;top:-.5rem;left:100%;margin-left:.3rem; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m); box-shadow:var(--shadow);padding:.5rem;min-width:240px; opacity:0;visibility:hidden;translate:6px 0; transition:opacity .2s var(--ease-expo),translate .2s var(--ease-expo),visibility .2s; } .drop-item.has-sub:hover > .sub-dropdown, .drop-item.has-sub:focus-within > .sub-dropdown, .drop-item.has-sub.aperto > .sub-dropdown{opacity:1;visibility:visible;translate:0 0} /* Su uno schermo stretto il secondo livello, aperto di fianco, uscirebbe dalla finestra: lì si apre sotto, rientrato, e solo quando lo si chiede — non tutto insieme come prima. */ @media (max-width:1200px){ .drop-item{flex-wrap:wrap} .apri-sub{display:block} .drop-item.has-sub > a::after{content:none} .sub-dropdown{ position:static;width:100%;min-width:0;margin:0;padding:.2rem 0 .4rem .9rem; border:0;box-shadow:none;background:transparent;translate:0 0; display:none;opacity:1;visibility:visible; } .drop-item.has-sub:hover > .sub-dropdown{display:none} .drop-item.has-sub.aperto > .sub-dropdown, .drop-item.has-sub:focus-within > .sub-dropdown{display:block} } .btn{ display:inline-flex;align-items:center;gap:.5rem; padding:.7rem 1.4rem;border-radius:999px;font-size:.9rem;font-weight:600; text-decoration:none;cursor:pointer;border:1px solid transparent; transition:background .2s var(--ease-expo),color .2s var(--ease-expo),border-color .2s var(--ease-expo),transform .2s var(--ease-expo); min-height:44px; } .btn:hover{transform:translateY(-1px)} .btn-primary{background:var(--rose);color:#fff} .btn-primary:hover{background:var(--rose-d)} .btn-ghost{border-color:var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--rose);color:var(--rose)} .btn-line{color:var(--rose);padding-left:0} .nav-cta{margin-left:.4rem} .nav-burger{display:none} @media (max-width:960px){ .nav-links{display:none} .nav-burger{display:flex;background:none;border:0;cursor:pointer;padding:.4rem} /* backdrop-filter su un antenato crea un containing block: il position:fixed del menu aperto si ancorerebbe al nav (64px) invece che al viewport, uscendo alto 44px invece che a schermo pieno. Su mobile il blur non serve — nav opaco e fixed torna a funzionare. */ .site-nav{backdrop-filter:none;background:var(--paper)} } /* ===== Sezioni ===== Il ritmo editoriale spark.earth (fino a 7.5rem per lato) sommato su ~9 sezioni produceva pagine troppo lunghe, troppo scroll verticale anche da desktop. Compattato mantenendo comunque respiro fra le sezioni, non azzerato. */ section{padding:clamp(2.6rem,5vw,4.2rem) 0} .section-line{border-top:1px solid var(--line)} .tone-ink{background:var(--ink);color:var(--paper)} .tone-ink .eyebrow{color:var(--gold)} .tone-ink .lead{color:color-mix(in srgb, var(--paper) 76%, transparent)} .tone-sage{background:var(--sage-pale)} /* ===== Hero ===== Redesign (19/08): il video non è più sfondo a piena pagina — vive in un pannello proprio (.hero-visual-frame) affiancato al testo, con GSAP che lo fa crescere leggermente mentre si scrolla oltre l'hero (motion.js sezione 8). Lo sfondo dell'hero torna a essere il gradiente "water" (prima invisibile: viveva su .hero-media che il video opaco copriva per intero) — ora è davvero a vista intorno al pannello. */ /* min-height ridotto (era 92vh): un max-height evita che diventi enorme sui monitor molto alti. */ .hero{position:relative;min-height:70vh;max-height:760px;display:flex;align-items:center;overflow:hidden;background:var(--ink)} .hero.water{background: radial-gradient(120% 90% at 18% 8%, rgba(201,161,90,.35), transparent 55%), radial-gradient(140% 110% at 82% 100%, rgba(168,53,95,.4), transparent 60%), linear-gradient(160deg, #0b232c 0%, #123744 27%, #0F2B36 55%, #1c4a54 100%);} /* spirale di brand in filigrana dietro il pannello video, stessa tecnica di .page-hero .spiral-bg (parallax in motion.js sezione 2, esteso a questo selettore) */ .hero-spiral{position:absolute;top:-8%;right:2%;width:min(320px,32vw);opacity:.16;z-index:0;color:var(--gold);pointer-events:none} /* padding verticale simmetrico — top leggermente più leggero per compensare la nav sticky sopra */ .hero-inner{position:relative;z-index:1;width:100%;max-width:1180px;margin:0 auto; padding:clamp(1.5rem,3vw,2.5rem) var(--gutter) clamp(2rem,4vw,3rem); display:flex;flex-direction:column;gap:2.4rem} .hero-text{color:#fff} .hero-inner .eyebrow{color:var(--gold)} .hero h1{color:#fff;max-width:14ch;margin:1rem 0} .hero .lead{color:rgba(255,255,255,.82);font-size:1.2rem} .hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.9rem} .hero-actions .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff} .hero-actions .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)} /* ===== Hero con video a tutto schermo (29/08, richiesta Jyoti) ===== Il video torna sfondo pieno. .hero-media ha z-index:0 e crea uno stacking context: il bottone pausa/play vive FUORI da questo contenitore, altrimenti finirebbe sotto l'overlay e non sarebbe cliccabile. L'overlay ::after non e' decorazione: senza, il testo bianco sul video chiaro scende sotto il contrasto minimo AA. */ .hero-fullvideo{min-height:min(88vh,860px);max-height:none} .hero-media{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center} .hero-media video{width:100%;height:100%;object-fit:cover;display:block} .hero-media::after{content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(11,35,44,.58) 0%,rgba(11,35,44,.44) 38%,rgba(11,35,44,.76) 100%)} /* Il pausa/play stava in basso a destra come nel pannello 19/08, ma sulla hero a tutto schermo quella posizione e occupata dal toggle Note di bozza (fixed, bottom-right): il controllo richiesto da WCAG 2.2.2 risultava coperto e non cliccabile — verificato con elementFromPoint e sullo screenshot. Spostato in alto a destra, sotto la nav, dove non collide con nulla. */ .hero-fullvideo .hero-video-toggle{z-index:3;top:1.1rem;right:1.1rem;bottom:auto} .hero-fullvideo .hero-inner{z-index:2} /* la spirale di brand resta leggibile sopra il video ma sotto il testo */ .hero-fullvideo .hero-spiral{z-index:1;opacity:.13} /* pannello video: cornice arrotondata in stile brand, non più sfondo a piena pagina */ .hero-visual{position:relative;z-index:1} .hero-visual-frame{position:relative;border-radius:var(--radius-l);overflow:hidden; aspect-ratio:4/3;box-shadow:0 20px 50px -28px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.16); background-size:cover;background-position:center} .hero-visual-frame video{width:100%;height:100%;object-fit:cover;display:block} /* Bottone pausa/play (WCAG 2.2.2, vedi commento in pages.js) */ .hero-video-toggle{position:absolute;right:.9rem;bottom:.9rem;z-index:1;width:38px;height:38px; display:flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(255,255,255,.4); background:rgba(15,43,54,.55);backdrop-filter:blur(4px);color:#fff;cursor:pointer;transition:background .2s} .hero-video-toggle:hover{background:rgba(15,43,54,.8)} .hero-video-toggle svg{width:16px;height:16px} /* main.js nasconde l'icona di troppo con `svg.hidden = true`, ma su un l'attributo non basta: la regola `[hidden]{display:none}` del browser vive in un foglio dichiarato nel namespace HTML e non raggiunge gli elementi SVG. Senza questa riga le due icone restano sovrapposte — e' il bottone doppio che Jyoti ha fotografato dal suo telefono il 22/09. */ .hero-video-toggle svg[hidden]{display:none} .hero-video-toggle .ic-play{margin-left:2px} /* FIX (feedback Jyoti 19/08, verificato con screenshot reale): il max-height:760px pensato per non far diventare l'hero enorme sui monitor alti, su mobile clippava l'ultimo bottone (e su schermi stretti anche il penultimo) quando H1+lead lungo+eyebrow+4 CTA superavano quell'altezza — con overflow:hidden il contenuto in eccesso spariva silenziosamente invece di andare a capo o scrollare. Sotto 860px il vincolo di altezza massima non serve (niente monitor ultra-larghi da compensare): si toglie, l'hero cresce quanto serve al contenuto — vale sia per il testo sia per il pannello video, ora impilati in colonna dallo stesso breakpoint (regola sotto). */ @media (max-width:860px){ .hero{max-height:none} .hero-spiral{width:min(200px,44vw);opacity:.1} } /* desktop: testo e pannello video affiancati (asimmetria coerente con .split-narrow-media già in uso per Chi siamo/Accademia — qui il testo resta protagonista, il video è un elemento, non lo sfondo). Sotto 861px l'ordine DOM (testo poi video) fa impilare il pannello sotto al testo senza bisogno di regole aggiuntive — stesso criterio già in uso nel progetto per i breakpoint. */ @media (min-width:861px){ .hero-inner{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(2rem,4vw,3.5rem)} } /* ===== Griglia asimmetrica (rompe il grid-cols-3 uniforme) ===== */ /* min-width:0 sui figli è OBBLIGATORIO: di default un figlio di grid/flex ha min-width:auto e non si restringe sotto la larghezza del proprio contenuto. Un'immagine con width="1400" teneva la colonna a 1400px anche su un telefono da 375 — il testo usciva dallo schermo e `overflow-x:clip` lo nascondeva soltanto. Bug invisibile a occhio, trovato solo misurando gli elementi. */ .split > *,.with-aside > *,.disc-grid > *,.event-grid > *,.post-grid > *,.team-grid > *{min-width:0} .split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:center} .split.rev{grid-template-columns:.9fr 1.1fr} /* .even: quando le due colonne hanno pari dignità (es. i due percorsi dell'Accademia) l'asimmetria 1.1/.9 sembra un errore invece che una scelta. */ .split.even{grid-template-columns:1fr 1fr;align-items:start} @media (max-width:860px){.split.even{grid-template-columns:1fr}} .split.rev .split-media{order:2} @media (max-width:860px){.split,.split.rev{grid-template-columns:1fr}.split.rev .split-media{order:0}} .split-media{position:relative} .split-media img{border-radius:var(--radius-l)} /* .depth: il contenitore è una scena — l'immagine scorre dentro la sua cornice (parallax) e il badge fluttua davanti su Z. La cornice ritaglia: senza, l'immagine in movimento sborderebbe. */ .split-media.depth{perspective:1000px;transform-style:preserve-3d} .split-media.depth .frame{overflow:hidden;border-radius:var(--radius-l);position:relative;z-index:0} /* height:auto esplicito: senza, in questo contesto (grid + perspective sul genitore) l'immagine veniva stirata all'altezza della colonna di testo accanto invece di mantenere le sue proporzioni. object-fit:cover di riserva. */ .split-media.depth .frame img{border-radius:0;will-change:transform;height:auto;object-fit:cover} /* .compact: colonna foto più piccola (per ora solo la sezione Accademia in home, che non deve competere in peso visivo con "Chi siamo") */ .split-media.compact{max-width:376px} @media (max-width:860px){.split-media.compact{max-width:none}} /* .split-narrow-media: solo desktop — sotto 860px .split torna già a 1 colonna (regola base), quindi qui la sovrascrittura non deve applicarsi (altrimenti romperebbe lo stack mobile). Copre sia il verso normale (foto=traccia1, testo=traccia2 — es. Chi siamo, dove il testo andava troppo a capo) sia .rev (testo=traccia1 per via di order:2 sulla foto — es. Accademia): in entrambi i casi la colonna testo prende 1.15fr e quella foto .55fr, cambia solo quale lato è quale. */ @media (min-width:861px){ .split.split-narrow-media{grid-template-columns:.55fr 1.15fr} .split.rev.split-narrow-media{grid-template-columns:1.15fr .55fr} } /* .chi-teaser: la regola era stata scritta per questo blocco ma mai agganciata al markup — il testo restava sulla colonna .9fr di default E con il cap p{max-width:62ch}/.lead{max-width:56ch} (riga ~76), che taglia le righe a prescindere da quanto sia larga la colonna. Qui il cap va tolto: con split-narrow-media la colonna testo è già abbastanza larga da fare da solo vincolo reale. */ .chi-teaser .lead,.chi-teaser p{max-width:none} /* .chi-media-col: la foto era piccola con molto vuoto sopra/sotto perché la sua traccia (.55fr) è stretta e centrata nella riga. Il testo NON deve restringersi di un pixel (richiesta cliente), quindi la colonna immagine sborda a sinistra oltre il proprio .wrap (stesso principio di .testi-bleed, ma senza toccare il bordo viewport — qui resta un margine visibile, la rottura di griglia "a filo schermo" resta unica delle testimonianze). Il bordo destro (verso il gap/testo) resta fisso: la traccia grid non cambia, solo il contenuto della colonna sinistra sborda oltre. */ @media (min-width:861px){ .chi-teaser .chi-media-col{margin-left:calc(-1 * var(--gutter));width:calc(100% + var(--gutter))} } @media (min-width:1360px){ /* extra bleed solo oltre 1360px, con un tetto di 40px (misurato: oltre lascia il pull-badge — che sporge di -1.6rem e, sotto perspective/translateZ, di qualche altro px per il foreshortening — troppo vicino o fuori dal viewport). Sotto i 1360px (es. 1280/1366, laptop comuni) resta solo il tier precedente (annulla il gutter), verificato sicuro. */ .chi-teaser .chi-media-col{ margin-left:calc(-1 * var(--gutter) - min(40px, (100vw - 1360px) * 0.5)); width:calc(100% + var(--gutter) + min(40px, (100vw - 1360px) * 0.5)); } } .split-media.depth .pull-badge{transform:translateZ(60px)} @media (max-width:860px){.split-media.depth .pull-badge{transform:none}} .split-media.bleed img{border-radius:var(--radius-l) 0 0 var(--radius-l)} @media (max-width:860px){.split-media.bleed img{border-radius:var(--radius-l)}} /* .fill-v: la colonna immagine riempie tutta l'altezza della riga invece di restare centrata con margine sopra/sotto (default .split{align-items:center}) — usata per l'Accademia, dove il testo è più alto dell'immagine e lasciava vuoto sopra/sotto invece di ingrandirla. */ .split-media.fill-v{align-self:stretch} .split-media.fill-v .frame{height:100%} .split-media.fill-v.depth .frame img{height:100%} @media (max-width:860px){.split-media.fill-v{align-self:auto}.split-media.fill-v .frame,.split-media.fill-v.depth .frame img{height:auto}} .pull-badge{ position:absolute;bottom:-1.6rem;left:-1.6rem;background:var(--surface); border-radius:var(--radius-m);box-shadow:var(--shadow);padding:1.1rem 1.3rem; max-width:230px;border:1px solid var(--line); } @media (max-width:860px){.pull-badge{position:static;margin-top:1rem;max-width:none}} .pull-badge .n{font-family:var(--font-display);font-size:1.9rem;color:var(--rose);display:block} .pull-badge .l{font-size:.82rem;color:var(--ink-soft)} /* ===== Discipline grid ===== */ /* flex, non grid: con 7 elementi un grid a colonne fisse lascia sempre celle vuote nell'ultima riga, e con background sulle celle-separatore quelle celle vuote diventano un riquadro pieno indesiderato. */ .disc-grid{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden} /* 4 + 3: con flex:1 1 le tre card della seconda riga si allargavano e i bordi verticali non combaciavano con la riga sopra — sembrava un errore. Base fissa a 1/4, e l'ultima riga resta allineata a sinistra: 4+3 diventa una scelta leggibile invece di un assestamento casuale. */ .disc-card{ flex:0 1 25%;min-width:230px;background:var(--surface);padding:1.6rem 1.5rem; text-decoration:none;color:var(--ink);position:relative;transition:background .25s var(--ease-expo); border-right:1px solid var(--line);border-bottom:1px solid var(--line); } @media (max-width:1080px){.disc-card{flex-basis:33.333%}} @media (max-width:780px){.disc-card{flex-basis:50%}} @media (max-width:520px){.disc-card{flex-basis:100%;border-right:0}} .disc-card:hover{background:var(--wash)} .disc-card .ic{width:34px;height:34px;color:var(--rose);margin-bottom:1.1rem} .disc-card h3{font-size:1.15rem;margin-bottom:.4rem} .disc-card p{font-size:.88rem;color:var(--ink-soft);margin:0} .disc-card .go{position:absolute;top:1.8rem;right:1.5rem;color:var(--rose);opacity:0;transform:translate(-4px,4px);transition:opacity .2s,transform .2s} .disc-card:hover .go{opacity:1;transform:translate(0,0)} /* ===== Varianti di trattamento/percorso (dentro una pagina disciplina, es. i 6 trattamenti Reiki) ===== Deliberatamente NON .disc-card: quella è la card di CATEGORIA (griglia discipline in home), una per pagina/disciplina. Qui sono VARIANTI di un solo servizio — riusare la stessa card avrebbe fatto leggere "6 pagine separate" invece di "6 opzioni dello stesso trattamento". Riquadro più leggero: niente icona, titolo sans invece del serif delle card di categoria, bordo sottile invece del mosaico a griglia condivisa. */ .treat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem} @media (max-width:640px){.treat-grid{grid-template-columns:1fr}} /* Con UNA voce sola la griglia a due colonne lascia mezza riga bianca. Succede appena la titolare accorcia un elenco dal pannello — sei trattamenti che diventano uno. Si passa a una colonna solo in quel caso: con due o piu' voci l'impaginazione resta esattamente quella di prima. */ .treat-grid:has(> :nth-child(1):last-child){grid-template-columns:1fr} .treat-item{border:1px solid var(--line);border-radius:var(--radius-m);padding:1.1rem 1.3rem;background:var(--surface)} .treat-item h4{font-family:var(--font-body);font-weight:600;font-size:.98rem;margin-bottom:.35rem;color:var(--ink)} .treat-item p{font-size:.86rem;color:var(--ink-soft);margin:0} /* ===== "Da dove posso iniziare?" (Accademia) — 4 card domanda+nome+desc+CTA ===== Stessa famiglia visiva di .treat-item (bordo sottile, niente icona/tilt — quello resta riservato a .disc-card) ma componente proprio: vedi startCard() in pages.js per il perché non forza trattamentoCard() con più parametri opzionali. */ /* repeat(4,1fr) fisso a 4 colonne rendeva il conteggio dinamico in pages.js (NUMERO_LETTERE) inutile a metà — con una 5ª card il layout si romperebbe comunque. auto-fit si adatta da solo a qualunque conteggio, senza bisogno di ritoccare i breakpoint. */ .start-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem} .start-item{ display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-m); padding:1.5rem 1.4rem;background:var(--surface);text-decoration:none;color:var(--ink); transition:border-color .2s var(--ease-expo),box-shadow .2s var(--ease-expo),transform .2s var(--ease-expo); } .start-item:hover{border-color:var(--rose);box-shadow:var(--shadow);transform:translateY(-3px)} .start-item .q{font-size:.8rem;color:var(--ink-soft);margin-bottom:.6rem;display:block;line-height:1.35} .start-item h4{font-family:var(--font-display);font-weight:500;font-size:1.15rem;margin-bottom:.5rem;color:var(--ink)} .start-item p{font-size:.87rem;color:var(--ink-soft);margin:0 0 1.2rem;flex:1} .start-item .cal-go{margin-top:auto} /* ===== Card evento ===== Direzione spark.earth: foto+titolo+data, poco testo sovrapposto — niente più riquadro bianco con ombra e paragrafo, la card è foto+didascalia. Il testo lungo resta sulla pagina evento, non qui. */ /* auto-fit, non repeat(4,1fr): dove le card sono 3 (workshop in Accademia) un grid a 4 colonne fisse lasciava una colonna vuota a destra. Con auto-fit le card riempiono sempre la riga. */ .event-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem 1.4rem} @media (max-width:600px){.event-grid{grid-template-columns:1fr}} .event-card{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:transform .25s var(--ease-expo)} /* aspect-ratio 4/3 (era 4/5): foto troppo sviluppate in verticale — torna a un taglio orizzontale, la card resta fotografica ma meno alta. */ .event-card .thumb{aspect-ratio:4/3;overflow:hidden;position:relative;border-radius:var(--radius-m);background:var(--paper)} .event-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-expo)} .event-card:hover .thumb img{transform:scale(1.045)} .event-card .date{position:absolute;top:.8rem;left:.8rem;background:var(--surface);border-radius:var(--radius-s);padding:.4rem .6rem;text-align:center;line-height:1.05;border:1px solid var(--line)} .event-card .date b{display:block;font-family:var(--font-display);font-size:1.15rem;color:var(--rose)} .event-card .date small{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)} .event-card .thumb .go{ position:absolute;right:.8rem;bottom:.8rem;width:32px;height:32px;border-radius:50%; background:var(--surface);color:var(--ink);display:flex;align-items:center;justify-content:center; font-size:.95rem;opacity:0;transform:translateY(6px); transition:opacity .25s var(--ease-expo),transform .25s var(--ease-expo); box-shadow:0 8px 20px -10px rgba(15,43,54,.4); } .event-card:hover .thumb .go{opacity:1;transform:translateY(0)} .event-card .body{padding:1rem .1rem 0;display:flex;flex-direction:column;gap:.3rem} .event-card .tag{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rose);font-weight:600} .event-card h3{font-size:1.05rem} /* ===== Liste pulite / check ===== */ ul.check{list-style:none;margin:1.2rem 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 1.6rem} @media (max-width:640px){ul.check{grid-template-columns:1fr}} /* stesso motivo: un beneficio solo non deve restare in mezza riga */ ul.check:has(> :nth-child(1):last-child){grid-template-columns:1fr} ul.check li{display:flex;gap:.7rem;align-items:flex-start;font-size:.96rem} ul.check li svg{width:20px;height:20px;flex-shrink:0;color:var(--rose);margin-top:.15rem} /* ===== "Perché" come filo che si illumina con lo scroll ===== Non una griglia statica — un filo verticale che scorre lungo i 5 motivi, che si accende progressivamente man mano che si scrolla (stesso principio della timeline "storia" in Chi siamo, .tl/.tl-item, ma qui il segmento già percorso resta acceso invece di essere statico). */ .why-thread{position:relative;padding-left:2.6rem;margin-top:0} .why-line{position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--line);border-radius:2px;overflow:hidden} /* riempita via JS (scrollTrigger scrub, altezza 0→100%) — transform-origin:top così cresce dall'alto */ .why-line-fill{position:absolute;top:0;left:0;right:0;height:0%;background:linear-gradient(var(--gold),var(--rose));transform-origin:top} .why-item{position:relative;padding-bottom:2.4rem} .why-item:last-child{padding-bottom:0} /* pallino sul filo — parte "spento" (bordo tenue), .lit lo accende quando lo scroll lo raggiunge */ .why-item::before{ content:"";position:absolute;left:-2.6rem;top:5px;width:14px;height:14px;border-radius:50%; background:var(--paper);border:2px solid var(--line);z-index:1; transition:border-color .5s var(--ease-expo),background .5s var(--ease-expo),box-shadow .5s var(--ease-expo); } .why-item.lit::before{border-color:var(--rose);background:var(--rose);box-shadow:0 0 0 4px color-mix(in srgb, var(--rose) 18%, transparent)} .why-n{font-family:var(--font-display);font-size:.85rem;color:var(--gold);letter-spacing:.1em;display:block;margin-bottom:.6rem} .why-item h3{margin-bottom:.5rem;font-size:1.1rem} .why-item p{font-size:.92rem;color:var(--ink-soft);margin:0;max-width:44ch} @media (max-width:640px){.why-thread{padding-left:2.1rem}.why-item::before{left:-2.1rem}.why-line{left:6px}} /* ===== Il viaggio a tappe (i sette Chakra) ===== Stessa grammatica del filo della home — pallino, numero, testo rientrato — ma senza animazione: qui il percorso si legge, non si scopre scorrendo. I pallini vanno dall'oro al rosa lungo le tappe, che è il senso del testo (dalla Terra al Cielo, dal corpo alla coscienza). */ .viaggio{position:relative;padding-left:2.6rem;margin-top:1.4rem} .viaggio-linea{position:absolute;left:9px;top:10px;bottom:10px;width:2px;border-radius:2px;background:linear-gradient(var(--gold),var(--rose))} .viaggio-tappa{position:relative;padding-bottom:2rem;max-width:60ch} .viaggio-tappa:last-child{padding-bottom:0} .viaggio-tappa::before{ content:"";position:absolute;left:-2.6rem;top:6px;width:14px;height:14px;border-radius:50%; background:var(--paper);border:2px solid var(--rose);z-index:1; } .viaggio-tappa:nth-child(2)::before{border-color:var(--gold)} .viaggio-tappa:nth-child(3)::before{border-color:color-mix(in srgb, var(--gold) 70%, var(--rose))} .viaggio-tappa:nth-child(4)::before{border-color:color-mix(in srgb, var(--gold) 50%, var(--rose))} .viaggio-tappa:nth-child(5)::before{border-color:color-mix(in srgb, var(--gold) 30%, var(--rose))} .viaggio-n{font-family:var(--font-display);font-size:.85rem;color:var(--gold);letter-spacing:.1em;display:block;margin-bottom:.4rem} .viaggio-tappa h4{font-family:var(--font-display);font-size:1.1rem;margin:0 0 .4rem} .viaggio-tappa p{font-size:.94rem;color:var(--ink-soft);margin:0} @media (max-width:640px){.viaggio{padding-left:2.1rem}.viaggio-tappa::before{left:-2.1rem}.viaggio-linea{left:6px}} /* ===== "Perché" — versione a onda orizzontale, NON pinnata (V2, desktop, redesign 2026-07-30) ===== V1 pinnava l'intera sezione e traslava un track largo 230vw in orizzontale: pin + 130vw di scroll extra (oltre 1800px SOLO per questa sezione su 1440px) producevano un "viaggio" lunghissimo e, a certe altezze di viewport, testo tagliato dall'overflow:hidden del palcoscenico pinnato. V2 abbandona il pin: nessuno scroll bloccato, nessuna altezza sintetica di sezione. L'onda resta come banda decorativa di altezza FISSA sopra una griglia CSS dei 5 motivi in normal flow (non più absolute-positioned sulla curva) — l'altezza della sezione è quella naturale del contenuto, quindi non può tagliare nulla a nessuna altezza di viewport, e la sezione è di gran lunga più corta (niente scroll extra sintetico). Sotto 861px, o con prefers-reduced-motion, resta il filo verticale sopra (.why-thread): sotto quella soglia una fila di 5 colonne è scomoda da leggere, e senza motion attiva l'illuminazione progressiva non ha senso — meglio il filo verticale, già testato. Stesso gate via matchMedia in motion.js sezione 6. */ .why-wave{display:none} @media (min-width:861px) and (prefers-reduced-motion:no-preference){ .why-thread{display:none} .why-wave{display:block;margin-top:.4rem} .why-wave-band{position:relative;height:clamp(52px,5.6vw,80px);margin-bottom:1.8rem} .why-w-line{position:absolute;inset:0;width:100%;height:100%} .why-w-path-bg{fill:none;stroke:var(--line);stroke-width:4;stroke-linecap:round} .why-w-path-fill{fill:none;stroke:url(#why-w-grad);stroke-width:4;stroke-linecap:round} /* pallino sulla curva: stesso principio del ::before del filo verticale (parte spento, si accende quando lo scroll normale lo raggiunge) ma qui è un SVG, non uno pseudo-elemento CSS */ .why-w-dot{fill:var(--paper);stroke:var(--line);stroke-width:4;transition:fill .5s var(--ease-expo),stroke .5s var(--ease-expo),filter .5s} .why-w-dot.lit{fill:var(--rose);stroke:var(--rose);filter:drop-shadow(0 0 6px color-mix(in srgb, var(--rose) 55%, transparent))} /* Griglia normale, non absolute: l'altezza di ogni blocco (e quindi della riga) è quella del suo contenuto — un paragrafo più lungo del previsto va a capo in più righe invece di essere tagliato. */ .why-wave-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem 1.4rem} /* I motivi ora si modificano dal pannello: se restano in tre, la griglia deve diventare di tre colonne invece di lasciare due caselle bianche in fondo alla riga. */ .why-wave-grid:has(> :nth-child(1):last-child){grid-template-columns:1fr} .why-wave-grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)} .why-wave-grid:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)} .why-wave-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)} .why-w-item{text-align:center} .why-w-item .why-n{color:var(--ink-soft);transition:color .5s var(--ease-expo)} .why-w-item.lit .why-n{color:var(--gold)} .why-w-item h3{font-size:1.02rem;font-weight:600;margin-bottom:.4rem;line-height:1.3} .why-w-item p{font-size:.88rem;line-height:1.42;color:var(--ink-soft);margin:0} } /* ===== Step Thread (Percorso Annuale, 9 tappe) ===== Vedi stepThread() in pages.js per il perché non riusa .why-wave (curva tarata sulle 5 coordinate di WHY_ITEMS): sempre verticale a ogni breakpoint, stesse classi interne generiche di .why-thread (.why-line/.why-item/.why-n) dentro un contenitore proprio. */ .step-thread{position:relative;padding-left:2.6rem;margin-top:0} @media (max-width:640px){.step-thread{padding-left:2.1rem}} /* ===== Testimonianze ===== Rottura di griglia deliberata: il carosello esce dal .wrap e corre fino al bordo dello schermo, partendo però allineato al testo. È l'unica sezione che sfonda il contenitore — se sfondassero tutte non sarebbe più una rottura, sarebbe la griglia. */ .testi-track{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;scrollbar-width:none} .testi-track::-webkit-scrollbar{display:none} .testi-bleed{margin-right:calc(-1 * var(--gutter))} @media (min-width:1276px){ /* oltre la larghezza del wrap: si calcola quanto manca al bordo viewport e si sfonda di quello */ .testi-bleed{margin-right:calc((1180px - 100vw) / 2)} } .testi-bleed .testi-track{padding-right:var(--gutter)} .testi-card{scroll-snap-align:start;flex:0 0 min(420px,86vw);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:2rem;box-shadow:var(--shadow)} .testi-card .stars{color:var(--gold);font-size:.9rem;letter-spacing:.2em;margin-bottom:.9rem} .testi-card p{font-family:var(--font-display);font-size:1.08rem;color:var(--ink);margin-bottom:1.3rem} .testi-who{display:flex;align-items:center;gap:.7rem} .testi-who img{width:42px;height:42px;border-radius:50%;object-fit:cover} .testi-who b{display:block;font-size:.9rem} .testi-who span{font-size:.8rem;color:var(--ink-soft)} /* ===== Newsletter ===== */ .newsletter{background:var(--ink);color:var(--paper);border-radius:var(--radius-l);padding:clamp(1.8rem,4vw,2.8rem);display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap} .newsletter h3{color:#fff;max-width:20ch} .nl-form{display:flex;gap:.6rem;flex-wrap:wrap} .nl-form input{ background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);color:#fff; padding:.8rem 1.1rem;border-radius:999px;min-width:240px;font:inherit;min-height:44px; } .nl-form input::placeholder{color:rgba(255,255,255,.5)} /* ===== Footer ===== */ footer{background:var(--ink);color:rgba(251,245,238,.72);padding:3rem 0 1.6rem;margin-top:0} footer a{color:rgba(251,245,238,.72);text-decoration:none} footer a:hover{color:#fff} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.4rem} @media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}} /* FIX (loop critico Fase 8, 19/08): era h4 dopo gli h2 di pagina — salto di livello su 42/44 pagine. Portato a h3 (nell'HTML in layout.js e qui), stesso stile visivo. */ .foot-grid h3{color:#fff;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-family:"Archivo";font-weight:600;margin-bottom:1rem} .foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.9rem} .foot-bottom{border-top:1px solid rgba(251,245,238,.15);margin-top:3rem;padding-top:1.6rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.8rem} .social-row{display:flex;gap:.8rem} .social-row a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(251,245,238,.25);display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s} .social-row a:hover{border-color:var(--rose);background:var(--rose)} .social-row svg{width:17px;height:17px} /* ===== Canvas della spirale ===== Regola alla radice: è un replaced element — con height:auto NON si stira tra top:0 e bottom:0 come un div, usa il proprio aspect-ratio intrinseco e resta tozzo. Ogni canvas a piena superficie deve dichiarare width/height espliciti. Bug trovato due volte (hero, poi 404). */ /* :where() azzera la specificità: senza, il selettore d'attributo (0-1-1) batteva .hero-canvas (0-1-0) e imponeva width:100% dove l'hero ne vuole 58% — la spirale finiva dietro al testo. Così height:100% resta il default utile, ma qualunque classe può ridefinire la larghezza. */ :where(canvas[data-spiral-canvas]){width:100%;height:100%;display:block} /* ===== Spirale — motivo ricorrente reale, non decorazione ===== */ .spiral-mark{display:block} .spiral-mark .a{stroke:var(--rose)} .spiral-mark .b{stroke:var(--gold)} .breathe{animation:breathe 6.5s ease-in-out infinite} @media (prefers-reduced-motion:reduce){.breathe{animation:none}} @keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}} /* ===== Reveal (GSAP hook) ===== */ /* Base SICURA: visibile. Lo stato nascosto lo impone SOLO il JS via gsap.set(), e solo se GSAP è confermato caricato — mai un default CSS invisibile in attesa di uno script che potrebbe non arrivare mai (CDN giù, JS disabilitato, no-scroll in un capture) e lasciare la pagina vuota. */ .reveal{opacity:1;transform:none} /* Stampa/PDF: qualunque stato "in attesa di scroll" imposto da GSAP va ignorato — su una pagina stampata non esiste scroll che possa far scattare un reveal, quindi deve comparire tutto. */ @media print{.reveal{opacity:1 !important;transform:none !important}} /* ===== Bozza-content flag (contenuti ancora da confermare/completare) ===== Livello ATTIVABILE, non sempre acceso: di default il sito si vede pulito (è la versione da giudicare), col toggle si evidenzia tutto ciò che è ancora da confermare. */ .tbd{position:relative} .tbd::after{display:none} :root[data-draft] .tbd{outline:1px dashed color-mix(in srgb, var(--gold) 60%, transparent);outline-offset:5px;border-radius:2px} :root[data-draft] .tbd::after{ content:"da rivedere"; display:block;position:absolute;top:-9px;right:6px;z-index:6; font-family:"Archivo";font-size:.58rem;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--gold); padding:.1rem .45rem;border-radius:999px;white-space:nowrap;pointer-events:none; } /* Badge "modifiche dal portale": compare quando il sito sta mostrando contenuti che Jyoti ha cambiato dal pannello. E' la prova visibile che il collegamento portale->sito e' vivo. */ [data-live-badge]{ position:fixed;left:16px;bottom:16px;z-index:60; display:inline-flex;align-items:center;gap:.45rem; background:var(--leaf-pale);color:#3f6b3a;border:1px solid var(--leaf); border-radius:999px;padding:.5rem .9rem;font-size:.78rem;font-weight:600; box-shadow:0 10px 30px -12px rgba(15,43,54,.4); transition:opacity .4s var(--ease-expo),transform .4s var(--ease-expo); } [data-live-badge][data-hide]{opacity:0;transform:translateY(8px);pointer-events:none} @media (max-width:760px){[data-live-badge]{left:12px;bottom:12px;font-size:.76rem}} /* Stesso z-index del toggle bozze (60) e aggiunto al DOM dopo di lui: a parità di z-index vince chi è dopo, quindi con lo store del portale presente il badge finiva sopra la fascia riservata del menu mobile, impossibile da attraversare per toccare il toggle nei primi secondi. Col menu aperto il badge non serve (chi sta guardando "Note di bozza" non ha bisogno di un avviso sulle modifiche del portale nello stesso istante): si nasconde e basta. */ @media (max-width:960px){:root.nav-open [data-live-badge]{display:none}} .draft-toggle{ position:fixed;right:16px;bottom:16px;z-index:60; display:inline-flex;align-items:center;gap:.5rem; background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.2); border-radius:999px;padding:.55rem .95rem;font-size:.76rem;cursor:pointer; box-shadow:0 10px 30px -12px rgba(15,43,54,.6); transition:background .2s var(--ease-expo);min-height:40px; } .draft-toggle:hover{background:var(--rose-d)} .draft-toggle .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);transition:background .2s} :root[data-draft] .draft-toggle{background:var(--gold);color:var(--ink);border-color:transparent} :root[data-draft] .draft-toggle .dot{background:var(--ink)} @media print{.draft-toggle{display:none}} /* Perché questo bottone vive qui e non altrove, e perché NON va rimesso dentro dentro, con srcset/sizes (vedi pages.js/heroPhoto). */ .page-hero-bg.photo{opacity:1} .page-hero-photo{width:100%;height:100%;object-fit:cover;display:block} /* FIX (loop critico Fase 8, 19/08 — trovato da revisione avversariale, verificato con metodo rigoroso testo-nascosto-su-sfondo-puro): il gradiente partiva da .4 di opacità in alto, dove stanno breadcrumb ed eyebrow — su una foto chiara (es. l'aula di Accademia) il contrasto scendeva fino a 1.56:1, ben sotto il minimo 4.5:1. Alzati tutti gli stop: il punto più critico (in alto, dove il testo è più piccolo) è ora il più scurito, non il meno. */ .page-hero.has-photo::after{ content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(180deg, rgba(15,43,54,.62) 0%, rgba(15,43,54,.78) 60%, rgba(15,43,54,.92) 100%); } .page-hero.has-photo .page-hero-bg.tide{opacity:.3} /* 22/09: la spirale in filigrana sopra le testate e' stata tolta su richiesta di Jyoti («levala da tutte le immagini»): si sovrapponeva alle foto di apertura delle pagine. Il segno resta dov'e' suo, nel logo in barra. Tolto l'HTML in layout.js, qui non resta nulla da stilare. */ /* FIX (loop critico Fase 8, 19/08): .55 di opacità misurava 3.06-4.47:1 contro sfondo foto, sotto il minimo 4.5:1 richiesto (era tarato per il fondo scuro pieno di .page-hero, non per la foto). Alzato a .8, stesso ordine di grandezza di .page-hero .lead (già a .78, verificato a norma). */ .crumbs{display:flex;gap:.5rem;align-items:center;font-size:.78rem;color:rgba(255,255,255,.8);margin-bottom:1.4rem} .crumbs a{text-decoration:none} .crumbs a:hover{color:#fff} /* ===== Prose (blocchi di testo lungo) ===== */ .prose h3{margin:2.4rem 0 .7rem} .prose p{color:var(--ink-soft)} .prose > p:first-child{color:var(--ink);font-size:1.1rem} .prose ul{color:var(--ink-soft);padding-left:1.1rem;margin:1rem 0} .prose li{margin-bottom:.5rem} /* ===== Layout 2 colonne con sidebar sticky (pagine disciplina) ===== */ .with-aside{display:grid;grid-template-columns:1fr 350px;gap:clamp(2rem,5vw,4.5rem);align-items:start} @media (max-width:940px){.with-aside{grid-template-columns:1fr}} /* La colonna a lato si muove come un blocco solo. Prima ogni riquadro era `position:sticky; top:96px` per conto suo: due fratelli con lo stesso `top` si fermano nello stesso punto, e il secondo finisce SOPRA il primo appena si scorre — segnalato da Jyoti il 14/09 su Reiki e su Costellazioni, con lo screenshot. Rendere sticky la pila invece dei singoli riquadri ha tolto la sovrapposizione e ne ha creata un'altra, segnalata da lei il 17/09: "ora c'è solo un riquadro, quello sotto non c'è più". MISURATO in produzione il 17/09: la pila è alta 933-1162px su tutte e sette le pagine disciplina, la finestra utile di un portatile 648-780px. Quindi la pila NON ci sta mai, resta appiccicata in alto, e il secondo riquadro finisce sotto il bordo per sempre: l'`overflow:auto` lo rendeva raggiungibile solo scorrendo DENTRO la colonna col puntatore sopra — un gesto che nessuno fa, e infatti lei non l'ha trovato (0% di visibilità in 40 passi di scorrimento, a 1366x768). Regola nuova: la colonna sta ferma SOLO se ci sta tutta nella finestra — è main.js a misurarlo e a mettere .pila-fissa. Senza JavaScript, o quando non ci sta, scorre con la pagina: due riquadri uno sotto l'altro, sempre raggiungibili, e sovrapporsi è impossibile per costruzione. */ .aside-stack{ display:grid;gap:1.2rem; padding:2px; /* i 2px lasciano respirare l'ombra dei riquadri */ } .aside-stack.pila-fissa{position:sticky;top:96px} .aside-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:1.7rem;box-shadow:var(--shadow)} .aside-card + .aside-card{margin-top:0 !important} /* la distanza la dà la pila, non il riquadro */ @media (max-width:940px){ .aside-stack,.aside-stack.pila-fissa{position:static} .aside-card{position:static} } .aside-card h4{font-family:var(--font-display);font-size:1.15rem;margin-bottom:.9rem} .price-row{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.92rem;flex-wrap:wrap} .price-row:last-of-type{border-bottom:0} /* nowrap di default: "€ 60" non deve MAI spezzarsi tra simbolo e cifra (era il caso di 5 sidebar su 7 dopo che l'avevo tolto per un solo caso lungo). Il caso lungo — un contributo che è una frase intera — si dichiara con .long, dove serve. */ /* Il valore va a capo invece di uscire dal riquadro. Prima era `nowrap`, con una classe `long` aggiunta a mano nel template quando il contributo superava i 14 caratteri: quel conteggio non copriva "Quando" e "Orario", e una data scritta per esteso usciva dalla scheda. Gli importi non si spezzano lo stesso perche' hanno gia' lo spazio unificatore (vedi nbspEuro in pages.js). */ .price-row b{font-family:var(--font-display);color:var(--rose);text-align:right;white-space:normal;min-width:0;overflow-wrap:anywhere} .price-row.long b{white-space:normal;min-width:0} .price-row > span:first-child{min-width:0} /* ===== Steps (come funziona una seduta) ===== */ .steps{list-style:none;counter-reset:s;padding:0;margin:1.6rem 0;display:grid;gap:1.1rem} .steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start} .steps li::before{ content:counter(s,decimal-leading-zero);font-family:var(--font-display);font-size:.95rem;color:var(--rose); border:1px solid var(--line);border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex-shrink:0; } .steps li b{display:block;margin-bottom:.15rem} .steps li span{color:var(--ink-soft);font-size:.93rem} /* ===== FAQ ===== */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ cursor:pointer;padding:1.15rem 0;font-family:var(--font-display);font-size:1.08rem;list-style:none; display:flex;justify-content:space-between;gap:1rem;align-items:center;transition:color .2s var(--ease-expo); } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--rose)} .faq summary::after{content:"+";font-size:1.3rem;color:var(--rose);flex-shrink:0;transition:transform .25s var(--ease-expo)} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{padding:0 0 1.2rem;color:var(--ink-soft);max-width:70ch} /* ===== Video placeholder ===== */ .video-frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius-l);overflow:hidden;background:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer} .video-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55} .video-frame .play{position:relative;z-index:1;width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;transition:background .25s var(--ease-expo),transform .25s var(--ease-expo)} .video-frame:hover .play{background:var(--rose);transform:scale(1.05)} .video-frame .play svg{width:24px;height:24px;color:#fff;margin-left:3px} /* ===== Team ===== */ .team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem} .team-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;display:flex;flex-direction:column} .team-card img{aspect-ratio:4/5;object-fit:cover;width:100%} .team-card .b{padding:1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1} .team-card .role{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rose);font-weight:600} .team-card p{font-size:.88rem;color:var(--ink-soft);flex:1;margin:0} /* ===== Timeline (storia) ===== */ .tl{position:relative;padding-left:2.2rem;margin:2rem 0} .tl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--line)} .tl-item{position:relative;padding-bottom:2.2rem} .tl-item:last-child{padding-bottom:0} .tl-item::before{content:"";position:absolute;left:-2.2rem;top:7px;width:15px;height:15px;border-radius:50%;border:1px solid var(--rose);background:var(--paper)} .tl-item .y{font-family:var(--font-display);color:var(--rose);font-size:1.05rem;display:block;margin-bottom:.25rem} /* ===== Calendario: lista eventi (row, non card — densità diversa dalla home) ===== */ .cal-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-l);overflow:hidden;margin-top:1.6rem} .cal-row{ background:var(--surface);display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:center; padding:1.3rem 1.5rem;text-decoration:none;color:var(--ink);transition:background .2s var(--ease-expo); } .cal-row:hover{background:var(--wash)} /* .cal-list-photo: variante fotografica usata solo nel calendario principale (riferimento spark.earth). Le altre liste cal-row (disciplina/accademia) restano senza foto — non toccate. */ .cal-list-photo .cal-row{grid-template-columns:56px auto 1fr auto} .cal-thumb{width:56px;height:56px;border-radius:var(--radius-m);overflow:hidden;flex-shrink:0} .cal-thumb img{width:100%;height:100%;object-fit:cover;display:block} .cal-date{text-align:center;min-width:62px;border-right:1px solid var(--line);padding-right:1.2rem} .cal-date b{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--rose);line-height:1} .cal-date small{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)} .cal-main .t{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:.2rem} .cal-main h3{font-size:1.08rem} .cal-main .m{font-size:.85rem;color:var(--ink-soft)} .cal-go{color:var(--rose);font-size:.85rem;font-weight:600;white-space:nowrap} @media (max-width:720px){ .cal-row{grid-template-columns:auto 1fr;gap:1rem} .cal-thumb{display:none} .cal-go{display:none} .cal-date{padding-right:.9rem;min-width:52px} } .cal-empty{text-align:center;padding:3rem 1rem;color:var(--ink-soft);background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius-l);margin-top:1.6rem} /* ===== Blog ===== */ .post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem} .post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:box-shadow .25s var(--ease-expo),transform .25s var(--ease-expo)} .post-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .post-card img{aspect-ratio:16/10;object-fit:cover} .post-card .b{padding:1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1} .post-card .meta{font-size:.75rem;color:var(--ink-soft);display:flex;gap:.5rem;align-items:center} .post-card .cat{color:var(--rose);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.68rem} .post-card h3{font-size:1.1rem} .post-card p{font-size:.87rem;color:var(--ink-soft);margin:0;flex:1} .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 0} .chip{border:1px solid var(--line);border-radius:999px;padding:.45rem 1rem;font-size:.83rem;background:var(--surface);cursor:pointer;transition:all .2s var(--ease-expo);text-decoration:none;color:var(--ink-soft);min-height:38px;display:inline-flex;align-items:center} .chip:hover{border-color:var(--rose);color:var(--rose)} .chip.on{background:var(--rose);border-color:var(--rose);color:#fff} /* ===== Galleria evento ===== auto-fit + minmax(0,...): con repeat(3,1fr) e immagini da 800px le colonne non si restringevano sotto il contenuto e la riga usciva a 2442px su un telefono. */ .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:.8rem} .gallery > *{min-width:0} /* ===== Mappa placeholder ===== */ .map-frame{aspect-ratio:16/7;border-radius:var(--radius-l);overflow:hidden;border:1px solid var(--line);background:var(--sage-pale);position:relative;display:flex;align-items:center;justify-content:center} .map-frame img{width:100%;height:100%;object-fit:cover} .map-pin{position:absolute;display:flex;flex-direction:column;align-items:center;gap:.3rem;color:var(--rose)} .map-pin svg{width:34px;height:34px;filter:drop-shadow(0 4px 10px rgba(15,43,54,.3))} .map-pin span{background:var(--surface);border-radius:999px;padding:.25rem .7rem;font-size:.75rem;font-weight:600;box-shadow:var(--shadow)} /* Sotto la mappa: il pulsante per le indicazioni e l'attribuzione a OpenStreetMap, che la licenza delle mappe richiede e che non può stare dentro l'immagine (lì sarebbe illeggibile). */ .map-sotto{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.9rem} .map-sotto small{color:var(--ink-soft);font-size:.75rem} /* ===== Nav mobile aperto ===== */ @media (max-width:960px){ .nav-links.open{ display:flex;flex-direction:column;align-items:flex-start;gap:0; /* bottom:64px, non 0: lascia una fascia fissa riservata al toggle "Note di bozza" (vedi sotto). Un pill fluttuante SOPRA questa lista scrollabile finiva sempre a coprire l'ultima voce visibile, qualunque posizione si scegliesse. Con lo spazio riservato dentro il flusso del pannello, invece che sopra, l'overlap è impossibile per costruzione. */ /* top: var(--nav-h): l'header non è sempre 64px — dipende da font di sistema/zoom/lingua — e main.js la misura per davvero invece di far indovinare il CSS. Il 64px resta solo come fallback per il primissimo frame prima che il JS giri. */ position:fixed;top:var(--nav-h, 64px);left:0;right:0;bottom:64px;background:var(--paper); padding:1.4rem clamp(20px,5vw,32px);overflow-y:auto;z-index:39; } .nav-links.open li{width:100%;border-bottom:1px solid var(--line)} .nav-links.open a{display:block;padding:1rem 0;font-size:1.05rem} .nav-links.open .dropdown{ position:static;opacity:1;visibility:visible;translate:0 0;transform:none;box-shadow:none;border:0; background:transparent;padding:0 0 .6rem 1rem;min-width:0; } .nav-links.open .dropdown a{padding:.5rem 0;font-size:.92rem;color:var(--ink-soft)} /* Col menu aperto sul telefono i sottomenu restano chiusi finché non li si tocca: aprirli tutti rifarebbe la lista di venti voci da scorrere che è il problema da cui siamo partiti. */ .nav-links.open .drop-item{flex-wrap:wrap} .nav-links.open .apri-sub{display:block;min-width:44px;min-height:44px} .nav-links.open .sub-dropdown{display:none;position:static;opacity:1;visibility:visible;translate:0 0;border:0;box-shadow:none;background:transparent;padding:0 0 .4rem 1rem;min-width:0;width:100%} .nav-links.open .drop-item.has-sub.aperto > .sub-dropdown{display:block} .nav-links.open .sub-dropdown a{font-size:.88rem} } /* ========================================================================= MOBILE — è lo schermo su cui il sito viene giudicato. Correzioni misurate su iPhone SE (375), iPhone 14 Pro (393), Galaxy S8 (360). ========================================================================= */ @media (max-width:760px){ /* Testo: sotto i 12px non si legge al sole, con un telefono in mano. Le label salgono TUTTE sopra quella soglia — .74rem sembrava già "grande" ma fa 11.84px: sotto. */ .eyebrow{font-size:.8rem;letter-spacing:.14em} .badge{font-size:.78rem} .post-card .cat,.event-card .tag{font-size:.78rem} .post-card .meta{font-size:.82rem} .cal-date small,.event-card .date small{font-size:.78rem} .partner-row span{font-size:.8rem} .testi-who span{font-size:.84rem} .team-card .role,.p-stat span{font-size:.78rem} .note,.tbd-note{font-size:.86rem} .lead{font-size:1.06rem} .foot-grid ul{font-size:.95rem} .foot-bottom{font-size:.84rem} /* Touch target: tutto ciò che si tocca arriva a 44px, come chiede la linea guida. */ .brand{min-height:44px;padding:.2rem 0} .nav-burger{width:44px;height:44px;align-items:center;justify-content:center;margin-right:-.4rem} .social-row a{width:44px;height:44px} .crumbs{gap:.15rem;flex-wrap:wrap} .crumbs a{padding:.6rem .4rem;display:inline-flex;align-items:center;min-height:44px} .crumbs a:first-child{padding-left:0} .chip{min-height:44px;padding:.6rem 1.05rem} .btn{padding:.8rem 1.4rem} /* i recapiti sono i CTA veri su un telefono: devono essere grandi da toccare */ a[href^="tel:"],a[href^="mailto:"]{display:inline-flex;align-items:center;min-height:44px;padding:.3rem 0} .foot-grid a{display:inline-flex;align-items:center;min-height:44px} .foot-grid ul{gap:.2rem} .dropdown a,.nav-links.open a{min-height:44px;display:flex;align-items:center} /* Le spirali decorative dei page-hero sporgevano oltre il bordo: su schermo stretto rubano spazio e il clip le taglia male. Più piccole, più in dentro, più tenui. */ /* Hero: su un telefono in verticale il titolo deve respirare, non riempire tutto lo schermo */ .hero{min-height:auto;padding-top:4.5rem} .hero-inner{padding-bottom:3.4rem} .hero h1{max-width:none} .hero .lead{font-size:1.08rem} .hero-actions{gap:.6rem} .hero-actions .btn{width:100%;justify-content:center} /* Sezioni più corte: su mobile 7.5rem di padding sono mezzo schermo di vuoto */ section{padding:3.4rem 0} /* Il carosello testimonianze deve suggerire che si scorre: la card successiva si affaccia */ .testi-card{flex-basis:82vw;padding:1.5rem} .testi-bleed{margin-right:calc(-1 * var(--gutter))} /* Il pull-badge sotto la foto, non sopra: in colonna non ha senso che fluttui */ .pull-badge{box-shadow:none;border-color:var(--line)} /* Form e sidebar a piena larghezza */ .aside-card{padding:1.4rem} .filters{gap:.5rem} .filters select,.filters input[type="search"]{flex:1 1 100%;min-height:44px} /* La checkbox del consenso era 13×13: impossibile da centrare col pollice, ed è l'ultimo ostacolo prima dell'invio. Ingrandita, e l'area toccabile è tutta la riga. */ .field input[type="checkbox"],label > input[type="checkbox"]{ width:24px;height:24px;min-height:24px;flex-shrink:0;accent-color:var(--rose); } label:has(> input[type="checkbox"]){padding:.5rem 0;align-items:center} label:has(> input[type="checkbox"]) span{font-size:.9rem} label:has(> input[type="checkbox"]) a{padding:.35rem 0;display:inline-block} } /* Schermi molto stretti (Galaxy S8 = 360px): il titolo hero non deve spezzare le parole */ @media (max-width:380px){ h1{font-size:clamp(1.8rem,7.5vw,2.2rem)} .hero .lead{font-size:1rem} :root{--gutter:16px} } /* ===== Video hero — decorativo, dietro alla spirale ===== Dal 09/09 il video si vede ANCHE da telefono: Jyoti l'ha chiesto e ha confermato la versione leggera. Il telefono non scarica più i 5,3 MB della versione grande ma i 743 KB di hero-riminiscenze-mobile.mp4, scelto dal in pages.js. Resta spento con prefers-reduced-motion: chi chiede meno animazioni non deve avere un video che parte da solo. In quel caso si vede il poster, dal background-image di .hero-visual-frame. FIX (loop critico Fase 8, 19/08 — BLOCCANTE trovato da revisione avversariale, verificato con CDP getMatchedStylesForNode + runtime con reducedMotion:'reduce'): il selettore `.hero-video` da solo ha specificità (0,1,0), PIÙ BASSA di `.hero-visual-frame video{display:block}` sopra (0,1,1) — quella regola vinceva sempre, video visibile e in loop anche sotto 760px e con reduced-motion attivo (misurato: 2.7MB scaricati su mobile invece di zero, esattamente il peso che questa sezione dichiarava di voler evitare). Selettore corretto a specificità pari/superiore e il bottone pausa/play si nasconde con lui (senza video visibile, non serve). */ /* CORREZIONE 16/09 — Jyoti: "Video di sfondo ancora non lo vedo in movimento né su pc né su telefono". Su Windows basta avere spento "Effetti di animazione" (o il risparmio energetico) perché il browser dichiari prefers-reduced-motion: qui il video spariva del tutto, e chi guarda conclude che il sito è rotto. Ora resta il poster CON il pulsante per avviarlo: niente parte da solo — che è quello che la preferenza chiede — ma chi vuole vederlo ha un modo evidente di farlo. */ @media (prefers-reduced-motion:reduce){ .hero-visual-frame video, .hero-media video{display:none} .hero-visual-frame.video-acceso video, .hero-media.video-acceso video{display:block} .hero-video-toggle{display:flex} } /* Da quando il video si vede anche da telefono (9/9), il bottone pausa/play e' un bersaglio da toccare col dito: 38px erano sotto la soglia dei 44 e il QA mobile lo ha bocciato su tutti e tre i telefoni. Sul desktop resta piccolo, li' si punta col mouse. */ @media (max-width:760px){ .hero-video-toggle{width:44px;height:44px} } /* ─── Card di una quota (9/9) ──────────────────────────────────────────────── Jyoti: "sarebbero da sistemare graficamente e allungare il riquadro della stessa lunghezza di quello sopra". Quindi larghezza piena del contenitore, non una colonna stretta, e il prezzo pieno barrato accanto a quello che si paga davvero. */ .quota-card{border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface); padding:clamp(1.4rem,3vw,2rem);text-align:center;width:100%;margin-top:1.6rem} .quota-ore{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);margin:0;color:var(--ink)} .quota-sub{font-style:italic;color:var(--ink-soft);margin:.2rem 0 1rem;font-size:.92rem;text-transform:uppercase;letter-spacing:.04em} .quota-testo{color:var(--ink-soft);max-width:62ch;margin:0 auto 1rem} .quota-opzioni{list-style:none;padding:0;margin:0 auto 1rem;color:var(--ink-soft);max-width:62ch} .quota-opzioni li{padding:.2rem 0} .quota-etichetta{font-weight:600;margin:1rem 0 .2rem;color:var(--ink)} .quota-prezzo{font-size:1.35rem;margin:0 0 1rem} .quota-prezzo s{color:var(--ink-soft);font-size:1rem;margin-right:.4rem} /* Il barrato non è un prezzo di prima: è quanto costerebbero gli stessi seminari comprati uno per uno (Jyoti, 14/09: "l'Accademia ha sempre la quota scontata, lo sconto è rispetto all'acquisto dei seminari singoli"). Sta su una riga sua, con scritto cos'è — un numero barrato accanto alla quota si legge come "prima costava di più", che qui sarebbe falso. */ .quota-confronto{font-size:.85rem;color:var(--ink-soft);margin:-.6rem 0 1rem} .quota-confronto s{color:inherit} .quota-prezzo b{color:var(--rose)} .quota-rate{font-size:.88rem;color:var(--ink-soft);margin:.2rem 0} /* ─── Elenco di link dentro una card laterale (9/9) ────────────────────────── I seminari di una disciplina, accanto al riquadro per prenotare: righe separate da una linea sottile, così si leggono come un elenco e non come un paragrafo di link. */ .aside-link-list{display:flex;flex-direction:column} .aside-link-list a{padding:.55rem 0;border-bottom:1px solid var(--bordo,#DCE3DF);color:inherit;text-decoration:none;font-size:.92rem} .aside-link-list a:last-child{border-bottom:0} .aside-link-list a:hover{color:var(--rose)} /* ─── Sotto-voci del menu Discipline (9/9) ─────────────────────────────────── Le schede dei livelli dentro il menu a tendina: rientrate e più piccole, così si legge subito che appartengono alla disciplina sopra e non sono un'altra disciplina. */ .dropdown .sub{padding-left:1.5rem;font-size:.86em;opacity:.82} .dropdown .sub:hover{opacity:1} /* ─── Video di una disciplina (9/9) ────────────────────────────────────────── Il video di Jyoti è girato col telefono, quindi verticale: a tutta larghezza diventerebbe una colonna altissima che spinge fuori schermo tutto il resto. Si limita l'altezza, non la larghezza, così regge sia il verticale sia un eventuale orizzontale futuro. */ .video-disciplina{display:block;width:100%;border-radius:var(--radius-m);background:#000} .video-disciplina.verticale{width:auto;max-width:100%;max-height:min(70vh,620px);margin:0 auto} /* ─── Carosello foto (home: le discipline · Chi siamo: il centro) — 6/9 ────────────────────── Scorrimento nativo con aggancio (scroll-snap): niente librerie, funziona anche senza JS (si scorre col dito o con le frecce). main.js aggiunge autoplay, pallini e frecce. */ .carosello{position:relative;border-radius:var(--radius-l);overflow:hidden;background:var(--sage-soft,#e9efe9)} .carosello-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch} .carosello-track::-webkit-scrollbar{display:none} .carosello-track:focus-visible{outline:2px solid var(--gold);outline-offset:-2px} .carosello-slide{flex:0 0 100%;margin:0;position:relative;scroll-snap-align:start;scroll-snap-stop:always} .carosello-slide img{display:block;width:100%;height:auto;aspect-ratio:14/9;object-fit:cover;border-radius:0} .carosello-slide a{display:block} .carosello-slide figcaption{position:absolute;top:.9rem;left:.9rem;background:rgba(15,43,54,.72);color:#fff;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:.42rem .8rem;border-radius:999px;backdrop-filter:blur(4px)} .carosello-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.55); background:rgba(15,43,54,.45);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px); opacity:0;transition:opacity .25s,background .2s} .carosello-btn svg{width:20px;height:20px} .carosello-btn.prev{left:.7rem}.carosello-btn.next{right:.7rem} .carosello:hover .carosello-btn,.carosello:focus-within .carosello-btn{opacity:1} .carosello-btn:hover{background:rgba(15,43,54,.75)} .carosello-dots{position:absolute;bottom:.8rem;left:0;right:0;display:flex;justify-content:center;gap:.4rem;pointer-events:none} /* in home il badge "Discipline diverse" copre l angolo in basso a sinistra: i pallini vanno a destra */ .chi-teaser .carosello-dots{justify-content:flex-end;right:.9rem} .carosello-dots span{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.55);transition:background .2s,transform .2s} .carosello-dots span.on{background:#fff;transform:scale(1.25)} @media (max-width:860px){ .carosello-btn{opacity:1;width:44px;height:44px} .carosello-slide figcaption{font-size:.7rem} } @media (prefers-reduced-motion:reduce){ .carosello-track{scroll-behavior:auto} } .no-js .carosello-btn,.no-js .carosello-dots{display:none} /* ─── Card del team piu' piccole (richiesta Jyoti 6/9): non riempiono piu' tutta la colonna ─── */ .team-grid{grid-template-columns:repeat(auto-fill,minmax(200px,260px));justify-content:start} .team-card img{aspect-ratio:1/1;height:auto} /* height:auto: l attributo height="700" del tag vincerebbe sull aspect-ratio */ @media (max-width:600px){ .team-grid{grid-template-columns:repeat(auto-fill,minmax(200px,260px))} .team-card .b{padding:1rem} } /* ─── Sottolineatura colorata dei titoli (9/9) ──────────────────────────────── Jyoti: "mi piacerebbe avere queste parti con sottolineatura colorata per dare un pò di movimento visivo [...] in generale tutti i titoli di pagina e titoli dei paragrafi". È un segno breve sotto il titolo, non una riga a tutta larghezza: sottolineare l'intera frase renderebbe il testo più difficile da leggere, che è il contrario del movimento che cerca. Non si applica ai titoli dentro le card (h3/h4 nei riquadri), dove sarebbe rumore ripetuto. */ /* CORREZIONE 16/09 — lo chiede per la seconda volta, e aveva ragione: i selettori qui sotto pretendevano che il titolo fosse figlio diretto di .wrap o .wrap-narrow, mentre nelle pagine delle discipline sta due o tre livelli più in basso (dentro .with-aside, dentro il blocco che compare scorrendo). Risultato misurato prima della correzione: sulla pagina Reiki la riga compariva su 1 titolo su 21 — lei vedeva un sito quasi senza. Ora la regola vale per tutti i titoli di sezione, e si TOGLIE dove sarebbe rumore: dentro i riquadri, nella colonna a lato, nei moduli. Elencare cosa escludere è più corto e più stabile che elencare cosa includere. */ section h2::after, .page-hero h1::after{ content:"";display:block;width:2.4rem;height:3px;margin-top:.7rem;border-radius:2px; background:var(--rose);opacity:.9; } .aside-card h2::after, .quota-card h2::after, .treat-item h2::after, .disc-card h2::after, .cal-row h2::after, .carosello h2::after, form h2::after, .faq h2::after, .map-frame h2::after, .team-card h2::after, .inizia-card h2::after{content:none} .page-hero h1::after{background:var(--gold,#C9A227);opacity:.95} /* Nelle sezioni su fondo scuro la riga rosa sparirebbe: si usa l'oro, che è l'accento chiaro. */ .tone-ink h2::after{background:var(--gold,#C9A227)} /* ─── Riga di dato sulla pagina di una data (9/9) ───────────────────────────── Jyoti: "Le scritte rosa e le scritte nere bold le vorrei sulla stessa linea". L'etichetta e il valore stanno sulla stessa riga e allineati alla stessa base: prima l'etichetta era un paragrafo sopra al valore, e su schermi stretti restavano comunque incolonnati. */ .dato-riga{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin:0} .dato-riga .eyebrow{margin:0;white-space:nowrap} .dato-riga strong{color:var(--ink)} .dato-riga a{color:var(--rose);text-decoration:none;font-size:.9rem} .dato-riga a:hover{text-decoration:underline} /* Un video che non e' nostro e che non si puo' nemmeno incorporare: si va a vederlo dov'e'. VERIFICATO il 17/09: il lettore di Vimeo dei due video di Aura-Soma risponde 200 solo con referer `aura-soma.com`, 401 da qualunque altro dominio — hanno autorizzato l'incorporamento solo sul loro sito. Quindi niente riquadro incorporato (resterebbe nero) e niente copia sul sito della cliente: un collegamento, col titolo e il credito, che si apre sul loro canale. */ .video-altrove{display:flex;align-items:center;gap:1.1rem;padding:1.1rem 1.3rem;text-decoration:none; border:1px solid var(--line);border-radius:var(--radius-l);background:var(--surface);box-shadow:var(--shadow); color:inherit;transition:border-color .2s ease,transform .2s ease} .video-altrove:hover{border-color:var(--rose);transform:translateY(-2px)} .video-altrove .play{flex:0 0 auto;width:46px;height:46px;border-radius:50%;background:var(--rose);color:#fff; display:grid;place-items:center} .video-altrove .play svg{width:22px;height:22px;margin-left:2px} .video-altrove-testo{display:flex;flex-direction:column;gap:.15rem;min-width:0} .video-altrove-testo b{font-family:var(--font-display);font-size:1.05rem} .video-altrove-testo small{font-size:.8rem;color:var(--ink-soft)}