pkupuk
8ca609a889
Update Docker configurations, nginx setup, and shared design tokens. Refresh lockfile.
161 lines
4.4 KiB
CSS
161 lines
4.4 KiB
CSS
/**
|
|
* Design Tokens for enchun.tw
|
|
* Generated from branding.json
|
|
*/
|
|
|
|
:root {
|
|
/* ========================================
|
|
Color Tokens
|
|
======================================== */
|
|
|
|
/* Primary Colors */
|
|
--color-primary: #0000EE;
|
|
--color-accent: #23608C;
|
|
|
|
/* Background Colors */
|
|
--color-background: #F2F2F2;
|
|
--color-background-light: #FFFFFF;
|
|
--color-background-dark: #E5E5E5;
|
|
|
|
/* Text Colors */
|
|
--color-text-primary: #23608C;
|
|
--color-text-secondary: #666666;
|
|
--color-text-muted: #999999;
|
|
|
|
/* Link Colors */
|
|
--color-link: #23608C;
|
|
--color-link-hover: #1A4A6A;
|
|
--color-link-visited: #0000EE;
|
|
|
|
/* ========================================
|
|
Typography Tokens
|
|
======================================== */
|
|
|
|
/* Font Families */
|
|
--font-family-primary: 'Noto Sans TC', sans-serif;
|
|
--font-family-heading: 'Noto Sans TC', sans-serif;
|
|
--font-family-paragraph: 'Quicksand', sans-serif;
|
|
--font-family-body: 'Noto Sans TC', sans-serif;
|
|
|
|
/* Font Stacks (fallbacks included) */
|
|
--font-stack-body: 'Noto Sans TC', sans-serif;
|
|
--font-stack-heading: 'Noto Sans TC', sans-serif;
|
|
--font-stack-paragraph: 'Quicksand', sans-serif;
|
|
|
|
/* Font Sizes */
|
|
--font-size-h1: 64.41px;
|
|
--font-size-h2: 46px;
|
|
--font-size-h3: 32px;
|
|
--font-size-h4: 24px;
|
|
--font-size-body: 29.64px;
|
|
--font-size-small: 14px;
|
|
--font-size-xs: 12px;
|
|
|
|
/* Font Weights */
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
|
|
/* Line Heights */
|
|
--line-height-tight: 1.2;
|
|
--line-height-normal: 1.5;
|
|
--line-height-relaxed: 1.75;
|
|
|
|
/* ========================================
|
|
Spacing Tokens
|
|
======================================== */
|
|
|
|
/* Base Unit: 8px */
|
|
--spacing-unit: 8px;
|
|
|
|
/* Spacing Scale */
|
|
--spacing-0: 0;
|
|
--spacing-1: 8px; /* 1 unit */
|
|
--spacing-2: 16px; /* 2 units */
|
|
--spacing-3: 24px; /* 3 units */
|
|
--spacing-4: 32px; /* 4 units */
|
|
--spacing-5: 40px; /* 5 units */
|
|
--spacing-6: 48px; /* 6 units */
|
|
--spacing-8: 64px; /* 8 units */
|
|
--spacing-10: 80px; /* 10 units */
|
|
--spacing-12: 96px; /* 12 units */
|
|
--spacing-16: 128px; /* 16 units */
|
|
|
|
/* ========================================
|
|
Border Tokens
|
|
======================================== */
|
|
|
|
--border-radius-none: 0px;
|
|
--border-radius-sm: 4px;
|
|
--border-radius-md: 8px;
|
|
--border-radius-lg: 16px;
|
|
--border-radius-full: 9999px;
|
|
|
|
/* Default border radius from branding */
|
|
--border-radius: 0px;
|
|
|
|
--border-width-thin: 1px;
|
|
--border-width-medium: 2px;
|
|
--border-width-thick: 4px;
|
|
|
|
/* ========================================
|
|
Shadow Tokens
|
|
======================================== */
|
|
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
|
|
|
|
/* ========================================
|
|
Transition Tokens
|
|
======================================== */
|
|
|
|
--transition-fast: 150ms ease;
|
|
--transition-normal: 250ms ease;
|
|
--transition-slow: 400ms ease;
|
|
|
|
/* ========================================
|
|
Z-Index Tokens
|
|
======================================== */
|
|
|
|
--z-index-dropdown: 100;
|
|
--z-index-sticky: 200;
|
|
--z-index-fixed: 300;
|
|
--z-index-modal-backdrop: 400;
|
|
--z-index-modal: 500;
|
|
--z-index-popover: 600;
|
|
--z-index-tooltip: 700;
|
|
|
|
/* ========================================
|
|
Asset URLs
|
|
======================================== */
|
|
|
|
--url-logo: url('https://cdn.prod.website-files.com/61f24aa108528b1962942c95/61f24aa108528b3886942cba_enchun.svg');
|
|
--url-favicon: url('https://cdn.prod.website-files.com/61f24aa108528b1962942c95/6200ec44d8b8b96d8b782995_enchun%20ico-.png');
|
|
--url-og-image: url('https://cdn.prod.website-files.com/61f24aa108528b1962942c95/61f6972f64ea04254d02b655_Enchun%20digital%20marketing.png');
|
|
}
|
|
|
|
/* ========================================
|
|
Color Scheme: Light (default)
|
|
======================================== */
|
|
|
|
[data-theme="light"],
|
|
:root {
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* ========================================
|
|
Dark Mode Override (optional)
|
|
======================================== */
|
|
|
|
[data-theme="dark"] {
|
|
--color-background: #1a1a1a;
|
|
--color-background-light: #2d2d2d;
|
|
--color-background-dark: #0d0d0d;
|
|
--color-text-primary: #e0e0e0;
|
|
--color-text-secondary: #b0b0b0;
|
|
--color-text-muted: #808080;
|
|
}
|