/*! * AutoMedia Design System — Design Tokens * ---------------------------------------------------------------------- * Pure CSS custom properties. No build step, no preprocessor — every * value below is the final, computed value (a real design system would * generate this from a Sass/JS source; this project has no bundler, so * the scales are hand-computed once and hard-coded here instead). * * Theme switching: `@media (prefers-color-scheme: dark)` is the default * signal (auto dark mode); `[data-theme="dark"]` / `[data-theme="light"]` * on override it explicitly (set by ui-kit.js's theme toggle). * `[data-contrast="high"]` layers a high-contrast override on top of * whichever theme is active. */ /* --------------------------------------------------------------------- * 1. Font face — self-hosted Inter (variable, Latin subset only, ~48KB). * No external request at runtime (privacy + one less DNS/TLS * round-trip), no FOIT/FOUT gambling on a third-party CDN's uptime. * ------------------------------------------------------------------- */ @font-face { font-family: 'Inter var'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/inter-var-latin.woff2') format('woff2'); } /* --------------------------------------------------------------------- * 2. Primitive color scales — generated on a consistent HSL ramp, not * hand-picked hex. "Ink" (primary) is a deep indigo-blue, distinct * from the reflex-blue/red hues of Kompas/Detik/BBC; "Signal" (amber) * is reserved for live/breaking/highlight accents only, never body * text or large surfaces. * ------------------------------------------------------------------- */ :root { --ink-50: hsl(234, 100%, 97%); --ink-100: hsl(234, 89%, 94%); --ink-200: hsl(234, 84%, 88%); --ink-300: hsl(234, 80%, 78%); --ink-400: hsl(234, 74%, 66%); --ink-500: hsl(234, 69%, 56%); --ink-600: hsl(234, 66%, 47%); --ink-700: hsl(234, 64%, 39%); --ink-800: hsl(234, 60%, 31%); --ink-900: hsl(234, 55%, 22%); --ink-950: hsl(234, 55%, 13%); --signal-50: hsl(38, 100%, 96%); --signal-100: hsl(38, 97%, 89%); --signal-200: hsl(38, 96%, 79%); --signal-300: hsl(38, 95%, 68%); --signal-400: hsl(36, 94%, 60%); --signal-500: hsl(34, 93%, 54%); --signal-600: hsl(30, 90%, 47%); --signal-700: hsl(26, 88%, 39%); --signal-800: hsl(23, 83%, 32%); --signal-900: hsl(21, 78%, 26%); --gray-0: hsl(0, 0%, 100%); --gray-50: hsl(225, 25%, 98%); --gray-100: hsl(225, 20%, 95%); --gray-200: hsl(224, 17%, 91%); --gray-300: hsl(224, 14%, 83%); --gray-400: hsl(222, 11%, 65%); --gray-500: hsl(222, 10%, 49%); --gray-600: hsl(223, 12%, 38%); --gray-700: hsl(224, 15%, 28%); --gray-800: hsl(225, 20%, 18%); --gray-900: hsl(226, 26%, 11%); --gray-950: hsl(228, 32%, 6%); --gray-1000: hsl(0, 0%, 0%); --green-50: hsl(152, 68%, 95%); --green-500: hsl(152, 60%, 36%); --green-600: hsl(152, 64%, 29%); --green-900: hsl(152, 55%, 14%); --amber-50: hsl(45, 100%, 95%); --amber-500: hsl(38, 92%, 50%); --amber-600: hsl(32, 90%, 43%); --amber-900: hsl(28, 70%, 18%); --red-50: hsl(357, 100%, 97%); --red-500: hsl(357, 76%, 50%); --red-600: hsl(357, 72%, 42%); --red-900: hsl(357, 55%, 20%); --blue-50: hsl(205, 100%, 96%); --blue-500: hsl(205, 85%, 48%); --blue-600: hsl(205, 80%, 40%); --blue-900: hsl(205, 60%, 18%); } /* --------------------------------------------------------------------- * 3. Semantic tokens — everything components actually consume. Only * this layer changes between themes; the primitive scale above never * does. Light mode is the default (no selector needed). * ------------------------------------------------------------------- */ :root { color-scheme: light; --color-bg: var(--gray-0); --color-bg-subtle: var(--gray-50); --color-surface: var(--gray-0); --color-surface-raised: var(--gray-0); --color-border: var(--gray-200); --color-border-strong: var(--gray-300); --color-text: var(--gray-900); --color-text-secondary: var(--gray-600); --color-text-tertiary: var(--gray-500); --color-text-on-primary: var(--gray-0); --color-text-link: var(--ink-600); --color-primary: var(--ink-600); --color-primary-hover: var(--ink-700); --color-primary-subtle: var(--ink-50); --color-primary-subtle-text: var(--ink-700); --color-accent: var(--signal-500); --color-accent-hover: var(--signal-600); --color-accent-subtle: var(--signal-50); --color-accent-subtle-text: var(--signal-800); --color-success: var(--green-600); --color-success-subtle: var(--green-50); --color-success-subtle-text: var(--green-900); --color-warning: var(--amber-600); --color-warning-subtle: var(--amber-50); --color-warning-subtle-text: var(--amber-900); --color-danger: var(--red-600); --color-danger-subtle: var(--red-50); --color-danger-subtle-text: var(--red-900); --color-info: var(--blue-600); --color-info-subtle: var(--blue-50); --color-info-subtle-text: var(--blue-900); --color-focus-ring: var(--ink-500); --color-overlay: hsl(226, 26%, 11%, 0.5); --shadow-color: 220 40% 8%; --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.06); --shadow-sm: 0 1px 3px hsl(var(--shadow-color) / 0.10), 0 1px 2px hsl(var(--shadow-color) / 0.06); --shadow-md: 0 4px 8px -2px hsl(var(--shadow-color) / 0.10), 0 2px 4px -2px hsl(var(--shadow-color) / 0.06); --shadow-lg: 0 12px 20px -6px hsl(var(--shadow-color) / 0.12), 0 4px 8px -4px hsl(var(--shadow-color) / 0.06); --shadow-xl: 0 20px 32px -10px hsl(var(--shadow-color) / 0.16), 0 8px 12px -6px hsl(var(--shadow-color) / 0.08); } /* Auto dark mode — respects OS preference when no explicit choice made. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-bg: var(--gray-950); --color-bg-subtle: var(--gray-900); --color-surface: var(--gray-900); --color-surface-raised: var(--gray-800); --color-border: var(--gray-800); --color-border-strong: var(--gray-700); --color-text: var(--gray-50); --color-text-secondary: var(--gray-400); --color-text-tertiary: var(--gray-500); --color-text-on-primary: var(--gray-0); --color-text-link: var(--ink-300); /* ink-500, not ink-400 (Tahap 9 fix): ink-400 vs white text measures ~3.96:1, under WCAG AA's 4.5:1 for normal-size text — every .btn-primary/.pagination active state in dark mode was failing. ink-500 measures ~6.1:1 vs white, ~3.2:1 vs the dark page background (still clears the 3:1 UI-component-contrast floor), the best point in this 10-step scale for a background color that must carry white text AND stay visible on a dark surface. */ --color-primary: var(--ink-500); --color-primary-hover: var(--ink-400); --color-primary-subtle: var(--ink-950); --color-primary-subtle-text: var(--ink-200); --color-accent: var(--signal-400); --color-accent-hover: var(--signal-300); --color-accent-subtle: hsl(38, 60%, 14%); --color-accent-subtle-text: var(--signal-200); --color-success-subtle: var(--green-900); --color-success-subtle-text: var(--green-50); --color-warning-subtle: var(--amber-900); --color-warning-subtle-text: var(--amber-50); --color-danger-subtle: var(--red-900); --color-danger-subtle-text: var(--red-50); --color-info-subtle: var(--blue-900); --color-info-subtle-text: var(--blue-50); --color-focus-ring: var(--ink-300); --color-overlay: hsl(228, 32%, 3%, 0.65); --shadow-color: 220 60% 2%; --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.4); --shadow-sm: 0 1px 3px hsl(var(--shadow-color) / 0.5), 0 1px 2px hsl(var(--shadow-color) / 0.4); --shadow-md: 0 4px 8px -2px hsl(var(--shadow-color) / 0.5), 0 2px 4px -2px hsl(var(--shadow-color) / 0.4); --shadow-lg: 0 12px 20px -6px hsl(var(--shadow-color) / 0.55), 0 4px 8px -4px hsl(var(--shadow-color) / 0.4); --shadow-xl: 0 20px 32px -10px hsl(var(--shadow-color) / 0.6), 0 8px 12px -6px hsl(var(--shadow-color) / 0.45); } } /* Explicit manual override (theme toggle sets data-theme on ). */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: var(--gray-950); --color-bg-subtle: var(--gray-900); --color-surface: var(--gray-900); --color-surface-raised: var(--gray-800); --color-border: var(--gray-800); --color-border-strong: var(--gray-700); --color-text: var(--gray-50); --color-text-secondary: var(--gray-400); --color-text-tertiary: var(--gray-500); --color-text-on-primary: var(--gray-0); --color-text-link: var(--ink-300); /* Kept identical to the prefers-color-scheme block above (same Tahap 9 fix, ink-500/ink-400 not ink-400/ink-300) — the two dark-mode entry points must never drift apart. */ --color-primary: var(--ink-500); --color-primary-hover: var(--ink-400); --color-primary-subtle: var(--ink-950); --color-primary-subtle-text: var(--ink-200); --color-accent: var(--signal-400); --color-accent-hover: var(--signal-300); --color-accent-subtle: hsl(38, 60%, 14%); --color-accent-subtle-text: var(--signal-200); --color-success-subtle: var(--green-900); --color-success-subtle-text: var(--green-50); --color-warning-subtle: var(--amber-900); --color-warning-subtle-text: var(--amber-50); --color-danger-subtle: var(--red-900); --color-danger-subtle-text: var(--red-50); --color-info-subtle: var(--blue-900); --color-info-subtle-text: var(--blue-50); --color-focus-ring: var(--ink-300); --color-overlay: hsl(228, 32%, 3%, 0.65); --shadow-color: 220 60% 2%; --shadow-xs: 0 1px 2px hsl(var(--shadow-color) / 0.4); --shadow-sm: 0 1px 3px hsl(var(--shadow-color) / 0.5), 0 1px 2px hsl(var(--shadow-color) / 0.4); --shadow-md: 0 4px 8px -2px hsl(var(--shadow-color) / 0.5), 0 2px 4px -2px hsl(var(--shadow-color) / 0.4); --shadow-lg: 0 12px 20px -6px hsl(var(--shadow-color) / 0.55), 0 4px 8px -4px hsl(var(--shadow-color) / 0.4); --shadow-xl: 0 20px 32px -10px hsl(var(--shadow-color) / 0.6), 0 8px 12px -6px hsl(var(--shadow-color) / 0.45); } /* High contrast — layers on top of whichever theme (light or dark) is active. Flattens subtle tints to solid borders/text, widens focus rings — WCAG 2.1 AAA-leaning, for users who enable it explicitly. */ :root[data-contrast="high"] { --color-border: var(--color-border-strong); } :root[data-contrast="high"]:not([data-theme="dark"]) { --color-text: var(--gray-1000); --color-text-secondary: var(--gray-900); --color-border-strong: var(--gray-1000); } :root[data-theme="dark"][data-contrast="high"] { --color-text: var(--gray-0); --color-text-secondary: var(--gray-50); --color-border-strong: var(--gray-0); } @media (prefers-contrast: more) { :root:not([data-contrast="low"]) { --color-border: var(--color-border-strong); } } /* --------------------------------------------------------------------- * 4. Typography scale * ------------------------------------------------------------------- */ :root { --font-sans: 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, monospace; --text-xs: 0.75rem; --leading-xs: 1rem; --text-sm: 0.875rem; --leading-sm: 1.375rem; --text-base: 1rem; --leading-base: 1.65rem; --text-lg: 1.125rem; --leading-lg: 1.75rem; --text-xl: 1.25rem; --leading-xl: 1.875rem; --text-2xl: 1.5rem; --leading-2xl: 2rem; --text-3xl: 1.875rem; --leading-3xl: 2.25rem; --text-4xl: 2.25rem; --leading-4xl: 2.5rem; --text-5xl: 3rem; --leading-5xl: 1.1; --text-6xl: 3.75rem; --leading-6xl: 1.05; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; } /* --------------------------------------------------------------------- * 5. Spacing (4px base unit) * ------------------------------------------------------------------- */ :root { --space-0: 0; --space-px: 1px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; } /* --------------------------------------------------------------------- * 6. Radius, borders, motion, layering, container widths * ------------------------------------------------------------------- */ :root { --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; --border-width: 1px; --border-width-thick: 2px; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-instant: 80ms; --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 340ms; --duration-slower: 500ms; --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-overlay: 1040; --z-modal: 1050; --z-toast: 1060; --z-tooltip: 1070; --z-skip-link: 1080; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-article: 42rem; --container-wide: 1440px; /* Sticky bottom nav's own height (mobile only) — a real, named constant so anything else that's also fixed to the bottom on mobile (article.css's .floating-actions) can stack itself above it instead of overlapping. */ --bottom-nav-height: 60px; } /* Respect the user's OS-level motion preference — every transition/ animation in components.css keys off this same mechanism. */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } } /* --------------------------------------------------------------------- * 7. Base reset + global element styling * ------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-base); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard); } img, picture, video, canvas, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--font-bold); letter-spacing: var(--tracking-tight); } p { margin: 0; } ul, ol { margin: 0; padding: 0; } /* Skip-to-content link — first focusable element on every page. */ .skip-link { position: absolute; top: -100%; left: var(--space-4); z-index: var(--z-skip-link); padding: var(--space-3) var(--space-5); background: var(--color-primary); color: var(--color-text-on-primary); border-radius: var(--radius-md); font-weight: var(--font-semibold); transition: top var(--duration-fast) var(--ease-decelerate); } .skip-link:focus { top: var(--space-4); } /* Consistent, visible focus ring everywhere — never `outline: none` without a replacement (WCAG 2.4.7). Uses :focus-visible so mouse clicks don't show a ring, only keyboard/AT navigation does. */ :focus { outline: none; } :focus-visible { outline: var(--border-width-thick) solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background: var(--color-primary-subtle); color: var(--color-primary-subtle-text); } /* Visually-hidden-but-screen-reader-visible utility (ARIA labels, etc.) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }