/* ============================================================ IL MIO INVITO — TEMI DEGLI INVITI Un tema per design, scelto con . Usato da sito/index.php (inviti veri: slug da couples.template) e da sito/demo.html (selettore dei design, demo-switcher.js). Regola colore 60-30-10 (revisione 2026-11-01, tavolozze ricavate dalle immagini di anteprima assets/img/template-*.jpg): 60% fondo --white (pagina), --ivory / --ivory-dk (sezioni alternate) 30% struttura --dark (titoli, fascia countdown, footer), --text, --text-lt 10% accento --gold / --gold-lt / --gold-dk (pulsanti, etichette, corsivi) piccole dosi --sage, --blush (colori secondari dell'immagine) I nomi delle variabili (--gold, --ivory…) sono storici: in alcuni temi "--gold" è terracotta, giallo girasole o fucsia. Per aggiungere un design: un blocco qui + una voce in DEMO_THEMES (demo-switcher.js) + lo slug in $themes di sito/index.php (+ galleria assets/js/templates.js, template-details.html, checkout.html). ============================================================ */ /* ── Romantic Gold — template-romantico.jpg ───────────────────── 60 avorio · 30 marrone caldo · 10 oro; secondari rosa cipria ed eucalipto */ html[data-theme="romantic-gold"] { --white: #FFFEF9; --ivory: #F5F0E8; --ivory-dk: #EDE6D6; --dark: #2A2016; --text: #3D3428; --text-lt: #7A6F60; --gold: #C9A84C; --gold-lt: #E8D5A0; --gold-dk: #A67C35; --sage: #9DB49A; --blush: #EBC3BC; --blush-dk: #D9A39A; --f-title: 'Playfair Display', Georgia, serif; } /* ── Boho Earth — template-boho.jpg (nell'immagine c'è la palette: crema, terracotta, salvia, rosa antico, ocra) 60 crema · 30 marrone terra · 10 terracotta; secondari salvia e rosa antico */ html[data-theme="boho-earth"] { --white: #FBF6EE; --ivory: #F3EADC; --ivory-dk: #E8DCC8; --dark: #4A2C21; --text: #4E3629; --text-lt: #7D6152; --gold: #B85C38; --gold-lt: #DE9C7C; --gold-dk: #8E4227; --sage: #9AAE95; --blush: #D9A6A1; --blush-dk: #C0857F; --f-title: 'Playfair Display', Georgia, serif; } /* ── Luxury Night — template-luxury.jpg (blu notte, oro, marmo) 60 blu notte · 30 avorio (testi e titoli) · 10 oro */ html[data-theme="luxury-night"] { --white: #0F1B33; --ivory: #15254A; --ivory-dk: #1D3160; --dark: #070E1F; --text: #E9E4D6; --text-lt: #A9B0C2; --gold: #D4AF37; --gold-lt: #F0D88A; --gold-dk: #A8862A; --sage: #8A9BB5; --blush: #E8D9B5; --blush-dk: #C9B98F; --f-title: 'Playfair Display', Georgia, serif; } /* Tema scuro: alcune superfici delle pagine hanno colori chiari fissi, vanno forzate */ html[data-theme="luxury-night"] body { background: #0F1B33 !important; color: #E9E4D6 !important; } html[data-theme="luxury-night"] .wn-container { background: #13213F !important; border-color: rgba(212,175,55,0.18) !important; } html[data-theme="luxury-night"] .wn-story, html[data-theme="luxury-night"] .wn-nozze-card, html[data-theme="luxury-night"] .wn-qr-card, html[data-theme="luxury-night"] .wn-message-card { background: #15254A !important; color: #FFF !important; border-color: rgba(212,175,55,0.15) !important; } html[data-theme="luxury-night"] .wn-form-input { background: rgba(255,255,255,0.05) !important; border-color: rgba(212,175,55,0.25) !important; color: #FFF !important; } html[data-theme="luxury-night"] p { color: #A9B0C2 !important; } /* I titoli usano var(--dark), che qui è quasi nero: su fondo scuro erano invisibili. !important: alcuni titoli della demo hanno il colore inline */ html[data-theme="luxury-night"] :is(h1, h2, h3, h4) { color: #F3EEE2 !important; } /* Nav dopo lo scroll: nelle pagine ha un fondo chiaro fisso, qui diventa blu notte */ html[data-theme="luxury-night"] .wn-nav.scrolled { background: rgba(15, 27, 51, 0.95); box-shadow: 0 1px 24px rgba(0, 0, 0, 0.5); } html[data-theme="luxury-night"] .wn-nav.scrolled .wn-nav-names { color: #F3EEE2; } html[data-theme="luxury-night"] .wn-nav.scrolled .wn-hamburger span { background: #F3EEE2; } /* ── Minimal White — template-minimal.jpg (bianco, nero, rametto verde) 60 bianco · 30 nero/grigi · 10 nero pieno (pulsanti); secondario verde rametto */ html[data-theme="minimal-white"] { --white: #FFFFFF; --ivory: #F5F5F4; --ivory-dk: #E7E5E4; --dark: #111111; --text: #1F2937; --text-lt: #57534E; --gold: #1C1917; --gold-lt: #57534E; --gold-dk: #000000; --sage: #7A9A5B; --blush: #D6D3D1; --blush-dk: #A8A29E; --f-title: 'Montserrat', Arial, sans-serif; } /* ── Country (country-sage) — template-country.jpg (Toscana: girasoli, lavanda, legno) 60 crema · 30 marrone legno · 10 giallo girasole; secondario lavanda */ html[data-theme="country-sage"] { --white: #FCF9F0; --ivory: #F4EDD9; --ivory-dk: #E9DFC2; --dark: #3E3326; --text: #3B3428; --text-lt: #6E6352; --gold: #C99A12; --gold-lt: #EFC84E; --gold-dk: #9A7408; --sage: #8B7BB8; --blush: #C9BEDF; --blush-dk: #A797C9; --f-title: 'Playfair Display', Georgia, serif; } /* ── Mediterraneo (eucalyptus-green) — template-mediterraneo.jpg (Positano: bianco, blu cobalto, limoni, bouganville) 60 bianco · 30 blu cobalto · 10 fucsia bouganville; secondario giallo limone */ html[data-theme="eucalyptus-green"] { --white: #FFFFFF; --ivory: #F2F6FB; --ivory-dk: #DFE8F3; --dark: #14306B; --text: #1E2F4D; --text-lt: #4F5F7A; --gold: #C2366F; --gold-lt: #E97FA8; --gold-dk: #8E1F4E; --sage: #E9BE2E; --blush: #F6DD7A; --blush-dk: #D9B83A; --f-title: 'Playfair Display', Georgia, serif; } /* Pulsanti "pieni": il testo è var(--dark) sul colore d'accento. Dove l'accento è scuro o saturo (nero, fucsia, terracotta) il testo diventa bianco per restare leggibile. */ html[data-theme="minimal-white"] .wn-hero-cta, html[data-theme="minimal-white"] .wn-btn-gold, html[data-theme="eucalyptus-green"] .wn-hero-cta, html[data-theme="eucalyptus-green"] .wn-btn-gold, html[data-theme="boho-earth"] .wn-hero-cta, html[data-theme="boho-earth"] .wn-btn-gold, html[data-theme="minimal-white"] .wn-rsvp-submit, html[data-theme="eucalyptus-green"] .wn-rsvp-submit, html[data-theme="boho-earth"] .wn-rsvp-submit { color: #fff; } /* ── Regole comuni a tutti i temi ─────────────────────────────── */ /* Fascia RSVP: la sfumatura finiva su un marrone fisso (#2a1a08) anche nei temi blu o neri. Ora parte dal colore strutturale (30%) del tema e lo scurisce. */ html[data-theme] .wn-rsvp { background: var(--dark); background: linear-gradient(135deg, var(--dark), color-mix(in srgb, var(--dark) 65%, #000)); } /* Hamburger: è un