/* ===================================================== SpiCats Theme (Dark + Brand) Central place for colors, radii, shadows, chips/buttons, hero tint Usage: Then remove per-page :root variables, or keep them minimal. Optional: set data-theme="light" on to switch. ===================================================== */ /* ---- Base (Dark) ---- */ :root { color-scheme: dark; --bg: #0b0b10; --bg-soft: #12121a; --card: #171726; --line: #27273a; --txt: #e8e8f0; --txt-dim: #b9b9c9; /* Brand */ --brand: #00ddcc; /* primary accent */ --brand-2:#dd00cc; /* secondary accent */ --brand-glow-rgba: 0,221,204; /* for box-shadow rgba() */ --brand2-glow-rgba: 221,0,204; /* Shape */ --radius: 18px; --shadow: 0 8px 30px rgba(0,0,0,.35); /* Hero tint */ --hero-tint: rgba(0,221,204,.25); --hero-gradient: radial-gradient(80% 60% at 50% 15%, var(--hero-tint), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.55), rgba(10,10,16,.85)); } /* ---- Light theme (optional) ---- */ [data-theme="light"] { color-scheme: light; --bg: #f8f9fb; --bg-soft: #ffffff; --card: #ffffff; --line: #e6e8ef; --txt: #0f1222; --txt-dim: #65708a; --hero-tint: rgba(0,221,204,.18); --hero-gradient: radial-gradient(80% 60% at 50% 15%, var(--hero-tint), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,0)); } /* ---- Utilities shared across pages ---- */ body { background: linear-gradient(180deg, #0a0a10 0%, #0b0b12 20%, #0b0b10 100%); color: var(--txt); } .muted { color: var(--txt-dim); } .row { display:flex; gap:12px; flex-wrap:wrap; } .wrap { width:100%; max-width:1200px; padding:0 20px; margin:auto; } /* Chips / Pills */ .chip, .pill { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:4px 8px; font-size:12px; color:var(--txt-dim); } /* Buttons */ .btn { display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:#141424; color:var(--txt); font-weight:600; box-shadow:var(--shadow); } .btn:hover { filter:brightness(1.06); } .btn.brand { border:0; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#091014; box-shadow:0 6px 22px rgba(var(--brand-glow-rgba), .35); } .btn.brand:hover { transform: translateY(-1px); box-shadow:0 10px 26px rgba(var(--brand-glow-rgba), .40); } .btn.ghost { background:transparent; } /* Logo mark */ .logo-mark { width:28px; height:28px; border-radius:8px; background:conic-gradient(from 210deg at 50% 50%, var(--brand), var(--brand-2) 55%, #33f6ea); box-shadow:0 0 24px rgba(var(--brand-glow-rgba), .35); } /* Cards */ .card { background: linear-gradient(180deg, #141423, #0f0f19); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); } .card .meta { padding:12px 14px; } /* Feature icon slab */ .icon { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(0,221,204,.15), rgba(221,0,204,.15)); } /* Hero background overlay helper */ .hero { position:relative; isolation:isolate; } .hero-media { position:absolute; inset:0; z-index:-1; overflow:hidden; border-bottom:1px solid #1a1a2a; } .hero-media::after { content:""; position:absolute; inset:0; background: var(--hero-gradient); } .hero-media img { width:100%; height:100%; object-fit:cover; filter:saturate(1.1) contrast(1.05) brightness(.9); } /* Tabs (downloads page) */ .tab { padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:#121224; color:var(--txt-dim); cursor:pointer; } .tab.active { background: linear-gradient(135deg, rgba(0,221,204,.14), rgba(221,0,204,.10)); color:var(--txt); } /* Media query niceties */ @media (max-width:900px){ .wrap{ max-width:100%; } }