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

# 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: <head>, 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

---
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 <html>. 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

6.3 KiB Raw Permalink Blame History Unescape Escape