/* ============================================================ DESIGN TOKENS Tiga sumber, masing-masing untuk urusan yang berbeda: - PALET & LATAR → papan mood "Sexy & Expensive" (burgundy, ivory hangat, blush). Latar berawan Olympus masih dipakai sebagai tekstur di /assets, tapi warnanya bukan lagi dari sana. - TOMBOL → usewombat.app + fikristudio.com. Yang dipakai resep Fikri: cincin SOLID dari warna yang lebih tua, bukan rim putih transparan. - TIPOGRAFI → sans tebal untuk display (arah Yubo) + Manrope untuk UI. Terang saja — tidak ada blok prefers-color-scheme: dark. Sengaja: seluruh sistem bayangan di sini mengasumsikan cahaya datang dari ATAS di atas permukaan terang. ============================================================ */ :root { /* ── Teks ── Espresso, bukan abu netral: di atas ivory yang hangat, abu murni terbaca kotor. --ink-2 sengaja LEBIH GELAP daripada "Taupe Rose #8F777A" di papan mood — warna itu cuma 3,8:1 di atas --bg, di bawah AA untuk teks kecil. Nada rose-nya dipertahankan, gelapnya dinaikkan ke 6,2:1. */ --ink: #211719; --ink-2: #6E5559; --ink-3: #9C8B8E; /* ── Permukaan hangat ── */ --bg: #FAF5F2; --bg-card: #FFFCFC; --bg-alt: #F6EEEC; --line: #E8D8D5; --line-soft: rgba(33,23,25,.08); /* ── Burgundy brand ── Disampel ulang dari ikon Datealarm (assets/brand/date-alarm.png, 8 Sep 2026) menggantikan sampel dari logo mawar. Angkanya bukan pilihan tangan: piksel buram ikon dikelompokkan per pita luminansi, lalu diambil warna rata-rata tiap pita. #2E0E13 sudut tergelap ubin ikon #8D2337 badan burgundy — warna paling banyak setelah gelap #C9405C merah muda jantung di tengah Logo yang menentukan warna, bukan sebaliknya. Kalau logonya berubah lagi, sampel ulang — dan periksa lagi angka kontras di blok aksi di bawah, karena itu yang menentukan tombolnya masih terbaca atau tidak. */ --brand-1: #2E0E13; /* anggur tergelap */ --brand-2: #8D2337; /* burgundy utama */ --brand-3: #C9405C; /* merah muda jantung, dekoratif */ /* Gradien judul — sudut 212.15° dipertahankan dari Olympus. Ujung paling terang (#B5314B) di atas ivory = 5,46:1, masih jauh di atas ambang AA teks besar. Skema hijau lama cuma sampai 3,56:1, jadi di sini ada ruang untuk warna yang lebih hidup tanpa mengorbankan keterbacaan — jangan dibuang lagi. */ --grad-brand: linear-gradient(212.15deg, #2E0E13 6.09%, #B5314B 100%); /* ── Aksi — resep fikristudio.com dengan burgundy brand ── --accent-ring itu kuncinya: cincin SOLID 1.5px dari merah yang lebih tua. Itu yang bikin terasa seperti permen timbul, bukan kaca. BEDA PENTING dari skema hijau: burgundy itu warna GELAP, jadi tinta tombol dibalik — teks terang di atas merah, bukan teks gelap di atas hijau muda. Setiap kali menambah komponen di atas --accent, pakai --accent-ink; var(--ink) di atas burgundy cuma 1,3:1 dan tak terbaca. Kontras setelah disampel ulang dari ikon Datealarm — semuanya sama atau LEBIH BAIK dari palet mawar sebelumnya: accent → accent-ink 7,59:1 (sebelumnya 7,35) accent-hi → accent-ink 5,93:1 (sebelumnya 5,62) ← titik paling terang gradien tombol, jadi ini angka terburuk yang benar-benar dilihat orang Kalau salah satu turun di bawah 4,5, tombolnya berhenti lolos AA untuk teks ukuran biasa. Periksa sebelum mengubah. */ --accent: #8D2337; --accent-hi: #A82C43; --accent-lo: #741C2D; --accent-ring: #4A1320; --accent-ink: #FDECEF; --accent-soft: #FCE4E9; --grad-accent: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 100%); --accent-glow: rgba(46,14,19,.30); /* ── Status ──────────────────────────────────────────────── Titik "online" sengaja TETAP HIJAU walau seluruh merek pindah ke burgundy: itu status, bukan merek. Hijau berarti "ada orangnya sekarang" di hampir semua aplikasi; memakai warna merek membuat titik itu berhenti berarti apa-apa, dan di beranda dia bahkan menyatu dengan tombol harga di sebelahnya. Nilainya sudah dipakai landing sejak awal (.ava-on, .pola .on) tapi sebagai literal di dua tempat. Dijadikan token supaya beranda dan landing tidak berangsur memakai hijau yang berbeda. */ --online: #2FBF71; /* Champagne dari papan mood — belum dipakai di mana pun. Disimpan untuk aksen "inner circle"/membership nanti. */ --gold-1: #A8905E; --gold-2: #E4D2A8; --grad-gold: linear-gradient(212.15deg, #A8905E 6.09%, #E4D2A8 100%); /* ── Kedalaman ── rim = cincin 1px di dalam, pengganti border spec = highlight tipis di tepi atas (cahaya dari atas) lift = bayangan ambien (lebar) + kontak (rapat) Selalu berpasangan; satu bayangan saja terasa murah. */ --rim: inset 0 0 0 1px rgba(255,255,255,.28); --rim-dark: inset 0 0 0 1px rgba(33,23,25,.08); --spec: inset 0 1px 0 rgba(255,255,255,.55); --spec-soft: inset 0 1px 0 rgba(255,255,255,.9); --sink: inset 0 -1px 0 rgba(0,0,0,.10); /* Bayangannya bernada anggur, bukan cokelat: bayangan netral di atas ivory yang kemerahan terbaca abu dan mematikan kehangatan seluruh halaman. */ --lift-1: 0 1px 2px rgba(60,16,26,.07), 0 2px 5px rgba(60,16,26,.05); --lift-2: 0 2px 4px rgba(60,16,26,.06), 0 8px 20px rgba(60,16,26,.08); --lift-3: 0 4px 10px rgba(60,16,26,.07), 0 18px 44px rgba(60,16,26,.11); --grad-card: linear-gradient(180deg, #FFFFFF 0%, #FDF7F6 100%); --grad-glass: linear-gradient(180deg, rgba(255,252,252,.88) 0%, rgba(255,252,252,.68) 100%); /* ── Bentuk ── */ --radius-card: 26px; --radius-btn: 100px; /* Fikri pakai pil penuh */ --radius-sm: 14px; --radius-pill: 999px; /* ── Font ── Display-nya sans tebal, bukan serif: arahnya Yubo — tegas, geometris, dan tetap bulat/ramah. Outfit dipilih karena paling dekat ke Gilroy (yang komersial) dan tersedia di Google Fonts sebagai variable font. Manrope tetap untuk UI. --wt-display JANGAN dilepas dari --font-display. Serif lama tampil benar pada weight 400; Outfit pada 400 terbaca seperti teks body yang kebesaran, bukan judul. Setiap aturan yang memakai --font-display wajib menyertakan bobotnya. */ --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Outfit', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --wt-display: 800; --wrap: 1080px; --pad-section: 120px; } @media (max-width: 720px) { :root { --pad-section: 76px; --radius-card: 22px; } } /* ── Ikon ───────────────────────────────────────────────────── Lucide (ISC) — lihat assets/CREDITS-ikon.md. Semuanya di-inline sebagai telanjang; atribut bersamanya ditaruh di SATU aturan supaya markup-nya tidak mengulang lima atribut identik di tiap ikon. Grid 24, stroke 2, ujung & sambungan bulat — jangan diubah per-ikon, itu yang membuat satu set terlihat satu set. Tinggal di tokens.css, bukan di stylesheet halaman, karena ini aturan LINTAS halaman. Sebelumnya di acak.css: akibatnya cuma /acak yang bisa memakai konvensi ini, dan halaman lain yang butuh ikon Lucide harus menempelkan stroke sendiri di tiap . tokens.css sudah di-link duluan di semua halaman. */ /* ── Tombol lihat kata sandi ───────────────────────────────── Dipasang js/lihat-sandi.js ke setiap input[type=password]. Gayanya tinggal di tokens.css, bukan auth.css, karena kolom sandi ada di halaman auth (auth.css) DAN di kartu Kata sandi pada /home (beranda.css) — dan tokens.css satu-satunya yang dimuat keduanya. */ .sandi-bungkus { position: relative; display: block; } /* Ruang untuk tombolnya. Tanpa ini teks sandi yang panjang berjalan ke bawah ikon dan tidak bisa dibaca justru waktu diintip. */ .sandi-bungkus > input { padding-right: 48px; } .sandi-mata { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; padding: 0; margin: 0; border: 0; border-radius: 999px; background: none; color: var(--ink-3); cursor: pointer; } .sandi-mata:hover { color: var(--ink-2); } .sandi-mata.is-on { color: var(--accent); } .sandi-mata:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; } .sandi-mata .ic-lucide { width: 19px; height: 19px; } .ic-lucide { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ic { width: 18px; height: 18px; display: block; }