/* * Team Portal — Design Tokens * Version: 2.0 (Warm Tech) * * HOW TO USE: * 1. Import this file at the top of your main CSS/SCSS * 2. Replace hardcoded color/spacing values with these variables * 3. This file is STYLE-ONLY — do not change any JS logic or HTML structure * * Import: @import url('./design-tokens.css'); * Or link: */ /* ══════════════════════════════════════════ FONTS ══════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap'); /* ══════════════════════════════════════════ DESIGN TOKENS ══════════════════════════════════════════ */ :root { /* ── Backgrounds ── */ --bg: #f8f4ee; --surface: #ffffff; --surface-2: #f5efe7; --surface-3: #ebe4d8; /* ── Borders ── */ --border: rgba(100, 75, 40, 0.08); --border-strong: rgba(100, 75, 40, 0.14); /* ── Text ── */ --text: #2e2318; --text-dim: #7a6b5a; --text-muted: #80715f; /* was #b0a292 (2.5:1 on white) — darkened to pass WCAG AA 4.5:1 */ /* ── Brand ── */ --navy: #2c3e50; --navy-light: #3d556d; /* ── Accent (Primary Action) ── */ --accent: #d4793a; --accent-hover: #c06a2e; --accent-dim: rgba(212, 121, 58, 0.10); --accent-glow: rgba(212, 121, 58, 0.20); /* ── Teal (Completed / Success) ── */ --teal: #2a9d8f; --teal-dim: rgba(42, 157, 143, 0.10); --teal-strong: rgba(42, 157, 143, 0.15); /* v12.23 (D10): the pre-rebrand deep teal, tokenized (was hardcoded #34615e in ~12 spots — link hovers, chip values, headings). A deliberate deep accent, distinct from the brighter brand --teal. */ --teal-deep: #34615e; /* ── Green (Banners / Checkmarks) ── */ --green: #4caf6a; --green-dim: rgba(76, 175, 106, 0.10); --green-strong: rgba(76, 175, 106, 0.15); /* ── Plum (Stats Variation) ── */ --plum: #9b5de5; --plum-dim: rgba(155, 93, 229, 0.10); /* ── Rose (Danger / Alerts) ── */ --rose: #c23b3b; /* was #d94f4f (3.7:1 on bg) — darkened so error text + btn-danger pass 4.5:1 */ --rose-dim: rgba(217, 79, 79, 0.08); /* ── Gold (Rewards / Achievements) ── */ --gold: #c49a3c; --gold-dim: rgba(196, 154, 60, 0.10); --gold-strong: rgba(196, 154, 60, 0.18); /* ── Blue (In Progress) ── */ --blue: #4a90d9; --blue-dim: rgba(74, 144, 217, 0.10); /* ── Layout ── */ --radius: 14px; --radius-sm: 10px; --container-max: 1320px; --topbar-height: 58px; /* ── Shadows ── */ --shadow-sm: 0 1px 3px rgba(50, 35, 15, 0.04), 0 4px 12px rgba(50, 35, 15, 0.03); --shadow-md: 0 4px 20px rgba(50, 35, 15, 0.06), 0 12px 40px rgba(50, 35, 15, 0.04); /* v12.13: a purely downward shadow leaves the TOP and SIDE edges as a hard white-to-scrim line — the "界線" complaint. The first layer here is a symmetric (0-offset) halo so all four edges dissolve into the backdrop; the lower two are the directional key light. Darker than the card-subtle shadows so it actually shows against the dimmed scrim. */ --shadow-modal: 0 0 30px rgba(0, 0, 0, 0.20), 0 16px 36px rgba(0, 0, 0, 0.30), 0 36px 78px rgba(0, 0, 0, 0.26); /* ── Typography ── */ --font-main: 'Outfit', 'Noto Sans TC', 'Noto Sans SC', 'PingFang TC', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* ── Transitions ── */ --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --duration-fast: 0.2s; --duration-base: 0.3s; --duration-slow: 0.45s; } /* ══════════════════════════════════════════ BASE RESETS (optional — remove if your project already has a CSS reset) ══════════════════════════════════════════ */ /* *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: var(--font-main); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; } */ /* ══════════════════════════════════════════ UTILITY CLASSES (optional helpers) ══════════════════════════════════════════ */ /* Text colors */ .text-accent { color: var(--accent) !important; } .text-teal { color: var(--teal) !important; } .text-plum { color: var(--plum) !important; } .text-rose { color: var(--rose) !important; } .text-gold { color: var(--gold) !important; } .text-blue { color: var(--blue) !important; } .text-dim { color: var(--text-dim) !important; } .text-muted { color: var(--text-muted) !important; } /* Background tints */ .bg-accent-dim { background: var(--accent-dim) !important; } .bg-teal-dim { background: var(--teal-dim) !important; } .bg-green-dim { background: var(--green-dim) !important; } .bg-plum-dim { background: var(--plum-dim) !important; } .bg-rose-dim { background: var(--rose-dim) !important; } .bg-gold-dim { background: var(--gold-dim) !important; } .bg-blue-dim { background: var(--blue-dim) !important; } /* Font families */ .font-mono { font-family: var(--font-mono) !important; } /* ══════════════════════════════════════════ ANIMATIONS ══════════════════════════════════════════ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse-node { 0%, 100% { box-shadow: 0 3px 16px var(--accent-glow); } 50% { box-shadow: 0 3px 24px var(--accent-glow), 0 0 40px rgba(212, 121, 58, 0.1); } } @keyframes pulse-small { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 144, 217, 0.3); } 50% { box-shadow: 0 0 0 4px rgba(74, 144, 217, 0.1); } } @keyframes highlightPop { 0% { transform: scale(1); } 30% { transform: scale(1.008); } 100% { transform: scale(1); } } /* ══════════════════════════════════════════ SKELETON LOADER ══════════════════════════════════════════ */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); } .skeleton-text { height: 1em; margin-bottom: 0.5em; border-radius: 4px; } .skeleton-card { height: 120px; border-radius: var(--radius); } .skeleton-circle { width: 44px; height: 44px; border-radius: 50%; }