/* ═══════════════════════════════════════════════════════════ THEME VARIATIONS Activated via data-theme on ═══════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────── VARIATION 1 — NIGHTLIFE Darker, neon magenta glow, club energy ───────────────────────────────────────── */ [data-theme="nightlife"] { --clr-deep-purple: #0F0A1A; --clr-royal-purple: #1A0F30; --clr-plum: #3D1A50; --clr-magenta: #FF0080; --clr-rich-magenta: #E6007A; --clr-soft-magenta: #FF3DA1; --clr-gold: #FF0080; --clr-champagne: #FFD4E8; --clr-gold-soft: #FF69B4; --clr-bg: #050208; --clr-bg-elevated: #0A0610; --clr-surface: #0F0A1A; --clr-surface-light: #1A0F30; --clr-text: #F5E8F0; --clr-text-muted: #B898C8; --clr-text-subtle: #7A5E8A; --grad-hero: linear-gradient(135deg, #050208 0%, #1A0F30 30%, #3D1A50 60%, #0F0A1A 100%); --grad-btn: linear-gradient(135deg, #FF0080 0%, #8B00FF 100%); --glass-bg: rgba(15, 10, 26, 0.65); --glass-border: rgba(255, 0, 128, 0.1); --glow-magenta: 0 0 50px rgba(255, 0, 128, 0.35), 0 0 100px rgba(255, 0, 128, 0.15); --glow-purple: 0 0 50px rgba(139, 0, 255, 0.3); --glow-gold: 0 0 30px rgba(255, 0, 128, 0.3); --glow-soft: 0 0 80px rgba(255, 0, 128, 0.15); } [data-theme="nightlife"] .hero__gradient { background: radial-gradient(ellipse at 20% 50%, rgba(255, 0, 128, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 30%, rgba(139, 0, 255, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 50% 100%, rgba(255, 0, 128, 0.1) 0%, transparent 40%), var(--grad-hero); } [data-theme="nightlife"] .hero__title-line.script { color: #FF0080; text-shadow: 0 0 40px rgba(255, 0, 128, 0.5); } [data-theme="nightlife"] .nav__cta { box-shadow: 0 0 40px rgba(255, 0, 128, 0.4); } [data-theme="nightlife"] .packages__card--popular { border-color: rgba(255, 0, 128, 0.3); box-shadow: 0 0 60px rgba(255, 0, 128, 0.2), inset 0 0 30px rgba(255, 0, 128, 0.05); } [data-theme="nightlife"] .packages__badge { background: linear-gradient(135deg, #FF0080, #8B00FF); box-shadow: 0 0 30px rgba(255, 0, 128, 0.4); } [data-theme="nightlife"] .services__card:hover { box-shadow: 0 0 60px rgba(255, 0, 128, 0.15), 0 0 120px rgba(139, 0, 255, 0.08); } [data-theme="nightlife"] .gallery__overlay { background: linear-gradient( to top, rgba(255, 0, 128, 0.85) 0%, rgba(139, 0, 255, 0.3) 50%, transparent 100% ); } [data-theme="nightlife"] .script { color: #FF0080; } [data-theme="nightlife"] .about__stat-number { color: #FF0080; text-shadow: 0 0 20px rgba(255, 0, 128, 0.3); } [data-theme="nightlife"] .testimonials__stars { color: #FF69B4; } [data-theme="nightlife"] .form-group input:focus, [data-theme="nightlife"] .form-group select:focus, [data-theme="nightlife"] .form-group textarea:focus { border-color: rgba(255, 0, 128, 0.4); box-shadow: 0 0 25px rgba(255, 0, 128, 0.15); } [data-theme="nightlife"] .nav__logo-script { color: #FF0080; text-shadow: 0 0 20px rgba(255, 0, 128, 0.3); } /* ───────────────────────────────────────── VARIATION 2 — ROMANTIC SPA Softer, warmer, blush & lavender tones ───────────────────────────────────────── */ [data-theme="spa"] { --clr-deep-purple: #2C2035; --clr-royal-purple: #5C4A6E; --clr-plum: #8E6F9E; --clr-magenta: #D4849A; --clr-rich-magenta: #C07088; --clr-soft-magenta: #E8A0B5; --clr-gold: #C9A87C; --clr-champagne: #F7EDE2; --clr-gold-soft: #D4B896; --clr-bg: #F5EDE8; --clr-bg-elevated: #EEDFE0; --clr-surface: #E8D5D8; --clr-surface-light: #F0E2E5; --clr-text: #2C2035; --clr-text-muted: #6B5870; --clr-text-subtle: #9A889E; --clr-border: rgba(0, 0, 0, 0.06); --grad-hero: linear-gradient(135deg, #F5EDE8 0%, #EEDFE0 30%, #E8D5D8 60%, #DBC5C8 100%); --grad-hero-overlay: linear-gradient(180deg, rgba(245,237,232,0) 0%, rgba(245, 237, 232, 0.7) 100%); --grad-btn: linear-gradient(135deg, #D4849A 0%, #8E6F9E 100%); --glass-bg: rgba(255, 255, 255, 0.5); --glass-border: rgba(0, 0, 0, 0.06); --glass-blur: 16px; --glow-magenta: 0 0 40px rgba(212, 132, 154, 0.2); --glow-purple: 0 0 40px rgba(92, 74, 110, 0.15); --glow-gold: 0 0 30px rgba(201, 168, 124, 0.15); --glow-soft: 0 0 50px rgba(212, 132, 154, 0.1); } [data-theme="spa"] .hero__gradient { background: radial-gradient(ellipse at 30% 30%, rgba(212, 132, 154, 0.15), transparent 60%), radial-gradient(ellipse at 70% 60%, rgba(142, 111, 158, 0.1), transparent 50%), var(--grad-hero); } [data-theme="spa"] .hero__title { color: var(--clr-deep-purple); } [data-theme="spa"] .hero__title-line.script { color: var(--clr-magenta); } [data-theme="spa"] .hero__subtitle { color: var(--clr-text-muted); } [data-theme="spa"] .hero__pre-title { color: var(--clr-gold); } [data-theme="spa"] .hero__scroll-indicator span { color: var(--clr-text-subtle); } [data-theme="spa"] .hero__scroll-line { background: linear-gradient(to bottom, var(--clr-gold), transparent); } [data-theme="spa"] .btn--ghost { color: var(--clr-text); border-color: rgba(44, 32, 53, 0.2); } [data-theme="spa"] .btn--ghost:hover { background: rgba(44, 32, 53, 0.06); border-color: rgba(44, 32, 53, 0.3); } [data-theme="spa"] .btn--outline { color: var(--clr-text); border-color: rgba(0, 0, 0, 0.1); } [data-theme="spa"] .btn--outline:hover { background: rgba(212, 132, 154, 0.08); border-color: rgba(212, 132, 154, 0.3); } [data-theme="spa"] .nav--scrolled { background: rgba(245, 237, 232, 0.9); } [data-theme="spa"] .nav__links a { color: var(--clr-text-muted); } [data-theme="spa"] .nav__links a:hover { color: var(--clr-text); } [data-theme="spa"] .nav__links a::after { background: var(--clr-magenta); } [data-theme="spa"] .nav__logo-serif { color: var(--clr-text); } [data-theme="spa"] .gallery__placeholder { background: radial-gradient(circle at 30% 40%, hsla(var(--hue), 30%, 70%, 0.3), transparent 60%), linear-gradient(135deg, var(--clr-surface), var(--clr-bg-elevated)); } [data-theme="spa"] .gallery__placeholder span { color: rgba(44, 32, 53, 0.12); } [data-theme="spa"] .gallery__overlay { background: linear-gradient( to top, rgba(212, 132, 154, 0.8) 0%, rgba(142, 111, 158, 0.3) 50%, transparent 100% ); } [data-theme="spa"] .gallery__overlay-title, [data-theme="spa"] .gallery__overlay-sub { color: #fff; } [data-theme="spa"] .about__image-placeholder { background: linear-gradient(135deg, var(--clr-surface), var(--clr-bg-elevated)); } [data-theme="spa"] .about__image-accent { border-color: var(--clr-magenta); } [data-theme="spa"] .testimonials__avatar { background: var(--grad-btn); color: #fff; } [data-theme="spa"] .packages__price span { color: var(--clr-text); } [data-theme="spa"] .form-group input, [data-theme="spa"] .form-group select, [data-theme="spa"] .form-group textarea { background: rgba(255, 255, 255, 0.6); color: var(--clr-text); } [data-theme="spa"] .form-group input::placeholder, [data-theme="spa"] .form-group textarea::placeholder { color: var(--clr-text-subtle); } [data-theme="spa"] .form-group input:focus, [data-theme="spa"] .form-group select:focus, [data-theme="spa"] .form-group textarea:focus { border-color: rgba(212, 132, 154, 0.4); background: rgba(255, 255, 255, 0.75); box-shadow: 0 0 20px rgba(212, 132, 154, 0.1); } [data-theme="spa"] .form-group select option { background: #fff; color: var(--clr-text); } [data-theme="spa"] .services__card:hover { box-shadow: 0 8px 40px rgba(212, 132, 154, 0.12); } [data-theme="spa"] .footer { border-top-color: rgba(0, 0, 0, 0.06); } [data-theme="spa"] .footer__bottom { border-top-color: rgba(0, 0, 0, 0.06); } [data-theme="spa"] ::selection { background: rgba(212, 132, 154, 0.3); color: var(--clr-deep-purple); } /* ───────────────────────────────────────── VARIATION 3 — WEDDING ELEGANCE Ultra-refined, ivory + gold + deep plum ───────────────────────────────────────── */ [data-theme="wedding"] { --clr-deep-purple: #1E1228; --clr-royal-purple: #3A2450; --clr-plum: #5C3D6E; --clr-magenta: #9E6B8A; --clr-rich-magenta: #8A5C78; --clr-soft-magenta: #B8849E; --clr-gold: #C9A84C; --clr-champagne: #FAF3E8; --clr-gold-soft: #D4BC6A; --clr-bg: #FAF6F0; --clr-bg-elevated: #F5EDE5; --clr-surface: #EDE3D8; --clr-surface-light: #F0E8DF; --clr-text: #1E1228; --clr-text-muted: #5C4A60; --clr-text-subtle: #95879A; --clr-border: rgba(0, 0, 0, 0.05); --grad-hero: linear-gradient(135deg, #FAF6F0 0%, #F5EDE5 30%, #EDE3D8 60%, #E8DDD0 100%); --grad-hero-overlay: linear-gradient(180deg, rgba(250,246,240,0) 0%, rgba(250,246,240,0.6) 100%); --grad-btn: linear-gradient(135deg, #C9A84C 0%, #8A5C78 100%); --glass-bg: rgba(255, 255, 255, 0.55); --glass-border: rgba(201, 168, 76, 0.12); --glass-blur: 16px; --glow-magenta: 0 0 40px rgba(158, 107, 138, 0.15); --glow-purple: 0 0 40px rgba(58, 36, 80, 0.1); --glow-gold: 0 0 40px rgba(201, 168, 76, 0.2); --glow-soft: 0 0 50px rgba(201, 168, 76, 0.1); } [data-theme="wedding"] .hero__gradient { background: radial-gradient(ellipse at 50% 40%, rgba(201, 168, 76, 0.08), transparent 60%), radial-gradient(ellipse at 30% 70%, rgba(92, 61, 110, 0.06), transparent 50%), var(--grad-hero); } [data-theme="wedding"] .hero__title { color: var(--clr-deep-purple); font-weight: 300; } [data-theme="wedding"] .hero__title-line.script { color: var(--clr-gold); } [data-theme="wedding"] .hero__subtitle { color: var(--clr-text-muted); } [data-theme="wedding"] .hero__pre-title { color: var(--clr-gold); } [data-theme="wedding"] .hero__scroll-indicator span { color: var(--clr-text-subtle); } [data-theme="wedding"] .hero__scroll-line { background: linear-gradient(to bottom, var(--clr-gold), transparent); } [data-theme="wedding"] .btn--primary { color: #fff; } [data-theme="wedding"] .btn--ghost { color: var(--clr-text); border-color: rgba(30, 18, 40, 0.15); } [data-theme="wedding"] .btn--ghost:hover { background: rgba(30, 18, 40, 0.04); } [data-theme="wedding"] .btn--outline { color: var(--clr-text); } [data-theme="wedding"] .nav--scrolled { background: rgba(250, 246, 240, 0.92); } [data-theme="wedding"] .nav__links a { color: var(--clr-text-muted); } [data-theme="wedding"] .nav__links a:hover { color: var(--clr-text); } [data-theme="wedding"] .nav__links a::after { background: var(--clr-gold); } [data-theme="wedding"] .nav__logo-serif { color: var(--clr-text); } [data-theme="wedding"] .nav__logo-script { color: var(--clr-gold); } [data-theme="wedding"] .gallery__placeholder { background: radial-gradient(circle at 30% 40%, hsla(var(--hue), 20%, 75%, 0.3), transparent 60%), linear-gradient(135deg, var(--clr-surface), var(--clr-bg-elevated)); } [data-theme="wedding"] .gallery__placeholder span { color: rgba(30, 18, 40, 0.08); } [data-theme="wedding"] .gallery__overlay { background: linear-gradient( to top, rgba(201, 168, 76, 0.8) 0%, rgba(92, 61, 110, 0.25) 50%, transparent 100% ); } [data-theme="wedding"] .gallery__overlay-title, [data-theme="wedding"] .gallery__overlay-sub { color: #fff; } [data-theme="wedding"] .about__image-placeholder { background: linear-gradient(135deg, var(--clr-surface), var(--clr-bg-elevated)); } [data-theme="wedding"] .about__image-accent { border-color: var(--clr-gold); opacity: 0.2; } [data-theme="wedding"] .section-title { font-weight: 300; } [data-theme="wedding"] .testimonials__avatar { background: var(--grad-btn); color: #fff; } [data-theme="wedding"] .packages__price span { color: var(--clr-text); } [data-theme="wedding"] .packages__card--popular { border-color: rgba(201, 168, 76, 0.2); box-shadow: var(--glow-gold); } [data-theme="wedding"] .packages__badge { background: var(--grad-btn); box-shadow: var(--glow-gold); } [data-theme="wedding"] .form-group input, [data-theme="wedding"] .form-group select, [data-theme="wedding"] .form-group textarea { background: rgba(255, 255, 255, 0.65); color: var(--clr-text); } [data-theme="wedding"] .form-group input::placeholder, [data-theme="wedding"] .form-group textarea::placeholder { color: var(--clr-text-subtle); } [data-theme="wedding"] .form-group input:focus, [data-theme="wedding"] .form-group select:focus, [data-theme="wedding"] .form-group textarea:focus { border-color: rgba(201, 168, 76, 0.35); background: rgba(255, 255, 255, 0.8); box-shadow: 0 0 20px rgba(201, 168, 76, 0.1); } [data-theme="wedding"] .form-group select option { background: #fff; color: var(--clr-text); } [data-theme="wedding"] .services__card:hover { box-shadow: 0 8px 40px rgba(201, 168, 76, 0.1); } [data-theme="wedding"] .footer { border-top-color: var(--clr-border); } [data-theme="wedding"] .footer__bottom { border-top-color: var(--clr-border); } [data-theme="wedding"] ::selection { background: rgba(201, 168, 76, 0.25); color: var(--clr-deep-purple); } /* ───────────────────────────────────────── Variation-aware particle canvas ───────────────────────────────────────── */ [data-theme="spa"] .hero__particles, [data-theme="wedding"] .hero__particles { opacity: 0.4; } /* ───────────────────────────────────────── Smooth theme transition ───────────────────────────────────────── */ body { transition: background-color 0.8s ease, color 0.8s ease; } .hero__gradient, .nav, .services, .packages, .contact, .footer, .glass, .btn, .section-label, .section-title, .script, .about__stat-number, .testimonials__stars, .form-group input, .form-group select, .form-group textarea { transition: background 0.8s ease, color 0.8s ease, border-color 0.8s ease, box-shadow 0.8s ease; }