/* ============================================================ GLOBAL.CSS — 易經算卦網站設計系統 風格：中國古典水墨，深夜天空，金色點綴 ============================================================ */ /* Google Fonts 由各頁面 的 載入，避免 @import 阻塞渲染 */ /* ============================================================ CSS 變數 / 設計代幣 ============================================================ */ :root { /* 主色 */ --ink: #0D0B0F; --ink-light: #1A1624; --ink-mid: #241E34; --ink-card: #1E1830; --gold: #C9A84C; --gold-light: #E8C96A; --gold-dim: #A08030; --gold-pale: #2A2010; --gold-glow: rgba(201,168,76,0.18); --vermillion: #C0392B; --vermillion-light: #E74C3C; --vermillion-pale: rgba(192,57,43,0.12); --jade: #1A7A5A; --jade-light: #27AE7A; --parchment: #F2E6C8; --text-bright: #F0E6C8; --text-muted: rgba(240,230,200,0.55); --text-faint: rgba(240,230,200,0.30); --border: rgba(201,168,76,0.18); --border-bright: rgba(201,168,76,0.50); --border-dim: rgba(201,168,76,0.08); /* 排版 */ --font-serif: 'Noto Serif TC', 'Songti SC', 'STSong', '宋體', serif; --font-sans: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; /* 間距 / 圓角 */ --radius: 8px; --radius-lg: 16px; --radius-xl: 24px; /* 陰影 */ --shadow: 0 4px 24px rgba(0,0,0,0.45); --shadow-lg: 0 8px 48px rgba(0,0,0,0.60); --shadow-gold: 0 0 24px rgba(201,168,76,0.15); --shadow-inset: inset 0 1px 0 rgba(201,168,76,0.08); /* 最大寬度 */ --max-w: 1080px; --max-w-narrow: 720px; --max-w-wide: 1280px; /* 過渡 */ --transition: 0.25s cubic-bezier(0.4,0,0.2,1); --transition-slow: 0.5s cubic-bezier(0.4,0,0.2,1); } /* ============================================================ 全局重置與基礎 ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; } body { background-color: var(--ink); color: var(--text-bright); font-family: var(--font-serif); font-weight: 400; line-height: 1.75; min-height: 100vh; overflow-x: hidden; /* 微妙的紋理背景 */ background-image: radial-gradient(ellipse at 20% 10%, rgba(201,168,76,0.04) 0%, transparent 50%), radial-gradient(ellipse at 80% 90%, rgba(192,57,43,0.03) 0%, transparent 50%); } img { max-width: 100%; height: auto; display: block; } ul, ol { list-style: none; } button { cursor: pointer; font-family: var(--font-serif); } input, select, textarea { font-family: var(--font-serif); } /* ============================================================ 捲軸樣式（細緻金色） ============================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--ink-light); } ::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--gold-dim) var(--ink-light); } /* ============================================================ 連結樣式 ============================================================ */ a { color: var(--gold); text-decoration: none; transition: color var(--transition), text-shadow var(--transition); } a:hover { color: var(--gold-light); text-shadow: 0 0 8px rgba(201,168,76,0.4); } a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; } /* ============================================================ 跳過導覽連結（無障礙） ============================================================ */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 9999; padding: 8px 16px; background: var(--gold); color: var(--ink); font-family: var(--font-sans); font-size: 0.9rem; font-weight: 700; border-radius: 0 0 var(--radius) var(--radius); text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 0; outline: none; } /* ============================================================ 容器 ============================================================ */ .container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 24px; } .container-narrow { width: 100%; max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 24px; } .container-wide { width: 100%; max-width: var(--max-w-wide); margin: 0 auto; padding: 0 24px; } /* ============================================================ TOPBAR（極細頂部公告條） ============================================================ */ .topbar { background: linear-gradient(90deg, var(--gold-pale) 0%, #1A1000 50%, var(--gold-pale) 100%); border-bottom: 1px solid var(--border); padding: 6px 24px; text-align: center; font-size: 0.78rem; font-family: var(--font-sans); color: var(--text-muted); letter-spacing: 0.08em; position: relative; overflow: hidden; } .topbar::before, .topbar::after { content: '✦'; color: var(--gold-dim); margin: 0 12px; opacity: 0.6; } .topbar a { color: var(--gold); font-weight: 500; } /* ============================================================ HEADER / 導航 ============================================================ */ header { position: sticky; top: 0; z-index: 100; background: rgba(13,11,15,0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); box-shadow: 0 2px 20px rgba(0,0,0,0.5); } .header-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 32px; } /* Logo */ .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; transition: opacity var(--transition); } .logo:hover { opacity: 0.85; text-shadow: none; } .logo-symbol { font-size: 1.8rem; line-height: 1; color: var(--gold); filter: drop-shadow(0 0 6px rgba(201,168,76,0.5)); animation: glow 3s ease-in-out infinite; } .logo-text { font-size: 1.25rem; font-weight: 700; color: var(--text-bright); letter-spacing: 0.12em; font-family: var(--font-serif); } .logo-text em { font-style: normal; color: var(--gold); } /* 導航 */ nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } nav a { color: var(--text-muted); font-size: 0.92rem; padding: 6px 14px; border-radius: var(--radius); letter-spacing: 0.06em; font-family: var(--font-sans); transition: color var(--transition), background var(--transition), box-shadow var(--transition); position: relative; } nav a::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%) scaleX(0); width: 60%; height: 1px; background: var(--gold); transition: transform var(--transition); } nav a:hover, nav a.active { color: var(--gold-light); background: rgba(201,168,76,0.06); box-shadow: 0 0 12px rgba(201,168,76,0.08); text-shadow: 0 0 8px rgba(201,168,76,0.3); } nav a:hover::after, nav a.active::after { transform: translateX(-50%) scaleX(1); } /* 手機選單按鈕 */ .nav-mobile-btn { display: none; background: none; border: 1px solid var(--border-bright); color: var(--gold); font-size: 1.1rem; width: 38px; height: 38px; border-radius: var(--radius); align-items: center; justify-content: center; margin-left: auto; transition: background var(--transition), box-shadow var(--transition); } .nav-mobile-btn:hover { background: var(--gold-pale); box-shadow: var(--shadow-gold); } /* 手機選單覆蓋層 */ .mobile-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; background: rgba(13,11,15,0.97); border-bottom: 1px solid var(--border); padding: 16px 24px; z-index: 99; flex-direction: column; gap: 4px; } .mobile-menu.open { display: flex; } .mobile-menu a { color: var(--text-muted); font-size: 1rem; padding: 12px 16px; border-radius: var(--radius); border-left: 2px solid transparent; transition: all var(--transition); } .mobile-menu a:hover { color: var(--gold); border-left-color: var(--gold); background: var(--gold-pale); text-shadow: none; } /* ============================================================ HERO 區塊 ============================================================ */ .hero-bg { position: relative; background: radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.07) 0%, transparent 60%), radial-gradient(ellipse at 10% 100%, rgba(192,57,43,0.05) 0%, transparent 50%), linear-gradient(180deg, var(--ink-light) 0%, var(--ink) 100%); overflow: hidden; padding: 80px 24px; } /* CSS 生成的卦象背景紋路 */ .hero-bg::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( 0deg, transparent, transparent 18px, rgba(201,168,76,0.025) 18px, rgba(201,168,76,0.025) 19px ), repeating-linear-gradient( 90deg, transparent, transparent 18px, rgba(201,168,76,0.025) 18px, rgba(201,168,76,0.025) 19px ); pointer-events: none; } /* 八卦紋路裝飾 */ .hero-bg::after { content: '☯'; position: absolute; font-size: 320px; color: rgba(201,168,76,0.025); top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; user-select: none; animation: slowRotate 60s linear infinite; } .hero-inner { position: relative; z-index: 1; max-width: var(--max-w-narrow); margin: 0 auto; text-align: center; } .hero-eyebrow { font-size: 0.8rem; letter-spacing: 0.3em; color: var(--gold-dim); font-family: var(--font-sans); text-transform: uppercase; margin-bottom: 16px; } .hero-title { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 900; color: var(--text-bright); letter-spacing: 0.15em; line-height: 1.2; margin-bottom: 16px; text-shadow: 0 2px 16px rgba(0,0,0,0.5); } .hero-title .highlight { color: var(--gold); text-shadow: 0 0 20px rgba(201,168,76,0.4); } .hero-subtitle { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 36px; letter-spacing: 0.06em; max-width: 480px; margin-left: auto; margin-right: auto; } .hero-divider { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 36px; } .hero-divider::before, .hero-divider::after { content: ''; flex: 1; max-width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim)); } .hero-divider::after { background: linear-gradient(90deg, var(--gold-dim), transparent); } .hero-divider span { color: var(--gold-dim); font-size: 0.85rem; letter-spacing: 0.2em; } /* ============================================================ 卡片 / 面板系統 ============================================================ */ /* 基礎卡片 */ .card { background: var(--ink-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); transition: border-color var(--transition), box-shadow var(--transition); } .card:hover { border-color: var(--border-bright); box-shadow: var(--shadow), var(--shadow-gold); } /* 面板（稍淺） */ .panel { background: var(--ink-mid); border: 1px solid var(--border-dim); border-radius: var(--radius); padding: 20px; } /* 玻璃擬態卡片 */ .glass-card { background: rgba(36,30,52,0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(201,168,76,0.15); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.04); } /* 金色強調卡片 */ .card-gold { background: linear-gradient(135deg, var(--ink-card) 0%, rgba(42,32,16,0.8) 100%); border: 1px solid var(--border-bright); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow), var(--shadow-gold); } /* 朱紅強調卡片 */ .card-vermillion { background: linear-gradient(135deg, var(--ink-card) 0%, var(--vermillion-pale) 100%); border: 1px solid rgba(192,57,43,0.3); border-radius: var(--radius-lg); padding: 24px; } /* ============================================================ 易經特有組件 ============================================================ */ /* 卦象顯示容器 */ .hexagram-symbol { display: flex; flex-direction: column; gap: 6px; width: 120px; margin: 0 auto; padding: 16px 0; } .hexagram-symbol.lg { width: 160px; gap: 8px; } .hexagram-symbol.sm { width: 64px; gap: 4px; } /* 爻線 */ .hexagram-line { height: 6px; border-radius: 3px; position: relative; animation: lineAppear 0.4s ease-out both; } /* 陽爻（實線）*/ .hexagram-line.yang { background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-dim)); box-shadow: 0 0 6px rgba(201,168,76,0.3); } /* 陰爻（斷線）*/ .hexagram-line.yin { background: transparent; display: flex; gap: 0; height: 6px; } .hexagram-line.yin::before, .hexagram-line.yin::after { content: ''; flex: 1; height: 6px; background: linear-gradient(90deg, var(--gold-dim), var(--gold-dim)); border-radius: 3px; opacity: 0.7; } .hexagram-line.yin::before { margin-right: 20%; } .hexagram-line.yin::after { margin-left: 20%; } /* 老陽（動爻）— 有○標記 */ .hexagram-line.yang-changing { background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-dim)); box-shadow: 0 0 12px rgba(201,168,76,0.6); animation: lineAppear 0.4s ease-out both, glow 2s ease-in-out infinite; } .hexagram-line.yang-changing::after { content: '○'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; color: #fff; line-height: 1; } /* 老陰（動爻）— 有×標記 */ .hexagram-line.yin-changing { background: transparent; display: flex; height: 6px; } .hexagram-line.yin-changing::before, .hexagram-line.yin-changing::after { content: ''; flex: 1; height: 6px; background: var(--gold-dim); border-radius: 3px; opacity: 0.7; } .hexagram-line.yin-changing::before { margin-right: 20%; } .hexagram-line.yin-changing::after { margin-left: 20%; } .hexagram-line.yin-changing .change-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 11px; color: var(--vermillion-light); font-weight: 700; line-height: 1; z-index: 1; text-shadow: 0 0 6px rgba(231,76,60,0.6); } /* 八卦徽章 */ .trigram-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 16px; background: var(--ink-card); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); min-width: 72px; } .trigram-badge:hover, .trigram-badge.active { border-color: var(--gold); background: var(--gold-pale); box-shadow: var(--shadow-gold); } .trigram-badge .trigram-char { font-size: 1.8rem; line-height: 1; color: var(--gold); } .trigram-badge .trigram-name { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.06em; font-family: var(--font-sans); } /* 銅錢樣式 */ .coin { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #D4A02A 0%, #8B6914 40%, #5A4008 100%); border: 2px solid var(--gold); box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.15), 0 0 16px rgba(201,168,76,0.2); display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; transition: transform var(--transition); } /* 方孔 */ .coin::before { content: ''; width: 14px; height: 14px; background: var(--ink); border: 1px solid rgba(0,0,0,0.6); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 錢文 */ .coin .coin-face { font-size: 0.7rem; color: var(--gold-light); font-weight: 700; letter-spacing: -0.02em; position: absolute; /* 分佈在方孔四周 */ top: 8px; left: 50%; transform: translateX(-50%); text-shadow: 0 1px 2px rgba(0,0,0,0.5); } .coin.tails { background: radial-gradient(circle at 65% 65%, #7A5C10 0%, #5A4008 50%, #3A2A04 100%); } .coin.flipping { animation: coinFlip 0.6s ease-in-out; } .coin-row { display: flex; gap: 16px; align-items: center; justify-content: center; } .coin-result { font-size: 0.7rem; font-family: var(--font-sans); color: var(--text-muted); text-align: center; margin-top: 4px; } /* ============================================================ 按鈕系統 ============================================================ */ /* 金色主要按鈕 */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; background: linear-gradient(135deg, #A07828 0%, #C9A84C 40%, #D4B460 60%, #A07828 100%); color: var(--ink); font-family: var(--font-serif); font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; border: 1px solid var(--gold-light); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(201,168,76,0.3), inset 0 1px 0 rgba(255,255,255,0.2); cursor: pointer; transition: all var(--transition); text-decoration: none; white-space: nowrap; } .btn-primary:hover { background: linear-gradient(135deg, #B08830 0%, #D4B460 40%, #E8C96A 60%, #B08830 100%); box-shadow: 0 6px 24px rgba(201,168,76,0.45), inset 0 1px 0 rgba(255,255,255,0.3); transform: translateY(-1px); color: var(--ink); text-shadow: none; } .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(201,168,76,0.2); } .btn-primary.lg { font-size: 1.15rem; padding: 16px 40px; letter-spacing: 0.14em; } .btn-primary.xl { font-size: 1.3rem; padding: 20px 52px; letter-spacing: 0.16em; border-radius: var(--radius-lg); } /* 邊框型按鈕 */ .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 26px; background: transparent; color: var(--gold); font-family: var(--font-serif); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.08em; border: 1px solid var(--border-bright); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); text-decoration: none; white-space: nowrap; } .btn-secondary:hover { background: var(--gold-pale); border-color: var(--gold); box-shadow: var(--shadow-gold); color: var(--gold-light); text-shadow: none; transform: translateY(-1px); } /* 朱紅按鈕 */ .btn-vermillion { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 26px; background: linear-gradient(135deg, #8B1A10 0%, #C0392B 50%, #8B1A10 100%); color: #FFE8E5; font-family: var(--font-serif); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; border: 1px solid rgba(231,76,60,0.4); border-radius: var(--radius); cursor: pointer; transition: all var(--transition); text-decoration: none; white-space: nowrap; box-shadow: 0 4px 16px rgba(192,57,43,0.25); } .btn-vermillion:hover { background: linear-gradient(135deg, #A01C12 0%, #E74C3C 50%, #A01C12 100%); box-shadow: 0 6px 24px rgba(231,76,60,0.35); transform: translateY(-1px); color: #FFE8E5; text-shadow: none; } /* 文字按鈕 */ .btn-text { background: none; border: none; color: var(--gold); font-family: var(--font-serif); font-size: 0.9rem; cursor: pointer; padding: 4px 8px; transition: color var(--transition), text-shadow var(--transition); letter-spacing: 0.06em; } .btn-text:hover { color: var(--gold-light); text-shadow: 0 0 8px rgba(201,168,76,0.4); } /* ============================================================ 廣告區塊 ============================================================ */ .ad-banner { width: 100%; background: rgba(20,16,30,0.6); border: 1px dashed rgba(201,168,76,0.12); border-radius: var(--radius); padding: 4px; text-align: center; overflow: hidden; margin: 24px 0; position: relative; } .ad-banner::before { content: attr(data-label); display: block; font-size: 0.65rem; color: var(--text-faint); letter-spacing: 0.15em; font-family: var(--font-sans); padding: 2px 0 4px; } .ad-in-content { width: 100%; background: rgba(20,16,30,0.4); border: 1px dashed rgba(201,168,76,0.10); border-radius: var(--radius); padding: 8px; text-align: center; margin: 32px 0; position: relative; } .ad-label { font-size: 0.65rem; color: var(--text-faint); letter-spacing: 0.15em; font-family: var(--font-sans); display: block; margin-bottom: 4px; text-align: center; } .ad-placeholder { background: rgba(201,168,76,0.03); border: 1px dashed rgba(201,168,76,0.08); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.1em; } .ad-placeholder.banner { height: 90px; max-width: 728px; margin: 0 auto; } .ad-placeholder.square { height: 250px; max-width: 300px; margin: 0 auto; } .ad-placeholder.rect { height: 250px; max-width: 336px; margin: 0 auto; } /* ============================================================ FOOTER ============================================================ */ footer { background: var(--ink-light); border-top: 1px solid var(--border); padding: 48px 24px 32px; margin-top: 80px; position: relative; overflow: hidden; } footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); } .footer-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 32px; } .footer-logo { font-size: 1.4rem; font-weight: 700; color: var(--gold); letter-spacing: 0.15em; font-family: var(--font-serif); text-shadow: 0 0 12px rgba(201,168,76,0.3); } .footer-links { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; } .footer-links a { color: var(--text-muted); font-size: 0.88rem; font-family: var(--font-sans); letter-spacing: 0.05em; transition: color var(--transition); } .footer-links a:hover { color: var(--gold); text-shadow: none; } .footer-copy { text-align: right; font-size: 0.78rem; color: var(--text-faint); font-family: var(--font-sans); letter-spacing: 0.04em; line-height: 1.6; } /* ============================================================ 標題與文字排版工具 ============================================================ */ .section-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: var(--text-bright); letter-spacing: 0.12em; text-align: center; margin-bottom: 8px; } .section-title .gold { color: var(--gold); } .section-subtitle { font-size: 0.92rem; color: var(--text-muted); text-align: center; letter-spacing: 0.06em; margin-bottom: 40px; } .section-divider { display: flex; align-items: center; gap: 16px; margin: 16px auto 40px; max-width: 320px; } .section-divider::before, .section-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-bright)); } .section-divider::after { background: linear-gradient(90deg, var(--border-bright), transparent); } .section-divider span { font-size: 1rem; color: var(--gold-dim); } /* 分隔裝飾線 */ .ornament { display: flex; align-items: center; gap: 12px; color: var(--gold-dim); font-size: 0.8rem; letter-spacing: 0.2em; } .ornament::before, .ornament::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ============================================================ 頁面 Section 間距 ============================================================ */ section { padding: 64px 0; } section + section { padding-top: 0; } /* ============================================================ Tab 元件 ============================================================ */ .tab-bar { display: flex; gap: 2px; background: var(--ink-mid); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; margin-bottom: 24px; } .tab-btn { flex: 1; padding: 8px 16px; background: none; border: none; color: var(--text-muted); font-family: var(--font-serif); font-size: 0.9rem; letter-spacing: 0.06em; border-radius: 6px; cursor: pointer; transition: all var(--transition); } .tab-btn:hover { color: var(--gold); background: var(--gold-pale); } .tab-btn.active { background: linear-gradient(135deg, var(--gold-pale), rgba(42,32,16,0.8)); color: var(--gold-light); border: 1px solid var(--border-bright); box-shadow: var(--shadow-gold); } .tab-content { display: none; } .tab-content.active { display: block; animation: fadeInUp 0.3s ease-out; } /* ============================================================ 表單元素 ============================================================ */ .input-field { background: var(--ink-mid); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-bright); font-family: var(--font-serif); font-size: 0.95rem; padding: 10px 14px; width: 100%; transition: border-color var(--transition), box-shadow var(--transition); } .input-field:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,168,76,0.1); outline: none; } .input-field::placeholder { color: var(--text-faint); } /* ============================================================ Badge / Tag ============================================================ */ .badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 0.72rem; font-family: var(--font-sans); letter-spacing: 0.08em; font-weight: 500; } .badge-gold { background: var(--gold-pale); color: var(--gold); border: 1px solid var(--border); } .badge-vermillion { background: var(--vermillion-pale); color: var(--vermillion-light); border: 1px solid rgba(231,76,60,0.2); } .badge-jade { background: rgba(26,122,90,0.12); color: var(--jade-light); border: 1px solid rgba(26,122,90,0.25); } /* ============================================================ 進度/步驟指示 ============================================================ */ .step-indicator { display: flex; align-items: center; gap: 0; margin-bottom: 32px; } .step-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-family: var(--font-sans); font-weight: 600; background: var(--ink-mid); border: 1px solid var(--border); color: var(--text-faint); flex-shrink: 0; transition: all var(--transition); } .step-dot.active { background: var(--gold-pale); border-color: var(--gold); color: var(--gold); box-shadow: 0 0 8px rgba(201,168,76,0.3); } .step-dot.done { background: var(--gold); border-color: var(--gold); color: var(--ink); } .step-line { flex: 1; height: 1px; background: var(--border); } .step-line.done { background: var(--gold-dim); } /* ============================================================ 六十四卦格子 ============================================================ */ .hexagram-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; } .hex-cell { aspect-ratio: 1; background: var(--ink-card); border: 1px solid var(--border-dim); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; text-decoration: none; transition: all var(--transition); padding: 8px 4px; position: relative; overflow: hidden; } .hex-cell::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at center, var(--gold-glow), transparent 70%); opacity: 0; transition: opacity var(--transition); } .hex-cell:hover::before { opacity: 1; } .hex-cell:hover { border-color: var(--gold); transform: scale(1.06); box-shadow: var(--shadow-gold); z-index: 2; text-shadow: none; } .hex-cell.auspicious { background: linear-gradient(135deg, var(--ink-card), rgba(201,168,76,0.04)); } .hex-cell.inauspicious { background: linear-gradient(135deg, var(--ink-card), var(--vermillion-pale)); } .hex-cell.neutral { background: linear-gradient(135deg, var(--ink-card), rgba(26,122,90,0.04)); } .hex-cell-char { font-size: clamp(18px, 2.5vw, 28px); line-height: 1; color: var(--gold); filter: drop-shadow(0 0 4px rgba(201,168,76,0.3)); } .hex-cell-name { font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.05em; font-family: var(--font-sans); text-align: center; } .hex-cell-desc { font-size: 0.6rem; color: var(--text-faint); letter-spacing: 0.04em; font-family: var(--font-sans); text-align: center; } /* ============================================================ 今日卦 ============================================================ */ .daily-hex-card { background: linear-gradient(135deg, var(--ink-card) 0%, var(--gold-pale) 100%); border: 1px solid var(--border-bright); border-radius: var(--radius-lg); padding: 28px; display: flex; gap: 24px; align-items: center; box-shadow: var(--shadow), var(--shadow-gold); } .daily-hex-symbol { font-size: 4rem; color: var(--gold); flex-shrink: 0; filter: drop-shadow(0 0 12px rgba(201,168,76,0.4)); animation: glow 4s ease-in-out infinite; } .daily-hex-info { flex: 1; } .daily-hex-label { font-size: 0.72rem; color: var(--text-faint); letter-spacing: 0.2em; font-family: var(--font-sans); margin-bottom: 4px; } .daily-hex-name { font-size: 1.5rem; font-weight: 700; color: var(--gold-light); letter-spacing: 0.12em; margin-bottom: 6px; } .daily-hex-message { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; } /* ============================================================ 起卦結果區 ============================================================ */ .result-card { background: var(--ink-card); border: 1px solid var(--border-bright); border-radius: var(--radius-xl); padding: 36px; text-align: center; box-shadow: var(--shadow-lg), var(--shadow-gold); animation: fadeInUp 0.5s ease-out; position: relative; overflow: hidden; } .result-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .result-hexagram { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; } .hex-name { font-size: 1.8rem; font-weight: 700; color: var(--text-bright); letter-spacing: 0.2em; } .hex-number { font-size: 0.78rem; color: var(--text-faint); font-family: var(--font-sans); letter-spacing: 0.15em; } .brief-meaning { font-size: 1rem; color: var(--text-muted); line-height: 1.9; margin-bottom: 24px; max-width: 480px; margin-left: auto; margin-right: auto; } .btn-detail { display: inline-block; padding: 13px 32px; background: linear-gradient(135deg, var(--gold-pale), rgba(42,32,16,0.9)); border: 1px solid var(--gold); border-radius: var(--radius); color: var(--gold-light); font-size: 1rem; font-family: var(--font-serif); letter-spacing: 0.08em; transition: all var(--transition); margin-bottom: 16px; } .btn-detail:hover { background: var(--gold); color: var(--ink); box-shadow: var(--shadow-gold); text-shadow: none; } .changed-hexagram { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--text-muted); } .btn-reset { margin-top: 16px; background: none; border: 1px solid var(--border); color: var(--text-faint); font-family: var(--font-serif); font-size: 0.85rem; padding: 8px 20px; border-radius: var(--radius); cursor: pointer; letter-spacing: 0.08em; transition: all var(--transition); } .btn-reset:hover { border-color: var(--border-bright); color: var(--text-muted); } /* ============================================================ 知識卡片 ============================================================ */ .knowledge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; } .knowledge-card { background: var(--ink-card); border: 1px solid var(--border-dim); border-radius: var(--radius-lg); padding: 24px; cursor: pointer; text-decoration: none; transition: all var(--transition); display: flex; flex-direction: column; gap: 10px; } .knowledge-card:hover { border-color: var(--border-bright); box-shadow: var(--shadow-gold); transform: translateY(-3px); text-shadow: none; } .knowledge-card-icon { font-size: 1.8rem; line-height: 1; } .knowledge-card-title { font-size: 1rem; font-weight: 600; color: var(--text-bright); letter-spacing: 0.08em; } .knowledge-card-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.7; flex: 1; } .knowledge-card-link { font-size: 0.8rem; color: var(--gold-dim); font-family: var(--font-sans); } /* ============================================================ 動畫 @keyframes ============================================================ */ /* 金色光暈脈動 */ @keyframes glow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(201,168,76,0.3)); opacity: 1; } 50% { filter: drop-shadow(0 0 12px rgba(201,168,76,0.7)); opacity: 0.9; } } /* 文字發光 */ @keyframes textGlow { 0%, 100% { text-shadow: 0 0 8px rgba(201,168,76,0.2); } 50% { text-shadow: 0 0 20px rgba(201,168,76,0.6); } } /* 向上淡入 */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* 淡入 */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* 銅錢翻轉 */ @keyframes coinFlip { 0% { transform: perspective(400px) rotateY(0deg); } 25% { transform: perspective(400px) rotateY(90deg); } 50% { transform: perspective(400px) rotateY(180deg); } 75% { transform: perspective(400px) rotateY(270deg); } 100% { transform: perspective(400px) rotateY(360deg); } } /* 爻線出現 */ @keyframes lineAppear { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } } /* 緩慢旋轉（裝飾） */ @keyframes slowRotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* 脈動邊框 */ @keyframes pulseBorder { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); } 50% { box-shadow: 0 0 0 4px rgba(201,168,76,0.15); } } /* 銅錢搖晃待機 */ @keyframes coinIdle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(3deg); } 75% { transform: rotate(-3deg); } } /* ============================================================ 響應式 — Tablet & Landscape Mobile (≤1024px) ============================================================ */ @media (max-width: 1024px) { :root { --radius: 6px; --radius-lg: 12px; } .header-inner { padding: 0 16px; gap: 12px; } /* 在 1024px 以下統一使用手機版導航 */ nav { display: none; } .nav-mobile-btn { display: flex; } .hero-bg { padding: 56px 16px 48px; } .hero-bg::after { font-size: 180px; } section { padding: 48px 0; } .container, .container-narrow, .container-wide { padding: 0 16px; } .hexagram-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; } .hex-cell-name, .hex-cell-desc { display: none; } .hex-cell-char { font-size: 22px; } .tab-bar { flex-direction: row; /* 平板寬度足夠時保持橫向，極小寬度才垂直 */ flex-wrap: wrap; } .daily-hex-card { flex-direction: row; text-align: left; padding: 24px; } .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 20px; } .footer-links { justify-content: center; } .footer-copy { text-align: center; } .knowledge-grid { grid-template-columns: 1fr 1fr; } .result-card { padding: 24px 16px; } .coin { width: 52px; height: 52px; } .coin::before { width: 11px; height: 11px; } .btn-primary.xl { font-size: 1.1rem; padding: 16px 36px; } .trigram-badge { min-width: 58px; padding: 10px 8px; } .trigram-badge .trigram-char { font-size: 1.5rem; } } /* ============================================================ 響應式 — Small Mobile (≤480px) ============================================================ */ @media (max-width: 480px) { .hexagram-grid { grid-template-columns: repeat(4, 1fr); } .tab-bar { flex-direction: column; } .daily-hex-card { flex-direction: column; text-align: center; } .hero-title { font-size: 1.8rem; } } /* ============================================================ 工具類 ============================================================ */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-gold { color: var(--gold); } .text-vermillion { color: var(--vermillion-light); } .text-jade { color: var(--jade-light); } .text-muted { color: var(--text-muted); } .text-faint { color: var(--text-faint); } .text-bright { color: var(--text-bright); } .font-serif { font-family: var(--font-serif); } .font-sans { font-family: var(--font-sans); } .mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }