/* ============================================================ 《星潮長航》STARTIDE ODYSSEY — main.css 設計正典：_design/design-spec.md（Fable 5） 色票/字級/曲線一律照規格 B 部原文，不得自行調整。 ============================================================ */ /* ---------- B-1 色票「磷光海」 ---------- */ :root { /* 底 — 夜海 */ --abyss: #050A08; --deep: #0B1512; --raised: #122019; --hairline: #24362D; --hairline-lo: #16241E; /* 磷光 — 安全/增長/主強調 */ --phos: #45F0B4; --phos-bright: #8FFFD9; --phos-dim: #1E8C6B; --phos-ghost: rgba(69,240,180,0.12); /* 星白 — 標題/主文字 */ --starlight: #EDE8DA; --ink-body: #B9C6BD; --ink-mute: #7C8B82; /* 燈火 — 人/生活/CTA */ --ember: #FF8A4A; --ember-deep: #C2551F; --ember-ghost: rgba(255,138,74,0.14); /* 語意 — 風險刻度 */ --warn: #FFB02E; --danger: #FF4E5E; --danger-deep: #8C1F2B; --danger-ghost: rgba(255,78,94,0.12); /* 黎明 */ --dawn-paper: #F5EFE3; --dawn-ink: #1C2B24; --dawn-ink-2: #46584E; --dawn-line: #D8CFBB; --dawn-ember: #E06B2D; --dawn-phos: #0E7A57; /* B-2.2 字級尺度（1.333 / base 17px） */ --fs--1: 13px; --fs-0: 17px; --fs-1: clamp(20px, 1.6vw, 23px); --fs-2: clamp(26px, 2.4vw, 30px); --fs-3: clamp(32px, 3.4vw, 40px); --fs-4: clamp(40px, 4.6vw, 54px); --fs-5: clamp(48px, 6.4vw, 72px); --fs-6: clamp(60px, 9vw, 96px); --fs-hero: clamp(64px, 12vw, 160px); /* 動效曲線（B-5.1） */ --e-quick: cubic-bezier(0.22,0.61,0.36,1); --e-base: cubic-bezier(0.16,1,0.3,1); --e-slow: cubic-bezier(0.19,1,0.22,1); --e-camera:cubic-bezier(0.87,0,0.13,1); /* 語意別名（黎明翻轉時只換這組） */ --c-bg: var(--abyss); --c-panel: var(--deep); --c-raise: var(--raised); --c-line: var(--hairline); --c-line-lo: var(--hairline-lo); --c-title: var(--starlight); --c-body: var(--ink-body); --c-mute: var(--ink-mute); --c-phos: var(--phos); --c-phos-dim: var(--phos-dim); --c-ember: var(--ember); } /* B-1.3 黎明翻轉（.is-dawn 掛在 ） */ .is-dawn { --c-bg: var(--dawn-paper); --c-panel: #EFE7D6; --c-raise: #E9E0CC; --c-line: var(--dawn-line); --c-line-lo: #E4DCC8; --c-title: var(--dawn-ink); --c-body: var(--dawn-ink); --c-mute: var(--dawn-ink-2); --c-phos: var(--dawn-phos); --c-phos-dim: var(--dawn-phos); --c-ember: var(--dawn-ember); } /* ---------- Reset / base ---------- */ * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } html, body { background: var(--c-bg); overflow-x: clip; } /* clip 不產生捲動容器，保 pin（review-2 P0-N1 保險） */ body { font-family: 'Noto Sans TC', sans-serif; font-size: var(--fs-0); color: var(--c-body); line-height: 1.95; letter-spacing: 0.02em; overflow-x: clip; /* hidden 會讓 body 變捲動容器、殺掉 sticky（Fable 驗證抓到）；clip 裁切同效且不建容器 */ transition: background-color 1.2s var(--e-camera), color 1.2s var(--e-camera); } ::selection { background: var(--phos-ghost); color: var(--phos-bright); } .is-dawn ::selection { color: var(--dawn-phos); } img, svg, canvas { max-width: 100%; display: block; } img { height: auto; } /* width/height 屬性縮放時保持比例（review-images：IMG-3 橢圓、IMG-4 行動壓扁同源） */ button { font: inherit; cursor: pointer; background:none; border:none; color:inherit; } input { font: inherit; color: inherit; } a { color: var(--c-body); text-decoration: none; } /* 文字連結：磷光底線從左 draw */ .lnk { position: relative; color: var(--c-body); transition: color .3s var(--e-quick); background-image: linear-gradient(var(--c-phos), var(--c-phos)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: color .3s var(--e-quick), background-size .3s var(--e-quick); } .lnk:hover { color: var(--phos-bright); background-size: 100% 1px; } .is-dawn .lnk:hover { color: var(--dawn-phos); } /* ---------- 3D 畫布與 grain ---------- */ #sea-canvas { position: fixed; inset: 0; z-index: 0; } .grain { position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .is-dawn .grain { opacity: 0.035; } /* WebGL 降級 CSS 星空 */ .css-sky { position: fixed; inset: 0; z-index: 0; display: none; background: linear-gradient(transparent 60%, #0E3B2C 140%), var(--abyss); } .no-webgl .css-sky { display: block; } .no-webgl #sea-canvas { display: none; } .css-sky::before, .css-sky::after { content:''; position:absolute; width:2px; height:2px; border-radius:50%; background: transparent; } /* ---------- 版式基準 ---------- */ .content { position: relative; z-index: 10; } .wrap { max-width: 1120px; margin-inline: auto; padding-inline: 32px; } .prose { max-width: 34em; } .prose p { margin-bottom: 1.6em; } .center { text-align:center; } .breath { height: 240px; } /* 章間呼吸段 */ section.chapter { position: relative; padding-block: 12vh; } /* 章號背景水印 */ .ch-watermark { position: absolute; top: 4vh; right: -4vw; z-index: 1; font-family: 'Fraunces', serif; font-style: italic; font-weight: 350; font-size: 22vw; line-height: 1; color: var(--c-title); opacity: 0.04; pointer-events: none; user-select: none; } /* 章首 */ .ch-head { position: relative; z-index: 10; margin-bottom: 8vh; } .ch-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs--1); color: var(--c-phos-dim); letter-spacing: 0.15em; margin-bottom: 12px; } .ch-num { font-family: 'Fraunces', serif; font-style: italic; font-weight: 350; font-size: var(--fs-6); color: var(--c-phos-dim); opacity: 0.5; line-height: 1; clip-path: inset(0 100% 0 0); } .ch-title { font-family: 'Noto Serif TC', serif; font-weight: 900; font-size: var(--fs-5); color: var(--c-title); line-height: 1.15; letter-spacing: 0.06em; margin-top: 8px; } .ch-title-sm { font-size: var(--fs-4); } .ch-lat { font-family:'Fraunces',serif; font-style:italic; font-weight:350; font-size: 0.6em; color: var(--c-phos-dim); vertical-align: middle; } /* 潮線 */ .tide { position: relative; height:1px; background: var(--c-line); margin-block: 28px; transform-origin: left; } .tide::after { content:''; position:absolute; left:50%; top:-3px; width:6px; height:6px; background: var(--c-phos); transform: translateX(-50%) rotate(45deg); opacity: 0; } .tide.shown::after { opacity: 1; transition: opacity .5s var(--e-base) .6s; } /* 章首航線提示（船票） */ .route-hint { font-size: var(--fs--1); color: var(--c-mute); margin-top: 10px; font-family: 'IBM Plex Mono', monospace; display:none; } .route-hint.on { display:block; } /* ---------- 文字元件 ---------- */ h3.subhead { font-family:'Noto Serif TC',serif; font-weight:600; font-size: var(--fs-2); color: var(--c-title); margin: 2.2em 0 0.8em; letter-spacing: 0.04em; } /* 金句（老師的聲音） */ .quote { position: relative; padding-left: 26px; margin: 3.2em 0; font-family: 'LXGW WenKai TC', serif; font-size: var(--fs-3); line-height: 1.7; letter-spacing: 0.04em; color: var(--c-title); } .quote.q-md { font-size: var(--fs-2); } .quote.q-lg { font-size: var(--fs-4); } .quote::before { content:''; position:absolute; left:0; top:6px; bottom:6px; width:2px; background: var(--c-phos); transform-origin: top; transform: scaleY(0); } .quote.shown::before { transform: scaleY(1); transition: transform 1.2s var(--e-slow); } .quote .src { display:block; margin-top: 14px; font-family:'IBM Plex Mono',monospace; font-size: var(--fs--1); color: var(--c-mute); letter-spacing: 0.05em; } .quote em { font-style: normal; color: var(--c-ember); } /* 出處標注（全域）——nowrap 只給行內短標；段落級一律可換行（review-2 P0-N1 真因） */ .src-tag { font-family:'IBM Plex Mono',monospace; font-size: var(--fs--1); color: var(--c-phos-dim); letter-spacing: 0.03em; white-space: nowrap; } p.src-tag, .duel .note, .two-valves .caption, figcaption.src-tag, .src-tag.wrapok { white-space: normal; overflow-wrap: anywhere; } /* 行內數字/代號 */ .num, .mono { font-family:'IBM Plex Mono',monospace; font-size: 0.88em; letter-spacing: 0.08em; margin-inline: 0.08em; } .tag { font-family:'IBM Plex Mono',monospace; font-size:0.88em; border:1px solid var(--c-line); padding:0 6px; border-radius:3px; color: var(--c-phos); white-space: nowrap; margin-inline: 2px; } /* 巨大數字 */ .bignum { font-family:'Fraunces',serif; font-weight:550; font-style: italic; font-variation-settings: 'opsz' 144; font-size: var(--fs-6); line-height:1.1; color: var(--c-phos); font-variant-numeric: tabular-nums; } .bignum.hero-size { font-size: var(--fs-hero); } .bignum.neg { color: var(--danger); } .bignum .unit { font-size: var(--fs-1); color: var(--c-title); font-style:normal; font-weight:400; font-family:'Noto Sans TC',sans-serif; } /* 面板 */ .panel { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 4px; padding: 28px 32px; transition: background-color 1.2s var(--e-camera), border-color 1.2s var(--e-camera); } /* 卡片 */ .card { background: var(--c-panel); border:1px solid var(--c-line); border-radius:4px; padding: 22px 24px; transition: transform .3s var(--e-quick), border-color .3s var(--e-quick), box-shadow .3s var(--e-quick); } .card:hover { transform: translateY(-4px); border-color: var(--c-phos-dim); box-shadow: 0 0 24px rgba(69,240,180,0.18), 0 0 2px rgba(69,240,180,0.4); } /* 航海筆記 */ .lognote { margin-top: 6vh; max-width: 560px; background: var(--c-panel); border:1px solid var(--c-line); border-radius:4px; padding: 20px 26px; } .lognote .lbl { font-family:'IBM Plex Mono',monospace; font-size:var(--fs--1); color:var(--c-phos-dim); letter-spacing:.2em; display:block; margin-bottom:8px; } .lognote .txt { font-family:'LXGW WenKai TC',serif; font-size:var(--fs-1); color:var(--c-title); line-height:1.7; } /* 免責 chip（不得縮小、不得摺疊） */ .disclaimer { font-size: var(--fs--1); color: var(--c-mute); line-height: 1.8; border-left: 2px solid var(--warn); background: var(--c-panel); padding: 12px 18px; border-radius: 0 4px 4px 0; max-width: 720px; margin-block: 4vh 0; } /* 免責微標記（Fable 裁決 c 案：完整版只留 hero+終章、加強版不動、儀器旁降級單行） */ .micro-disc { font-family: 'IBM Plex Mono', monospace; font-size: var(--fs--1); color: var(--c-mute); opacity: .55; margin-top: 3vh; letter-spacing: .04em; } .micro-disc a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .micro-disc a:hover { color: var(--c-body); } /* 加強版（新手切勿照抄） */ .disclaimer-strong { border: 1px solid var(--warn); border-left-width: 3px; color: var(--c-body); font-size: var(--fs--1); background: var(--c-panel); padding: 14px 20px; border-radius: 4px; line-height: 1.9; max-width: 720px; margin-block: 3vh; } .disclaimer-strong strong { color: var(--warn); } /* CTA */ .btn-ember { display:inline-block; background: var(--c-ember); color: var(--abyss); font-weight: 700; font-size: var(--fs-0); letter-spacing: .06em; padding: 14px 36px; border-radius: 4px; transition: filter .3s var(--e-quick), box-shadow .3s var(--e-quick), transform .1s; } .btn-ember:hover { filter: brightness(1.08); box-shadow: 0 0 28px var(--ember-ghost), 0 0 3px rgba(255,138,74,.5); } .btn-ember:active { transform: scale(.98); } .btn-ghost { display:inline-block; border:1px solid var(--c-line); color: var(--c-body); padding: 13px 30px; border-radius:4px; font-size: var(--fs-0); letter-spacing:.04em; transition: border-color .3s var(--e-quick), color .3s var(--e-quick), box-shadow .3s var(--e-quick); } .btn-ghost:hover { border-color: var(--c-phos-dim); color: var(--phos-bright); box-shadow: 0 0 20px rgba(69,240,180,.12); } .is-dawn .btn-ghost:hover { color: var(--dawn-phos); } .btn-phos { display:inline-block; border:1px solid var(--phos-dim); color: var(--phos); padding: 13px 34px; border-radius:4px; letter-spacing:.04em; transition: box-shadow .3s var(--e-quick), border-color .3s var(--e-quick); } .btn-phos:hover { border-color: var(--phos); box-shadow: 0 0 24px rgba(69,240,180,.25), 0 0 2px rgba(69,240,180,.6); } .btn-mute { display:inline-block; border:1px solid var(--c-line); color: var(--c-mute); padding: 13px 34px; border-radius:4px; letter-spacing:.04em; transition: color .3s var(--e-quick), border-color .3s var(--e-quick); } .btn-mute:hover { color: var(--c-body); border-color: var(--c-mute); } /* ---------- 進場動效初始狀態（JS 掛 gsap） ---------- */ .will-ink { opacity: 0; filter: blur(10px); } .will-rise { opacity: 0; transform: translateY(28px); } .will-line { transform: scaleX(0); transform-origin: left; } .will-fade { opacity: 0; } .reduced-motion .will-ink, .reduced-motion .will-rise, .reduced-motion .will-fade { opacity:1; transform:none; filter:none; } .reduced-motion .will-line { transform: scaleX(1); } /* ============================================================ D-0 載入序列 ============================================================ */ #loader { position: fixed; inset:0; z-index: 100; background: var(--abyss); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; } #loader .line { width: min(420px, 70vw); height: 1px; background: var(--phos); transform: scaleX(0); box-shadow: 0 0 16px rgba(69,240,180,.5); } #loader .motto { font-family: 'LXGW WenKai TC', serif; font-size: var(--fs-2); color: var(--starlight); letter-spacing: 0.5em; opacity: 0; padding-left: 0.5em; /* 平衡字距 */ } #loader.done { pointer-events: none; } /* ============================================================ NAV / HUD ============================================================ */ .nav { position: fixed; top:0; left:0; right:0; z-index: 60; display:flex; justify-content: space-between; align-items:center; padding: 20px 32px; pointer-events: none; } .nav > * { pointer-events: auto; } .nav .brand { display:flex; align-items: baseline; gap: 10px; } .nav .brand .zh { font-family:'Noto Serif TC',serif; font-weight:900; font-size: var(--fs-1); color: var(--c-title); letter-spacing: .12em; } .nav .brand .en { font-family:'Fraunces',serif; font-style:italic; font-size: var(--fs--1); color: var(--c-phos-dim); letter-spacing: .2em; } .nav .links { display:flex; gap: 24px; font-size: var(--fs--1); font-weight:500; } .nav .links a { color: var(--c-mute); transition: color .3s var(--e-quick); } .nav .links a:hover { color: var(--phos-bright); } .is-dawn .nav .links a:hover { color: var(--dawn-phos); } /* 羅盤 HUD */ #hud { position: fixed; left: 28px; bottom: 28px; z-index: 60; display:flex; flex-direction:column; gap:8px; align-items:flex-start; } /* .dial 已改為原生