/** Shopify CDN: Minification failed Line 377:21 Unexpected "-" Line 671:3 Unexpected "{" Line 2436:0 Unexpected "}" Line 2540:0 Unexpected "}" Line 2934:3 Unexpected "{" Line 3149:321 Unexpected "<" Line 7296:24 Unexpected "{" Line 8636:0 Unexpected "{" Line 8992:0 Expected "}" to go with "{" **/ /* Montserrat Font Family - Self-hosted */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('{{ "montserrat-regular.woff2" | asset_url }}') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('{{ "montserrat-semibold.woff2" | asset_url }}') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('{{ "montserrat-bold.woff2" | asset_url }}') format('woff2'); } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('{{ "montserrat-extrabold.woff2" | asset_url }}') format('woff2'); } /* Inter Tight Font Family - Self-hosted */ @font-face { font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 400; font-display: swap; src: url('{{ "inter-tight-regular.woff2" | asset_url }}') format('woff2'); } @font-face { font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 600; font-display: swap; src: url('{{ "inter-tight-semibold.woff2" | asset_url }}') format('woff2'); } @font-face { font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 700; font-display: swap; src: url('{{ "inter-tight-bold.woff2" | asset_url }}') format('woff2'); } @font-face { font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 800; font-display: swap; src: url('{{ "inter-tight-extrabold.woff2" | asset_url }}') format('woff2'); } /* Plus Jakarta Sans Font Family - Self-hosted */ @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('{{ "plus-jakarta-sans-regular.woff2" | asset_url }}') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('{{ "plus-jakarta-sans-semibold.woff2" | asset_url }}') format('woff2'); } @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('{{ "plus-jakarta-sans-bold.woff2" | asset_url }}') format('woff2'); } :root { --cyan: #38bdf8; --magenta: #d946ef; --gold: #fbbf24; --dark-bg: #0f172a; --blur: 20px; --ease: cubic-bezier(0.4,0,0.2,1); --duration: 0.3s; --radius: 32px; /* ⚡ Transitions */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --duration-medium: 0.3s; /* 玻璃效果 */ --glass-bg: rgba(255, 255, 255, 0.05); --glass-bg-hover: rgba(255, 255, 255, 0.08); --glass-bg-active: rgba(255, 255, 255, 0.12); --glass-border: rgba(255, 255, 255, 0.1); --glass-border-hover: rgba(255, 255, 255, 0.2); --glass-hover: rgba(255, 255, 255, 0.08); --glass-strong: rgba(255, 255, 255, 0.7); --glass-dark: rgba(15, 23, 42, 0.78); --glass-blur: blur(40px) saturate(180%); /* 模糊效果 */ --blur-sm: 12px; --blur-md: 20px; --blur-lg: 40px; --blur-xl: 60px; /* 圓角系統 */ /* Spacing */ --radius-sm: 16px; --radius-md: 24px; --radius-lg: 32px; --blur: 20px; --spacing: 8px; --radius-xl: 36px; --radius-full: 9999px; /* 間距系統 */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-2xl: 4rem; /* 陰影系統 */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2); --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.3); --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); /* 動畫曲線 */ --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 動畫時長 */ --duration-fast: 0.15s; --duration-normal: 0.3s; --duration-slow: 0.5s; /* 字體系統 */ --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Z-index層級 */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --radius: 24px; --blur: 20px; --ease: cubic-bezier(0.4,0,0.2,1); --duration: 0.3s; /* 優化後的動效 - 更快更流暢 */ --slow-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 更自然的緩動 */ --slow-duration: 0.6s; /* 從 1.2s 減半到 0.6s */ --reveal-delay: 0.08s; /* 從 0.2s 減少到 0.08s */ /* 📱 Header 系統 */ --header-bg: rgba(255,255,255,.72); --header-bg-scrolled: rgba(255,255,255,.9); --header-bg-dark: rgba(15,23,42,.85); --header-height: 52px; --header-height-scrolled: 44px; --header-text: #1d1d1f; --header-text-hover: #000; --header-border: rgba(0, 0, 0, 0.1); --header-transition: cubic-bezier(0.28,0.11,0.32,1); /* LittleG Colors */ --littleg-sky: #e0f2fe; --littleg-pink: #ffe4f1; --littleg-yellow: #fff7b0; --littleg-character: #8B4B8C; --littleg-gradient: linear-gradient(135deg, #ffe4f1, #fff7b0); /* Neutral Colors */ --apple-gray: #F5F5F7; --neutral-light: #f7f9fc; --neutral-dark: #1e293b; --neutral-light-dark: #e2e8f0; --radius: 24px; --radius-lg: 32px; --blur: 20px; --duration-medium: 0.3s; --littleg-accent-peach: #ffd9a8; --littleg-gold: #f5d47a; --littleg-accent-pink: #ff9ec1; --text-light: rgba(255,255,255,0.75); --text-dark: #4a4a4a; --ease-default: cubic-bezier(.22,.61,.36,1); /* iOS 弹性曲线 */ --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1); /* Apple官方曲線 */ --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 彈性效果 */ /* RICS Professional */ --rics-blue: #2E3192; --rics-green: #007a53; /* 🪟 玻璃質感系統 */ --blur: 20px; /* ✅ 只保留一次 */ /* Header Specific */ --header-opacity: 0.72; --gradient-primary: linear-gradient(135deg, var(--cyan), var(--gold)); --gradient-hero: linear-gradient(90deg, var(--cyan), var(--gold)); --gradient-card: linear-gradient(145deg, var(--cyan) 10%, var(--magenta) 60%, var(--gold) 90%); /* ═══════════════════════════════════════════════════════════ 🌈 GRADIENTS - 統一漸層系統 ═══════════════════════════════════════════════════════════ */ --heading-gradient: linear-gradient(90deg, var(--cyan), var(--gold)); --glass-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(240, 248, 255, 0.7)); /* ═══════════════════════════════════════════════════════════ 🎭 SHADOWS - 陰影系統 ═══════════════════════════════════════════════════════════ */ /* 間距系統 */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 32px; --space-xl: 48px; --shadow-glow: 0 0 40px rgba(56, 189, 248, 0.15); --shadow-ambient: 0 12px 40px rgba(2, 6, 23, 0.18); --shadow-key: 0 4px 16px rgba(2, 6, 23, 0.08); --shadow: 0 10px 30px rgba(56, 189, 248, 0.3); /* Card Shadows */ --card-shadow: 0 6px 30px rgba(0, 0, 0, 0.08); --card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.15); /* Platform Shadows */ --platform-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); --platform-hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); /* Glass Shadow */ --glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); /* ═══════════════════════════════════════════════════════════ 📐 BORDER RADIUS - 圓角系統 ═══════════════════════════════════════════════════════════ */ --radius-sm: 16px; --radius-md: 24px; --radius-lg: 32px; --radius-xl: 40px; --radius-full: 50px; --radius: 24px; /* 🎭 導航互動 */ --nav-hover-bg: rgba(0, 0, 0, 0.05); --dropdown-bg: rgba(255, 255, 255, 0.85); /* Blur */ --blur: 20px; --color-background: 15, 23, 42; --color-foreground: 255, 255, 255; --drg-avatar-url: url('/cdn/shop/files/dr.g.png?v=1759053513'); /* ═══════════════════════════════════════════════════════════ 📏 SPACING - 間距系統 ═══════════════════════════════════════════════════════════ */ --space-xs: 8px; --space-sm: 16px; --space-md: 24px; --space-lg: 40px; --space-xl: 60px; --space-xxl: 100px; --section-spacing: clamp(60px, 10vw, 140px); /* ═══════════════════════════════════════════════════════════ ✍️ TYPOGRAPHY - 統一字體系統 ═══════════════════════════════════════════════════════════ */ --font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-main: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ═══════════════════════════════════════════════════════════ ✍️ TYPOGRAPHY - 字體系統 ═══════════════════════════════════════════════════════════ * /* Mobile Font Sizes */ --mobile-font-base: 16px; --mobile-font-large: 20px; /* ═══════════════════════════════════════════════════════════ ⚡ ANIMATIONS - 統一動畫系統 ═══════════════════════════════════════════════════════════ */ --duration-short: 100ms; --duration-default: 200ms; --duration-announcement-bar: 250ms; --duration-medium: 300ms; --duration-fast: 150ms; --duration-long: 500ms; --duration-extra-long: 600ms; --duration-extra-longer: 750ms; --duration-extended: 3s; /* ═══════════════════════════════════════════════════════════ ⚡ ANIMATIONS - Smooth & Premium ═══════════════════════════════════════════════════════════ */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-default: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --ease-out-slow: cubic-bezier(0, 0, 0.3, 1); /* Transitions */ --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1); --platform-transition: transform 0.3s, opacity 0.3s, background-color 0.3s ease; /* ═══════════════════════════════════════════════════════════ 📱 RESPONSIVE BREAKPOINTS - 響應式斷點 ═══════════════════════════════════════════════════════════ */ --breakpoint-mobile: 768px; --breakpoint-tablet: 1024px; --breakpoint-desktop: 1440px; /* ═══════════════════════════════════════════════════════════ 🎯 Z-INDEX - 層級系統 ═══════════════════════════════════════════════════════════ */ --z-header: 1000; --z-modal: 2000; --z-tooltip: 3000; /* ═══════════════════════════════════════════════════════════ 📱 LAYOUT - 佈局系統 ═══════════════════════════════════════════════════════════ */ --page-width: 120rem; --header-height: 72px; /* ═══════════════════════════════════════════════════════════ 🎯 SHOPIFY SYSTEM VARIABLES - Shopify 系統變數 ═══════════════════════════════════════════════════════════ */ --alpha-button-background: 1; --alpha-button-border: 1; --alpha-link: 0.85; --alpha-badge-border: 0.1; --focused-base-outline: 0.2rem solid rgba(var(--color-foreground), 0.5); --focused-base-outline-offset: 0.3rem; --focused-base-box-shadow: 0 0 0 0.3rem rgb(var(--primary-color)), 0 0 0.5rem 0.4rem rgba(var(--color-foreground), 0.3); /* GFun */ --gfun-gradient: linear-gradient(135deg, var(--gold), var(--cyan)); --primary-color: var(--dark-bg) or #0f172a ; } ═══════════════════════════════════════════════════════ 🌐 GLOBAL RESET - 全域重置 ═══════════════════════════════════════════════════════════ */ html { font-size: 14px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 全域背景 */ body { background: var(--dark-bg); color: #fff; font-family: 'Inter', -apple-system, sans-serif; font-weight: 400; line-height: 1.6; overflow-x: hidden; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(circle at 20% 30%, var(--cyan) 0%, transparent 50%), radial-gradient(circle at 80% 70%, var(--magenta) 0%, transparent 50%), radial-gradient(circle at 50% 50%, var(--gold) 0%, transparent 50%); opacity: 0.03; animation: gradientShift 20s ease infinite; z-index: -1; pointer-events: none; } @keyframes floatVertical { 0%, 100% { transform: translateY(0px); opacity: 0.03; } 50% { transform: translateY(-30px); opacity: 0.05; } } @keyframes gentlePulse { 0%, 100% { opacity: 0.03; filter: blur(60px); } 50% { opacity: 0.06; filter: blur(80px); } } main { padding-top: 60px; /* 只留導航欄高度 */ } .global-overlay, .platform-overlay { position: fixed; inset: 0; background: rgba(26, 54, 93, 0.85)!important; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity var(--duration-medium) cubic-bezier(0.4, 0, 0.2, 1); } .global-overlay.active, .platform-overlay.active { opacity: 1; pointer-events: auto; } /* 連結 */ a, [class*="Link"] { color: var(--cyan) !important; transition: color var(--duration) var(--ease) !important; text-decoration: none; } a:active, button:active, [role="button"]:active { background-color: transparent !important; } a:hover { color: var(--gold) !important; } img { border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0,0,0,0.1); width: 100%; height: auto; loading: lazy; } /* 訂單卡片 hover 效果 */ [class*="OrderCard"]:hover, [class*="order"]:hover { background: var(--glass-hover) !important; transform: translateY(-6px) !important; box-shadow: 0 0 25px rgba(255,255,255,0.15) !important; } /* 按鈕樣式 */ button, [type="button"], [type="submit"], .button, [class*="Button"] { background: linear-gradient(135deg, var(--cyan), var(--gold)) !important; color: #000 !important; border-radius: 50px !important; padding: 1rem 2rem !important; font-weight: 600 !important; border: none !important; transition: all var(--duration) var(--ease) !important; } button:hover, [type="button"]:hover, [type="submit"]:hover { transform: scale(1.05) !important; box-shadow: 0 0 20px rgba(56,189,248,0.5) !important; } /* Intersection Observer 動畫 */ [data-animate] { opacity: 0; transform: translateY(40px); transition: all 1s var(--ease); } [data-animate].visible { opacity: 1; transform: translateY(0); } /* Layer 1: 香港全景固定背景（頂部） */ body::before { content: ''; position: fixed; top: 0 !important; left: 0; width: 100%; height: 800px; /* 增加可見區域 */ background: url('/cdn/shop/files/hong-kong-night-panoramic-background-premium-edition.png?v=1761900269') center top/cover no-repeat; opacity: 0.3; /* 從 0.3 增加到 0.5，更明顯 */ z-index: -1; pointer-events: none; mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, /* 70% 都保持完全可見 */ rgba(0,0,0,0.7) 85%, rgba(0,0,0,0) 100% ); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0.7) 85%, rgba(0,0,0,0) 100% ); } body::after { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 30% 20%, rgba(56, 189, 248, 0.1) 0%, transparent 40%), radial-gradient(ellipse at 70% 80%, rgba(217, 70, 239, 0.1) 0%, transparent 40%); animation: gentlePulse 25s ease-in-out infinite reverse; pointer-events: none; } /* 動畫效果 */ @keyframes gradientShift { 0% { background-position: 0% 50%; transform: scale(1); } 50% { background-position: 100% 50%; transform: scale(1.05); } 100% { background-position: 0% 50%; transform: scale(1); } } /* 響應式調整 */ @media (max-width: 768px) { body::before { height: 250px; opacity: 0.2; } .nav-container { flex-direction: column; } .pricing-grid, .testimonials-grid, .stats-dashboard { grid-template-columns: 1fr; } .comparison-table { font-size: 0.9rem; } .comparison-table th, .comparison-table td { padding: 1rem; } .tab-container { padding: 0 1rem; } .tab-btn { font-size: 0.9rem; padding: 0.6rem 1rem; } .feature-grid { grid-template-columns: 1fr !important; gap: 2rem; } .gfun-balance-display { flex-direction: column; gap: 0.5rem; } [data-tooltip]::after { white-space: normal; max-width: 200px; } .section, .container, .glass-container, .page-width { padding: var(--space-lg) var(--space-md); margin: var(--space-md) auto; border-radius: var(--radius-md); } .home-intro-banner { padding: 40px 20px; } .product-grid, .collection-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md); padding: var(--space-sm); } .unified-module { padding: 32px 1rem; margin: 1.5rem auto; } .unified-module-title { font-size: 1.8rem; } .unified-homepage-desc { font-size: 1rem; margin-bottom: 1.5rem; } .unified-product-card, .feature-card { padding: 2rem; } .unified-product-grid, { grid-template-columns: 1fr; gap: 2rem; } .cta-section, .cta { padding: 4rem 1rem; } .feature-zone { padding: 4rem 1rem; } body::after { opacity: 0.05; } .hero { padding: 4rem 1.5rem; } h1, .hero-title { font-size: 1.75rem; /* 28px */ } .hero-subtitle { font-size: 0.9375rem; /* 15px */ } .hero-subtitle { font-size: 0.9375rem; /* 15px */ } h2, .section-title { font-size: 1.5rem; /* 24px */ } h3, .card-title { font-size: 1.125rem; /* 18px */ } .card-description { font-size: 0.875rem; /* 14px */ } .product-grid, .collection-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md); padding: var(--space-sm); } .unified-product-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ═══════════════════════════════════════════════════════════ 🏙️ HERO SECTION - 英雄區塊 ═══════════════════════════════════════════════════════════ */ .hero { background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 28px; min-height: auto; display: flex; padding-top: 1rem; margin-top: 0; margin-bottom: 3rem; flex-direction: column; justify-content: center; align-items: center; animation: fadeIn 1.2s var(--ease-default); text-align: center; overflow: hidden; position: relative; padding: 6rem var(--spacing-md); } .hero-content { z-index: 2; margin: 0 auto; position: relative; } .hero-cta { display: flex; justify-content: center; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; animation: fadeInUp 0.8s cubic-bezier(0.4,0,0.2,1) 0.6s both; } /* 淡入上升動畫 */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* 動畫效果 */ @keyframes gradientShift { 0% { background-position: 0% 50%; transform: scale(1); } 50% { background-position: 100% 50%; transform: scale(1.05); } 100% { background-position: 0% 50%; transform: scale(1); } } @media (max-width: 768px){ .hero { padding: 3rem 1rem; } .hero-title { font-size: 1.5rem; /* 24px */ } .hero-subtitle { font-size: 0.875rem; /* 14px */ } } /* ═══════════════════════════════════════════════════════════ 🎯 HERO BUTTONS - 英雄區按鈕 ═══════════════════════════════════════════════════════════ */ zone { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 3vw, 2rem); position: relative; overflow: hidden; background: var(--dark-bg); } .hero-zone::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(56,189,248,0.08), transparent 50%), radial-gradient(circle at 80% 70%, rgba(217,70,239,0.08), transparent 50%), radial-gradient(circle at 50% 50%, rgba(251,191,36,0.05), transparent 50%); animation: gradientShift 20s ease infinite; z-index: 0; } .hero-content { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; text-align: center; } /* 標題漸層效果 */ h1, h2, h3, [class*="Heading"] { background: linear-gradient(90deg, var(--cyan), var(--gold)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* 標題層級 */ h1, .h1, .hero-title { font-size: clamp(2rem, 8vw, 5rem); /* Dynamic scaling */ font-weight: 800; background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1.5rem; } .hero-title span { display: block; background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: 0.5rem; } .hero-subtitle { font-size: 1.3rem; opacity: 0.9; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; } .hero-cta { display: flex; justify-content: center; gap: var(--spacing-sm); margin-top: var(--spacing-md); flex-wrap: wrap; } .hero-cta a { background: linear-gradient(135deg, var(--rics-green), var(--cyan)); color: white; text-decoration: none; padding: 1rem 2.6rem; border-radius: 50px; font-weight: 700; transition: all var(--transition-base) var(--ease-default); box-shadow: var(--shadow-md); } .hero-cta a:hover { background: linear-gradient(135deg, var(--gold), var(--magenta)); transform: translateY(-6px) scale(1.05); box-shadow: var(--shadow-lg); } /* === DR.G AVATAR === */ .drg-avatar { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 0 20px rgba(251, 191, 36, 0.4); transition: all var(--duration) var(--ease); object-fit: cover; } .drg-avatar-bg { background-image: var(--drg-avatar-url); background-size: cover; background-position: center; } .drg-avatar:hover { transform: scale(1.1) rotate(5deg); box-shadow: 0 0 30px rgba(251, 191, 36, 0.6); } .drg-avatar-sm { width: 48px; height: 48px; } .drg-avatar-lg { width: 128px; height: 128px; } .drg-avatar-xl { width: 200px; height: 200px; } /* Dr.G Avatar with Status Indicator */ .drg-avatar-wrapper { position: relative; display: inline-block; } .drg-status { position: absolute; bottom: 4px; right: 4px; width: 16px; height: 16px; background: #22c55e; border: 3px solid var(--dark-bg); border-radius: 50%; box-shadow: 0 0 10px rgba(34, 197, 94, 0.5); } .drg-status.offline { background: #6b7280; } /* ═══════════════════════════════════════════════════════════ 📊 GRID SYSTEM - 網格系統 ═══════════════════════════════════════════════════════════ */ .grid, .style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2rem; margin-bottom: 2rem; padding: 1rem; background: var(--glass-bg); backdrop-filter: blur(var(--blur)); border-radius: var(--radius); border: 1px solid var(--glass-border); } /* ============================================================= 🧱 風格選擇卡片 ============================================================= */ .style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 1200px; margin: 3rem auto; padding: 0 2rem; } .style-card { background: var(--glass-bg); border-radius: 12px; padding: 0.75rem; cursor: pointer; transition: all var(--duration) var(--ease); border: 2px solid transparent; position: relative; overflow: hidden; } .style-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(56,189,248,0.3); } .style-card.active { border-color: var(--cyan); background: linear-gradient(135deg, rgba(56,189,248,0.2), rgba(251,191,36,0.2)); box-shadow: 0 0 20px rgba(56,189,248,0.5); } .style-card.active::before { content: '✓'; position: absolute; top: 8px; right: 8px; background: var(--cyan); color: #000; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; z-index: 2; } /* Desktop Grid Spacing */ @media screen and (min-width: 750px) { .grid { column-gap: var(--grid-desktop-horizontal-spacing); row-gap: var(--grid-desktop-vertical-spacing); } } .grid:last-child { margin-bottom: 0; } .grid__item { width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4); max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2); flex-grow: 1; flex-shrink: 0; } @media screen and (min-width: 750px) { .grid__item { width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4); max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); } } /* Gapless Grid */ .grid--gapless.grid { column-gap: 0; row-gap: 0; } @media screen and (max-width: 749px) { .grid__item.slider__slide--full-width { width: 100%; max-width: none; } }/* ═══════════════════════════════════════════════════════════ 🎯 GRID COLUMN VARIANTS - 1-3 Columns ═══════════════════════════════════════════════════════════ */ .grid--1-col .grid__item { max-width: 100%; width: 100%; } .grid--3-col .grid__item { width: calc(33.33% - var(--grid-mobile-horizontal-spacing) * 2 / 3); } @media screen and (min-width: 750px) { .grid--3-col .grid__item { width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3); } } .grid--2-col .grid__item { width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2); } @media screen and (min-width: 750px) { .grid--2-col .grid__item { width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); } } /* ═══════════════════════════════════════════════════════════════ */ /* 📡 網路狀態指示器 - 非首屏關鍵 */ /* ═══════════════════════════════════════════════════════════════ */ .network-indicator { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); background: rgba(239, 68, 68, 0.95); color: white; padding: 12px 24px; border-radius: 50px; font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; z-index: 9999; backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); opacity: 0; pointer-events: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .network-indicator.offline { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; background: linear-gradient(135deg, #ef4444, #dc2626); animation: pulse-offline 2s infinite; } .network-indicator.online { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; background: linear-gradient(135deg, #22c55e, #16a34a); animation: slideUp 0.4s ease; } .indicator-icon { font-size: 1.2rem; display: inline-block; animation: rotate 2s linear infinite; } .network-indicator.online .indicator-icon { animation: bounce 0.6s ease; } .network-indicator.offline .indicator-icon { animation: shake 0.5s ease infinite; } .indicator-text { font-size: 0.9rem; } /* ═══════════════════════════════════════════════════════════════ */ /* 💰 GFun 餘額徽章 */ /* ═══════════════════════════════════════════════════════════════ */ #gfun-chat-badge { position: fixed; bottom: 20px; right: 20px; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 12px 20px; color: white; cursor: pointer; z-index: 9998; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; animation: pulse 3s infinite; } #gfun-chat-badge:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(56, 189, 248, 0.4); } .gfun-label { font-size: 0.75rem; opacity: 0.8; margin-bottom: 4px; } .gfun-amount { font-size: 1.1rem; font-weight: 700; background: linear-gradient(135deg, #38bdf8, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ═══════════════════════════════════════════════════════════════ */ /* 💬 聊天載入指示器 */ /* ═══════════════════════════════════════════════════════════════ */ .chat-loader { position: fixed; bottom: 24px; right: 24px; width: 64px; height: 64px; background: linear-gradient(135deg, #38bdf8, #fbbf24); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 9997; animation: chatPulse 2s infinite; box-shadow: 0 8px 32px rgba(56, 189, 248, 0.3); } .chat-loader-icon { font-size: 2rem; } /* ═══════════════════════════════════════════════════════════════ */ /* 🍪 Cookie Banner */ /* ═══════════════════════════════════════════════════════════════ */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 1.5rem; z-index: 9999; animation: slideUp 0.3s ease; } .cookie-content { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .cookie-content p { margin: 0; color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; } .cookie-actions { display: flex; gap: 1rem; } .cookie-actions button { padding: 0.75rem 1.5rem; border: none; border-radius: 50px; font-weight: 600; cursor: pointer; transition: all 0.3s; } .btn-accept { background: linear-gradient(135deg, #38bdf8, #fbbf24); color: #000; } .btn-accept:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(56, 189, 248, 0.5); } .btn-decline { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); } .btn-decline:hover { background: rgba(255, 255, 255, 0.15); } /* ═══════════════════════════════════════════════════════════ 💻 TABLET GRID VARIANTS ═══════════════════════════════════════════════════════════ */ @media screen and (min-width: 750px) { .grid--4-col-tablet .grid__item { width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4); } .grid--3-col-tablet .grid__item { width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3); } .grid--2-col-tablet .grid__item { width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); } } @media screen and (max-width: 989px) { .grid--1-col-tablet-down .grid__item { width: 100%; max-width: 100%; } .slider--tablet.grid--peek { margin: 0; width: 100%; } .slider--tablet.grid--peek .grid__item { box-sizing: content-box; margin: 0; } .slider.slider--tablet .scroll-trigger.animate--slide-in, .slider.slider--mobile .scroll-trigger.animate--slide-in { animation: none; opacity: 1; transform: inherit; } .scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet { animation: var(--animation-slide-in); } } /* === Dr.G Avatar === */ .drg-avatar { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 20px rgba(251, 191, 36, 0.3); transition: all var(--duration) var(--ease); } .drg-avatar:hover { transform: scale(1.1) rotate(5deg); box-shadow: 0 0 30px rgba(251, 191, 36, 0.6); } .drg-avatar-lg { width: 128px; height: 128px; } /* ═══════════════════════════════════════════════════════════ 🖥️ DESKTOP GRID VARIANTS - 2-6 Columns (合併媒體查詢) ═══════════════════════════════════════════════════════════ */ @media screen and (min-width: 990px) { .grid--6-col-desktop .grid__item { width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6); max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6); } .grid--5-col-desktop .grid__item { width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5); max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5); } .grid--4-col-desktop .grid__item { width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4); max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4); } .grid--3-col-desktop .grid__item { width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3); max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3); } .grid--2-col-desktop .grid__item { width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); } /* 1 Column Desktop */ .grid--1-col-desktop { flex: 0 0 100%; max-width: 100%; } .grid--1-col-desktop .grid__item { width: 100%; max-width: 100%; } /* Slider Animations */ .slider.slider--desktop .scroll-trigger.animate--slide-in { animation: none; opacity: 1; transform: inherit; } .scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop { animation: var(--animation-slide-in); } } /* ═══════════════════════════════════════════════════════════ 👀 PEEK GRID VARIANTS - Mobile ═══════════════════════════════════════════════════════════ */ @media screen and (max-width: 749px) { .grid--peek.slider--mobile { margin: 0; width: 100%; } .grid--peek.slider--mobile .grid__item { box-sizing: content-box; margin: 0; } .grid--peek .grid__item { min-width: 35%; } .grid--peek.slider .grid__item:first-of-type { margin-left: 1.5rem; } /* Fix to show some space at the end of sliders */ .grid--peek.slider:after { margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing)); } .grid--2-col-tablet-down .grid__item { width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2); } .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item, .grid--peek .grid__item { width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem); } .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item, .slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item { width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem); } } /* ═══════════════════════════════════════════════════════════ 👀 PEEK GRID VARIANTS - Tablet ═══════════════════════════════════════════════════════════ */ @media screen and (min-width: 750px) and (max-width: 989px) { .slider--tablet.grid--peek .grid__item { width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem); } .slider--tablet.grid--peek.grid--3-col-tablet .grid__item { width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem); } .slider--tablet.grid--peek.grid--2-col-tablet .grid__item, .slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item { width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem); } .slider--tablet.grid--peek .grid__item:first-of-type { margin-left: 1.5rem; } .grid--2-col-tablet-down .grid__item { width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2); } .grid--1-col-tablet-down.grid--peek .grid__item { width: calc(100% - var(--grid-desktop-horizontal-spacing) - 3rem); } } /* ═══════════════════════════════════════════════════════════ 🎨 API SHOWCASE - API 展示 ═══════════════════════════════════════════════════════════ */ .api-category { margin: 4rem 0; } .api-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem; } .api-card { background: var(--glass-bg); backdrop-filter: blur(var(--blur)); border-radius: var(--radius-md); padding: 32px; border: 1px solid var(--glass-border); transition: all 0.4s var(--ease-default); cursor: pointer; } .api-card:hover { transform: translateY(-8px); box-shadow: 0 12px 48px rgba(56, 189, 248, 0.3); background: var(--glass-hover); } .api-icon { font-size: 3.5rem; margin-bottom: 1.5rem; } .api-desc { color: rgba(255, 255, 255, 0.75); line-height: 1.7; margin-bottom: 1.5rem; } .api-pricing { display: flex; justify-content: center; align-items: center; padding: 1rem; background: rgba(251, 191, 36, 0.1); border-radius: var(--radius-sm); margin-bottom: 1.5rem; } .price { font-size: 1.8rem; font-weight: 700; color: var(--gold); } .type { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; } /* ═══════════════════════════════════════════════════════════ 🎯 UTILITY CLASSES - 工具類 ═══════════════════════════════════════════════════════════ */ .cta-text { color: white; font-size: 16px; font-weight: 600; margin-bottom: 20px; } .fog-bg { background: radial-gradient(circle at 30% 30%, #0b1120, #020617); position: relative; overflow: hidden; } #floating-blobs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.5; } .text-glow { background: var(--heading-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ======================================== 4. Glassmorphism 玻璃質感系統 (核心) ======================================== */ /* Basic Glass Effect */ .glass { background: var(--glass-bg); backdrop-filter: blur(var(--blur)); border-radius: var(--radius-md); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); border: 1px solid var(--glass-border); transition: all var(--duration) var(--ease); } .glass:hover { background: var(--glass-hover); transform: translateY(-6px); box-shadow: 0 0 25px rgba(255, 255, 255, 0.15); } .glass-card-lg { padding: 32px; border-radius: var(--radius-lg); position: relative; } .glass-card-lg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--gold)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .gradient-text-full { background: linear-gradient(135deg, var(--cyan), var(--magenta), var(--gold)); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientShift 5s ease infinite; } /* 漸層文字 */ .gradient-text { background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .glass-sm { background: var(--glass-bg); backdrop-filter: blur(var(--blur-sm)); border-radius: var(--radius-md); border: 1px solid var(--glass-border); } .glass-lg { background: var(--glass-bg); backdrop-filter: blur(var(--blur-lg)); border-radius: var(--radius-xl); border: 1px solid var(--glass-border); box-shadow: var(--shadow-xl); } /* 玻璃卡片 */ .glass-card { background: var(--glass-bg); border-radius: var(--radius-lg); position: relative; overflow: hidden; backdrop-filter: blur(var(--blur)); box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1); transition: all var(--duration) var(--ease); margin-bottom: 2rem; -webkit-backdrop-filter: blur(var(--blur)); padding: 32px; } .glass-card.clickable { cursor: pointer; position: relative; overflow: hidden; } .glass-card:hover { background: var(--glass-hover); transform: translateY(-6px); box-shadow: 0 0 25px rgba(255,255,255,0.15); } .glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent ); } .glass-card:hover { background: linear-gradient( 145deg, rgba(56, 189, 248, 0.1) 0%, rgba(217, 70, 239, 0.1) 50%, rgba(251, 191, 36, 0.1) 100% ); border-color: var(--glass-border-hover); transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.2) inset; } /* 🪞 Glow System */ .glow { box-shadow: 0 0 40px rgba(56, 189, 248, 0.2), 0 0 80px rgba(217, 70, 239, 0.2); } .glow-hover:hover { transform: scale(1.03); box-shadow: 0 0 60px rgba(217, 70, 239, 0.5); } .award-glow { border: 1px solid rgba(251, 191, 36, 0.4); box-shadow: 0 0 50px rgba(251, 191, 36, 0.15) inset; } .text-glow { text-shadow: 0 0 25px rgba(59, 130, 246, 0.3); } /* ═══════════════════════════════════════════════════════════ 🎨 GRADIENT BORDER - 漸層邊框 ═══════════════════════════════════════════════════════════ */ .gradient-border { position: relative; border-radius: var(--radius-md); } .gradient-border::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(135deg, rgba(56, 189, 248, 0.8), rgba(217, 70, 239, 0.6)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* ═══════════════════════════════════════════════════════════ 📦 MODULES & DASHBOARD - 模組和儀表板 ═══════════════════════════════════════════════════════════ */ .modules, .dashboard-preview { -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: var(--shadow-md); transition: all var(--transition-base) var(--ease-default); display: flex; border-radius: var(--radius-md); align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; padding: 120px 10%; text-align: center; } /* ═══════════════════════════════════════════════════════════ 🎯 UTILITY SECTIONS - 工具區塊 ═══════════════════════════════════════════════════════════ */ /* 玻璃質感卡片 */ .card, .section, [class*="Card"], [class*="Section"] { background: var(--glass-bg) !important; backdrop-filter: blur(var(--blur)) !important; border-radius: var(--radius) !important; border: 1px solid var(--glass-border) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important; } .story-bridge { padding: 3rem 2rem; margin-bottom: 2rem; } .prompt-section { position: relative; } /* ═══════════════════════════════════════════════════════════ 🌗 DARK MODE - 深色模式支援 ═══════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { .business-card, .feature-card, .module-card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); } .home-core-business { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(248, 250, 252, 0.02)); } } /* ═══════════════════════════════════════════════════════════ ✨ HOVER EFFECTS - 統一 Hover 效果 ═══════════════════════════════════════════════════════════ */ .container { max-width: 1200px; margin: 0 auto; padding: 32px; } .section:hover, .container:hover, .glass-container:hover, .comparison-container:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); background-color: transparent !important; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, var(--cyan) 0%, transparent 50%), radial-gradient(circle at 80% 70%, var(--magenta) 0%, transparent 50%); opacity: 0.04; animation: gradientShift 20s ease infinite; z-index: 0; } .hero:hover, .modules:hover, .dashboard-preview:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } /* ═══════════════════════════════════════════════════════════ 🎴 CARD VARIANTS - 卡片變體 ═══════════════════════════════════════════════════════════ */ .chapter-card, .feature-card, .service-card { background: var(--glass-bg); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); padding: var(--spacing-md); border-radius: var(--radius-md); border: 1px solid var(--glass-border); text-align: center; transition: all 0.4s var(--ease); box-shadow: var(--glass-shadow); } .chapter { padding: 8rem 2rem; position: relative; display: flex; align-items: center; justify-content: center; } .service-card:hover { transform: translateY(-8px) scale(1.02); background: linear-gradient(145deg, rgba(56, 189, 248, 0.1) 10%, rgba(217, 70, 239, 0.1) 60%, rgba(251, 191, 36, 0.1) 90%); box-shadow: 0 0 40px rgba(255, 255, 255, 0.2); } .business-card:hover { transform: perspective(900px) rotateX(2deg) translateY(-8px); } .service-card img { border-radius: var(--radius-md); margin-bottom: var(--spacing-sm); width: 100%; height: auto; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); } .service-card:hover img { transform: translateY(-15px) rotateY(5deg) scale(1.05); } .service-card h3 { font-size: 1.25rem; font-weight: 600; background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: var(--spacing-xs); } .service-card p { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; line-height: 1.6; } /* Feature Card */ .feature-card { background: rgba(26, 35, 50, 0.5); border: 1px solid rgba(56, 189, 248, 0.12); border-radius: 16px; padding: 2rem; position: relative; overflow: hidden; } .feature-card:hover { background: var(--glass-hover); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .chapter-card img, .feature-card img, .service-card img { border-radius: var(--radius-lg); width: 100%; height: auto; margin-bottom: 1.5rem; } /* ═══════════════════════════════════════════════════════════ 🔢 CHAPTER & STEP NUMBERS - 章節編號 ═══════════════════════════════════════════════════════════ */ .chapter-number { font-size: clamp(0.9rem, 2vw, 1rem); color: var(--gold); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.5rem; opacity: 0; transform: translateY(30px); transition: all var(--slow-duration) var(--slow-ease); } .chapter-title { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; margin-bottom: 2rem; line-height: 1.2; letter-spacing: -0.02em; opacity: 0; transform: translateY(30px); transition: all var(--slow-duration) var(--slow-ease); } .step-number, .section-number { border-radius: var(--radius-xl); width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--cyan), var(--magenta)); color: #fff; font-weight: 800; font-size: 1.5rem; box-shadow: 0 4px 16px rgba(56, 189, 248, 0.4); margin-bottom: 1.5rem; } .chapter-number-sm { border-radius: var(--radius-xl); width: 40px; height: 40px; font-size: 1rem; } /* ═══════════════════════════════════════════════════════════ ✍️ TYPOGRAPHY - 字體系統 ═══════════════════════════════════════════════════════════ */ .text-body, p { font-size: 16px; letter-spacing: 0.06rem; line-height: 1.8; font-family: var(--font-family); } /* Style Section */ .style-section { margin-bottom: 30px; } .card-title { font-size: clamp(18px, 3vw, 24px); color: var(--cyan); margin-bottom: var(--space-sm); font-weight: 700; } /* 底部標題 */ .bottom-title { font-size: 2rem; font-weight: 800; margin-bottom: 15px; letter-spacing: 1px; } /* Toggle 標籤 */ .toggle-label { font-size: 1.5rem; font-weight: 800; color: var(--text-dark); letter-spacing: 1px; } .hero-subtitle { font-size: 1rem; /* ✅ 16px */ color: rgba(255,255,255,0.8); max-width: 600px; margin: 0 auto 2rem; line-height: 1.6; font-weight: 400; animation: fadeInUp 0.8s cubic-bezier(0.4,0,0.2,1) 0.4s both; } h2, .h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); /* 28-40px */ font-weight: 800; background: var(--heading-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.3; letter-spacing: -0.01em; color: var(--neutral-dark); margin-bottom: var(--space-md); } h3, .card-title { font-size: clamp(1.2rem, 3vw, 1.5rem); /* 19-24px */ font-weight: 700; color: var(--neutral-dark); margin-bottom: 18px; line-height: 1.4; } .card-description { font-size: 0.95rem; /* 15px */ } h4, .subsection-title, h6, .h6 { font-size: 1.25rem; /* 20px */ font-weight: 700; color: var(--neutral-dark); margin-bottom: 15px; line-height: 1.4; } h5, .item-title { font-size: 1.125rem; /* 18px */ } h6, .label-title { font-size: 1rem; /* 16px */ } /* P - 正文 */ p { font-size: 1rem; /* 16px ✅ 標準閱讀大小 */ } /* Small - 小字 */ small, .text-small { font-size: 0.875rem; /* 14px */ } /* ═══════════════════════════════════════════════════════════ 📱 RESPONSIVE TYPOGRAPHY ═══════════════════════════════════════════════════════════ */ /* 桌面端 (預設) */ body { font-size: 16px; /* 基準 */ } /* 平板端 (≤ 1024px) */ @media (max-width: 1024px) { h1, .hero-title { font-size: clamp(1.75rem, 5vw, 2.5rem); /* 28-40px */ } h2, .section-title { font-size: clamp(1.5rem, 4vw, 2rem); /* 24-32px */ } h3, .card-title { font-size: clamp(1.125rem, 3vw, 1.375rem); /* 18-22px */ } } /* ======================================== 雙平台卡片系統 ======================================== */ .dual-platform { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 2.5rem; margin: 4rem auto; max-width: 1200px; padding: 0 1rem; } /* ═══════════════════════════════════════════════════════════ 🏷️ BADGES - 徽章系統 ═══════════════════════════════════════════════════════════ */ .badge { border-radius: var(--radius-xl); padding: 0.5rem 1.5rem; background: rgba(255, 255, 255, 0.1); color: #000; font-weight: 600; font-size: 0.875rem; display: inline-block; box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3); transition: all var(--duration-medium) var(--ease-default); } .badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 20px; padding: 0.4rem 1rem; font-size: 0.9rem; font-weight: 600; color: #22c55e; } .badge::before { content: '💰'; font-size: 1.2rem; } .badge { position: absolute; top: 1rem; right: 1rem; padding: 0.3rem 0.8rem; border-radius: 12px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .badge-new { background: rgba(56, 189, 248, 0.2); color: #60a5fa; border: 1px solid rgba(56, 189, 248, 0.4); } .badge-hot { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); } .badge-premium { background: rgba(251, 191, 36, 0.2); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.4); } /* Badge 變體 */ .badge--tier { /* 層級徽章 */ } .badge--status { /* 狀態徽章 */ } .badge--gfun { /* GFun 徽章 */ } .badge--local { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4); } .badge--premium { background: linear-gradient(135deg, var(--magenta), var(--gold)); color: #fff; } .badge--free { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid var(--glass-border); } /* ═══════════════════════════════════════════════════════════ 🖼️ IMAGE SYSTEM - 統一圖片系統 ═══════════════════════════════════════════════════════════ */ img { max-width: 100%; height: auto; display: block; } .hero-image, .banner-image, .feature-image { width: 100% !important; height: auto !important; object-fit: contain !important; /* 改為 contain 防止裁切 */ border-radius: var(--radius-sm); } .image-container, .product-single__media-wrapper, .media, .comparison-container, .media-wrapper { background: rgba(0, 0, 0, 0.3); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); transition: all var(--duration-medium) var(--ease-default); } /* ======================================== 4. Product Image & Card Media ======================================== */ /* 產品圖片 - 保持比例 */ .product-image, .card__media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: var(--space-sm); transition: transform var(--duration-medium) var(--ease-default); background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; } .image-container img, .product-single__media-wrapper img { width: 100% !important; height: auto !important; object-fit: contain !important; } .product-icon { width: 80px; height: 80px; margin: 0 auto 1.5rem; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; background: linear-gradient(135deg, var(--cyan), var(--magenta)); box-shadow: 0 10px 30px rgba(56,189,248,0.3); } .product-card:hover { background: linear-gradient(145deg, rgba(56,189,248,0.1) 0%, rgba(217,70,239,0.1) 50%, rgba(251,191,36,0.1) 100%); transform: scale(1.05) translateY(-8px); box-shadow: 0 0 40px rgba(56,189,248,0.3); } .product-name { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.8rem; color: #fff; } .product-tagline { font-size: 0.95rem; color: rgba(255,255,255,0.65); margin-bottom: 1.5rem; } .product-gfun { display: inline-block; background: rgba(251,191,36,0.2); color: var(--gold); padding: 0.5rem 1.2rem; border-radius: 50px; font-size: 0.9rem; font-weight: 700; margin-top: 1rem; border: 1px solid rgba(251,191,36,0.3); } /* ═══════════════════════════════════════════════════════════ 🖼️ MEDIA COMPONENT - 媒體組件 ═══════════════════════════════════════════════════════════ */ .media { display: block; background-color: rgba(var(--color-foreground), 0.1); position: relative; overflow: hidden; } .media--transparent { background-color: transparent; } .media > *:not(.zoom):not(.deferred-media__poster-button), .media model-viewer { display: block; max-width: 100%; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .media > img { object-fit: cover; object-position: center center; transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Media Aspect Ratios */ .media--square { padding-bottom: 100%; } .media--portrait { padding-bottom: 125%; } .media--landscape { padding-bottom: 66.6%; } .media--cropped { padding-bottom: 56%; } .media--16-9 { padding-bottom: 56.25%; } .media--circle { padding-bottom: 100%; border-radius: 50%; } .media.media--hover-effect > img + img { opacity: 0; } @media screen and (min-width: 990px) { .media--cropped { padding-bottom: 63%; } } deferred-media { display: block; } @media (max-width: 768px){ .product-grid, .collection-grid { grid-template-columns: 1fr; gap: var(--space-sm); } } /* ======================================== 2. Product Grid & Collection Grid ======================================== */ .business-card, .feature-card, .card { background: var(--glass-bg) !important; backdrop-filter: blur(var(--blur)); padding: var(--space-lg); box-shadow: var(--shadow-md); transition: all var(--duration-medium) var(--ease-default); cursor: pointer; position: relative; overflow: hidden; text-align: center; border-radius: var(--radius); border: 1px solid var(--glass-border); } .card, .collection-card, .product-item, .setting-item { padding: 20px; border-radius: 20px; margin: 15px 0; } .business-card, .module-card { background: white; border-radius: var(--radius-lg); padding: 40px 30px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); border: 2px solid transparent; position: relative; overflow: hidden; cursor: pointer; text-align: center; } .business-card:hover, .feature-card:hover, .module-card:hover { transform: translateY(-8px); border-color: var(--cyan); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); } .business-card img, .module-card img, .hero-image img, .dashboard-visual img { width: 100%; height: auto; border-radius: var(--radius-md); aspect-ratio: 4/3; object-fit: cover; display: block; box-shadow: 0 30px 100px rgba(0, 0, 0, 0.4); transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); } .business-card:hover img, .module-card:hover img { transform: scale(1.05); } .business-card h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; background: linear-gradient(90deg,var(--cyan),var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .business-card p { color: rgba(255,255,255,0.75); } .business-card p{ color: #cbd5e1; } } /* ═══════════════════════════════════════════════════════════ 🎴 CARD SYSTEM - Dark Mode Support ═══════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { .business-card, .feature-card, .module-card { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border: none; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } .business-card h4, .module-card h3 { background: linear-gradient(90deg, #60a5fa, #fbbf24, #ffffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .business-card p, .module-card p { color: #cbd5e1; } .business-card h5, .business-card h6 { color: #6ee7b7; } } /* ═══════════════════════════════════════════════════════════ 🎨 unified-module ═══════════════════════════════════════════════════════════ */ /* ========== 1. 統一容器結構 ========== */ .unified-module { background: var(--glass-bg); backdrop-filter: blur(var(--blur)); border-radius: var(--radius); border: 1px solid var(--glass-border); padding: 3rem 2rem; margin: 3rem auto; max-width: 1200px; box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1); } /* ========== 2. 統一標題樣式 ========== */ .unified-module-title { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; text-align: center; margin-bottom: 1.5rem; background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; display: inline-block; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); letter-spacing: -0.01em; } .unified-module-title:hover { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(56,189,248,0.5)); } /* ========== 3. 統一描述文字 ========== */ .unified-homepage-desc { text-align: center; color: rgba(255,255,255,0.75); font-size: 1.1rem; margin-bottom: 2rem; line-height: 1.6; max-width: 800px; margin-left: auto; margin-right: auto; } /* ========== 4. 統一產品網格 ========== */ .unified-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin: 3rem 0; } .unified-product-image { border-radius: var(--radius); margin-bottom: 1.5rem; width: 100%; height: auto; max-width: 120px; display: block; margin-left: auto; margin-right: auto; } .unified-product-image { max-width: 100%; } } /* 統一圖標 */ .unified-icon { font-size: 4rem; margin: 1rem 0; filter: drop-shadow(0 0 20px var(--cyan)); } /* 統一箭頭指示器 */ .unified-arrow { position: absolute; bottom: 0.5rem; right: 0.5rem; color: var(--cyan); font-size: 1.2rem; opacity: 0.5; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); } /* ========== 5. 統一產品卡片 ========== */ .unified-product-card { background: rgba(255,255,255,0.08); backdrop-filter: blur(var(--blur)); border-radius: var(--radius); border: 2px solid transparent; padding: 32px 1.5rem; text-align: center; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4,0,0.2,1); min-height: 180px; display: flex; flex-direction: column; justify-content: center; } .unified-product-card:hover { transform: translateY(-6px); box-shadow: 0 0 25px rgba(255,255,255,0.15); background: linear-gradient(145deg, rgba(56,189,248,0.1) 10%, rgba(217,70,239,0.1) 60%, rgba(251,191,36,0.1) 90%); } /* ========== 6. 統一圖片樣式 ========== */ .unified-product-image, .feature-card img { width: 120px; height: 120px; margin: 0 auto 1.5rem; display: block; filter: drop-shadow(0 4px 12px rgba(56,189,248,0.3)); transition: transform 0.4s var(--ease); } .unified-product-card:hover .unified-product-image, .feature-card:hover img { transform: scale(1.1) rotate(5deg); } /* ========== 7. 統一產品標題 ========== */ .platform-card h3 { font-size: 1.8rem; font-weight: 700; margin-bottom: 1.5rem; background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .feature-card h3 { font-size: 1.3rem; font-weight: 700; background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1.5rem; } .feature-card:hover h3 { -webkit-text-fill-color: #fff; } /* ========== 8. 統一產品描述 ========== */ .feature-card p { color: rgba(255,255,255,0.8); line-height: 1.6; margin-bottom: 1.5rem; font-size: 0.95rem; } .feature-card:hover p { color: rgba(255,255,255,0.95); } .feature-tag { background: rgba(56,189,248,0.1); color: var(--cyan); padding: 0.4rem 0.8rem; border-radius: 50px; font-size: 0.8rem; border: 1px solid rgba(56,189,248,0.3); font-weight: 500; } .service-price { color: var(--gold); font-weight: 700; font-size: 1.2rem; margin-bottom: 0.5rem; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: var(--radius-full); font-family: var(--font-main); font-weight: 600; font-size: 1rem; text-decoration: none; transition: all var(--duration-medium) var(--ease-smooth); border: none; cursor: pointer; white-space: nowrap; position: relative; overflow: hidden; line-height: 1; } .btn-primary { background: linear-gradient(135deg, var(--cyan), var(--gold)); color: #000; padding: 1rem 2rem; border-radius: 50px; font-weight: 600; border: none; cursor: pointer; transition: all var(--duration) var(--ease); position: relative; overflow: hidden; display: inline-block; text-decoration: none; font-family: var(--font-body); } .btn:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); } .btn::before, .btn-primary::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent); opacity: 0; transition: opacity var(--duration-fast); } .btn:hover::before, .btn-secondary { width: 100%; padding: 0.75rem; background: rgba(255,255,255,0.1); color: #fff; border: 1px solid var(--glass-border); border-radius: 50px; font-weight: 600; cursor: pointer; transition: all var(--duration) var(--ease); margin-top: 0.5rem; } .btn-secondary:hover { background: rgba(255,255,255,0.15); } .btn-primary:active { transform: translateY(0) scale(0.98); } .btn-primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 24px rgba(56, 189, 248, 0.5), 0 0 40px rgba(251, 191, 36, 0.3); color: #000000; } .btn-glass { background: var(--glass-bg); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); color: #ffffff; padding: 1rem 2rem; border-radius: 50px; border: 1px solid var(--glass-border); font-weight: 600; cursor: pointer; transition: all var(--duration) var(--ease); display: inline-block; text-align: center; } .btn-glass:hover { background: var(--glass-hover); border-color: var(--cyan); box-shadow: 0 0 20px rgba(56, 189, 248, 0.3); color: #ffffff; transform: translateY(-2px); } /* ========== 10. 按鈕顏色變體 ========== */ /* 教育模組 - 紫色 */ .btn-schools { background: linear-gradient(135deg, var(--purple), #6366f1); color: #fff; } /* 娛樂模組 - 粉色 */ .btn-entertainment { background: linear-gradient(135deg, var(--pink), #db2777); color: #fff; } /* 食物模組 - 綠色 */ .btn-food { background: linear-gradient(135deg, var(--green), #16a34a); color: #fff; } /* 住房模組 - 金色 */ .btn-housing { background: linear-gradient(135deg, var(--gold), #f59e0b); color: #000; } /* 交通模組 - 紫紅 */ .btn-transport { background: linear-gradient(135deg, var(--magenta), #a855f7); color: #fff; } /* GIS模組 - 青色 */ .btn-gis { background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; } /* ======================================== 敘事橋接區 ======================================== */ .narrative-bridge { margin-top: 28px; padding: 28px; border-radius: 16px; background: linear-gradient(135deg, rgba(56,189,248,0.03), rgba(217,70,239,0.02)); } .narrative-bridge h2 { color: var(--dark-bg); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: 1rem; text-align: center; } .narrative-bridge .muted { color: #64748b; font-size: 1.1rem; text-align: center; margin-bottom: 1.5rem; } .narrative-bridge .btn-primary { display: inline-block; margin: 0 auto; } .bridge-line { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.4; max-width: 1200px; margin-bottom: 2rem; opacity: 0; transform: translateY(40px); transition: all var(--slow-duration) var(--slow-ease); } .section-subtitle { font-size: clamp(1.2rem, 3vw, 1.8rem); color: rgba(255,255,255,0.7); font-weight: 600; opacity: 0; transform: translateY(40px); transition: all var(--slow-duration) var(--slow-ease); transition-delay: calc(var(--reveal-delay) * 1); } /* ======================================== 平台影響力區域 ======================================== */ .platform-impact { text-align: center; padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 3vw, 2rem); max-width: 1200px; margin: 0 auto; } .platform-impact h3 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: 1.5rem; background: linear-gradient(90deg, #fff, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .platform-impact p { font-size: 1.1rem; line-height: 1.8; color: rgba(255,255,255,0.85); } .cta-section { text-align: center; padding: 6rem 2rem; background: var(--glass-bg); backdrop-filter: blur(var(--blur)); border-radius: var(--radius); margin: 4rem 2rem; border: 1px solid var(--glass-border); position: relative; overflow: hidden; } .cta-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(56,189,248,0.1) 0%, rgba(217,70,239,0.1) 50%, rgba(251,191,36,0.1) 100%); opacity: 0; transition: opacity var(--slow-duration) var(--slow-ease); } .cta-inner { position: relative; z-index: 1; } .cta-inner h2, .cta h2 { font-size: clamp(2rem, 4vw, 2.4rem); font-weight: 700; margin-bottom: 1.5rem; background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .cta-inner p, .cta p { margin: 1rem auto; max-width: 600px; color: var(--text-light); font-size: 1.1rem; line-height: 1.6; } /* ========== 11. 響應式設計 ========== */ @media (max-width: 1024px) { .unified-module { padding: 2.5rem 1.5rem; margin: 2rem auto; } .unified-product-grid, { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .hero-grid { flex-direction: column; text-align: center; } .hero-cta { flex-direction: column; } } @media (max-width: 768px){ .unified-module { padding: 1.5rem 0.8rem; } .unified-product-grid, .feature-grid { gap: 2rem; } .unified-product-card, .feature-card { padding: 1.2rem; } .home-core-business { margin: 30px auto; } .micro-nav a, .sidebar-nav a, .module-nav a, nav a, .header__menu-item a { color: rgba(255, 255, 255, 0.95) !important; text-decoration: none; font-weight: 500; padding: 0.5rem 1rem; display: inline-block; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; position: relative; } /* Hover 狀態 - 統一漸層效果 */ .micro-nav a:hover, .sidebar-nav a:hover, .module-nav a:hover, nav a:hover, .header__menu-item a:hover { background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(251, 191, 36, 0.15)) !important; color: #fbbf24 !important; transform: translateX(4px); box-shadow: 0 2px 8px rgba(251, 191, 36, 0.2); } /* Focus 狀態 - 無障礙優化 */ .micro-nav a:focus, .sidebar-nav a:focus, .module-nav a:focus, .cookie-nav a:focus, nav a:focus { outline: 2px solid #38bdf8; outline-offset: 2px; background: rgba(56, 189, 248, 0.1) !important; } /* Active 活動狀態 */ .sidebar-nav a.active, .module-nav a.active, .micro-nav a.active { background: linear-gradient(135deg, #38bdf8, #fbbf24) !important; color: #000 !important; font-weight: 600; box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3); } /* 大屏幕 (1400px以上) */ @media (min-width: 1400px) { .unified-module, .home-core-business { max-width: 1400px; } .unified-product-grid, .feature-grid { grid-template-columns: repeat(4, 1fr); } .unified-module { animation: fadeUp 0.6s ease-out; } .unified-product-card, .feature-card { animation: fadeUp 0.8s ease-out; animation-fill-mode: both; } .unified-product-card:nth-child(1), .feature-card:nth-child(1) { animation-delay: 0.1s; } .unified-product-card:nth-child(2), .feature-card:nth-child(2) { animation-delay: 0.2s; } .unified-product-card:nth-child(3), .feature-card:nth-child(3) { animation-delay: 0.3s; } .unified-product-card:nth-child(4), .feature-card:nth-child(4) { animation-delay: 0.4s; } /* ========== 13. 無障礙設計 ========== */ .btn:focus, .btn-primary:focus, .unified-module-title:focus, .feature-card h3:focus, .micro-nav a:focus { outline: 2px solid var(--cyan); outline-offset: 4px; } /* 減少動畫（尊重用戶偏好） */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========== 17. 打印樣式 ========== */ @media print { .unified-module, .feature-card, .cta-section { background: #fff; border: 1px solid #000; box-shadow: none; backdrop-filter: none; } .btn, .btn-primary, .micro-nav { display: none; } } /* ========== 18. module-nav ========== */ /* Module Nav 模組導航 */ .module-nav a { display: inline-block; margin-right: 1rem; padding: 0.6rem 1.2rem; background: rgba(255, 255, 255, 0.08); border-radius: 12px; } .module-nav a:hover { background: linear-gradient(135deg, #38bdf8, #d946ef) !important; color: #fff !important; } /* 統一模組徽章 */ .unified-badge { backdrop-filter: blur(10px); border-radius: 50px; letter-spacing: 1px; text-transform: uppercase; display: inline-block; background: rgba(251,191,36,0.2); color: var(--gold); padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; margin-bottom: 1.5rem; border: 1px solid rgba(251,191,36,0.3); } /* 統一價格標籤 */ .unified-price { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin-bottom: 1.5rem; } /* 統一描述文字 */ .unified-desc { color: rgba(255,255,255,0.75); font-size: 0.95rem; line-height: 1.6; } .module-nav{position:sticky;top:0;background:#fff;padding:1rem;border-radius:15px;box-shadow:0 4px 20px rgba(0,0,0,0.1);margin-bottom:2rem;z-index:100} .module-nav a{display:inline-block;padding:0.8rem 1.5rem;margin:0.5rem;border-radius:20px;text-decoration:none;font-weight:700;border:2px solid #8B4B8C;transition:all 0.3s}.module-nav a:hover{transform:translateY(-3px);box-shadow:0 4px 15px rgba(139,75,140,0.3)}.module-section{scroll-margin-top:120px;margin-bottom:3rem} /* ═══════════════════════════════════════════════════════════ 🎨 CARD CONTENT STYLES ═══════════════════════════════════════════════════════════ */ .business-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #2563eb, #fbbf24); transform: scaleX(0); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .business-card:hover::before { transform: scaleX(1); } .business-card h3, .card h3 { font-size: 1.8rem; font-weight: 600; background: var(--heading-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: var(--space-sm); } .business-card p, .card p { font-size: clamp(13px, 1.8vw, 15px); margin: 0 20px 20px 20px; color: #475569; line-height: 1.8; } /* Card 光暈效果 */ .card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(56, 189, 248, 0.05), rgba(251, 191, 36, 0.05)); opacity: 0; transition: opacity var(--duration-medium) var(--ease-default); pointer-events: none; } .card:hover::before { opacity: 1; } .card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .card:hover img { transform: scale(1.05); } .card:active { transform: scale(0.98); } /* Card 內容 */ .card img { border-radius: var(--radius-sm); margin-bottom: var(--space-sm); width: 100%; height: auto; } .card-title, .card__heading { font-size: var(--mobile-font-large); margin: 10px 0; color: var(--cyan); font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .card-title:hover { color: var(--magenta); } /* ═══════════════════════════════════════════════════════════ 💰 PRICE SYSTEM - 統一價格系統 ═══════════════════════════════════════════════════════════ */ .product-price, .price { font-size: 24px; font-weight: bold; color: var(--brand-yellow); margin: 10px 0; display: flex; align-items: baseline; gap: 8px; } .gfun-balance { font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 800; background: linear-gradient(90deg, #fff, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: pulseGlow 3s infinite; } @keyframes pulseGlow { 0%, 100% { filter: drop-shadow(0 0 20px rgba(56,189,248,0.3)); } 50% { filter: drop-shadow(0 0 40px rgba(139,92,246,0.6)); } } /* ═══════════════════════════════════════════════════════════ ✨ ANIMATIONS - 動畫效果 ═══════════════════════════════════════════════════════════ */ @keyframes ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(2); opacity: 0; } } /* ======================================== 動畫定義 ======================================== */ @keyframes gradientShift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(5%, -5%) rotate(120deg); } 66% { transform: translate(-5%, 5%) rotate(240deg); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 20px rgba(56,189,248,0.3); } 50% { box-shadow: 0 0 40px rgba(139,92,246,0.6); } } @keyframes flowline { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes pulseGlow { 0%, 100% { filter: drop-shadow(0 0 20px var(--cyan)); } 50% { filter: drop-shadow(0 0 40px var(--gold)); } } @keyframes pulseGlowShadow { 0%, 100% { box-shadow: 0 0 20px rgba(56, 189, 248, 0.3); } 50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.6); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } .gfun-label { font-size: clamp(1rem, 2vw, 1.25rem); color: rgba(255, 255, 255, 0.6); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 12px; } .gfun-price { display: inline-block; background: linear-gradient(135deg, var(--gold), var(--cyan)); color: #000; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 700; font-size: 1.1rem; margin: 0.5rem 0; } .service-card:nth-child(1) { animation-delay: 0.1s; } .service-card:nth-child(2) { animation-delay: 0.2s; } .service-card:nth-child(3) { animation-delay: 0.3s; } .service-card:nth-child(4) { animation-delay: 0.4s; } .service-card:nth-child(5) { animation-delay: 0.5s; } .service-card:nth-child(6) { animation-delay: 0.6s; } /* 服務卡片中的 GFun 成本標籤 */ .service-card .gfun-cost, .gfun-price--badge { position: absolute; top: 1rem; right: 1rem; background: var(--gold); color: #000; padding: 0.5rem 1rem; border-radius: 20px; font-weight: 700; font-size: 0.9rem; margin: 0; } .card .price { color: #86868b; font-size: clamp(14px, 2vw, 16px); margin: 0 0 12px 0; font-weight: 400; } .card h4 { color: #1d1d1f; font-size: 16px; font-weight: 600; margin: 0 0 8px 0; line-height: 1.3; } .card:hover, .card:hover .card__media img { transform: scale(1.05); } .product-image[src], .card__media img[src] { animation: none; background: none; } /* ======================================== 圖片展示網格 ======================================== */ .ux-image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; max-width: 1000px; margin: 3rem auto; padding: 0 2rem; } .ux-image-card { background: var(--glass-bg); backdrop-filter: blur(var(--blur)); border-radius: var(--radius); padding: 2rem; border: 1px solid var(--glass-border); transition: all 0.4s var(--ease); } .ux-image-card:hover { transform: translateY(-8px); box-shadow: 0 0 30px rgba(56,189,248,0.3); } .ux-image { width: 100%; height: auto; border-radius: var(--radius); margin-bottom: 1.5rem; } .ux-caption { font-size: 0.9rem; color: rgba(255,255,255,0.75); text-align: center; } /* ======================================== 5. Product Title & Card Heading ======================================== */ .card-title, .card__heading { font-size: var(--mobile-font-large); margin: 10px 0; color: var(--primary-color); font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .card-title:hover, .card__heading:hover { color: var(--cyan); } /* ═══════════════════════════════════════════════════════════ 🎤 VOICE DIARY - LittleG 語音日記 ═══════════════════════════════════════════════════════════ */ .voice-diary-container { padding: var(--space-md); text-align: center; max-width: 600px; margin: 0 auto; } .voice-diary-title { font-size: var(--mobile-font-xxlarge); color: var(--littleg-character); margin-bottom: var(--space-lg); font-weight: 800; } /* 錄音按鈕 */ .record-button, .handle-button { width: 120px; height: 120px; border-radius: 50%; margin: 30px auto; display: flex; align-items: center; justify-content: center; font-size: clamp(16px, 2.5vw, 20px); line-height: 1.6; background: linear-gradient(135deg, var(--littleg-pink), var(--littleg-yellow)); border: 4px solid var(--littleg-character); box-shadow: var(--shadow-lg); cursor: pointer; transition: all var(--duration-medium) var(--ease-default); position: relative; overflow: hidden; } .record-button:hover, .handle-button:hover { transform: scale(1.05); box-shadow: 0 12px 32px rgba(139, 75, 140, 0.3); } .record-button:active { transform: scale(0.95); } .handle-button svg { color: #000; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); } /* 錄音中狀態 */ .record-button.recording { animation: pulse 1.5s infinite; background: linear-gradient(135deg, #ff6b9d, #ffd700); border-color: #ff1744; } @keyframes pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 23, 68, 0.7); } 50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(255, 23, 68, 0); } } .record-button.recording::after { content: '●'; position: absolute; top: 10px; right: 10px; color: #ff1744; font-size: 20px; animation: blink 1s infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* 波形容器 */ .waveform-container { height: 100px; margin: 20px 0; background: var(--brand-gray); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .voice-controls { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; } .voice-controls button { width: 100%; min-height: 50px; } /* ========== 右側面板 - 功能區 ========== */ .control-panel { background: var(--glass-bg); backdrop-filter: blur(var(--blur)); border-radius: var(--radius); border: 1px solid var(--glass-border); padding: 2rem; overflow-y: auto; } .control-section { margin-bottom: 2rem; } .control-section h4 { font-size: 1rem; margin-bottom: 1.5rem; color: var(--cyan); } .search-box, .route-input { width: 100%; padding: 0.75rem; margin-bottom: 0.5rem; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; color: #fff; font-family: inherit; } .search-box::placeholder, .route-input::placeholder { color: rgba(255,255,255,0.5); } /* ═══════════════════════════════════════════════════════════ 🗺️ MAP SYSTEM - GCityMap 地圖系統 ═══════════════════════════════════════════════════════════ */ .map-container { height: 60vh; width: 100%; border-radius: var(--radius-sm); overflow: hidden; position: relative; } .map-controls { position: absolute; bottom: 90px; left: var(--space-md); right: var(--space-md); background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); border-radius: var(--radius-md); padding: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .map-search { width: 100%; padding: 12px 15px; font-size: var(--mobile-font-base); border: 1px solid #ddd; border-radius: var(--radius-sm); margin-bottom: 10px; } .map-filters { display: flex; overflow-x: auto; gap: 10px; padding: 10px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .map-filters::-webkit-scrollbar { display: none; } /* ═══════════════════════════════════════════════════════════ 📝 FORM SYSTEM - 表單系統 ═══════════════════════════════════════════════════════════ */ .form-container, form { padding: var(--space-md); } input:not([type="checkbox"]):not([type="radio"]), textarea{ width:100%;min-height:100px;border:none;border-radius:16px; background:rgba(255,255,255,0.08);color:#fff;padding:16px;font-size:1rem;outline:none; } /* 輸入框 */ input, select, textarea, [class*="Input"], [class*="Select"] { background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; border-radius: 12px !important; color: #fff !important; padding: 0.75rem 1rem !important; } input:focus, select:focus, textarea:focus { border-color: var(--cyan) !important; box-shadow: 0 0 0 3px rgba(56,189,248,0.2) !important; } .form-submit, input[type="submit"], button[type="submit"] { width: 100%; min-height: 50px; font-size: 18px; border-radius: var(--radius-sm); background: var(--brand-blue); color: white; border: none; font-weight: 600; cursor: pointer; transition: all var(--duration-medium) var(--ease-default); } .form-submit:hover, input[type="submit"]:hover, button[type="submit"]:hover { background: var(--cyan); transform: translateY(-2px); } /* Dark Mode 標題顏色 */ @media (prefers-color-scheme: dark) { h4, h5, h6, .h4, .h5, .h6 { color: #6ee7b7; } } .form__message { align-items: center; display: flex; font-size: 1.4rem; line-height: 1; margin-top: 1rem; } .form__message--large { font-size: 1.6rem; } .customer .field .form__message { font-size: 1.4rem; text-align: left; } .form__message .icon, .customer .form__message .svg-wrapper { flex-shrink: 0; height: 1.3rem; margin-right: 0.5rem; width: 1.3rem; display: inline-flex; align-items: center; justify-content: center; } .form__message--large .icon, .customer .form__message .svg-wrapper { height: 1.5rem; width: 1.5rem; margin-right: 1rem; } .customer .field .form__message .svg-wrapper { align-self: start; } .form-status { margin: 0; font-size: 1.6rem; } .form-status-list { padding: 0; margin: 2rem 0 4rem; } .form-status-list li { list-style-position: inside; } .form-status-list .link::first-letter { text-transform: capitalize; } /* ═══════════════════════════════════════════════════════════ 🎨 SPECIAL COMPONENTS - 特殊組件 ═══════════════════════════════════════════════════════════ */ .littleg-card { background: var(--littleg-gradient); border-radius: var(--radius-lg); padding: var(--space-lg); box-shadow: var(--shadow-md); font-family: var(--font-family-littleg); } .gfun-widget { background: var(--gfun-gradient); color: var(--gcity-primary); border-radius: var(--radius-md); padding: var(--space-md); font-weight: 700; box-shadow: var(--shadow-md); } /* ═══════════════════════════════════════════════════════════ 📱 RESPONSIVE - 響應式設計 ═══════════════════════════════════════════════════════════ */ .product-grid, .collection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); padding: var(--space-md); } @media (max-width: 768px){ .product-grid, .collection-grid { grid-template-columns: 1fr; gap: var(--space-sm); } html, #MainContent, .content-for-layout { max-width: 95%; } .section { padding: 60px 5%; } } /* ═══════════════════════════════════════════════════════════ 🌗 DARK MODE - 深色模式 ═══════════════════════════════════════════════════════════ */ @media (prefers-color-scheme: dark) { h4, h5, h6, .h4, .h5, .h6 { color: #6ee7b7; } .card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); } } /* ═══════════════════════════════════════════════════════════ 🧊 GLASS CONTAINERS - 玻璃容器系統 ═══════════════════════════════════════════════════════════ */ html, #MainContent, .main-content, .page-wrapper, .content-for-layout { background: var(--dark-bg) !important; max-width: 90%; margin: 0 auto; } #MainContent { background: var(--dark-bg); min-height: 100vh; position: relative; overflow: hidden; } /* 背景漸層動畫 */ #MainContent::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, var(--cyan) 0%, transparent 50%), radial-gradient(circle at 80% 70%, var(--magenta) 0%, transparent 50%), radial-gradient(circle at 50% 50%, var(--gold) 0%, transparent 50%); opacity: 0.03; animation: gradientShift 20s ease infinite; z-index: 0; } .section, .container, .glass-container, .page-width, .content-wrapper, main > .shopify-section > div { /* 玻璃質感 */ background: rgba(15, 23, 42, 0.5) !important; background-color: rgba(15, 23, 42, 0.5) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border-radius: 24px !important; padding: 32px !important; /* 邊框與圓角 */ border: 1px solid var(--glass-border); border-left: 8px solid var(--rics-green); border-radius: var(--radius-lg); /* 尺寸與間距 */ margin: var(--space-lg) auto; max-width: var(--page-width); /* 陰影與層級 */ box-shadow: var(--glass-shadow); position: relative; z-index: 1; /* 動畫過渡 */ transition: all 0.4s var(--ease-default); } /* 頂部光澤線 */ .page-width::before, .container::before, .content-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; width: 120%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2) 50%, transparent ); animation: spotlight 12s ease-in-out infinite alternate; z-index: 1; } @keyframes spotlight { 0% { transform: translate(-10%, -10%) scale(1); opacity: 0.4; } 100% { transform: translate(10%, 10%) scale(1.3); opacity: 0.7; } } /* Hover 效果 */ .section:hover, .container:hover, .glass-container:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(255, 255, 255, 0.2); } /* ═══════════════════════════════════════════════════════════ 🏠 HOME SECTIONS - 首頁區塊 ═══════════════════════════════════════════════════════════ */ .home-intro-banner { position: relative; overflow: hidden; } .home-intro-banner::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, transparent 70%); animation: rotate 30s linear infinite; pointer-events: none; } .home-intro-banner.glow { box-shadow: 0 0 30px rgba(251, 191, 36, 0.3), 0 0 60px rgba(37, 99, 235, 0.2); } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .home-core-business { text-align: center; padding: 100px 10%; border-radius: var(--radius-md); background: linear-gradient(180deg, #ffffff, #f8fafc); } .home-core-business h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; margin-bottom: 20px; } .home-core-business > p { font-size: clamp(1rem, 2vw, 1.3rem); color: #6b7280; margin-bottom: 50px; max-width: 800px; margin-left: auto; margin-right: auto; line-height: 1.8; } /* Secondary Button */ .btn-secondary { background: transparent; color: #ffffff; padding: 1rem 2rem; border-radius: 50px; border: 2px solid var(--glass-border); font-weight: 600; cursor: pointer; transition: all var(--duration) var(--ease); display: inline-block; } .btn-secondary:hover { border-color: var(--gold); background: var(--glass-bg); transform: translateY(-2px); } .btn-secondary:hover, .btn-glass:hover { background: var(--glass-hover); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(255, 255, 255, 0.15); } .module-grid, .feature-grid { display: grid; max-width: var(--page-width, 1200px); padding: 32px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-bottom: 2rem; } /* 🎯 Feature Card */ .feature-card { background: var(--glass-bg, rgba(255,255,255,0.05)); backdrop-filter: blur(var(--blur, 20px)); border-radius: var(--radius, 24px); border: 1px solid var(--glass-border, rgba(255,255,255,0.15)); padding: 32px; text-align: center; text-decoration: none; color: inherit; transition: all 0.4s var(--ease, cubic-bezier(0.4,0,0.2,1)); position: relative; overflow: hidden; } .feature-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 0 40px rgba(255,255,255,0.2); background: linear-gradient(145deg, var(--cyan, #38bdf8) 10%, var(--magenta, #d946ef) 60%, var(--gold, #fbbf24) 90% ); /* ═══════════════════════════════════════════════════════════ 🎯 UTILITY CLASSES ═══════════════════════════════════════════════════════════ */ .section { position: relative; overflow: hidden; padding: 6rem 2rem; } .section:nth-child(even) { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); } .glass { backdrop-filter: blur(var(--blur)); background: rgba(255, 255, 255, 0.65); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); border-radius: var(--radius-lg); } .hover-glow:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(56, 189, 248, 0.5); transition: all var(--duration-medium) var(--ease-default); } .glow-btn { box-shadow: 0 0 20px rgba(37, 99, 235, 0.3); transition: all var(--duration-medium) var(--ease-default); } .glow-btn:hover { box-shadow: 0 0 30px rgba(251, 191, 36, 0.4); transform: scale(1.05); } .hero-float { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 50px; padding: 80px 10%; position: relative; } .hero p { line-height: 1.6; max-width: 780px; background: rgba(255, 255, 255, 0.9); border-radius: var(--radius-lg); padding: 1.8rem 2.5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05); color: #334155; } /* ═══════════════════════════════════════════════════════════ 💡 TOOLTIPS & HINTS ═══════════════════════════════════════════════════════════ */ .floating-tip, .tooltip, .ai-hint-bar { border-radius: var(--radius-xl); background: var(--glass-bg); backdrop-filter: blur(12px); padding: 0.8rem 1.5rem; border: 1px solid var(--glass-border); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); animation: pulseGlow 5s infinite; display: inline-block; } .tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); opacity: 0; visibility: hidden; background: rgba(26, 54, 93, 0.95); color: white; padding: 8px 12px; border-radius: 8px; font-size: 13px; white-space: nowrap; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-md); transition: transform var(--duration-medium) var(--ease-default), opacity var(--duration-medium) var(--ease-default); pointer-events: none; z-index: var(--z-modal, 1000); } [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) scale(0); background: rgba(0,0,0,0.9); color: #fff; padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.875rem; white-space: nowrap; opacity: 0; transition: all 0.3s var(--littleg-ease); pointer-events: none; z-index: 1000; } [data-tooltip]::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%) scale(0); border: 8px solid transparent; border-top-color: rgba(0,0,0,0.9); opacity: 0; transition: all 0.3s var(--littleg-ease); pointer-events: none; z-index: 1000; } [data-tooltip]:hover::after, [data-tooltip]:hover::before { transform: translateX(-50%) scale(1); opacity: 1; } .floating-tip::before { content: '💡'; margin-right: 0.5rem; } /* ═══════════════════════════════════════════════════════════ 🪟 GLASS PANELS ═══════════════════════════════════════════════════════════ */ .glass-panel { background: rgba(255, 255, 255, 0.75); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border-radius: var(--radius-lg); padding: 70px; margin: 60px auto; box-shadow: var(--shadow-md); transition: all var(--transition-base); max-width: 1150px; background-image: linear-gradient(145deg, rgba(0, 76, 69, 0.05), rgba(46, 49, 146, 0.05)); border-left: 8px solid var(--rics-green); } .glass-panel:hover { transform: translateY(-10px) scale(1.02); box-shadow: var(--shadow-lg); } .glass-panel h2, .glass-panel h3 { color: var(--rics-green); letter-spacing: 0.5px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); background: rgba(255, 255, 255, 0.9); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 40px 30px; margin: 50px auto; max-width: min(1200px, calc(100% - 40px)); } /* ═══════════════════════════════════════════════════════════ 🏷️ STATUS PILL ═══════════════════════════════════════════════════════════ */ .status-pill { margin-top: 25px; display: inline-block; background: rgba(0, 76, 69, 0.3); color: #fff; padding: 14px 30px; border-radius: 50px; font-weight: 500; box-shadow: inset 0 0 25px rgba(0, 76, 69, 0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: all var(--transition-base); } .status-pill:hover { background: rgba(0, 76, 69, 0.5); transform: scale(1.05) translateY(-2px); } /* ═══════════════════════════════════════════════════════════ 🌉 STORY BRIDGE ═══════════════════════════════════════════════════════════ */ .story-bridge { margin: 0 auto; max-width: 1200px; padding: 3rem 1rem; text-align: center; } .story-bridge h2 { font-size: 2rem; } .story-bridge:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } /* ═══════════════════════════════════════════════════════════ ⭐ SOCIAL PROOF ═══════════════════════════════════════════════════════════ */ .social-proof { font-size: 1.05rem; margin-top: 40px; background: linear-gradient(90deg, #dbeafe, #fef3c7); padding: 20px; border-radius: 20px; font-weight: 600; color: #1e3a8a; animation: glow 3s ease-in-out infinite alternate; } .social-proof:hover { box-shadow: var(--shadow-md); transform: translateY(-6px); } @keyframes glow { 0% { box-shadow: 0 0 10px rgba(37, 99, 235, 0.3); } 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.5); } } /* ═══════════════════════════════════════════════════════════ 🎴 SHOPIFY CARD SYSTEM VARIABLES ═══════════════════════════════════════════════════════════ */ .card-wrapper, .contains-card--product { --card-radius: var(--card-corner-radius); --border-width: var(--card-border-width); --border-opacity: var(--card-border-opacity); --shadow-horizontal-offset: var(--card-shadow-horizontal-offset); --shadow-vertical-offset: var(--card-shadow-vertical-offset); --shadow-blur-radius: var(--card-shadow-blur-radius); --shadow-opacity: var(--card-shadow-opacity); --shadow-visible: var(--card-shadow-visible); --shadow-light: 0 6px 20px rgba(139, 75, 140, 0.1); --shadow-medium: 0 12px 35px rgba(139, 75, 140, 0.15); --shadow-heavy: 0 20px 45px rgba(139, 75, 140, 0.25); --image-padding: var(--card-image-padding); --text-alignment: var(--card-text-alignment); } .collection-card-wrapper, .contains-card--collection { --collection-radius: var(--collection-card-corner-radius); --border-width: var(--collection-card-border-width); --border-opacity: var(--collection-card-border-opacity); --shadow-horizontal-offset: var(--collection-card-shadow-horizontal-offset); --shadow-vertical-offset: var(--collection-card-shadow-vertical-offset); --shadow-blur-radius: var(--collection-card-shadow-blur-radius); --shadow-opacity: var(--collection-card-shadow-opacity); --shadow-visible: var(--collection-card-shadow-visible); --image-padding: var(--collection-card-image-padding); --text-alignment: var(--collection-card-text-alignment); } .article-card-wrapper, .contains-card--article { --article-radius: var(--blog-card-corner-radius); --border-width: var(--blog-card-border-width); --border-opacity: var(--blog-card-border-opacity); --shadow-horizontal-offset: var(--blog-card-shadow-horizontal-offset); --shadow-vertical-offset: var(--blog-card-shadow-vertical-offset); --shadow-blur-radius: var(--blog-card-shadow-blur-radius); --shadow-opacity: var(--blog-card-shadow-opacity); --shadow-visible: var(--blog-card-shadow-visible); --image-padding: var(--blog-card-image-padding); --text-alignment: var(--blog-card-text-alignment); } .contains-content-container, .content-container { --content-radius: var(--text-boxes-radius); --border-width: var(--text-boxes-border-width); --border-opacity: var(--text-boxes-border-opacity); --shadow-horizontal-offset: var(--text-boxes-shadow-horizontal-offset); --shadow-vertical-offset: var(--text-boxes-shadow-vertical-offset); --shadow-blur-radius: var(--text-boxes-shadow-blur-radius); --shadow-opacity: var(--text-boxes-shadow-opacity); --shadow-visible: var(--text-boxes-shadow-visible); } .contains-media, .global-media-settings { --media-radius-custom: var(--media-radius); --border-width: var(--media-border-width); --border-opacity: var(--media-border-opacity); --shadow-horizontal-offset: var(--media-shadow-horizontal-offset); --shadow-vertical-offset: var(--media-shadow-vertical-offset); --shadow-blur-radius: var(--media-shadow-blur-radius); --shadow-opacity: var(--media-shadow-opacity); --shadow-visible: var(--media-shadow-visible); } /* ═══════════════════════════════════════════════════════════ 🧭 SIDEBAR NAVIGATION ═══════════════════════════════════════════════════════════ */ /* ========== 側邊欄 - 圖層控制 ========== */ .sidebar { background: var(--glass-bg); backdrop-filter: blur(var(--blur)); border-radius: var(--radius); border: 1px solid var(--glass-border); padding: 2rem; overflow-y: auto; } .sidebar h3 { font-size: 1.25rem; margin-bottom: 1.5rem; background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Sidebar Navigation */ .sidebar-nav { position: fixed; left: 1rem; top: 50%; transform: translateY(-50%); background: var(--glass-bg); backdrop-filter: blur(var(--blur)); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 1rem 0; z-index: 100; max-height: 80vh; overflow-y: auto; } /* Sidebar */ .sidebar { background: var(--glass-bg); backdrop-filter: blur(var(--blur)); border-radius: var(--radius); border: 1px solid var(--glass-border); padding: 32px 1rem; height: fit-content; position: sticky; top: 2rem; } .sidebar-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 2rem; background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .sidebar-nav ul { list-style: none; } .sidebar-nav a { display: block; padding: 0.75rem 1.5rem; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.875rem; transition: all 0.2s ease; } .sidebar-nav a:hover, .sidebar-nav a.active { color: #fff; background: var(--glass-hover); } .sidebar-nav a:hover { background: rgba(255, 255, 255, 0.9); transform: translateX(4px); } /* ═══════════════════════════════════════════════════════════ 📝 PRODUCT DESCRIPTION ═══════════════════════════════════════════════════════════ */ .product-desc { color: rgba(255, 255, 255, 0.85); max-width: 600px; margin: 10px auto 30px; font-size: 1.15em; text-align: center; } .divider-gold { border: none; height: 2px; background: linear-gradient(90deg, #f5b800, transparent); margin: 25px 0; opacity: 0.9; } .feature-card { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); padding: 3rem 2rem; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, 0.1); transition: var(--transition); cursor: pointer; text-align: center; position: relative; overflow: hidden; } /* ═══════════════════════════════════════════════════════════ 🎴 FEATURE CARDS ═══════════════════════════════════════════════════════════ */ .feature-card { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); padding: 3rem 2rem; border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.1); transition: all var(--transition-base); cursor: pointer; text-align: center; position: relative; overflow: hidden; } .feature-card:hover { transform: translateY(-6px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); } /* Feature Card Variants */ .feature-card-green { background: linear-gradient(145deg, #f8fdf9, #eefaf2); } .feature-card-blue { background: linear-gradient(145deg, #f9f9ff, #f3f4ff); } .feature-card-mint { background: linear-gradient(145deg, #f0f9ff, #e6f4ff); } .feature-card-accent-blue { background: #D8E8F8; } /* Story Image (separate from feature cards) */ .story-image { width: 100%; height: auto; object-fit: cover; border-radius: 22px; } /* ═══════════════════════════════════════════════════════════ 📝 FORM INPUTS ═══════════════════════════════════════════════════════════ */ .input, .select { border: none; border-radius: var(--radius-lg); padding: 18px 24px; margin: 8px; width: 100%; max-width: 520px; font-size: 1rem; background: rgba(255, 255, 255, 0.95); box-shadow: 0 5px 25px rgba(0, 76, 69, 0.15); transition: all var(--transition-base); } .input:focus, .select:focus { outline: none; box-shadow: 0 5px 25px rgba(0, 76, 69, 0.25); transform: translateY(-2px); } /* ═══════════════════════════════════════════════════════════ 🎯 STORY BANNER ═══════════════════════════════════════════════════════════ */ .story-banner, .success-formula { background: linear-gradient(135deg, var(--gold) 0%, #f59e0b 100%); color: var(--deep-blue); border-radius: 20px; padding: 30px; margin: 30px 0; text-align: center; } .story-banner h4, .success-formula h4 { color: var(--rics-green); margin: 10px 0 5px; font-weight: 700; } .story-banner p, .success-formula p { color: #374151; line-height: 1.6; font-size: 1.05em; } /* ═══════════════════════════════════════════════════════════ 🔘 CTA BUTTON - 統一版本 ═══════════════════════════════════════════════════════════ */ .cta-button { display: inline-block; background: linear-gradient(90deg, var(--rics-green), var(--rics-blue)); color: #fff; border-radius: var(--radius-lg); text-decoration: none; font-weight: 600; letter-spacing: 0.4px; transition: transform var(--duration-medium) var(--ease-default), opacity var(--duration-medium) var(--ease-default), background-color var(--duration-medium) var(--ease-default); box-shadow: 0 25px 80px rgba(0, 76, 69, 0.45); position: relative; overflow: hidden; padding: 14px 28px; cursor: pointer; } .cta-button:hover { box-shadow: 0 40px 120px rgba(0, 76, 69, 0.55); filter: brightness(1.1); background: #008060; transform: translateY(-2px); } /* ═══════════════════════════════════════════════════════════ 📐 PAGE WIDTH SYSTEM - 響應式佈局 ═══════════════════════════════════════════════════════════ */ .page-width.drawer-menu { max-width: 100%; margin: 0; } .page-width-desktop { padding: 0; margin: 0 auto; max-width: 1440px; } utility-bar__grid.page-width { padding-left: 3rem; padding-right: 3rem; } /* Mobile */ @media screen and (max-width: 749px) { .page-width-desktop { padding: 0 1.5rem; margin: 0; } .utility-bar__grid.page-width { padding-left: 1.5rem; padding-right: 1.5rem; } } /* Tablet */ @media screen and (min-width: 750px) { .page-width-desktop { padding: 0 3rem; } .utility-bar__grid.page-width { padding-left: 4rem; padding-right: 4rem; } .page-width--narrow { padding: 0 9rem; } .page-width-tablet { padding: 0 5rem; } } /* Desktop */ @media screen and (min-width: 990px) { .header:not(.drawer-menu).page-width { padding-left: 5rem; padding-right: 5rem; } .page-width--narrow { max-width: 72.6rem; padding: 0; } .page-width-desktop { max-width: var(--page-width); padding: 0 5rem; } } /* ═══════════════════════════════════════════════════════════════ */ /* ⬆️ Back-to-top Button */ /* ═══════════════════════════════════════════════════════════════ */ #back-to-top { position: fixed; bottom: 20px; right: 20px; background: linear-gradient(135deg, #38bdf8, #d946ef); color: #fff; border: none; border-radius: 50%; width: 56px; height: 56px; font-size: 1.5rem; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); z-index: 998; transition: all 0.3s; display: none; align-items: center; justify-content: center; } #back-to-top:hover { transform: translateY(-4px) scale(1.1); box-shadow: 0 8px 24px rgba(56, 189, 248, 0.5); } #back-to-top.visible { display: flex; } /* ═══════════════════════════════════════════════════════════════ */ /* 📱 PWA 相關 */ /* ═══════════════════════════════════════════════════════════════ */ .pwa-install-prompt.show { display: block; } .offline-indicator.show { display: block; animation: slideUp 0.3s ease; } /* ═══════════════════════════════════════════════════════════════ */ /* ✨ 動畫效果 */ /* ═══════════════════════════════════════════════════════════════ */ @keyframes chatPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.05); } } @keyframes pulse-offline { 0%, 100% { box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4); } 50% { box-shadow: 0 4px 30px rgba(239, 68, 68, 0.8); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════════════════ */ /* 📱 響應式設計 */ /* ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .cookie-content { flex-direction: column; text-align: center; } .cookie-actions { width: 100%; flex-direction: column; } .cookie-actions button { width: 100%; } #back-to-top { bottom: 80px; right: 15px; width: 48px; height: 48px; } #gfun-chat-badge { bottom: 80px; right: 15px; padding: 10px 16px; } .gfun-label { font-size: 0.7rem; } .gfun-amount { font-size: 1rem; } .network-indicator { bottom: 70px; padding: 10px 20px; font-size: 0.85rem; } .indicator-icon { font-size: 1rem; } } @media (max-width: 480px) { .network-indicator { bottom: 70px; padding: 8px 16px; font-size: 0.8rem; } .indicator-text { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #gfun-chat-badge { bottom: 70px; right: 10px; padding: 8px 12px; } .chat-loader { width: 56px; height: 56px; bottom: 70px; right: 10px; } .chat-loader-icon { font-size: 1.75rem; } } @media (max-width: 768px) { .cookie-content { flex-direction: column; text-align: center; } .cookie-actions { width: 100%; flex-direction: column; } .cookie-actions button { width: 100%; } #back-to-top { bottom: 80px; right: 15px; width: 48px; height: 48px; } } /* ═══════════════════════════════════════════════════════════ 🎯 UTILITY CLASSES ═══════════════════════════════════════════════════════════ */ .isolate { position: relative; z-index: 0; } .section + .section { margin-top: var(--space-md); } @media screen and (min-width: 750px) { .section + .section { margin-top: var(--space-lg); } } .element-margin-top { margin-top: 5rem; } @media screen and (min-width: 750px) { .element-margin { margin-top: calc(5rem + var(--page-width-margin)); } } .background-secondary { background-color: rgba(var(--color-foreground), 0.04); } .grid-auto-flow { display: grid; grid-auto-flow: column; } .page-margin, .shopify-challenge__container { margin: 7rem auto; } .rte-width { max-width: 82rem; margin: 0 auto 2rem; } .list-unstyled { margin: 0; padding: 0; list-style: none; } .overflow-hidden { overflow: hidden; } .full-width-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; } /* ═══════════════════════════════════════════════════════════ 🔗 LINKS ═══════════════════════════════════════════════════════════ */ ::selection { background-color: rgba(var(--color-foreground), 0.2); } ul, ol { list-style: none; padding: 0; margin: 0; } a:empty, dl:empty, div:empty, section:empty, article:empty, p:empty, h1:empty, h2:empty, h3:empty, h4:empty, h5:empty, h6:empty { display: none; } .link, .customer a { cursor: pointer; display: inline-block; border: none; box-shadow: none; text-decoration: underline; text-underline-offset: 0.3rem; color: rgb(var(--color-link)); font-size: 1.4rem; font-family: inherit; } .link--text { color: rgb(var(--color-foreground)); } .link--text:hover { color: rgba(var(--color-foreground), 0.75); } .link-with-icon { display: inline-flex; align-items: center; font-size: 1.4rem; font-weight: 600; letter-spacing: 0.1rem; text-decoration: none; margin-bottom: 4.5rem; white-space: nowrap; } .link-with-icon .icon { width: 1.5rem; margin-left: 1rem; display: inline-flex; align-items: center; flex-shrink: 0; } a:not([href]) { cursor: not-allowed; } .full-unstyled-link { text-decoration: none; color: currentColor; display: block; } /* ═══════════════════════════════════════════════════════════ 🎭 PLACEHOLDER & HELPERS ═══════════════════════════════════════════════════════════ */ .placeholder { background-color: rgba(var(--color-foreground), 0.04); color: rgba(var(--color-foreground), 0.55); fill: rgba(var(--color-foreground), 0.55); } details > * { box-sizing: border-box; } .break { word-break: break-word; } .visibility-hidden { visibility: hidden; } /* ═══════════════════════════════════════════════════════════ ♿ ACCESSIBILITY ═══════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion) { .motion-reduce { transition: none !important; animation: none !important; } } /* ═══════════════════════════════════════════════════════════ 🎨 DIVIDERS & SEPARATORS ═══════════════════════════════════════════════════════════ */ .circle-divider::after { content: '\2022'; margin: 0 1.3rem 0 1.5rem; } .circle-divider:last-of-type::after { display: none; } hr { border: none; height: 0.1rem; background-color: rgba(var(--color-foreground), 0.2); display: block; margin: 5rem 0; } @media screen and (min-width: 750px) { hr { margin: 7rem 0; } } /* ═══════════════════════════════════════════════════════════ 🎨 GLG GRADIENT SECTION ═══════════════════════════════════════════════════════════ */ .glg-gradient { padding: 60px 30px; } @keyframes fadeSlide { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes particleMove { from { transform: translateY(0); opacity: 0.6; } to { transform: translateY(-30px); opacity: 0; } } @keyframes aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes pulseData { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } } /* ═══════════════════════════════════════════════════════════ 📝 FORM ANIMATIONS ═══════════════════════════════════════════════════════════ */ #valuation-form { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; animation: fadeSlide 1.8s ease-out; } /* ═══════════════════════════════════════════════════════════ ✨ PARTICLE EFFECTS ═══════════════════════════════════════════════════════════ */ .glg-gradient::after { content: ''; position: absolute; width: 3px; height: 3px; background: rgba(255, 255, 255, 0.9); top: 50%; left: 50%; border-radius: 50%; animation: particleMove 2s ease-in-out infinite alternate; box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 80px 60px 10px rgba(255, 255, 255, 0.6), -60px -90px 15px rgba(255, 255, 255, 0.5); } /* ═══════════════════════════════════════════════════════════ 🔗 UNDERLINED LINKS ═══════════════════════════════════════════════════════════ */ .underlined-link, .customer a, .inline-richtext a, .rte.inline-richtext a { text-underline-offset: 0.3rem; text-decoration-thickness: 0.1rem; transition: text-decoration-thickness ease 100ms; } .underlined-link, .customer a { color: rgba(var(--color-link), var(--alpha-link)); } .inline-richtext a, .rte.inline-richtext a { color: currentColor; } .underlined-link:hover, .customer a:hover, .inline-richtext a:hover { color: rgb(var(--color-link)); text-decoration-thickness: 0.2rem; } /* ═══════════════════════════════════════════════════════════ 🎨 ICON SIZING ═══════════════════════════════════════════════════════════ */ h3 .icon-arrow, .h3 .icon-arrow { width: calc(var(--font-heading-scale) * 1.5rem); } /* ═══════════════════════════════════════════════════════════ 🎬 PARALLAX & EFFECTS ═══════════════════════════════════════════════════════════ */ .parallax { transform: translateZ(0); will-change: transform; transition: transform 0.1s linear; } .live-pulse { animation: pulseData 3s infinite ease-in-out; } /* ═══════════════════════════════════════════════════════════ ➡️ ARROW ANIMATION ═══════════════════════════════════════════════════════════ */ .animate-arrow .icon-arrow path { transform: translateX(-0.25rem); transition: transform var(--duration-short) ease; } .animate-arrow:hover .icon-arrow path { transform: translateX(-0.05rem); } /* ═══════════════════════════════════════════════════════════ 🎨 SVG ALIGNMENT ═══════════════════════════════════════════════════════════ */ svg { display: block; vertical-align: middle; } /* ═══════════════════════════════════════════════════════════ 📋 DETAILS/SUMMARY ═══════════════════════════════════════════════════════════ */ .summary { cursor: pointer; list-style: none; position: relative; display: flex; align-items: center; } summary .icon-caret { position: absolute; height: 0.6rem; right: 1.5rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; } summary::-webkit-details-marker { display: none; } /* ═══════════════════════════════════════════════════════════ 🎯 DISCLOSURE POPUP ═══════════════════════════════════════════════════════════ */ .disclosure-has-popup { position: relative; } .disclosure-has-popup[open] > summary::before { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: block; cursor: default; content: ' '; background: transparent; } .disclosure-has-popup > summary::before { display: none; } .disclosure-has-popup[open] > summary + * { z-index: var(--z-dropdown, 100); } @media screen and (min-width: 750px) { .disclosure-has-popup[open] > summary + * { z-index: 4; } .facets .disclosure-has-popup[open] > summary + * { z-index: 2; } } /* ═══════════════════════════════════════════════════════════ 🖼️ PLACEHOLDER ═══════════════════════════════════════════════════════════ */ .placeholder-svg { height: 100%; width: 100%; } /* ═══════════════════════════════════════════════════════════ 🎯 FOCUS STATES ═══════════════════════════════════════════════════════════ */ *:focus { outline: 0; box-shadow: none; } *:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* Fallback for browsers without :focus-visible support */ .focused { outline: var(--focused-base-outline); outline-offset: var(--focused-base-outline-offset); box-shadow: var(--focused-base-box-shadow); } /* ═══════════════════════════════════════════════════════════ 🎯 FOCUS STATES - 焦點狀態管理 ⚠️ Dangerous for a11y - Use with care ═══════════════════════════════════════════════════════════ */ .focus-none { /* * WARNING: This removes all focus indicators! * Only use when providing alternative focus indication. * Violates WCAG 2.1 Success Criterion 2.4.7 */ box-shadow: none !important; outline: 0 !important; } .focus-offset:focus-visible { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: 1rem; box-shadow: 0 0 0 1rem rgb(var(--primary-color)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3); } .focus-offset.focused { outline: 0.2rem solid rgba(var(--color-foreground), 0.5); outline-offset: 1rem; box-shadow: 0 0 0 1rem rgb(var(--primary-color)), 0 0 0.2rem 1.2rem rgba(var(--color-foreground), 0.3); } /* ═══════════════════════════════════════════════════════════ 📰 TITLE COMPONENT - 標題組件系統 ═══════════════════════════════════════════════════════════ */ .title, .title-wrapper-with-link { margin: 3rem 0 2rem; } .title-wrapper-with-link .title { margin: 0; } .title .link { font-size: inherit; } .title-wrapper { margin-bottom: 3rem; } .title-wrapper-with-link { display: flex; justify-content: center; align-items: flex-end; gap: 2rem; margin-bottom: 3rem; flex-wrap: wrap; } .title--primary { margin: 4rem 0; } /* Title Padding Variants */ .title-wrapper--self-padded-tablet-down, .title-wrapper--self-padded-mobile { padding-left: 1.5rem; padding-right: 1.5rem; } @media screen and (min-width: 750px) { .title-wrapper--self-padded-mobile { padding-left: 0; padding-right: 0; } } @media screen and (min-width: 990px) { .title, .title-wrapper-with-link { margin: 5rem 0 3rem; } .title--primary { margin: 2rem 0; } .title-wrapper-with-link { align-items: center; } .title-wrapper-with-link .title { margin-bottom: 0; } .title-wrapper--self-padded-tablet-down { padding-left: 0; padding-right: 0; } } /* Title with Link */ .title-wrapper-with-link .link-with-icon { margin: 0; flex-shrink: 0; display: flex; align-items: center; } .title-wrapper-with-link .link-with-icon .svg-wrapper { width: 1.5rem; } .title-wrapper-with-link a { margin-top: 0; flex-shrink: 0; } /* Title Modifiers */ .title-wrapper--no-top-margin { margin-top: 0; } .title-wrapper--no-top-margin > .title { margin-top: 0; } /* ═══════════════════════════════════════════════════════════ 📝 SUBTITLE COMPONENT - 副標題組件 ═══════════════════════════════════════════════════════════ */ .subtitle { font-size: 1.8rem; line-height: calc(1 + 0.8 / var(--font-family-scale)); letter-spacing: 0.06rem; color: rgba(var(--color-foreground), 0.7); } .subtitle--small { font-size: 1.4rem; letter-spacing: 0.1rem; } .subtitle--medium { font-size: 1.6rem; letter-spacing: 0.08rem; } /* ═══════════════════════════════════════════════════════════ 🏷️ TAB BADGE - 標籤徽章 ═══════════════════════════════════════════════════════════ */ .tab-nav { position: sticky; top: 0; background: rgba(15,23,42,0.98); backdrop-filter: blur(var(--blur)); z-index: 100; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 1rem 0; box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .tab-container { display: flex; gap: 0.8rem; max-width: 1200px; margin: 0 auto; padding: 0 2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tab-container::-webkit-scrollbar { display: none; } .tab-btn { padding: 0.8rem 1.5rem; border-radius: 50px; background: rgba(255,255,255,0.1); color: #fff; text-decoration: none; white-space: nowrap; transition: all 0.3s; border: 1px solid rgba(255,255,255,0.2); font-weight: 600; font-size: 0.95rem; } .tab-btn:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); } .tab-btn.active { background: linear-gradient(135deg, var(--cyan), var(--gold)); color: #000; border-color: transparent; box-shadow: 0 0 20px rgba(251,191,36,0.5); } .tab-content { display: none; animation: fadeIn 0.5s; } .tab-content.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .tab-btn:hover { background: var(--glass-hover); color: #fff; transform: translateY(-2px); } .tab-btn.active { background: linear-gradient(135deg, var(--cyan), var(--gold)); color: #000; border-color: transparent; } .tab-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.05); color: white; } .tab-badge { position: absolute; top: -8px; right: -8px; background: #ef4444; color: #fff; font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 12px; font-weight: 600; white-space: nowrap; } .tab-badge.purple { background: linear-gradient(135deg, var(--magenta), #a855f7); } .tab-badge.hot { animation: pulseGlow 2s infinite; } /* ═══════════════════════════════════════════════════════════ 🔘 BUTTON COMPONENT - 按鈕組件（合併版本） ═══════════════════════════════════════════════════════════ */ /* Button Variants */ .button--secondary, .button--tertiary { --color-button: var(--magenta-button); --color-button-text: var(--magenta-button-text); } .button--tertiary { --alpha-button-background: 0; --alpha-button-border: 0.2; } /* Button Base Styles - 合併所有基礎樣式 */ .button, .shopify-challenge__button, .customer button, button.shopify-payment-button__button--unbranded { /* Shadow & Border Variables */ --shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset); --shadow-vertical-offset: var(--buttons-shadow-vertical-offset); --shadow-blur-radius: var(--buttons-shadow-blur-radius); --shadow-opacity: var(--buttons-shadow-opacity); --shadow-visible: var(--buttons-shadow-visible); --border-offset: var(--buttons-border-offset); --border-opacity: calc(1 - var(--buttons-border-opacity)); /* Layout */ display: inline-flex; justify-content: center; align-items: center; position: relative; /* Sizing */ min-width: calc(12rem + var(--buttons-border-width) * 2); min-height: calc(4.5rem + var(--buttons-border-width) * 2); padding: 0 3rem; /* Appearance */ border: 0; border-radius: var(--buttons-radius-outset); background-color: rgba(var(--color-button, var(--cyan)), var(--alpha-button-background)); /* Typography */ font: inherit; font-size: 1.5rem; letter-spacing: 0.1rem; line-height: calc(1 + 0.2 / var(--font-family-scale)); color: rgb(var(--color-button-text, var(--color-foreground))); text-decoration: none; /* Interaction */ cursor: pointer; -webkit-appearance: none; appearance: none; transition: box-shadow var(--duration-short) ease; } /* Button Shadow Layer */ .button:before, .shopify-challenge__button:before, .customer button:before, .shopify-payment-button__button--unbranded:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: var(--buttons-radius-outset); box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity)); } /* Button Border Layer */ .button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after { content: ''; position: absolute; top: var(--buttons-border-width); right: var(--buttons-border-width); bottom: var(--buttons-border-width); left: var(--buttons-border-width); z-index: 1; border-radius: var(--buttons-radius); box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text, var(--color-foreground)), var(--border-opacity)), 0 0 0 var(--buttons-border-width) rgba(var(--color-button, var(--cyan)), var(--alpha-button-background)); transition: box-shadow var(--duration-short) ease; } /* Button Hover State */ .button:not([disabled]):hover::after, .shopify-challenge__button:hover::after, .customer button:hover::after, .shopify-payment-button__button--unbranded:hover::after { --border-offset: 1.3px; box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--color-button-text, var(--color-foreground)), var(--border-opacity)), 0 0 0 calc(var(--buttons-border-width) + 1px) rgba(var(--color-button, var(--cyan)), var(--alpha-button-background)); } .button--secondary:after { --border-opacity: var(--buttons-border-opacity); } /* Button Selection */ .button::selection, .shopify-challenge__button::selection, .customer button::selection { background-color: rgba(var(--color-button-text, var(--color-foreground)), 0.3); } /* Shared with other components */ .prompt-label, .setting-label, .button-label { font-size: 1.5rem; letter-spacing: 0.1rem; line-height: calc(1 + 0.2 / var(--font-family-scale)); } /* Shopify Accelerated Checkout */ shopify-accelerated-checkout { --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset); --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity)); } shopify-accelerated-checkout-cart { --shopify-accelerated-checkout-button-border-radius: var(--buttons-radius-outset); --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius) rgba(var(--color-shadow), var(--shadow-opacity)); } /* ═══════════════════════════════════════════════════════════ 🔘 BUTTON STATES - 按鈕狀態 ═══════════════════════════════════════════════════════════ */ .button:disabled, .button[aria-disabled='true'], .button.disabled, .customer button:disabled, .customer button[aria-disabled='true'], .customer button.disabled, .quantity__button.disabled { cursor: not-allowed; opacity: 0.5; } /* ═══════════════════════════════════════════════════════════ 🔢 QUANTITY COMPONENT - 數量組件 ═══════════════════════════════════════════════════════════ */ .quantity { color: rgba(var(--color-foreground)); position: relative; width: calc(14rem / var(--font-heading-scale) + var(--inputs-border-width) * 2); display: flex; border-radius: var(--radius-md); min-height: calc((var(--inputs-border-width) * 2) + 4.5rem); } .quantity::after { pointer-events: none; content: ''; position: absolute; top: var(--inputs-border-width); right: var(--inputs-border-width); bottom: var(--inputs-border-width); left: var(--inputs-border-width); border: 0.1rem solid transparent; border-radius: var(--radius-md); box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity)); transition: box-shadow var(--duration-short) ease; z-index: 1; } .quantity::before { background: rgb(var(--cyan)); pointer-events: none; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--radius-lg); box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity)); z-index: -1; } .quantity__input { color: currentColor; font-family: var(--font-family); font-size: 1.6rem; font-weight: 500; opacity: 0.85; text-align: center; background-color: transparent; border: 0; padding: 0 0.5rem; width: 100%; flex-grow: 1; -webkit-appearance: none; appearance: none; } .quantity__button { width: calc(4.5rem / var(--font-heading-scale)); flex-shrink: 0; font-size: 1.8rem; border: 0; background-color: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: rgb(var(--color-foreground)); padding: 0; } .quantity__button:first-child { margin-left: calc(var(--inputs-border-width)); } .quantity__button:last-child { margin-right: calc(var(--inputs-border-width)); } .quantity__button .svg-wrapper { width: 1rem; pointer-events: none; } .quantity__button:focus-visible, .quantity__button:focus, .quantity__input:focus-visible, .quantity__input:focus { background-color: rgb(var(--cyan)); z-index: 2; } .quantity__button:not(:focus-visible):not(.focused), .quantity__input:not(:focus-visible):not(.focused) { box-shadow: inherit; background-color: inherit; } .quantity__input:-webkit-autofill, .quantity__input:-webkit-autofill:hover, .quantity__input:-webkit-autofill:active { box-shadow: 0 0 0 10rem rgb(var(--cyan)) inset; -webkit-box-shadow: 0 0 0 10rem rgb(var(--cyan)) inset; } .quantity__input::-webkit-outer-spin-button, .quantity__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .quantity__input[type='number'] { -moz-appearance: textfield; } .quantity__rules { margin-top: 0.5rem; position: relative; font-size: 1.2rem; } .quantity__rules .caption { display: inline-block; margin-top: 0; margin-bottom: 0; } .quantity__rules .divider + .divider::before { content: '\2022'; margin: 0 0.5rem; } .quantity__rules-cart { position: relative; } .product__info-container .loading__spinner:not(.hidden) ~ *, .quantity__rules-cart .loading__spinner:not(.hidden) ~ * { visibility: hidden; } /* ═══════════════════════════════════════════════════════════ 🔗 SHARE BUTTON - 分享按鈕 ═══════════════════════════════════════════════════════════ */ .share-button { display: block; position: relative; } .share-button details { width: fit-content; } .share-button__button { font-size: 1.4rem; display: flex; align-items: center; color: rgb(var(--color-link)); margin-left: 0; padding-left: 0; min-height: 4.4rem; cursor: pointer; background-color: transparent; border: none; } .share-button__button:hover { text-decoration: underline; text-underline-offset: 0.3rem; } .share-button__button .icon-share { height: 1.2rem; margin-right: 1rem; min-width: 1.3rem; } details[open] > .share-button__fallback { animation: animateMenuOpen var(--duration-default) ease; } /* Share Fallback */ .share-button__fallback { display: flex; align-items: center; position: absolute; top: 3rem; left: 0.1rem; z-index: 3; width: 100%; min-width: max-content; border-radius: var(--radius-md); border: 0; } .share-button__fallback::after { pointer-events: none; content: ''; position: absolute; top: var(--inputs-border-width); right: var(--inputs-border-width); bottom: var(--inputs-border-width); left: var(--inputs-border-width); border: 0.1rem solid transparent; border-radius: var(--radius-md); box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity)); transition: box-shadow var(--duration-short) ease; z-index: 1; } .share-button__fallback::before { background: rgb(var(--cyan)); pointer-events: none; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--radius-lg); box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity)); z-index: -1; } .share-button__fallback button { width: 4.4rem; height: 4.4rem; padding: 0; flex-shrink: 0; display: flex; justify-content: center; align-items: center; position: relative; right: var(--inputs-border-width); cursor: pointer; background-color: transparent; border: none; } .share-button__fallback button:hover { color: rgba(var(--color-foreground), 0.75); } .share-button__fallback button:hover .svg-wrapper { transform: scale(1.07); } /* Share Button Actions */ .share-button__close:not(.hidden) + .share-button__copy { display: none; } .share-button__close, .share-button__copy { background-color: transparent; color: rgb(var(--color-foreground)); } .share-button__copy:focus-visible, .share-button__close:focus-visible, .share-button__copy:focus, .share-button__close:focus { background-color: rgb(var(--cyan)); z-index: 2; } .field:not(:focus-visible):not(.focused) + .share-button__copy:not(:focus-visible):not(.focused), .field:not(:focus-visible):not(.focused) + .share-button__close:not(:focus-visible):not(.focused) { background-color: inherit; } /* Share Button Field */ .share-button__fallback .field::after, .share-button__fallback .field::before { content: none; } .share-button__fallback .field { border-radius: 0; min-width: auto; min-height: auto; transition: none; } .share-button__fallback .field__input { box-shadow: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; filter: none; min-width: auto; min-height: auto; } .share-button__fallback .field__input:focus, .share-button__fallback .field__input:-webkit-autofill { outline: none; box-shadow: 0 0 0 4px rgba(0, 76, 69, 0.25); transform: translateY(-2px) scale(1.02); } .share-button__fallback .field__input:hover { box-shadow: none; } .share-button__fallback .icon { width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; } .share-button__message:not(:empty) { display: flex; align-items: center; width: 100%; height: 100%; margin-top: 0; padding: 0.8rem 0 0.8rem 1.5rem; margin: var(--inputs-border-width); } .share-button__message:not(:empty):not(.hidden) ~ * { display: none; } /* ═══════════════════════════════════════════════════════════ 📝 FORM COMPONENT - 表單組件 ═══════════════════════════════════════════════════════════ */ .field__input, .select__select, .customer .field input, .customer select { -webkit-appearance: none; appearance: none; background-color: rgb(var(--cyan)); color: rgb(var(--color-foreground)); font-family: var(--font-family); font-size: 1.6rem; width: 100%; box-sizing: border-box; transition: box-shadow var(--duration-short) ease; border-radius: var(--radius-md); height: 4.5rem; min-height: calc(var(--inputs-border-width) * 2); min-width: calc(7rem + (var(--inputs-border-width) * 2)); position: relative; border: 0; } /* Form Field Shadow Layer */ .field::before, .select::before, .customer .field::before, .customer select::before, .localization-form__select::before { pointer-events: none; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--radius-lg); box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity)); z-index: -1; } /* === 10) Language Selector === */ .localization-selector { position: relative; } .localization-selector summary { list-style: none; } .localization-selector summary::-webkit-details-marker { display: none; } .localization-selector[open] .localization-list { opacity: 1; visibility: visible; transform: translateY(0); } .localization-link { display: block; padding: .6rem .8rem; border-radius: var(--radius-sm); font-size: .9rem; color: var(--text-primary); transition: all var(--duration) var(--ease); } .localization-link:hover { background: rgba(56,189,248,.1); color: var(--cyan); } .localization-item.active .localization-link { background: linear-gradient(135deg, var(--cyan), var(--magenta)); color: #fff; font-weight: 600; } .localization-list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: rgba(255,255,255,.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,.4); box-shadow: 0 12px 24px rgba(0,0,0,.12); padding: .5rem; list-style: none; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all var(--duration) var(--ease); } /* Form Field Shadow Layer */ .field::before, .select::before, .customer .field::before, .customer select::before, .localization-form__select::before { pointer-events: none; content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--radius-lg); box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity)); z-index: -1; } /* Form Field Border Layer */ .field::after, .select::after, .customer .field::after, .customer select::after, .localization-form__select::after { pointer-events: none; content: ''; position: absolute; top: var(--inputs-border-width); right: var(--inputs-border-width); bottom: var(--inputs-border-width); left: var(--inputs-border-width); border: 0.1rem solid transparent; border-radius: var(--radius-md); box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity)); transition: box-shadow var(--duration-short) ease; z-index: 1; } .select__select { font-family: var(--font-family); font-size: 1.2rem; color: rgba(var(--color-foreground), 0.75); } /* Form Field Hover State */ .field:hover.field::after, .select:hover.select::after, .select__select:hover.select__select::after, .customer .field:hover.field::after, .customer select:hover.select::after, .localization-form__select:hover.localization-form__select::after { box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground), var(--inputs-border-opacity)); outline: 0; border-radius: var(--radius-md); } /* Form Field Focus State - 合併版本 */ .field__input:focus-visible, .field__input:focus, .select__select:focus-visible, .select__select:focus, .customer .field input:focus-visible, .customer .field input:focus, .customer select:focus-visible, .customer select:focus, .localization-form__select:focus-visible.localization-form__select::after, .localization-form__select:focus.localization-form__select::after { box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) rgba(var(--color-foreground)); outline: 0; border-radius: var(--radius-md); } .localization-form__select:focus { outline: 0; box-shadow: none; } /* ═══════════════════════════════════════════════════════════ 📋 SELECT & TEXTAREA ═══════════════════════════════════════════════════════════ */ .text-area { font-family: var(--font-family); min-height: 10rem; resize: none; } input[type='checkbox'] { display: inline-block; width: auto; margin-right: 0.5rem; } .text-area, .select { display: flex; position: relative; width: 100%; } .select .svg-wrapper, .customer select + .svg-wrapper { height: 0.6rem; width: 1rem; pointer-events: none; position: absolute; top: calc(50% - 0.2rem); right: 0; } .select__select, .customer select { cursor: pointer; line-height: calc(1 + 0.6 / var(--font-family-scale)); padding: 0 calc(var(--inputs-border-width) + 3rem) 0 2rem; margin: var(--inputs-border-width); min-height: calc(var(--inputs-border-width) * 2); } /* ═══════════════════════════════════════════════════════════ 📤 UPLOAD AREA - 上傳區域 ═══════════════════════════════════════════════════════════ */ .upload-box, .upload-area { display: block; border: 3px dashed rgba(139, 75, 140, 0.3); border-radius: var(--radius-lg); padding: var(--space-xl); text-align: center; background: rgba(255, 255, 255, 0.95); transition: all 0.4s ease; cursor: pointer; position: relative; overflow: hidden; } .upload-area::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(245, 212, 122, 0.1) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; } .upload-area:hover::before { opacity: 1; } .upload-area:hover { border-color: var(--gold); background: var(--littleg-peach); transform: scale(1.05); } .upload-cloud { font-size: 3rem; margin-bottom: var(--space-sm); animation: float 3s ease-in-out infinite; } .upload-icon { font-size: 3rem; margin-bottom: var(--space-sm); } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .upload-text, .upload-subtext { font-size: 1.2rem; font-weight: 700; color: var(--littleg-pink); margin: var(--space-sm) 0; } .upload-hint { font-size: 0.9rem; color: #64748b; } /* ═══════════════════════════════════════════════════════════ ✍️ PROMPT TEXTAREA - 提示文字區域 ═══════════════════════════════════════════════════════════ */ .prompt-textarea { width: 100%; border-radius: 20px; border: 2px solid rgba(139, 75, 140, 0.2); padding: var(--space-md); font-size: 1.1rem; resize: none; font-family: inherit; color: var(--text-dark); transition: all var(--duration-medium) var(--ease-default); box-sizing: border-box; background: rgba(255, 255, 255, 0.08); } .prompt-textarea:focus { outline: none; border-color: var(--cyan); background: rgba(255, 255, 255, 0.12); } .prompt-tips { margin-top: 8px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); } .char-counter-wrapper { text-align: right; margin-top: var(--space-xs); } .char-counter { font-size: 0.9rem; color: #64748b; font-weight: 600; } /* ═══════════════════════════════════════════════════════════ 🎨 PREVIEW EFFECTS - 預覽效果 ═══════════════════════════════════════════════════════════ */ .preview-emoji { font-size: 3.5rem; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); transition: transform 0.4s ease; } /* ═══════════════════════════════════════════════════════════ 📝 FIELD COMPONENT - 表單欄位組件 ═══════════════════════════════════════════════════════════ */ .field { position: relative; width: 100%; display: flex; transition: box-shadow var(--duration-short) ease; } .customer .field { display: flex; } .field--with-error { flex-wrap: wrap; } /* Field Input Styles */ .field__input, .customer .field input { flex-grow: 1; text-align: left; padding: 2rem; margin: var(--inputs-border-width); transition: box-shadow var(--duration-short) ease; } .field__input, .select__select, .customer input, .customer select { background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 2px solid rgba(26, 54, 93, 0.1); border-radius: 12px; padding: 12px 16px; font-size: 1rem; color: var(--dark-bg) or #0f172a; transition: transform var(--duration-medium) var(--ease-default), opacity var(--duration-medium) var(--ease-default), background-color var(--duration-medium) cubic-bezier(0.25, 0.46, 0.45, 0.94); } .field__input:focus, .select__select:focus, .customer input:focus, .customer select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1); outline: none; } .field__label, .customer label { color: #0f172a; font-weight: 500; margin-bottom: 8px; } /* Field Label States */ .field__input:focus ~ .field__label, .field__input:not(:placeholder-shown) ~ .field__label, .field__input:-webkit-autofill ~ .field__label, .customer .field input:focus ~ label, .customer .field input:not(:placeholder-shown) ~ label, .customer .field input:-webkit-autofill ~ label { font-size: 1rem; top: calc(var(--inputs-border-width) + 0.5rem); left: calc(var(--inputs-border-width) + 2rem); letter-spacing: 0.04rem; } .field__input:focus, .field__input:not(:placeholder-shown), .field__input:-webkit-autofill, .customer .field input:focus, .customer .field input:not(:placeholder-shown), .customer .field input:-webkit-autofill { padding: 2.2rem 1.5rem 0.8rem 2rem; margin: var(--inputs-border-width); } .field__input::-webkit-search-cancel-button, .customer .field input::-webkit-search-cancel-button { display: none; } .field__input::placeholder, .customer .field input::placeholder { opacity: 0; } /* Field Button */ .field__button { align-items: center; background-color: transparent; border: 0; color: currentColor; cursor: pointer; display: flex; height: 4.4rem; justify-content: center; overflow: hidden; padding: 0; position: absolute; right: 0; top: 0; width: 4.4rem; } .field__button > .svg-wrapper { height: 2.5rem; width: 2.5rem; } .field__input:-webkit-autofill ~ .field__button, .field__input:-webkit-autofill ~ .field__label, .customer .field input:-webkit-autofill ~ label { color: rgb(0, 0, 0); } /* ======================================== 8. PWA INSTALL BUTTON ======================================== */ .pwa-install-btn { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 16px 32px; background: #fff; color: var(--dark-bg); font-weight: 700; font-size: 1.125rem; border: none; border-radius: var(--radius-full); cursor: pointer; transition: all var(--duration-medium) var(--ease-smooth); box-shadow: 0 8px 24px rgba(0,0,0,0.2); position: relative; overflow: hidden; } .pwa-install-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--cyan), var(--gold)); opacity: 0; transition: opacity var(--duration-medium); } .pwa-install-btn:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 12px 32px rgba(0,0,0,0.3); } .pwa-install-btn:hover::before { opacity: 1; } .pwa-install-btn span { position: relative; z-index: 1; } .pwa-install-btn:hover span { color: #000; } .pwa-install-btn svg { position: relative; z-index: 1; width: 24px; height: 24px; } /* Features List */ .pwa-features { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; margin-top: var(--spacing-lg); } .pwa-feature { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.9); font-size: 0.9375rem; font-weight: 500; } .pwa-feature svg { width: 20px; height: 20px; flex-shrink: 0; } /* Scroll progress */ .gcity-scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--gold)); z-index: 9999; width: 0%; transition: width 0.1s ease; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: var(--cyan); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #2d5a8f; } @media (prefers-reduced-motion: no-preference) { .animate--ambient > img, .animate--ambient > .svg-wrapper { animation: animateAmbient 30s linear infinite; } @keyframes animateAmbient { 0% { transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2); } 100% { transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2); } } .scroll-trigger.animate--fade-in, .scroll-trigger.animate--slide-in { opacity: 0.01; } .scroll-trigger.animate--slide-in { transform: translateY(2rem); } .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in { opacity: 1; animation: var(--animation-fade-in); } .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in { animation: var(--animation-slide-in); animation-delay: calc(var(--animation-order) * 75ms); } .scroll-trigger.scroll-trigger--design-mode.animate--fade-in, .scroll-trigger.scroll-trigger--design-mode.animate--slide-in, .scroll-trigger.scroll-trigger--design-mode .slider, .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel { opacity: 1; animation: none; transition: none; transform: none; } .scroll-trigger.scroll-trigger--design-mode.animate--slide-in { transform: translateY(0); } /* Scroll Trigger Animations */ @keyframes slideInVertical { from { transform: translateY(2rem); opacity: 0.01; } to { transform: translateY(0); opacity: 1; } } } .nav-item { position: relative; } .nav-item.has-dropdown { position: relative; } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { color: var(--dark-bg); text-decoration: none; font-weight: 600; transition: all var(--duration); } /* ═══════════════════════════════════════════════════════════ 📊 PROGRESS BAR - 進度條 ═══════════════════════════════════════════════════════════ */ .progress-bar { border-radius: var(--radius-xl); height: 12px; background: rgba(255, 255, 255, 0.1); overflow: hidden; } .progress-bar-fill { border-radius: var(--radius-xl); height: 100%; background: linear-gradient(90deg, var(--cyan), var(--gold)); transition: width 0.5s var(--ease-default); } /* ═══════════════════════════════════════════════════════════ 🎭 MODAL COMPONENT - 模態框組件 ═══════════════════════════════════════════════════════════ */ .modal, .dialog, .popup { border-radius: var(--radius-xl); background: #0f172a; border: 1px solid var(--glass-border); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .modal__toggle { list-style-type: none; } .modal__toggle-close { display: none; } .modal__toggle-open { display: flex; } .modal__close-button.link { display: flex; justify-content: center; align-items: center; padding: 0; height: 4.4rem; width: 4.4rem; } .modal__close-button .icon { width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; } .modal__content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgb(var(--cyan)); z-index: 4; display: flex; justify-content: center; align-items: center; } .media-modal { cursor: zoom-out; } .media-modal .deferred-media { cursor: initial; } /* ═══════════════════════════════════════════════════════════ 🔔 UTILITY BAR - 工具欄 ═══════════════════════════════════════════════════════════ */ .utility-bar { height: 100%; } .utility-bar--bottom-border { border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08); } @media screen and (min-width: 990px) { .utility-bar--bottom-border-social-only { border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08); } } .utility-bar__grid { display: grid; grid-template-areas: 'announcements'; } .utility-bar__grid .list-social { justify-content: flex-start; align-content: center; margin-left: -1.2rem; grid-area: social-icons; } @media screen and (max-width: 989px) { .utility-bar .utility-bar__grid .list-social { display: none; } } .utility-bar .list-social__item .icon { scale: 0.9; display: inline-flex; align-items: center; justify-content: center; } @media screen and (min-width: 990px) { .utility-bar__grid--3-col { grid-template-columns: 3fr 4fr 3fr; grid-template-areas: 'social-icons announcements language-currency'; } .utility-bar__grid--2-col { grid-template-columns: 1fr 1fr; grid-template-areas: 'social-icons language-currency'; } .announcement-bar.announcement-bar--one-announcement, .announcement-bar--one-announcement .announcement-bar__link { width: fit-content; margin: auto; } } /* ═══════════════════════════════════════════════════════════ 📢 ANNOUNCEMENT BAR - 公告欄 ═══════════════════════════════════════════════════════════ */ .announcement-bar, .announcement-bar__announcement { color: rgb(var(--color-foreground)); width: 100%; height: 100%; display: flex; justify-content: center; flex-wrap: wrap; align-content: center; grid-area: announcements; } .announcement-bar .slider--everywhere { margin-bottom: 0; } .utility-bar__grid .announcement-bar-slider { width: 100%; } .announcement-bar-slider, .announcement-bar-slider .slider { width: 100%; } .announcement-bar .slider-button--next { margin-right: -1.5rem; min-width: 44px; } .announcement-bar .slider-button--prev { margin-left: -1.5rem; min-width: 44px; } .announcement-bar .slider-button--next:focus-visible, .announcement-bar .slider-button--prev:focus-visible, .utility-bar .list-social__link:focus-visible { outline-offset: -0.3rem; box-shadow: 0 0 0 -0.2rem rgb(var(--color-foreground)); } /* Localization */ .localization-wrapper { grid-area: language-currency; align-self: center; display: flex; justify-content: flex-end; } .localization-wrapper .localization-selector + .disclosure__list-wrapper { animation: animateMenuOpen var(--duration-default) ease; } .utility-bar .localization-wrapper .disclosure .localization-form__select, .utility-bar .localization-wrapper .disclosure__link { font-size: calc(var(--font-heading-scale) * 1.3rem); } @media screen and (min-width: 990px) { body:has(.section-header .header:not(.drawer-menu)) .utility-bar .page-width { padding-left: 5rem; padding-right: 5rem; } .announcement-bar-slider { width: 60%; } .announcement-bar .slider-button { height: 3.8rem; } } .announcement-bar__link { display: inline-flex; align-items: center; } .announcement-bar__link:hover { text-decoration: underline; } .announcement-bar__link .icon-arrow { display: inline-block; pointer-events: none; margin-left: 0.8rem; vertical-align: middle; margin-bottom: 0.2rem; } .announcement-bar__message { text-align: center; padding: 1rem 0; margin: 0; letter-spacing: 0.1rem; min-height: 3.8rem; } /* Announcement Bar Animations */ .announcement-bar-slider--fade-in-next .announcement-bar__message, .announcement-bar-slider--fade-in-previous .announcement-bar__message, .announcement-bar-slider--fade-out-next .announcement-bar__message, .announcement-bar-slider--fade-out-previous .announcement-bar__message { animation-duration: var(--duration-announcement-bar); animation-timing-function: ease-in-out; animation-fill-mode: forwards; } .announcement-bar-slider--fade-in-next .announcement-bar__message { --announcement-translate-from: -1.5rem; opacity: 0; animation-name: translateAnnouncementSlideIn; animation-delay: var(--duration-announcement-bar); } .announcement-bar-slider--fade-in-previous .announcement-bar__message { --announcement-translate-from: 1.5rem; opacity: 0; animation-name: translateAnnouncementSlideIn; animation-delay: var(--duration-announcement-bar); } .announcement-bar-slider--fade-out-next .announcement-bar__message { --announcement-translate-to: 1.5rem; animation-name: translateAnnouncementSlideOut; } .announcement-bar-slider--fade-out-previous .announcement-bar__message { --announcement-translate-to: -1.5rem; animation-name: translateAnnouncementSlideOut; } @keyframes translateAnnouncementSlideOut { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(var(--announcement-translate-to)); } } /* ═══════════════════════════════════════════════════════════ ♿ ACCESSIBILITY - 無障礙功能 ═══════════════════════════════════════════════════════════ */ .skip-to-content-link { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); z-index: 10000; background: var(--cyan); color: white; padding: 12px 24px; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; transition: top var(--duration-medium) ease; } .skip-to-content-link:focus { top: 20px; outline: 3px solid var(--gold); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════ 🔍 SEARCH MODAL - 搜尋模態框 ═══════════════════════════════════════════════════════════ */ .section-header { z-index: 3; } .section-header.animate { transition: top 0.15s ease-out; } .section-header ~ .shopify-section-group-header-group { z-index: initial; } details[open] > .search-modal { opacity: 1; animation: animateMenuOpen var(--duration-default) ease; } details[open] .modal-overlay { display: block; } details[open] .modal-overlay::after { position: absolute; content: ''; background-color: rgba(var(--color-foreground), 0.5); top: 100%; left: 0; right: 0; height: 100vh; } .search-modal { opacity: 0; border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08); min-height: calc(100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width))); height: 100%; } .search-modal__content { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 5rem 0 1rem; line-height: calc(1 + 0.8 / var(--font-heading-scale)); position: relative; } .search-modal__content-bottom { bottom: calc((var(--inputs-margin-offset) / 2)); } .search-modal__content-top { top: calc((var(--inputs-margin-offset) / 2)); } .search-modal__form { width: 100%; } .search-modal__close-button { position: absolute; right: 0.3rem; } @media screen and (min-width: 750px) { .search-modal__close-button { right: 1rem; } .search-modal__content { padding: 0 6rem; } } @media screen and (min-width: 990px) { .search-modal__form { max-width: 74.2rem; } .search-modal__close-button { position: initial; margin-left: 0.5rem; } } /* ═══════════════════════════════════════════════════════════ ✨ ANIMATIONS - 動畫效果 ═══════════════════════════════════════════════════════════ */ .animate--zoom-in { --zoom-in-ratio: 1; } .animate--zoom-in > img, .animate--zoom-in > .svg-wrapper { transition: scale var(--duration-short) linear; scale: var(--zoom-in-ratio); } /* Page Transitions */ .page-transition-left, .page-transition-right { animation: slideOutLeft 0.8s ease-in-out; } body.page-transition-right { animation: slideOutRight 0.4s forwards; } body.mobile-transition { animation: slideUp 0.4s forwards; } @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideOutLeft { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-100%); opacity: 0; } } @keyframes slideOutRight { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } @keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ========================================================= 🎨 Utility Classes ========================================================= */ .mt-20 { margin-top: 20px !important; } .mb-20 { margin-bottom: 20px !important; } .p-20 { padding: 20px !important; } .w-full { width: 100% !important; } .text-center { text-align: center; } .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .pt-sm { padding-top: var(--space-sm); } .pt-md { padding-top: var(--space-md); } .pt-lg { padding-top: var(--space-lg); } .pb-sm { padding-bottom: var(--space-sm); } .pb-md { padding-bottom: var(--space-md); } .pb-lg { padding-bottom: var(--space-lg); } /* Element Hovers: Vertical Lift, 3d Lift */ @media (prefers-reduced-motion: no-preference) and (hover: hover) { .animate--hover-3d-lift .card-wrapper .card--card, .animate--hover-3d-lift .card-wrapper .card--standard .card__inner, .animate--hover-3d-lift .button:not(.button--tertiary), .animate--hover-3d-lift .shopify-challenge__button, .animate--hover-3d-lift .customer button, .animate--hover-3d-lift .shopify-payment-button__button, .animate--hover-3d-lift .deferred-media .deferred-media__poster-button { transition: transform var(--duration-long) ease, box-shadow var(--duration-long) ease; transform-origin: center; } .animate--hover-3d-lift .card-wrapper:hover .card--card, .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner, .animate--hover-3d-lift .button:not(.button--tertiary):not([disabled]):hover, .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover, .animate--hover-3d-lift .customer button:not([disabled]):hover, .animate--hover-3d-lift .shopify-payment-button__button:hover, .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button { transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */ transform: rotate(1deg); box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05), 0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5); } .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button { transform: translate(-50%, -50%) scale(1.05); /* Apply a specialized transform to the video play button. */ } .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card, .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner { transform: rotate(0.5deg); /* Less intense rotation for collage items. */ } .animate--hover-3d-lift .product-grid .grid__item:hover, .animate--hover-3d-lift .collection-list .grid__item:hover, .animate--hover-3d-lift .collage__item:hover, .animate--hover-3d-lift .blog-articles .article:hover, .animate--hover-3d-lift .complementary-slide li:hover { z-index: 2; /* Make sure the hovered card is the topmost card. */ } .animate--hover-3d-lift .product-grid { isolation: isolate; /* Ensure z-index changes here don't negatively effect other UI stacking. */ } .animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner { box-shadow: none; transition: transform var(--duration-long) ease, filter var(--duration-long) ease; } .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner { transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */ filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15)); } .animate--hover-3d-lift .card-wrapper:hover .card--card:after, .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after, .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner .card__media:before,{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: background-position calc(2 * var(--duration-extended)) ease, opacity var(--duration-default) ease; mix-blend-mode: overlay; background-size: 400% 100%; background-position: 90% 0; background-repeat: no-repeat !important; background-image: linear-gradient( 135deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 55% ); background-size: 250px 250px; mix-blend-mode: color-dodge; pointer-events: none; z-index: 2; } .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner .card__media:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .animate--hover-3d-lift .card-wrapper:hover .card--card:before, .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__media:after { opacity: 0.2; transition: background-position 6s ease, opacity var(--duration-long) ease; background-position: left; z-index: 2; } .animate--hover-vertical-lift .button:not(.button--tertiary), .animate--hover-vertical-lift .shopify-challenge__button, .animate--hover-vertical-lift .customer button, .animate--hover-vertical-lift .shopify-payment-button__button { transition: transform var(--duration-default) var(--ease-out-slow); } .animate--hover-vertical-lift .card-wrapper .card--card, .animate--hover-vertical-lift .card-wrapper .card--standard .card__inner { transition: transform var(--duration-medium) var(--ease-out-slow); } .animate--hover-vertical-lift .card-wrapper:hover .card--card, .animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner { transform: translateY(-0.75rem); } .animate--hover-vertical-lift .card-wrapper:active .card--card, .animate--hover-vertical-lift .card-wrapper:active .card--standard .card__inner { transform: translateY(-0.5rem); } .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):hover, .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):hover, .animate--hover-vertical-lift .customer button:not([disabled]):hover, .animate--hover-vertical-lift .shopify-payment-button__button:hover { transform: translateY(-0.25rem); } .animate--hover-vertical-lift .button:not(.button--tertiary):not([disabled]):active, .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):active, .animate--hover-vertical-lift .customer button:not([disabled]):active, .animate--hover-vertical-lift .shopify-payment-button__button:active { transform: translateY(0); } .animate--hover-vertical-lift .button:not([disabled]):hover:after, .animate--hover-vertical-lift .customer button:not([disabled]):hover:after, .animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover:after { --border-offset: 0.3px; /* Default is 1.3px as defined above in this file. This removes 1px to prevent the border from growing on buttons when this effect is on. */ box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--accent-color-text), var(--border-opacity)), 0 0 0 var(--buttons-border-width) rgba(var(--accent-color), var(--alpha-button-background)); } .animate--hover-vertical-lift .button:not([disabled]).button--secondary:hover:after { --border-offset: 0px; /* Prevent the border from growing on buttons when this effect is on. */ } } /* Sticky Navigation */ .navbar { position: sticky; top: 0; z-index: 100; background-color: rgba(15, 23, 42, 0.9); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); backdrop-filter: blur(6px); } .navbar a { color: #fff; text-decoration: none; font-weight: 600; transition: color 0.3s ease; } .navbar a:hover { color: var(--gold); } /*smarttransit*/ .smarttransit-wrapper { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--dark-bg); } .smarttransit-hero { text-align: center; padding: 60px 20px; background: linear-gradient(135deg,var(--cyan),var(--magenta)); color: white; border-radius: var(--radius); margin-bottom: 40px; } /* Loading spinner */ /* ===== Loading 狀態 ===== */ .loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 9999; opacity: 1; transition: opacity 0.5s var(--ease); } .loading-overlay.hidden { opacity: 0; pointer-events: none; } .loading-content { text-align: center; } .loading-spinner { width: 60px; height: 60px; border: 4px solid var(--glass-border); border-top-color: var(--cyan); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; } @keyframes spin { to { transform: rotate(360deg); } } .loading-text { font-size: 1.2rem; background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; } /* ===== 錯誤提示 ===== */ .error-banner { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: var(--radius); padding: 1rem 1.5rem; margin: 1rem 0; display: none; align-items: center; gap: 2rem; } .error-banner.show { display: flex; animation: fadeUp 0.5s var(--ease); } .error-icon { font-size: 1.5rem; } .error-message { flex: 1; } .error-retry { background: rgba(239, 68, 68, 0.2); color: #ef4444; border: none; padding: 0.5rem 1rem; border-radius: 20px; cursor: pointer; font-weight: 600; transition: all var(--duration) var(--ease); } .error-retry:hover { background: rgba(239, 68, 68, 0.3); transform: scale(1.05); } .spinner, .loading__spinner { position: absolute; z-index: 1; width: 1.8rem; } .loading__spinner { width: 1.8rem; display: inline-block; } .loading-text { color: white; margin-top: 20px; font-weight: 600; font-size: 1.2rem; } .loading-subtext { color: rgba(255,255,255,0.6); margin-top: 8px; font-size: 0.9rem; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(270deg); } } .path { stroke-dasharray: 280; stroke-dashoffset: 0; transform-origin: center; stroke: rgb(var(--color-foreground)); animation: dash 1.4s ease-in-out infinite; } @media screen and (forced-colors: active) { .path { stroke: CanvasText; } } @keyframes dash { 0% { stroke-dashoffset: 280; } 50% { stroke-dashoffset: 75; transform: rotate(135deg); } 100% { stroke-dashoffset: 280; transform: rotate(450deg); } } .loading__spinner:not(.hidden) + .cart-item__price-wrapper, .loading__spinner:not(.hidden) ~ cart-remove-button { opacity: 50%; } .loading__spinner:not(.hidden) ~ cart-remove-button { pointer-events: none; cursor: default; } /* ═══════════════════════════════════════════════════════════ ✨ ANIMATION LIBRARY - 動畫庫 ═══════════════════════════════════════════════════════════ */ /* Fade Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fadeInUp 1.2s ease-out; } /* Slide Animations */ @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } /* Data Visualization Animations */ @keyframes pulseDataSoft { 0% { opacity: 0.6; transform: scale(0.98); } 50% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0.6; transform: scale(0.98); } } @keyframes floatNode { 0% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(-20px); opacity: 1; } 100% { transform: translateY(0); opacity: 0.6; } } /* ═══════════════════════════════════════════════════════════ 🗺️ GIS DUAL-VIEW SYSTEM - GIS 雙視圖系統 ═══════════════════════════════════════════════════════════ */ .dual-view { display: grid; grid-template-columns: 1fr 1fr; height: 80vh; gap: 2px; border-radius: var(--radius-lg); overflow: hidden; background: rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-md); } .dual-view .map-2d, .dual-view .scene-3d { position: relative; width: 100%; height: 100%; overflow: hidden; } .dual-view .map-2d canvas, .dual-view .scene-3d canvas { width: 100%; height: 100%; border: none; display: block; } .dual-view .split-overlay { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, 0.6); border-radius: 10px; padding: 8px 12px; font-size: 0.9rem; color: #1e293b; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } /* ═══════════════════════════════════════════════════════════ 📏 3D MEASUREMENT TOOLS - 3D 測量工具 ═══════════════════════════════════════════════════════════ */ .measure-label { position: absolute; background: rgba(255, 255, 255, 0.9); color: #1e293b; font-weight: 600; border-radius: clamp(16px, 3vw, 24px); padding: 4px 8px; font-size: 0.85rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } /* ═══════════════════════════════════════════════════════════ 🧭 LAYER CONTROL PANEL - 圖層控制面板 ═══════════════════════════════════════════════════════════ */ .layer-control { position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.8); border-radius: clamp(18px, 3.5vw, 28px); padding: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 8px; } .layer-control button { background: linear-gradient(135deg, #60a5fa, #34d399); color: #fff; border: none; border-radius: 6px; padding: 8px 12px; cursor: pointer; font-weight: 600; transition: all var(--duration-medium) ease; } .layer-control button:hover { background: linear-gradient(135deg, var(--gold), #f472b6); color: #1e293b; } /* ═══════════════════════════════════════════════════════════ 💡 SCENE LIGHT CONTROL - 場景光線控制 ═══════════════════════════════════════════════════════════ */ .scene-light-control { position: absolute; bottom: 20px; right: 20px; background: rgba(255, 255, 255, 0.85); border-radius: 14px; padding: 14px 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; gap: 10px; font-size: 0.9rem; color: #1e293b; } .scene-light-control label { font-weight: 600; margin-bottom: 4px; } .scene-light-control input[type="range"] { width: 160px; accent-color: #60a5fa; cursor: pointer; transition: opacity var(--duration-medium) ease; } .scene-light-control input[type="range"]:hover { opacity: 0.9; } /* ═══════════════════════════════════════════════════════════ 📱 DUAL-VIEW RESPONSIVE - 雙視圖響應式 ═══════════════════════════════════════════════════════════ */ @media screen and (max-width: 900px) { .dual-view { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; height: auto; } } @media (orientation: landscape) { .hero-section { min-height: auto; padding: 30px var(--space-md); } body { padding-bottom: 70px; } } /* ═══════════════════════════════════════════════════════════ 🎯 HEADER ALIGNMENT SYSTEM - Header 對齊系統 ═══════════════════════════════════════════════════════════ */ /* 核心容器對齊 */ .header, .navbar, .utility-bar, .header-wrapper, .header__inline-menu, .list-menu, .menu-drawer__navigation { display: flex; align-items: center; padding: 0.5rem 2rem; /* 從 1rem 減少到 0.5rem */ min-height: 60px; /* 從可能的 80px 減少到 60px */ } /* Logo 尺寸優化 */ .navbar .logo, .navbar img { height: 32px; /* 從可能的 40-50px 減少 */ width: auto; } /* ========== 導航欄 ========== */ .navbar { position: fixed; top: 0; width: 100%; background: rgba(255,255,255,0.7); backdrop-filter: blur(var(--blur)); border-bottom: 1px solid rgba(255,255,255,0.2); padding: 1rem 2rem; transition: all var(--duration) var(--ease); z-index: 1000; } .navbar.scrolled { padding: 0.5rem 2rem; background: rgba(255,255,255,0.85); box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .nav-container { max-width: 1400px; margin: 0 auto; display: flex; justify-content: center; align-items: center; } /* 圖標統一樣式 */ .icon, svg, .svg-wrapper { font-size: 2rem; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; } /* 連結和按鈕對齊 */ .header a, .navbar a, .utility-bar a, .header button, .navbar button, .utility-bar button { display: inline-flex; align-items: center; } /* 列表項目對齊 */ .header li, .navbar li, .list-menu__item, .list-social__item { display: flex; align-items: center; } .nav-container { max-width: 1600px; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2rem; } .nav-brand { font-size: 1.5rem; font-weight: 800; background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .nav-links { display: flex; gap: 2rem; align-items: center; } .nav-links a { color: rgba(255,255,255,0.8); text-decoration: none; font-weight: 600; transition: all 0.3s var(--ease); position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--gold); transition: width 0.3s var(--ease); } .nav-links a:hover::after { width: 100%; } .nav-balance { background: linear-gradient(135deg, var(--cyan), var(--magenta)); padding: 0.6rem 1.8rem; border-radius: 50px; font-weight: 700; color: #000; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 15px rgba(56,189,248,0.3); } /* Hero Section */ .pro-hero { position: relative; text-align: center; padding: 6rem 2rem; margin: 2rem auto; max-width: 1600px; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(56,189,248,0.15), rgba(217,70,239,0.15), rgba(251,191,36,0.15)); border-radius: var(--radius); backdrop-filter: blur(var(--blur)); border: 1px solid var(--glass-border); } .hero-badge { display: inline-block; background: rgba(251,191,36,0.2); color: var(--gold); padding: 0.5rem 1.5rem; border-radius: 50px; font-weight: 700; margin-bottom: 1.5rem; border: 1px solid rgba(251,191,36,0.3); } /* 统计仪表板 */ .stats-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto 4rem; } /* Stats Card */ .stat-card { background: var(--glass-bg); backdrop-filter: blur(var(--blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-md); padding: 2rem; text-align: center; transition: all var(--duration) var(--ease); } .stat-card:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(56, 189, 248, 0.3); } .stat-icon { font-size: 2.5rem; margin-bottom: 1.5rem; filter: drop-shadow(0 0 15px currentColor); } .stat-value { font-size: 2.5rem; font-weight: 900; background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; } .stat-number { font-size: 2.5rem; font-weight: 800; background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; margin-bottom: var(--spacing-xs); font-family: var(--font-family); } .stat-label { color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; } .stat-card strong { display: block; font-size: 2.5rem; font-weight: 800; background: linear-gradient(90deg, var(--cyan), var(--magenta)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; } .stat-card p { color: rgba(255,255,255,0.75); margin: 0; font-size: 0.95rem; } /* 主容器 */ .pro-container { max-width: 1600px; margin: 0 auto; padding: 32px; } /* 充值包网格 */ .pricing-section { margin-bottom: 5rem; } .section-header { text-align: center; margin-bottom: 3rem; } /* ======================================== 08. Feature Zone ======================================== */ .section-title { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.4; background: linear-gradient(90deg, #fff, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1.5rem; } .section-subtitle { text-align: center; font-size: 1.2rem; color: rgba(255,255,255,0.75); margin-bottom: 3rem; animation: fadeUp 0.8s ease-out 0.2s backwards; } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .pricing-card { background: var(--glass-bg); backdrop-filter: blur(var(--blur)); border-radius: var(--radius); padding: 2.5rem; border: 1px solid var(--glass-border); transition: all 0.4s var(--ease); position: relative; overflow: hidden; } .pricing-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--gold)); } .pricing-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 25px 70px rgba(56,189,248,0.4); background: var(--glass-hover); border-color: var(--cyan); } .pricing-card.featured { border: 2px solid var(--gold); background: linear-gradient(135deg, rgba(56,189,248,0.1), rgba(217,70,239,0.1)); } .pricing-badge { position: absolute; top: 1.5rem; right: 1.5rem; background: linear-gradient(135deg, var(--magenta), var(--gold)); color: #000; padding: 0.4rem 1rem; border-radius: 20px; font-size: 0.85rem; font-weight: 700; box-shadow: 0 4px 15px rgba(217,70,239,0.4); } .pricing-icon { font-size: 4rem; display: block; margin-bottom: 1.5rem; filter: drop-shadow(0 0 25px var(--cyan)); } .pricing-name { font-size: 1.8rem; font-weight: 700; margin-bottom: 1.5rem; } .pricing-price { font-size: 3rem; font-weight: 900; color: var(--gold); margin-bottom: 0.5rem; } .pricing-value { font-size: 1.2rem; color: rgba(255,255,255,0.6); margin-bottom: 2rem; } .pricing-features { list-style: none; margin-bottom: 2rem; padding: 0; } .pricing-features li { padding: 0.75rem 0; color: rgba(255,255,255,0.85); display: flex; align-items: center; gap: 0.75rem; font-size: 1.05rem; } .pricing-features li::before { content: '✓'; color: var(--green); font-weight: 700; font-size: 1.3rem; flex-shrink: 0; } .pricing-cta { width: 100%; padding: 1.2rem 2.5rem; background: linear-gradient(135deg, var(--cyan), var(--gold)); color: #000; border: none; border-radius: 50px; font-weight: 700; font-size: 1.2rem; cursor: pointer; transition: all 0.3s var(--ease); position: relative; overflow: hidden; } .pricing-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,0.3), transparent); opacity: 0; transition: opacity 0.3s var(--ease); } .pricing-cta:hover::before { opacity: 1; } .pricing-cta:hover { transform: scale(1.05); box-shadow: 0 15px 40px rgba(251,191,36,0.6); } /* 服务对比表 */ .comparison-section { background: var(--glass-bg); backdrop-filter: blur(var(--blur)); border-radius: var(--radius); padding: 3rem; margin-bottom: 5rem; border: 1px solid var(--glass-border); } .comparison-table { width: 100%; border-collapse: collapse; margin-top: 2rem; } .comparison-table th, .comparison-table td { padding: 2rem; text-align: left; border-bottom: 1px solid var(--glass-border); } .comparison-table th { background: rgba(56,189,248,0.1); font-weight: 700; color: var(--cyan); } .comparison-table tr:hover { background: var(--glass-hover); } /* Grid Layouts */ .grid { display: grid; gap: var(--spacing-md); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-md); max-width: 1200px; margin: 0 auto; padding: var(--spacing-md); } .service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-md); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin: var(--spacing-md) 0; } .service-name { font-weight: 600; color: #fff; } .service-cost { color: var(--gold); font-weight: 700; font-size: 1.1rem; } /* 客户评价 */ .testimonials-section { margin-bottom: 5rem; } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; } .testimonial-card { background: var(--glass-bg); backdrop-filter: blur(var(--blur)); border-radius: 20px; padding: 32px; border: 1px solid var(--glass-border); transition: all 0.3s var(--ease); } .testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 15px 40px rgba(56,189,248,0.2); } .testimonial-rating { color: var(--gold); font-size: 1.5rem; margin-bottom: 1.5rem; } .testimonial-text { color: rgba(255,255,255,0.85); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.5rem; font-style: italic; } .testimonial-author { display: flex; align-items: center; gap: 2rem; } .author-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--magenta)); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .author-info { flex: 1; } .author-name { font-weight: 700; margin-bottom: 0.25rem; } .author-role { color: rgba(255,255,255,0.6); font-size: 0.9rem; } /* FAQ */ .faq-item:last-child { border-bottom: none; } .unified-module-title { font-size: 1.2rem; font-weight: 700; color: var(--cyan); margin-bottom: 0.75rem; cursor: pointer; display: flex; align-items: center; gap: 0.75rem; } .unified-module-title::before { content: '▶'; font-size: 0.8rem; transition: transform 0.3s var(--ease); } .unified-module-title.active::before { transform: rotate(90deg); } .faq-answer { color: rgba(255,255,255,0.8); line-height: 1.7; padding-left: 1.5rem; } /* ===== FAQ 區塊 ===== */ .faq-section { background: var(--glass-bg); backdrop-filter: blur(var(--blur)); border-radius: var(--radius); padding: 3rem; margin-bottom: 5rem; border: 1px solid var(--glass-border); } .faq-title { font-size: 2.5rem; font-weight: 800; text-align: center; background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 3rem; } .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .faq-card { background: var(--glass-bg); padding: 2rem; border-radius: var(--radius); border: 1px solid var(--glass-border); transition: all var(--duration) var(--ease); } .faq-item { border-bottom: 1px solid var(--glass-border); padding: 1.5rem 0; } .faq-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); } .unified-module-title { font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 0.75rem; } .faq-answer { font-size: 0.95rem; color: rgba(255,255,255,0.7); line-height: 1.6; } /* 信任徽章 */ .trust-badges { display: flex; justify-content: center; align-items: center; gap: 3rem; flex-wrap: wrap; padding: 3rem 0; margin-bottom: 3rem; } .trust-badge { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0.7; transition: opacity 0.3s var(--ease); } .trust-badge:hover { opacity: 1; } .badge-icon { font-size: 3rem; filter: drop-shadow(0 0 15px currentColor); } .badge-text { font-size: 0.9rem; color: rgba(255,255,255,0.7); } /* CTA Footer */ .cta-footer { text-align: center; background: linear-gradient(135deg, rgba(56,189,248,0.15), rgba(217,70,239,0.15)); border-radius: var(--radius); padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 3vw, 2rem); border: 1px solid var(--glass-border); } .cta-footer-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 1.5rem; } .cta-footer-text { font-size: 1.2rem; color: rgba(255,255,255,0.8); margin-bottom: 2rem; } .cta-buttons { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; } .cta-btn { padding: 1.2rem 3rem; border-radius: 50px; font-weight: 700; font-size: 1.1rem; text-decoration: none; transition: all 0.3s var(--ease); display: inline-block; } .cta-primary { background: linear-gradient(135deg, var(--cyan), var(--gold)); color: #000; } .cta-secondary { background: var(--glass-bg); color: #fff; border: 2px solid var(--glass-border); } .cta-btn:hover { transform: scale(1.05); box-shadow: 0 15px 40px rgba(56,189,248,0.4); } .platform-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent, rgba(255,255,255,0.05)); opacity: 0; transition: opacity 0.5s var(--ease); } .platform-card:hover::before { opacity: 1; } .platform-card:hover { box-shadow: 0 12px 32px rgba(56,189,248,0.3); /* Adjust intensity */ transform: translateY(-10px) scale(1.02); /* Subtle hover effect */ } .platform-card:hover::before { opacity: 0.1; } .platform-card.left { animation: slideInLeft 0.8s ease; } /* 左側卡片 - GCityzens */ .platform-card.left:hover { background: linear-gradient(145deg, rgba(56,189,248,0.15), rgba(217,70,239,0.1)); } /* 右側卡片 - SmartCityBuilder */ .platform-card.right:hover { background: linear-gradient(145deg, rgba(251,191,36,0.15), rgba(217,70,239,0.1)); } .platform-icon { font-size: 4rem; margin-bottom: 1.5rem; display: block; text-align: center; filter: drop-shadow(0 0 20px var(--cyan)); } .platform-card h2 { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; text-align: center; background: linear-gradient(90deg, var(--cyan), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .platform-card p { font-size: 1.1rem; opacity: 0.85; text-align: center; line-height: 1.6; margin-bottom: 1.5rem; } { list-style: none; margin: 1.5rem 0; } .platform-features li { padding: 0.75rem 1rem; margin: 0.5rem 0; background: rgba(255,255,255,0.08); border-radius: 12px; font-size: 0.95rem; border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s var(--ease); } .platform-features li:hover { background: rgba(255,255,255,0.15); transform: translateX(5px); } zone { margin-bottom: 6rem; } .zone-header { text-align: center; margin-bottom: 3rem; } .zone-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1.5rem; } .zone-subtitle { font-size: 1.2rem; opacity: 0.9; max-width: 700px; margin: 0 auto; } .feature-card { background: rgba(255,255,255,0.08); padding: 32px; border-radius: var(--radius); border: 1px solid var(--glass-border); transition: all 0.4s var(--ease); text-align: center; text-decoration: none; color: inherit; display: block; } .feature-card:hover { transform: translateY(-6px); box-shadow: 0 0 25px rgba(255,255,255,0.15); background: linear-gradient(145deg, var(--cyan) 10%, var(--magenta) 60%, var(--gold) 90%); } .feature-icon { font-size: 4rem; display: block; margin-bottom: 1.5rem; filter: drop-shadow(0 0 20px var(--cyan, #38bdf8)); transition: transform 0.3s var(--ease); } .feature-card h3{ font-size: clamp(1.2rem, 3vw, 1.5rem); font-weight: 700; background: linear-gradient(90deg, var(--cyan, #38bdf8), var(--gold, #fbbf24)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px; transition: all 0.3s var(--ease); } .feature-card:hover h3 { -webkit-text-fill-color: #fff; } /* 價格區域 */ .feature-price { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; } .summary-strip { background: linear-gradient(135deg, var(--cyan) 0%, var(--magenta) 50%, var(--gold) 100%); padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 3vw, 2rem); text-align: center; margin-top: 6rem; } .summary-strip h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: #000; margin-bottom: 2rem; } .summary-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; } .stat-card { background: rgba(0,0,0,0.2); backdrop-filter: blur(10px); padding: 32px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.2); } .stat-number { font-size: 3rem; font-weight: 800; color: #fff; margin-bottom: 0.5rem; } .stat-label { font-size: 1.1rem; color: rgba(255,255,255,0.9); } @media (max-width: 768px) { .dual-platform { grid-template-columns: 1fr; gap: 2rem; } .feature-grid { grid-template-columns: 1fr; gap: 2rem; } .zone { margin-bottom: 4rem; } } @media (max-width: 768px){ .platform-card { padding: 32px 1.5rem; } .feature-zones { padding: 32px 1rem; } } /* ======================================== Section Transition Glow ======================================== */ .gcity-home-full { width: 100%; height: 6px; background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--gold)); background-size: 200% 100%; box-shadow: 0 0 20px rgba(56, 189, 248, 0.5); animation: flowline 5s linear infinite; } /* ======================================== Animated Elements ======================================== */ @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes moveGlow{ 0%{background-position:0 0;}100%{background-position:200% 0;} } /* ======================================== Hero Section ======================================== */ .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--spacing-md); position: relative; z-index: 1; } .hero-image img { width: 100%; border-radius: var(--radius); box-shadow: 0 30px 100px rgba(0, 0, 0, 0.4); transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); } .hero-image img:hover { transform: translateY(-15px) rotateY(5deg) scale(1.05); } /* Hero Overlays */ .gradient-overlay::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(56, 189, 248, 0.2), transparent 60%), linear-gradient(180deg, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.9)); backdrop-filter: blur(30px); z-index: 0; } .fog-bg { background: radial-gradient(circle at 30% 30%, #0b1120, #020617); position: relative; overflow: hidden; } #floating-blobs, #hero-blobs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.5; } /* 💡 AI 提示條 */ .ai-hint-bar { margin: 1.5rem auto; font-size: 1.1rem; color: var(--text-light); background: rgba(255,255,255,0.08); padding: .8rem 1.2rem; border-radius: 18px; display: inline-block; backdrop-filter: blur(12px); animation: pulseGlow 5s infinite ease-in-out; } /* ======================================== Glass Effects ======================================== */ .glass { background: var(--glass-bg); backdrop-filter: blur(var(--blur)); border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); transition: all var(--duration) var(--ease); } .hero-image img{width:100%;border-radius:var(--radius);box-shadow:0 30px 100px rgba(0,0,0,0.4);transition:transform 1s cubic-bezier(0.22,1,0.36,1);} .hero-image img:hover{transform:translateY(-15px)rotateY(5deg)scale(1.05);} /* 🧱 Business Grid */ .feature-card.visible { opacity: 1; transform: translateY(0); } .feature-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 60px rgba(0,0,0,0.3); background: rgba(255,255,255,0.08) !important; } .feature-card:hover a { transform: scale(1.05); box-shadow: 0 8px 25px rgba(0,0,0,0.3); } @media (max-width: 768px) { .feature-card { padding: 30px 20px !important; } /* 📱 超小屏幕 (小於 480px) */ @media (max-width: 768px){ .feature-grid { gap: 15px; } .home-core-business { margin: 30px auto; } } /* 🖥️ 大屏幕優化 (大於 1400px) */ @media (min-width: 1400px) { .home-core-business { max-width: 1400px; } .feature-grid { grid-template-columns: repeat(4, 1fr); } } /* ========== 12. Micro Navigation 統一樣式 ========== */ .micro-nav { display: flex; gap: 0.5rem; background: rgba(15,23,42,0.85); backdrop-filter: blur(10px); justify-content: center; padding: 0.75rem 1rem; position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--glass-border); align-items: center; flex-wrap: wrap; } .micro-nav a { color: var(--text-light); padding: 0.5rem 0.75rem; text-decoration: none; transition: all var(--duration) var(--ease); font-size: 0.9rem; font-weight: 600; border-radius: 20px; } .micro-nav a:hover { background: rgba(56,189,248,0.2); color: #fff; transform: translateY(-2px); } /* ========== 13. Skeleton Loading 統一樣式 ========== */ .skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); min-height: 200px; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }