/* ===================================================================== PEJUANG TEKNOLOGI DIGITAL — Token desain Satu sumber untuk landing page dan panel admin. Aturan pemakaian: · Ukuran huruf hanya dari --t-*, tidak pernah angka lepas. · Jarak hanya dari --s-*, kelipatan 4. · Radius hanya dari --r-*. · Warna hanya lewat token semantik, bukan hex langsung. Dimuat oleh: index.html, 404.html, privasi.html, /admin/ ===================================================================== */ :root{ /* --------------------------------------------------------------- Tangga warna netral — berona dingin kebiruan supaya menyatu dengan navy, bukan abu netral yang membuat halaman terlihat mati. --------------------------------------------------------------- */ --n-0:#FFFFFF; --n-25:#FAFBFD; --n-50:#F5F7FA; --n-100:#EDF1F6; --n-200:#DFE5EE; --n-300:#C7D1E0; --n-400:#9AA8BC; --n-450:#7B8A9F; /* dekoratif saja: ikon, garis, bukan teks */ --n-500:#637186; /* teks redup; lulus 4.5:1 di atas surface & surface-2 */ --n-600:#536379; --n-700:#3D4C60; --n-800:#2A3648; --n-900:#18222F; --n-950:#0E1620; /* Tangga navy */ --a-50:#EDF3FC; --a-100:#DAE6F8; --a-200:#B9CDEF; --a-300:#8FACE0; --a-400:#5B83C7; --a-500:#2F5BA6; --a-600:#1C4483; --a-700:#143467; --a-800:#0F2A52; --a-900:#0C2141; /* Warna keadaan */ --green-50:#E9F6EE; --green-600:#17663A; --green-700:#0F4E2B; --yellow-50:#FCF3E3; --yellow-600:#8A5A00; --yellow-700:#6B4600; --red-50:#FCECEB; --red-600:#BD2E29; --red-700:#94211D; --violet-50:#EFEBFC; --violet-600:#5B32B5; --violet-700:#46258C; /* --------------------------------------------------------------- Tangga ukuran huruf — dua belas langkah, tidak ada di luar ini. --------------------------------------------------------------- */ --t-2xs:11px; --t-xs:12px; --t-sm:13px; --t-md:14px; --t-base:15px; --t-lg:17px; --t-xl:19px; --t-2xl:22px; --t-3xl:26px; --t-4xl:32px; --t-5xl:40px; --t-6xl:52px; --lh-tight:1.15; --lh-snug:1.35; --lh-base:1.55; --lh-loose:1.7; --ls-tight:-.022em; --ls-snug:-.012em; --ls-none:0; --ls-wide:.04em; --w-normal:400; --w-medium:500; --w-semibold:600; --w-bold:700; /* --------------------------------------------------------------- Tangga jarak — kelipatan 4. --------------------------------------------------------------- */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:28px; --s-8:32px; --s-10:40px; --s-12:48px; --s-14:56px; --s-16:64px; --s-20:80px; --s-24:96px; --s-28:112px; /* Radius — empat langkah saja, saling bersarang rapi */ --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-full:999px; /* --------------------------------------------------------------- Peran warna — mode terang --------------------------------------------------------------- */ --bg:var(--n-50); --bg-sunken:var(--n-100); --surface:var(--n-0); --surface-2:var(--n-50); --surface-3:var(--n-100); --hairline:var(--n-200); --hairline-strong:var(--n-300); --txt:var(--n-900); --txt-2:var(--n-600); --txt-3:var(--n-500); --txt-on-accent:var(--n-0); --accent:var(--a-600); --accent-hover:var(--a-700); --accent-soft:var(--a-50); --accent-soft-2:var(--a-100); --accent-line:var(--a-200); --ok:var(--green-600); --ok-soft:var(--green-50); --warn:var(--yellow-600); --warn-soft:var(--yellow-50); --danger:var(--red-600); --danger-soft:var(--red-50); --info:var(--violet-600); --info-soft:var(--violet-50); /* --------------------------------------------------------------- Ring dan elevasi. Batas kartu memakai ring inset supaya tidak menambah lebar kotak dan ikut menguat seiring naiknya elevasi. --------------------------------------------------------------- */ --ring:inset 0 0 0 1px rgba(20,52,103,.10); --ring-strong:inset 0 0 0 1px rgba(20,52,103,.16); --ring-accent:inset 0 0 0 1px rgba(28,68,131,.30); --ring-danger:inset 0 0 0 1px rgba(189,46,41,.26); --ring-top:inset 0 1px 0 rgba(255,255,255,.65); --e-1:0 1px 1px rgba(14,22,32,.04), 0 2px 4px -1px rgba(14,22,32,.05); --e-2:0 1px 1px rgba(14,22,32,.04), 0 4px 8px -3px rgba(14,22,32,.06), 0 10px 18px -8px rgba(14,22,32,.08); --e-3:0 1px 2px rgba(14,22,32,.04), 0 8px 16px -6px rgba(14,22,32,.07), 0 20px 34px -12px rgba(14,22,32,.10); --e-4:0 2px 4px rgba(14,22,32,.05), 0 14px 28px -10px rgba(14,22,32,.10), 0 34px 60px -20px rgba(14,22,32,.14); --e-accent:0 1px 2px rgba(20,52,103,.24), 0 4px 10px -4px rgba(20,52,103,.32); --e-accent-hover:0 1px 2px rgba(20,52,103,.28), 0 8px 18px -6px rgba(20,52,103,.38); /* Huruf */ --font-display:'Lexend',system-ui,-apple-system,'Segoe UI',sans-serif; --font-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace; /* Gerak */ --ease:cubic-bezier(.22,.61,.36,1); --dur-1:140ms; --dur-2:220ms; --dur-3:340ms; /* Ukuran tetap */ --nav-h:68px; --maxw:1200px; } /* ===================================================================== Mode gelap — nilai tonal yang lebih terang, bukan warna terbalik. ===================================================================== */ :root[data-theme="dark"]{ --bg:#0C1420; --bg-sunken:#080E17; --surface:#121C2B; --surface-2:#182437; --surface-3:#203046; --hairline:rgba(255,255,255,.10); --hairline-strong:rgba(255,255,255,.18); --txt:#E9EFF7; --txt-2:#A3B1C4; --txt-3:#7C8CA3; --txt-on-accent:#081019; --accent:#74AAEE; --accent-hover:#93C0F5; --accent-soft:rgba(116,170,238,.13); --accent-soft-2:rgba(116,170,238,.20); --accent-line:rgba(116,170,238,.34); --ok:#57D98A; --ok-soft:rgba(87,217,138,.13); --warn:#E8B45F; --warn-soft:rgba(232,180,95,.14); --danger:#F2938F; --danger-soft:rgba(242,147,143,.14); --info:#A98CF0; --info-soft:rgba(169,140,240,.14); --ring:inset 0 0 0 1px rgba(255,255,255,.09); --ring-strong:inset 0 0 0 1px rgba(255,255,255,.16); --ring-accent:inset 0 0 0 1px rgba(116,170,238,.32); --ring-danger:inset 0 0 0 1px rgba(242,147,143,.28); --ring-top:inset 0 1px 0 rgba(255,255,255,.05); --e-1:0 1px 2px rgba(0,0,0,.44); --e-2:0 2px 4px rgba(0,0,0,.4),0 8px 18px -8px rgba(0,0,0,.54); --e-3:0 4px 8px rgba(0,0,0,.44),0 20px 36px -14px rgba(0,0,0,.6); --e-4:0 8px 16px rgba(0,0,0,.5),0 36px 64px -22px rgba(0,0,0,.7); --e-accent:0 1px 2px rgba(0,0,0,.5),0 5px 12px -5px rgba(116,170,238,.42); --e-accent-hover:0 1px 2px rgba(0,0,0,.5),0 10px 20px -6px rgba(116,170,238,.5); }