/* ========================= THEME SYSTEM (COC / PUBG / MLBB) How to use: - Default theme is "base" - Add class on : body class="theme-coc" body class="theme-pubg" body class="theme-mlbb" ========================= */ /* Base (default) */ :root{ --bg:#f7f9fc; --card:rgba(255,255,255,.88); --border:rgba(15,23,42,.12); --text:#0f172a; --muted:#5b6b85; /* primary / secondary */ --a:#2563eb; --b:#7c3aed; --shadow: 0 18px 60px rgba(15, 23, 42, 0.10); --r:18px; /* theme extras */ --link:#1d4ed8; --badgeBorder: rgba(37,99,235,.22); --badgeBg: rgba(37,99,235,.08); --badgeText: #1d4ed8; --pillBorder: rgba(124,58,237,.20); --pillBg: rgba(124,58,237,.08); --pillText:#5b21b6; --tabActiveBorder: rgba(37,99,235,.35); --tabActiveGlow: rgba(37,99,235,.10); --headerBg: rgba(247,249,252,.72); } /* COC theme (medieval / gold / red) */ body.theme-coc{ --bg:#fbf7f1; --card:rgba(255,255,255,.90); --border:rgba(61,34,17,.16); --text:#2a1a10; --muted:#6b5344; --a:#b42318; /* deep red */ --b:#f2b705; /* gold */ --link:#9a3412; --badgeBorder: rgba(180,35,24,.24); --badgeBg: rgba(180,35,24,.10); --badgeText:#9a3412; --pillBorder: rgba(242,183,5,.30); --pillBg: rgba(242,183,5,.12); --pillText:#7a5200; --tabActiveBorder: rgba(242,183,5,.40); --tabActiveGlow: rgba(242,183,5,.14); --headerBg: rgba(251,247,241,.78); } /* PUBG theme (tactical / dark olive) */ body.theme-pubg{ --bg:#0b1220; --card:rgba(255,255,255,.06); --border:rgba(255,255,255,.10); --text:#e5e7eb; --muted:#a3adbb; --a:#d4a017; /* sand gold */ --b:#1f8a70; /* tactical green */ --link:#d4a017; --badgeBorder: rgba(212,160,23,.25); --badgeBg: rgba(212,160,23,.10); --badgeText:#facc15; --pillBorder: rgba(31,138,112,.28); --pillBg: rgba(31,138,112,.14); --pillText:#a7f3d0; --tabActiveBorder: rgba(212,160,23,.35); --tabActiveGlow: rgba(212,160,23,.18); --shadow: 0 18px 60px rgba(0,0,0,.35); --headerBg: rgba(11,18,32,.72); } /* MLBB theme (fantasy / neon blue-purple) */ body.theme-mlbb{ --bg:#f5f3ff; --card:rgba(255,255,255,.86); --border:rgba(76,29,149,.14); --text:#1f1147; --muted:#5b4a86; --a:#2563eb; /* blue */ --b:#a855f7; /* purple */ --link:#4338ca; --badgeBorder: rgba(168,85,247,.25); --badgeBg: rgba(168,85,247,.10); --badgeText:#6d28d9; --pillBorder: rgba(37,99,235,.26); --pillBg: rgba(37,99,235,.10); --pillText:#1d4ed8; --tabActiveBorder: rgba(168,85,247,.40); --tabActiveGlow: rgba(168,85,247,.14); --headerBg: rgba(245,243,255,.75); } /* ========== Your existing CSS (updated to use theme variables) ========== */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--text); background: radial-gradient(900px 520px at 15% 10%, color-mix(in srgb, var(--a) 18%, transparent), transparent 60%), radial-gradient(900px 520px at 85% 15%, color-mix(in srgb, var(--b) 16%, transparent), transparent 60%), var(--bg); } a{color:var(--link); font-weight:700; text-decoration:none} a:hover{text-decoration:underline} .container{width:min(1080px, 100%); margin:0 auto; padding: 0 16px} .header{ position: sticky; top:0; z-index:10; backdrop-filter: blur(10px); background: var(--headerBg); border-bottom: 1px solid var(--border); } .header-row{ display:flex; align-items:center; justify-content:space-between; padding: 12px 0; gap: 16px; } .brand{display:flex; align-items:center; gap:10px} .logo{ width:38px; height:38px; border-radius:12px; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 16px 30px color-mix(in srgb, var(--a) 25%, transparent); } .brand-name{font-weight:900; letter-spacing:-0.01em} .brand-sub{font-size:12.5px; color:var(--muted)} .nav{display:flex; gap:14px; flex-wrap:wrap} .nav a{color:var(--text); font-weight:800; opacity:.85} .nav a:hover{opacity:1} .hero{padding: 18px 0 8px} .hero-card{ border:1px solid var(--border); background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 18px; } h1{margin: 0 0 8px; font-size: clamp(26px, 3.6vw, 40px); letter-spacing:-0.02em} h2{margin: 0 0 8px; font-size: 22px} h3{margin: 0 0 8px; font-size: 16px} .muted{color:var(--muted); line-height:1.6} .badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px} .badge{ font-size:12.5px; padding: 7px 10px; border-radius:999px; border:1px solid var(--badgeBorder); background: var(--badgeBg); color: var(--badgeText); font-weight:800; } .section{padding: 18px 0} .tabs{ display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 14px; } .tab{ border:1px solid var(--border); background: color-mix(in srgb, var(--card) 85%, transparent); padding: 10px 12px; border-radius: 999px; cursor:pointer; font-weight:900; color: var(--text); } .tab.active{ border-color: var(--tabActiveBorder); box-shadow: 0 0 0 4px var(--tabActiveGlow); } .grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 900px){ .grid{ grid-template-columns: repeat(2, 1fr);} } @media (max-width: 560px){ .grid{ grid-template-columns: 1fr; } .header-row{ flex-direction:column; align-items:flex-start; } } .card{ border:1px solid var(--border); background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px; } .product{ display:flex; flex-direction:column; gap:10px; } .pill{ display:inline-flex; align-items:center; width:max-content; font-size:12px; padding: 6px 10px; border-radius:999px; border:1px solid var(--pillBorder); background: var(--pillBg); color: var(--pillText); font-weight:900; } .product-title{font-weight:950} .product-desc{font-size:13.5px} .product-actions{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap} .btn{ border:0; cursor:pointer; color:white; font-weight:950; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 16px 35px color-mix(in srgb, var(--a) 22%, transparent); } .btn:active{opacity:.95} .btn.secondary{ background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--text); border:1px solid var(--border); box-shadow: none; } form .row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 720px){ form .row{ grid-template-columns: 1fr; } } .field{display:flex; flex-direction:column; gap:7px; margin-top:10px} label{font-weight:900; font-size:13px} input, select{ padding: 11px 12px; border-radius: 14px; border:1px solid color-mix(in srgb, var(--border) 75%, transparent); background: color-mix(in srgb, var(--card) 80%, transparent); outline:none; font-size:14px; color: var(--text); } input::placeholder{color: color-mix(in srgb, var(--muted) 85%, transparent)} input:focus, select:focus{ border-color: color-mix(in srgb, var(--a) 45%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 14%, transparent); } .hint{color:var(--muted); font-size:12.5px} .actions{ display:flex; align-items:center; gap: 12px; margin-top: 14px; flex-wrap:wrap; } .status{font-weight:900; font-size:13px; color: var(--muted)} .status.ok{color:#0f766e} .status.err{color:#b42318} .support{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 780px){ .support{ grid-template-columns: 1fr; } } .footer{ padding: 22px 0 40px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top: 1px solid var(--border); margin-top: 10px; }