/* ========================================================== themes.css — six reusable themes. Apply with: Every theme only touches custom properties — base.css layout and components stay identical across themes. Google Fonts referenced here (load the matching tags in , see frontend/index.html and invite.html): Cormorant Garamond, Jost, Playfair Display, Marcellus, Cinzel, Poppins, Tiro Devanagari Hindi, Fraunces ========================================================== */ /* --------------------------------------------------------- 1. Classic Gold — warm ivory + antique gold (default/flagship) --------------------------------------------------------- */ :root, [data-theme="classic-gold"] { --color-bg: #fdfaf4; --color-surface: #ffffff; --color-ink: #1c1a17; --color-ink-muted: #6b6459; --color-accent: #b8892f; --color-accent-soft: #e8d5a8; --color-line: rgba(28, 26, 23, 0.12); --font-display: "Cormorant Garamond", "Times New Roman", serif; --font-body: "Jost", "Helvetica Neue", sans-serif; } /* --------------------------------------------------------- 2. Royal Blue — sapphire depth + brushed brass --------------------------------------------------------- */ [data-theme="royal-blue"] { --color-bg: #f3f5fa; --color-surface: #ffffff; --color-ink: #10162b; --color-ink-muted: #4d5776; --color-accent: #9c7c3c; --color-accent-soft: #1c2b57; --color-line: rgba(16, 22, 43, 0.12); --font-display: "Playfair Display", "Georgia", serif; --font-body: "Jost", "Helvetica Neue", sans-serif; } [data-theme="royal-blue"] .site-header { background: linear-gradient(to bottom, rgba(16, 22, 43, 0.55), transparent); } /* --------------------------------------------------------- 3. Minimal White — quiet, editorial, near-monochrome --------------------------------------------------------- */ [data-theme="minimal-white"] { --color-bg: #ffffff; --color-surface: #ffffff; --color-ink: #16161a; --color-ink-muted: #77777d; --color-accent: #16161a; --color-accent-soft: #ececec; --color-line: rgba(0, 0, 0, 0.1); --font-display: "Marcellus", "Georgia", serif; --font-body: "Poppins", "Helvetica Neue", sans-serif; } [data-theme="minimal-white"] .btn { border-radius: 0; } [data-theme="minimal-white"] .divider { background: var(--color-ink); } /* --------------------------------------------------------- 4. Traditional Indian — vermilion & gold, ornate warmth --------------------------------------------------------- */ [data-theme="traditional-indian"] { --color-bg: #fff8ee; --color-surface: #fffaf1; --color-ink: #3a1109; --color-ink-muted: #7a4a35; --color-accent: #b3401f; --color-accent-soft: #f0c34d; --color-line: rgba(179, 64, 31, 0.18); --font-display: "Cinzel", "Georgia", serif; --font-body: "Tiro Devanagari Hindi", "Jost", serif; } [data-theme="traditional-indian"] .divider { width: 120px; height: 3px; background: linear-gradient( to right, transparent, var(--color-accent-soft), var(--color-accent), var(--color-accent-soft), transparent ); } /* --------------------------------------------------------- 5. Luxury Black — dramatic near-black with champagne gold --------------------------------------------------------- */ [data-theme="luxury-black"] { --color-bg: #0c0b0a; --color-surface: #151312; --color-ink: #f3ede1; --color-ink-muted: #a89f8e; --color-accent: #d4b26a; --color-accent-soft: #2a2622; --color-line: rgba(243, 237, 225, 0.14); --font-display: "Cormorant Garamond", "Times New Roman", serif; --font-body: "Jost", "Helvetica Neue", sans-serif; } [data-theme="luxury-black"] .card { background: var(--color-surface); border-color: rgba(212, 178, 106, 0.25); } [data-theme="luxury-black"] .form-field input, [data-theme="luxury-black"] .form-field select, [data-theme="luxury-black"] .form-field textarea { background: #1b1815; color: var(--color-ink); border-color: rgba(212, 178, 106, 0.25); } /* --------------------------------------------------------- 6. Modern Floral — soft blush + sage, contemporary serif --------------------------------------------------------- */ [data-theme="modern-floral"] { --color-bg: #fbf3f1; --color-surface: #ffffff; --color-ink: #33302b; --color-ink-muted: #7d766c; --color-accent: #94a582; --color-accent-soft: #f1d9d2; --color-line: rgba(51, 48, 43, 0.12); --font-display: "Fraunces", "Georgia", serif; --font-body: "Poppins", "Helvetica Neue", sans-serif; } [data-theme="modern-floral"] .btn { border-radius: 999px; } [data-theme="modern-floral"] .rsvp-toggle button { border-radius: 999px; }