/* ============================================================ ILLUVIA · Design Tokens (CSS Custom Properties) ------------------------------------------------------------ File ini adalah "palet warna & ukuran" untuk seluruh website. Semua file CSS lain akan mengambil nilai dari sini. Cara pakai di CSS lain: background: var(--color-navy); color: var(--color-blue-primary); padding: var(--space-6); Edit di sini = otomatis berubah di seluruh website. ============================================================ */ :root { /* ────────────────────────────────────────────────────────── 1. WARNA BRAND (Primary palette) ────────────────────────────────────────────────────────── */ /* Navy — warna dominan untuk hero, footer, info bar */ --color-navy: #0d1f3c; --color-navy-light: #1a2f52; /* untuk border/hover di area navy */ /* Blue — warna aksen utama untuk tombol & link */ --color-blue-primary: #1d4ed8; /* blue-700 · CTA utama */ --color-blue-hover: #1e40af; /* blue-800 · hover state */ --color-blue-bright: #2563eb; /* blue-600 · variant terang */ --color-blue-accent: #3b82f6; /* blue-500 */ --color-blue-muted: #60a5fa; /* blue-400 · teks aksen di bg gelap */ --color-blue-soft: #93c5fd; /* blue-300 */ --color-blue-pale: #dbeafe; /* blue-100 · icon background */ --color-blue-50: #eff6ff; /* blue-50 · hover badge */ /* ────────────────────────────────────────────────────────── 2. NETRAL (Putih, Hitam, Abu-abu) ────────────────────────────────────────────────────────── */ --color-white: #ffffff; --color-black: #000000; --color-gray-50: #f9fafb; /* background section */ --color-gray-100: #f3f4f6; /* card border */ --color-gray-200: #e5e7eb; /* input border */ --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; /* placeholder, icon mati */ --color-gray-500: #6b7280; /* teks paragraf muted */ --color-gray-600: #4b5563; --color-gray-700: #374151; /* teks paragraf normal */ --color-gray-900: #111827; /* teks heading */ /* ────────────────────────────────────────────────────────── 3. WARNA FUNGSIONAL (Status & Aksi) ────────────────────────────────────────────────────────── */ /* WhatsApp branding */ --color-wa-green: #25d366; /* tombol WhatsApp */ --color-wa-green-hover: #20bd5a; --color-wa-dark: #075e54; /* card WhatsApp di Contact */ /* Status colors */ --color-success: #22c55e; /* green-500 · centang */ --color-success-light: #f0fdf4; /* green-50 · alert sukses */ --color-success-dark: #166534; /* teks alert sukses */ --color-error: #ef4444; --color-warning: #f59e0b; /* ────────────────────────────────────────────────────────── 4. PEMETAAN SEMANTIC (Untuk konsistensi penggunaan) ────────────────────────────────────────────────────────── */ /* Background */ --bg-page: var(--color-white); --bg-section-light: var(--color-gray-50); --bg-section-dark: var(--color-navy); --bg-card: var(--color-white); /* Text */ --text-heading: var(--color-gray-900); --text-body: var(--color-gray-700); --text-muted: var(--color-gray-500); --text-on-dark: var(--color-white); --text-link: var(--color-blue-primary); --text-link-hover: var(--color-blue-hover); /* Border */ --border-light: var(--color-gray-100); --border-default: var(--color-gray-200); --border-on-dark: rgba(255, 255, 255, 0.15); /* ────────────────────────────────────────────────────────── 5. TYPOGRAPHY (Font, Ukuran, Weight) ────────────────────────────────────────────────────────── */ /* Font family — Lato di-load dari Google Fonts via header */ --font-primary: 'Lato', system-ui, -apple-system, sans-serif; --font-mono: 'Courier New', monospace; /* Font weight */ --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 900; /* Font size — mobile-first, akan di-scale up via media query */ --fs-xs: 0.75rem; /* 12px · label, tag, caption */ --fs-sm: 0.875rem; /* 14px · teks paragraf */ --fs-base: 1rem; /* 16px · teks normal */ --fs-lg: 1.125rem; /* 18px · subheadline */ --fs-xl: 1.25rem; /* 20px · heading kecil */ --fs-2xl: 1.5rem; /* 24px · h3 */ --fs-3xl: 1.875rem; /* 30px · h2 mobile */ --fs-4xl: 2.25rem; /* 36px · h2 desktop */ --fs-5xl: 3rem; /* 48px · h1 mobile / hero */ --fs-6xl: 3.75rem; /* 60px · hero desktop */ --fs-7xl: 4.5rem; /* 72px · hero large */ /* Line height */ --lh-tight: 1.1; /* untuk heading hero */ --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.625; /* untuk paragraf panjang */ /* Letter spacing */ --ls-tight: -0.025em; /* heading besar */ --ls-normal: 0; --ls-wide: 0.05em; --ls-widest: 0.15em; /* untuk teks UPPERCASE label */ /* ────────────────────────────────────────────────────────── 6. SPACING (Padding, Margin, Gap) ────────────────────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px · container padding */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px · section padding (mobile) */ --space-24: 6rem; /* 96px · section padding (desktop) */ --space-32: 8rem; /* 128px */ /* ────────────────────────────────────────────────────────── 7. LAYOUT (Container, Breakpoint reference) ────────────────────────────────────────────────────────── */ --container-max: 1280px; /* lebar maksimum konten */ --container-pad: 1.5rem; /* padding kiri-kanan default */ /* Breakpoint reference (bukan variabel CSS yang aktif — hanya catatan untuk media query). CSS variables tidak bisa dipakai di @media, jadi angka ini harus ditulis ulang di setiap @media. */ /* sm: 640px · landscape phone */ /* md: 768px · tablet */ /* lg: 1024px · desktop */ /* xl: 1280px · large desktop */ /* ────────────────────────────────────────────────────────── 8. BORDER RADIUS (Sudut membulat) ────────────────────────────────────────────────────────── */ --radius-sm: 0.375rem; /* 6px · badge kecil */ --radius: 0.5rem; /* 8px · button kecil, tag */ --radius-lg: 0.75rem; /* 12px · button, input */ --radius-xl: 1rem; /* 16px · card */ --radius-2xl: 1.5rem; /* 24px · large card, hero element */ --radius-full: 9999px; /* pill / circle */ /* ────────────────────────────────────────────────────────── 9. SHADOW (Bayangan) ────────────────────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04); --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04); --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15); /* Shadow khusus untuk tombol biru (glow) */ --shadow-blue: 0 10px 25px -5px rgba(29, 78, 216, 0.35); /* ────────────────────────────────────────────────────────── 10. TRANSITION (Animasi) ────────────────────────────────────────────────────────── */ --transition-fast: 150ms ease; --transition: 200ms ease; --transition-slow: 300ms ease; --transition-slower: 500ms ease; /* ────────────────────────────────────────────────────────── 11. Z-INDEX (Layering) ────────────────────────────────────────────────────────── */ --z-dropdown: 10; --z-sticky: 20; --z-header: 50; /* navbar */ --z-overlay: 100; /* mobile menu, modal backdrop */ --z-modal: 110; --z-floating-cta: 90; /* floating WhatsApp button */ /* ────────────────────────────────────────────────────────── 12. HEIGHTS — Bagian fixed (header, dll) ────────────────────────────────────────────────────────── */ --header-info-bar: 36px; /* top info bar (desktop only) */ --header-main: 64px; /* main navbar */ --header-total-desktop: 100px; /* gabungan info + main bar */ --header-total-mobile: 64px; /* hanya main bar di mobile */ } /* ============================================================ CATATAN UNTUK CMS WORDPRESS NANTI ------------------------------------------------------------ Variabel berikut nantinya bisa dijadikan setting di WordPress Customizer (Anda bisa ubah dari dashboard WP tanpa harus edit CSS): - --color-blue-primary → "Primary Brand Color" - --color-navy → "Header/Footer Background Color" - --font-primary → "Heading & Body Font" - --container-max → "Content Max Width" Fitur ini akan kita tambahkan di tahap WordPress. ============================================================ */