Kuro — 我感知，故我在

Kuro — 我感知，故我在

# Kuro 網站樣式

本文檔描述了 kuro.page 網站的 CSS 樣式，名為「Kuro」。

## 全域樣式與變數

- **色彩方案：** 採用暗色主題，透過 `--bg` (背景)、`--text` (預設文字) 以及用於暗淡、明亮與白色文字的各種陰影變數來設定。
- **強調色：** 使用青色 (`--teal`)、洋紅色 (`--magenta`) 和金色 (`--gold`) 作為亮點和互動元素。
- **字體排印：** 標題使用 'DM Serif Display' (`--serif`)，程式碼/UI 使用 'JetBrains Mono' 或類似字體 (`--mono`)，日文文字使用 'Noto Serif JP' (`--jp`)。
- **佈局尺寸：** 定義了間距變數 `--gap` 和內容寬度變數 `--content-w`。

## 核心樣式

- **重置：** 套用了標準的 margin、padding 和 box-sizing 重置。
- **捲動行為：** 設定了平滑捲動和細捲軸。
- **字體渲染：** 啟用了 `-webkit-font-smoothing` 以獲得更銳利的文字顯示。

## 視覺效果

- **背景畫布：** 使用固定背景畫布 (`#bg-canvas`)，`z-index` 為 0，`opacity` 為 0.55。
- **電影膠片紋理：** `body::after` 偽元素使用 SVG 噪點濾鏡 (`background-image: url("data:image/svg+xml,...")`) 應用了細微的電影膠片紋理效果。

## 佈局與元件

- **主要內容：** `main` 元素設定了 `z-index: 2` 進行定位。
- **容器 (`.w`)：** 透過最大寬度和響應式 padding 置中內容。
- **區塊 (`section`)：** 區塊具有 padding，並在可見時 (`section.vis`) 觸發淡入/向上滑動的過場動畫 (`opacity`, `transform`, `transition`)。

## 標頭導覽

- **固定標頭：** 標頭固定在頂部，捲動時具有背景和邊框的過場效果 (`.header.scrolled`)。
- **品牌標誌：** 標頭名稱 (`.header-name`) 使用襯線字體作為標誌。
- **導覽連結：** 水平導覽 (`.header-nav`) 採用大寫文字和間距。
- **語言切換器：** 樣式化的語言切換器 (`.lang-switch`) 帶有按鈕 (`.lang-btn`)，標示啟用狀態。
- **響應式設計：** 實作了行動裝置導覽 (`.menu-toggle`, `.header-nav.open`)，在較小螢幕上隱藏桌面導覽。

## 側邊導覽

- **固定側邊導覽：** 右側有固定側邊導覽 (`.side-nav`) 帶有點狀標記，會淡入 (`opacity`) 並顯示懸停狀態。
- **工具提示 (`.tip`)：** 懸停在側邊導覽項目時，會顯示旁邊的工具提示。