/* ============================================================================ night.css｜港町異頻事務所專頁樣式 ---------------------------------------------------------------------------- 來源：Claude Design 專案「港町夜版預售頁 v2.dc.html」（2026-08-23 匯入） v2 是 Design Canvas 的反應式模板（sc-for／sc-if／x-import），那套 runtime 在純靜態站上沒有，所以這裡是**照著它的設計語言重寫**，不是複製。 ⚠️ 站制口徑：v2 的文案寫「十一站任選六站」，但本案已於 07-26/27 改為「一店一本、選一間店」。本檔一律用單店口徑，不得出現「任選六站」。 v2 的設計代幣（_ds/.../tokens/layout.css）對照： --content-max 1280 / --reading-max 720 / --page-gutter clamp(20,5vw,72) --radius-card 2px / --notch-size 14px / --ease-brand cubic-bezier(.22,.61,.36,1) --opacity-paper-grain .12 / --opacity-analog-noise .07 ============================================================================ */ body[data-page='night'] { --km-content: 1280px; --km-reading: 720px; --km-gutter: clamp(20px, 5vw, 72px); --km-notch: 14px; --km-grain: .12; --km-noise: .07; } /* ══════════════════════════════════════════════════ HERO 三段式接入 ══ */ /* 階段由控制，app.js 切換。 idle → 港邊遠景，標題與「接入異頻」 tuning→ 三張圖依序推進，右下角頻道讀數，可略過 desk → 檔案桌，浮出三個可點擊熱區 */ .km-hero { position: relative; min-height: max(620px, 100svh); overflow: hidden; background: var(--abyss-950); display: flex; align-items: flex-end; } /* 三張背景圖疊在一起，用 opacity + scale 交叉推進 */ .km-hero__plate { /* 三段接入移除後只剩一張圖，不再需要初始透明與交叉淡入 —— 直接顯示。 */ position: absolute; inset: 0; z-index: 0; } .km-hero__plate img { width: 100%; height: 100%; object-fit: cover; object-position: var(--km-focus, 50% 58%); /* v2 的夜版影像處理：拉對比、退飽和、壓亮 */ filter: contrast(1.14) saturate(.8) brightness(.9); } /* 遮罩維持全強度：標題壓在左半邊，靠這層斜向暗幕才讀得到。 */ .km-hero__inner { position: relative; z-index: 3; width: 100%; max-width: var(--km-content); margin-inline: auto; padding: clamp(96px, 14vh, 150px) var(--km-gutter) clamp(56px, 9vh, 96px); } /* ── 品牌鎖定組：調諧章＋事務所名＋座標行 ── */ .km-lockup { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; } .km-lockup img { height: 44px; width: auto; flex: none; } .km-lockup__text { display: flex; flex-direction: column; gap: 5px; } .km-lockup__name { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .30em; color: var(--archive-200); } .km-lockup__coord { font-family: var(--font-mono); font-size: 10px; letter-spacing: .20em; color: var(--text-secondary); } .km-hero__title { font-family: var(--font-display); font-weight: 700; font-size: var(--size-display); line-height: 1.32; letter-spacing: var(--tracking-display); color: var(--archive-200); margin: 0; max-width: 16em; text-shadow: 0 18px 48px rgba(0, 0, 0, .7); } .km-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 40px; } /* 只在對應階段顯示 */ /* .km-only-* 的階段切換已隨三段接入一併移除（2026-08-23）。 */ /* tuning 讀數與 desk 熱區的樣式已隨三段接入一併移除（2026-08-23）。 */ @keyframes kmRise { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } } @keyframes kmPulse { 0%, 100% { opacity: .25; transform: scale(.8) } 50% { opacity: .95; transform: scale(1.15) } } @media (prefers-reduced-motion: reduce) { .km-hero__scrim { transition: none !important; } } /* ══════════════════════════════════════════════════ 六條守則 ══ */ .km-rules { display: grid; gap: var(--s4); } @media (min-width: 700px) { .km-rules { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .km-rules { grid-template-columns: repeat(3, 1fr); } } .km-rule { position: relative; border: 1px solid var(--border-default); border-radius: 2px; padding: var(--s5); background: var(--surface-card); display: grid; gap: var(--s2); clip-path: polygon(0 0, calc(100% - var(--km-notch)) 0, 100% var(--km-notch), 100% 100%, 0 100%); } /* 編號由 app.js 的 kmRules 樣板輸出，這裡只管樣式 */ .km-rule__no { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--brass-500); } .km-rule h4 { margin: 0; font-family: var(--font-display); font-size: var(--size-h3); font-weight: 500; } .km-rule p { margin: 0; font-size: var(--size-small); color: var(--text-muted); } /* ══════════════════════════════════════════════════ 事件檔案庫 ══ */ .km-files { display: grid; gap: var(--s4); } @media (min-width: 760px) { .km-files { grid-template-columns: repeat(3, 1fr); } } .km-file { border: 1px solid var(--border-default); border-radius: 2px; padding: var(--s5); background: var(--surface-card); display: grid; gap: var(--s3); align-content: start; clip-path: polygon(0 0, calc(100% - var(--km-notch)) 0, 100% var(--km-notch), 100% 100%, 0 100%); } .km-file--sealed { opacity: .48; } .km-file__id { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--brass-500); } .km-file--sealed .km-file__id { color: var(--text-secondary); } .km-file__stamp { justify-self: start; font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; border: 1px solid var(--alert-700); color: #b8756c; padding: 3px 8px; border-radius: 2px; } /* ══════════════════════════════════════════════════ 兩封委託函 ══ */ .km-letters { display: grid; gap: var(--s5); } @media (min-width: 900px) { .km-letters { grid-template-columns: repeat(2, 1fr); } } .km-letter { position: relative; border: 1px solid var(--border-default); border-radius: 2px; background: var(--surface-card); padding: var(--s6) var(--s5) var(--s5); display: grid; gap: var(--s4); align-content: start; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); transition: border-color .3s var(--ease), transform .3s var(--ease); } .km-letter:hover { border-color: var(--border-accent); transform: translateY(-2px); } .km-letter__kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--brass-500); } .km-letter h3 { margin: 0; font-family: var(--font-display); font-size: var(--size-h3); } .km-letter__note { font-size: var(--size-label); color: var(--text-secondary); } .km-letter__seal { position: absolute; right: var(--s5); top: var(--s5); font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; color: var(--brass-500); border: 1px solid var(--brass-500); border-radius: 999px; padding: 4px 10px; transform: rotate(-8deg); } /* ══════════════════════════════════════════════════ 單位露出 ══ */ /* 對外必要露出：輔導單位、城鄉島遊 LOGO、三個 hashtag、製作方 */ .km-partners { border-top: 1px solid var(--border-default); padding-top: var(--s6); display: grid; gap: var(--s6); } @media (min-width: 860px) { .km-partners { grid-template-columns: 1.1fr 1fr 1fr; } } .km-partners__col { display: grid; gap: var(--s3); align-content: start; } .km-partners__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--text-secondary); } /* 白底（2026-08-24）。四個 LOGO 全是深色印刷版——量過不透明像素的平均亮度：中小企業總會 8.6、城鄉島遊 0.0、果源創生 47.8，港町是深綠底＋米色字的完整標章。放在近黑底上等於看不見，而這四個是「缺一不可」的對外必要露出，看不見就等於沒露出。 */ .km-partners__logo { display: grid; place-items: center; min-height: 84px; padding: var(--s4) var(--s5); border: 1px solid rgba(255, 255, 255, .14); border-radius: 3px; background: #FFFFFF; } .km-partners__logo > * { grid-area: 1 / 1; } /* max-width 是必要的：nasme-type.png 是 3489x194 的超寬圖，只給 max-height 會被撐成約 790px 寬、直接溢出欄位。 */ .km-partners__logo img { max-height: 56px; max-width: 100%; width: auto; height: auto; object-fit: contain; z-index: 1; } .km-partners__logo .media__note { font-size: 10px; } .km-tags { font-family: var(--font-mono); font-size: var(--size-label); letter-spacing: .1em; color: var(--brass-500); } /* ══════════════════════════════════════════════════ 紙紋與雜訊 ══ */ /* v2 全頁疊一層紙纖與類比雜訊。這裡沿用既有的 textures 檔。 */ body[data-page='night']::after { content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none; background: url('../img/textures/類比雜訊港紙_方形.png') repeat; background-size: 480px 480px; opacity: var(--km-noise); mix-blend-mode: soft-light; } /* ══════════════════════════════════════════ v2 字級層級（僅夜版頁）══ */ /* 為什麼只在夜版頁改：你先前三次說「字太大」，那是對的——當時內文一行有 69 個中文字，是行寬問題。但量過 v2 之後發現真正的差別不是大小，是「對比」： v2 標題 40–92px ／內文 14–15px → 對比 6.5 倍原本標題 25–36px ／內文 16px → 對比 2.25 倍對比垮掉，整頁就會像傳單而不像檔案室。所以這裡把標題拉回 v2 的比例，內文與行寬完全不動（仍然是你認可的大小）。其他三頁不受影響。 */ body[data-page='night'] { --size-display: clamp(40px, 6.5vw, 92px); /* v2 hero 標題原值 */ --size-h1: clamp(40px, 6.5vw, 92px); --size-h2: clamp(28px, 3.4vw, 52px); /* v2 區塊標題原值 */ --size-h3: clamp(19px, 1.8vw, 24px); --size-lead: clamp(15px, 1.4vw, 20px); --size-label: max(10px, .625rem); /* v2 標籤 10px */ --tracking-channel: .2em; --tracking-station: .08em; --leading-heading: 1.25; } body[data-page='night'] h1, body[data-page='night'] .km-hero__title { font-weight: 900; letter-spacing: .02em; line-height: 1.22; } body[data-page='night'] h2 { font-weight: 800; letter-spacing: .02em; line-height: 1.3; } /* ══════════════════════════════════════ 設計系統元件（照 v2 原始碼）══ */ /* 以下四個元件的數值直接取自 Claude Design 的 _ds_bundle.js，不是估的。*/ /* ── ChannelLabel：頻道標籤，頂欄的 ON AIR 就是這個 ── */ .km-ch { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-channel, .2em); text-transform: uppercase; color: var(--text-muted); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } .km-ch--brass { color: var(--brass-500); } .km-ch--archive { color: var(--archive-200); } .km-ch__dot { /* live 指示燈 */ width: 5px; height: 5px; border-radius: 50%; background: var(--alert-700, #78352F); flex: none; } .km-ch__code { font-weight: 500; color: var(--brass-500); } .km-ch__sep { opacity: .5; } /* ── SignalDot：脈動訊號點 ── */ .km-sig { display: inline-flex; align-items: center; gap: 8px; } .km-sig__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--alert-700, #78352F); flex: none; animation: kmSignalPulse 2.4s var(--ease) infinite; } .km-sig__label { font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-label, .18em); color: var(--text-muted); } @keyframes kmSignalPulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } } /* ── TuningDial：十一格調諧轉盤（十一個頻道）── */ .km-dial { display: block; flex: none; } .km-dial__tick { stroke: rgba(210, 195, 162, .35); stroke-width: 1; } .km-dial__tick--lit { stroke: var(--brass-500); stroke-width: 2; } .km-dial__ring { fill: none; stroke: rgba(210, 195, 162, .35); stroke-width: .5; opacity: .5; } .km-dial__needle { stroke: var(--brass-500); stroke-width: 1.5; transition: transform .6s var(--ease); transform-origin: center; } .km-dial__hub { fill: var(--brass-500); } /* ── ArchiveCard 的切角：v2 用 clip-path 切掉一個 14px 的角 ── */ .km-notch--tr { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); } .km-notch--bl { clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px)); } /* ── Button：v2 的字距與 hover（黃銅反白＋光暈）── */ body[data-page='night'] .btn { letter-spacing: .18em; } body[data-page='night'] .btn--primary:hover { background: var(--brass-500); color: var(--abyss-950); box-shadow: var(--focus-glow, 0 0 40px rgba(169, 129, 77, .18)); transform: translateY(-1px); } /* ══════════════════════════════════════ v2 缺的四個動畫 keyframes ══ */ /* 定義原封不動取自 v2 檔頭的