c955792497
- Complete Next.js 16 app with App Router: Home, About, Products, Contact, Privacy pages - Product detail pages: ZappCare, Unified TMS, EMR Clinic - Bilingual support (Indonesian/English) via LanguageContext + translations.ts - Language switcher pill button (🇮🇩 ID / 🇬🇧 EN) in Navbar with localStorage persistence - Navbar with logo, responsive mobile menu, translated nav links - Contact form with captcha, server action email sending, translated labels - Material Design 3 color tokens, Manrope + Inter fonts, Material Symbols icons - Local product image assets and company logo Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
98 lines
2.9 KiB
CSS
98 lines
2.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--primary: #004cca;
|
|
--primary-container: #0062ff;
|
|
--on-primary: #ffffff;
|
|
--on-primary-fixed: #00174b;
|
|
--primary-fixed: #dbe1ff;
|
|
--primary-fixed-dim: #b4c5ff;
|
|
--inverse-primary: #b4c5ff;
|
|
|
|
--secondary: #495f84;
|
|
--on-secondary: #ffffff;
|
|
--secondary-container: #bcd2fe;
|
|
--on-secondary-container: #445a7f;
|
|
|
|
--tertiary: #005f75;
|
|
--on-tertiary: #ffffff;
|
|
--tertiary-container: #007995;
|
|
--on-tertiary-container: #e3f6ff;
|
|
|
|
--surface: #f7f9fb;
|
|
--surface-dim: #d8dadc;
|
|
--surface-bright: #f7f9fb;
|
|
--surface-container-lowest: #ffffff;
|
|
--surface-container-low: #f2f4f6;
|
|
--surface-container: #eceef0;
|
|
--surface-container-high: #e6e8ea;
|
|
--surface-container-highest: #e0e3e5;
|
|
--on-surface: #191c1e;
|
|
--on-surface-variant: #424656;
|
|
|
|
--outline: #737687;
|
|
--outline-variant: #c2c6d9;
|
|
|
|
--inverse-surface: #2d3133;
|
|
--inverse-on-surface: #eff1f3;
|
|
|
|
--error: #ba1a1a;
|
|
--on-error: #ffffff;
|
|
--error-container: #ffdad6;
|
|
|
|
--background: #f7f9fb;
|
|
--on-background: #191c1e;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-primary: var(--primary);
|
|
--color-primary-container: var(--primary-container);
|
|
--color-on-primary: var(--on-primary);
|
|
--color-on-primary-fixed: var(--on-primary-fixed);
|
|
--color-primary-fixed: var(--primary-fixed);
|
|
--color-primary-fixed-dim: var(--primary-fixed-dim);
|
|
--color-inverse-primary: var(--inverse-primary);
|
|
|
|
--color-secondary: var(--secondary);
|
|
--color-on-secondary: var(--on-secondary);
|
|
--color-secondary-container: var(--secondary-container);
|
|
--color-on-secondary-container: var(--on-secondary-container);
|
|
|
|
--color-tertiary: var(--tertiary);
|
|
--color-on-tertiary: var(--on-tertiary);
|
|
--color-tertiary-container: var(--tertiary-container);
|
|
--color-on-tertiary-container: var(--on-tertiary-container);
|
|
|
|
--color-surface: var(--surface);
|
|
--color-surface-dim: var(--surface-dim);
|
|
--color-surface-bright: var(--surface-bright);
|
|
--color-surface-container-lowest: var(--surface-container-lowest);
|
|
--color-surface-container-low: var(--surface-container-low);
|
|
--color-surface-container: var(--surface-container);
|
|
--color-surface-container-high: var(--surface-container-high);
|
|
--color-surface-container-highest: var(--surface-container-highest);
|
|
--color-on-surface: var(--on-surface);
|
|
--color-on-surface-variant: var(--on-surface-variant);
|
|
|
|
--color-outline: var(--outline);
|
|
--color-outline-variant: var(--outline-variant);
|
|
|
|
--color-inverse-surface: var(--inverse-surface);
|
|
--color-inverse-on-surface: var(--inverse-on-surface);
|
|
|
|
--color-error: var(--error);
|
|
--color-on-error: var(--on-error);
|
|
--color-error-container: var(--error-container);
|
|
|
|
--color-background: var(--background);
|
|
--color-on-background: var(--on-background);
|
|
|
|
--font-headline: "Manrope", sans-serif;
|
|
--font-body: "Inter", sans-serif;
|
|
}
|
|
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|