# CLAUDE.md This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. Перед началом работы над любой задачей сложнее одного шага составь todo-список и показывай его прогресс по ходу выполнения. Для задач с неочевидным подходом сначала предложи план и дождись подтверждения. ## Project Static HTML/CSS UI-kit and page prototypes for **DP Trade** — a B2B wine wholesale catalog (wine-dp-trade.ru). The output of this project is handed off to **WordPress/Elementor** for production deployment. See `docs/elementor-token-handoff.md` for the full Elementor migration guide. Design audit and V2 requirements are documented in `docs/design-audit-followup.md`. ## Commands ```bash # Dev server (11ty with live reload) — port 8088 per .claude/launch.json npm run dev # Production build → _site/ npm run build ``` Dev server config is saved in `.claude/launch.json` for use with `preview_start`. The named config is `"11ty dev server (live reload)"` on port 8088. No test or lint tooling exists — the only npm scripts are `dev` and `build`, and the sole dependency is `@11ty/eleventy`. `npm run dev` runs `eleventy --serve`; the port is not hardcoded in the script and comes from `.claude/launch.json` (8088). Eleventy config lives in `.eleventy.js` (ESM `export default`). ## Architecture ### CSS layer (single dependency direction) ``` src/css/tokens.css ← design tokens only (colors, fonts, spacing, radius, shadows) ↓ src/css/site.css ← all page styles (references ../assets/images/ for backgrounds) src/css/ui-kit.css ← design system showcase, standalone src/css/v2.css ← V2 design overrides, loaded on every page after site.css ``` Never put visual styles in `tokens.css`. Never import `site.css` into `ui-kit.css`. ### 11ty template structure (`src/`) ``` src/ _includes/ layouts/ base.njk ← HTML shell: , CSS links, analytics, design-switcher.js default.njk ← base + header + footer (used by all site pages) ui-kit.njk ← base only, no header/footer partials/ header.njk ← mega-menu nav — edit here, propagates to all pages footer.njk ← footer — edit here, propagates to all pages css/ ← passthrough → _site/css/ js/ ← passthrough → _site/js/ assets/ ← passthrough → _site/assets/ fonts/ ← passthrough → _site/fonts/ (all WOFF2, local, no CDN) *.njk ← one file per page ``` ### Pages | Permalink | Source | |---|---| | `/` | `index.njk` | | `/catalog.html` | `catalog.njk` | | `/product.html` | `product.njk` | | `/about.html` | `about.njk` | | `/contacts.html` | `contacts.njk` | | `/contacts-auth.html` | `contacts-auth.njk` | | `/news-villa-raiano.html` | `news-villa-raiano.njk` | | `/news-villa-raiano-v2.html` | `news-villa-raiano-v2.njk` | | `/article-guidelines.html` | `article-guidelines.njk` | | `/bottle-cards.html` | `bottle-cards.njk` | | `/product-card-white.html` | `product-card-white.njk` | | `/ui-kit.html` | `ui-kit.njk` (layout: ui-kit, css: ui-kit) | Pages with `bodyClass: compact-type`: catalog, about, contacts, article-guidelines. ### Page front matter ```yaml --- title: "DP Trade — Catalog" layout: layouts/default # or "layouts/ui-kit" for the design system page bodyClass: compact-type # omit if not needed permalink: /catalog.html # keeps flat output, preserves relative CSS paths --- ``` ### CSS paths All CSS, JS, and image paths in `base.njk` are **relative**. CSS background-images in `site.css` reference `../assets/images/` (relative to `_site/css/`). HTML templates reference `assets/images/` (relative to `_site/` root). This works with the 11ty dev server and when opening `_site/` via `file://`. All images and fonts are local — no external CDN dependencies. ### Design tokens (V1 baseline) Key CSS custom properties in `src/css/tokens.css`: - Colors: `--color-primary-wine-100` (#4b0f24), `--color-accent-gold` (#b9965b), `--color-accent-blue` (#1f3476) - Fonts: `--font-heading` (Montserrat 800), `--font-body` (Inter), `--font-heading-classic` (Playfair Display) - Container: `--container: 1240px` When adding tokens, add to `tokens.css` and mirror to `docs/elementor-token-handoff.md` (Section 6). ### V2 design system V2 is a progressive enhancement overlay triggered by `data-design-version="v2"` on ``. Preference is stored in `localStorage` (`dp-design-version`). The toggle button (`design-toggle__btn`) appears in the main nav and UI-kit sidebar. **How V2 works:** - `src/css/tokens.css` — overrides under `:root[data-design-version="v2"]`: burgundy `#7D021D`, warm bg `#FFFDFA`, card bg `#F5F0E8`, Cormorant Garamond + Manrope fonts - `src/css/v2.css` — scoped rules under `[data-design-version="v2"]` removing uppercase, reducing weights, styling breadcrumbs, outlined CTAs, editorial typography - `src/js/design-switcher.js` — applies the attribute on load and on toggle; also injects split phone/email fields and form success state on contacts page Breadcrumbs on `product.html` are static markup tagged `data-v2-only="breadcrumbs"` — hidden in V1 via CSS, no JS needed. ### Responsive breakpoints Defined at the bottom of `src/css/site.css`: - `@media (max-width: 1080px)` — tablet - `@media (max-width: 720px)` — mobile ### JS utilities | File | Purpose | |---|---| | `src/js/design-switcher.js` | V1/V2 toggle, localStorage persistence, V2 DOM enhancements | | `src/js/inspector.js` | Click-to-inspect overlay: shows computed styles and resolved design tokens (`--color-*`, `--font-*`, etc.) for any element. Toggle with Alt+I. | | `src/js/analytics.js` | Privacy-friendly Plausible analytics (local copy) | ## Key files | File | Purpose | |---|---| | `src/css/tokens.css` | Single source of truth for all design values | | `src/css/v2.css` | V2 editorial design overrides | | `docs/design-audit-followup.md` | Designer audit breakdown and V2 implementation plan | | `docs/elementor-token-handoff.md` | Migration guide to WordPress/Elementor | | `.claude/launch.json` | Dev server config for preview_start | | `src/_includes/partials/header.njk` | Mega-menu navigation | | `src/_includes/partials/footer.njk` | Site footer |