/* ========================================================================= Sigatra — Design Token ========================================================================= Satu-satunya tempat nilai warna, ukuran huruf, jarak, dan lengkung sudut dituliskan. Seluruh file CSS lain hanya boleh memakai var(--...). Konsekuensinya: mengganti seluruh nuansa situs cukup dengan mengedit file ini, dan tema terang/gelap tidak perlu duplikasi aturan — hanya nilai tokennya yang berbeda. ------------------------------------------------------------------------ TIGA KEPUTUSAN WARNA YANG DISENGAJA ------------------------------------------------------------------------ 1. Navy dan teal diambil langsung dari logo Sigatra — #0C2039 dan #20B090. Situsnya jadi terasa satu kesatuan dengan logonya, bukan logo yang ditempel di atas tema bawaan. 2. Navy jadi warna aksen utama, teal hanya aksen tipis. Alasannya bukan selera. Teal merek berjarak cuma 24 derajat hue dari hijau WhatsApp (166 vs 142) — dari sudut mata keduanya sama-sama terbaca "hijau". Kalau teal dipakai sebagai tombol berisi penuh, pengunjung berhenti bisa membedakan mana tombol biasa dan mana tombol hubungi. Maka teal dibatasi untuk garis bawah, gradasi, stroke ikon, dan angka statistik — tidak pernah bidang besar. 3. Hijau WhatsApp (--wa) TIDAK dipakai untuk apa pun selain tombol WhatsApp. Karena warna itu tidak muncul di tempat lain, mata pengunjung menemukan titik hubungi di halaman mana pun tanpa perlu membaca satu kata pun. ------------------------------------------------------------------------ Nilai teks bukan urusan selera. Semuanya sudah diuji terhadap WCAG AA (4.5:1) di SETIAP tingkat permukaan. Sebelum mengubah, hitung ulang. ========================================================================= */ :root { /* --- Palet mentah ------------------------------------------------- Nilai dasar yang tidak berubah antar tema. Jangan dipakai langsung di komponen — pakai token semantik di bawahnya. */ /* Navy — dari logo. Hue 213 derajat. */ --navy-950: #070c15; --navy-900: #0c2039; /* warna logo */ --navy-800: #112c4e; --navy-700: #163863; --navy-600: #1c4578; --navy-500: #23568f; --navy-400: #3c74b0; --navy-300: #7fa8e4; --navy-200: #a6c3e6; --navy-100: #d5e3f4; --navy-50: #eef4fb; /* Teal — dari logo. Hue 166 derajat. */ --teal-800: #0a5f4d; --teal-700: #0e7a62; --teal-600: #128f73; --teal-500: #17a587; --teal-400: #20b090; /* warna logo */ --teal-300: #4ecdaf; --teal-200: #8fdfcc; --teal-100: #c9f1e7; --teal-50: #e9fbf6; /* Kuning bintang. Satu-satunya sisa palet lama, dipertahankan karena bintang penilaian berwarna emas adalah konvensi yang dikenali semua orang — mengubahnya jadi teal justru bikin bingung. */ --star-500: #f59e0b; --green-500: #16a34a; --red-500: #dc2626; /* Warna merek WhatsApp — dilindungi, jangan dipakai ulang. */ --wa: #25d366; --wa-strong: #1eb85a; --wa-ink: #05391a; /* --- Huruf --------------------------------------------------------- Plus Jakarta Sans dipilih bukan sekadar karena bentuknya bagus: typeface ini dibuat Tokotype sebagai huruf resmi kota Jakarta. Untuk bisnis yang menyasar pasar Jakarta, itu detail yang berbicara. */ --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Skala tipe cair — ikut lebar layar tanpa media query. */ --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: clamp(1.0625rem, 1.01rem + 0.24vw, 1.1875rem); --fs-lg: clamp(1.1875rem, 1.09rem + 0.42vw, 1.375rem); --fs-xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem); --fs-2xl: clamp(1.625rem, 1.32rem + 1.3vw, 2.375rem); --fs-3xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); --fs-4xl: clamp(2.375rem, 1.6rem + 3.4vw, 4.5rem); --lh-tight: 1.08; --lh-snug: 1.28; --lh-normal: 1.6; --lh-relaxed: 1.75; --tracking-tight: -0.022em; --tracking-snug: -0.012em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-caps: 0.12em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; /* --- Jarak --------------------------------------------------------- Skala kelipatan 4px. Angka ganjil sengaja tidak disediakan supaya ritme vertikalnya konsisten. */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --section-y: clamp(3.5rem, 2.2rem + 5.4vw, 7rem); --section-y-lg: clamp(4.5rem, 2.6rem + 7.5vw, 9rem); --container: 75rem; --container-wide: 84rem; --container-narrow: 46rem; /* +- 736px, panjang baris nyaman dibaca */ --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 2.5rem); /* --- Lengkung sudut ----------------------------------------------- */ --r-xs: 0.375rem; --r-sm: 0.5rem; --r: 0.75rem; --r-md: 1rem; --r-lg: 1.25rem; --r-xl: 1.75rem; --r-2xl: 2.25rem; --r-full: 999px; /* --- Gerak --------------------------------------------------------- Kurva 'out' untuk hampir semua transisi: cepat di awal, melambat di akhir — terasa responsif tanpa terasa kasar. Kurva 'spring' hanya untuk elemen yang muncul, karena sedikit memantul membuatnya hidup. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-instant: 90ms; --dur-fast: 150ms; --dur: 260ms; --dur-slow: 480ms; --dur-slower: 760ms; /* --- Lapisan ------------------------------------------------------- */ --z-behind: -1; --z-base: 1; --z-sticky: 30; --z-header: 40; --z-float: 45; --z-overlay: 50; --z-modal: 60; --z-toast: 70; } /* ========================================================================= TEMA TERANG Angka kontras di komentar dihitung dengan rumus WCAG, bukan dikira-kira. ========================================================================= */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #f9fbfd; --bg-subtle: #f1f5fa; --surface: #ffffff; --surface-2: #f3f7fb; --surface-3: #e7eff7; --surface-inv: var(--navy-900); /* Garis pemisah bernuansa navy, bukan abu netral — supaya menyatu dengan warna teks dan tidak terlihat kotor. */ --border: rgba(12, 32, 57, 0.10); --border-soft: rgba(12, 32, 57, 0.06); --border-strong: rgba(12, 32, 57, 0.18); --text: var(--navy-900); /* 15.80:1 pada --bg */ --text-2: #47586e; /* 7.01:1 pada --bg */ --text-3: #58687a; /* 4.92:1 bahkan pada --surface-3 */ --text-inv: #f6f9fc; /* Aksen = navy. Tombol navy berisi penuh terbaca mapan dan mahal, sekaligus tidak pernah bisa tertukar dengan tombol WhatsApp. */ --accent: var(--navy-600); /* 9.67:1 pada putih */ --accent-hover: var(--navy-700); --accent-press: var(--navy-800); --accent-soft: var(--navy-50); --accent-border: rgba(28, 69, 120, 0.22); --accent-ink: var(--navy-700); --accent-on: #ffffff; /* Teal — aksen tipis. --accent-2 untuk bidang dekoratif (gradasi, stroke ikon); --accent-2-ink versi gelapnya untuk teks, karena #20B090 di atas putih hanya 2.3:1 dan tidak layak untuk huruf. */ --accent-2: var(--teal-400); --accent-2-ink: var(--teal-700); /* 5.28:1 pada putih */ --highlight: var(--teal-400); --highlight-soft: var(--teal-50); --highlight-ink: var(--teal-800); /* 7.11:1 pada --highlight-soft */ --star: var(--star-500); --success: var(--green-500); --success-soft: #ecfdf3; --danger: var(--red-500); --danger-soft: #fef2f2; --wa-on: #ffffff; /* Bayangan bernuansa navy. Bayangan hitam murni terlihat kotor di atas latar putih kebiruan. */ --shadow-sm: 0 1px 2px rgba(12, 32, 57, 0.05), 0 1px 3px rgba(12, 32, 57, 0.04); --shadow: 0 4px 14px -3px rgba(12, 32, 57, 0.09), 0 2px 6px -2px rgba(12, 32, 57, 0.05); --shadow-lg: 0 20px 44px -14px rgba(12, 32, 57, 0.18), 0 8px 18px -10px rgba(12, 32, 57, 0.10); --shadow-xl: 0 34px 70px -20px rgba(12, 32, 57, 0.24), 0 12px 26px -14px rgba(12, 32, 57, 0.12); --glow: 0 0 0 1px var(--accent-border), 0 18px 44px -18px rgba(28, 69, 120, 0.42); /* Kilau yang menyapu tombol saat disorot (animations.css). Putih bening, sengaja BUKAN warna merek: hijau WhatsApp tidak boleh bocor ke elemen lain, dan teal tidak boleh jadi bidang besar. */ --shine: rgba(255, 255, 255, 0.42); /* Gradasi merek: navy ke teal — persis perjalanan warna di dalam logo, dari puncak kurva yang gelap ke ekornya yang teal. */ --grad-brand: linear-gradient(112deg, var(--navy-700) 0%, var(--navy-500) 45%, var(--teal-400) 100%); --grad-teal: linear-gradient(112deg, var(--teal-600) 0%, var(--teal-400) 100%); --grad-fade: linear-gradient(180deg, transparent, var(--bg)); /* Pola simpul-jaringan di latar hero — mengacu ke layanan jaringan L2/L3. Warnanya ikut tema. */ --mesh-dot: rgba(28, 69, 120, 0.16); --mesh-line: rgba(32, 176, 144, 0.14); --overlay: rgba(8, 18, 33, 0.44); } /* ========================================================================= TEMA GELAP Bukan sekadar warna dibalik. Latarnya navy-arang (bukan hitam murni) supaya sewarna dengan logo, dan aksennya dicerahkan karena navy gelap mustahil lolos kontras di atas latar gelap. ========================================================================= */ :root[data-theme="dark"] { color-scheme: dark; --bg: var(--navy-950); --bg-subtle: #0a1119; --surface: #0d1727; --surface-2: #142235; --surface-3: #1c2e45; --surface-inv: #f4f7fb; --border: rgba(166, 195, 230, 0.12); --border-soft: rgba(166, 195, 230, 0.07); --border-strong: rgba(166, 195, 230, 0.22); --text: #e8eef7; /* 16.79:1 pada --bg */ --text-2: #9fafc4; /* 8.77:1 pada --bg */ --text-3: #8b9cb5; /* 4.93:1 bahkan pada --surface-3 */ --text-inv: var(--navy-900); --accent: var(--navy-300); /* 8.04:1 pada --bg */ --accent-hover: #9dbff0; --accent-press: var(--navy-200); --accent-soft: rgba(127, 168, 228, 0.14); --accent-border: rgba(127, 168, 228, 0.30); --accent-ink: var(--navy-200); --accent-on: #08172e; --accent-2: var(--teal-300); --accent-2-ink: var(--teal-300); /* 9.95:1 pada --bg */ --highlight: var(--teal-300); --highlight-soft: rgba(78, 205, 175, 0.13); --highlight-ink: var(--teal-200); --star: #fbbf24; --success: #34d399; --success-soft: rgba(52, 211, 153, 0.13); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.13); --wa-on: #04301a; /* Di tema gelap, kedalaman datang dari bayangan pekat plus garis tepi tipis yang lebih terang — bayangan saja tidak terlihat. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55); --shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.62); --shadow-lg: 0 24px 52px -16px rgba(0, 0, 0, 0.75); --shadow-xl: 0 38px 80px -22px rgba(0, 0, 0, 0.85); --glow: 0 0 0 1px var(--accent-border), 0 20px 52px -18px rgba(127, 168, 228, 0.45); --shine: rgba(255, 255, 255, 0.30); --grad-brand: linear-gradient(112deg, var(--navy-300) 0%, #9dbff0 40%, var(--teal-300) 100%); --grad-teal: linear-gradient(112deg, var(--teal-400) 0%, var(--teal-200) 100%); --grad-fade: linear-gradient(180deg, transparent, var(--bg)); --mesh-dot: rgba(127, 168, 228, 0.22); --mesh-line: rgba(78, 205, 175, 0.16); --overlay: rgba(2, 6, 13, 0.7); }