/* Fonts loaded via in header.php / page — do not @import here */ :root { --header-height: 80px; --header-height-mobile: 64px; --bottom-nav-height: 62px; --primary: #6c5ce7; --primary-glow: rgba(108, 92, 231, 0.6); --primary-soft: rgba(108, 92, 231, 0.10); --text-dim: rgba(245, 246, 250, 0.6); --surface: #0f1018; --surface2: #13141e; --card-border: rgba(255, 255, 255, 0.08); --gold: #f0a500; --gold-glow: rgba(240, 165, 0, 0.4); --gem: #00cec9; --gem-glow: rgba(0, 206, 201, 0.4); --admin-color: #e84393; --red: #ff4757; } /* --- Critical Header Components (Top-loaded) --- */ /* Balance Pill */ .balance-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 240, 255, 0.1); border: 1px solid rgba(0, 240, 255, 0.2); padding: 6px 14px; border-radius: 50px; color: #00f0ff; font-weight: 700; font-size: 0.82rem; font-family: 'Orbitron', sans-serif; text-decoration: none !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; backdrop-filter: blur(10px); box-shadow: 0 4px 15px rgba(0, 240, 255, 0.1); white-space: nowrap; } .balance-pill:hover { background: rgba(0, 240, 255, 0.2); box-shadow: 0 0 20px rgba(0, 240, 255, 0.3); transform: translateY(-2px); color: white !important; } .balance-pill i { font-size: 0.9rem; } .desktop-only-flex { display: flex !important; } @media (max-width: 992px) { .desktop-only-flex { display: none !important; } .balance-pill { padding: 5px 12px; font-size: 0.72rem; gap: 6px; } } /* Floating WhatsApp Button */ .whatsapp-float { display: none; position: fixed; bottom: 80px; right: 18px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; font-size: 1.7rem; align-items: center; justify-content: center; z-index: 9999; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.4); text-decoration: none; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; animation: wa-pulse 2s infinite; } .whatsapp-float:hover { transform: scale(1.12); box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6); } .whatsapp-float:active { transform: scale(0.95); } @keyframes wa-pulse { 0% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0.4); } 70% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45), 0 0 0 14px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45), 0 0 0 0 rgba(37, 211, 102, 0); } } @media (max-width: 992px) { .whatsapp-float { display: flex !important; } } /* Bottom Nav Cleanup */ .bottom-nav-item::before, .bottom-nav-item::after { display: none !important; content: none !important; } @media (min-width: 993px) { .mobile-only-flex, .whatsapp-float { display: none !important; } } .header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); z-index: 1000; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: rgba(10, 11, 16, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-family: 'Plus Jakarta Sans', sans-serif; } .header.scrolled { background: rgba(10, 11, 16, 0.95); backdrop-filter: blur(25px); height: 70px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); } .nav-container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; gap: 1rem; position: relative; } .header-left-section { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; } .header-center-section { display: flex; align-items: center; gap: 1.5rem; flex-shrink: 0; } /* Logo: truly centered using absolute positioning */ .logo-container { position: absolute; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; z-index: 5; pointer-events: none; } .logo-container .logo { pointer-events: auto; } .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: white; font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: 1.5px; transition: transform 0.3s ease; } .logo img { height: 42px; filter: drop-shadow(0 0 12px var(--primary-glow)); transition: height 0.3s ease; } .nav-links { display: flex; list-style: none; gap: 2rem; align-items: center; margin: 0; padding: 0; flex-shrink: 0; } .nav-links a { text-decoration: none; color: var(--text-dim); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; position: relative; padding: 5px 0; white-space: nowrap; } .nav-links a:hover, .nav-links a.active { color: white; text-shadow: 0 0 15px var(--primary-glow); } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--primary); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%); box-shadow: 0 0 10px var(--primary-glow); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .header-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; margin-left: auto; } .btn-contact { background: linear-gradient(135deg, var(--primary), #a29bfe); color: white; padding: 10px 24px; border-radius: 14px; font-weight: 800; font-size: 0.9rem; text-decoration: none; box-shadow: 0 6px 20px rgba(108, 92, 231, 0.3); border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .btn-contact:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 25px rgba(108, 92, 231, 0.5); } /* ── DESKTOP RANK BUTTON (unchanged) ── */ .rank-btn { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: white; padding: 9px 18px; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: 0.85rem; transition: all 0.3s ease; backdrop-filter: blur(5px); white-space: nowrap; } .rank-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--primary); } .rank-btn i { font-size: 1rem; color: var(--primary); } .greeting-text { font-size: 0.75rem; color: white; font-weight: 600; display: block; white-space: nowrap; } .profile-dropdown { position: relative; } .profile-menu { list-style: none; margin: 0; position: absolute; top: calc(100% + 15px); left: 0; width: 240px; background: #0f1016; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 0.8rem; opacity: 0; visibility: hidden; transform: translateY(15px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); z-index: 1002; } .profile-dropdown:hover .profile-menu { opacity: 1; visibility: visible; transform: translateY(0); } .profile-menu a { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: rgba(245, 246, 250, 0.7); text-decoration: none; border-radius: 12px; transition: all 0.2s ease; font-weight: 600; font-size: 0.95rem; } .profile-menu a:hover { background: rgba(108, 92, 231, 0.1); color: white; } /* ── MOBILE STYLES ── */ @media (max-width: 992px) { .header { height: var(--header-height-mobile); } .header.scrolled { height: 58px; } .nav-container { padding: 0 14px; gap: 10px; } /* Hide desktop nav & actions */ .header-center-section, .header-actions { display: none; } /* Hide desktop rank/greeting — replaced by avatar pill */ .header-left-section .profile-dropdown, .greeting-text { display: none; } .header-left-section { order: 2; /* Push to the right */ flex-shrink: 0; gap: 0; } /* Logo — align left on mobile */ .logo-container { position: relative; left: auto; transform: none; order: 1; /* Push to the left */ flex-grow: 1; justify-content: flex-start; /* Align logo left */ pointer-events: auto; } .logo { font-size: 1.15rem; letter-spacing: 1px; gap: 8px; } .logo img { height: 32px; } } @media (min-width: 993px) { .avatar-pill-mobile { display: none !important; } .bottom-nav-bar { display: none !important; } } /* ── AVATAR PILL (mobile only) ── */ .avatar-pill-mobile { display: flex; align-items: center; gap: 8px; background: var(--surface2); border: 1px solid var(--card-border); border-radius: 50px; padding: 4px 11px 4px 4px; cursor: pointer; flex-shrink: 0; transition: all 0.22s ease; order: 1; text-decoration: none; } .avatar-pill-mobile:active { transform: scale(0.95); } .av-circle { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.8rem; color: white; flex-shrink: 0; position: relative; } .av-circle.rank-user { background: linear-gradient(135deg, #6c5ce7, #a29bfe); box-shadow: 0 0 10px var(--primary-glow); } .av-circle.rank-vip { background: linear-gradient(135deg, #00cec9, #00b5b5); box-shadow: 0 0 10px var(--gem-glow); } .av-circle.rank-admin { background: linear-gradient(135deg, #e84393, #fd79a8); box-shadow: 0 0 10px rgba(232, 67, 147, 0.5); } .av-circle.rank-owner { background: #f0a500; box-shadow: 0 0 12px var(--gold-glow); } .av-circle.rank-reseller { background: linear-gradient(135deg, #00b894, #00cec9); box-shadow: 0 0 10px rgba(0, 184, 148, 0.5); } .av-circle.rank-guest { background: rgba(255, 255, 255, 0.07); box-shadow: none; } .av-badge { position: absolute; bottom: -2px; right: -2px; width: 13px; height: 13px; border-radius: 50%; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 6.5px; } .av-badge.rank-user { color: var(--primary); } .av-badge.rank-vip { color: var(--gem); } .av-badge.rank-admin { color: var(--admin-color); } .av-badge.rank-owner { color: var(--gold); } .av-badge.rank-reseller { color: #00b894; } .pill-text { display: flex; flex-direction: column; line-height: 1.2; } .pill-name { font-size: 0.75rem; font-weight: 700; color: white; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pill-rank { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } .pill-rank.rank-user { color: var(--primary); } .pill-rank.rank-vip { color: var(--gem); } .pill-rank.rank-admin { color: var(--admin-color); } .pill-rank.rank-owner { color: var(--gold); } .pill-rank.rank-reseller { color: #00b894; } /* ── BOTTOM NAV BAR ── */ .bottom-nav-bar { position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottom-nav-height); background: rgba(10, 11, 16, 0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid var(--card-border); display: flex; align-items: center; padding: 0 6px; z-index: 999; } .bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 7px 4px; border-radius: 13px; cursor: pointer; transition: all 0.25s ease; border: 1px solid transparent; color: var(--text-dim); text-decoration: none; position: relative; } .bottom-nav-item.active { color: white; background: var(--primary-soft); border-color: rgba(108, 92, 231, 0.18); } .bottom-nav-item i { font-size: 1rem; transition: all 0.25s; } .bottom-nav-item.active i { color: var(--primary); filter: drop-shadow(0 0 5px var(--primary-glow)); } .bottom-nav-label { font-size: 0.57rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; } /* removed dot indicator */ .bottom-nav-item.nav-wa i { color: #25d366; } .bottom-nav-item.nav-wa.active { background: rgba(37, 211, 102, 0.08); border-color: rgba(37, 211, 102, 0.15); } /* removed nav-wa dot */ /* ── MOBILE DRAWER ── */ .mobile-drawer { position: fixed; top: 0; right: -100%; width: 82%; max-width: 310px; height: 100vh; background: var(--surface); z-index: 2000; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; box-shadow: -15px 0 40px rgba(0, 0, 0, 0.6); border-left: 1px solid var(--card-border); } .mobile-drawer.open { right: 0; } .drawer-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1999; display: none; opacity: 0; transition: opacity 0.4s ease; } .drawer-overlay.open { display: block !important; opacity: 1; } /* Drawer user card */ .drawer-user-card { padding: 50px 18px 18px; background: linear-gradient(160deg, rgba(108, 92, 231, 0.1) 0%, transparent 70%); border-bottom: 1px solid var(--card-border); } .drawer-avatar-row { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; } .drawer-avatar { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem; color: white; flex-shrink: 0; } .drawer-avatar.rank-user { background: linear-gradient(135deg, #6c5ce7, #a29bfe); box-shadow: 0 0 18px var(--primary-glow); } .drawer-avatar.rank-vip { background: linear-gradient(135deg, #00cec9, #00b5b5); box-shadow: 0 0 18px var(--gem-glow); } .drawer-avatar.rank-admin { background: linear-gradient(135deg, #e84393, #fd79a8); box-shadow: 0 0 18px rgba(232, 67, 147, 0.5); } .drawer-avatar.rank-owner { background: #f0a500; box-shadow: 0 0 18px var(--gold-glow); } .drawer-avatar.rank-reseller { background: linear-gradient(135deg, #00b894, #00cec9); box-shadow: 0 0 18px rgba(0, 184, 148, 0.5); } .drawer-username { font-size: 1.05rem; font-weight: 800; color: white; } .rank-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; margin-top: 5px; } .rank-chip.rank-user { background: rgba(108, 92, 231, 0.12); color: var(--primary); border: 1px solid rgba(108, 92, 231, 0.22); } .rank-chip.rank-vip { background: rgba(0, 206, 201, 0.1); color: var(--gem); border: 1px solid rgba(0, 206, 201, 0.2); } .rank-chip.rank-admin { background: rgba(232, 67, 147, 0.1); color: var(--admin-color); border: 1px solid rgba(232, 67, 147, 0.2); } .rank-chip.rank-owner { background: rgba(240, 165, 0, 0.1); color: var(--gold); border: 1px solid rgba(240, 165, 0, 0.2); } .rank-chip.rank-reseller { background: rgba(0, 184, 148, 0.1); color: #00b894; border: 1px solid rgba(0, 184, 148, 0.25); } .drawer-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .drawer-quick-btn { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 12px; border-radius: 11px; font-size: 0.7rem; font-weight: 700; text-decoration: none; cursor: pointer; border: none; font-family: 'Plus Jakarta Sans', sans-serif; transition: all 0.2s ease; } .drawer-quick-btn.primary { background: var(--primary); color: white; box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3); } .drawer-quick-btn.ghost { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--card-border); color: white; } /* Drawer nav */ .drawer-nav-body { padding: 14px 10px; flex: 1; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; } .drawer-nav-body::-webkit-scrollbar { width: 0; } .drawer-section-label { font-size: 0.58rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.5px; padding: 8px 8px 5px; } .drawer-link { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 12px; color: rgba(245, 246, 250, 0.7); text-decoration: none; font-weight: 600; font-size: 0.88rem; transition: all 0.2s ease; border: 1px solid transparent; cursor: pointer; } .drawer-link:hover, .drawer-link.active { background: var(--primary-soft); border-color: rgba(108, 92, 231, 0.16); color: white; } .drawer-link i { width: 20px; text-align: center; color: var(--primary); font-size: 0.9rem; } .drawer-link.logout { color: rgba(255, 71, 87, 0.8); } .drawer-link.logout i { color: var(--red); } .drawer-link.logout:hover { background: rgba(255, 71, 87, 0.06); border-color: rgba(255, 71, 87, 0.12); color: var(--red); } .drawer-divider { height: 1px; background: var(--card-border); margin: 5px 4px; } /* Drawer footer */ .drawer-footer-area { padding: 12px 10px 18px; border-top: 1px solid var(--card-border); } .drawer-contact-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; background: linear-gradient(135deg, var(--primary), #a29bfe); border-radius: 13px; color: white; font-weight: 800; font-size: 0.82rem; text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 5px 18px rgba(108, 92, 231, 0.3); transition: all 0.25s ease; cursor: pointer; } .drawer-contact-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(108, 92, 231, 0.4); } .drawer-close-btn { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--card-border); color: white; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .drawer-close-btn:hover { background: rgba(255, 71, 87, 0.1); color: var(--red); }