/* ===================================================== ZVpn Theme System v3 Class-based Dark/Light Mode (.dark on ) ===================================================== */ /* Import Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* ===================================================== CSS Custom Properties — LIGHT MODE (default in :root) ===================================================== */ :root { /* Background Colors — Light */ --bg-main: #F5F5F5; --bg-surface: #FFFFFF; --bg-card: #FFFFFF; --bg-elevated: #F0F0F0; /* Primary Red Accent (same both modes) */ --primary: #FF3B5C; --primary-dark: #B11226; --primary-light: #FF6B7F; /* Text Colors — Light */ --text-main: #111827; --text-sub: #374151; --text-muted: #6B7280; /* Border Colors — Light */ --border: #E5E7EB; --border-light: #D1D5DB; /* Gradients — Light (subtle / hidden) */ --red-glow: none; --red-glow-soft: none; --red-gradient: linear-gradient(135deg, #FF3B5C, #B11226); --red-gradient-soft: linear-gradient(135deg, rgba(255, 59, 92, 0.08), rgba(177, 18, 38, 0.04)); /* Shadows — Light */ --shadow-red: 0 0 20px rgba(255, 59, 92, 0.15); --shadow-red-soft: 0 0 10px rgba(255, 59, 92, 0.08); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); /* Glass — Light */ --glass-bg: rgba(255, 255, 255, 0.8); --glass-border: rgba(0, 0, 0, 0.06); /* Scrollbar */ --scrollbar-track: #F0F0F0; --scrollbar-thumb: #C4C4C4; --scrollbar-thumb-hover: #A0A0A0; /* Hover overlay */ --hover-overlay: rgba(0, 0, 0, 0.03); --table-hover: rgba(0, 0, 0, 0.02); /* Transition */ --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* ===================================================== DARK MODE — .dark class on ===================================================== */ .dark { /* Background Colors — Dark */ --bg-main: #0A0A0B; --bg-surface: #111113; --bg-card: #18181B; --bg-elevated: #1f1f23; /* Text Colors — Dark */ --text-main: #FFFFFF; --text-sub: #A1A1AA; --text-muted: #71717A; /* Border Colors — Dark */ --border: #27272A; --border-light: #3f3f46; /* Gradients — Dark (vivid glow) */ --red-glow: radial-gradient(circle at top, rgba(255, 59, 92, 0.25), transparent 60%); --red-glow-soft: radial-gradient(ellipse at top center, rgba(255, 59, 92, 0.15), transparent 50%); --red-gradient-soft: linear-gradient(135deg, rgba(255, 59, 92, 0.2), rgba(177, 18, 38, 0.1)); /* Shadows — Dark */ --shadow-red: 0 0 40px rgba(255, 59, 92, 0.35); --shadow-red-soft: 0 0 20px rgba(255, 59, 92, 0.2); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); /* Glass — Dark */ --glass-bg: rgba(24, 24, 27, 0.8); --glass-border: rgba(255, 255, 255, 0.05); /* Scrollbar — Dark */ --scrollbar-track: #0A0A0B; --scrollbar-thumb: #3f3f46; --scrollbar-thumb-hover: #52525b; /* Hover overlay — Dark */ --hover-overlay: rgba(255, 255, 255, 0.03); --table-hover: rgba(255, 255, 255, 0.02); } /* ===================================================== Smooth Transition on Theme Switch ===================================================== */ html, body, main, aside, header, nav, div, section, a, p, span, h1, h2, h3, h4, h5, h6, input, select, textarea, button { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* ===================================================== Base Styles ===================================================== */ * { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; box-sizing: border-box; } body { background-color: var(--bg-main); color: var(--text-main); line-height: 1.6; margin: 0; } /* ===================================================== Custom Scrollbar (uses variables) ===================================================== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ===================================================== Glassmorphism Cards (uses variables) ===================================================== */ .glass-card { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: 16px; } .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; transition: var(--transition); } .card:hover { border-color: var(--border-light); box-shadow: var(--shadow-card); } /* ===================================================== Red Glow Effects (uses variables — hidden in light) ===================================================== */ .glow-red { box-shadow: var(--shadow-red); } .glow-red-soft { box-shadow: var(--shadow-red-soft); } .bg-red-glow { background: var(--red-glow); } .bg-red-glow-soft { background: var(--red-glow-soft); } /* ===================================================== Primary CTA Buttons ===================================================== */ .btn-primary { background: var(--red-gradient); color: #FFFFFF; padding: 12px 28px; border-radius: 50px; font-weight: 600; border: none; cursor: pointer; transition: var(--transition); position: relative; overflow: hidden; } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-red); } /* Secondary Button */ .btn-secondary { background: transparent; color: var(--text-main); padding: 12px 28px; border-radius: 50px; font-weight: 500; border: 1px solid var(--border); cursor: pointer; transition: var(--transition); } .btn-secondary:hover { background: var(--hover-overlay); border-color: var(--border-light); } /* Red Outline Button */ .btn-outline-red { background: transparent; color: var(--primary); padding: 10px 24px; border-radius: 8px; font-weight: 500; border: 1px solid var(--primary); cursor: pointer; transition: var(--transition); } .btn-outline-red:hover { background: rgba(255, 59, 92, 0.1); } /* ===================================================== Card Hover Effects (uses variables) ===================================================== */ .card-hover { transition: var(--transition); } .card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: rgba(255, 59, 92, 0.3); } /* Featured Card (Red Glow) */ .card-featured { border: 1px solid rgba(255, 59, 92, 0.5); background: linear-gradient(180deg, rgba(255, 59, 92, 0.08) 0%, var(--bg-card) 100%); box-shadow: 0 0 30px rgba(255, 59, 92, 0.15); } .card-featured:hover { border-color: var(--primary); box-shadow: var(--shadow-red); } /* ===================================================== Stats Cards ===================================================== */ .stat-card { position: relative; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; transition: var(--transition); } .stat-card::before { content: ''; position: absolute; right: -30px; top: -30px; width: 100px; height: 100px; border-radius: 50%; background: var(--primary); opacity: 0.08; transition: var(--transition); } .stat-card:hover::before { transform: scale(1.3); opacity: 0.12; } /* ===================================================== Progress Bar ===================================================== */ .progress-bar { height: 8px; background: var(--bg-surface); border-radius: 4px; overflow: hidden; } .progress-bar-fill { height: 100%; background: var(--red-gradient); border-radius: 4px; position: relative; overflow: hidden; } .progress-bar-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ===================================================== Pulse Animations ===================================================== */ .pulse-red { animation: pulse-red 2s infinite; } @keyframes pulse-red { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 92, 0.4); } 50% { box-shadow: 0 0 0 10px rgba(255, 59, 92, 0); } } .pulse-green { animation: pulse-green 2s infinite; } @keyframes pulse-green { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); } 50% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } } /* ===================================================== Navigation & Sidebar ===================================================== */ .nav-item { position: relative; transition: var(--transition); padding: 10px 16px; border-radius: 8px; } .nav-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: var(--red-gradient); border-radius: 0 2px 2px 0; transition: height 0.2s ease; } .nav-item:hover, .nav-item.active { background: rgba(255, 59, 92, 0.1); color: var(--primary); } .nav-item:hover::before, .nav-item.active::before { height: 60%; } /* ===================================================== Table Styles (uses variables) ===================================================== */ .table-row { transition: var(--transition); position: relative; } .table-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(255, 59, 92, 0.1), transparent); transition: width 0.3s ease; } .table-row:hover::before { width: 100%; } .table-row:hover { background: var(--table-hover); } /* ===================================================== Input Fields ===================================================== */ .input-field { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; color: var(--text-main); transition: var(--transition); width: 100%; } .input-field:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 59, 92, 0.15); outline: none; } .input-field::placeholder { color: var(--text-muted); } /* ===================================================== Badge Styles ===================================================== */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 9999px; font-size: 12px; font-weight: 500; } .badge-primary { background: rgba(255, 59, 92, 0.15); color: var(--primary); border: 1px solid rgba(255, 59, 92, 0.3); } .badge-success { background: rgba(34, 197, 94, 0.15); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); } .badge-danger { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); } .badge-warning { background: rgba(234, 179, 8, 0.15); color: #facc15; border: 1px solid rgba(234, 179, 8, 0.3); } /* ===================================================== Loading Spinner ===================================================== */ .spinner { border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; width: 24px; height: 24px; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ===================================================== Toast Notifications ===================================================== */ .toast { animation: slideIn 0.3s ease; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ===================================================== Floating Animation ===================================================== */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .float-animation { animation: float 4s ease-in-out infinite; } /* ===================================================== Cyber Grid Background ===================================================== */ .cyber-grid { background-image: linear-gradient(rgba(255, 59, 92, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 59, 92, 0.03) 1px, transparent 1px); background-size: 50px 50px; } /* ===================================================== Globe/World Map Effect ===================================================== */ .globe-effect { position: relative; } .globe-effect::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 400px; background: radial-gradient(circle, rgba(255, 59, 92, 0.1) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } /* ===================================================== Marquee Animation ===================================================== */ .marquee { overflow: hidden; white-space: nowrap; } .marquee-content { display: inline-block; animation: marquee 20s linear infinite; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ===================================================== Responsive Styles ===================================================== */ @media (max-width: 768px) { .sidebar { position: fixed; left: -100%; top: 0; z-index: 50; transition: left 0.3s ease; width: 260px; } .sidebar.open { left: 0; } .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); z-index: 40; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .overlay.open { opacity: 1; visibility: visible; } } /* ===================================================== Utility Classes (all use CSS variables) ===================================================== */ .text-primary { color: var(--primary); } .text-sub { color: var(--text-sub); } .text-muted { color: var(--text-muted); } .bg-main { background-color: var(--bg-main); } .bg-surface { background-color: var(--bg-surface); } .bg-card { background-color: var(--bg-card); } .border-main { border-color: var(--border); } .border-red { border-color: var(--primary); } /* Red gradient text */ .text-gradient-red { background: var(--red-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Selection color */ ::selection { background: rgba(255, 59, 92, 0.3); color: var(--text-main); } /* ===================================================== Server Status Styles ===================================================== */ .status-online { color: #4ade80; } .status-offline { color: #f87171; } .status-maintenance { color: #facc15; } /* Latency color coding */ .latency-good { color: #4ade80; } .latency-medium { color: #facc15; } .latency-bad { color: #f87171; } /* ===================================================== Copy Button Animation ===================================================== */ .copy-btn { transition: var(--transition); } .copy-btn:active { transform: scale(0.95); } .copy-btn.copied { background: var(--primary) !important; } /* ===================================================== Light Mode Overrides These catch any remaining hardcoded dark classes from inline Tailwind that use text-white, bg-[#xxx] ===================================================== */ /* Fix text-white in light mode */ :root:not(.dark) .text-white { color: var(--text-main) !important; } :root:not(.dark) h1, :root:not(.dark) h2, :root:not(.dark) h3 { color: var(--text-main); } /* Fix inline bg-[var(--bg-main)] etc on body/main */ :root:not(.dark) body { background-color: var(--bg-main) !important; color: var(--text-main) !important; } :root:not(.dark) main { background-color: var(--bg-main) !important; } :root:not(.dark) aside { background-color: var(--bg-card) !important; border-color: var(--border) !important; } :root:not(.dark) header.header-component { background-color: var(--bg-surface) !important; border-color: var(--border) !important; } /* Fix inputs in light mode */ :root:not(.dark) input, :root:not(.dark) select, :root:not(.dark) textarea { background-color: #F3F4F6 !important; border-color: var(--border) !important; color: var(--text-main) !important; } /* Fix muted text colors */ :root:not(.dark) [class*="text-\\[\\#71717A\\]"], :root:not(.dark) .text-gray-400, :root:not(.dark) .text-gray-500 { color: var(--text-muted) !important; } /* Fix dropdowns */ :root:not(.dark) #langDropdown, :root:not(.dark) #notifDropdown { background-color: var(--bg-card) !important; border-color: var(--border) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); } /* Fix nav borders */ :root:not(.dark) nav { border-color: var(--border); }