/** * FSDT Web Starter - Stitch Design System * 前尚數位標準網站設計系統 v1.0 * * Usage: 在 標籤加上 data-theme="xxx" 即可切換主題 * Example: */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@500;700;800&display=swap'); /* ============================================ 1. DESIGN TOKENS (設計變數) ============================================ */ :root { /* Default Colors (Professional Blue) */ --c-primary: #0B4F6C; --c-secondary: #01BAEF; --c-accent: #20BF55; --c-surface: #F8FAFC; --c-white: #ffffff; --c-glass: rgba(255, 255, 255, 0.85); --text-main: #1E293B; --text-muted: #64748B; --text-light: #94A3B8; /* Gradients */ --grad-primary: linear-gradient(135deg, var(--c-primary) 0%, #004e92 100%); --grad-ocean: linear-gradient(135deg, var(--c-secondary) 0%, var(--c-primary) 100%); --grad-eco: linear-gradient(135deg, var(--c-accent) 0%, #01BAEF 100%); /* Typography */ --f-heading: 'Outfit', sans-serif; --f-body: 'Inter', sans-serif; /* Spacing */ --s-xs: 4px; --s-sm: 8px; --s-md: 16px; --s-lg: 24px; --s-xl: 32px; --s-2xl: 64px; --s-3xl: 128px; /* Effects */ --r-card: 24px; --r-pill: 9999px; --shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.08); --shadow-float: 0 25px 50px -12px rgba(1, 186, 239, 0.25); --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); --trans-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Navbar */ --navbar-height: 80px; } /* ============================================ 2. THEME PRESETS (主題預設) ============================================ */ /* 專業藍 (Default - Professional Blue) */ [data-theme="professional"] { --c-primary: #0B4F6C; --c-secondary: #01BAEF; --c-accent: #20BF55; } /* 科技暗黑 (Tech Dark) */ [data-theme="tech-dark"] { --c-primary: #1a1a2e; --c-secondary: #16213e; --c-accent: #e94560; --c-surface: #0f0f0f; --text-main: #f1f1f1; --text-muted: #a0a0a0; } /* 醫療信任 (Medical Trust) */ [data-theme="medical"] { --c-primary: #0077B6; --c-secondary: #00B4D8; --c-accent: #48CAE4; } /* 自然綠意 (Nature Green) */ [data-theme="nature"] { --c-primary: #2D6A4F; --c-secondary: #40916C; --c-accent: #95D5B2; } /* 奢華金 (Luxury Gold) */ [data-theme="luxury"] { --c-primary: #1C1C1C; --c-secondary: #C9A227; --c-accent: #FFD700; } /* 活力橙 (Energetic Orange) */ [data-theme="energetic"] { --c-primary: #FF6B35; --c-secondary: #F7931E; --c-accent: #FFD23F; } /* 柔和粉 (Soft Pink) */ [data-theme="soft"] { --c-primary: #E91E63; --c-secondary: #F48FB1; --c-accent: #FCE4EC; } /* 青春亮潔 (Fresh & Young) - 文化屋專屬 */ [data-theme="fresh"] { --c-primary: #1098AD; /* 稍微深一點的薄荷綠以確保文字可讀性 */ --c-secondary: #AEECEF; /* 亮薄荷綠 */ --c-accent: #FFD23F; /* 活力黃 */ --c-surface: #F8FDFF; /* 極淡藍色背景 */ --text-main: #2D3748; --grad-primary: linear-gradient(135deg, #1098AD 0%, #AEECEF 100%); } /* ============================================ 3. GLOBAL STYLES (全域樣式) ============================================ */ html { scroll-behavior: smooth; scroll-padding-top: var(--navbar-height); } [id] { scroll-margin-top: var(--navbar-height); } body { font-family: var(--f-body); color: var(--text-main); background-color: var(--c-surface); line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--f-heading); font-weight: 700; } a { color: var(--c-primary); text-decoration: none; transition: var(--trans-base); } a:hover { color: var(--c-secondary); } /* ============================================ 4. UTILITY CLASSES (工具類) ============================================ */ .text-primary { color: var(--c-primary) !important; } .text-secondary { color: var(--c-secondary) !important; } .text-accent { color: var(--c-accent) !important; } .text-muted { color: var(--text-muted) !important; } .bg-primary { background-color: var(--c-primary) !important; } .bg-secondary { background-color: var(--c-secondary) !important; } .bg-accent { background-color: var(--c-accent) !important; } .bg-surface { background-color: var(--c-surface) !important; } .bg-glass { background-color: var(--c-glass) !important; backdrop-filter: blur(12px); } .bg-grad-primary { background: var(--grad-primary) !important; } .bg-grad-ocean { background: var(--grad-ocean) !important; } .bg-grad-eco { background: var(--grad-eco) !important; } .text-grad { background: var(--grad-ocean); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================ 5. COMPONENT CLASSES (組件類) ============================================ */ /* Card */ .card-stitch { background: var(--c-white); border-radius: var(--r-card); box-shadow: var(--shadow-soft); border: 1px solid rgba(0, 0, 0, 0.05); transition: var(--trans-base); } .card-stitch:hover { box-shadow: var(--shadow-float); transform: translateY(-4px); } /* Button */ .btn-stitch { padding: 12px 28px; border-radius: var(--r-pill); font-weight: 600; transition: var(--trans-base); border: none; } .btn-stitch.btn-primary { background: var(--grad-primary); color: white; } .btn-stitch.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); } .btn-stitch.btn-outline { background: transparent; border: 2px solid var(--c-primary); color: var(--c-primary); } .btn-stitch.btn-outline:hover { background: var(--c-primary); color: white; } /* Section */ .section { padding: var(--s-3xl) 0; } /* Icon Box (Dynamic Styling) */ .icon-box-dynamic { background-color: rgba(var(--c-primary-rgb, 11, 79, 108), 0.1); color: var(--c-primary); } /* ============================================ 6. ANIMATION UTILITIES (動畫工具) ============================================ */ .hover-translate-y { transition: var(--trans-base); } .hover-translate-y:hover { transform: translateY(-8px); } .hover-scale { transition: var(--trans-base); } .hover-scale:hover { transform: scale(1.05); } .transition-all { transition: var(--trans-base); } /* ============================================ 7. RESPONSIVE HELPERS (響應式輔助) ============================================ */ @media (max-width: 768px) { :root { --navbar-height: 70px; } .section { padding: var(--s-2xl) 0; } } /* Line Clamp Utilities */ .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }