/** * 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 { /* SEDA Transport Theme - Fresh Eco-Premium */ --c-primary: #10375C; /* Deep Industrial Blue */ --c-secondary: #00B4D8; /* Fresh Eco Teal */ --c-accent: #20BF55; /* Growth Green */ --c-amber: #F39C12; /* Golden Logistics */ --c-surface: #F8FAFC; --c-white: #ffffff; --c-glass: rgba(255, 255, 255, 0.15); --text-main: #1E293B; --text-muted: #64748B; --text-light: #94A3B8; /* Advanced Gradients */ --grad-eco: linear-gradient(135deg, #00B4D8 0%, #20BF55 100%); --grad-primary: linear-gradient(135deg, #10375C 0%, #1A5F7A 100%); --grad-ocean: linear-gradient(135deg, #0077B6 0%, #00B4D8 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; } /* ============================================ 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; } /* Modern Hero Section - Sharp Geometric Design */ .hero-section { position: relative; padding: 120px 0 80px; background-size: cover; background-position: center bottom; overflow: hidden; } /* Sharp Light Gradient Shape on Left */ .hero-shape-sharp { position: absolute; top: 0; left: 0; width: 70%; height: 100%; background: linear-gradient(120deg, rgba(235, 250, 255, 0.95) 0%, rgba(240, 253, 244, 0.9) 100%); /* Clean Sky Blue to Very Light Mint */ clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%); /* Sharp angular cut */ z-index: 1; backdrop-filter: blur(5px); } .hero-content-wrapper { position: relative; z-index: 2; } .hero-section h1 { color: var(--c-primary) !important; font-weight: 800; } /* Video Section - sharp accents */ .bg-shape-video { position: relative; background-color: #fff; overflow: hidden; } .bg-shape-video::before { content: ''; position: absolute; top: -50%; right: -20%; width: 80%; height: 200%; background: linear-gradient(45deg, #F0F9FF 0%, #E6FFFA 100%); transform: rotate(15deg); z-index: 0; /* Sharp decorative line */ border-left: 20px solid rgba(46, 134, 171, 0.05); } .bg-shape-video .container { position: relative; z-index: 1; } /* Service Box Enhancements */ .service-box { background: #fff; border-radius: 20px; padding: 40px 30px; transition: all 0.3s ease; border: 1px solid rgba(0, 0, 0, 0.05); /* Slightly darker border */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); height: 100%; } .service-box:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(30, 58, 95, 0.1); } .service-icon-wrapper { width: 80px; height: 80px; border-radius: 50%; background: rgba(46, 134, 171, 0.1); color: var(--c-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; transition: all 0.3s ease; } /* Service Card Color Variations */ .service-box.theme-blue .service-icon-wrapper { background: rgba(46, 134, 171, 0.1); color: #2E86AB; } .service-box.theme-blue:hover { border-color: #2E86AB; box-shadow: 0 15px 30px rgba(46, 134, 171, 0.15); } .service-box.theme-blue:hover .service-icon-wrapper { background: #2E86AB; color: #fff; } .service-box.theme-green .service-icon-wrapper { background: rgba(32, 191, 85, 0.1); color: #20BF55; } .service-box.theme-green:hover { border-color: #20BF55; box-shadow: 0 15px 30px rgba(32, 191, 85, 0.15); } .service-box.theme-green:hover .service-icon-wrapper { background: #20BF55; color: #fff; } .service-box.theme-orange .service-icon-wrapper { background: rgba(241, 143, 1, 0.1); color: #F18F01; } .service-box.theme-orange:hover { border-color: #F18F01; box-shadow: 0 15px 30px rgba(241, 143, 1, 0.15); } .service-box.theme-orange:hover .service-icon-wrapper { background: #F18F01; color: #fff; } .service-box.theme-purple .service-icon-wrapper { background: rgba(156, 39, 176, 0.1); color: #9C27B0; } .service-box.theme-purple:hover { border-color: #9C27B0; box-shadow: 0 15px 30px rgba(156, 39, 176, 0.15); } .service-box.theme-purple:hover .service-icon-wrapper { background: #9C27B0; color: #fff; } /* Section Background Video Container */ /* Compact Sizing for Section Gap Removal */ .section.pb-0 { padding-bottom: 0 !important; } .section.pt-0 { padding-top: 0 !important; } /* Modern Section Header */ .section-header-modern { position: relative; margin-bottom: 60px; margin-top: 20px; /* Slight top offset */ z-index: 1; } .watermark-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 15vw; /* Responsive huge size */ font-weight: 900; color: rgba(0, 0, 0, 0.02); /* Extremely subtle */ z-index: -1; letter-spacing: 1rem; line-height: 1; pointer-events: none; font-family: var(--f-heading); text-transform: uppercase; white-space: nowrap; opacity: 0.5; } @media (min-width: 992px) { .watermark-text { font-size: 8rem; } } .title-decoration { display: inline-block; position: relative; margin-bottom: 15px; } .title-decoration::after { content: ''; display: block; width: 60px; height: 4px; background: var(--c-accent); margin: 15px auto 0; border-radius: 2px; } .subtitle-english { font-family: var(--f-heading); font-weight: 600; letter-spacing: 4px; color: var(--c-secondary); text-transform: uppercase; font-size: 0.9rem; display: block; margin-bottom: 10px; } /* Background Simple Gradient */ .bg-clean-gradient { background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); } /* Modern Footer */ .footer-modern { background: var(--c-primary); color: #fff; padding-top: 60px; padding-bottom: 30px; margin-top: 0; /* Remove negative margins or gaps */ } .footer-link { color: #fff !important; text-decoration: none; display: inline-block; margin-bottom: 12px; transition: all 0.2s; opacity: 1 !important; } .footer-link:hover { color: #fff !important; opacity: 0.8 !important; /* Subtle micro-animation */ text-decoration: underline !important; } .footer-title { color: #fff !important; font-weight: 700; margin-bottom: 24px; position: relative; padding-bottom: 12px; opacity: 1 !important; } .footer-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 30px; height: 2px; background: var(--c-accent); } .section-title-deco { display: inline-block; position: relative; padding-bottom: 15px; margin-bottom: 40px; } /* Glass & Effects */ .backdrop-blur-sm { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .backdrop-blur-md { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .text-shadow-md { text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } .text-shadow-sm { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-800 { font-weight: 800; } /* Premium Glassmorphism */ .glass-card { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2); } .glass-light { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); } .text-shadow-premium { text-shadow: 0 2px 15px rgba(0, 0, 0, 0.4); } .rounded-4 { border-radius: 1.5rem !important; } .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } /* Premium Eco Button */ .btn-eco { background: var(--grad-eco); border: none; transition: all 0.3s ease; } .btn-eco:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 25px rgba(0, 180, 216, 0.4); } .hero-tagline { font-size: clamp(0.75rem, 1.2vw, 1.1rem); letter-spacing: 2px; } .hero-badge { font-size: clamp(0.65rem, 1vw, 0.9rem); } .hero-title { font-size: clamp(1.4rem, 4vw, 3.2rem); line-height: 1.25; } /* Responsive Mobile & Tablet Fixes */ @media (max-width: 1024px) { .hero-tagline { font-size: 0.85rem; letter-spacing: 1px; white-space: nowrap; } .hero-badge { font-size: 0.7rem; padding: 4px 8px !important; } .hero-title { font-size: 1.65rem !important; line-height: 1.3 !important; } .hero-section { min-height: 100vh !important; padding: 100px 0 60px !important; display: flex !important; align-items: center !important; } .hero-section .lead { font-size: 1rem !important; margin-bottom: 25px !important; color: rgba(255, 255, 255, 0.9) !important; } .btn-mobile-sm { padding: 10px 15px !important; font-size: 0.85rem !important; flex: 1; white-space: nowrap; } .glass-card { margin-top: 30px; padding: 25px 20px !important; } } /* Force early stacking for narrower tablets like iPad Mini (744px) to prevent tiny text or breaks */ @media (max-width: 900px) { .hero-section .row { flex-direction: column !important; } .hero-section .col-lg-6 { width: 100% !important; text-align: center !important; } .hero-section .text-start { text-align: center !important; } .hero-section .lead { margin-left: auto !important; margin-right: auto !important; } .hero-section .d-flex { justify-content: center !important; } .hero-title { font-size: 1.7rem !important; /* Slightly larger since it now has full width */ } } @media (max-width: 768px) { .hero-title { font-size: 1.45rem !important; } .hero-tagline { font-size: 0.75rem; } .btn-mobile-sm { padding: 8px 10px !important; font-size: 0.8rem !important; } }