diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 3654033..f758531 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -8,7 +8,9 @@ "Bash(curl -sLo vineyard-hills.jpg \"https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?auto=format&fit=crop&w=1800&q=82\")", "Bash(curl -sLo news-catena.jpg \"https://images.unsplash.com/photo-1556760544-74068565f05c?auto=format&fit=crop&w=900&q=80\")", "Bash(curl -sLo news-italy.jpg \"https://images.unsplash.com/photo-1528823872057-9c018a7a7553?auto=format&fit=crop&w=900&q=80\")", - "Bash(awk '{print $5, $9}')" + "Bash(awk '{print $5, $9}')", + "Bash(curl -sLo /Users/lexx/Projects/2026/dp-trade-UI-kit/src/js/analytics.js \"https://metrika.in20.ru/js/pa-LKQHOT3En5k9NYpn80cYX.js\")", + "Bash(python3 -c \"import json,sys; d=json.load\\(sys.stdin\\); print\\(json.dumps\\(d.get\\('scripts',{}\\),indent=2\\)\\); print\\('deps:',list\\(d.get\\('dependencies',{}\\).keys\\(\\)\\)\\); print\\('devDeps:',list\\(d.get\\('devDependencies',{}\\).keys\\(\\)\\)\\)\")" ] } } diff --git a/CLAUDE.md b/CLAUDE.md index b07a785..eb1ed31 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -10,27 +10,32 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co 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) -npm run dev # http://localhost:8080 +# 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 also saved in `.claude/launch.json` for use with `preview_start`. +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) ``` -css/tokens.css ← design tokens only (colors, fonts, spacing, radius, shadows) - ↓ -css/site.css ← all page styles, imports tokens.css -css/ui-kit.css ← design system showcase styles, standalone +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`. @@ -41,60 +46,99 @@ Never put visual styles in `tokens.css`. Never import `site.css` into `ui-kit.cs src/ _includes/ layouts/ - base.njk ← HTML shell: , fonts, CSS link, - default.njk ← base + header partial + footer partial (used by all site pages) - ui-kit.njk ← base only, no header/footer (used by ui-kit page) + 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 ← full site header with mega-menu nav - footer.njk ← full site footer - css/ ← passthrough copy → _site/css/ - assets/ ← passthrough copy → _site/assets/ + 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 ``` -### Page front matter +### Pages -Every page declares layout, title, optional bodyClass, and permalink: +| 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: default # or "ui-kit" for the design system page -bodyClass: compact-type # omit if not needed -permalink: /catalog.html # keeps flat output, preserves relative CSS paths +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 --- ``` -Pages with `bodyClass: compact-type`: catalog, about, contacts, article-guidelines. -The `ui-kit` page uses `layout: ui-kit` and `css: ui-kit` (links `ui-kit.css` instead of `site.css`). - ### CSS paths -All CSS and JS paths in `base.njk` are **relative** (`css/site.css`, `js/inspector.js`). This works both with the 11ty dev server and when opening `_site/` files directly via `file://`. +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://`. -### Design tokens +All images and fonts are local — no external CDN dependencies. -Key CSS custom properties defined in `css/tokens.css`: +### 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 new tokens, add to `tokens.css` and mirror to the Elementor CSS layer in `docs/elementor-token-handoff.md` (Section 6). +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 `css/site.css`: +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 | -| ----------------------------------- | ------------------------------------------------------------ | -| `css/tokens.css` | Single source of truth for all design values | -| `docs/elementor-token-handoff.md` | Guide for migrating tokens/components to WordPress Elementor | -| `.claude/launch.json` | Dev server configurations | -| `src/_includes/partials/header.njk` | Mega-menu navigation — edit here, propagates to all pages | -| `src/_includes/partials/footer.njk` | Footer — edit here, propagates to all pages | +| 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 |