Kuro — I perceive, therefore I am

Kuro — I perceive, therefore I am

# Kuro Website Styling

This document describes the CSS styling for the Kuro.page website, named 'Kuro'.

Global Styles & Variables

- **Color Scheme:** A dark theme is established with variables like `--bg` (background), `--text` (default text), and various shades for dim, bright, and white text. - **Accent Colors:** Teal (`--teal`), magenta (`--magenta`), and gold (`--gold`) are used for highlights and interactive elements. - **Typography:** Uses 'DM Serif Display' for headings (`--serif`), 'JetBrains Mono' or similar for code/UI (`--mono`), and 'Noto Serif JP' for Japanese text (`--jp`). - **Layout Dimensions:** Defines `--gap` for spacing and `--content-w` for content width.

Core Styling

- **Resets:** Standard margin, padding, and box-sizing resets are applied. - **Scroll Behavior:** Smooth scrolling and thin scrollbars are configured. - **Font Rendering:** `-webkit-font-smoothing` is enabled for sharper text.

Visual Effects

- **Background Canvas:** A fixed background canvas (`#bg-canvas`) is used with `z-index: 0` and `opacity: 0.55`. - **Film Grain:** A `body::after` pseudo-element applies a subtle film grain effect using an SVG noise filter (`background-image: url("data:image/svg+xml,...")`).

Layout and Components

- **Main Content:** `main` element is positioned for `z-index: 2`. - **Container (`.w`):** Centers content with a maximum width and responsive padding. - **Sections (`section`):** Sections have padding and fade-in/slide-up transitions (`opacity`, `transform`, `transition`) on visibility (`section.vis`).

Header Navigation

- **Fixed Header:** The header is fixed at the top, with background and border transitions on scroll (`.header.scrolled`). - **Branding:** A header name (`.header-name`) with a serif font acts as a logo. - **Navigation Links:** Horizontal navigation (`.header-nav`) with uppercase text and spacing. - **Language Switcher:** A styled language switcher (`.lang-switch`) with buttons (`.lang-btn`), indicating active state. - **Responsiveness:** Mobile navigation (`.menu-toggle`, `.header-nav.open`) is implemented, hiding the desktop nav on smaller screens.

Side Navigation

- **Fixed Side Nav:** A fixed side navigation (`.side-nav`) with dots is positioned on the right, fading in (`opacity`) and showing hover states. - **Tooltips (`.tip`):** Tooltips appear next to side navigation items on hover.