html { scroll-behavior: smooth; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* ==========================================================================
🎨 INTERNATIONAL-STANDARD WEBSITE COLOR PRESETS (4 Themes)
========================================================================== */
/* 1. 💎 PRESET: Emerald & Neon Mint (Default) */
:root,
:root[data-theme-preset="emerald"],
.theme-preset-emerald {
--theme-primary: #10b981;
--theme-primary-hover: #059669;
--theme-primary-dark: #047857;
--theme-accent: #14ffaa;
--theme-accent-alt: #ef8512;
--theme-bg-light: #eef9f3;
--theme-bg-dark: #061a12;
--theme-header-bg-light: #c8e8d8;
--theme-header-bg-dark: #072c1e;
--theme-header-border-light: #aad1bf;
--theme-header-border-dark: #134330;
--theme-control-bg-light: #b8dccb;
--theme-control-bg-dark: #0c3826;
--theme-text-light: #2c7057;
--theme-text-dark: #ecfdf5;
--theme-muted-light: #91bcaa;
--theme-card-bg-light: #ffffff;
--theme-card-border-light: #dbebe3;
--theme-card-bg-dark: #0c281e;
--theme-card-border-dark: #144332;
--theme-gradient-primary: linear-gradient(-45deg, #10b981, #059669, #14ffaa, #10b981);
--theme-gradient-accent: linear-gradient(135deg, #ef8512, #d97306);
--theme-gradient-hero-border: linear-gradient(135deg, #10b981, #059669, #f97316);
--theme-hero-gradient: linear-gradient(135deg, #16a34a, #198b55, #0f6c44);
--theme-hero-box-light: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(235, 247, 242, 0.9));
--theme-hero-box-dark: linear-gradient(135deg, rgba(13, 40, 30, 0.9), rgba(6, 26, 18, 0.95));
--theme-support-gradient: linear-gradient(135deg, #073822, #0a4d30, #126b42);
--theme-footer-bg: #061f14;
--theme-footer-card-bg: #093525;
--theme-footer-accent: #10b981;
--theme-footer-border: #133829;
--theme-footer-gradient: linear-gradient(180deg, #053223 0%, #04261b 50%, #021710 100%);
--theme-glow: rgba(16, 185, 129, 0.4);
--theme-badge-bg: rgba(16, 185, 129, 0.15);
--theme-badge-text: #10b981;
--theme-btn-login: #198b55;
--theme-btn-signup: #ef8512;
--theme-sidebar-active-bg-light: #dcfce7;
--theme-sidebar-active-text-light: #15803d;
--theme-sidebar-active-bg-dark: #064e3b;
--theme-sidebar-active-text-dark: #34d399;
--theme-banner-from: #0a4d30;
--theme-banner-via: #0d5c3a;
--theme-banner-to: #ea580c;
/* Legacy compatibility bindings */
--orange: #ef8512;
--green-light: #23a065;
--green: #14ffaa;
--white: #ffffff;
--text-color: #2c7057;
--text-light-color: #91bcaa;
--menu-bg-color: #c8e8d8;
--menu-bg-light-color: #b8dccb;
--menu-bg-dark-color: rgba(44, 112, 87, 0.1);
--border-color: #aad1bf;
--card-border: #dbebe3;
--card-bg: #ffffff;
--body-bg: #eef9f3;
}
/* 2. ⚡ PRESET: Cyber Indigo & Electric Blue */
:root[data-theme-preset="indigo"],
.theme-preset-indigo {
--theme-primary: #6366f1;
--theme-primary-hover: #4f46e5;
--theme-primary-dark: #4338ca;
--theme-accent: #06b6d4;
--theme-accent-alt: #8b5cf6;
--theme-bg-light: #eef2ff;
--theme-bg-dark: #070c1b;
--theme-header-bg-light: #c7d2fe;
--theme-header-bg-dark: #0c152e;
--theme-header-border-light: #a5b4fc;
--theme-header-border-dark: #1e2952;
--theme-control-bg-light: #b4c2f8;
--theme-control-bg-dark: #131f42;
--theme-text-light: #1e1b4b;
--theme-text-dark: #f1f5f9;
--theme-muted-light: #818cf8;
--theme-card-bg-light: #ffffff;
--theme-card-border-light: #e0e7ff;
--theme-card-bg-dark: #111c38;
--theme-card-border-dark: #1e2f5c;
--theme-gradient-primary: linear-gradient(-45deg, #6366f1, #3b82f6, #06b6d4, #6366f1);
--theme-gradient-accent: linear-gradient(135deg, #8b5cf6, #ec4899);
--theme-gradient-hero-border: linear-gradient(135deg, #6366f1, #3b82f6, #ec4899);
--theme-hero-gradient: linear-gradient(135deg, #4338ca, #6366f1, #3b82f6);
--theme-hero-box-light: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(238, 242, 255, 0.9));
--theme-hero-box-dark: linear-gradient(135deg, rgba(17, 28, 56, 0.9), rgba(7, 12, 27, 0.95));
--theme-support-gradient: linear-gradient(135deg, #1e1b4b, #312e81, #4338ca);
--theme-footer-bg: #080d1e;
--theme-footer-card-bg: #0d152e;
--theme-footer-accent: #6366f1;
--theme-footer-border: #152042;
--theme-footer-gradient: linear-gradient(180deg, #0d152e 0%, #080d1e 50%, #040710 100%);
--theme-glow: rgba(99, 102, 241, 0.45);
--theme-badge-bg: rgba(99, 102, 241, 0.15);
--theme-badge-text: #6366f1;
--theme-btn-login: #4f46e5;
--theme-btn-signup: #06b6d4;
--theme-sidebar-active-bg-light: #e0e7ff;
--theme-sidebar-active-text-light: #4338ca;
--theme-sidebar-active-bg-dark: #1e1b4b;
--theme-sidebar-active-text-dark: #a5b4fc;
--theme-banner-from: #1e1b4b;
--theme-banner-via: #312e81;
--theme-banner-to: #0891b2;
/* Legacy compatibility */
--orange: #06b6d4;
--green-light: #6366f1;
--green: #38bdf8;
--text-color: #1e1b4b;
--text-light-color: #818cf8;
--menu-bg-color: #c7d2fe;
--menu-bg-light-color: #b4c2f8;
--menu-bg-dark-color: rgba(99, 102, 241, 0.12);
--border-color: #a5b4fc;
--card-border: #e0e7ff;
--card-bg: #ffffff;
--body-bg: #eef2ff;
}
/* 3. 👑 PRESET: Royal Violet & Cosmic Fuchsia */
:root[data-theme-preset="violet"],
.theme-preset-violet {
--theme-primary: #8b5cf6;
--theme-primary-hover: #7c3aed;
--theme-primary-dark: #6d28d9;
--theme-accent: #ec4899;
--theme-accent-alt: #c084fc;
--theme-bg-light: #f5f3ff;
--theme-bg-dark: #10081c;
--theme-header-bg-light: #ddd6fe;
--theme-header-bg-dark: #190d2e;
--theme-header-border-light: #c4b5fd;
--theme-header-border-dark: #331b57;
--theme-control-bg-light: #cfc3fc;
--theme-control-bg-dark: #22123d;
--theme-text-light: #2e1065;
--theme-text-dark: #faf5ff;
--theme-muted-light: #a78bfa;
--theme-card-bg-light: #ffffff;
--theme-card-border-light: #ede9fe;
--theme-card-bg-dark: #1d1033;
--theme-card-border-dark: #3b1d61;
--theme-gradient-primary: linear-gradient(-45deg, #8b5cf6, #ec4899, #c084fc, #8b5cf6);
--theme-gradient-accent: linear-gradient(135deg, #ec4899, #f43f5e);
--theme-gradient-hero-border: linear-gradient(135deg, #8b5cf6, #ec4899, #f59e0b);
--theme-hero-gradient: linear-gradient(135deg, #6d28d9, #8b5cf6, #ec4899);
--theme-hero-box-light: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 243, 255, 0.9));
--theme-hero-box-dark: linear-gradient(135deg, rgba(29, 16, 51, 0.9), rgba(16, 8, 28, 0.95));
--theme-support-gradient: linear-gradient(135deg, #2e1065, #4c1d95, #6d28d9);
--theme-footer-bg: #0f071a;
--theme-footer-card-bg: #190d2e;
--theme-footer-accent: #8b5cf6;
--theme-footer-border: #291247;
--theme-footer-gradient: linear-gradient(180deg, #1b0c30 0%, #0f071a 50%, #08030e 100%);
--theme-glow: rgba(139, 92, 246, 0.45);
--theme-badge-bg: rgba(139, 92, 246, 0.15);
--theme-badge-text: #8b5cf6;
--theme-btn-login: #7c3aed;
--theme-btn-signup: #ec4899;
--theme-sidebar-active-bg-light: #ede9fe;
--theme-sidebar-active-text-light: #6d28d9;
--theme-sidebar-active-bg-dark: #2e1065;
--theme-sidebar-active-text-dark: #c4b5fd;
--theme-banner-from: #2e1065;
--theme-banner-via: #4c1d95;
--theme-banner-to: #be185d;
/* Legacy compatibility */
--orange: #ec4899;
--green-light: #8b5cf6;
--green: #c084fc;
--text-color: #2e1065;
--text-light-color: #a78bfa;
--menu-bg-color: #ddd6fe;
--menu-bg-light-color: #cfc3fc;
--menu-bg-dark-color: rgba(139, 92, 246, 0.12);
--border-color: #c4b5fd;
--card-border: #ede9fe;
--card-bg: #ffffff;
--body-bg: #f5f3ff;
}
/* 4. 🔥 PRESET: Sunset Amber & Crimson Flame */
:root[data-theme-preset="amber"],
.theme-preset-amber {
--theme-primary: #f59e0b;
--theme-primary-hover: #d97706;
--theme-primary-dark: #b45309;
--theme-accent: #ef4444;
--theme-accent-alt: #f97316;
--theme-bg-light: #fffbeb;
--theme-bg-dark: #180e03;
--theme-header-bg-light: #fde68a;
--theme-header-bg-dark: #261605;
--theme-header-border-light: #fcd34d;
--theme-header-border-dark: #472808;
--theme-control-bg-light: #fcd96a;
--theme-control-bg-dark: #331e07;
--theme-text-light: #78350f;
--theme-text-dark: #fffbeb;
--theme-muted-light: #fbbf24;
--theme-card-bg-light: #ffffff;
--theme-card-border-light: #fef3c7;
--theme-card-bg-dark: #281605;
--theme-card-border-dark: #4d2708;
--theme-gradient-primary: linear-gradient(-45deg, #f59e0b, #f97316, #ef4444, #f59e0b);
--theme-gradient-accent: linear-gradient(135deg, #ef4444, #dc2626);
--theme-gradient-hero-border: linear-gradient(135deg, #f59e0b, #f97316, #ef4444);
--theme-hero-gradient: linear-gradient(135deg, #b45309, #d97706, #ea580c);
--theme-hero-box-light: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 251, 235, 0.9));
--theme-hero-box-dark: linear-gradient(135deg, rgba(38, 22, 5, 0.9), rgba(24, 14, 3, 0.95));
--theme-support-gradient: linear-gradient(135deg, #451a03, #78350f, #9a3412);
--theme-footer-bg: #170b02;
--theme-footer-card-bg: #261605;
--theme-footer-accent: #f59e0b;
--theme-footer-border: #3b1c04;
--theme-footer-gradient: linear-gradient(180deg, #261203 0%, #170b02 50%, #0d0601 100%);
--theme-glow: rgba(245, 158, 11, 0.45);
--theme-badge-bg: rgba(245, 158, 11, 0.15);
--theme-badge-text: #f59e0b;
--theme-btn-login: #d97706;
--theme-btn-signup: #ef4444;
--theme-sidebar-active-bg-light: #fef3c7;
--theme-sidebar-active-text-light: #b45309;
--theme-sidebar-active-bg-dark: #451a03;
--theme-sidebar-active-text-dark: #fde68a;
--theme-banner-from: #451a03;
--theme-banner-via: #78350f;
--theme-banner-to: #b91c1c;
/* Legacy compatibility */
--orange: #ef4444;
--green-light: #f59e0b;
--green: #f97316;
--text-color: #78350f;
--text-light-color: #fbbf24;
--menu-bg-color: #fde68a;
--menu-bg-light-color: #fcd96a;
--menu-bg-dark-color: rgba(245, 158, 11, 0.12);
--border-color: #fcd34d;
--card-border: #fef3c7;
--card-bg: #ffffff;
--body-bg: #fffbeb;
}
html, body {
overflow-x: hidden;
max-width: 100%;
transition: background-color 0.3s ease, color 0.3s ease;
}
body {
background-color: var(--theme-bg-light, #eef9f3) !important;
color: var(--theme-text-light, #2c7057);
}
.dark body {
background-color: var(--theme-bg-dark, #061a12) !important;
color: var(--theme-text-dark, #ecfdf5);
}
.premium-bounded-layout {
max-width: 1280px;
width: 100%;
margin: 0 auto;
background: transparent !important;
}
/* Top Discount & Announcement Banner */
#topDiscountBannerBox {
background: linear-gradient(to right, var(--theme-banner-from, #0a4d30), var(--theme-banner-via, #0d5c3a), var(--theme-banner-to, #ea580c)) !important;
transition: all 0.3s ease;
}
/* ==========================================================================
💎 4 DISTINCT BESPOKE HEADER STYLES (MATCHING 4 THEME PRESETS)
========================================================================== */
/* Base Header Common Elements */
.site-header-container {
border-radius: 12px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-nav-link {
position: relative;
padding: 6px 12px;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
transition: all 0.25s ease;
text-decoration: none;
}
.site-header-select, .site-header-btn, .site-mobile-btn {
border-radius: 8px;
font-weight: 800;
transition: all 0.25s ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.site-btn-login, .site-btn-signup {
border-radius: 8px;
font-weight: 800;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.site-btn-login:hover, .site-btn-signup:hover {
transform: translateY(-1.5px);
}
/* ==========================================================================
🏛️ 4 STRUCTURAL HEADER LAYOUT STYLES & 4 FOOTER LAYOUT STYLES
========================================================================== */
/* ─── HEADER LAYOUT 1: Classic Modern Floating Island (Default) ──────── */
:root[data-header-style="1"] .site-header-container,
.header-style-1 .site-header-container {
/* Standard floating rounded navbar */
}
:root[data-header-style="1"] .site-header-split-left,
:root[data-header-style="1"] .site-header-split-right,
.header-style-1 .site-header-split-left,
.header-style-1 .site-header-split-right {
display: none !important;
}
/* ─── HEADER LAYOUT 2: Double-Decker 2-Bar Pro Deck (Top Bar + Second Bar) ── */
:root[data-header-style="2"] #topDiscountBannerBox,
.header-style-2 #topDiscountBannerBox {
padding: 8px 24px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
background: linear-gradient(90deg, var(--theme-banner-from, #0a4d30) 0%, var(--theme-banner-via, #0d5c3a) 60%, var(--theme-banner-to, #ea580c) 100%) !important;
}
:root[data-header-style="2"] .style2-utility-controls,
.header-style-2 .style2-utility-controls {
display: inline-flex !important;
}
:root[data-header-style="2"] #mainSiteHeader,
.header-style-2 #mainSiteHeader {
margin-top: 4px;
padding-top: 2px;
padding-bottom: 2px;
}
:root[data-header-style="2"] .site-header-nav,
.header-style-2 .site-header-nav {
background: rgba(0, 0, 0, 0.05);
padding: 4px 12px;
border-radius: 9999px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.dark:root[data-header-style="2"] .site-header-nav,
.dark.header-style-2 .site-header-nav {
background: rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.08);
}
:root[data-header-style="2"] .site-header-split-left,
:root[data-header-style="2"] .site-header-split-right,
.header-style-2 .site-header-split-left,
.header-style-2 .site-header-split-right {
display: none !important;
}
/* ─── HEADER LAYOUT 3: Centered Hero Split Navigation ───────────────── */
:root[data-header-style="3"] .site-header-nav,
.header-style-3 .site-header-nav {
display: none !important;
}
:root[data-header-style="3"] .site-header-split-left,
:root[data-header-style="3"] .site-header-split-right,
.header-style-3 .site-header-split-left,
.header-style-3 .site-header-split-right {
display: flex !important;
}
:root[data-header-style="3"] .header-inner,
.header-style-3 .header-inner {
display: flex;
justify-content: space-between;
align-items: center;
}
:root[data-header-style="3"] .brand-logo-anchor,
.header-style-3 .brand-logo-anchor {
margin: 0 16px;
}
/* ─── HEADER LAYOUT 4: Compact Edge-to-Edge Streamlined Cyber Bar ────── */
:root[data-header-style="4"] .site-header-container,
.header-style-4 .site-header-container {
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
border-radius: 0 !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
border-bottom: 2px solid var(--theme-primary, #10b981) !important;
box-shadow: 0 4px 20px var(--theme-glow, rgba(16, 185, 129, 0.25)) !important;
}
:root[data-header-style="4"] .site-header-split-left,
:root[data-header-style="4"] .site-header-split-right,
.header-style-4 .site-header-split-left,
.header-style-4 .site-header-split-right {
display: none !important;
}
/* ─── 4 HERO LAYOUT DISPLAY CONTROLLERS ───────────────────────────── */
.hero-layout-view {
display: none;
}
:root[data-hero-style="1"] .hero-layout-1,
.hero-style-1 .hero-layout-1 {
display: block !important;
}
:root[data-hero-style="2"] .hero-layout-2,
.hero-style-2 .hero-layout-2 {
display: block !important;
}
:root[data-hero-style="3"] .hero-layout-3,
.hero-style-3 .hero-layout-3 {
display: block !important;
}
:root[data-hero-style="4"] .hero-layout-4,
.hero-style-4 .hero-layout-4 {
display: block !important;
}
/* Default fallback */
:root:not([data-hero-style]) .hero-layout-1 {
display: block !important;
}
/* ─── 4 FOOTER LAYOUT DISPLAY CONTROLLERS ───────────────────────────── */
.footer-layout-view {
display: none;
}
:root[data-footer-style="1"] .footer-layout-1,
.footer-style-1 .footer-layout-1 {
display: block !important;
}
:root[data-footer-style="2"] .footer-layout-2,
.footer-style-2 .footer-layout-2 {
display: block !important;
}
:root[data-footer-style="3"] .footer-layout-3,
.footer-style-3 .footer-layout-3 {
display: block !important;
}
:root[data-footer-style="4"] .footer-layout-4,
.footer-style-4 .footer-layout-4 {
display: block !important;
}
/* Default fallback */
:root:not([data-footer-style]) .footer-layout-1 {
display: block !important;
}
/* Hero Animations & Presets */
@keyframes floatLevitate {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-12px) rotate(1.5deg); }
}
@keyframes floatLevitateSlow {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-8px); }
}
@keyframes orbitPulse {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.animate-float-levitate {
animation: floatLevitate 5s ease-in-out infinite;
}
.animate-float-slow {
animation: floatLevitateSlow 4s ease-in-out infinite;
}
.animate-orbit-spin {
animation: orbitPulse 25s linear infinite;
}
.hero-glass-pill {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.18);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-glass-pill:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.35);
transform: translateY(-3px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}
:root,
:root[data-theme-preset="emerald"] .site-header-container,
.theme-preset-emerald .site-header-container {
border-radius: 14px;
background: rgba(200, 232, 216, 0.92);
border: 1.5px solid rgba(170, 209, 191, 0.9);
box-shadow: 0 8px 24px -4px rgba(16, 185, 129, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.dark:root[data-theme-preset="emerald"] .site-header-container,
.dark .theme-preset-emerald .site-header-container,
.dark .site-header-container {
border-radius: 14px;
background: rgba(7, 44, 30, 0.92);
border: 1.5px solid rgba(19, 67, 48, 0.85);
box-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.6), 0 0 15px rgba(16, 185, 129, 0.2), inset 0 1px 1px rgba(20, 255, 170, 0.25);
}
:root[data-theme-preset="emerald"] .site-nav-link,
.theme-preset-emerald .site-nav-link {
color: #2c7057;
}
.dark:root[data-theme-preset="emerald"] .site-nav-link,
.dark .theme-preset-emerald .site-nav-link {
color: #91bcaa;
}
:root[data-theme-preset="emerald"] .site-nav-link:hover,
.theme-preset-emerald .site-nav-link:hover {
color: #10b981;
background: rgba(16, 185, 129, 0.12);
}
.dark:root[data-theme-preset="emerald"] .site-nav-link:hover,
.dark .theme-preset-emerald .site-nav-link:hover {
color: #14ffaa;
background: rgba(20, 255, 170, 0.12);
}
:root[data-theme-preset="emerald"] .site-nav-link.active-nav-link,
.theme-preset-emerald .site-nav-link.active-nav-link {
color: #047857 !important;
background: rgba(16, 185, 129, 0.18);
}
.dark:root[data-theme-preset="emerald"] .site-nav-link.active-nav-link,
.dark .theme-preset-emerald .site-nav-link.active-nav-link {
color: #14ffaa !important;
background: rgba(20, 255, 170, 0.18);
box-shadow: 0 0 10px rgba(20, 255, 170, 0.25);
}
:root[data-theme-preset="emerald"] .site-header-select,
:root[data-theme-preset="emerald"] .site-header-btn,
:root[data-theme-preset="emerald"] .site-mobile-btn,
.theme-preset-emerald .site-header-select,
.theme-preset-emerald .site-header-btn,
.theme-preset-emerald .site-mobile-btn {
background: #b8dccb;
border: 1px solid #aad1bf;
color: #2c7057;
}
.dark:root[data-theme-preset="emerald"] .site-header-select,
.dark:root[data-theme-preset="emerald"] .site-header-btn,
.dark:root[data-theme-preset="emerald"] .site-mobile-btn,
.dark .theme-preset-emerald .site-header-select,
.dark .theme-preset-emerald .site-header-btn,
.dark .theme-preset-emerald .site-mobile-btn {
background: #0c3826;
border: 1px solid #184d37;
color: #6ee7b7;
}
:root[data-theme-preset="emerald"] .site-btn-login,
.theme-preset-emerald .site-btn-login {
background: linear-gradient(135deg, #10b981, #059669);
color: #ffffff;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
:root[data-theme-preset="emerald"] .site-btn-signup,
.theme-preset-emerald .site-btn-signup {
background: linear-gradient(135deg, #ef8512, #d97306);
color: #ffffff;
box-shadow: 0 4px 14px rgba(239, 133, 18, 0.4);
}
/* --------------------------------------------------------------------------
STYLE 2: ⚡ CYBER INDIGO & ELECTRIC BLUE (Futuristic Cyber-Tech Horizon Bar)
-------------------------------------------------------------------------- */
:root[data-theme-preset="indigo"] .site-header-container,
.theme-preset-indigo .site-header-container {
border-radius: 8px;
background: rgba(199, 210, 254, 0.92);
border: 1.5px solid rgba(165, 180, 252, 0.9);
box-shadow: 0 8px 26px -4px rgba(99, 102, 241, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.dark:root[data-theme-preset="indigo"] .site-header-container,
.dark .theme-preset-indigo .site-header-container {
border-radius: 8px;
background: rgba(12, 21, 46, 0.94);
border: 1.5px solid rgba(99, 102, 241, 0.45);
box-shadow: 0 12px 35px -6px rgba(0, 0, 0, 0.75), 0 0 18px rgba(99, 102, 241, 0.3), inset 0 1px 1px rgba(6, 182, 212, 0.4);
}
:root[data-theme-preset="indigo"] .site-nav-link,
.theme-preset-indigo .site-nav-link {
color: #1e1b4b;
}
.dark:root[data-theme-preset="indigo"] .site-nav-link,
.dark .theme-preset-indigo .site-nav-link {
color: #a5b4fc;
}
:root[data-theme-preset="indigo"] .site-nav-link:hover,
.theme-preset-indigo .site-nav-link:hover {
color: #4f46e5;
background: rgba(99, 102, 241, 0.12);
}
.dark:root[data-theme-preset="indigo"] .site-nav-link:hover,
.dark .theme-preset-indigo .site-nav-link:hover {
color: #38bdf8;
background: rgba(6, 182, 212, 0.12);
}
:root[data-theme-preset="indigo"] .site-nav-link.active-nav-link,
.theme-preset-indigo .site-nav-link.active-nav-link {
color: #4338ca !important;
background: rgba(99, 102, 241, 0.18);
}
.dark:root[data-theme-preset="indigo"] .site-nav-link.active-nav-link,
.dark .theme-preset-indigo .site-nav-link.active-nav-link {
color: #06b6d4 !important;
background: rgba(6, 182, 212, 0.18);
box-shadow: 0 0 12px rgba(6, 182, 212, 0.35);
}
:root[data-theme-preset="indigo"] .site-header-select,
:root[data-theme-preset="indigo"] .site-header-btn,
:root[data-theme-preset="indigo"] .site-mobile-btn,
.theme-preset-indigo .site-header-select,
.theme-preset-indigo .site-header-btn,
.theme-preset-indigo .site-mobile-btn {
background: #b4c2f8;
border: 1px solid #a5b4fc;
color: #1e1b4b;
border-radius: 6px;
}
.dark:root[data-theme-preset="indigo"] .site-header-select,
.dark:root[data-theme-preset="indigo"] .site-header-btn,
.dark:root[data-theme-preset="indigo"] .site-mobile-btn,
.dark .theme-preset-indigo .site-header-select,
.dark .theme-preset-indigo .site-header-btn,
.dark .theme-preset-indigo .site-mobile-btn {
background: #131f42;
border: 1px solid #1e2952;
color: #93c5fd;
border-radius: 6px;
}
:root[data-theme-preset="indigo"] .site-btn-login,
.theme-preset-indigo .site-btn-login {
border-radius: 6px;
background: linear-gradient(135deg, #6366f1, #4f46e5);
color: #ffffff;
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}
:root[data-theme-preset="indigo"] .site-btn-signup,
.theme-preset-indigo .site-btn-signup {
border-radius: 6px;
background: linear-gradient(135deg, #06b6d4, #0284c7);
color: #ffffff;
box-shadow: 0 4px 15px rgba(6, 182, 212, 0.45);
}
/* --------------------------------------------------------------------------
STYLE 3: 👑 ROYAL VIOLET & COSMIC FUCHSIA (Royal Cosmic Aurora Floating Capsule)
-------------------------------------------------------------------------- */
:root[data-theme-preset="violet"] .site-header-container,
.theme-preset-violet .site-header-container {
border-radius: 20px;
background: rgba(221, 214, 254, 0.92);
border: 1.5px solid rgba(196, 181, 253, 0.95);
box-shadow: 0 10px 28px -4px rgba(139, 92, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.dark:root[data-theme-preset="violet"] .site-header-container,
.dark .theme-preset-violet .site-header-container {
border-radius: 20px;
background: rgba(25, 13, 46, 0.94);
border: 1.5px solid rgba(139, 92, 246, 0.5);
box-shadow: 0 14px 40px -6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(139, 92, 246, 0.35), 0 0 10px rgba(236, 72, 153, 0.2), inset 0 1px 1px rgba(236, 72, 153, 0.4);
}
:root[data-theme-preset="violet"] .site-nav-link,
.theme-preset-violet .site-nav-link {
color: #2e1065;
border-radius: 12px;
}
.dark:root[data-theme-preset="violet"] .site-nav-link,
.dark .theme-preset-violet .site-nav-link {
color: #c4b5fd;
border-radius: 12px;
}
:root[data-theme-preset="violet"] .site-nav-link:hover,
.theme-preset-violet .site-nav-link:hover {
color: #7c3aed;
background: rgba(139, 92, 246, 0.14);
}
.dark:root[data-theme-preset="violet"] .site-nav-link:hover,
.dark .theme-preset-violet .site-nav-link:hover {
color: #f472b6;
background: rgba(236, 72, 153, 0.14);
}
:root[data-theme-preset="violet"] .site-nav-link.active-nav-link,
.theme-preset-violet .site-nav-link.active-nav-link {
color: #6d28d9 !important;
background: rgba(139, 92, 246, 0.2);
}
.dark:root[data-theme-preset="violet"] .site-nav-link.active-nav-link,
.dark .theme-preset-violet .site-nav-link.active-nav-link {
color: #f472b6 !important;
background: rgba(236, 72, 153, 0.2);
box-shadow: 0 0 14px rgba(236, 72, 153, 0.4);
}
:root[data-theme-preset="violet"] .site-header-select,
:root[data-theme-preset="violet"] .site-header-btn,
:root[data-theme-preset="violet"] .site-mobile-btn,
.theme-preset-violet .site-header-select,
.theme-preset-violet .site-header-btn,
.theme-preset-violet .site-mobile-btn {
background: #cfc3fc;
border: 1px solid #c4b5fd;
color: #2e1065;
border-radius: 12px;
}
.dark:root[data-theme-preset="violet"] .site-header-select,
.dark:root[data-theme-preset="violet"] .site-header-btn,
.dark:root[data-theme-preset="violet"] .site-mobile-btn,
.dark .theme-preset-violet .site-header-select,
.dark .theme-preset-violet .site-header-btn,
.dark .theme-preset-violet .site-mobile-btn {
background: #22123d;
border: 1px solid #331b57;
color: #e9d5ff;
border-radius: 12px;
}
:root[data-theme-preset="violet"] .site-btn-login,
.theme-preset-violet .site-btn-login {
border-radius: 12px;
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
color: #ffffff;
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}
:root[data-theme-preset="violet"] .site-btn-signup,
.theme-preset-violet .site-btn-signup {
border-radius: 12px;
background: linear-gradient(135deg, #ec4899, #db2777);
color: #ffffff;
box-shadow: 0 4px 16px rgba(236, 72, 153, 0.45);
}
/* --------------------------------------------------------------------------
STYLE 4: 🔥 SUNSET AMBER & CRIMSON FLAME (Sunset Sovereign Gold & Flame Crest)
-------------------------------------------------------------------------- */
:root[data-theme-preset="amber"] .site-header-container,
.theme-preset-amber .site-header-container {
border-radius: 10px;
background: rgba(253, 230, 138, 0.94);
border: 1.5px solid rgba(252, 211, 77, 0.95);
box-shadow: 0 8px 24px -4px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.dark:root[data-theme-preset="amber"] .site-header-container,
.dark .theme-preset-amber .site-header-container {
border-radius: 10px;
background: rgba(38, 22, 5, 0.95);
border: 1.5px solid rgba(245, 158, 11, 0.55);
box-shadow: 0 14px 40px -6px rgba(0, 0, 0, 0.8), 0 0 20px rgba(245, 158, 11, 0.35), 0 0 10px rgba(239, 68, 68, 0.25), inset 0 1px 1px rgba(253, 224, 71, 0.4);
}
:root[data-theme-preset="amber"] .site-nav-link,
.theme-preset-amber .site-nav-link {
color: #78350f;
border-radius: 6px;
}
.dark:root[data-theme-preset="amber"] .site-nav-link,
.dark .theme-preset-amber .site-nav-link {
color: #fde68a;
border-radius: 6px;
}
:root[data-theme-preset="amber"] .site-nav-link:hover,
.theme-preset-amber .site-nav-link:hover {
color: #d97706;
background: rgba(245, 158, 11, 0.15);
}
.dark:root[data-theme-preset="amber"] .site-nav-link:hover,
.dark .theme-preset-amber .site-nav-link:hover {
color: #f87171;
background: rgba(239, 68, 68, 0.15);
}
:root[data-theme-preset="amber"] .site-nav-link.active-nav-link,
.theme-preset-amber .site-nav-link.active-nav-link {
color: #b45309 !important;
background: rgba(245, 158, 11, 0.22);
}
.dark:root[data-theme-preset="amber"] .site-nav-link.active-nav-link,
.dark .theme-preset-amber .site-nav-link.active-nav-link {
color: #f87171 !important;
background: rgba(239, 68, 68, 0.22);
box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}
:root[data-theme-preset="amber"] .site-header-select,
:root[data-theme-preset="amber"] .site-header-btn,
:root[data-theme-preset="amber"] .site-mobile-btn,
.theme-preset-amber .site-header-select,
.theme-preset-amber .site-header-btn,
.theme-preset-amber .site-mobile-btn {
background: #fcd96a;
border: 1px solid #fcd34d;
color: #78350f;
border-radius: 6px;
}
.dark:root[data-theme-preset="amber"] .site-header-select,
.dark:root[data-theme-preset="amber"] .site-header-btn,
.dark:root[data-theme-preset="amber"] .site-mobile-btn,
.dark .theme-preset-amber .site-header-select,
.dark .theme-preset-amber .site-header-btn,
.dark .theme-preset-amber .site-mobile-btn {
background: #331e07;
border: 1px solid #472808;
color: #fde68a;
border-radius: 6px;
}
:root[data-theme-preset="amber"] .site-btn-login,
.theme-preset-amber .site-btn-login {
border-radius: 6px;
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #ffffff;
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}
:root[data-theme-preset="amber"] .site-btn-signup,
.theme-preset-amber .site-btn-signup {
border-radius: 6px;
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #ffffff;
box-shadow: 0 4px 16px rgba(239, 68, 68, 0.45);
}
.animated-gradient-text {
background: var(--theme-gradient-primary, linear-gradient(-45deg, #10b981, #059669, #f97316, #10b981));
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientText 6s ease infinite;
}
@keyframes gradientText {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.glow-badge {
box-shadow: 0 0 15px var(--theme-glow, rgba(16, 185, 129, 0.35));
animation: pulseGlow 2s infinite alternate;
}
@keyframes pulseGlow {
0% { box-shadow: 0 0 8px var(--theme-glow, rgba(16, 185, 129, 0.3)); }
100% { box-shadow: 0 0 18px var(--theme-glow, rgba(249, 115, 22, 0.6)); }
}
.hero-title-box {
position: relative;
background: var(--theme-hero-box-light, linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(235, 247, 242, 0.9)));
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 2px solid transparent;
background-clip: padding-box;
box-shadow: 0 20px 50px -10px var(--theme-glow, rgba(10, 77, 48, 0.15)), 0 0 40px var(--theme-glow, rgba(16, 185, 129, 0.1));
border-radius: 2.5rem;
transition: all 0.3s ease;
}
.hero-title-box::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 2.6rem;
padding: 2px;
background: var(--theme-gradient-hero-border, linear-gradient(135deg, #10b981, #059669, #f97316));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.dark .hero-title-box {
background: var(--theme-hero-box-dark, linear-gradient(135deg, rgba(13, 40, 30, 0.9), rgba(6, 26, 18, 0.95)));
box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.7), 0 0 50px var(--theme-glow, rgba(16, 185, 129, 0.25));
}
/* Dynamic Footer Theme Adaptations */
.new-footer-container {
background-color: var(--theme-footer-bg, #061f14) !important;
border-color: var(--theme-footer-border, #133829) !important;
transition: all 0.3s ease;
}
.top-accent-bar {
background-color: var(--theme-footer-accent, #10b981) !important;
transition: all 0.3s ease;
}
.logo-circle-wrapper {
border-color: var(--theme-footer-bg, #061f14) !important;
box-shadow: 0 0 0 4px var(--theme-footer-accent, #10b981) !important;
transition: all 0.3s ease;
}
/* Sidebar active link styling */
.sidebar-item-active {
background-color: var(--theme-sidebar-active-bg-light, #dcfce7) !important;
color: var(--theme-sidebar-active-text-light, #15803d) !important;
font-weight: 800 !important;
}
.dark .sidebar-item-active {
background-color: var(--theme-sidebar-active-bg-dark, #064e3b) !important;
color: var(--theme-sidebar-active-text-dark, #34d399) !important;
}
/* Floating / Quick Preset Switcher Dropdown */
.color-preset-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: 14px;
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
padding: 12px;
width: 280px;
transform-origin: top right;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.dark .color-preset-dropdown {
background: rgba(15, 23, 42, 0.98);
border-color: rgba(51, 65, 85, 0.8);
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7);
}
.preset-choice-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
border: 1.5px solid transparent;
margin-bottom: 4px;
}
.preset-choice-card:hover {
background: rgba(241, 245, 249, 0.8);
transform: translateX(3px);
}
.dark .preset-choice-card:hover {
background: rgba(30, 41, 59, 0.8);
}
.preset-choice-card.active {
border-color: var(--theme-primary, #10b981);
background: var(--theme-badge-bg, rgba(16, 185, 129, 0.1));
}
/* --- NATIVE 1280PX WIDE LAYOUT CONVERTED TO INDIGO --- */
.footer-scale-wrapper {
position: relative;
width: 100% !important;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 10px 0 0 0 !important;
margin: 0 !important;
}
.new-footer-container {
position: relative;
width: 1280px !important;
max-width: 1280px !important;
height: 350px; /* Natively 350px height */
background-color: var(--theme-footer-bg, #061f14) !important;
border-radius: 8px;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
border: 1px solid var(--theme-footer-border, #133829) !important;
flex-shrink: 0;
padding-bottom: 45px; /* Space for the bottom copyright bar */
}
/* --- LEFT ACCENT BAR & LOGO WRAPPER --- */
.new-footer-left {
position: relative;
width: 320px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.top-accent-bar {
position: absolute;
top: 0;
left: 70px;
width: 180px;
height: 152px; /* Ends exactly at the horizontal centerline of the circle */
background-color: var(--theme-footer-accent, #10b981) !important;
z-index: 1;
}
.logo-circle-wrapper {
position: relative;
z-index: 2;
width: 172px; /* aligns mathematically to stripe width */
height: 172px;
border-radius: 50%;
background-color: #ffffff !important;
border: 6px solid var(--theme-footer-bg, #061f14) !important;
box-shadow: 0 0 0 4px var(--theme-footer-accent, #10b981) !important;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
margin-top: 10px;
}
.logo-circle-img {
width: 75%;
height: 75%;
object-fit: contain !important;
}
.logo-shine-wrapper {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 16px;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
transform-origin: center;
}
/* Premium 3D Motion Graphics Stacking Animation */
.logo-motion-animation {
animation: motion-logo-graphics-mobile 40s cubic-bezier(0.25, 1, 0.5, 1) infinite;
transform-style: preserve-3d;
perspective: 800px;
}
.logo-motion-animation:hover {
animation: motion-logo-graphics-hover 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
/* Responsive Mobile Animation (Smaller Translation and Stack) */
@keyframes motion-logo-graphics-mobile {
0%, 85%, 100% {
transform: scale(1) translateY(0) rotateX(0deg) rotateY(0deg);
filter: drop-shadow(0 0 0 transparent);
}
89% {
transform: scale(1.12) translateY(-10px) rotateX(0deg) rotateY(0deg);
filter: drop-shadow(0px 2px 0px #6366f1)
drop-shadow(0px 4px 0px #a855f7);
}
/* X-Axis Rotation (rotateX somersault) at peak */
94% {
transform: scale(1.12) translateY(-10px) rotateX(360deg) rotateY(0deg);
filter: drop-shadow(0px 2px 0px #6366f1)
drop-shadow(0px 4px 0px #6366f1)
drop-shadow(0px 6px 0px #a855f7)
drop-shadow(0px 8px 0px #ec4899);
}
98% {
transform: scale(1.04) translateY(-3px) rotateX(360deg) rotateY(0deg);
filter: drop-shadow(0px 1px 0px rgba(99, 102, 241, 0.3));
}
}
/* Responsive Desktop Animation (Larger Translation and Deep Stack) */
@keyframes motion-logo-graphics-desktop {
0%, 85%, 100% {
transform: scale(1) translateY(0) rotateX(0deg) rotateY(0deg);
filter: drop-shadow(0 0 0 transparent);
}
89% {
transform: scale(1.2) translateY(-22px) rotateX(0deg) rotateY(0deg);
filter: drop-shadow(0px 2px 0px #6366f1)
drop-shadow(0px 4px 0px #6366f1)
drop-shadow(0px 6px 0px #a855f7)
drop-shadow(0px 8px 0px #a855f7);
}
/* X-Axis Rotation (rotateX somersault) at peak */
94% {
transform: scale(1.2) translateY(-22px) rotateX(360deg) rotateY(0deg);
filter: drop-shadow(0px 2px 0px #6366f1)
drop-shadow(0px 4px 0px #6366f1)
drop-shadow(0px 6px 0px #a855f7)
drop-shadow(0px 8px 0px #a855f7)
drop-shadow(0px 10px 0px #ec4899)
drop-shadow(0px 12px 0px #ec4899);
}
98% {
transform: scale(1.05) translateY(-5px) rotateX(360deg) rotateY(0deg);
filter: drop-shadow(0px 1px 0px rgba(99, 102, 241, 0.4));
}
}
@keyframes motion-logo-graphics-hover {
0% {
transform: scale(1) translateY(0) rotateX(0deg) rotateY(0deg);
filter: drop-shadow(0 0 0 transparent);
}
30% {
transform: scale(1.2) translateY(-20px) rotateX(0deg) rotateY(0deg);
filter: drop-shadow(0px 2px 0px #6366f1)
drop-shadow(0px 4px 0px #6366f1)
drop-shadow(0px 6px 0px #a855f7)
drop-shadow(0px 8px 0px #a855f7);
}
65% {
transform: scale(1.2) translateY(-20px) rotateX(360deg) rotateY(0deg);
filter: drop-shadow(0px 2px 0px #6366f1)
drop-shadow(0px 4px 0px #6366f1)
drop-shadow(0px 6px 0px #a855f7)
drop-shadow(0px 8px 0px #a855f7)
drop-shadow(0px 10px 0px #ec4899)
drop-shadow(0px 12px 0px #ec4899);
}
85% {
transform: scale(1.05) translateY(-5px) rotateX(360deg) rotateY(0deg);
filter: drop-shadow(0px 1px 0px rgba(99, 102, 241, 0.4));
}
100% {
transform: scale(1) translateY(0) rotateX(360deg) rotateY(0deg);
filter: drop-shadow(0 0 0 transparent);
}
}
/* Apply Desktop Animation on Screen Widths 768px and above */
@media (min-width: 768px) {
.logo-motion-animation {
animation: motion-logo-graphics-desktop 40s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
}
.logo-shine-wrapper::after {
content: '';
position: absolute;
top: -20%;
left: -20%;
width: 25px; /* Thinner reflection line */
height: 140%;
background: radial-gradient(
ellipse at center,
rgba(255, 255, 255, 0.95) 0%,
rgba(255, 255, 255, 0.25) 45%,
rgba(255, 255, 255, 0) 75%
);
transform: rotate(25deg);
animation: shine-sweep 24s infinite ease-in-out;
pointer-events: none;
filter: blur(1.5px); /* Soft shadow-like feathered edges to remove square look */
}
@keyframes shine-sweep {
0% {
left: -20%;
}
50% {
left: 100%;
}
100% {
left: -20%;
}
}
.animate-float-premium {
animation: float-premium 6s ease-in-out infinite;
}
@keyframes float-premium {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-12px) rotate(0.8deg);
}
100% {
transform: translateY(0px) rotate(0deg);
}
}
.name-pill-badge {
position: relative;
z-index: 2;
margin-top: -15px;
background-color: #6366f1 !important; /* Indigo pill */
color: #ffffff !important;
padding: 8px 24px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(99,102,241,0.3);
text-align: center;
min-width: 200px;
}
.pill-title {
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
line-height: 1.1;
}
.pill-subtitle {
font-size: 10px;
font-weight: 700;
opacity: 0.9;
letter-spacing: 0.5px;
margin-top: 2px;
}
/* --- MIDDLE BLOCK --- */
.new-footer-middle {
flex: 1;
padding-left: 100px; /* Centered beautifully in the 1280px wide container */
padding-right: 20px;
z-index: 2;
text-align: left;
display: flex;
flex-direction: column;
justify-content: center;
}
.company-highlight-text {
font-size: 13px;
font-weight: 700;
color: #e0e7ff !important;
letter-spacing: 0.3px;
line-height: 1.4;
margin-bottom: 10px;
max-width: 540px;
}
.company-main-title {
font-size: 36px; /* Native prominent size */
font-weight: 800;
color: #6366f1 !important; /* Indigo text */
letter-spacing: 0.5px;
text-transform: uppercase;
line-height: 1.1;
}
.company-slogan {
font-size: 14px;
font-weight: 700;
color: #e0e7ff !important;
letter-spacing: 0.3px;
margin-top: 4px;
margin-bottom: 16px;
line-height: 1.4;
max-width: 520px;
}
.about-me-title {
font-size: 18px; /* Native standard size */
font-weight: 800;
color: #6366f1 !important; /* Indigo text */
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 6px;
}
.about-me-desc {
font-size: 15px; /* Native standard size */
font-weight: 500;
color: #94a3b8 !important; /* Slate grey text */
line-height: 1.6;
max-width: 520px;
}
/* --- VERTICAL DIVIDER --- */
.new-footer-divider {
width: 2px;
height: 220px;
background-color: #6366f1 !important; /* Indigo divider */
opacity: 0.7;
margin: 0 40px;
z-index: 2;
}
/* --- RIGHT BLOCK --- */
.new-footer-right {
width: 320px;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 2;
padding-right: 40px;
}
.new-contact-list {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 20px;
}
.new-contact-item {
display: flex;
align-items: center;
gap: 14px;
}
.new-icon-box {
width: 36px;
height: 36px;
background-color: var(--theme-primary, #10b981) !important;
color: #ffffff !important;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
box-shadow: 0 2px 6px var(--theme-glow, rgba(16, 185, 129, 0.3));
}
.new-contact-text {
display: flex;
flex-direction: column;
font-size: 14px; /* Native standard size */
color: #ffffff !important;
font-weight: 600;
line-height: 1.4;
text-align: left;
}
.new-social-row {
display: flex;
gap: 12px;
padding-left: 2px;
}
.new-social-circle {
width: 36px;
height: 36px;
background-color: var(--theme-primary, #10b981) !important;
color: #ffffff !important;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 15px;
transition: all 0.2s ease;
box-shadow: 0 2px 5px var(--theme-glow, rgba(16, 185, 129, 0.3));
}
.new-social-circle:hover {
transform: translateY(-2px);
background-color: var(--theme-primary-hover, #059669) !important;
}
/* --- BOTTOM ACCENT LINE WITH COPYRIGHT TEXT --- */
.bottom-accent-line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 45px;
background-color: var(--theme-banner-from, #0a4d30) !important;
border-top: 1px solid var(--theme-footer-border, #133829);
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 35px;
font-size: 13px;
color: #ffffff !important;
font-weight: 600;
letter-spacing: 0.5px;
}
.footer-legal-links {
display: flex;
align-items: center;
gap: 12px;
}
.footer-legal-links a {
color: #ffffff !important;
text-decoration: underline;
font-weight: 700;
font-size: 13px;
transition: opacity 0.2s ease;
}
.footer-legal-links a:hover {
opacity: 0.85;
}
.legal-dot {
color: #c7d2fe !important;
font-size: 12px;
}
.footer-payment-row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
margin-top: 15px;
flex-wrap: nowrap;
overflow: hidden;
}
.footer-payment-row img {
height: 30px;
width: auto;
max-width: 60px;
object-fit: contain;
border-radius: 4px;
opacity: 0.85;
transition: opacity 0.2s;
}
.footer-payment-row img:hover {
opacity: 1;
}
.payment-row-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #94a3b8 !important;
margin-top: 15px;
margin-bottom: 5px;
}
.fallback-pay-card {
display: inline-flex;
align-items: center;
gap: 6px;
background-color: #1e293b !important;
border: 1px solid #334155 !important;
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 700;
color: #f8fafc !important;
transition: all 0.2s;
height: 30px;
}
.fallback-pay-card:hover {
border-color: #6366f1 !important;
background-color: #0f172a !important;
}
.fallback-pay-card i {
font-size: 14px;
}
@media (max-width: 1024px) {
.footer-scale-wrapper {
width: 100% !important;
height: auto !important;
padding: 10px 0 0 0 !important;
margin: 0 !important;
display: block !important;
}
.new-footer-container {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 25px 15px 35px 15px !important;
transform: none !important;
position: relative !important;
left: auto !important;
top: auto !important;
gap: 20px !important;
overflow: visible !important;
}
.new-footer-left {
width: 100% !important;
height: auto !important;
margin-bottom: 10px !important;
}
.top-accent-bar {
display: none !important;
}
.logo-circle-wrapper {
margin: 0 auto !important;
width: 140px !important;
height: 140px !important;
}
.name-pill-badge {
margin: -10px auto 0 auto !important;
min-width: 180px !important;
}
.new-footer-middle {
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center !important;
align-items: center !important;
}
.about-me-desc {
max-width: 100% !important;
text-align: center !important;
}
.footer-payment-row {
justify-content: center !important;
flex-wrap: wrap !important;
height: auto !important;
margin-top: 20px !important;
}
.new-footer-divider {
display: none !important;
}
.new-footer-right {
width: 100% !important;
padding-right: 0 !important;
align-items: center !important;
text-align: center !important;
}
.new-contact-list {
display: none !important;
}
.new-social-row {
justify-content: center !important;
margin-top: 10px !important;
margin-bottom: 15px !important;
}
.bottom-accent-line {
position: relative !important;
bottom: auto !important;
left: auto !important;
width: 100% !important;
height: auto !important;
min-height: 50px !important;
flex-direction: column !important;
justify-content: center !important;
gap: 6px !important;
padding: 12px 15px !important;
text-align: center !important;
margin-top: 20px !important;
border-radius: 0 0 8px 8px !important;
}
.footer-legal-links {
justify-content: center !important;
flex-wrap: wrap !important;
gap: 15px !important;
}
.footer-legal-links a {
white-space: nowrap !important;
font-size: 12px !important;
}
}
/* Ultra-Fast Modern Brand Preloader matching Sariful Online Theme */
#sv-3d-preloader {
position: fixed;
inset: 0;
z-index: 999999;
background: radial-gradient(circle at center, #063827 0%, #02170f 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
transition: opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.24s;
}
#sv-3d-preloader.fade-out {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.brand-loader-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px;
max-width: 320px;
width: 90%;
position: relative;
z-index: 10;
}
/* Glowing Brand Logo Ring with Official 'S' Monogram */
.brand-loader-logo-ring {
position: relative;
width: 80px;
height: 80px;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
animation: brandLogoPulse 0.4s ease-out forwards;
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 22px rgba(16, 185, 129, 0.6));
}
.brand-loader-logo-img {
width: 100%;
height: 100%;
object-fit: contain;
}
@keyframes brandLogoPulse {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.brand-loader-title {
color: #ffffff;
font-size: 19px;
font-weight: 900;
letter-spacing: -0.02em;
margin-bottom: 4px;
font-family: inherit;
}
.brand-loader-sub {
color: #4ade80;
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 18px;
}
/* Ultra-Thin High-Speed Progress Bar */
.brand-loader-bar-track {
width: 190px;
height: 4px;
background: rgba(255, 255, 255, 0.12);
border-radius: 999px;
overflow: hidden;
position: relative;
margin-bottom: 12px;
}
.brand-loader-bar-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0%;
background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #f97316 100%);
border-radius: 999px;
box-shadow: 0 0 10px rgba(52, 211, 153, 0.8);
animation: fastLoaderFill 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fastLoaderFill {
0% { width: 0%; }
60% { width: 75%; }
100% { width: 100%; }
}
.brand-loader-status {
display: inline-flex;
align-items: center;
gap: 6px;
color: #94a3b8;
font-size: 10.5px;
font-weight: 600;
}
.brand-loader-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 8px #10b981;
animation: pulseDot 0.6s infinite alternate;
}
@keyframes pulseDot {
0% { opacity: 0.4; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1.2); }
}
@keyframes fadeInUp {
from { transform: translateY(30px); opacity: 0; filter: blur(4px); }
to { transform: translateY(0); opacity: 1; filter: blur(0px); }
}
.animate-fade-in-up {
animation: fadeInUp 1.3s cubic-bezier(0.19, 1, 0.22, 1) forwards;
opacity: 0;
}
/* Premium Hamburger Menu Animation */
#mobileMenuBtn.menu-open span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
#mobileMenuBtn.menu-open span:nth-child(2) {
opacity: 0;
transform: scale(0.2);
}
#mobileMenuBtn.menu-open span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
/* Modern Footer Payment Gateways Row */
.footer-payment-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.footer-payment-row img {
height: 24px;
max-width: 55px;
object-fit: contain;
background: #ffffff;
padding: 2px 5px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.fallback-pay-card {
display: inline-flex;
align-items: center;
gap: 5px;
background: #093525;
border: 1px solid #144834;
padding: 3.5px 7.5px;
border-radius: 7px;
font-size: 10.5px;
font-weight: 700;
color: #ffffff;
transition: all 0.2s ease;
}
.fallback-pay-card:hover {
border-color: #10b981;
transform: translateY(-1px);
}
/* SMSBower Style Crisp Card & Theme Border Styling */
.gold-card {
background-color: var(--theme-card-bg-light, #ffffff) !important;
border: 1.5px solid var(--theme-card-border-light, #dbebe3) !important;
border-radius: 24px !important;
box-shadow: 0 10px 25px -5px var(--theme-glow, rgba(14, 69, 49, 0.06)) !important;
position: relative;
transition: all 0.25s ease-in-out !important;
}
.dark .gold-card {
background-color: var(--theme-card-bg-dark, #0c231a) !important;
border: 1.5px solid var(--theme-card-border-dark, #164634) !important;
box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.6) !important;
}
.gold-card:hover {
border-color: var(--theme-primary, #10b981) !important;
box-shadow: 0 16px 35px -5px var(--theme-glow, rgba(16, 185, 129, 0.18)) !important;
transform: translateY(-3px);
}
.dark .gold-card:hover {
border-color: var(--theme-primary, #10b981) !important;
box-shadow: 0 0 20px var(--theme-glow, rgba(16, 185, 129, 0.35)), 0 20px 40px -5px rgba(0, 0, 0, 0.7) !important;
transform: translateY(-3px);
}
.gold-card-header {
background: var(--theme-card-bg-light, #ffffff) !important;
border-bottom: 1.5px solid var(--theme-card-border-light, #f0f7f4) !important;
border-radius: 22px 22px 0 0 !important;
}
.dark .gold-card-header {
background: var(--theme-card-bg-dark, #092118) !important;
border-bottom: 1.5px solid var(--theme-card-border-dark, #164634) !important;
}
.gold-card-badge-status-in {
background: linear-gradient(180deg, var(--theme-primary, #10b981) 0%, var(--theme-primary-hover, #059669) 100%) !important;
border: 1px solid var(--theme-accent, #34d399) !important;
color: #ffffff !important;
border-radius: 6px !important;
box-shadow: 0 2px 4px var(--theme-glow, rgba(16, 185, 129, 0.3)) !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) !important;
}
.gold-card-badge-status-out {
background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%) !important;
border: 1px solid #f87171 !important;
color: #ffffff !important;
border-radius: 6px !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}
.gold-card-badge-category {
background-color: var(--theme-badge-bg, #eef9f3) !important;
border: 1px solid var(--theme-card-border-light, #c9dfd5) !important;
color: var(--theme-text-light, #2c7057) !important;
border-radius: 6px !important;
font-weight: 700 !important;
}
.gold-card-icon-box {
background-color: var(--theme-card-bg-light, #ffffff) !important;
border: 2px solid var(--theme-primary, #10b981) !important;
color: var(--theme-text-light, #2c7057) !important;
border-radius: 14px !important;
box-shadow: 0 4px 12px var(--theme-glow, rgba(14, 69, 49, 0.1)) !important;
}
.dark .gold-card-icon-box {
background-color: var(--theme-card-bg-dark, #081d15) !important;
border: 2px solid var(--theme-primary, #10b981) !important;
color: var(--theme-accent, #34d399) !important;
}
.gold-card-title {
color: var(--theme-text-light, #2c7057) !important;
font-weight: 800 !important;
}
.dark .gold-card-title {
color: var(--theme-text-dark, #ecfdf5) !important;
}
.gold-card-tag {
background-color: var(--theme-badge-bg, #eef9f3) !important;
border: 1px solid var(--theme-card-border-light, #dbebe3) !important;
color: var(--theme-text-light, #2c7057) !important;
border-radius: 6px !important;
font-weight: 700 !important;
}
.dark .gold-card-tag {
background-color: var(--theme-card-bg-dark, #081d15) !important;
border: 1px solid var(--theme-card-border-dark, #144332) !important;
color: var(--theme-accent, #6ee7b7) !important;
}
.gold-card-footer {
background: var(--theme-card-bg-light, #ffffff) !important;
border-top: 1.5px solid var(--theme-card-border-light, #f0f7f4) !important;
border-radius: 0 0 22px 22px !important;
}
.dark .gold-card-footer {
background: var(--theme-card-bg-dark, #092118) !important;
border-top: 1.5px solid var(--theme-card-border-dark, #164634) !important;
}
.gold-card-price {
color: var(--theme-primary-dark, #0a4d30) !important;
font-weight: 900 !important;
}
.dark .gold-card-price {
color: var(--theme-accent, #34d399) !important;
}
.gold-card-footer .line-through {
color: #94a3b8 !important;
font-weight: 700 !important;
}
.gold-card-button {
position: relative;
overflow: hidden;
background: var(--theme-btn-signup, #ef8512) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
font-weight: 800 !important;
text-transform: uppercase !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px var(--theme-glow, rgba(239, 133, 18, 0.35)) !important;
transition: all 0.2s ease-in-out !important;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.gold-card-button:hover {
background: var(--theme-btn-signup-hover, #d97306) !important;
box-shadow: 0 6px 16px var(--theme-glow, rgba(239, 133, 18, 0.45)) !important;
transform: translateY(-1px);
}
.gold-card-button:active {
transform: translateY(1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}
/* Marketplace Section background */
.marketplace-gold-section {
position: relative;
background: var(--theme-bg-light, #eef9f3) !important;
transition: background 0.3s ease;
}
.dark .marketplace-gold-section {
background: var(--theme-bg-dark, #081a14) !important;
}
.marketplace-gold-fade-top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to bottom, var(--theme-bg-light, #eef9f3) 0%, transparent 100%) !important;
pointer-events: none;
z-index: 2;
}
.dark .marketplace-gold-fade-top {
background: linear-gradient(to bottom, var(--theme-bg-dark, #061a12) 0%, transparent 100%) !important;
}
.marketplace-gold-fade-bottom {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to top, var(--theme-bg-light, #eef9f3) 0%, transparent 100%) !important;
pointer-events: none;
z-index: 2;
}
.dark .marketplace-gold-fade-bottom {
background: linear-gradient(to top, var(--theme-bg-dark, #061a12) 0%, transparent 100%) !important;
}
/* Responsive Body Backgrounds */
body {
background-color: var(--theme-bg-light, #eef9f3) !important;
background-image: none !important;
padding: 0 !important;
margin: 0 !important;
color: var(--theme-text-light, #2c7057);
}
.dark body {
background-color: var(--theme-bg-dark, #061a12) !important;
background-image: none !important;
color: var(--theme-text-dark, #ecfdf5);
}
@media (min-width: 768px) {
body.show-pattern {
background-image: radial-gradient(var(--theme-glow, rgba(44, 112, 87, 0.08)) 1.2px, transparent 1.2px) !important;
background-size: 32px 32px !important;
}
.dark body.show-pattern {
background-image: radial-gradient(var(--theme-glow, rgba(16, 185, 129, 0.15)) 1px, transparent 1px) !important;
background-size: 32px 32px !important;
}
}
/* ==========================================================================
🚀 MASTER TOP-TO-BOTTOM THEME ADAPTATION (100% Comprehensive Theme Engine)
========================================================================== */
/* 0. TOP ANNOUNCEMENT BANNER */
#topDiscountBannerBox {
background: linear-gradient(90deg, var(--theme-banner-from, #0a4d30), var(--theme-banner-via, #0d5c3a), var(--theme-banner-to, #ea580c)) !important;
}
#topDiscountBannerBox a:hover {
color: var(--theme-accent, #14ffaa) !important;
}
/* 0.1 HEADER & MAIN NAVIGATION */
#mainSiteHeader {
background-color: var(--theme-header-bg-light, #c8e8d8) !important;
border-color: var(--theme-header-border-light, #aad1bf) !important;
}
.dark #mainSiteHeader {
background-color: var(--theme-header-bg-dark, #072c1e) !important;
border-color: var(--theme-header-border-dark, #134330) !important;
}
#mainSiteHeader nav a {
color: var(--theme-text-light, #2c7057) !important;
}
.dark #mainSiteHeader nav a {
color: var(--theme-muted-light, #91bcaa) !important;
}
#mainSiteHeader nav a#nav-home,
#mainSiteHeader nav a.active {
color: var(--theme-primary, #10b981) !important;
}
.dark #mainSiteHeader nav a#nav-home,
.dark #mainSiteHeader nav a.active {
color: var(--theme-accent, #14ffaa) !important;
}
#mainSiteHeader nav a:hover {
color: var(--theme-primary, #10b981) !important;
}
.dark #mainSiteHeader nav a:hover {
color: var(--theme-accent, #14ffaa) !important;
}
#currencySelect, #themeToggleBtn, #themePresetBtn, #mobileMenuBtn {
background-color: var(--theme-control-bg-light, #b8dccb) !important;
border-color: var(--theme-header-border-light, #aad1bf) !important;
color: var(--theme-text-light, #2c7057) !important;
}
.dark #currencySelect, .dark #themeToggleBtn, .dark #themePresetBtn, .dark #mobileMenuBtn {
background-color: var(--theme-control-bg-dark, #0c3826) !important;
border-color: var(--theme-header-border-dark, #184d37) !important;
color: var(--theme-accent, #34d399) !important;
}
#authHeaderContainer a[href*="login"]:not([href*="register"]) {
background-color: var(--theme-btn-login, #198b55) !important;
color: #ffffff !important;
}
#authHeaderContainer a[href*="register"] {
background-color: var(--theme-btn-signup, #ef8512) !important;
color: #ffffff !important;
}
/* 0.2 MOBILE NAVIGATION DRAWER & PALETTE */
#mobileMenu {
background-color: var(--theme-card-bg-light, #ffffff) !important;
border-color: var(--theme-card-border-light, #dbebe3) !important;
}
.dark #mobileMenu {
background-color: var(--theme-bg-dark, #070c1b) !important;
border-color: var(--theme-card-border-dark, #1e2952) !important;
}
#mobileMenu > div:first-child,
#mobileMenu > div:last-child {
border-color: var(--theme-card-border-light, #dbebe3) !important;
}
.dark #mobileMenu > div:first-child,
.dark #mobileMenu > div:last-child {
border-color: var(--theme-card-border-dark, #1e2952) !important;
}
#mobileMenu a[href="/"],
#mobileMenu a.active-drawer-link {
background-color: var(--theme-badge-bg, rgba(16, 185, 129, 0.15)) !important;
color: var(--theme-primary, #10b981) !important;
}
.dark #mobileMenu a[href="/"],
.dark #mobileMenu a.active-drawer-link {
background-color: var(--theme-control-bg-dark, #0c3826) !important;
color: var(--theme-accent, #14ffaa) !important;
}
#mobileMenu a:hover {
background-color: var(--theme-badge-bg, rgba(16, 185, 129, 0.1)) !important;
color: var(--theme-primary, #10b981) !important;
}
#mobileAuthContainer a:first-child {
background-color: var(--theme-btn-login, #198b55) !important;
color: #ffffff !important;
}
#mobileAuthContainer a:last-child {
background-color: var(--theme-btn-signup, #ef8512) !important;
color: #ffffff !important;
}
/* 1. HERO SECTION */
.hero-main-card,
section > div.hero-main-card,
section > div[class*="from-[#16a34a]"] {
background: var(--theme-hero-gradient, linear-gradient(135deg, #16a34a 0%, #198b55 50%, #0f6c44 100%)) !important;
transition: background 0.3s ease;
}
.hero-title-accent,
#hero-title-2 {
color: var(--theme-accent, #14ffaa) !important;
}
.hero-shop-btn,
a.hero-shop-btn {
background-color: var(--theme-btn-signup, #ef8512) !important;
box-shadow: 0 10px 25px -5px var(--theme-glow, rgba(239, 133, 18, 0.35)) !important;
transition: all 0.2s ease;
}
.hero-shop-btn:hover,
a.hero-shop-btn:hover {
background-color: var(--theme-primary-hover, #d97306) !important;
}
#hero-badge span.animate-ping {
background-color: var(--theme-accent, #14ffaa) !important;
}
.hero-main-card .text-emerald-200 {
color: var(--theme-accent, #14ffaa) !important;
}
/* 2. FEATURES & HOW IT WORKS */
#howItWorksTrack > div > div {
background-color: var(--theme-card-bg-light, #ffffff) !important;
border-color: var(--theme-card-border-light, #dbebe3) !important;
transition: all 0.25s ease;
}
.dark #howItWorksTrack > div > div {
background-color: var(--theme-card-bg-dark, #0c231a) !important;
border-color: var(--theme-card-border-dark, #164634) !important;
}
#howItWorksTrack > div > div:hover {
border-color: var(--theme-primary, #10b981) !important;
box-shadow: 0 10px 25px -5px var(--theme-glow, rgba(16, 185, 129, 0.2)) !important;
}
#howItWorksTrack span.w-7,
#howItWorksTrack span.w-8 {
background-color: var(--theme-badge-bg, #eef9f3) !important;
border-color: var(--theme-card-border-light, #aad1bf) !important;
color: var(--theme-primary, #10b981) !important;
}
.dark #howItWorksTrack span.w-7,
.dark #howItWorksTrack span.w-8 {
background-color: var(--theme-card-bg-dark, #133829) !important;
border-color: var(--theme-card-border-dark, #194b38) !important;
color: var(--theme-accent, #34d399) !important;
}
#howItWorksTrack h3 {
color: var(--theme-text-light, #2c7057) !important;
}
.dark #howItWorksTrack h3 {
color: var(--theme-text-dark, #ffffff) !important;
}
/* 3. CATEGORY TABS & FILTER MARQUEE */
.tab-btn.active-tab,
button.active-tab,
#staticAllCatWrapper button.active-tab {
background-color: var(--theme-primary, #10b981) !important;
border-color: var(--theme-primary-hover, #059669) !important;
color: #ffffff !important;
box-shadow: 0 4px 14px var(--theme-glow, rgba(16, 185, 129, 0.35)) !important;
}
.tab-btn.inactive-tab,
button.inactive-tab,
#staticAllCatWrapper button.inactive-tab {
background-color: var(--theme-card-bg-light, #ffffff) !important;
border-color: var(--theme-card-border-light, #dbebe3) !important;
color: var(--theme-text-light, #2c7057) !important;
}
.dark .tab-btn.inactive-tab,
.dark button.inactive-tab,
.dark #staticAllCatWrapper button.inactive-tab {
background-color: var(--theme-card-bg-dark, #0c231a) !important;
border-color: var(--theme-card-border-dark, #164634) !important;
color: var(--theme-text-dark, #ecfdf5) !important;
}
.tab-btn.inactive-tab:hover {
background-color: var(--theme-badge-bg, #eef9f3) !important;
border-color: var(--theme-primary, #10b981) !important;
}
.dark .tab-btn.inactive-tab:hover {
background-color: var(--theme-control-bg-dark, #133829) !important;
border-color: var(--theme-primary, #10b981) !important;
}
.tab-badge-pill {
background-color: var(--theme-badge-bg, #eef9f3) !important;
color: var(--theme-primary, #10b981) !important;
}
.active-tab .tab-badge-pill {
background-color: rgba(255, 255, 255, 0.25) !important;
color: #ffffff !important;
}
.dark .inactive-tab .tab-badge-pill {
background-color: var(--theme-control-bg-dark, #133829) !important;
color: var(--theme-accent, #34d399) !important;
}
/* 4. PRODUCT CARDS & ACTIONS */
.product-card {
background-color: var(--theme-card-bg-light, #ffffff) !important;
border-color: var(--theme-card-border-light, #dbebe3) !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.dark .product-card {
background-color: var(--theme-card-bg-dark, #0c231a) !important;
border-color: var(--theme-card-border-dark, #164634) !important;
}
.product-card:hover {
border-color: var(--theme-primary, #10b981) !important;
box-shadow: 0 12px 30px -8px var(--theme-glow, rgba(16, 185, 129, 0.3)) !important;
transform: translateY(-3px);
}
.product-brand-title {
color: var(--theme-text-light, #2c7057) !important;
}
.dark .product-brand-title {
color: var(--theme-accent, #34d399) !important;
}
.product-card-title:hover {
color: var(--theme-primary, #10b981) !important;
}
.product-stock-badge {
background-color: var(--theme-badge-bg, #eef9f3) !important;
color: var(--theme-primary, #10b981) !important;
border-color: var(--theme-card-border-light, #dbebe3) !important;
}
.dark .product-stock-badge {
background-color: var(--theme-control-bg-dark, #0c3826) !important;
color: var(--theme-accent, #34d399) !important;
border-color: var(--theme-card-border-dark, #144332) !important;
}
.product-trust-badge {
background-color: var(--theme-badge-bg, #eef9f3) !important;
color: var(--theme-primary, #10b981) !important;
border-color: var(--theme-card-border-light, #dbebe3) !important;
}
.dark .product-trust-badge {
background-color: var(--theme-control-bg-dark, #133829) !important;
color: var(--theme-accent, #34d399) !important;
border-color: var(--theme-card-border-dark, #164634) !important;
}
.product-verified-icon {
color: var(--theme-primary, #10b981) !important;
}
.product-price-value {
color: var(--theme-primary-dark, #0a4d30) !important;
}
.dark .product-price-value {
color: var(--theme-accent, #34d399) !important;
}
.product-buy-btn {
background-color: var(--theme-btn-signup, #ef8512) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px var(--theme-glow, rgba(239, 133, 18, 0.35)) !important;
transition: all 0.2s ease;
}
.product-buy-btn:hover {
background-color: var(--theme-btn-signup-hover, #d97306) !important;
box-shadow: 0 6px 16px var(--theme-glow, rgba(239, 133, 18, 0.5)) !important;
}
#viewMoreContainer button {
background-color: var(--theme-card-bg-light, #ebf7f2) !important;
border-color: var(--theme-card-border-light, #c6ece0) !important;
color: var(--theme-text-light, #0a4d30) !important;
transition: all 0.2s ease;
}
.dark #viewMoreContainer button {
background-color: var(--theme-card-bg-dark, #0c281e) !important;
border-color: var(--theme-card-border-dark, #194b38) !important;
color: var(--theme-text-dark, #f1f5f9) !important;
}
#viewMoreContainer button:hover {
border-color: var(--theme-primary, #10b981) !important;
color: var(--theme-primary, #10b981) !important;
}
/* 5. REVIEWS & TESTIMONIALS */
#reviews {
background-color: var(--theme-bg-light, #eef9f3) !important;
border-color: var(--theme-card-border-light, #dbebe3) !important;
}
.dark #reviews {
background-color: var(--theme-bg-dark, #061a12) !important;
border-color: var(--theme-card-border-dark, #144332) !important;
}
#reviews span.rounded-full {
background-color: var(--theme-badge-bg, rgba(16, 185, 129, 0.15)) !important;
color: var(--theme-primary, #10b981) !important;
border-color: var(--theme-primary, #10b981) !important;
}
#reviews h2 {
color: var(--theme-text-light, #2c7057) !important;
}
.dark #reviews h2 {
color: var(--theme-text-dark, #ffffff) !important;
}
#dynamicTestimonialsContainer > div {
background-color: var(--theme-card-bg-light, #ffffff) !important;
border-color: var(--theme-card-border-light, #dbebe3) !important;
}
.dark #dynamicTestimonialsContainer > div {
background-color: var(--theme-card-bg-dark, #0c231a) !important;
border-color: var(--theme-card-border-dark, #164634) !important;
}
/* 6. SUPPORT SECTION */
#support {
background: var(--theme-support-gradient, linear-gradient(135deg, #073822 0%, #0a4d30 50%, #126b42 100%)) !important;
}
#support a.dynamic-whatsapp-link {
background-color: var(--theme-primary, #10b981) !important;
box-shadow: 0 6px 18px var(--theme-glow, rgba(16, 185, 129, 0.4)) !important;
}
#support a.dynamic-telegram-link {
background-color: var(--theme-btn-signup, #f97316) !important;
box-shadow: 0 6px 18px var(--theme-glow, rgba(249, 115, 22, 0.4)) !important;
}
/* 7. FOOTER SECTION - 100% THEMED */
footer,
footer.bg-gradient-to-b {
background: var(--theme-footer-gradient, linear-gradient(180deg, #053223 0%, #04261b 50%, #021710 100%)) !important;
border-color: var(--theme-footer-border, #144834) !important;
}
footer [class*="border-[#144834]"],
footer [class*="border-[#134934]"],
footer [class*="border-[#1e6147]"],
footer [class*="border-[#198b55]"] {
border-color: var(--theme-footer-border, #134934) !important;
}
footer [class*="border-emerald-400"] {
border-color: var(--theme-primary, #10b981) !important;
}
footer div[class*="bg-[#093525]"],
footer a[class*="bg-[#093525]"],
footer div[class*="bg-[#0c3f2d]"] {
background-color: var(--theme-footer-card-bg, #093525) !important;
border-color: var(--theme-footer-border, #134934) !important;
}
footer div[class*="bg-[#093525]"]:hover,
footer a[class*="bg-[#093525]"]:hover {
border-color: var(--theme-primary, #10b981) !important;
}
footer [class*="bg-[#198b55]"],
footer [class*="bg-[#10b981]"] {
background-color: var(--theme-primary, #10b981) !important;
}
footer [class*="text-[#4ade80]"],
footer .dynamic-footer-pill-subtitle,
footer .dynamic-footer-about-title,
footer h3 {
color: var(--theme-accent, #4ade80) !important;
}
footer [class*="text-[#10b981]"],
footer [class*="text-emerald-300"],
footer [class*="text-emerald-200"],
footer [class*="text-[#198b55]"] {
color: var(--theme-primary, #10b981) !important;
}
footer a.dynamic-privacy-link,
footer a.dynamic-terms-link {
background-color: var(--theme-footer-card-bg, #093525) !important;
border-color: var(--theme-footer-border, #134934) !important;
}
footer a.dynamic-privacy-link:hover,
footer a.dynamic-terms-link:hover {
background-color: var(--theme-footer-border, #144834) !important;
border-color: var(--theme-primary, #10b981) !important;
color: #ffffff !important;
}
/* 8. UNIVERSAL TAILWIND ARBITRARY CLASS THEME BRIDGING */
[class*="text-[#2c7057]"],
[class*="text-[#0a4d30]"] {
color: var(--theme-text-light, #2c7057) !important;
}
.dark [class*="text-[#2c7057]"],
.dark [class*="text-[#0a4d30]"] {
color: var(--theme-text-dark, #ecfdf5) !important;
}
[class*="bg-[#198b55]"],
[class*="bg-[#10b981]"] {
background-color: var(--theme-primary, #10b981) !important;
}
[class*="hover:bg-[#198b55]"]:hover,
[class*="hover:bg-[#10b981]"]:hover {
background-color: var(--theme-primary-hover, #059669) !important;
}
[class*="border-[#198b55]"],
[class*="border-[#10b981]"] {
border-color: var(--theme-primary, #10b981) !important;
}
[class*="hover:border-[#198b55]"]:hover,
[class*="hover:border-[#10b981]"]:hover {
border-color: var(--theme-primary, #10b981) !important;
}
[class*="border-[#dbebe3]"],
[class*="border-[#aad1bf]"],
[class*="border-[#c6ece0]"] {
border-color: var(--theme-card-border-light, #dbebe3) !important;
}
.dark [class*="border-[#164634]"],
.dark [class*="border-[#134330]"],
.dark [class*="border-[#144834]"],
.dark [class*="border-[#194b38]"],
.dark [class*="border-[#144332]"] {
border-color: var(--theme-card-border-dark, #164634) !important;
}
[class*="bg-[#eef9f3]"],
[class*="bg-[#ebf7f2]"] {
background-color: var(--theme-badge-bg, #eef9f3) !important;
}
.dark [class*="bg-[#0c231a]"],
.dark [class*="bg-[#0c281e]"],
.dark [class*="bg-[#071d15]"] {
background-color: var(--theme-card-bg-dark, #0c231a) !important;
}
[class*="stroke-emerald-500"] {
stroke: var(--theme-primary, #10b981) !important;
}
/* ============================================================
9. COMPLETE TOP-TO-BOTTOM DASHBOARD & USER PORTAL THEME ENGINE
============================================================ */
/* Dashboard Shell & Backgrounds */
.app-layout,
main.main-content {
background-color: var(--theme-bg-light, #eef9f3) !important;
}
.dark .app-layout,
.dark main.main-content {
background-color: var(--theme-bg-dark, #061a12) !important;
}
/* Sidebar Styling */
aside.sidebar {
background-color: var(--theme-card-bg-light, #ffffff) !important;
border-color: var(--theme-card-border-light, #dbebe3) !important;
}
.dark aside.sidebar {
background-color: var(--theme-card-bg-dark, #0c281e) !important;
border-color: var(--theme-card-border-dark, #144332) !important;
}
.sidebar-item-active {
background-color: var(--theme-sidebar-active-bg-light, #dcfce7) !important;
color: var(--theme-sidebar-active-text-light, #15803d) !important;
font-weight: 800 !important;
}
.dark .sidebar-item-active {
background-color: var(--theme-sidebar-active-bg-dark, #064e3b) !important;
color: var(--theme-sidebar-active-text-dark, #34d399) !important;
}
.admin-nav-item-active {
background-color: var(--theme-sidebar-active-bg-light, #fef3c7) !important;
color: var(--theme-sidebar-active-text-light, #92400e) !important;
font-weight: 800 !important;
}
.dark .admin-nav-item-active {
background-color: var(--theme-sidebar-active-bg-dark, #78350f) !important;
color: var(--theme-sidebar-active-text-dark, #fef08a) !important;
}
/* Top Bar Header */
#topBarUserBalanceBox {
background-color: var(--theme-badge-bg, rgba(16, 185, 129, 0.15)) !important;
border-color: var(--theme-card-border-light, #dbebe3) !important;
color: var(--theme-primary, #10b981) !important;
}
.dark #topBarUserBalanceBox {
background-color: var(--theme-control-bg-dark, #0c3826) !important;
border-color: var(--theme-card-border-dark, #144332) !important;
color: var(--theme-accent, #34d399) !important;
}
/* Horizontal Quick Nav in Dashboard */
.horizontal-nav-btn.bg-emerald-600 {
background-color: var(--theme-primary, #10b981) !important;
border-color: var(--theme-accent, #14ffaa) !important;
color: #ffffff !important;
box-shadow: 0 4px 14px var(--theme-glow, rgba(16, 185, 129, 0.4)) !important;
}
/* User Dashboard 4 Stat Cards */
#view-user-dashboard > div.grid > div {
background-color: var(--theme-card-bg-light, #ffffff) !important;
border-color: var(--theme-card-border-light, #dbebe3) !important;
}
.dark #view-user-dashboard > div.grid > div {
background-color: var(--theme-card-bg-dark, #0c281e) !important;
border-color: var(--theme-card-border-dark, #144332) !important;
}
/* Quick Navigation & Section Containers */
#view-user-dashboard > div.bg-white,
#view-user-dashboard > div[class*="dark:bg-[#0c281e]"] {
background-color: var(--theme-card-bg-light, #ffffff) !important;
border-color: var(--theme-card-border-light, #dbebe3) !important;
}
.dark #view-user-dashboard > div.bg-white,
.dark #view-user-dashboard > div[class*="dark:bg-[#0c281e]"] {
background-color: var(--theme-card-bg-dark, #0c281e) !important;
border-color: var(--theme-card-border-dark, #144332) !important;
}
/* Action Buttons across Dashboard */
button.bg-emerald-600,
button.bg-\[\#16a34a\],
.btn-addfund,
#btnSaveBulkProducts,
#btnSaveColorPreset {
background-color: var(--theme-primary, #10b981) !important;
color: #ffffff !important;
box-shadow: 0 4px 14px var(--theme-glow, rgba(16, 185, 129, 0.35)) !important;
}
button.bg-emerald-600:hover,
button.bg-\[\#16a34a\]:hover,
.btn-addfund:hover,
#btnSaveBulkProducts:hover,
#btnSaveColorPreset:hover {
background-color: var(--theme-primary-hover, #059669) !important;
}
/* User Profile & Info Cards */
#view-profile .bg-white,
#view-history .bg-white,
#view-support .bg-white,
#view-add-fund .bg-white {
background-color: var(--theme-card-bg-light, #ffffff) !important;
border-color: var(--theme-card-border-light, #dbebe3) !important;
}
.dark #view-profile .dark\:bg-slate-900,
.dark #view-history .dark\:bg-slate-900,
.dark #view-support .dark\:bg-slate-900,
.dark #view-add-fund .dark\:bg-slate-900 {
background-color: var(--theme-card-bg-dark, #0c281e) !important;
border-color: var(--theme-card-border-dark, #144332) !important;
}
/* Admin Preset Card Active Highlighting */
.admin-color-preset-card.ring-emerald-500 {
border-color: var(--theme-primary, #10b981) !important;
box-shadow: 0 0 0 2px var(--theme-primary, #10b981) !important;
}
.admin-color-preset-card input[type="radio"]:checked {
accent-color: var(--theme-primary, #10b981) !important;
}
.admin-preset-status-badge.bg-emerald-500 {
background-color: var(--theme-primary, #10b981) !important;
}
/* Admin & User Data Tables */
table thead tr {
background-color: var(--theme-badge-bg, rgba(16, 185, 129, 0.08)) !important;
border-color: var(--theme-card-border-light, #dbebe3) !important;
}
.dark table thead tr {
background-color: var(--theme-control-bg-dark, #0c3826) !important;
border-color: var(--theme-card-border-dark, #144332) !important;
}
table tbody tr:hover {
background-color: var(--theme-badge-bg, rgba(16, 185, 129, 0.05)) !important;
}
/* Admin Action Buttons & Form Controls */
.admin-action-btn-primary,
#adminSaveSiteSettingsBtn,
#adminCreateProductBtn,
#adminSavePaymentBtn {
background-color: var(--theme-primary, #10b981) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px var(--theme-glow, rgba(16, 185, 129, 0.35)) !important;
}
.admin-action-btn-primary:hover,
#adminSaveSiteSettingsBtn:hover,
#adminCreateProductBtn:hover,
#adminSavePaymentBtn:hover {
background-color: var(--theme-primary-hover, #059669) !important;
}
/* Modals in Dashboard */
.dashboard-modal-card {
background-color: var(--theme-card-bg-light, #ffffff) !important;
border-color: var(--theme-card-border-light, #dbebe3) !important;
}
.dark .dashboard-modal-card {
background-color: var(--theme-card-bg-dark, #0c281e) !important;
border-color: var(--theme-card-border-dark, #144332) !important;
}
/* Ultra-Fast Modern Brand Preloader matching Sariful Online Theme */
#sv-3d-preloader {
position: fixed;
inset: 0;
z-index: 999999;
background: radial-gradient(circle at center, #063827 0%, #02170f 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
transition: opacity 0.24s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.24s;
}
#sv-3d-preloader.preload-theme-neon {
background: radial-gradient(circle at center, #082f49 0%, #030f1d 100%) !important;
}
#sv-3d-preloader.preload-theme-purple {
background: radial-gradient(circle at center, #2e1065 0%, #0f0524 100%) !important;
}
#sv-3d-preloader.preload-theme-gold {
background: radial-gradient(circle at center, #451a03 0%, #170802 100%) !important;
}
#sv-3d-preloader.preload-theme-dark {
background: radial-gradient(circle at center, #1e293b 0%, #090d16 100%) !important;
}
#sv-3d-preloader.fade-out {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.brand-loader-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 24px;
max-width: 320px;
width: 90%;
position: relative;
z-index: 10;
}
/* Glowing Brand Logo Ring with Official 'S' Monogram or Custom Icon */
.brand-loader-logo-ring {
position: relative;
width: 80px;
height: 80px;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
animation: brandLogoPulse 0.4s ease-out forwards;
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 22px rgba(16, 185, 129, 0.6));
}
.brand-loader-logo-ring.ring-neon {
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 22px rgba(56, 189, 248, 0.6));
}
.brand-loader-logo-ring.ring-purple {
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 22px rgba(168, 85, 247, 0.6));
}
.brand-loader-logo-ring.ring-gold {
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 22px rgba(245, 158, 11, 0.6));
}
.brand-loader-logo-ring.ring-dark {
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 22px rgba(148, 163, 184, 0.5));
}
.brand-loader-custom-box {
width: 80px;
height: 80px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
border: 2px solid rgba(255,255,255,0.2);
backdrop-filter: blur(12px);
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 1px 1px rgba(255,255,255,0.3);
}
.brand-loader-logo-img {
max-width: 76px;
max-height: 76px;
object-fit: contain;
}
@keyframes brandLogoPulse {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.brand-loader-title {
color: #ffffff;
font-size: 19px;
font-weight: 900;
letter-spacing: -0.02em;
margin-bottom: 4px;
font-family: inherit;
}
.brand-loader-sub {
color: #4ade80;
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 18px;
}
.preload-theme-neon .brand-loader-sub { color: #38bdf8; }
.preload-theme-purple .brand-loader-sub { color: #c084fc; }
.preload-theme-gold .brand-loader-sub { color: #fbbf24; }
.preload-theme-dark .brand-loader-sub { color: #cbd5e1; }
/* Ultra-Thin High-Speed Progress Bar */
.brand-loader-bar-track {
width: 190px;
height: 4px;
background: rgba(255, 255, 255, 0.12);
border-radius: 999px;
overflow: hidden;
position: relative;
margin-bottom: 12px;
}
.brand-loader-bar-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0%;
background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #f97316 100%);
border-radius: 999px;
box-shadow: 0 0 10px rgba(52, 211, 153, 0.8);
animation: fastLoaderFill 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.preload-theme-neon .brand-loader-bar-fill {
background: linear-gradient(90deg, #00f2fe 0%, #38bdf8 50%, #818cf8 100%);
box-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
}
.preload-theme-purple .brand-loader-bar-fill {
background: linear-gradient(90deg, #ec4899 0%, #a855f7 50%, #6366f1 100%);
box-shadow: 0 0 10px rgba(168, 85, 247, 0.8);
}
.preload-theme-gold .brand-loader-bar-fill {
background: linear-gradient(90deg, #f59e0b 0%, #ea580c 50%, #e11d48 100%);
box-shadow: 0 0 10px rgba(245, 158, 11, 0.8);
}
.preload-theme-dark .brand-loader-bar-fill {
background: linear-gradient(90deg, #64748b 0%, #94a3b8 50%, #f1f5f9 100%);
box-shadow: 0 0 10px rgba(148, 163, 184, 0.8);
}
@keyframes fastLoaderFill {
0% { width: 0%; }
60% { width: 75%; }
100% { width: 100%; }
}
.brand-loader-status {
display: inline-flex;
align-items: center;
gap: 6px;
color: #94a3b8;
font-size: 10.5px;
font-weight: 600;
}
.brand-loader-status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 8px #10b981;
animation: pulseDot 0.6s infinite alternate;
}
@keyframes pulseDot {
0% { opacity: 0.4; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1.2); }
}
/* ==========================================================================
🌟 ULTRA-PREMIUM SOVEREIGN QUANTUM PRISM MONOGRAM & KINETIC BRAND ENGINE
========================================================================== */
.logo-emblem-glow {
position: relative;
filter: drop-shadow(0 4px 14px rgba(16, 185, 129, 0.3)) drop-shadow(0 2px 6px rgba(245, 158, 11, 0.2));
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand-logo-anchor:hover .logo-emblem-glow,
.site-brand-logo-wrap:hover .logo-emblem-glow {
filter: drop-shadow(0 8px 24px rgba(16, 185, 129, 0.55)) drop-shadow(0 0 14px rgba(251, 191, 36, 0.45));
transform: scale(1.08) translateY(-1px);
}
.prism-base-shield {
transition: all 0.3s ease;
}
.brand-logo-anchor:hover .prism-base-shield,
.site-brand-logo-wrap:hover .prism-base-shield {
stroke-width: 2.8;
}
/* Clockwise Quantum Orbit Ring */
.quantum-orbit-ring-cw {
transform-origin: 38px 38px;
animation: quantumOrbitSpinCW 12s linear infinite;
}
/* Counter-Clockwise Quantum Orbit Ring */
.quantum-orbit-ring-ccw {
transform-origin: 38px 38px;
animation: quantumOrbitSpinCCW 8s linear infinite;
}
@keyframes quantumOrbitSpinCW {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes quantumOrbitSpinCCW {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
/* Star Sparkles Pulse */
.prism-star-sparkle-1 {
transform-origin: 62px 16px;
animation: prismStarTwinkle1 3s ease-in-out infinite;
}
.prism-star-sparkle-2 {
transform-origin: 14px 56px;
animation: prismStarTwinkle2 3s ease-in-out infinite 1.5s;
}
@keyframes prismStarTwinkle1 {
0%, 100% { transform: scale(0.6); opacity: 0.5; }
50% { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 6px #fbbf24); }
}
@keyframes prismStarTwinkle2 {
0%, 100% { transform: scale(0.6); opacity: 0.5; }
50% { transform: scale(1.4); opacity: 1; filter: drop-shadow(0 0 6px #00f2fe); }
}
.dynamic-monogram-initial {
animation: monogramInitialBreathe 4s ease-in-out infinite;
transform-origin: 38px 38px;
}
@keyframes monogramInitialBreathe {
0%, 100% { filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.5)); }
50% { filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.8)) drop-shadow(0 0 14px rgba(6, 182, 212, 0.6)); }
}
/* Kinetic Shimmer Text Effect */
.brand-kinetic-text {
background: linear-gradient(135deg, #0284c7 0%, #0d9488 25%, #10b981 50%, #38bdf8 75%, #0284c7 100%);
background-size: 250% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: brandTextShimmer 8s ease-in-out infinite;
font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
letter-spacing: -0.02em;
}
.dark .brand-kinetic-text {
background: linear-gradient(135deg, #38bdf8 0%, #34d399 25%, #10b981 50%, #a7f3d0 75%, #38bdf8 100%);
background-size: 250% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
@keyframes brandTextShimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.brand-logo-anchor:hover .brand-kinetic-text,
.site-brand-logo-wrap:hover .brand-kinetic-text {
animation-duration: 3s;
}
/* Modern Monogram Badge */
.brand-monogram-shield {
background: radial-gradient(circle at 30% 30%, #0c4a34 0%, #062419 60%, #02140d 100%);
border: 2px solid rgba(52, 211, 153, 0.5);
box-shadow: 0 4px 15px -2px rgba(16, 185, 129, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.25);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand-logo-anchor:hover .brand-monogram-shield,
.site-brand-logo-wrap:hover .brand-monogram-shield {
border-color: #34d399;
box-shadow: 0 6px 22px rgba(16, 185, 129, 0.6), inset 0 1px 4px rgba(255, 255, 255, 0.4);
transform: scale(1.06) rotate(1deg);
}