/* ==========================================================================
Giuseppe & Ilaria — Wedding SPA
Foglio di stile — revisione tipografica, responsive e di contrasto
========================================================================== */
/* ---------------- Design tokens ---------------- */
:root {
/* Palette 1, "Affreschi antichi": toni polverosi e sbiaditi, come gli
affreschi medievali e i muri di pietra. Blu polvere #8FA6B8,
terracotta #BD6856, ocra #AF8438, salvia #A1B399, pietra #DCD3C2. */
/* Superfici */
--color-bg: #F7F4EE; /* pietra, schiarita a fondo pagina */
--color-bg-alt: #EFE9DF;
/* Blu polvere: le fasce colorate (FAQ, footer, cerimonia, menu). È
chiaro, quindi sopra ci va sempre l'inchiostro scuro. (I nomi
--color-baby* restano per compatibilità.) */
--color-baby: #8FA6B8;
--color-baby-light: #D9E1E7;
--color-forest: #8FA6B8; /* fascia FAQ: sfumatura blu polvere */
--color-forest-light: #A3B6C4;
--color-dark: #2F3E4C; /* inchiostro profondo ~10:1 sulla pietra */
/* Inchiostri */
--color-text: #2E2B27; /* corpo, grafite calda ~13:1 */
--color-text-soft: #5A5247; /* secondario ~6.8:1 */
--color-heading: #3E5568; /* titoli minori, blu polvere profondo ~7:1 */
--color-accent-ink: #8A6526; /* occhielli e corsivi: ocra profonda ~4.8:1 */
--color-ochre: #AF8438; /* ocra della palette: solo corsivi grandi */
--color-terracotta: #BD6856;
--color-primary: #3E5568;
--color-accent: #A1B399; /* salvia: dettagli */
--color-accent-deep: #6F8799; /* linee, bordi, focus ~3.5:1 */
--color-accent-soft: #E4E9DF; /* salvia tenue: selezione, hover */
--color-on-baby: #1F2A33; /* testo sul blu polvere ~5.7:1 */
--color-text-invert: #1F2A33; /* testo delle fasce colorate */
--color-btn: #A95847; /* pulsanti terracotta, scritta bianca ~5:1 */
--color-btn-hover: #94493A;
--color-btn-text: #FFFFFF;
/* Tipografia */
--font-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
--font-script: 'Alex Brush', 'Segoe Script', cursive;
--font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-digital: 'Share Tech Mono', 'Courier New', monospace;
/* Ritmo */
--space-section: clamp(72px, 9vw, 118px);
--gutter: clamp(20px, 5vw, 32px);
--nav-h: 76px;
/* altezza della barra dopo lo scroll (è più compatta della versione
iniziale): è su questa che si tarano gli ancoraggi del menu */
--nav-h-scrolled: 56px;
/* Raggi "acquerello": irregolari ma controllati, coerenti in tutto il sito */
--r-sm: 10px 8px 11px 9px / 9px 11px 8px 10px;
--r-md: 18px 14px 20px 16px / 16px 20px 14px 18px;
--r-lg: 26px 20px 28px 22px / 22px 28px 20px 26px;
--r-pill: 40px 36px 42px 38px / 38px 42px 36px 40px;
--shadow-sm: 0 8px 22px rgba(64, 52, 36, 0.06);
--shadow-md: 0 16px 38px rgba(64, 52, 36, 0.08);
--shadow-lg: 0 24px 56px rgba(64, 52, 36, 0.10);
--transition: 0.45s cubic-bezier(.22,.61,.36,1);
/* solo chiaro: blocca l'inversione automatica dei colori (Chrome per
Android, Samsung Internet) che rendeva il sito scuro su alcuni telefoni */
color-scheme: only light;
}
/* ---------------- Reset / base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
/* la barra di scorrimento c'è sempre, anche sulla pagina del PIN che non
scorre: senza, dove la barra è visibile (Windows, Mac con il mouse)
"G & I" si spostava di qualche pixel passando dal PIN al sito. Dove le
barre sono sovrapposte (Mac, telefoni) non cambia nulla. */
overflow-y: scroll;
scrollbar-gutter: stable;
scroll-behavior: smooth;
scroll-padding-top: var(--nav-h-scrolled);
-webkit-text-size-adjust: 100%;
/* evita il "rimbalzo" elastico dello scroll oltre il bordo del documento:
su trackpad/mouse rivela per un istante lo sfondo oltre il contenuto
reale, dando l'impressione di uno spazio vuoto residuo. */
overscroll-behavior-y: none;
}
body {
margin: 0;
font-family: var(--font-serif);
/* 19px: il Cormorant ha l'occhio piccolo, sotto questa misura stanca */
font-size: 1.1875rem;
color: var(--color-text);
background: var(--paper), var(--color-bg);
overflow-x: clip;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* blocca lo scorrimento del corpo pagina mentre il menu mobile è aperto */
body.nav-open, body:has(#navMenu.open) { overflow: hidden; }
/* la pagina scorre dall'elemento (vedi overflow-y sopra): il blocco va anche lì */
html:has(body.nav-open), html:has(#navMenu.open) { overflow: hidden; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; text-decoration: none; }
:where(a, button, summary, input, select, textarea):focus-visible {
outline: 2px solid var(--color-accent-deep);
outline-offset: 3px;
border-radius: 3px;
}
::selection { background: var(--color-accent-soft); color: var(--color-text); }
h1, h2, h3, h4 { font-weight: 500; margin: 0; line-height: 1.18; }
h2 {
font-size: clamp(1.95rem, 1.2rem + 2.4vw, 3.1rem);
line-height: 1.14;
letter-spacing: 0.005em;
margin-bottom: 0.45em;
text-wrap: balance;
}
/* Sottotitolo in corsivo sotto un titolo di sezione */
h2 + .subtitle {
font-family: var(--font-script);
font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem);
line-height: 1.3;
color: var(--color-accent-ink);
margin: -0.2em 0 0.9em;
}
h3.place-name {
font-family: var(--font-script);
font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.5rem);
line-height: 1.32; /* evita il taglio degli svolazzi */
padding-bottom: 0.08em;
color: var(--color-accent-ink);
font-weight: 400;
margin-bottom: 0.5em;
}
.section-dark h3.place-name,
.section-forest h3.place-name { color: var(--color-heading); }
p {
line-height: 1.7;
color: var(--color-text-soft);
margin: 0 0 0.85em;
text-wrap: pretty;
}
p:last-child { margin-bottom: 0; }
strong { color: var(--color-text); font-weight: 600; }
/* Sui fondi blu il grassetto deve schiarire, non scurire: con l'inchiostro
scuro il contrasto scendeva a 2,6:1, sotto la soglia di leggibilità. */
.section-dark strong, .section-forest strong { color: var(--color-on-baby); }
.light, .light-body, .light-body strong { color: var(--color-text-invert); }
.light-body { color: var(--color-on-baby); }
.kicker {
font-family: var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.8rem;
font-weight: 500;
line-height: 1.6;
color: var(--color-accent-ink);
margin-bottom: 0.7em;
}
.kicker-light { color: var(--color-on-baby); }
/* ---------------- Layout ---------------- */
.container {
position: relative;
z-index: 3;
max-width: 1160px;
margin: 0 auto;
padding-inline: var(--gutter);
}
.container.narrow { max-width: 780px; }
.container.center, .split-text.center { text-align: center; }
/* nelle colonne affiancate alla mappa il testo resta leggibile: centrato
ma non troppo largo */
.split-text.center .lead, .split-text.center p { margin-inline: auto; }
.section { position: relative; padding-block: var(--space-section); }
/* Ancoraggi del menu: il salto deve fermarsi con il fregio poco sotto la
barra. Lo spazio sopra il titolo è già dato dal padding della sezione,
quindi qui lo si sottrae, lasciando solo i 32px di respiro. */
main > section { scroll-margin-top: calc(32px - var(--space-section)); }
.section-cream { background: var(--paper), var(--color-bg); }
.section-dark { background: var(--color-baby); }
.section-forest {
background: linear-gradient(162deg, var(--color-forest) 0%, var(--color-forest-light) 100%);
}
/* Il paragrafo introduttivo si allinea al titolo nei blocchi allineati a
sinistra, e resta centrato solo dove lo è anche il resto. */
.lead {
font-size: clamp(1.2rem, 1.12rem + 0.35vw, 1.35rem);
max-width: 62ch;
margin-inline: 0;
margin-bottom: 1em;
}
.center .lead { margin-inline: auto; }
.note {
font-style: italic;
font-size: 1.05rem;
max-width: 62ch;
margin-top: 1.7em;
}
.center .note { margin-inline: auto; }
/* ---------------- Dettagli dagli affreschi del Monastero ---------------- */
/* Due motivi ridisegnati dagli affreschi di Santo Spirito, nei toni della
Palette 1: il fregio dell'arco del soffitto (ovali salvia e rombi
terracotta tra filetti ocra) e le strisce verticali della parete
(terracotta, ocra, salvia, bianco calce). Sono tasselli SVG in images/
che si ripetono in orizzontale; bordi mossi e patina sbiadita sono già
dentro il disegno. */
:root {
--fresco-fregio: url('../images/fresco-fregio.svg?v=2');
--fresco-strisce: url('../images/fresco-strisce.svg?v=2');
}
/* il fregio dell'arco: come una cornice che apre la Storia e il footer */
#storia::before,
#footer::before {
content: '';
position: absolute; left: 0; right: 0; top: 0;
height: clamp(26px, 2.6vw, 36px);
background: var(--fresco-fregio) 0 0 / auto 100% repeat-x;
opacity: 0.9;
pointer-events: none;
z-index: 2;
}
/* le strisce della parete: un nastro in alto e in basso nella fascia FAQ */
#faq::before,
#faq::after {
content: '';
position: absolute; left: 0; right: 0;
height: clamp(14px, 1.4vw, 20px);
background: var(--fresco-strisce) 0 0 / auto 100% repeat-x;
opacity: 0.85;
pointer-events: none;
z-index: 2;
}
#faq::before { top: 0; }
#faq::after { bottom: 0; background-position: 190px 0; }
/* il Ricevimento è al Monastero: il fregio dell'arco apre e chiude la
sezione, e le strisce della parete fanno da bordo alla scheda del testo */
#ricevimento::before,
#ricevimento::after {
content: '';
position: absolute; left: 0; right: 0;
height: clamp(26px, 2.6vw, 36px);
background: var(--fresco-fregio) 0 0 / auto 100% repeat-x;
opacity: 0.9;
pointer-events: none;
z-index: 2;
}
#ricevimento::before { top: 0; }
#ricevimento::after { bottom: 0; background-position: 120px 0; }
@media (min-width: 901px) {
#ricevimento .split-text { position: relative; overflow: hidden; }
#ricevimento .split-text::before {
content: '';
position: absolute; left: 0; right: 0; top: 0;
height: 12px;
background: var(--fresco-strisce) 0 0 / auto 100% repeat-x;
opacity: 0.85;
pointer-events: none;
}
}
/* il logo del Monastero al posto del nome in corsivo, sotto "Poi si
festeggia": sta sul fondo chiaro della scheda, dove si legge bene */
h3.place-logo { line-height: 0; padding-bottom: 0; margin: 0.4em 0 1.1em; }
h3.place-logo img {
display: block;
width: min(320px, 92%);
height: auto;
margin-inline: auto;
}
/* e un filo sul bordo alto della scheda del regalo */
.gift-card { position: relative; overflow: hidden; }
.gift-card::before {
content: '';
position: absolute; left: 0; right: 0; top: 0;
height: 9px;
background: var(--fresco-strisce) 0 0 / auto 100% repeat-x;
opacity: 0.8;
pointer-events: none;
}
/* ---------------- Tessitura carta (acquarello) ---------------- */
/* Prima era un velo fisso a tutto schermo in mix-blend-mode: multiply,
che costringeva il browser a rifondere l'intera pagina a ogni
fotogramma di scroll. Ora è un tassello di sfondo sulle superfici
chiare: si disegna una volta e scorre col contenuto. */
:root {
--paper: url("data:image/svg+xml;utf8,");
}
@media (max-width: 900px) {
:root { --paper: none; }
}
/* ---------------- Fregio goffrato ---------------- */
/* Rosa toile tra due piume d'acanto (#emb-fregio, 260x84): è simmetrico,
quindi non va mai ribaltato (la luce del rilievo verrebbe invertita).
Il fregio segue l'allineamento del blocco: centrato dove il testo è
centrato, a filo del titolo dove il testo è allineato a sinistra. */
.floral-divider { display: flex; justify-content: flex-start; }
.center .floral-divider, #footer .floral-divider { justify-content: center; }
.floral-divider .floral-flourish { margin-inline: 0; }
.center .floral-divider .floral-flourish { margin-inline: auto; }
.floral-flourish {
display: block;
width: clamp(170px, 18vw, 210px);
height: auto;
margin: 0 auto 14px;
opacity: 0.9;
}
.floral-flourish--sm { width: clamp(150px, 15vw, 176px); margin-bottom: 11px; }
.floral-flourish--hero { width: clamp(200px, 26vw, 260px); margin-bottom: 20px; opacity: 1; }
/* Parallasse guidato dallo scroll: il browser lo calcola insieme allo
scorrimento, senza JavaScript e senza il ritardo di un fotogramma.
Dove animation-timeline non è supportato gli elementi restano fermi. */
@keyframes parallax-drift {
from { transform: translate3d(0, calc(var(--drift, 0px) * -1), 0); }
to { transform: translate3d(0, var(--drift, 0px), 0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-bg-photo, .section-bg-photo { animation: none; }
}
/* ---------------- Loader ---------------- */
/* Schermata d'apertura: le iniziali su fondo chiaro, che si dissolvono
con calma lasciando il sito. È la stessa che chiude la pagina del PIN
(.pin-intro), così il passaggio dal PIN al sito è un'unica dissolvenza.
Appena entrati dal PIN (html.dal-pin) le iniziali sono già al loro posto
e la schermata resta un attimo di più prima di dissolversi. */
.intro {
position: fixed; top: 0; right: 0; bottom: 0; left: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px;
background:
radial-gradient(130% 110% at 50% 28%, rgba(247, 244, 238, 0.85) 0%, rgba(247, 244, 238, 0.97) 55%, var(--color-bg) 100%),
var(--color-bg);
}
.intro-flourish { width: clamp(150px, 34vw, 210px); height: auto; opacity: 0.9; }
.loader-monogram {
font-family: var(--font-script); /* le iniziali disegnate in Snell (.scritta) */
font-size: clamp(3.4rem, 13vw, 5rem);
line-height: 1.2;
padding-bottom: 0.08em; /* spazio per gli svolazzi bassi */
color: var(--color-dark);
}
.loader-monogram .amp { color: var(--color-accent-ink); font-size: 0.7em; margin: 0 0.18em; }
/* Nella schermata d'apertura G ♥ I sono messi a misura fissa, senza spazi
né linea di base del testo: dipendevano dal carattere, che sul sito
arriva un attimo dopo il primo disegno (il server lo fa sempre
ricontrollare), e passando dal PIN al sito le iniziali facevano uno
scatto, diverso da telefono a telefono. Le misure ricalcano quelle di
prima, col carattere caricato. */
html:not(.retro80) .intro .loader-monogram {
display: flex; justify-content: center; align-items: flex-start;
height: 1.28em; /* con lo spazio per gli svolazzi bassi */
}
html:not(.retro80) .intro .loader-monogram > span { display: block; }
html:not(.retro80) .intro .loader-monogram .scritta { display: block; margin-top: 0.12em; }
html:not(.retro80) .intro .loader-monogram .amp { margin: 0 0.463em; } /* 0.324em delle iniziali */
html:not(.retro80) .intro .loader-monogram .cuore { display: block; margin-top: 0.553em; }
#loader {
z-index: 9999;
transition: opacity 0.9s cubic-bezier(.4, 0, .2, 1), visibility 0.9s;
/* rete di sicurezza: sparisce comunque, anche se il JavaScript non parte
o una risorsa resta appesa */
animation: loaderOut 0.9s ease 2s forwards;
}
@keyframes loaderOut {
to { opacity: 0; visibility: hidden; pointer-events: none; }
}
#loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
/* dissolvendosi, le iniziali restano ferme: niente ingrandimento, che sui
tratti sottili dello Snell si vedeva a scatti (diversi da schermo a schermo).
Un livello a sé, così la dissolvenza non ridisegna il disegno a ogni passo. */
#loader { will-change: opacity; }
/* visita normale: le iniziali compaiono piano */
#loader .loader-monogram,
#loader .intro-flourish { animation: introIn 0.9s ease both; }
#loader .intro-flourish { animation-delay: 0.1s; }
html.dal-pin #loader :is(.loader-monogram, .intro-flourish) { animation: none; }
@keyframes introIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* pagina del PIN: le iniziali compaiono mentre la tessera svanisce */
.pin-intro {
z-index: 6000;
opacity: 0;
pointer-events: none;
transition: opacity 0.55s ease 0.3s;
}
.pin-intro.is-shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
#loader :is(.loader-monogram, .intro-flourish) { animation: none; }
}
/* ---------------- Navbar ---------------- */
#navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
padding-block: 18px;
transition: background var(--transition), padding var(--transition), box-shadow var(--transition);
}
/* velo appena percettibile: tiene leggibile il menu anche sopra la foto */
#navbar::before {
content: '';
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(180deg, rgba(247, 244, 238, 0.78), rgba(247, 244, 238, 0));
opacity: 1;
transition: opacity var(--transition);
pointer-events: none;
}
#navbar.scrolled {
background: rgba(247, 244, 238, 0.97);
padding-block: 10px;
box-shadow: 0 2px 18px rgba(64, 52, 36, 0.07);
}
#navbar.scrolled::before { opacity: 0; }
.nav-inner {
position: relative;
max-width: 1160px; margin: 0 auto;
padding-inline: var(--gutter);
display: flex; align-items: center; justify-content: space-between;
gap: 24px;
}
.nav-logo {
flex: none;
font-family: var(--font-script); /* le iniziali disegnate in Snell (.scritta) */
font-size: 1.9rem;
line-height: 1;
white-space: nowrap; /* niente più "G &" a capo su "I" */
/* stessi colori e spaziature del monogramma nel footer */
color: var(--color-on-baby);
transition: color var(--transition);
}
.nav-logo .amp { color: var(--color-dark); margin: 0 0.2em; }
#navMenu {
list-style: none; display: flex; align-items: center;
/* con otto voci la riga sta comoda: sotto i 1080px subentra il drawer.
Non oltre 20px: la barra è larga al massimo 1160px e, con spazi più
ampi, sui monitor grandi il menu arrivava sotto il pulsante Musica */
gap: clamp(14px, 1.7vw, 20px);
margin: 0; padding: 0;
}
.nav-link {
display: inline-block;
font-family: var(--font-sans);
font-size: 0.76rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
white-space: nowrap; /* le voci restano su una riga sola */
color: var(--color-text);
position: relative;
padding-block: 6px;
transition: color var(--transition);
}
.nav-link::after {
content: ''; position: absolute; left: 0; bottom: 0;
width: 0; height: 1px; background: var(--color-accent-deep);
transition: width 0.35s ease;
}
.nav-link:hover::after, .nav-link:focus-visible::after { width: 100%; }
.nav-cta {
border: 1px solid var(--color-accent-deep);
color: var(--color-accent-ink);
padding: 8px 18px;
border-radius: 999px;
transition: background var(--transition), color var(--transition);
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--color-btn); border-color: var(--color-btn); color: var(--color-btn-text); }
#navToggle {
display: none;
position: relative; z-index: 2; /* la X resta visibile sopra al drawer */
flex-direction: column; justify-content: center; align-items: center; gap: 5px;
width: 44px; height: 44px; margin-right: -10px;
background: none; border: none; cursor: pointer; padding: 0;
}
#navToggle span {
height: 2px; width: 24px; background: var(--color-text); border-radius: 2px;
transition: transform 0.3s ease, opacity 0.2s ease, background 0.3s ease;
}
#navToggle.open span { background: var(--color-text-invert); }
/* Velo scuro dietro al drawer del menu mobile */
#navbar::after {
content: '';
position: fixed; top: 0; right: 0; bottom: 0; left: 0;
z-index: 0;
background: rgba(8, 36, 72, 0.46);
opacity: 0; visibility: hidden;
transition: opacity var(--transition), visibility var(--transition);
pointer-events: none;
}
#navbar:has(#navMenu.open)::after { opacity: 1; visibility: visible; }
/* ---------------- Hero ---------------- */
#hero {
position: relative;
z-index: 3;
min-height: 100svh;
display: flex; align-items: center; justify-content: center;
padding-block: calc(var(--nav-h) + 24px) 96px;
overflow: clip;
}
@supports not (min-height: 100svh) {
#hero { min-height: 100vh; }
}
.hero-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; overflow: clip; view-timeline-name: --bg; }
.hero-bg-photo {
position: absolute;
left: 0; right: 0;
/* -1% e non -8%: i volti della coppia cadono nello spazio tra i nomi e
il countdown invece che sotto i nomi (la cima del disegno è carta
bianca, lo spazio sopra non si nota) */
top: -1%; height: 116%;
background-image: url('../images/hero-terrazza-sposi-1200.webp?v=2');
background-size: cover;
background-position: 58% 38%;
filter: saturate(0.94) contrast(1.02);
will-change: transform;
--drift: 6%;
animation: parallax-drift linear both;
animation-timeline: --bg;
}
/* Su schermi larghi il disegno è in scala minore: scende ancora un poco */
@media (min-width: 901px) and (min-aspect-ratio: 5/4) {
.hero-bg-photo { top: 2%; }
}
/* Velo verticale + alone centrale: la foto resta visibile, il testo guadagna
il contrasto che prima gli mancava. */
.hero-overlay {
position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
background:
radial-gradient(ellipse 70% 62% at 50% 52%, rgba(247, 244, 238, 0.62) 0%, rgba(247, 244, 238, 0.20) 58%, rgba(247, 244, 238, 0) 78%),
linear-gradient(180deg, rgba(247, 244, 238, 0.55) 0%, rgba(247, 244, 238, 0.10) 26%, rgba(247, 244, 238, 0.10) 62%, rgba(247, 244, 238, 0.62) 100%);
}
.hero-content {
position: relative; z-index: 2;
width: 100%;
max-width: 900px;
text-align: center;
color: var(--color-text);
padding-inline: var(--gutter);
}
.eyebrow {
font-family: var(--font-sans); text-transform: uppercase;
letter-spacing: 0.26em; font-size: clamp(0.66rem, 0.6rem + 0.3vw, 0.76rem);
font-weight: 500; line-height: 1.7;
color: var(--color-dark);
margin-bottom: 1.2em;
text-shadow: 0 1px 12px rgba(247, 244, 238, 0.95);
}
/* Nomi e iniziali in Snell Roundhand, come disegni (SVG, generati da
tools/scritte-snell.py): sul sito non c'è il file del carattere. Il
disegno è alto 1em come una riga di testo, con la linea di base al posto
giusto; il colore è quello del testo intorno. Il testo vero resta, nascosto
alla vista, per i lettori di schermo, la ricerca e la versione anni '80. */
.scritta {
display: inline-block;
height: 1em;
vertical-align: -0.32em;
overflow: visible;
fill: currentColor;
}
.scritta-testo {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.eyebrow[hidden] { display: none; }
/* la frase che porta al conto alla rovescia ("…vi aspettiamo tra"):
stesso carattere dell'occhiello (maiuscoletto spaziato) */
.hero-attesa {
max-width: 46em;
margin: 0.4em auto 1.3em;
font-family: var(--font-sans); text-transform: uppercase;
letter-spacing: 0.26em; font-size: clamp(0.66rem, 0.6rem + 0.3vw, 0.76rem);
font-weight: 500; line-height: 1.7;
color: var(--color-dark);
text-wrap: balance;
text-shadow: 0 1px 12px rgba(247, 244, 238, 0.95), 0 0 6px rgba(247, 244, 238, 0.9);
}
.hero-attesa strong { font-weight: 700; }
html.giorno-nozze .hero-attesa, html.dopo-nozze .hero-attesa { display: none; }
.hero-names {
/* i nomi degli sposi: disegnati in Snell Roundhand (vedi .scritta); il carattere
qui sotto vale solo se il disegno mancasse */
font-family: var(--font-script);
/* lo Snell è molto più largo dell'Alex Brush e ha svolazzi più alti: più
piccolo (sul telefono stretto i due nomi stanno su una riga) e più spazio
sopra, così le aste alte non toccano la frase */
font-size: clamp(2.7rem, 0.9rem + 8.3vw, 5.7rem);
line-height: 1.1;
padding-top: 0.22em;
padding-bottom: 0.06em; /* spazio per gli svolazzi bassi */
display: flex; align-items: baseline; justify-content: center;
gap: 0.22em; flex-wrap: wrap;
text-shadow: 0 2px 26px rgba(247, 244, 238, 0.9), 0 0 10px rgba(247, 244, 238, 0.85);
}
.hero-names .amp { color: var(--color-ochre); font-size: 0.66em; }
html:not(.retro80) .hero-names { flex-wrap: nowrap; white-space: nowrap; } /* i due nomi su una riga, con le iniziali maiuscole */
/* Il cuore al posto della "&" (nomi e iniziali): sempre dorato, l'ocra
della palette, ovunque compaia. Per i lettori di schermo resta la "&"
("Giuseppe e Ilaria"). Nella veste anni '80 torna la "&" al neon
(css/retro80.css). */
.amp .cuore {
display: inline-block;
width: 0.62em; height: 0.57em;
color: var(--color-ochre);
fill: currentColor;
vertical-align: 0.02em;
}
.hero-names .amp .cuore { width: 0.6em; height: 0.55em; vertical-align: 0.12em; }
/* batte piano, come un cuore a riposo: due piccoli colpi e una pausa.
Tutti i cuori battono insieme: js/cuori.js allinea il battito
all'orologio, così restano a tempo anche tra la pagina del PIN e il sito */
.amp .cuore {
transform-origin: 50% 60%;
animation: cuoreBatte 2.4s ease-in-out infinite;
}
@keyframes cuoreBatte {
0%, 40%, 100% { transform: scale(1); }
12% { transform: scale(1.18); }
24% { transform: scale(1.04); }
32% { transform: scale(1.12); }
}
/* nella schermata d'apertura il cuore sta fermo: dal PIN al sito il battito
ripartiva da capo e le iniziali sembravano fare uno scatto */
.intro .amp .cuore { animation: none; }
@media (prefers-reduced-motion: reduce) { .amp .cuore { animation: none; } }
.amp-testo {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
.pin-gate-title .amp { color: var(--color-ochre); margin: 0 0.15em; }
.hero-divider { margin: 1.1em auto 1.3em; display: flex; justify-content: center; }
/* il filo passerebbe proprio sui volti degli sposi: resta solo lo spazio */
#hero .hero-divider { visibility: hidden; margin: 0.2em auto 0.4em; } /* invisibile: occupa poco, i nomi stanno vicini alla frase */
.hero-divider-line { width: 118px; height: 12px; }
.hero-date {
position: relative;
z-index: 0;
margin: 1.7em 0 0;
text-align: center;
}
/* Velo appena accennato, senza bordi né ombre: serve solo ad alzare la luce
sotto le lettere dove la foto si fa scura (lì l'inchiostro scendeva a
3,6:1). Sfuma nel nulla, quindi non si legge come una targhetta. */
.hero-date::before {
content: '';
position: absolute;
top: -22px; right: -12%; bottom: -22px; left: -12%;
z-index: -1;
background: radial-gradient(58% 130% at 50% 50%,
rgba(247, 244, 238, 0.92) 0%,
rgba(247, 244, 238, 0.72) 45%,
rgba(247, 244, 238, 0) 100%);
}
/* l'orario accanto alla data; sul telefono va sotto, senza puntino */
.hero-date-ora { white-space: nowrap; }
@media (max-width: 520px) {
.hero-date-ora { display: block; }
.hero-date-punto { display: none; }
}
.hero-date-day {
display: block;
font-family: var(--font-serif);
font-size: clamp(1.12rem, 1rem + 0.7vw, 1.5rem);
font-weight: 500;
letter-spacing: 0.015em;
line-height: 1.3;
color: var(--color-text);
}
.hero-cal {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 1.3em;
min-height: 44px;
padding: 6px 14px;
font-family: var(--font-sans);
font-size: 0.78rem; font-weight: 500;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--color-dark);
border-bottom: 1px solid rgba(47, 62, 76, 0.35);
text-shadow: 0 1px 10px rgba(247, 244, 238, 0.95);
transition: color var(--transition), border-color var(--transition);
}
.hero-cal:hover { color: var(--color-heading); border-color: var(--color-heading); }
.hero-cal svg {
width: 17px; height: 17px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
.hero-date-place {
display: block;
margin-top: 0.55em;
font-family: var(--font-sans);
font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
/* blu profondo, non l'azzurro degli occhielli: sulla foto quello scendeva
a 2,8:1 */
color: var(--color-dark);
}
/* ---------------- Countdown ---------------- */
/* Quattro targhette leggibili: cifre allineate (lining + tabular), piano di
appoggio semitrasparente, etichette ad alto contrasto. Restano su una
riga sola a qualsiasi larghezza. */
.countdown {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(8px, 1.6vw, 18px);
width: min(520px, 100%);
margin: 0 auto 2.4em;
}
.cd-item {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px;
padding: clamp(10px, 2vw, 16px) 4px clamp(8px, 1.6vw, 13px);
background: rgba(247, 244, 238, 0.88);
border: 1px solid rgba(111, 135, 153, 0.30);
border-radius: var(--r-md);
box-shadow: 0 10px 26px rgba(64, 52, 36, 0.10);
}
.cd-num {
/* --odo-h: altezza della finestra di ogni cifra; guida sia il ritaglio
sia lo scorrimento del rullo. */
--odo-h: 1.16em;
--odo-speed: 0.68s;
--odo-ease: cubic-bezier(.45, .05, .25, 1);
font-family: var(--font-digital);
font-size: clamp(1.75rem, 1rem + 3.1vw, 3rem);
font-weight: 400;
line-height: 1;
color: var(--color-dark);
font-variant-numeric: lining-nums tabular-nums;
font-feature-settings: "lnum" 1, "tnum" 1;
letter-spacing: 0.04em;
}
/* ---- Rulli tipo contachilometri ---- */
.odo {
display: inline-flex;
align-items: stretch;
height: var(--odo-h);
gap: 0.02em;
}
.odo-digit {
position: relative;
overflow: hidden;
height: var(--odo-h);
/* accenna al bordo del tamburo senza tagliare la cifra al centro */
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
}
.odo-reel {
display: flex;
flex-direction: column;
will-change: transform;
transform: translate3d(0, calc(var(--i, 0) * var(--odo-h) * -1), 0);
transition: transform var(--odo-speed) var(--odo-ease);
}
.odo-reel.is-instant { transition: none; }
.odo-n {
display: flex;
align-items: center;
justify-content: center;
height: var(--odo-h);
line-height: 1;
font-variant-numeric: lining-nums tabular-nums;
font-feature-settings: "lnum" 1, "tnum" 1;
}
/* valore in chiaro per le tecnologie assistive */
.odo-sr {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden; white-space: nowrap;
clip: rect(0 0 0 0); clip-path: inset(50%);
}
@media (prefers-reduced-motion: reduce) {
.odo-reel { transition: none; }
.odo-digit { -webkit-mask-image: none; mask-image: none; }
}
.cd-label {
font-family: var(--font-sans);
font-size: clamp(0.66rem, 0.6rem + 0.24vw, 0.72rem); /* mai sotto i 10,5px */
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
line-height: 1.2;
color: var(--color-text-soft);
}
/* ---------------- Il giorno delle nozze ----------------
Il 4 giugno 2027 (classe giorno-nozze, da index.html) il conto alla
rovescia e "Ci sarete?" lasciano il posto al riquadro #oggi; dal giorno
dopo (dopo-nozze) al grazie con le foto. */
/* risposte chiuse (dal 6 aprile 2027, classe rsvp-chiuso da index.html) */
html.rsvp-chiuso .solo-rsvp { display: none !important; }
/* il 4 giugno dalle 9 alle 14 niente musica: spariscono i pulsanti */
html.musica-vietata :is(#musicaClassica, #vhsMusic) { display: none !important; }
/* finita la festa (dalle 23:00 del 4 giugno 2027, classe dopo-nozze) */
html.dopo-nozze .fino-alle-nozze, html.dopo-nozze .hero-cal { display: none !important; }
html.giorno-nozze .countdown, html.dopo-nozze .countdown,
html.giorno-nozze .hero-rsvp, html.dopo-nozze .hero-rsvp { display: none; }
.oggi {
width: min(520px, 100%);
margin: 0 auto 2.2em;
padding: clamp(18px, 3vw, 26px) clamp(16px, 3vw, 28px);
background: rgba(247, 244, 238, 0.9);
border: 1px solid rgba(111, 135, 153, 0.3);
border-radius: var(--r-md);
box-shadow: 0 10px 26px rgba(64, 52, 36, 0.1);
text-align: center;
}
.oggi[hidden] { display: none; }
.oggi-kicker {
margin: 0 0 10px;
font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--color-btn);
}
.oggi-adesso {
margin: 0;
font-family: var(--font-serif); font-size: clamp(1.45rem, 1.1rem + 1.4vw, 1.9rem); line-height: 1.25;
color: var(--color-dark);
}
.oggi-poi {
margin: 10px 0 0;
font-family: var(--font-serif); font-size: 1.12rem; line-height: 1.35;
color: var(--color-text-soft);
}
.oggi-quando {
display: block;
margin-bottom: 2px;
font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--color-accent-ink);
}
.oggi-nota { display: block; margin-top: 4px; font-size: 1.05rem; color: var(--color-text-soft); }
.oggi-azioni { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.oggi-azioni .btn { flex: 1 1 200px; padding-inline: 20px; }
.oggi-azioni .btn[hidden] { display: none; }
.oggi-strada { background: rgba(255, 255, 255, 0.6); }
/* ---------------- Bottoni ---------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 46px;
font-family: var(--font-sans);
font-size: 0.79rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em;
padding: 13px 34px;
cursor: pointer;
text-align: center;
border-radius: var(--r-pill);
border: 1px solid transparent;
transition: background var(--transition), color var(--transition),
border-color var(--transition), box-shadow var(--transition),
transform var(--transition);
}
.btn-primary {
background: var(--color-btn);
color: var(--color-btn-text);
border-color: var(--color-btn);
box-shadow: 0 10px 24px rgba(111, 135, 153, 0.26);
}
.btn-primary:hover {
background: var(--color-btn-hover); border-color: var(--color-btn-hover); color: var(--color-btn-text);
box-shadow: 0 12px 28px rgba(111, 135, 153, 0.34);
}
.btn-outline { border-color: var(--color-heading); color: var(--color-heading); }
.btn-outline:hover { background: var(--color-baby); border-color: var(--color-baby); color: var(--color-on-baby); }
.btn-outline-light { border-color: var(--color-on-baby); color: var(--color-on-baby); }
.btn-outline-light:hover { background: var(--color-on-baby); color: #fff; }
.scroll-cue {
position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
z-index: 2; width: 44px; height: 56px;
display: flex; align-items: flex-start; justify-content: center;
}
.scroll-cue span {
display: block; width: 1px; height: 48px;
background: linear-gradient(180deg, var(--color-dark), transparent);
animation: scrollCue 1.9s ease-in-out infinite;
}
@keyframes scrollCue {
0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
40% { transform: scaleY(1); transform-origin: top; opacity: 0.8; }
60% { transform: scaleY(1); transform-origin: bottom; opacity: 0.8; }
100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}
@media (max-height: 700px) { .scroll-cue { display: none; } }
/* ---------------- Timeline (verticale) ---------------- */
/* Prima era una griglia che lasciava l'ultima voce orfana su una riga tutta
sua; in verticale la sequenza si legge in ordine e regge ogni larghezza. */
/* ---------------- La nostra storia: quattro tappe ---------------- */
/* Stesso filo verticale del programma della giornata, con il numero della
tappa al posto del pallino. */
.story {
list-style: none;
max-width: 640px;
margin: 36px auto 0;
padding: 0;
display: grid;
text-align: left;
}
.story-step {
position: relative;
display: grid;
grid-template-columns: 42px 1fr;
gap: 0 20px;
padding-block: 4px 22px;
}
.story-step:last-child { padding-bottom: 0; }
/* il filo scende dal numero fino alla tappa successiva */
.story-step::before {
content: '';
position: absolute;
left: 21px; top: 46px; bottom: -8px;
width: 1px;
background: rgba(111, 135, 153, 0.4);
}
.story-step:last-child::before { display: none; }
.story-num {
display: flex; align-items: center; justify-content: center;
width: 42px; height: 42px;
border-radius: 50%;
font-family: var(--font-digital);
font-size: 1.05rem;
color: var(--color-heading);
background: #fff;
border: 1px solid rgba(111, 135, 153, 0.4);
box-shadow: 0 6px 16px rgba(64, 52, 36, 0.06);
}
.story-when {
font-family: var(--font-sans);
font-size: 0.76rem; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--color-accent-ink);
margin: 0 0 0.35em;
}
.story-title {
font-family: var(--font-script);
font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
line-height: 1.25;
font-weight: 400;
color: var(--color-heading);
margin: 0 0 0.35em;
padding-bottom: 0.06em; /* spazio per gli svolazzi bassi */
}
.story-body p:not(.story-when) {
margin: 0;
font-size: 1.15rem;
line-height: 1.66;
}
.story-end {
max-width: 620px;
margin: 30px auto 0;
padding: 20px 24px;
background: linear-gradient(150deg, rgba(161, 179, 153, 0.14), rgba(255,255,255,0)), #FFFDF9;
border: 1px solid rgba(47, 62, 76, 0.14);
border-radius: var(--r-md);
text-align: center;
font-style: italic;
color: var(--color-text-soft);
}
.story-end-date {
display: block;
font-family: var(--font-script);
font-style: normal;
font-size: 1.6rem;
line-height: 1.3;
color: var(--color-accent-ink);
margin-bottom: 0.15em;
}
/* ---------------- Programma della giornata ---------------- */
.day-plan {
position: relative;
max-width: 600px;
margin: 38px auto 0;
display: grid;
gap: 0;
text-align: left;
}
.day-step {
display: grid;
grid-template-columns: 4.8rem 22px 1fr;
align-items: start;
gap: 0 16px;
padding-block: 12px;
}
.day-time {
font-family: var(--font-digital);
font-size: 1.2rem;
letter-spacing: 0.02em;
color: var(--color-accent-ink);
text-align: right;
padding-top: 1px;
}
/* filo verticale con il pallino: il tratto si interrompe al primo e ultimo */
.day-mark { position: relative; align-self: stretch; justify-self: center; width: 22px; }
.day-mark::before {
content: ''; position: absolute; left: 50%;
/* sconfina nella spaziatura delle righe, altrimenti il filo si spezza */
top: -15px; bottom: -15px;
transform: translateX(-50%);
/* tinta piena, non trasparente: i tratti di due righe si sovrappongono e
in trasparenza la sovrapposizione si vedeva come una giunta */
width: 1px; background: #D5CCBC;
}
.day-step:first-child .day-mark::before { top: 13px; }
.day-step:last-child .day-mark::before { bottom: calc(100% - 13px); }
.day-mark::after {
content: ''; position: absolute; left: 50%; top: 8px;
transform: translateX(-50%);
width: 10px; height: 10px;
border-radius: 50%;
background: var(--color-bg);
border: 1.5px solid var(--color-accent-deep);
}
.day-step--key .day-mark::after {
background: var(--color-accent-deep);
box-shadow: 0 0 0 4px rgba(111, 135, 153, 0.16);
}
/* il rito: l'unico orario da rispettare, segnato in rosso */
.day-step--rito .day-mark::after {
background: var(--color-terracotta);
border-color: var(--color-terracotta);
box-shadow: 0 0 0 4px rgba(189, 104, 86, 0.18);
}
.day-label {
position: relative;
padding-left: 36px; /* spazio per l'icona */
font-size: 1.22rem;
line-height: 1.4;
color: var(--color-text);
}
.day-ico {
position: absolute; left: 0; top: 0;
width: 25px; height: 25px;
fill: none; stroke: var(--color-accent-deep); stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round;
}
.day-step--key .day-label { color: var(--color-heading); font-weight: 600; font-size: 1.3rem; }
.day-step--key .day-ico { stroke: var(--color-heading); }
.day-note { font-size: 1.02rem; font-weight: 400; color: var(--color-text-soft); display: block; margin-top: 2px; }
/* il rito: anche l'ora e l'icona in rosso */
.day-step--rito .day-time,
.day-step--rito .day-label { color: var(--color-btn); }
.day-step--rito .day-ico { stroke: var(--color-btn); }
/* il viaggio tra chiesa e Monastero: filo tratteggiato, niente orario */
.day-step--travel .day-mark::before {
background: repeating-linear-gradient(180deg, rgba(111, 135, 153, 0.55) 0 4px, transparent 4px 8px);
}
.day-step--travel .day-mark::after { width: 6px; height: 6px; top: 10px; border-width: 1px; }
.day-step--travel .day-label { font-style: italic; color: var(--color-text-soft); font-size: 1.12rem; }
/* il giorno delle nozze: il momento in corso evidenziato, quelli passati più tenui */
.day-step.is-passato { opacity: 0.5; }
.day-step.is-adesso {
position: relative;
border-radius: var(--r-md);
background: rgba(175, 132, 56, 0.1);
box-shadow: 0 0 0 1px rgba(175, 132, 56, 0.35);
}
.day-step.is-adesso .day-time::after {
content: 'Adesso';
display: inline-block;
margin-top: 6px; padding: 3px 8px;
font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600; font-style: normal;
letter-spacing: 0.14em; text-transform: uppercase;
color: #fff; background: var(--color-btn);
border-radius: 999px;
}
.day-step.is-adesso .day-mark::after { animation: adesso 1.8s ease-in-out infinite; }
@keyframes adesso {
50% { box-shadow: 0 0 0 7px rgba(189, 104, 86, 0.22); }
}
@media (prefers-reduced-motion: reduce) { .day-step.is-adesso .day-mark::after { animation: none; } }
.day-step--travel .day-ico { stroke: var(--color-text-soft); }
/* ---------------- Testimoni ---------------- */
/* subgrid: etichette e coppie di schede restano allineate riga per riga tra
le due colonne, qualunque sia la lunghezza dei testi. */
.witness-teams {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto 1fr 1fr;
column-gap: clamp(20px, 3vw, 34px);
row-gap: 16px;
margin-top: 52px;
text-align: left;
}
.witness-team {
display: grid;
grid-row: 1 / span 3;
grid-template-rows: subgrid;
row-gap: 16px;
}
.witness-pair { display: contents; }
@supports not (grid-template-rows: subgrid) {
.witness-teams { grid-template-rows: none; align-items: start; }
.witness-team { display: flex; flex-direction: column; grid-row: auto; gap: 16px; }
.witness-pair { display: flex; flex-direction: column; gap: 16px; }
}
.witness-team-label {
display: block;
text-align: center;
font-family: var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.7rem;
font-weight: 500;
color: var(--color-accent-ink);
padding-bottom: 4px;
}
/* su schermi larghi le schede escono un poco dalla colonna del testo: il
racconto di ognuno sta su due o tre righe invece che su quattro */
@media (min-width: 1000px) {
.witness-teams { margin-inline: -80px; }
}
.witness-card {
height: 100%;
display: flex;
align-items: center;
gap: 20px;
background: radial-gradient(140% 120% at 25% 15%, rgba(161, 179, 153, 0.12), rgba(255,255,255,0) 60%), #FFFDF9;
border: 1px solid rgba(47, 62, 76, 0.14);
border-radius: var(--r-lg);
padding: 22px 24px;
box-shadow: var(--shadow-sm);
transition: transform var(--transition), box-shadow var(--transition);
}
.witness-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.witness-photo {
flex: none;
/* le foto sono di 160 px: fino a 84 restano nitide anche sugli schermi
ad alta densità */
width: 84px; height: 84px;
border-radius: 50%;
object-fit: cover;
background: var(--color-bg-alt);
border: 2px solid #fff;
box-shadow: 0 0 0 1.5px var(--color-accent-soft), var(--shadow-sm);
}
.witness-card h4 {
font-size: 1.32rem;
color: var(--color-heading);
margin-bottom: 0.2em;
}
.witness-card p { font-size: 1.12rem; line-height: 1.55; margin: 0; }
/* ---------------- Sezioni split ---------------- */
.split {
position: relative;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(28px, 4vw, 56px);
align-items: center;
}
.split-reverse .split-text { order: 2; }
.split-reverse .split-media { order: 1; }
/* Pannello di leggibilità sopra le foto di sfondo */
#cerimonia .split-text,
#ricevimento .split-text {
padding: clamp(24px, 3.2vw, 38px);
border-radius: var(--r-lg);
}
#cerimonia .split-text {
background: rgba(239, 233, 223, 0.94);
box-shadow: var(--shadow-md);
}
#ricevimento .split-text {
background: rgba(247, 244, 238, 0.94);
box-shadow: var(--shadow-md);
}
.split-text .btn { margin-top: 0.6em; }
/* ---------------- Foto di sfondo di sezione ---------------- */
.section-bg {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 0;
overflow: clip;
view-timeline-name: --bg;
-webkit-mask-image: radial-gradient(ellipse 80% 74% at 50% 44%, #000 46%, transparent 92%);
mask-image: radial-gradient(ellipse 80% 74% at 50% 44%, #000 46%, transparent 92%);
pointer-events: none;
}
.section-bg::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.section-bg--cerimonia::after {
/* velo leggero: il testo ha già il suo pannello blu, qui deve solo
accordare l'acquerello al resto della pagina */
background: linear-gradient(160deg, rgba(143, 166, 184, 0.22) 0%, rgba(111, 135, 153, 0.38) 100%);
}
.section-bg--ricevimento::after {
background: linear-gradient(160deg, rgba(247, 244, 238, 0.62) 0%, rgba(238,243,249,0.78) 100%);
}
.section-bg-photo {
position: absolute;
left: 0; right: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover; /* prima "contain": l'immagine restava
incompleta e sbordava dietro al testo */
will-change: transform;
animation: parallax-drift linear both;
animation-timeline: --bg;
}
.section-bg--cerimonia .section-bg-photo {
top: -15%; height: 130%;
--drift: 10%; /* 13% della sezione, entro il 15% */
background-image: url('../images/santuario-vallececa-acquerello-900.webp?v=2');
background-position: center 30%;
filter: saturate(0.96) contrast(1.03);
}
.section-bg--ricevimento .section-bg-photo {
top: -8%; height: 116%;
--drift: 6%;
filter: saturate(0.95) contrast(1.02);
}
/* La foto è ritagliata attorno al monastero (vedi README), così l'edificio
resta al centro a qualunque proporzione di schermo; il ritaglio esclude
anche il logo impresso sullo scatto. */
.section-bg--ricevimento .section-bg-photo::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-image: url('../images/monastero-aereo-centrato-800.webp?v=2');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* ---------------- Mappe ---------------- */
.map-frame {
position: relative;
padding-top: 72%;
border-radius: var(--r-md);
overflow: hidden;
background: var(--color-bg-alt); /* niente lampo bianco durante il caricamento */
box-shadow: var(--shadow-lg);
border: 1px solid rgba(111, 135, 153, 0.28);
}
.map-frame iframe,
.map-load {
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
width: 100%; height: 100%;
border: 0;
filter: grayscale(0.12) contrast(1.04);
}
/* Anteprima con l'aspetto dell'embed Waze finché la mappa non viene
richiesta. Lo sfondo è l'immagine reale della mappa in scala 1:1 (760x586
CSS px), centrata come nell'iframe: al tocco il passaggio non fa salti. */
.wz-facade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-family: var(--font-sans); }
.map-load {
display: block;
padding: 0; border: 0;
cursor: pointer;
text-align: left;
color: #1B1F24;
background-color: #F8F6F0;
background-repeat: no-repeat;
background-size: 760px 586px;
background-position: center calc(50% + 5px);
}
.map-load:focus-visible { outline-offset: -3px; }
/* Anteprime delle mappe: su schermi stretti si carica la versione ridotta
(12 KB invece di 28). Stesso criterio per le foto grandi, più sotto. */
.map-load--vallececa { background-image: url('../images/waze-map-vallececa-760.webp?v=2'); }
.map-load--santo-spirito { background-image: url('../images/waze-map-santo-spirito-760.webp?v=2'); }
@media (min-width: 901px) {
.map-load--vallececa { background-image: url('../images/waze-map-vallececa.webp?v=2'); }
.map-load--santo-spirito { background-image: url('../images/waze-map-santo-spirito.webp?v=2'); }
}
.wz-bar {
position: absolute; top: 0; left: 0; right: 0;
height: 26px;
display: flex; align-items: center;
padding-left: 10px;
background: #00CAEB;
}
.wz-logo { width: 92px; height: 21px; }
.wz-expand {
position: absolute; top: 0; right: 4px;
height: 26px;
display: inline-flex; align-items: center; gap: 8px;
padding: 0 10px;
border-radius: 13px;
background: rgba(255,255,255,0.3);
color: #fff;
font-size: 12px; line-height: 1;
white-space: nowrap;
transition: background 0.2s ease;
}
.wz-expand svg { width: 16px; height: 16px; }
.wz-expand:hover { background: rgba(255,255,255,0.45); }
/* come l'embed vero: sui riquadri stretti resta solo l'icona */
@media (max-width: 480px) {
.wz-expand { padding: 0 5px; }
.wz-expand-text {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
}
.map-hint {
position: absolute; top: 44px; left: 50%;
transform: translateX(-50%);
display: inline-flex; align-items: center;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.94);
border-radius: 999px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
color: #1B1F24;
font-size: 13px; font-weight: 500;
white-space: nowrap;
pointer-events: none;
transition: background 0.2s ease;
}
.map-load:hover .map-hint { background: #fff; }
.wz-controls {
position: absolute; right: 12px; bottom: 57px;
display: flex; flex-direction: column; gap: 10px;
}
.wz-zoom { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
.wz-zoom .wz-ctl { border-radius: 0; box-shadow: none; }
.wz-zoom .wz-ctl + .wz-ctl { border-top: 1px solid #E6E8EB; }
.wz-ctl {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
color: #3C4043;
}
.wz-ctl svg { width: 20px; height: 20px; }
.wz-ctl--locate { color: #0099FF; }
.wz-footer {
position: absolute; left: 0; right: 0; bottom: 17px;
height: 20px;
display: flex; align-items: center;
padding-left: 10px;
background: rgba(255,255,255,0.9);
color: #55595F;
font-size: 10px;
}
.wz-attrib {
position: absolute; left: 0; right: 0; bottom: 0;
height: 17px;
display: flex; align-items: center; justify-content: center;
background: #fff;
color: #55595F;
font-size: 10px;
}
/* ---------------- Lista nozze ---------------- */
.gift-card {
background: radial-gradient(130% 130% at 25% 15%, rgba(161, 179, 153, 0.16), rgba(255,255,255,0) 60%), #FFFDF9;
border: 1px solid rgba(111, 135, 153, 0.34);
border-radius: var(--r-lg);
padding: clamp(28px, 4vw, 44px);
margin-top: 40px;
max-width: 620px;
margin-inline: auto;
box-shadow: var(--shadow-md);
}
.gift-label {
font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.16em;
font-size: 0.76rem; font-weight: 500; color: var(--color-accent-ink);
margin-bottom: 1.4em;
}
.gift-detail {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
gap: 6px 10px;
font-size: 1.12rem; color: var(--color-text);
margin: 0 0 0.7em;
}
.gift-iban {
font-family: var(--font-sans);
letter-spacing: 0.04em;
white-space: nowrap;
-webkit-user-select: all; user-select: all; /* un tocco lo seleziona tutto */
}
.gift-note { font-size: 0.98rem; font-style: italic; margin: 1.4em 0 0; }
/* WhatsApp degli sposi, sotto lo specchietto dell'IBAN */
.gift-contacts {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 12px 14px;
margin-top: 26px;
}
.wa-btn { flex: 1 1 0; max-width: 210px; min-width: 0; gap: 10px; padding: 5px 18px 5px 8px; }
/* icona WhatsApp nei colori originali: resta verde anche al passaggio */
.wa-btn svg { width: 36px; height: 36px; flex: none; }
.placeholder-text {
background: rgba(111, 135, 153, 0.14);
padding: 3px 9px; border-radius: 5px;
font-family: var(--font-sans); font-size: 0.86rem;
font-variant-numeric: lining-nums tabular-nums;
color: var(--color-text);
word-break: break-word;
}
/* ---------------- FAQ ---------------- */
.faq-list { margin-top: 48px; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
background: rgba(255, 255, 255, 0.32);
border: 1px solid rgba(31, 42, 51, 0.18);
border-radius: var(--r-md);
padding: 4px 22px;
transition: background var(--transition), border-color var(--transition);
}
.faq-item:hover { background: rgba(255, 255, 255, 0.5); }
.faq-item[open] { background: rgba(255, 255, 255, 0.55); border-color: rgba(31, 42, 51, 0.3); }
.faq-item summary {
cursor: pointer;
font-family: var(--font-sans);
color: var(--color-text-invert);
font-size: 1rem; font-weight: 500; line-height: 1.5;
letter-spacing: 0.01em;
list-style: none;
position: relative;
padding: 18px 40px 18px 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '';
position: absolute; right: 4px; top: 50%;
width: 13px; height: 13px;
margin-top: -6.5px;
background:
linear-gradient(var(--color-on-baby), var(--color-on-baby)) center/100% 1.5px no-repeat,
linear-gradient(var(--color-on-baby), var(--color-on-baby)) center/1.5px 100% no-repeat;
transition: transform 0.3s ease;
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-item p {
margin: 0 auto 18px;
color: var(--color-on-baby);
font-size: 1.1rem;
line-height: 1.7;
max-width: 62ch;
text-align: center;
}
.faq-item p a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
/* ---------------- Stelle Michelin ---------------- */
/* Due stelle disegnate qui, non il simbolo ufficiale della guida: quello è
un marchio registrato. I colori sono i due già usati dal sito per errori
e conferme, così la palette non si allarga. */
.stars {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: 2px;
vertical-align: -0.12em;
}
.star {
width: 0.92em; height: 0.92em;
filter: drop-shadow(0 1px 1px rgba(64, 52, 36, 0.12));
}
.star--rossa { fill: #B4414B; }
.star--verde { fill: #2F6B4F; }
/* ---------------- Aggiungi al calendario ---------------- */
.cal-btn {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 30px;
}
.cal-btn svg {
width: 18px; height: 18px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.8;
stroke-linecap: round; stroke-linejoin: round;
}
/* ---------------- Copia l'IBAN ---------------- */
.iban-copy {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 12px;
min-height: 44px;
padding: 10px 18px;
font-family: var(--font-sans);
font-size: 0.74rem; font-weight: 500;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--color-heading);
background: transparent;
border: 1px solid rgba(62, 85, 104, 0.4);
border-radius: var(--r-pill);
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.iban-copy svg {
width: 16px; height: 16px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
.iban-copy:hover { background: rgba(214, 223, 206, 0.55); border-color: var(--color-accent-deep); }
.iban-copy.is-done {
color: #2F6B4F;
border-color: rgba(47, 107, 79, 0.45);
background: rgba(47, 107, 79, 0.08);
}
/* ---------------- Promemoria della scadenza ---------------- */
.deadline {
display: inline-block;
margin: 0 auto 1em;
padding: 9px 20px;
font-family: var(--font-sans);
font-size: 0.84rem;
letter-spacing: 0.06em;
color: var(--color-heading);
background: rgba(214, 223, 206, 0.5);
border: 1px solid rgba(111, 135, 153, 0.28);
border-radius: var(--r-pill);
}
.deadline[hidden] { display: none; }
.deadline strong { color: var(--color-accent-ink); font-weight: 600; }
.deadline.is-urgent {
color: #8A3B2F;
background: rgba(180, 65, 75, 0.08);
border-color: rgba(180, 65, 75, 0.3);
}
.deadline.is-urgent strong { color: #8A3B2F; }
/* ---------------- Form RSVP ---------------- */
.rsvp-form {
max-width: 860px; margin: 48px auto 0; text-align: left;
background: radial-gradient(130% 100% at 20% 10%, rgba(161, 179, 153, 0.12), rgba(255,255,255,0) 55%), #FFFDF9;
padding: clamp(26px, 4vw, 44px);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
border: 1px solid rgba(47, 62, 76, 0.12);
}
.form-row { margin-bottom: 18px; display: flex; flex-direction: column; gap: 6px; }
.form-row-inline { flex-direction: row; gap: 18px; }
.form-row-inline > div { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rsvp-form label {
font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--color-text-soft);
}
.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea {
width: 100%;
font-family: var(--font-sans);
font-size: 0.95rem;
line-height: 1.4;
padding: 12px 14px;
min-height: 46px;
border: 1px solid rgba(47, 62, 76, 0.26);
border-radius: var(--r-sm);
background: var(--color-bg-alt);
color: var(--color-text);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.rsvp-form textarea { resize: vertical; min-height: 96px; }
.rsvp-form select {
-webkit-appearance: none; appearance: none;
padding-right: 38px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
}
/* grigio chiaro: il suggerimento non si confonde con un valore già scritto */
.rsvp-form input::placeholder, .rsvp-form textarea::placeholder { color: #CDD4DD; opacity: 1; }
.rsvp-form input:focus, .rsvp-form select:focus, .rsvp-form textarea:focus {
outline: none;
border-color: var(--color-accent-deep);
box-shadow: 0 0 0 3px rgba(111, 135, 153, 0.16);
}
.rsvp-form .btn { width: 100%; margin-top: 10px; }
.rsvp-form .btn:disabled { opacity: 0.7; cursor: progress; }
.rsvp-form .is-invalid {
border-color: #B4414B;
box-shadow: 0 0 0 3px rgba(180, 65, 75, 0.12);
}
/* campo trappola anti-spam: fuori schermo, non display:none (alcuni bot lo saltano) */
.rsvp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Griglia ospiti: una scheda per persona, numerata */
.guests-head {
display: flex; align-items: baseline; justify-content: space-between;
margin: 30px 0 12px;
padding-top: 22px;
border-top: 1px solid rgba(47, 62, 76, 0.12);
}
.guests-title {
font-family: var(--font-script);
font-size: 1.9rem; line-height: 1.2;
color: var(--color-accent-ink);
margin: 0;
}
.guests-count {
font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.12em;
color: var(--color-text-soft);
margin: 0;
}
.guest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.guest {
padding: 16px 18px 18px;
border: 1px solid rgba(47, 62, 76, 0.14);
border-radius: var(--r-md);
background: rgba(238, 243, 249, 0.45);
animation: guestIn 0.35s ease both;
}
@keyframes guestIn { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .guest { animation: none; } }
.guest-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.guest-num {
margin: 0;
font-family: var(--font-sans); font-size: 0.76rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--color-heading);
}
.guest-remove {
background: none; border: 0; cursor: pointer;
font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.06em;
color: var(--color-text-soft);
padding: 8px 4px; margin: -8px -4px;
border-bottom: 1px solid transparent;
}
.guest-remove:hover { color: #B4414B; }
.guest-remove[hidden] { display: none; }
.guest-grid {
display: grid;
/* riga 1: nome, cognome, menu — riga 2: eventuale richiesta per i bambini
— riga 3: allergie (doppia) e note */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
gap: 12px 14px;
}
.gf-extra { grid-column: 1 / -1; }
.gf-allergie { grid-column: span 2; }
.gf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* richiesta per i bambini: compare solo con il menu corrispondente */
.gf-extra[hidden] { display: none; }
.rsvp-form .check {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-sans); font-size: 0.88rem; letter-spacing: 0.01em;
text-transform: none; color: var(--color-text);
cursor: pointer;
padding: 4px 0;
}
.rsvp-form .check input {
flex: none;
width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0;
accent-color: var(--color-btn);
cursor: pointer;
}
.rsvp-form .guest input, .rsvp-form .guest select { background-color: #fff; }
.guest-add {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%;
margin: 14px 0 22px;
min-height: 48px;
font-family: var(--font-sans); font-size: 0.78rem; font-weight: 500;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--color-heading);
background: transparent;
border: 1px dashed rgba(62, 85, 104, 0.45);
border-radius: var(--r-md);
cursor: pointer;
transition: background var(--transition), border-color var(--transition);
}
.guest-add span { font-size: 1.2rem; line-height: 1; }
.guest-add:hover:not(:disabled) { background: rgba(214, 223, 206, 0.5); border-color: var(--color-accent-deep); }
.guest-add:disabled { cursor: default; opacity: 0.6; }
.form-hint {
margin: -8px 0 0; font-size: 0.95rem; font-style: italic;
color: var(--color-text-soft);
}
.form-hint.is-error { color: #A3343E; font-style: normal; }
.form-status { margin: 14px 0 0; text-align: center; font-size: 1.08rem; }
.form-status:empty { display: none; }
.form-status.is-ok { color: var(--color-heading); }
.form-status.is-error { color: #A3343E; }
.form-note {
font-size: 0.9rem; text-align: center; margin: 14px 0 0;
color: var(--color-text-soft); line-height: 1.6;
}
/* ---------------- Footer ---------------- */
#footer {
position: relative; z-index: 3;
background: var(--color-baby);
color: var(--color-on-baby);
text-align: center;
padding: 68px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px));
}
#footer .floral-flourish { opacity: 0.8; }
.footer-monogram {
font-family: var(--font-script); /* le iniziali disegnate in Snell (.scritta) */
font-size: clamp(2.1rem, 1.75rem + 1.1vw, 2.5rem);
line-height: 1.3;
color: var(--color-on-baby);
}
.footer-monogram .amp { color: var(--color-dark); margin: 0 0.2em; }
.footer-date {
font-family: var(--font-sans); letter-spacing: 0.1em;
font-size: 0.92rem; line-height: 1.7;
color: var(--color-on-baby);
margin: 1em 0 0.3em;
}
.footer-hashtag {
color: var(--color-on-baby);
font-family: var(--font-sans); letter-spacing: 0.1em; font-size: 0.8rem;
margin: 0;
}
/* la frase del luogo non si spezza: sul telefono va a capo tutta intera,
senza il puntino */
.footer-date-place { white-space: nowrap; }
@media (max-width: 560px) {
.footer-date-sep { display: none; }
.footer-date-place { display: block; }
}
.footer-motto {
max-width: 52ch;
text-wrap: balance;
margin: 0.9em auto 0;
font-size: 1.05rem;
line-height: 1.5;
color: var(--color-on-baby);
}
.footer-motto em { font-style: italic; color: var(--color-on-baby); }
.footer-credit {
font-size: 0.98rem; color: var(--color-on-baby);
margin: 1.6em 0 0;
}
/* Esci e modalità anni '80, affiancati */
.footer-actions {
display: flex; flex-wrap: wrap; justify-content: center;
align-items: center;
gap: 10px;
margin-top: 1.8em;
}
.footer-actions :is(.pin-logout, .retro80-toggle) { margin-top: 0; }
/* elementi che esistono solo nella modalità cinema anni '80 (css/retro80.css) */
.retro80-only { display: none; }
.hero-fuochi { display: none; } /* i fuochi della locandina anni '80 (js/retro80-ballo.js) */
/* ---------------- Musica romantica (sito classico) ---------------- */
/* Nella barra, nello spazio tra le iniziali e il menu (al centro sul
telefono), come la scritta del videoregistratore nella veste anni '80.
Spenta: nota e "Musica"; accesa: tre barrette che ondeggiano e "Pausa". */
.musica-btn {
position: absolute; top: 50%; z-index: 2;
left: calc(max(0px, (100% - 1160px) / 2) + var(--gutter) + 124px); /* dopo le iniziali, con lo svolazzo della I */
transform: translateY(-50%);
display: inline-flex; align-items: center; gap: 7px;
min-height: 34px; padding: 0 14px 0 11px;
font-family: var(--font-sans); font-size: 0.68rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.14em;
color: var(--color-heading);
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(62, 85, 104, 0.28);
border-radius: var(--r-pill);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.musica-btn:hover { background: #fff; border-color: var(--color-heading); }
.musica-btn:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 2px; }
.musica-nota { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.musica-barre { display: none; align-items: flex-end; gap: 2px; height: 13px; }
.musica-barre i { display: block; width: 2.5px; height: 100%; background: var(--color-btn); border-radius: 2px; transform-origin: bottom; animation: musicaBarre 1.1s ease-in-out infinite; }
.musica-barre i:nth-child(2) { animation-delay: -0.45s; }
.musica-barre i:nth-child(3) { animation-delay: -0.8s; }
@keyframes musicaBarre { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.musica-btn.is-on { color: var(--color-btn); border-color: rgba(169, 88, 71, 0.45); }
.musica-btn.is-on .musica-nota { display: none; }
.musica-btn.is-on .musica-barre { display: inline-flex; }
@media (prefers-reduced-motion: reduce) { .musica-barre i { animation: none; transform: scaleY(0.7); } }
body.nav-open .musica-btn { display: none; }
@media (max-width: 900px) {
.musica-btn { left: 50%; transform: translate(-50%, -50%); }
}
@media (pointer: coarse) { .musica-btn { min-height: 40px; } }
/* computer di media larghezza: il menu è lungo, il pulsante resta solo icona */
@media (min-width: 1080px) and (max-width: 1260px) {
.musica-btn { padding: 0 10px; }
.musica-btn #musicaClassicaLabel {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
}
.pin-logout {
display: inline-block;
text-decoration: none;
margin-top: 1.8em;
padding: 8px 18px;
font-family: var(--font-sans);
font-size: 0.76rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-on-baby);
background: transparent;
border: 1px solid rgba(31, 42, 51, 0.35);
border-radius: 30px;
cursor: pointer;
transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.pin-logout:hover {
color: var(--color-text-invert);
border-color: rgba(31, 42, 51, 0.6);
background: rgba(255, 255, 255, 0.35);
}
/* "Back to '80": un'insegna al neon da sala giochi, con la scritta a
sfumatura rosa-azzurro. Nella modalità cinema lo ridisegna retro80.css. */
.retro80-toggle {
display: inline-flex; align-items: center;
min-height: 34px;
padding: 6px 16px;
font: italic 700 14px/1 'Trebuchet MS', 'Arial Narrow', sans-serif;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #FF5FB6;
background: #150A2E;
border: 1.5px solid #FF3EA5;
border-radius: 4px;
box-shadow: 0 0 0 1px rgba(59, 232, 255, 0.35), 0 0 12px rgba(255, 62, 165, 0.45), inset 0 0 8px rgba(255, 62, 165, 0.25);
text-shadow: 0 0 6px rgba(255, 62, 165, 0.8);
cursor: pointer;
transition: box-shadow 0.2s ease, color 0.2s ease;
}
.retro80-toggle:hover {
color: #7FF3FF;
border-color: #3BE8FF;
text-shadow: 0 0 6px rgba(59, 232, 255, 0.9);
box-shadow: 0 0 0 1px rgba(255, 62, 165, 0.35), 0 0 16px rgba(59, 232, 255, 0.55), inset 0 0 8px rgba(59, 232, 255, 0.25);
}
.retro80-toggle:focus-visible { outline: 2px solid #3BE8FF; outline-offset: 3px; }
#backToTop {
position: fixed;
bottom: calc(22px + env(safe-area-inset-bottom, 0px));
right: calc(22px + env(safe-area-inset-right, 0px));
z-index: 500;
width: 46px; height: 46px; border-radius: 50%;
background: var(--color-baby); color: var(--color-on-baby);
border: 1px solid rgba(31, 42, 51, 0.22); /* si stacca anche sulle fasce baby blue */
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; line-height: 1;
opacity: 0; visibility: hidden; transform: translateY(10px);
transition: opacity var(--transition), visibility var(--transition),
transform var(--transition), background var(--transition);
box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}
#backToTop.visible { opacity: 1; visibility: visible; transform: translateY(0); }
/* sul telefono più piccolo e un po' trasparente: copre meno il testo */
@media (max-width: 900px) {
#backToTop {
width: 40px; height: 40px;
font-size: 1rem;
background: rgba(47, 62, 76, 0.72);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}
}
#backToTop:hover { background: var(--color-forest-light); }
/* ---------------- Scroll reveal ---------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.in-view { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: 0.07s; }
.reveal:nth-child(3) { transition-delay: 0.14s; }
.reveal:nth-child(4) { transition-delay: 0.21s; }
/* La prima schermata non aspetta lo script (che arriva per ultimo e, con
poca rete, anche dopo qualche secondo): entra da sola, mentre si dissolve
la schermata con le iniziali. */
#hero .reveal { animation: heroEntra 0.8s ease 0.5s both; }
#hero .reveal:nth-child(n+4) { animation-delay: 0.6s; }
@keyframes heroEntra {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; transition: none; }
#hero .reveal { animation: none; }
.scroll-cue span { animation: none; }
* { scroll-behavior: auto !important; }
}
/* Su touch gli effetti :hover restano "appiccicati" dopo il tap */
@media (hover: none) {
.witness-card:hover { transform: none; }
}
/* ==========================================================================
Responsive
========================================================================== */
/* Il menu esteso richiede circa 1080px: sotto, passa al drawer. */
@media (max-width: 1079px) {
:root { --nav-h: 66px; --nav-h-scrolled: 66px; }
#navToggle { display: flex; }
/* il logo sparisce mentre il menu copre la sua zona */
#navbar:has(#navMenu.open) .nav-logo { opacity: 0; }
.nav-logo { transition: opacity 0.25s ease, color var(--transition); }
#navMenu {
position: fixed;
top: 0; right: 0;
z-index: 1;
height: 100vh;
height: 100dvh;
width: min(82%, 330px);
background: var(--color-baby);
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 10px;
padding: 40px clamp(28px, 7vw, 40px);
padding-top: calc(40px + env(safe-area-inset-top, 0px));
overflow-y: auto;
overscroll-behavior: contain;
transform: translateX(100%);
transition: transform var(--transition), box-shadow var(--transition);
}
/* l'ombra solo a menu aperto: da chiuso sbordava sul lato destro */
#navMenu.open { transform: translateX(0); box-shadow: -18px 0 46px rgba(0,0,0,0.18); }
#navMenu .nav-link {
color: var(--color-text-invert);
font-size: 0.92rem;
letter-spacing: 0.12em;
/* area toccabile piena: il testo è alto 26px, il dito ne chiede 44 */
display: flex; align-items: center;
min-height: 44px;
width: 100%;
padding-block: 6px;
}
#navMenu .nav-cta {
color: var(--color-on-baby);
border-color: var(--color-on-baby);
padding: 10px 22px;
}
#navMenu .nav-cta:hover { background: var(--color-on-baby); color: #fff; }
#navToggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#navToggle.open span:nth-child(2) { opacity: 0; }
#navToggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (max-width: 900px) {
.split { grid-template-columns: 1fr; }
.split .split-text { order: 0; }
.split .split-media { order: 1; } /* prima il testo, poi la mappa */
.map-frame { padding-top: 0; height: clamp(310px, 80vw, 420px); }
/* Cerimonia e ricevimento: su schermo stretto la foto, sotto un velo
scuro e mascherata, quasi spariva. Diventa una fascia piena in testa
alla sezione, senza veli; testo e mappa seguono su fondo chiaro. */
#cerimonia, #ricevimento { padding-top: 0; background: var(--color-bg); }
#cerimonia .section-bg,
#ricevimento .section-bg {
position: relative;
top: auto; right: auto; bottom: auto; left: auto;
aspect-ratio: 4 / 3;
max-height: 70vh;
margin-bottom: 12px;
-webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}
#cerimonia .section-bg::after,
#ricevimento .section-bg::after { display: none; }
#cerimonia .section-bg-photo,
#ricevimento .section-bg-photo { top: -6%; height: 112%; filter: none; --drift: 4%; }
#cerimonia .section-bg-photo { background-position: center 45%; }
#cerimonia .split-text,
#ricevimento .split-text {
padding: 0;
background: none;
box-shadow: none;
}
#cerimonia .light { color: var(--color-text); }
#cerimonia .light-body { color: var(--color-text-soft); }
#cerimonia .light-body strong { color: var(--color-text); }
#cerimonia .kicker-light,
#cerimonia h3.place-name { color: var(--color-accent-ink); }
#cerimonia .btn-outline-light { border-color: var(--color-heading); color: var(--color-heading); }
#cerimonia .btn-outline-light:hover { background: var(--color-baby); color: var(--color-on-baby); }
.witness-teams { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 12px; }
.witness-team { display: flex; flex-direction: column; grid-row: auto; gap: 14px; margin-bottom: 26px; }
.witness-pair { display: flex; flex-direction: column; gap: 14px; }
.witness-team:last-child { margin-bottom: 0; }
}
/* Con tre schede, due colonne lascerebbero sempre una riga spaiata:
si passa direttamente da tre colonne a una. */
@media (max-width: 820px) {
}
@media (max-width: 680px) {
.timeline { padding-left: 30px; gap: 32px; }
.timeline-icon { left: -30px; }
.timeline::before { left: 7px; }
}
@media (max-width: 560px) {
.hero-names { gap: 0.14em; }
.countdown { width: 100%; gap: 7px; }
.cd-item { padding: 10px 2px 8px; border-radius: var(--r-sm); }
.cd-label { letter-spacing: 0.08em; }
.form-row-inline { flex-direction: column; gap: 18px; }
.story-step { grid-template-columns: 34px 1fr; gap: 0 14px; padding-bottom: 20px; }
.story-num { width: 34px; height: 34px; font-size: 0.95rem; }
.story-step::before { left: 17px; top: 38px; }
.story-body p:not(.story-when) { font-size: 1.1rem; }
.day-step { grid-template-columns: 3.9rem 20px 1fr; gap: 0 10px; }
.day-label { font-size: 1.12rem; }
.guest { padding: 14px 14px 16px; }
.guest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gf-menu, .gf-allergie, .gf-note { grid-column: 1 / -1; }
.btn { width: 100%; padding-inline: 20px; }
.gift-detail { font-size: 1.05rem; }
.faq-item { padding-inline: 18px; }
.faq-item summary { font-size: 0.96rem; padding-right: 34px; }
/* iOS ingrandisce la pagina se il campo ha meno di 16px */
.rsvp-form input, .rsvp-form select, .rsvp-form textarea { font-size: 16px; }
}
@media (max-width: 360px) {
.cd-num { font-size: 1.55rem; }
.cd-label { font-size: 0.66rem; letter-spacing: 0.02em; }
}
/* ---------------- PIN Gate ---------------- */
/* La schermata del PIN è una pagina a sé (private/pin.html, servita da
accesso.php): senza il codice il sito non viene proprio consegnato. */
#siteWrap {
position: relative;
}
#pinGate {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 5000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: radial-gradient(130% 110% at 50% 28%, rgba(247, 244, 238, 0.85) 0%, rgba(247, 244, 238, 0.97) 55%, var(--color-bg) 100%);
transition: opacity 0.5s ease;
}
#pinGate[hidden] { display: none; }
#pinGate.is-success { pointer-events: none; }
.pin-gate-card {
position: relative;
width: min(340px, 100%);
text-align: center;
background: var(--color-bg);
/* i dettagli della tessera del PIN sono dorati (l'ocra della palette) */
border: 1px solid rgba(175, 132, 56, 0.4);
border-radius: var(--r-lg);
box-shadow: var(--shadow-lg);
padding: clamp(26px, 5vw, 38px) clamp(20px, 5vw, 30px) clamp(28px, 5vw, 34px);
transition: opacity 0.45s ease, transform 0.45s ease;
}
/* PIN giusto: la tessera si alleggerisce e scende appena, lasciando il
posto alle iniziali (.pin-intro) */
.is-success .pin-gate-card {
opacity: 0;
transform: translateY(14px) scale(0.96);
transition: opacity 0.6s cubic-bezier(.4, 0, .2, 1), transform 0.7s cubic-bezier(.4, 0, .2, 1);
}
.pin-gate-card.is-shake { animation: pinShake 0.45s ease; }
@keyframes pinShake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-6px); }
40%, 60% { transform: translateX(6px); }
}
.pin-gate-flourish { width: clamp(130px, 30vw, 160px); margin: 0 auto 12px; opacity: 0.85; }
.pin-gate-kicker {
font-family: var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.66rem;
font-weight: 500;
color: var(--color-accent-ink);
margin-bottom: 0.7em;
}
.pin-gate-title {
font-family: var(--font-script); /* le iniziali disegnate in Snell (.scritta) */
font-size: clamp(2.3rem, 1.75rem + 2.2vw, 2.9rem);
color: var(--color-text);
line-height: 1.2;
margin: 0 0 0.1em;
}
.pin-gate-hint {
font-size: 0.86rem;
color: var(--color-text-soft);
margin: 0 0 1.3em;
}
.pin-dots { display: flex; justify-content: center; gap: 10px; margin-bottom: 6px; }
.pin-dot {
width: 12px; height: 12px;
border-radius: 50%;
border: 1.5px solid rgba(175, 132, 56, 0.6);
background: transparent;
transition: background 0.2s ease, transform 0.2s ease;
}
.pin-dot.is-filled { background: var(--color-ochre); border-color: var(--color-ochre); transform: scale(1.15); }
.pin-gate-error {
min-height: 1.3em;
font-size: 0.78rem;
color: #A5453F;
opacity: 0;
margin: 0 0 0.2em;
transition: opacity 0.2s ease;
}
.pin-gate-error.is-visible { opacity: 1; }
.pin-sr-only {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden; white-space: nowrap;
clip: rect(0 0 0 0); clip-path: inset(50%);
}
/* Pagina del PIN: niente zoom. "manipulation" toglie l'ingrandimento col
doppio tocco (cifre premute in fretta su iPhone) e il ritardo dei tocchi;
il pizzico lo bloccano il viewport e js/pin.js. */
html:has(body.pin-page), body.pin-page { touch-action: manipulation; }
.pin-page button, .pin-key { touch-action: manipulation; }
.pin-sr-input {
font-size: 16px; /* sotto i 16px iOS ingrandisce la pagina quando il campo prende il fuoco */
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
overflow: hidden; white-space: nowrap;
clip: rect(0 0 0 0); clip-path: inset(50%);
}
.pin-keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 1.3em;
}
.pin-key {
font-family: var(--font-serif);
font-size: 1.2rem;
color: var(--color-text);
background: var(--color-bg-alt);
border: 1px solid rgba(175, 132, 56, 0.3);
border-radius: 50%;
aspect-ratio: 1;
cursor: pointer;
transition: background var(--transition), transform 0.15s ease, border-color var(--transition);
}
.pin-key:hover { background: rgba(175, 132, 56, 0.12); border-color: rgba(175, 132, 56, 0.6); }
.pin-key:focus-visible { outline-color: var(--color-ochre); }
.pin-key:active { transform: scale(0.94); }
.pin-key--ghost {
font-family: var(--font-sans);
font-size: 0.82rem;
color: var(--color-text-soft);
background: transparent;
border-color: transparent;
}
.pin-key--ghost:hover { background: rgba(175, 132, 56, 0.1); }
@media (prefers-reduced-motion: reduce) {
.pin-gate-card.is-shake { animation: none; }
}
/* ---------------- Ritocchi per il tocco e la lettura su mobile ---------------- */
/* Le etichette maiuscole e spaziate sotto gli 11px sono faticose su schermo
piccolo; i comandi sotto i 44px sono difficili da centrare col dito. */
@media (max-width: 900px) {
.kicker { font-size: 0.82rem; letter-spacing: 0.17em; }
.eyebrow, .hero-attesa { font-size: 0.75rem; }
.witness-team-label { font-size: 0.78rem; }
.gift-label { font-size: 0.78rem; }
.pin-gate-kicker { font-size: 0.76rem; }
.pin-gate-error { font-size: 0.82rem; }
.wz-attrib { font-size: 0.72rem; }
.rsvp-form label { font-size: 0.8rem; }
.guests-count { font-size: 0.8rem; }
.guest-num { font-size: 0.78rem; }
.day-time { font-size: 1.12rem; }
/* comandi: almeno 44px di lato */
.wz-expand { min-width: 44px; min-height: 44px; justify-content: center; }
.pin-logout, .retro80-toggle { min-height: 44px; padding-inline: 18px; }
.nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
/* le voci del drawer occupano tutta la riga: il dito prende sempre */
#navMenu { align-items: stretch; }
#navMenu li { width: 100%; }
.guest-remove { min-height: 44px; display: inline-flex; align-items: center; }
.faq-item summary { min-height: 52px; display: flex; align-items: center; }
}
/* ---------------- Foto: versione piena solo dove serve ---------------- */
/* Sotto i 900px valgono le immagini ridotte impostate sopra: su un telefono
la differenza non si vede, ma si scaricano ~350 KB in meno. */
@media (min-width: 901px) {
.hero-bg-photo { background-image: url('../images/hero-terrazza-sposi.webp?v=2'); }
.section-bg--cerimonia .section-bg-photo { background-image: url('../images/santuario-vallececa-acquerello.webp?v=2'); }
.section-bg--ricevimento .section-bg-photo::before { background-image: url('../images/monastero-aereo-centrato.webp?v=2'); }
}
/* Telefoni che non conoscono aspect-ratio (iOS sotto il 15): le proporzioni
si ottengono con il vecchio trucco del padding o con un'altezza fissa */
@supports not (aspect-ratio: 1 / 1) {
.foto-tessera::before { content: ''; display: block; padding-top: calc(100% / var(--ar, 1)); }
.foto-tessera > .foto-mini { position: absolute; top: 0; left: 0; }
.foto-cartella-cop { height: 116px; }
.pin-key { height: 64px; }
}
@media (max-width: 900px) {
@supports not (aspect-ratio: 1 / 1) {
#cerimonia .section-bg, #ricevimento .section-bg { height: 75vw; }
}
}
@media (min-width: 700px) {
@supports not (aspect-ratio: 1 / 1) { .foto-cartella-cop { height: 132px; } }
}
/* Telefoni senza flex gap (iOS sotto 14.1, classe senza-gap da index.html):
gli spazi delle file più in vista tornano come margini */
html.senza-gap .foto-chips > *,
html.senza-gap .foto-tag-editor-chips > * { margin: 0 8px 8px 0; }
html.senza-gap .foto-cartelle > * + *,
html.senza-gap .foto-filtri > * + *,
html.senza-gap .foto-sospese-azioni > * + *,
html.senza-gap .foto-tag-editor-azioni > * + *,
html.senza-gap .oggi-azioni > * + * { margin-left: 10px; }
html.senza-gap .foto-visore-azioni > * { margin: 4px; }
html.senza-gap .oggi-azioni { flex-direction: column; }
html.senza-gap .oggi-azioni > * + * { margin-left: 0; margin-top: 10px; }
html.senza-gap .foto-btn > svg,
html.senza-gap .foto-azione > svg,
html.senza-gap .musica-btn > svg,
html.senza-gap .btn > svg { margin-right: 8px; }
html.senza-gap .foto-invito-tocca > * + * { margin-top: 14px; }
@media (min-width: 1080px) { html.senza-gap #navMenu > li + li { margin-left: 20px; } }
/* Telefoni che non leggono il WebP (iPhone con iOS più vecchio del 14):
le stesse immagini in JPEG. La classe no-webp la mette index.html. */
html.no-webp .hero-bg-photo { background-image: url('../images/hero-terrazza-sposi-1200.jpeg?v=2'); }
html.no-webp .section-bg--cerimonia .section-bg-photo { background-image: url('../images/santuario-vallececa-acquerello-900.jpeg?v=2'); }
html.no-webp .section-bg--ricevimento .section-bg-photo::before { background-image: url('../images/monastero-aereo-centrato-800.jpg?v=2'); }
html.no-webp .map-load--vallececa { background-image: url('../images/waze-map-vallececa-760.jpg?v=2'); }
html.no-webp .map-load--santo-spirito { background-image: url('../images/waze-map-santo-spirito-760.jpg?v=2'); }
@media (min-width: 901px) {
html.no-webp .hero-bg-photo { background-image: url('../images/hero-terrazza-sposi.jpeg?v=2'); }
html.no-webp .section-bg--cerimonia .section-bg-photo { background-image: url('../images/santuario-vallececa-acquerello.jpeg?v=2'); }
html.no-webp .section-bg--ricevimento .section-bg-photo::before { background-image: url('../images/monastero-aereo-centrato.jpg?v=2'); }
html.no-webp .map-load--vallececa { background-image: url('../images/waze-map-vallececa.jpg?v=2'); }
html.no-webp .map-load--santo-spirito { background-image: url('../images/waze-map-santo-spirito.jpg?v=2'); }
}
/* ---------------- Foto e mappe più in basso: solo quando servono ---------------- */
/* Un'immagine di sfondo CSS si scarica appena l'elemento esiste, anche se è
a metà pagina. Con .lazy-bg (messa su in testa alla pagina) le foto
delle sezioni e le anteprime delle mappe restano vuote finché script.js non
segna .is-near, poco prima che entrino nello schermo. */
html.lazy-bg :is(.section-bg, .wz-facade):not(.is-near) :is(.section-bg-photo, .map-load) {
background-image: none;
}
html.lazy-bg .section-bg--ricevimento:not(.is-near) .section-bg-photo::before { background-image: none; }
/* ---------------- Galleria "Le vostre foto" (js/galleria.js) ---------------- */
/* Un album da matrimonio: scheda per caricare, barra con contatori e filtri,
mosaico che rispetta le proporzioni di ogni foto, visore a tutto schermo
con le azioni (condividi, scarica, privata, elimina). */
.foto-testa { text-align: center; }
.foto-testa .lead { margin-bottom: 0; }
/* scheda di caricamento */
.foto-carica {
max-width: 640px;
margin: 36px auto 56px;
padding: clamp(22px, 4vw, 32px);
background: #fff;
border: 1px solid rgba(47, 62, 76, 0.1);
border-radius: var(--r-lg);
box-shadow: var(--shadow-md);
}
.foto-carica-campi {
display: grid; gap: 18px;
grid-template-columns: 1fr;
}
@media (min-width: 600px) { .foto-carica-campi { grid-template-columns: 1fr 1fr; align-items: start; } }
/* tag a chips: si toccano per sceglierli, il campo sotto ne crea di nuovi */
.foto-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.foto-chip {
min-height: 34px; padding: 0 12px;
font-family: var(--font-sans); font-size: 0.8rem; letter-spacing: 0.02em;
color: var(--color-heading); background: var(--color-bg);
border: 1px solid rgba(47, 62, 76, 0.22); border-radius: var(--r-pill);
cursor: pointer;
transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.foto-chip:hover { border-color: var(--color-heading); }
.foto-chip[aria-pressed="true"] { background: var(--color-dark); border-color: var(--color-dark); color: #fff; }
.foto-chip[aria-pressed="true"]::before { content: '\2713\00a0'; } /* spunta */
.foto-chip:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 2px; }
/* arrivati da un QR "carica foto": la scheda si illumina un attimo */
.foto-carica.is-richiamata { animation: richiamo 1.3s ease-in-out 2; }
@keyframes richiamo { 50% { box-shadow: 0 0 0 6px rgba(175, 132, 56, 0.35), var(--shadow-md); } }
@media (prefers-reduced-motion: reduce) { .foto-carica.is-richiamata { animation: none; } }
@media (pointer: coarse) { .foto-chip { min-height: 40px; } }
.foto-visore-tag {
display: block; margin-top: 4px;
font-size: 0.74rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.6);
}
.foto-campo { margin: 0; padding: 0; border: 0; min-width: 0; }
.foto-etichetta {
display: block; padding: 0;
font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--color-heading);
margin-bottom: 8px;
}
.foto-etichetta span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--color-text-soft); }
/* 16px: sotto questa misura iOS ingrandisce la pagina quando si tocca il campo */
.foto-nome {
width: 100%;
font-family: var(--font-sans); font-size: 16px; line-height: 1.4;
padding: 11px 14px; min-height: 48px;
border: 1px solid rgba(47, 62, 76, 0.22);
border-radius: var(--r-sm);
background: var(--color-bg); color: var(--color-text);
-webkit-text-fill-color: var(--color-text);
}
.foto-nome::placeholder { color: #B0A797; -webkit-text-fill-color: #B0A797; opacity: 1; }
.foto-nome:focus {
outline: none;
border-color: var(--color-accent-deep);
box-shadow: 0 0 0 3px rgba(111, 135, 153, 0.16);
}
/* visibilità: due pulsanti a pillola (radio veri, per tastiera e lettori di schermo) */
.foto-vis-scelte {
display: grid; grid-template-columns: 1fr 1fr;
padding: 4px; min-height: 48px;
background: var(--color-bg);
border: 1px solid rgba(47, 62, 76, 0.16);
border-radius: var(--r-pill);
}
.foto-vis-scelta { position: relative; display: flex; cursor: pointer; }
.foto-vis-scelta input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.foto-vis-scelta span {
flex: 1; display: flex; align-items: center; justify-content: center;
padding: 6px 8px; text-align: center;
font-family: var(--font-sans); font-size: 0.78rem; line-height: 1.2;
color: var(--color-text-soft);
border-radius: var(--r-pill);
transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.foto-vis-scelta input:checked + span {
background: #fff; color: var(--color-heading); font-weight: 500;
box-shadow: 0 2px 8px rgba(47, 62, 76, 0.14);
}
.foto-vis-scelta input:focus-visible + span { outline: 2px solid var(--color-accent-deep); outline-offset: 1px; }
.foto-btn { width: 100%; gap: 10px; margin-top: 22px; min-height: 56px; font-size: 0.82rem; }
.foto-btn svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
/* il vero campo file resta nel DOM (serve a iOS e Android) ma invisibile;
lo aprono l'etichetta-pulsante e il pulsante fluttuante */
.foto-input {
position: absolute; width: 1px; height: 1px;
opacity: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.foto-carica:focus-within .foto-btn:has(+ .foto-input:focus-visible) {
outline: 2px solid var(--color-accent-deep); outline-offset: 3px;
}
.foto-aiuto {
margin: 12px auto 0; max-width: 46ch;
font-size: 0.95rem; line-height: 1.45; text-align: center;
color: var(--color-text-soft);
}
.foto-coda { list-style: none; margin: 0; padding: 0; }
.foto-coda:not(:empty) { margin-top: 16px; }
.foto-riga {
display: grid; grid-template-columns: auto 1fr; align-items: center;
gap: 4px 12px;
padding: 8px 0;
font-family: var(--font-sans); font-size: 0.78rem;
border-top: 1px solid rgba(47, 62, 76, 0.08);
transition: opacity 0.6s ease;
}
.foto-riga-nome { color: var(--color-text); }
.foto-riga-stato { grid-column: 2; grid-row: 1; justify-self: end; color: var(--color-text-soft); }
.foto-riga-barra {
grid-column: 1 / -1;
height: 4px; border-radius: 4px; overflow: hidden;
background: rgba(47, 62, 76, 0.1);
}
.foto-riga-barra span {
display: block; width: 0; height: 100%;
background: var(--color-accent-deep);
transition: width 0.3s ease;
}
.foto-riga.is-ok .foto-riga-barra span { background: var(--color-accent); }
.foto-riga.is-ok .foto-riga-stato { color: #5E7A55; }
.foto-riga.is-errore .foto-riga-barra span { width: 100% !important; background: #C98F86; }
.foto-riga.is-errore .foto-riga-stato { color: #A2423A; }
.foto-riga.is-via { opacity: 0; }
/* senza rete: la foto aspetta, non è un errore */
.foto-riga.is-attesa .foto-riga-stato { color: var(--color-accent-ink); }
.foto-riga.is-attesa .foto-riga-barra span {
width: 100% !important;
background: repeating-linear-gradient(90deg, rgba(175, 132, 56, 0.55) 0 10px, rgba(175, 132, 56, 0.2) 10px 20px);
background-size: 40px 100%;
animation: foto-attesa 1.2s linear infinite;
}
@keyframes foto-attesa { to { background-position: 40px 0; } }
/* fine di un gruppo di foto: "12 foto caricate ✓" */
.foto-esito {
margin: 0; max-height: 0; overflow: hidden; opacity: 0;
font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; text-align: center;
color: #5E7A55;
transition: opacity 0.5s ease, max-height 0.5s ease, margin 0.5s ease;
}
.foto-esito.is-visibile { opacity: 1; max-height: 3em; margin-top: 14px; }
.foto-esito.is-parziale { color: var(--color-accent-ink); }
/* foto rimaste da inviare dall'ultima visita */
.foto-sospese {
position: fixed; z-index: 1200;
left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
width: min(420px, calc(100vw - 32px));
padding: 16px 18px 14px;
background: #FFFDF9;
border: 1px solid rgba(175, 132, 56, 0.35);
border-radius: var(--r-sm);
box-shadow: 0 14px 40px rgba(47, 62, 76, 0.22);
font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.4; text-align: center;
color: var(--color-text);
opacity: 0; transform: translate(-50%, 24px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.foto-sospese.is-visibile { opacity: 1; transform: translate(-50%, 0); }
.foto-sospese p { margin: 0 0 12px; }
.foto-sospese-azioni { display: flex; gap: 10px; justify-content: center; }
.foto-sospese button {
flex: 1; min-height: 44px; padding: 0 14px;
font: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
border-radius: 999px; cursor: pointer;
}
.foto-sospese-si { background: var(--color-btn); color: var(--color-btn-text); border: 1px solid var(--color-btn); }
.foto-sospese-no { background: transparent; color: var(--color-text-soft); border: 1px solid rgba(47, 62, 76, 0.2); }
@media (prefers-reduced-motion: reduce) {
.foto-riga.is-attesa .foto-riga-barra span { animation: none; }
}
/* modalità admin (PIN degli sposi) */
.foto-admin-nota { display: none; }
html.foto-admin .foto-admin-nota {
display: block;
max-width: 640px; margin: -32px auto 32px; padding: 10px 16px;
font-family: var(--font-sans); font-size: 0.78rem; line-height: 1.5; text-align: center;
color: var(--color-accent-ink);
background: rgba(175, 132, 56, 0.1);
border: 1px dashed rgba(175, 132, 56, 0.5);
border-radius: var(--r-sm);
}
/* barra: quante foto, da quanti invitati; filtri */
.foto-barra {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 12px 20px;
margin: 0 0 18px; padding-bottom: 14px;
border-bottom: 1px solid rgba(47, 62, 76, 0.12);
}
.foto-barra[hidden] { display: none; }
.foto-conteggio {
margin: 0;
font-family: var(--font-serif); font-size: 1.15rem; font-style: italic;
color: var(--color-text-soft);
}
.foto-conteggio b { font-style: normal; font-weight: 600; color: var(--color-heading); }
.foto-filtri { display: flex; gap: 6px; }
.foto-filtro {
min-height: 40px; padding: 0 16px;
font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--color-text-soft); background: transparent;
border: 1px solid rgba(47, 62, 76, 0.18); border-radius: var(--r-pill);
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.foto-filtro[hidden] { display: none; }
.foto-filtro:hover { border-color: var(--color-heading); color: var(--color-heading); }
.foto-filtro.is-attivo { background: var(--color-dark); border-color: var(--color-dark); color: #fff; }
.foto-filtro-num { opacity: 0.7; margin-left: 2px; }
/* cartelle: una per tag, in fila (si scorrono col dito sul telefono) */
.foto-cartelle {
display: flex; gap: 12px;
margin: 0 -4px 22px; padding: 4px 4px 10px;
overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: thin;
}
.foto-cartelle[hidden] { display: none; }
.foto-cartella {
flex: none; width: 116px;
display: flex; flex-direction: column; align-items: stretch; gap: 3px;
padding: 0; text-align: left;
font: inherit; color: inherit; background: none; border: 0;
cursor: pointer; scroll-snap-align: start;
-webkit-tap-highlight-color: transparent;
}
.foto-cartella-cop {
position: relative;
display: grid; place-items: center;
aspect-ratio: 1; margin-bottom: 5px;
overflow: hidden;
border-radius: var(--r-sm);
background: var(--color-bg-alt);
box-shadow: 0 0 0 1px rgba(47, 62, 76, 0.1), 0 6px 14px rgba(64, 52, 36, 0.08);
transition: box-shadow var(--transition), transform var(--transition);
}
/* il bordo di una seconda foto dietro: sembra una pila, una cartella */
.foto-cartella-cop::before {
content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
border-radius: inherit; pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.foto-cartella-cop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-cartella-cop svg { width: 38px; height: 38px; fill: none; stroke: var(--color-accent-deep); stroke-width: 1.5; }
.foto-cartella-nome {
font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600;
color: var(--color-text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.foto-cartella-num { font-family: var(--font-serif); font-size: 0.95rem; font-style: italic; color: var(--color-text-soft); }
.foto-cartella:hover .foto-cartella-cop { transform: translateY(-2px); }
.foto-cartella[aria-pressed="true"] .foto-cartella-cop {
box-shadow: 0 0 0 3px var(--color-btn), 0 8px 18px rgba(169, 88, 71, 0.22);
}
.foto-cartella[aria-pressed="true"] .foto-cartella-nome { color: var(--color-btn); }
.foto-cartella:focus-visible { outline: none; }
.foto-cartella:focus-visible .foto-cartella-cop { box-shadow: 0 0 0 3px var(--color-accent-deep); }
@media (min-width: 700px) { .foto-cartella { width: 132px; } }
/* cartelle speciali: un segno sulla copertina (il cuore, la data) */
.foto-cartella-segno {
position: absolute; right: 7px; bottom: 7px;
display: grid; place-items: center;
width: 30px; height: 30px; border-radius: 50%;
color: #fff; background: var(--color-btn);
box-shadow: 0 3px 10px rgba(47, 62, 76, 0.3);
}
.foto-cartella-segno svg { width: 16px; height: 16px; fill: #fff; stroke: none; }
.foto-cartella-segno--data {
width: 34px; height: 34px; border-radius: 8px;
flex-direction: column; line-height: 1;
font-family: var(--font-serif); font-size: 1rem; font-weight: 600;
background: var(--color-dark);
}
.foto-cartella-segno--data small { font-family: var(--font-sans); font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.foto-cartella--amate .foto-cartella-nome, .foto-cartella--giornata .foto-cartella-nome { color: var(--color-btn); }
/* La giornata: i momenti del programma tra le foto */
.foto-momento {
flex: 0 0 100%;
display: flex; align-items: baseline; gap: 12px;
margin: 22px 0 6px; padding-bottom: 8px;
border-bottom: 1px solid rgba(47, 62, 76, 0.12);
}
.foto-momento:first-child { margin-top: 0; }
.foto-momento-ora { font-family: var(--font-digital); font-size: 1.15rem; color: var(--color-accent-ink); }
.foto-momento-nome { font-family: var(--font-serif); font-size: 1.35rem; color: var(--color-dark); }
.foto-riempi { flex-grow: 999999; height: 0; }
html.senza-gap .foto-momento-ora { margin-right: 12px; }
/* messaggio breve (es. un "mi piace" non salvato) */
.foto-avviso {
position: fixed; z-index: 2100;
left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
max-width: min(420px, calc(100vw - 32px));
margin: 0; padding: 12px 18px;
font-family: var(--font-sans); font-size: 0.82rem; line-height: 1.4; text-align: center;
color: #fff; background: rgba(31, 42, 51, 0.92);
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
opacity: 0; visibility: hidden; transform: translate(-50%, 12px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
pointer-events: none;
}
.foto-avviso.is-visibile { opacity: 1; visibility: visible; transform: translateX(-50%); }
/* "3 nuove foto": la pillola in alto mentre si scorre il mosaico */
.foto-pillola {
position: fixed; z-index: 950;
left: 50%; top: calc(var(--nav-h-scrolled) + 14px);
transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 7px;
min-height: 38px; padding: 0 16px 0 12px;
font-family: var(--font-sans); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em;
color: #fff; background: var(--color-btn);
border: 0; border-radius: 999px;
box-shadow: 0 8px 22px rgba(169, 88, 71, 0.35);
cursor: pointer;
animation: pillolaEntra 0.4s cubic-bezier(.2, .8, .3, 1);
}
.foto-pillola[hidden] { display: none; }
.foto-pillola svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.senza-gap .foto-pillola svg { margin-right: 7px; }
html.foto-aperta .foto-pillola, body.nav-open .foto-pillola { display: none; }
@keyframes pillolaEntra { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .foto-pillola { animation: none; } }
.foto-vuota { text-align: center; font-style: italic; color: var(--color-text-soft); }
.foto-vuota[hidden] { display: none; }
/* mosaico "giustificato": ogni foto con le sue proporzioni (--ar = larghezza/altezza),
righe piene da bordo a bordo, l'ultima allineata a sinistra. Solo CSS. */
.foto-griglia {
--riga: 128px;
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 4px;
}
.foto-griglia::after { content: ''; flex-grow: 999999; }
@media (min-width: 600px) { .foto-griglia { --riga: 190px; gap: 8px; } }
@media (min-width: 1000px) { .foto-griglia { --riga: 240px; } }
.foto-tessera {
position: relative;
flex-grow: calc(var(--ar, 1) * 100);
flex-basis: calc(var(--ar, 1) * var(--riga));
aspect-ratio: var(--ar, 1);
/* foto molto larghe o molto strette non sfondano la riga */
max-width: 100%;
}
.foto-mini {
position: relative; display: block; width: 100%; height: 100%;
padding: 0; border: 0; overflow: hidden;
background: var(--color-accent-soft);
/* angoli morbidi e un'ombra appena accennata: un album, non una griglia */
border-radius: 8px;
box-shadow: 0 1px 2px rgba(47, 62, 76, 0.08), 0 4px 12px rgba(47, 62, 76, 0.06);
/* Safari: senza questo, durante lo zoom al passaggio gli angoli tornano vivi */
isolation: isolate;
-webkit-mask-image: -webkit-radial-gradient(white, black);
cursor: zoom-in;
}
@media (min-width: 700px) { .foto-mini { border-radius: 10px; } }
.foto-mini img {
display: block; width: 100%; height: 100%; object-fit: cover;
transition: transform 0.8s cubic-bezier(.22,.61,.36,1), opacity 0.6s ease;
}
.foto-mini img:not(.is-caricata) { opacity: 0; }
.foto-mini:focus-visible { outline: 2px solid var(--color-accent-deep); outline-offset: 2px; }
.foto-tessera-nome {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 26px 12px 9px;
font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.04em; text-align: left;
color: #fff;
background: linear-gradient(to top, rgba(20, 26, 32, 0.6), transparent);
opacity: 0; transform: translateY(6px);
transition: opacity 0.4s ease, transform 0.4s ease;
pointer-events: none;
}
@media (hover: hover) {
.foto-mini:hover img { transform: scale(1.03); }
.foto-mini:hover .foto-tessera-nome { opacity: 1; transform: none; }
}
.foto-lucchetto {
position: absolute; top: 8px; right: 8px;
display: flex; align-items: center; gap: 4px;
padding: 4px 8px;
font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
color: #fff; background: rgba(31, 42, 51, 0.62);
border-radius: 20px;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
pointer-events: none;
}
.foto-lucchetto svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }
.foto-tessera.is-nuova .foto-mini { animation: foto-entra 0.7s cubic-bezier(.22,.61,.36,1) both; }
@keyframes foto-entra { from { opacity: 0; transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) {
.foto-tessera.is-nuova .foto-mini { animation: none; }
.foto-mini img { transition: none; }
}
.foto-altre-box { text-align: center; }
.foto-altre { margin-top: 32px; }
.foto-altre[hidden] { display: none; }
/* pulsante fluttuante "Carica foto" (solo telefono, js/galleria.js).
Fuori dalla galleria è un cerchietto con la fotocamera in basso a sinistra,
speculare a "torna su"; dentro la galleria si allarga nella pillola
"+ Carica foto" al centro. Si fa da parte quando darebbe fastidio: prima
schermata, mentre si scorre verso il basso, con la scheda di caricamento
già in vista, mentre si scrive, sopra pulsanti e link. */
.foto-fab {
position: fixed; z-index: 900;
left: calc(22px + env(safe-area-inset-left, 0px));
bottom: calc(22px + env(safe-area-inset-bottom, 0px));
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
width: 46px; height: 46px; padding: 0;
font-family: var(--font-sans); font-size: 0.76rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap;
color: var(--color-btn-text); background: var(--color-btn);
border-radius: 50%;
box-shadow: 0 6px 16px rgba(47, 62, 76, 0.24);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
opacity: 0; pointer-events: none;
transform: translateY(12px) scale(0.9);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.foto-fab .foto-fab-ico { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.foto-fab .foto-fab-piu { display: none; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* la scritta c'è sempre per i lettori di schermo; si vede solo nella pillola */
.foto-fab span {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.foto-fab.is-visibile { opacity: 1; pointer-events: auto; transform: none; }
.foto-fab.is-esteso {
left: 50%; width: auto; height: 48px; padding: 0 22px 0 18px;
border-radius: var(--r-pill);
box-shadow: 0 10px 28px rgba(47, 62, 76, 0.3);
transform: translate(-50%, 12px);
}
.foto-fab.is-esteso.is-visibile { transform: translateX(-50%); }
.foto-fab.is-esteso .foto-fab-ico { display: none; }
.foto-fab.is-esteso .foto-fab-piu { display: block; }
.foto-fab.is-esteso span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
@media (min-width: 901px) { .foto-fab { display: none; } }
html.foto-aperta .foto-fab, body.nav-open .foto-fab { display: none; }
@media (prefers-reduced-motion: reduce) { .foto-fab { transition: opacity 0.2s ease; } }
/* arrivati dal QR (?carica=tag): tutta la pagina è un invito a scegliere le
foto, il primo tocco apre il rullino */
html.foto-invito-aperto { overflow: hidden; }
html.foto-invito-aperto .foto-fab { display: none; }
.foto-invito {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000;
display: flex; flex-direction: column;
padding: env(safe-area-inset-top, 0px) 16px calc(16px + env(safe-area-inset-bottom, 0px));
background: var(--color-bg);
opacity: 0; transition: opacity 0.35s ease;
}
.foto-invito.is-visibile { opacity: 1; }
.foto-invito-tocca {
flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 14px; padding: 24px 8px;
text-align: center; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.foto-invito-ico {
display: grid; place-items: center;
width: 112px; height: 112px; border-radius: 50%;
background: var(--color-btn);
box-shadow: 0 14px 34px rgba(169, 88, 71, 0.32);
animation: invitoPulsa 1.8s ease-in-out infinite;
}
.foto-invito-ico svg { width: 52px; height: 52px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
@keyframes invitoPulsa { 50% { transform: scale(1.06); box-shadow: 0 18px 44px rgba(169, 88, 71, 0.42); } }
.foto-invito-titolo {
margin-top: 10px;
font-family: var(--font-serif); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.4rem); line-height: 1.15;
color: var(--color-dark);
}
.foto-invito-tag {
font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em;
color: var(--color-btn);
}
.foto-invito-nota {
max-width: 30ch;
font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.4;
color: var(--color-text-soft);
}
.foto-invito-qui {
align-self: center; margin-bottom: 10px;
min-height: 40px; padding: 0 14px;
font-family: var(--font-sans); font-size: 0.78rem;
color: var(--color-text-soft); background: none; border: 0;
text-decoration: underline; text-underline-offset: 3px;
cursor: pointer;
}
.foto-invito-no {
align-self: center;
min-height: 44px; padding: 0 22px;
font-family: var(--font-sans); font-size: 0.76rem; font-weight: 500;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--color-text-soft); background: transparent;
border: 1px solid rgba(47, 62, 76, 0.2); border-radius: 999px;
cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .foto-invito-ico { animation: none; } }
/* visore a tutto schermo */
html.foto-aperta { overflow: hidden; }
.foto-visore {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000;
display: grid; grid-template-rows: auto 1fr auto;
background: #12161B;
touch-action: pan-y pinch-zoom;
animation: visore-entra 0.3s ease both;
}
@keyframes visore-entra { from { opacity: 0; } }
.foto-visore[hidden] { display: none; }
.foto-visore-testa {
display: flex; align-items: center; justify-content: space-between;
padding: max(10px, env(safe-area-inset-top)) 12px 6px 20px;
}
.foto-visore-num {
font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.16em;
color: rgba(255, 255, 255, 0.6);
}
.foto-visore-figura {
position: relative;
margin: 0; min-height: 0;
display: flex; align-items: center; justify-content: center;
padding: 0 12px;
}
.foto-visore-figura img {
max-width: 100%; max-height: 100%;
object-fit: contain; border-radius: 8px;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
transition: opacity 0.25s ease;
}
.foto-visore-figura img.is-attesa { opacity: 0.35; }
.foto-visore-btn {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
color: #fff; background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%;
cursor: pointer;
transition: background 0.3s ease, opacity 0.3s ease;
}
.foto-visore-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.foto-visore-btn:hover, .foto-visore-btn:focus-visible { background: rgba(255, 255, 255, 0.2); outline: none; }
.foto-visore-btn:disabled { opacity: 0.2; cursor: default; }
.foto-visore-prec, .foto-visore-succ { position: absolute; top: 50%; transform: translateY(-50%); }
.foto-visore-prec { left: 16px; }
.foto-visore-succ { right: 16px; }
/* sul telefono si scorre col dito: le frecce non coprono la foto */
@media (max-width: 700px) { .foto-visore-prec, .foto-visore-succ { display: none; } }
.foto-visore-piede {
padding: 12px 16px max(16px, env(safe-area-inset-bottom));
text-align: center;
}
.foto-visore-dida {
margin: 0 0 12px;
font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.03em;
color: rgba(255, 255, 255, 0.72);
}
.foto-visore-dida b { color: #fff; font-weight: 500; }
.foto-visore-dida .foto-lucchetto { position: static; display: inline-flex; margin-left: 8px; vertical-align: 1px; }
.foto-dispositivo {
display: block; margin-top: 4px;
font-size: 0.7rem; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.45);
}
.foto-visore-azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.foto-azione {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
min-height: 44px; padding: 0 16px;
font-family: var(--font-sans); font-size: 0.72rem; font-weight: 500;
text-transform: uppercase; letter-spacing: 0.1em;
color: #fff; text-decoration: none;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--r-pill);
cursor: pointer;
transition: background 0.3s ease, border-color 0.3s ease;
}
.foto-azione[hidden] { display: none; }
.foto-azione svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.foto-azione:hover, .foto-azione:focus-visible { background: rgba(255, 255, 255, 0.18); outline: none; }
.foto-azione:disabled { opacity: 0.6; cursor: progress; }
.foto-azione--elimina.is-conferma { background: var(--color-btn); border-color: var(--color-btn); }
/* "Mi piace" */
.foto-azione--like[aria-pressed="true"] { border-color: rgba(232, 93, 93, 0.6); }
.foto-azione--like[aria-pressed="true"] svg { fill: #E85D5D; stroke: #E85D5D; animation: likeBatte 0.45s ease; }
@keyframes likeBatte { 40% { transform: scale(1.3); } }
/* sulle anteprime: il cuoricino in alto a sinistra, da toccare, con il conto */
.foto-like {
position: absolute; top: 6px; left: 6px; z-index: 2;
display: inline-flex; align-items: center; gap: 4px;
min-height: 30px; min-width: 30px; padding: 0 9px 0 7px;
font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
color: #fff; background: rgba(31, 42, 51, 0.5);
border: 0; border-radius: 20px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.25s ease;
}
.foto-like.is-vuoto { padding: 0; justify-content: center; }
.foto-like:hover { background: rgba(31, 42, 51, 0.72); }
.foto-like:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.foto-like svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; }
.foto-like.is-mio svg { fill: #FF7A7A; stroke: #FF7A7A; }
.foto-like.is-batte svg { animation: likeBatte 0.45s ease; }
/* il numero dei like che scorre, come su Instagram */
.like-num {
display: inline-grid; overflow: hidden;
height: 1.3em; line-height: 1.3em;
vertical-align: middle;
}
.like-num:empty { display: none; }
.like-cifra { grid-area: 1 / 1; text-align: center; font-variant-numeric: tabular-nums; }
.like-cifra.entra-su { animation: likeEntraSu 0.36s cubic-bezier(.2, .8, .3, 1) both; }
.like-cifra.esce-su { animation: likeEsceSu 0.36s cubic-bezier(.2, .8, .3, 1) both; }
.like-cifra.entra-giu { animation: likeEntraGiu 0.36s cubic-bezier(.2, .8, .3, 1) both; }
.like-cifra.esce-giu { animation: likeEsceGiu 0.36s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes likeEntraSu { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes likeEsceSu { from { transform: none; opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
@keyframes likeEntraGiu { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes likeEsceGiu { from { transform: none; opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
.like-sep[hidden] { display: none; }
/* il tocco arriva più comodo con un'area un po' più grande del disegno */
.foto-like::before { content: ''; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; }
html.senza-gap .foto-like svg { margin-right: 4px; }
/* doppio tocco sulla foto: un cuore grande che pulsa e svanisce */
.foto-cuore-grande {
position: absolute; left: 50%; top: 50%;
width: 110px; height: 110px; margin: -55px 0 0 -55px;
pointer-events: none; opacity: 0;
}
.foto-cuore-grande svg { width: 100%; height: 100%; fill: #fff; filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.35)); }
.foto-cuore-grande.is-via { animation: cuoreGrande 0.9s ease forwards; }
@keyframes cuoreGrande {
0% { opacity: 0; transform: scale(0.4); }
20% { opacity: 0.95; transform: scale(1.1); }
35% { transform: scale(0.95); }
70% { opacity: 0.95; transform: scale(1); }
100% { opacity: 0; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
.foto-cuore-grande.is-via { animation-duration: 0.6s; }
.foto-azione--like[aria-pressed="true"] svg { animation: none; }
}
/* pannello dei tag (solo sposi): una scheda chiara sopra il piede del visore */
.foto-tag-editor {
position: absolute; z-index: 3;
left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
transform: translateX(-50%);
width: min(520px, calc(100% - 24px));
max-height: calc(100% - 90px); overflow-y: auto;
padding: 18px 18px 14px;
background: var(--color-bg);
border-radius: var(--r-md);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
text-align: left;
}
.foto-tag-editor[hidden] { display: none; }
.foto-visore.is-tag .foto-visore-piede { visibility: hidden; }
.foto-tag-editor-titolo {
margin: 0 0 12px;
font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--color-heading);
}
.foto-tag-editor .foto-chip { margin: 0; }
.foto-tag-editor-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.foto-tag-editor-nuovo {
width: 100%; margin-top: 12px; min-height: 42px; padding: 0 14px;
font: inherit; font-family: var(--font-sans); font-size: 0.9rem;
color: var(--color-text); background: #fff;
border: 1px solid rgba(47, 62, 76, 0.2); border-radius: var(--r-sm);
}
.foto-tag-editor-errore { margin: 8px 0 0; min-height: 1em; font-family: var(--font-sans); font-size: 0.8rem; color: #A2423A; }
.foto-tag-editor-errore:empty { display: none; }
.foto-tag-editor-azioni { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.foto-tag-editor .foto-azione { color: var(--color-text); background: transparent; border-color: rgba(47, 62, 76, 0.25); }
.foto-tag-editor .foto-azione:hover { background: var(--color-bg-alt); }
.foto-tag-editor .foto-tag-salva { color: var(--color-btn-text); background: var(--color-btn); border-color: var(--color-btn); }
.foto-tag-editor .foto-tag-salva:hover { background: var(--color-btn-hover); }
/* telefono stretto: azioni solo icona + parola corta, su una riga */
@media (max-width: 420px) {
.foto-azione { padding: 0 12px; font-size: 0.66rem; letter-spacing: 0.06em; gap: 5px; }
}
/* ---------------- Schermi touch larghi (tablet in orizzontale) ---------------- */
/* Sopra i 900px valgono le misure "da mouse"; su un tablet però si tocca col
dito: i comandi piccoli salgono ai 44px anche lì. */
@media (pointer: coarse) {
.nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
.pin-logout, .retro80-toggle { min-height: 44px; padding-inline: 18px; }
}
/* ---------------- Nessuna variante scura ---------------- */
/* Il sito ha una sola veste, chiara. Se il sistema è in modalità scura, i
colori restano questi: la regola serve ai browser che proverebbero ad
adattarli da soli. */
@media (prefers-color-scheme: dark) {
:root { color-scheme: only light; }
body { background: var(--paper), var(--color-bg); color: var(--color-text); }
.rsvp-form input, .rsvp-form select, .rsvp-form textarea {
background: var(--color-bg-alt);
color: var(--color-text);
-webkit-text-fill-color: var(--color-text);
}
.rsvp-form .guest input, .rsvp-form .guest select { background-color: #fff; }
.section-cream { background: var(--paper), var(--color-bg); }
}