/* ================================================================ COMMON — base variables, typography, header, footer, banner Shared by every page of the static export ================================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} img{max-width:100%;display:block} a{text-decoration:none;color:inherit} :root{ --bg:#0a0000; --bg2:#0f0000; --surface:#150000; --card:#1a0000; --card-hover:#200000; --border:#2a0808; --border2:#3d0f0f; --accent:#e81c1c; --accent2:#b30000; --blue:#3b82f6; --green:#22c55e; --red:#e81c1c; --mrp:#6b7280; --detailer:#3b82f6; --distributor:#e81c1c; --text:#f5f0f0; --text2:#c0a8a8; --text3:#7a5050; --font-d:'Rajdhani',sans-serif; --font-b:'DM Sans',sans-serif; --r:12px; --r-sm:8px; --r-lg:16px; --shadow-card:0 4px 24px rgba(0,0,0,.5); --shadow-hover:0 12px 48px rgba(0,0,0,.7); } /* ── LIGHT THEME OVERRIDE (toggle via [data-theme="light"] on ) ── */ [data-theme="light"]{ --bg:#fdfafa; --bg2:#ffffff; --surface:#ffffff; --card:#ffffff; --card-hover:#fdf0f0; --border:#eee0e0; --border2:#e0c8c8; --text:#1a0d0d; --text2:#5a4444; --text3:#8a7373; --shadow-card:0 4px 24px rgba(0,0,0,.06); --shadow-hover:0 12px 40px rgba(0,0,0,.1); } body{background:var(--bg);color:var(--text);font-family:var(--font-b);font-size:15px;line-height:1.6;min-height:100vh;transition:background .2s,color .2s} /* ── THEME TOGGLE BUTTON (shared across all pages) ── */ /* ── AUTH LOGO (dark mode = inverted white, light mode = natural) ── */ /* ── PRICING BANNER ── */ @keyframes slideDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}} .pb-btn-login{background:transparent;border:1px solid rgba(232,28,28,.5);color:var(--accent);padding:.3rem .9rem;border-radius:6px;font-size:.8rem;font-weight:600;transition:all .2s} .pb-btn-login:hover{background:rgba(232,28,28,.1)} .pb-btn-signup{background:var(--accent);color:#fff;padding:.3rem .9rem;border-radius:6px;font-size:.8rem;font-weight:700;transition:all .2s} .pb-btn-signup:hover{background:#ff2222} .pb-close{background:none;border:none;color:var(--text3);font-size:1rem;cursor:pointer;padding:.2rem .5rem;border-radius:4px;transition:color .2s} .pb-close:hover{color:var(--text)} /* ── SITE HEADER ── */ .logo-ultra{font-family:var(--font-d);font-size:1.4rem;font-weight:700;color:var(--accent);letter-spacing:1px} .logo-guard{font-family:var(--font-d);font-size:1.4rem;font-weight:700;color:var(--text);letter-spacing:1px} .logo-tag{font-family:var(--font-d);font-size:.7rem;font-weight:500;color:var(--text3);letter-spacing:2px;margin-left:.4rem;text-transform:uppercase} .user-pill{display:flex;align-items:center;gap:.4rem;padding:.3rem .85rem;border-radius:999px;font-size:.78rem;font-weight:600} .user-pill.detailer{background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.3);color:var(--blue)} .user-pill.distributor{background:rgba(232,28,28,.12);border:1px solid rgba(232,28,28,.3);color:var(--accent)} .up-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0} .up-role{opacity:.7} .up-pending{background:rgba(245,158,11,.15);color:#f59e0b;padding:1px 6px;border-radius:4px;font-size:.65rem;letter-spacing:.3px} /* ── LAYOUT ── */ .container{max-width:1280px;margin:0 auto;padding:0 1.5rem} .section{padding:3rem 0} .section-title{font-family:var(--font-d);font-size:1.5rem;font-weight:700;margin-bottom:.3rem} .section-sub{color:var(--text2);font-size:.88rem;margin-bottom:1.5rem} /* ── BREADCRUMB ── */ .breadcrumb{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--text3);padding:1rem 0} .breadcrumb a{color:var(--text3);transition:color .2s} .breadcrumb a:hover{color:var(--accent)} .breadcrumb span{color:var(--text2)} /* ── GLOBAL SEARCH DROPDOWN ── */ .search-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);z-index:400;max-height:480px;overflow-y:auto;display:none} .search-dropdown.open{display:block} /* ── NAV DROPDOWN ── */ .mobile-sub-link { padding-left: 1.8rem !important; font-size: 0.85rem !important; opacity: 0.85; } /* ── EMPTY STATE ── */ .empty-state{text-align:center;padding:4rem 1rem;color:var(--text3)} .empty-state h3{font-family:var(--font-d);font-size:1.2rem;color:var(--text2);margin-bottom:.5rem} /* ── PREMIUM FOOTER REDESIGN ── */ .social-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text2); transition: all 0.25s; text-decoration: none; } .social-icon:hover { background: var(--accent); color: #000; border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(232,28,28,0.25); } .fl-col h4 { font-family: var(--font-d); font-size: 0.88rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text); margin-bottom: 1.25rem; position: relative; } .fl-col h4::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 24px; height: 2px; background: var(--accent); } .fl-col a { display: block; color: var(--text2); font-size: 0.83rem; margin-bottom: 0.65rem; text-decoration: none; transition: color 0.2s, transform 0.2s; } .fl-col a:hover { color: var(--accent); transform: translateX(4px); } .newsletter-form { display: flex; gap: 0.4rem; } .newsletter-input { flex: 1; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 6px; padding: 0.45rem 0.75rem; color: var(--text); font-size: 0.82rem; outline: none; transition: border-color 0.2s; } .newsletter-input:focus { border-color: var(--accent); } .newsletter-btn { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 0.45rem 1rem; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.2s; } .newsletter-btn:hover { background: #ff2222; box-shadow: 0 4px 12px rgba(232,28,28,0.2); } .badge-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--text2); } .badge-item i { color: var(--accent); font-size: 0.85rem; } /* ── LIGHTBOX OVERRIDE ── */ .lb-outerContainer{background:rgba(0,0,0,.9)!important;border-radius:8px} /* ── RESPONSIVE ── */