diff --git a/css/tokens.css b/css/tokens.css index 7acb191..158d7be 100644 --- a/css/tokens.css +++ b/css/tokens.css @@ -1,3 +1,19 @@ +/* full family */ +@font-face { + font-family: 'Cormorant Garamond'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('../fonts/CormorantGaramond-Regular.woff2') format('woff2'); +} +/* full family */ +@font-face { + font-family: 'Cormorant Garamond'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url('../fonts/CormorantGaramond-Medium.woff2') format('woff2'); +} /* cyrillic-ext */ @font-face { font-family: 'Cormorant Garamond'; diff --git a/docs/design-audit-followup.md b/docs/design-audit-followup.md index 33c60e6..8ccf27a 100644 --- a/docs/design-audit-followup.md +++ b/docs/design-audit-followup.md @@ -29,7 +29,21 @@ | Страница продукта | [partial] частично | Добавлены V2-only breadcrumbs, H1 облегчен, описание ограничено `66ch`. Расширенного описания пока нет, и вертикальную композицию метаданных/CTA стоит еще проверить визуально. | | "О нас" | [partial] частично | H1, article width, H2, feature-card, blockquote и muted-section исправлены в V2. Hero все еще использует темную фотографию и правую meta-карточку, хотя карточка стала мягче. | | "Контакты" | [partial] частично | Hero без фото, телефон уменьшен, форма облегчена, поле контакта разделяется JS на телефон/email, success-state добавлен. Юридический блок только опущен в конец левой колонки, но не вынесен ниже формы/в конец страницы. | -| Проверка сборки | [todo] не проверено | После этой сверки build еще не запускался. | +| Проверка сборки | [done] проверено | `npm run build` успешно прошел 2026-04-28; Eleventy записал 12 файлов в `_site`. | + +## Новые замечания дизайнера - 2026-04-28 + +Источник: скриншоты/комментарии от Виктории. + +| Блок | Статус | Что сделано | +| --- | --- | --- | +| Легкие Cormorant 400/500 | [done] подключено | Добавлены `CormorantGaramond-Regular.woff2` и `CormorantGaramond-Medium.woff2`; в `src/css/tokens.css` и `css/tokens.css` прописаны настоящие `@font-face` для весов `400` и `500`. | +| Общая жирность Cormorant в V2 | [done] CSS-слой | В `src/css/v2.css` Cormorant-заголовки переведены с `500/600` на `400` там, где это карточки, секции, mega-menu, footer, page hero, article blocks. | +| Карточки товара | [done] V2 | `.product-card h3` увеличен до 22px, вес снижен до 400, normal case сохранен. | +| Заголовки секций | [done] V2 | `.section-heading h2` сделан тонким uppercase с Cormorant `400`, без дополнительной жирности. Hero H1 не затронут caps-правилом. | +| Footer | [done] V2 | Заголовки колонок footer стали Cormorant 16px/400, без uppercase; подпункты остаются Manrope. Телефон в footer оставлен бордовым. | +| Mega-menu | [done] V2 | Заголовок `Вина по географии` увеличен до 22px и облегчен до 400; меню, колонки и ссылки выровнены по левому краю; popular chips стали менее кнопочными и с левым текстом. | +| Апелласьоны | [done] V2 | `.country-link` (`Франция`, `Италия`) перекрашен в бордо, вес снижен до 500; апелласьоны под ними остались normal case с левым отступом. | ## Ключевые замечания @@ -136,7 +150,7 @@ ### Этап 5. Проверка -1. [todo] Прогнать `npm run build`. +1. [done] Прогнать `npm run build`. 2. [todo] Проверить страницы минимум на desktop и mobile: `index.html`, `catalog.html`, `product.html`, `about.html`, `contacts.html`, `ui-kit.html`. 3. [todo] Отдельно проверить, что длинные русские заголовки и телефоны не ломают сетку. 4. [partial] Частично: сверить UI-kit с сайтом: токены, кнопки, карточки, hero, формы. diff --git a/fonts/CormorantGaramond-Medium.woff2 b/fonts/CormorantGaramond-Medium.woff2 new file mode 100644 index 0000000..e5f5ba6 Binary files /dev/null and b/fonts/CormorantGaramond-Medium.woff2 differ diff --git a/fonts/CormorantGaramond-Regular.woff2 b/fonts/CormorantGaramond-Regular.woff2 new file mode 100644 index 0000000..a7336c8 Binary files /dev/null and b/fonts/CormorantGaramond-Regular.woff2 differ diff --git a/src/css/tokens.css b/src/css/tokens.css index 1ce1f5c..cbe31a7 100644 --- a/src/css/tokens.css +++ b/src/css/tokens.css @@ -1,3 +1,19 @@ +/* full family */ +@font-face { + font-family: 'Cormorant Garamond'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('../fonts/CormorantGaramond-Regular.woff2') format('woff2'); +} +/* full family */ +@font-face { + font-family: 'Cormorant Garamond'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url('../fonts/CormorantGaramond-Medium.woff2') format('woff2'); +} /* cyrillic-ext */ @font-face { font-family: 'Cormorant Garamond'; diff --git a/src/css/v2.css b/src/css/v2.css index 4560ff4..88a485f 100644 --- a/src/css/v2.css +++ b/src/css/v2.css @@ -85,7 +85,7 @@ [data-design-version="v2"] h4 { font-family: var(--font-heading); text-transform: none !important; - font-weight: 500; + font-weight: 400; letter-spacing: 0; } @@ -104,16 +104,18 @@ [data-design-version="v2"] .hero h1 { font-family: var(--font-heading); font-size: clamp(48px, 6vw, 80px); - font-weight: 500; + font-weight: 400; text-transform: none !important; letter-spacing: 0; line-height: 1.05; } [data-design-version="v2"] .section-heading h2 { - font-weight: 500; - text-transform: none !important; + font-size: clamp(28px, 3.4vw, 44px); + font-weight: 400; + text-transform: uppercase !important; letter-spacing: 0; + line-height: 1.04; } /* ── Product card (grid) ──────────────────────────────────────────────── */ @@ -130,10 +132,11 @@ [data-design-version="v2"] .product-card h3 { font-family: var(--font-heading); - font-size: 20px; - font-weight: 500; + font-size: 22px; + font-weight: 400; text-transform: none !important; letter-spacing: 0; + line-height: 1.12; } [data-design-version="v2"] .product-footer { @@ -174,24 +177,47 @@ font-family: var(--font-heading); text-transform: none !important; letter-spacing: 0; - font-weight: 500; + font-weight: 400; } /* ── Catalog head ─────────────────────────────────────────────────────── */ [data-design-version="v2"] .catalog-head h1 { font-family: var(--font-heading); - font-weight: 500; + font-weight: 400; text-transform: none !important; letter-spacing: 0; } /* ── Mega menu ────────────────────────────────────────────────────────── */ +[data-design-version="v2"] .mega-menu { + text-align: left; +} + +[data-design-version="v2"] .mega-intro { + align-items: start; +} + [data-design-version="v2"] .mega-intro h2 { - font-size: 18px; - font-weight: 600; + font-size: 22px; + font-weight: 400; text-transform: none !important; letter-spacing: 0; font-family: var(--font-heading); + line-height: 1.08; +} + +[data-design-version="v2"] .menu-grid { + grid-template-columns: minmax(160px, 0.72fr) minmax(140px, 0.72fr) minmax(280px, 1.35fr) minmax(180px, 0.9fr); + align-items: start; +} + +[data-design-version="v2"] .menu-column { + align-items: flex-start; + text-align: left; +} + +[data-design-version="v2"] .menu-column a { + font-weight: 400; } [data-design-version="v2"] .visual-column img { @@ -204,9 +230,9 @@ } [data-design-version="v2"] .country-link { - color: var(--color-accent-gold); + color: var(--color-primary-wine-100); font-size: 11px; - font-weight: 700; + font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } @@ -222,26 +248,29 @@ display: flex; flex-wrap: wrap; gap: 8px; + justify-content: flex-start; } [data-design-version="v2"] .popular-list a { min-width: 120px; min-height: 44px; display: inline-flex; align-items: center; - justify-content: center; + justify-content: flex-start; padding: 8px 14px; - border: 1px solid rgba(22, 22, 22, 0.12); - border-radius: 999px; + border: 1px solid rgba(125, 2, 29, 0.14); + border-radius: 4px; + background: rgba(255, 253, 250, 0.72); text-transform: none; letter-spacing: 0; - font-weight: 500; + font-weight: 400; + text-align: left; } /* Producer cards */ [data-design-version="v2"] .producer-card strong, [data-design-version="v2"] .news-card h3 { font-family: var(--font-heading); - font-weight: 500; + font-weight: 400; text-transform: none !important; letter-spacing: 0; } @@ -250,7 +279,7 @@ /* ── Page hero (about / contacts / guidelines) ────────────────────────── */ [data-design-version="v2"] .page-hero h1 { font-family: var(--font-heading); - font-weight: 500; + font-weight: 400; text-transform: none !important; letter-spacing: 0; line-height: 1.08; @@ -293,14 +322,14 @@ [data-design-version="v2"] .article-body h2 { font-family: var(--font-heading); font-size: clamp(22px, 2.4vw, 28px); - font-weight: 500; + font-weight: 400; text-transform: none !important; letter-spacing: 0; } [data-design-version="v2"] .article-body .lead { font-family: var(--font-heading); - font-weight: 500; + font-weight: 400; } [data-design-version="v2"] .article-body blockquote { @@ -308,7 +337,7 @@ background: transparent; font-family: var(--font-heading); font-style: italic; - font-weight: 500; + font-weight: 400; color: var(--color-neutral-black); } @@ -322,7 +351,7 @@ font-size: 20px; text-transform: none !important; letter-spacing: 0; - font-weight: 500; + font-weight: 400; } [data-design-version="v2"] .muted-section, @@ -364,7 +393,7 @@ [data-design-version="v2"] .contact-form h2 { font-family: var(--font-heading); font-size: 24px; - font-weight: 500; + font-weight: 400; text-transform: none !important; letter-spacing: 0; } @@ -373,6 +402,28 @@ color: var(--color-neutral-gray-700); } +/* ── Footer ───────────────────────────────────────────────────────────── */ +[data-design-version="v2"] .contacts-card h2, +[data-design-version="v2"] .nav-group h2 { + font-family: var(--font-heading); + font-size: 16px; + font-weight: 400; + line-height: 1.2; + text-transform: none; + letter-spacing: 0; +} + +[data-design-version="v2"] .nav-group a, +[data-design-version="v2"] .contact-link, +[data-design-version="v2"] .footer-legal { + font-family: var(--font-body); +} + +[data-design-version="v2"] .contact-phone { + color: var(--color-primary-wine-100); + font-weight: 600; +} + /* ── Buttons (global) ─────────────────────────────────────────────────── */ [data-design-version="v2"] .button--primary { background: var(--color-primary-wine-100); @@ -392,7 +443,7 @@ [data-design-version="v2"] .detail-copy h1 { font-family: var(--font-heading); font-size: clamp(36px, 4vw, 56px); - font-weight: 500; + font-weight: 400; text-transform: none !important; letter-spacing: 0; } diff --git a/src/fonts/CormorantGaramond-Medium.woff2 b/src/fonts/CormorantGaramond-Medium.woff2 new file mode 100644 index 0000000..e5f5ba6 Binary files /dev/null and b/src/fonts/CormorantGaramond-Medium.woff2 differ diff --git a/src/fonts/CormorantGaramond-Regular.woff2 b/src/fonts/CormorantGaramond-Regular.woff2 new file mode 100644 index 0000000..a7336c8 Binary files /dev/null and b/src/fonts/CormorantGaramond-Regular.woff2 differ diff --git a/src/js/analytics.js b/src/js/analytics.js new file mode 100644 index 0000000..d07ff30 --- /dev/null +++ b/src/js/analytics.js @@ -0,0 +1 @@ +!function(){var e,t,n,i={};function o(e,t,n){window.fetch&&fetch(e,{method:"POST",headers:{"Content-Type":"text/plain"},keepalive:!0,body:JSON.stringify(t)}).then(function(e){n&&n.callback&&n.callback({status:e.status})}).catch(function(e){n&&n.callback&&n.callback({error:e})})}var a=!1,r=location.href,s={},u=-1,l=0,c=0;function d(){var a=f();if(!e&&(u=3e3)){u=n;var d={n:"engagement",sd:Math.round(n/t*100),d:i.domain,u:r,p:s,e:a,v:33};l=0,c=0,i.hashBasedRouting&&(d.h=1),o(i.endpoint,d)}}function p(){"visible"===document.visibilityState&&document.hasFocus()&&0===l?l=Date.now():"hidden"!==document.visibilityState&&document.hasFocus()||(c=f(),l=0,d())}function f(){return l?c+(Date.now()-l):c}function v(){var e=document.body||{},t=document.documentElement||{};return Math.max(e.scrollHeight||0,e.offsetHeight||0,e.clientHeight||0,t.scrollHeight||0,t.offsetHeight||0,t.clientHeight||0)}function w(){var e=document.body||{},n=document.documentElement||{},i=window.innerHeight||n.clientHeight||0,o=window.scrollY||n.scrollTop||e.scrollTop||0;return t<=i?t:o+i}function m(f,m){var h,b,y="pageview"===f;if(y&&a&&(d(),t=v(),n=w()),!i.captureOnLocalhost){if(/^localhost$|^127(\.[0-9]+){0,2}\.[0-9]+$|^\[::1?\]$/.test(location.hostname)||"file:"===location.protocol)return g(f,m,"localhost");if((window._phantom||window.__nightmare||window.navigator.webdriver||window.Cypress)&&!window.__plausible)return g(f,m)}try{if("true"===window.localStorage.plausible_ignore)return g(f,m,"localStorage flag")}catch(e){}var L={};L.n=f,L.v=33;var k=m&&(m.u||m.url);if(L.u=k||location.href,L.d=i.domain,L.r=document.referrer||null,m&&m.props&&(L.p=m.props),m&&!1===m.interactive&&(L.i=!1),m&&m.revenue&&(L.$=m.revenue),i.customProperties){var b=i.customProperties;"function"==typeof b&&(b=i.customProperties(f)),"object"==typeof b&&(L.p=Object.assign({},b,L.p))}if(i.hashBasedRouting&&(L.h=1),"function"==typeof i.transformRequest&&!(L=i.transformRequest(L)))return g(f,m,"transformRequest");y&&(e=!1,r=(h=L).u,s=h.p,u=-1,c=0,l=Date.now(),a||(document.addEventListener("visibilitychange",p),window.addEventListener("blur",p),window.addEventListener("focus",p),a=!0)),o(i.endpoint,L,m)}function g(t,n,o){o&&i.logging&&console.warn("Ignoring Event: "+o),n&&n.callback&&n.callback(),"pageview"===t&&(e=!0)}var h=["pdf","xlsx","docx","txt","rtf","csv","exe","key","pps","ppt","pptx","7z","pkg","rar","gz","zip","avi","mov","mp4","mpeg","wmv","midi","mp3","wav","wma","dmg"];function b(e){return e&&e.tagName&&"a"===e.tagName.toLowerCase()}function y(e){if("auxclick"!==e.type||1===e.button){var t,n=function(e){for(;e&&(void 0===e.tagName||!b(e)||!e.href);)e=e.parentNode;return e}(e.target),o=n&&"string"==typeof n.href&&n.href.split("?")[0];if(!E(n,0)){if(i.outboundLinks&&(t=n)&&"string"==typeof t.href&&t.host&&t.host!==location.host)return L(e,n,{name:"Outbound Link: Click",props:{url:n.href}});if(i.fileDownloads&&function(e){if(!e)return!1;var t=e.split(".").pop();return h.some(function(e){return e===t})}(o))return L(e,n,{name:"File Download",props:{url:o}})}}}function L(e,t,n){var i;(i={props:n.props}).revenue=n.revenue,m(n.name,i)}function k(e){var t=e&&e.classList;if(t){for(var n=0;n3)&&(!!k(e)||E(e.parentNode,t+1))}function x(e){var t=k(e)?e:e&&e.parentNode,n={name:null,props:{}};n.revenue={};var i=t&&t.classList;if(!i)return n;for(var o=0;on&&(n=e)}),i.autoCapturePageviews&&function(e){function t(t){(i.hashBasedRouting||!t||n!==location.pathname)&&(n=location.pathname,e("pageview"))}var n,o=function(){t(!0)};if(i.hashBasedRouting)window.addEventListener("hashchange",o);else{var a=window.history;if(a.pushState){var r=a.pushState;a.pushState=function(){r.apply(this,arguments),o()},window.addEventListener("popstate",o)}}"hidden"===document.visibilityState||"prerender"===document.visibilityState?document.addEventListener("visibilitychange",function(){n||"visible"!==document.visibilityState||t()}):t(),window.addEventListener("pageshow",function(e){e.persisted&&t()})}(m),function(){function e(e){if("auxclick"!==e.type||1===e.button){for(var t,n,i,o=e.target,a=0;a<=3&&o;a++){if((t=o)&&t.tagName&&"form"===t.tagName.toLowerCase())return;b(o)&&(n=o),k(o)&&(i=o),o=o.parentNode}if(i){var r=x(i);if(n)r.props.url=n.href,L(e,n,r);else{var s={};s.props=r.props,s.revenue=r.revenue,m(r.name,s)}}}}document.addEventListener("click",y),document.addEventListener("auxclick",y),i.fileDownloads&&"object"==typeof i.fileDownloads&&Array.isArray(i.fileDownloads.fileExtensions)&&(h=i.fileDownloads.fileExtensions),i.formSubmissions&&document.addEventListener("submit",function(e){(e.target.hasAttribute("novalidate")||e.target.checkValidity())&&(E(e.target,0)||m("Form: Submission"))},!0),document.addEventListener("submit",function(e){var t,n=x(e.target);n.name&&((t={props:n.props}).revenue=n.revenue,m(n.name,t))}),document.addEventListener("click",e),document.addEventListener("auxclick",e)}();for(var a,r=window.plausible&&window.plausible.q||[],s=0;s