/* ================================================ INVITI — themes.css Semua tema warna tersedia di sini. Diterapkan via class di element. ================================================ */ /* ════════════════════════════════════════════════ TEMA 1: Rose Elegance (default) ════════════════════════════════════════════════ */ :root, html[data-theme="rose"] { --brand: #e8637a; --brand-dk: #c94a60; --brand-lt: #fde8ec; --brand-rgb: 232, 99, 122; --accent: #c9a84c; --accent-lt: #fff8e7; --hero-from: #0f0f1a; --hero-mid: #2d1b3d; --hero-to: #1a2a3a; --blob-1: #e8637a; --blob-2: #c9a84c; --blob-3: #6c63ff; --nav-logo-color: #ffffff; } /* ════════════════════════════════════════════════ TEMA 2: Royal Blue ════════════════════════════════════════════════ */ html[data-theme="blue"] { --brand: #3b82f6; --brand-dk: #1d4ed8; --brand-lt: #eff6ff; --brand-rgb: 59, 130, 246; --accent: #f59e0b; --accent-lt: #fffbeb; --hero-from: #0a0f1e; --hero-mid: #0d1b3e; --hero-to: #0a1628; --blob-1: #3b82f6; --blob-2: #f59e0b; --blob-3: #8b5cf6; } /* ════════════════════════════════════════════════ TEMA 3: Emerald Green ════════════════════════════════════════════════ */ html[data-theme="green"] { --brand: #10b981; --brand-dk: #059669; --brand-lt: #ecfdf5; --brand-rgb: 16, 185, 129; --accent: #f59e0b; --accent-lt: #fffbeb; --hero-from: #020d09; --hero-mid: #052e1c; --hero-to: #021a10; --blob-1: #10b981; --blob-2: #f59e0b; --blob-3: #6366f1; } /* ════════════════════════════════════════════════ TEMA 4: Deep Purple ════════════════════════════════════════════════ */ html[data-theme="purple"] { --brand: #8b5cf6; --brand-dk: #7c3aed; --brand-lt: #f5f3ff; --brand-rgb: 139, 92, 246; --accent: #ec4899; --accent-lt: #fdf2f8; --hero-from: #0d0720; --hero-mid: #1e0b3e; --hero-to: #0d0a28; --blob-1: #8b5cf6; --blob-2: #ec4899; --blob-3: #3b82f6; } /* ════════════════════════════════════════════════ TEMA 5: Sunset Orange ════════════════════════════════════════════════ */ html[data-theme="orange"] { --brand: #f97316; --brand-dk: #ea580c; --brand-lt: #fff7ed; --brand-rgb: 249, 115, 22; --accent: #eab308; --accent-lt: #fefce8; --hero-from: #1a0a00; --hero-mid: #3d1505; --hero-to: #1a0e00; --blob-1: #f97316; --blob-2: #eab308; --blob-3: #e8637a; } /* ════════════════════════════════════════════════ TEMA 6: Midnight Dark (full dark mode) ════════════════════════════════════════════════ */ html[data-theme="dark"] { --brand: #a78bfa; --brand-dk: #7c3aed; --brand-lt: #1e1b4b; --brand-rgb: 167, 139, 250; --accent: #fbbf24; --accent-lt: #1c1007; --hero-from: #030307; --hero-mid: #0d0d14; --hero-to: #03060f; --blob-1: #a78bfa; --blob-2: #fbbf24; --blob-3: #34d399; /* Override page colors untuk dark mode */ --page-bg: #0d0d14; --page-text: #e2e8f0; --page-sub: #94a3b8; --page-border: #1e293b; --page-card: #111827; --page-light: #111827; } /* ════════════════════════════════════════════════ PEMETAAN BRAND COLOR ke CSS variables salespage ════════════════════════════════════════════════ */ /* Ganti semua referensi --rose dengan --brand */ html[data-theme] .btn--primary, html[data-theme] .hero__badge, html[data-theme] .wa-float { --rose: var(--brand); --rose-dk: var(--brand-dk); --rose-lt: var(--brand-lt); } /* Hero background */ html[data-theme] .hero { background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-mid) 45%, var(--hero-to) 100%) !important; } /* Blobs */ html[data-theme] .hero__blob--1 { background: var(--blob-1) !important; } html[data-theme] .hero__blob--2 { background: var(--blob-2) !important; } html[data-theme] .hero__blob--3 { background: var(--blob-3) !important; } /* CTA final */ html[data-theme] .cta-final { background: linear-gradient(145deg, var(--hero-from) 0%, var(--hero-mid) 50%, var(--hero-to) 100%) !important; } html[data-theme] .cta-final__blob--1 { background: var(--blob-1) !important; } html[data-theme] .cta-final__blob--2 { background: var(--blob-2) !important; } /* Primary buttons */ html[data-theme] .btn--primary { background: linear-gradient(135deg, var(--brand), var(--brand-dk)) !important; box-shadow: 0 4px 20px rgba(var(--brand-rgb), .4) !important; border-color: transparent !important; } html[data-theme] .btn--primary:hover { box-shadow: 0 10px 32px rgba(var(--brand-rgb), .55) !important; } /* Outline buttons */ html[data-theme] .btn--outline { color: var(--brand) !important; border-color: var(--brand) !important; } html[data-theme] .btn--outline:hover { background: var(--brand) !important; color: #fff !important; } /* Nav CTA */ html[data-theme] .btn--nav { background: var(--brand) !important; } html[data-theme] .btn--nav:hover { background: var(--brand-dk) !important; } /* Nav logo dot */ html[data-theme] .nav__logo span { color: var(--brand) !important; } /* Nav links hover underline */ html[data-theme] .nav__links a::after { background: var(--brand) !important; } html[data-theme] .nav__links a:hover { color: var(--brand) !important; } html[data-theme] .nav.scrolled .nav__links a:hover { color: var(--brand) !important; } /* Hero badge */ html[data-theme] .hero__badge { background: rgba(var(--brand-rgb), .15) !important; border-color: rgba(var(--brand-rgb), .35) !important; } /* Hero title em */ html[data-theme] .hero__title em { color: var(--brand) !important; } /* Mockup */ html[data-theme] .mockup__rsvp { background: linear-gradient(135deg, var(--brand), var(--brand-dk)) !important; box-shadow: 0 4px 12px rgba(var(--brand-rgb), .5) !important; } html[data-theme] .mockup__glow { background: var(--brand) !important; } html[data-theme] .mockup__divider i { color: var(--brand) !important; } html[data-theme] .mockup__divider span { background: linear-gradient(90deg, transparent, var(--brand)); } html[data-theme] .mockup__divider span:last-child { background: linear-gradient(90deg, var(--brand), transparent); } /* Section tag */ html[data-theme] .section__tag { color: var(--brand) !important; } html[data-theme] .section__title em { color: var(--brand) !important; } /* Feature cards hover */ html[data-theme] .feature-card:hover { border-color: var(--brand) !important; } html[data-theme] .feature-card__icon { background: linear-gradient(135deg, var(--brand-lt), rgba(255,255,255,.9)) !important; border-color: rgba(var(--brand-rgb), .18) !important; } html[data-theme] .feature-card__icon svg { stroke: var(--brand) !important; } html[data-theme] .feature-card:hover .feature-card__icon { background: linear-gradient(135deg, var(--brand), var(--brand-dk)) !important; box-shadow: 0 6px 16px rgba(var(--brand-rgb), .35) !important; border-color: transparent !important; } html[data-theme] .feature-card:hover .feature-card__icon svg { stroke: #fff !important; } /* Steps */ html[data-theme] .step__num { background: linear-gradient(135deg, var(--brand), var(--brand-dk)) !important; box-shadow: 0 4px 14px rgba(var(--brand-rgb), .5) !important; } html[data-theme] .step:hover { border-color: var(--brand) !important; } html[data-theme] .step__icon { color: var(--brand) !important; } html[data-theme] .step__arrow { color: var(--brand) !important; } /* Theme filter buttons */ html[data-theme] .filter-btn.active, html[data-theme] .filter-btn:hover { background: var(--brand) !important; border-color: var(--brand) !important; box-shadow: 0 4px 16px rgba(var(--brand-rgb), .35) !important; } /* Testimonial featured */ html[data-theme] .testi-card--featured { background: linear-gradient(145deg, var(--brand), var(--brand-dk)) !important; } /* Testi avatar */ html[data-theme] .testi-card__avatar { background: linear-gradient(135deg, var(--brand), var(--brand-dk)) !important; box-shadow: 0 4px 12px rgba(var(--brand-rgb), .4) !important; } /* Pricing popular */ html[data-theme] .pricing-card--popular { border-color: var(--brand) !important; box-shadow: 0 0 0 5px rgba(var(--brand-rgb),.08), var(--shadow-lg) !important; } html[data-theme] .pricing-card__badge { background: linear-gradient(135deg, var(--brand), var(--brand-dk)) !important; box-shadow: 0 4px 12px rgba(var(--brand-rgb),.5) !important; } html[data-theme] .pricing-card--popular .pricing-card__name { color: var(--brand) !important; } html[data-theme] .pricing-card__features li i.fa-check-circle { color: var(--brand) !important; } /* FAQ */ html[data-theme] .faq__question::after { color: var(--brand) !important; } html[data-theme] .faq__question[aria-expanded="true"] { color: var(--brand) !important; } html[data-theme] .faq__item:has(.faq__question[aria-expanded="true"]) { border-color: var(--brand) !important; } /* CTA title em */ html[data-theme] .cta-final h2 em { color: var(--brand) !important; } /* WA Float */ html[data-theme] .wa-float { background: #25d366 !important; } /* WA stays green */ /* Footer logo */ html[data-theme] .footer__brand .nav__logo span { color: var(--brand) !important; } html[data-theme] .footer__social a:hover { background: var(--brand) !important; border-color: var(--brand) !important; } html[data-theme] .footer__col a:hover { color: var(--brand) !important; } /* ════════════════════════════════════════════════ DARK MODE OVERRIDES ════════════════════════════════════════════════ */ html[data-theme="dark"] body { background: var(--page-bg) !important; color: var(--page-text) !important; } html[data-theme="dark"] .nav.scrolled { background: rgba(13,13,20,.96) !important; } html[data-theme="dark"] .nav.scrolled .nav__logo { color: var(--page-text) !important; } html[data-theme="dark"] .nav.scrolled .nav__links a { color: var(--page-sub) !important; } html[data-theme="dark"] .trust { background: #111827 !important; border-color: #1e293b !important; } html[data-theme="dark"] .trust__label, html[data-theme="dark"] .trust__logos span { color: #94a3b8 !important; } html[data-theme="dark"] .section { background: var(--page-bg) !important; } html[data-theme="dark"] .section__title { color: var(--page-text) !important; } html[data-theme="dark"] .section__sub { color: var(--page-sub) !important; } html[data-theme="dark"] .feature-card { background: var(--page-card) !important; border-color: var(--page-border) !important; } html[data-theme="dark"] .feature-card h3 { color: var(--page-text) !important; } html[data-theme="dark"] .feature-card p { color: var(--page-sub) !important; } html[data-theme="dark"] .feature-card__icon { background: rgba(167,139,250,.12) !important; border-color: rgba(167,139,250,.2) !important; } html[data-theme="dark"] .howto { background: #111827 !important; } html[data-theme="dark"] .step { background: var(--page-card) !important; border-color: var(--page-border) !important; } html[data-theme="dark"] .step h3 { color: var(--page-text) !important; } html[data-theme="dark"] .step p { color: var(--page-sub) !important; } html[data-theme="dark"] .themes { background: var(--page-bg) !important; } html[data-theme="dark"] .theme-card { background: var(--page-card) !important; border-color: var(--page-border) !important; } html[data-theme="dark"] .theme-card__info { background: var(--page-card) !important; } html[data-theme="dark"] .theme-card__name { color: var(--page-text) !important; } html[data-theme="dark"] .testimonials { background: #111827 !important; } html[data-theme="dark"] .testi-card { background: var(--page-card) !important; border-color: var(--page-border) !important; } html[data-theme="dark"] .testi-card > p { color: #94a3b8 !important; } html[data-theme="dark"] .testi-card__author strong { color: var(--page-text) !important; } html[data-theme="dark"] .pricing { background: var(--page-bg) !important; } html[data-theme="dark"] .pricing-card { background: var(--page-card) !important; border-color: var(--page-border) !important; } html[data-theme="dark"] .price__amount { color: var(--page-text) !important; } html[data-theme="dark"] .pricing-card__name { color: var(--page-sub) !important; } html[data-theme="dark"] .pricing-card__features li { color: var(--page-text) !important; } html[data-theme="dark"] .pricing-card__features li.disabled { color: var(--page-sub) !important; } html[data-theme="dark"] .faq { background: #111827 !important; } html[data-theme="dark"] .faq__item { background: var(--page-card) !important; border-color: var(--page-border) !important; } html[data-theme="dark"] .faq__question { color: var(--page-text) !important; } html[data-theme="dark"] .faq__answer p { color: var(--page-sub) !important; } html[data-theme="dark"] .footer { background: #030307 !important; } html[data-theme="dark"] .footer__brand p { color: #64748b !important; } /* ════════════════════════════════════════════════ MOCKUP PREMIUM — theme color overrides Semua warna accent pada mockup mengikuti tema aktif ════════════════════════════════════════════════ */ /* Glow blobs */ html[data-theme] .mockup__glow { background: var(--brand) !important; } html[data-theme] .mockup__glow--2 { background: var(--blob-3) !important; } /* Screen background gradient — tiap tema punya warna khas */ html[data-theme="rose"] .mockup__screen { background: linear-gradient(168deg, #fef0f4 0%, #fde8f0 35%, #f0e8fe 65%, #e8f0fe 100%) !important; } html[data-theme="blue"] .mockup__screen { background: linear-gradient(168deg, #eff6ff 0%, #dbeafe 35%, #e0e7ff 65%, #f0f9ff 100%) !important; } html[data-theme="green"] .mockup__screen { background: linear-gradient(168deg, #ecfdf5 0%, #d1fae5 35%, #e0fdf4 65%, #f0fdf4 100%) !important; } html[data-theme="purple"] .mockup__screen { background: linear-gradient(168deg, #faf5ff 0%, #ede9fe 35%, #f5f3ff 65%, #fdf4ff 100%) !important; } html[data-theme="orange"] .mockup__screen { background: linear-gradient(168deg, #fff7ed 0%, #ffedd5 35%, #fef3c7 65%, #fffbeb 100%) !important; } html[data-theme="dark"] .mockup__screen { background: linear-gradient(168deg, #0f0a1e 0%, #1a0e2e 35%, #0e0e1a 65%, #0a0a14 100%) !important; } /* Floral bg radial dots */ html[data-theme] .mockup__floral-bg { background-image: radial-gradient(circle at 20% 15%, rgba(var(--brand-rgb), .1) 0%, transparent 40%), radial-gradient(circle at 80% 80%, rgba(var(--brand-rgb), .08) 0%, transparent 40%), radial-gradient(circle at 60% 30%, rgba(var(--brand-rgb), .06) 0%, transparent 30%) !important; } /* Ornament text color */ html[data-theme] .mockup__ornament { color: var(--accent, var(--brand)) !important; } /* Subtitle color — dark mode needs lighter text */ html[data-theme="dark"] .mockup__subtitle { color: rgba(255,255,255,.5) !important; } html[data-theme="dark"] .mockup__names { color: #e2e8f0 !important; } /* Ampersand */ html[data-theme] .mockup__ampersand { color: var(--brand) !important; } /* Photo ring */ html[data-theme] .mockup__photo-inner { background: linear-gradient(135deg, rgba(var(--brand-rgb), .25), rgba(var(--brand-rgb), .5), rgba(var(--brand-rgb), .15)) !important; box-shadow: 0 0 0 3px rgba(255,255,255,.8), 0 0 0 5px rgba(var(--brand-rgb), .25), 0 8px 24px rgba(var(--brand-rgb), .3) !important; } html[data-theme] .mockup__ring-ornament { border-color: rgba(var(--brand-rgb), .35) !important; } html[data-theme] .ring-dot { background: var(--brand) !important; } /* Date badge */ html[data-theme] .mockup__date-badge { border-color: rgba(var(--brand-rgb), .2) !important; box-shadow: 0 2px 8px rgba(var(--brand-rgb), .12) !important; } html[data-theme="dark"] .mockup__date-badge { background: rgba(255,255,255,.06) !important; border-color: rgba(var(--brand-rgb), .25) !important; } html[data-theme] .mockup__date-badge > i { color: var(--brand) !important; } html[data-theme="dark"] .mockup__date { color: #e2e8f0 !important; } html[data-theme="dark"] .mockup__venue { color: rgba(255,255,255,.45) !important; } /* Countdown boxes */ html[data-theme] .cd-box::before { background: linear-gradient(135deg, rgba(var(--brand-rgb), .18), transparent) !important; } html[data-theme="dark"] .cd-box { background: linear-gradient(135deg, #1e1e30, #0d0d18) !important; } /* Divider */ html[data-theme] .mockup__divider i { color: var(--brand) !important; } html[data-theme] .mockup__divider span { background: linear-gradient(90deg, transparent, rgba(var(--brand-rgb), .5)) !important; } html[data-theme] .mockup__divider span:last-child { background: linear-gradient(90deg, rgba(var(--brand-rgb), .5), transparent) !important; } /* RSVP button */ html[data-theme] .mockup__rsvp { background: linear-gradient(135deg, var(--brand), var(--brand-dk)) !important; box-shadow: 0 4px 14px rgba(var(--brand-rgb), .5) !important; } /* Bottom nav active item */ html[data-theme] .mb-nav-item--active { background: var(--brand) !important; box-shadow: 0 3px 8px rgba(var(--brand-rgb), .4) !important; } html[data-theme="dark"] .mockup__bottom-nav { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.08) !important; } html[data-theme="dark"] .mb-nav-item { color: rgba(255,255,255,.35) !important; } /* Floating notification card */ html[data-theme] .mf-notif__icon { background: linear-gradient(135deg, var(--brand), var(--brand-dk)) !important; } html[data-theme="dark"] .mf-notif { background: rgba(30, 30, 50, .92) !important; border-color: rgba(255,255,255,.08) !important; } html[data-theme="dark"] .mf-notif__text strong { color: #e2e8f0 !important; } html[data-theme="dark"] .mf-notif__text span { color: rgba(255,255,255,.4) !important; } /* Floating music card */ html[data-theme] .mf-music > i { color: var(--brand) !important; } html[data-theme] .mf-music__bars span { background: var(--brand) !important; } /* Floating guest card */ html[data-theme="dark"] .mf-guests { background: rgba(30, 30, 50, .92) !important; border-color: rgba(255,255,255,.08) !important; } html[data-theme="dark"] .mf-guests__num { color: #e2e8f0 !important; } html[data-theme="dark"] .mf-guests__label { color: rgba(255,255,255,.45) !important; } html[data-theme] .mf-guests__avatars span { background: linear-gradient(135deg, var(--brand), var(--brand-dk)) !important; border-color: white !important; } html[data-theme] .mf-guests__avatars span:last-child { background: linear-gradient(135deg, var(--blob-3, #a78bfa), var(--brand-dk)) !important; }