/* ============================================================ lanka.net — DESIGN TOKENS Sumber tunggal: senesa-multi-domain-serp-strategy.md bagian 32 Ditegakkan oleh: CLAUDE.md Aturan Keras no. 6 Arah: "trading desk / export house" — terasa perusahaan dagang, bukan brand produk. Padat, dokumen-sentris, grid tegas. TIGA LARANGAN YANG HIDUP DI FILE INI 1. #f4f1e8 (identitas cocoexportindo) dan #17281f (identitas galangalsupplier) DILARANG jadi tema. Keduanya hanya boleh muncul sebagai label divisi kecil di kartu produk (C3) — lihat blok 9. 2. Nol impor CSS/token dari repo cocoexportindo atau galangalsupplier (bagian 29 poin 4). Semua nilai di bawah ditulis dari nol. 3. Sudut tajam / radius kecil. Tidak ada card membulat besar ala SaaS — radius maksimum di sistem ini 4px, dan itu pun batas atas. ============================================================ */ :root { /* --- 1. Palet dasar: charcoal-navy ------------------------- #0f1b2d dan #111827 adalah dua nilai dasar yang disebut bagian 32. Sisanya turunan untuk border, muted, dan hover. */ --c-navy-950: #0a1220; --c-navy-900: #0f1b2d; /* dasar terdalam — footer, hero inverse */ --c-navy-800: #111827; /* dasar utama — header sticky */ --c-navy-700: #1c2a3f; --c-navy-600: #2a3a52; --c-navy-500: #46566e; /* JANGAN pakai --c-navy-400 sebagai warna TEKS di atas latar gelap: 4.06:1 di atas --bg-inverse dan 3.96:1 di atas --bg-inverse-deep — keduanya gagal AA. Untuk teks redup di latar gelap pakai --text-inverse-muted (6.94:1 / 6.76:1). Token ini aman untuk border dan teks di atas latar terang. */ --c-navy-400: #6b7a90; --c-navy-300: #97a3b4; --c-navy-200: #c3cad4; --c-navy-100: #e3e7ec; /* --- 2. Aksen brass/amber --------------------------------- Jembatan hangat antara krem coir dan hijau galangal. Dipakai hemat: CTA utama, nomor seksi, rule aksen. */ --c-brass-700: #8a6220; --c-brass-600: #a97a2b; --c-brass-500: #c8933a; /* nilai kanonik bagian 32 */ --c-brass-400: #d8ab5f; --c-brass-200: #ecd4a8; --c-brass-100: #f6ebd8; /* --- 3. Netral terang ------------------------------------- */ --c-paper: #fafaf7; /* background kanonik bagian 32 */ --c-white: #ffffff; --c-sand-100: #f2f2ed; /* zebra row, surface alternatif */ --c-sand-200: #e6e6df; --c-sand-300: #d6d6cc; /* border di atas terang */ /* --- 4. Warna status (dipakai hanya untuk state form) ----- Sengaja tanpa hijau gelap: rentang itu milik galangalsupplier. */ --c-danger: #a3261f; --c-danger-bg: #fbeceb; /* --- 5. Token semantik — pakai INI di main.css ------------- */ --bg-page: var(--c-paper); --bg-surface: var(--c-white); --bg-subtle: var(--c-sand-100); --bg-inverse: var(--c-navy-800); --bg-inverse-deep:var(--c-navy-900); --text-primary: var(--c-navy-900); --text-secondary: var(--c-navy-600); --text-muted: var(--c-navy-500); --text-inverse: #f4f6f8; --text-inverse-muted: var(--c-navy-300); --border-subtle: var(--c-sand-300); --border-strong: var(--c-navy-900); --border-inverse: var(--c-navy-600); --accent: var(--c-brass-500); --accent-hover: var(--c-brass-600); --accent-text: var(--c-brass-700); /* brass di atas latar terang, kontras aman */ --accent-tint: var(--c-brass-100); /* Indikator fokus wajib >= 3:1 terhadap warna di sekitarnya (WCAG 2.2 SC 1.4.11). --c-brass-500 hanya 2.31–2.73:1 di atas semua permukaan terang, jadi TIDAK dipakai di sini meski itu warna aksen. brass-700 mencapai 4.62:1 pada kasus terburuk dan tetap brass, jadi identitas visual tidak berubah jadi outline tinta generik. Versi inverse dipakai di dalam seksi gelap — lihat main.css. */ --focus-ring: var(--c-brass-700); /* 4.62–5.46:1 di permukaan terang */ --focus-ring-inverse: var(--c-brass-400); /* 8.16–8.37:1 di permukaan gelap */ /* --- 6. Tipografi ----------------------------------------- Display grotesque untuk heading, humanist sans untuk body, monospace untuk SEMUA angka spec/harga/MOQ/nomor dokumen — aksen mono inilah yang membangun rasa "trading desk" (bagian 32 + CLAUDE.md aturan 6). Font di-self-host saat aset tersedia; sampai saat itu stack di bawah jatuh ke font sistem yang karakternya sepadan. Dilarang memuat font dari CDN pihak ketiga. */ --font-display: "Archivo", "Space Grotesk", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", 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; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Skala tipe — dipadatkan satu tingkat dari skala web umum. Body 15px, bukan 16px: halaman ini dokumen, bukan artikel. */ --fs-3xs: 0.6875rem; /* 11px — eyebrow, label divisi, nomor seksi */ --fs-2xs: 0.75rem; /* 12px — caption, footnote */ --fs-xs: 0.8125rem; /* 13px — sel tabel, meta */ --fs-sm: 0.875rem; /* 14px — UI, nav, tombol */ --fs-base:0.9375rem; /* 15px — body */ --fs-md: 1rem; --fs-lg: 1.125rem; /* 18px — intro/lead */ --fs-xl: 1.375rem; /* 22px — H3 */ --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem); /* H2 */ --fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.5rem); /* H1 dalam */ --fs-4xl: clamp(2.25rem, 1.5rem + 3.2vw, 3.25rem); /* H1 hero */ --lh-tight: 1.15; --lh-heading: 1.22; --lh-snug: 1.4; --lh-body: 1.62; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-caps: 0.09em; /* eyebrow & label uppercase */ /* --- 7. Spasi — basis 4px --------------------------------- */ --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(2.75rem, 1.5rem + 4vw, 5rem); /* --- 8. Garis, radius, bayangan --------------------------- Radius kecil adalah keputusan identitas, bukan selera. */ --bw-hair: 1px; --bw-thick: 2px; --bw-rule: 3px; /* rule aksen di bawah heading seksi */ --r-none: 0; --r-xs: 2px; --r-sm: 3px; --r-md: 4px; /* batas atas — jangan lampaui */ --sh-flat: 0 1px 0 rgba(15, 27, 45, 0.06); --sh-raise: 0 2px 8px rgba(15, 27, 45, 0.10); --sh-panel: 0 12px 32px rgba(10, 18, 32, 0.24); /* --- 9. Penanda divisi — PEMAKAIAN DIBATASI --------------- Bagian 32: "Kedua warna divisi boleh muncul HANYA sebagai label kecil pada kartu produk masing-masing divisi — jadi sistem penanda, bukan tema." Boleh dipakai HANYA oleh .c3-card__division di komponen C3 (dan label divisi setara di C11). DILARANG untuk background section, header, footer, hero, tombol, atau border besar. PASANGAN COIR DIHAPUS 11 Agustus 2026 (audit QA P2). Divisi coir tidak ada lagi sejak pivot galangal-only — coir 100% milik cocoexportindo.com — jadi --division-coir-* adalah kode mati yang menahan #f4f1e8, warna identitas mereka, di stylesheet kita tanpa satu pun pemakaian yang sah. Diverifikasi nol tercat. Pasangan spice DIPERTAHANKAN: 'spice' masih ada di DIVISIONS, dan keempat komponen berlabel (C1, C3, C9, C11) merendernya kembali sendiri begitu DIVISIONS berisi lebih dari satu entri. Kalau divisi kedua ditambahkan nanti, definisikan pasangan warnanya DI SINI lebih dulu — tanpa itu tag-nya lahir tanpa gaya. */ --division-spice-bg: #17281f; /* galangalsupplier — LABEL SAJA */ --division-spice-text: #e9f0ea; /* --- 10. Layout ------------------------------------------- */ --container-max: 1200px; --container-narrow: 760px; --container-pad: clamp(1rem, 4vw, 2.5rem); --header-h: 60px; /* --- 11. Lapisan ------------------------------------------ */ --z-base: 1; --z-sticky: 100; --z-wa: 150; --z-overlay: 190; --z-panel: 200; /* --- 12. Gerak -------------------------------------------- */ --dur-fast: 120ms; --dur-base: 200ms; --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); } /* Hormati preferensi sistem — CWV/aksesibilitas, SEO addendum bagian 14. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; } } /* ============================================================ FONT DISPLAY — Archivo, self-hosted Bagian 32 meminta "display grotesque tegas (Archivo/Space Grotesk atau setara self-hosted)". SATU file untuk semua bobot. Archivo adalah variable font, jadi sumbu wght melayani 600 (heading, tombol, label) dan 700 (wordmark, angka proof bar) dari berkas yang sama — 34 KB total, bukan dua berkas statis. Subset: latin saja. Konten situs English; latin-ext dan vietnamese tidak terpakai dan hanya menambah unduhan. Satu konsekuensi yang disengaja: glif panah ↗ (U+2197) di luar subset dan jatuh ke font sistem — semua kemunculannya aria-hidden dan dekoratif, jadi tidak ada makna yang hilang. font-display: swap wajib (SEO addendum bagian 14 poin 3) — teks terbaca memakai font sistem sejak render pertama, lalu ditukar. Tanpa ini heading tak terlihat sampai font selesai diunduh. Lisensi: SIL Open Font License 1.1, teks lengkap di assets/fonts/OFL-Archivo.txt. Boleh di-self-host dan didistribusikan bersama situs. DILARANG menggantinya dengan tautan CDN. Selain melanggar aturan "nol media/skrip host lain", font pihak ketiga menambah koneksi yang menghambat LCP. ============================================================ */ @font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-var.woff2") format("woff2-variations"), url("/assets/fonts/archivo-latin-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 100%; font-style: normal; font-display: swap; } /* ============================================================ FONT MONO — JetBrains Mono, self-hosted Bagian 32: monospace untuk angka spec, harga, MOQ, dan nomor dokumen — "aksen mono ini yang membangun rasa trading desk". Kenapa ini layak 31 KB: sebelum di-self-host, angka spec memakai monospace bawaan sistem, jadi identitas angka berubah menurut perangkat buyer — Consolas di Windows, SF Mono di macOS, Liberation Mono di Linux. Elemen yang justru paling menandai identitas situs ini adalah elemen yang paling tidak konsisten. Sekarang seragam. Variable font juga: satu berkas melayani 400 (sel tabel), 500 (spec kartu produk), dan 700 (angka proof bar). Subset latin saja — angka, satuan, × dan – semuanya di dalamnya. TIDAK dipreload, berbeda dari Archivo. Mono hampir tidak pernah muncul di viewport pertama (H1 dan intro memakai display/body), jadi memprioritaskannya justru merebut bandwidth dari LCP. font-display: swap membuat angka tetap terbaca memakai monospace sistem sampai berkas ini tiba. Lisensi: SIL Open Font License 1.1, teks lengkap di assets/fonts/OFL-JetBrainsMono.txt. ============================================================ */ @font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-latin-var.woff2") format("woff2-variations"), url("/assets/fonts/jetbrains-mono-latin-var.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }