/* ========================================================================= * main.css — наши допълнения върху vendor.css (компилирания CSS на макета). * vendor.css е READ-ONLY (като bootstrap.min.css в salex) — всички корекции * се правят тук. * ========================================================================= */ /* --- Reveal анимации (замяна на framer-motion от оригинала) -------------- */ /* Скриваме елементите само когато JS работи (html.js), за да няма * невидимо съдържание при изключен JavaScript. */ .js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .js [data-reveal].revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } } /* --- Залепващ хедър ------------------------------------------------------- * Страниците вмъкват хедъра с
, * а th:include ЗАПАЗВА външния
. Истинският
(partials/layout/acm/header.html) остава затворен в обвивка, висока * точно колкото него — sticky няма накъде да се движи и хедърът се скролва. * display:contents маха кутията на обвивката, така sticky се отнася към * цялата страница. Важи само за новия дизайн (старият няма вложен .sticky). * z-index 35: над падащия панел на филтрите (.v5-fpanel.is-one, 30), под * демо превключвателя (40) и модалите (1000). */ header:has(> header.sticky) { display: contents; } header > header.sticky { z-index: 35; } /* --- Utility класове, липсващи в компилирания vendor.css ------------------ */ /* (vendor.css съдържа само класовете, реално ползвани в оригиналния макет) */ .bg-orange-deep { background-color: var(--color-orange-deep); } .h-20 { height: 5rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .p-10 { padding: 2.5rem; } /* И-16: каталогът раздели вертикалния отстъп на
между секцията с * банера (горе) и самото
(долу) — компилираният vendor.css има само * py-*, не и pt-*/pb-*. Стойностите са по скалата на Tailwind (--spacing). */ .pt-6 { padding-top: calc(var(--spacing) * 6); } .pb-6 { padding-bottom: calc(var(--spacing) * 6); } .gap-x-3 { column-gap: calc(var(--spacing) * 3); } @media (min-width: 48rem) { .md\:pt-8 { padding-top: calc(var(--spacing) * 8); } .md\:pb-8 { padding-bottom: calc(var(--spacing) * 8); } } /* ========================================================================= * ВИЗИИ (И-6) — демонстрационни теми за избор от клиента. * Цветовете/радиусите в vendor.css са CSS променливи в :root, затова всяка * визия е чист override върху html[data-theme=...]. Атрибутът се слага от * inline скрипта в head (преди рендер) + theme.js (превключвателя). * В1 „Класик" = без атрибут (сегашната визия, никакви промени). * ========================================================================= */ /* --- В2 „Бизнес" — корпоративна: тъмносиньо, златен акцент, изчистени ръбове */ html[data-theme="pro"] { --color-brand-green: #5588b3; --color-green-deep: #1f4e79; --color-green-tint: #edf3f8; --color-brand-orange: #e3a73c; --color-orange-deep: #c58a1e; --color-ink: #17212b; --color-muted: #4e5a66; --color-faint: #82909d; --color-surface-2: #f4f6f8; --color-border: #dce2e8; --radius-control: 6px; --radius-card: 10px; } /* В2 — структура: делови СПИСЪК вместо грид, банкерски бутони, боксирани * филтри. Продуктовата карта става хоризонтален ред: снимка | инфо | поръчка. */ html[data-theme="pro"] .radius-signature { border-radius: 4px; border-top-right-radius: 4px; } html[data-theme="pro"] [data-add] { background-color: var(--color-green-deep); color: #fff; } html[data-theme="pro"] [data-add]:hover { background-color: #17405f; } html[data-theme="pro"] #catalog-grid { grid-template-columns: 1fr; gap: 10px; } html[data-theme="pro"] #catalog-grid .group.rounded-card:hover { transform: none; box-shadow: 0 1px 4px rgba(23, 33, 43, 0.08); } @media (min-width: 640px) { html[data-theme="pro"] #catalog-grid .group.rounded-card { flex-direction: row; } html[data-theme="pro"] #catalog-grid .group.rounded-card > a { flex-direction: row; flex: 1 1 auto; min-width: 0; } html[data-theme="pro"] #catalog-grid .group.rounded-card > a > div:first-child { width: 180px; min-width: 180px; aspect-ratio: auto; min-height: 100%; border-right: 1px solid var(--color-border); } html[data-theme="pro"] #catalog-grid .group.rounded-card > a > div:nth-child(2) { padding: 14px 20px; gap: 4px; } html[data-theme="pro"] #catalog-grid .group.rounded-card > a h3 { min-height: 0; font-size: 17px; } html[data-theme="pro"] #catalog-grid .group.rounded-card > div.mt-auto { margin: 0; padding: 14px 20px; border-left: 1px solid var(--color-border); justify-content: center; min-width: 230px; background-color: var(--color-surface-2); } } html[data-theme="pro"] #catalog-sidebar h2 { text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; color: var(--color-muted); } html[data-theme="pro"] #catalog-filters details, html[data-theme="pro"] #catalog-filters-mobile details { border: 1px solid var(--color-border); border-radius: 6px; background-color: var(--color-surface); margin-bottom: 8px; padding: 2px 12px; } html[data-theme="pro"] #catalog-filters details summary, html[data-theme="pro"] #catalog-filters-mobile details summary { text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; } html[data-theme="pro"] #catalog-quicknav button { border-radius: 6px; padding: 10px 14px; min-width: 0; } html[data-theme="pro"] #catalog-quicknav button > span:first-child { display: none; } /* В2 — начална страница: всички зелени CTA стават плътно тъмносини; лентата * със статистиките става тъмносин банер със златни числа. */ html[data-theme="pro"] .bg-brand-green { background-color: var(--color-green-deep); color: #fff; } html[data-theme="pro"] .bg-brand-green:hover { background-color: #17405f; } html[data-theme="pro"] main > section.border-y { background-color: var(--color-ink); border-color: var(--color-ink); } html[data-theme="pro"] main > section.border-y .text-green-deep { color: var(--color-brand-orange); } html[data-theme="pro"] main > section.border-y .text-muted { color: rgba(255, 255, 255, 0.65); } html[data-theme="pro"] main > section.border-y .md\:border-l { border-color: rgba(255, 255, 255, 0.15); } /* --- В3 „Изчистена" — семпла и стилна: монохромен графит, premium-minimal - */ html[data-theme="clean"] { --color-brand-green: #a8ada6; --color-green-deep: #2c2f2c; --color-green-tint: #f2f2ef; --color-brand-orange: #d9903f; --color-orange-deep: #b5772a; --color-ink: #1c1e1c; --color-muted: #5f645f; --color-faint: #979b97; --color-surface-2: #fbfbfa; --color-border: #ececea; --radius-control: 8px; --radius-card: 12px; } html[data-theme="clean"] header { box-shadow: none !important; } /* В3 — структура: ГАЛЕРИЯ без рамки. Картите губят кутията си (само снимка * на бял пласт + центриран текст), скрити са арт. №, чипове и подкатегория — * минимум информация, максимум въздух. Търсачката е само долна линия. */ html[data-theme="clean"] .radius-signature { border-radius: 6px; border-top-right-radius: 6px; } html[data-theme="clean"] .group.rounded-card { border: 0; box-shadow: none; background: transparent; overflow: visible; } html[data-theme="clean"] .group.rounded-card:hover { transform: none; box-shadow: none; border: 0; } html[data-theme="clean"] .group.rounded-card > a > div:first-child { border: 1px solid var(--color-border); border-radius: 12px; background-color: var(--color-surface); } html[data-theme="clean"] .group.rounded-card:hover > a > div:first-child { border-color: var(--color-ink); } html[data-theme="clean"] #catalog-grid { gap: 32px 28px; } html[data-theme="clean"] #catalog-grid .group.rounded-card > a > div:nth-child(2) { align-items: center; text-align: center; padding: 14px 4px 6px; } html[data-theme="clean"] #catalog-grid .group.rounded-card > a > div:nth-child(2) > p:first-child { display: none; } /* подкатегория */ html[data-theme="clean"] #catalog-grid .group.rounded-card > a > div:nth-child(2) > p:nth-child(3) { display: none; } /* арт. № */ html[data-theme="clean"] #catalog-grid .group.rounded-card > a > div:nth-child(2) > div:nth-child(4) { display: none; } /* чипове кашон/пале */ html[data-theme="clean"] #catalog-grid .group.rounded-card > a h3 { min-height: 0; font-weight: 500; } html[data-theme="clean"] #catalog-grid .group.rounded-card [role="group"] { justify-content: center; } html[data-theme="clean"] #catalog-grid .group.rounded-card > div.mt-auto { padding: 0 4px 4px; align-items: center; } html[data-theme="clean"] #catalog-grid .group.rounded-card > div.mt-auto > div:first-child { align-self: center; } html[data-theme="clean"] [data-add] { background: transparent; border: 1px solid var(--color-ink); color: var(--color-ink); } html[data-theme="clean"] [data-add]:hover { background-color: var(--color-ink); color: #fff; } html[data-theme="clean"] #search-input, html[data-theme="clean"] #mobile-search-input { border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; } html[data-theme="clean"] #search-input:focus, html[data-theme="clean"] #mobile-search-input:focus { box-shadow: none; border-bottom-color: var(--color-ink); } html[data-theme="clean"] #catalog-quicknav button { border: 0; background: transparent; border-radius: 0; padding: 8px 4px; min-width: 0; border-bottom: 2px solid transparent; box-shadow: none; } html[data-theme="clean"] #catalog-quicknav button:hover { transform: none; box-shadow: none; } html[data-theme="clean"] #catalog-quicknav button[aria-pressed="true"] { border-bottom-color: var(--color-ink); background: transparent; color: var(--color-ink); } html[data-theme="clean"] #catalog-quicknav button > span:first-child { display: none; } html[data-theme="clean"] #catalog-filters summary, html[data-theme="clean"] #catalog-filters-mobile summary { font-weight: 500; } html[data-theme="clean"] #catalog-filters label span.tnum, html[data-theme="clean"] #catalog-filters-mobile label span.tnum { display: none; } html[data-theme="clean"] #catalog-sidebar h2 { font-weight: 500; } /* В3 — начална страница: тънка типография (заглавия 500 вместо bold), CTA са * плътно черни, баджът „Добре дошли" е чист текст, статистиките — монохром. */ html[data-theme="clean"] .bg-brand-green { background-color: var(--color-ink); color: #fff; } html[data-theme="clean"] .bg-brand-green:hover { background-color: #000; } html[data-theme="clean"] main h1 { font-weight: 500; letter-spacing: -0.01em; } html[data-theme="clean"] main h2 { font-weight: 500; } html[data-theme="clean"] main > section:first-of-type .rounded-full.border { background: transparent; border-color: transparent; padding-left: 0; color: var(--color-muted); } html[data-theme="clean"] main > section:first-of-type .rounded-full.border > span { display: none; } html[data-theme="clean"] main > section.border-y .text-green-deep { color: var(--color-ink); font-weight: 500; } html[data-theme="clean"] main .uppercase.text-green-deep { color: var(--color-faint); } /* --- В4 „Свежа" — закачлива, но стилна: тюркоаз, коралов акцент, меки форми */ html[data-theme="fresh"] { --color-brand-green: #2cc0b4; --color-green-deep: #0e8c82; --color-green-tint: #e5f6f4; --color-brand-orange: #ff8a5f; --color-orange-deep: #e56a3d; --color-ink: #1b3a3d; --color-muted: #4f6a6c; --color-faint: #7e9496; --color-surface-2: #f7faf6; --color-border: #e3eae1; --radius-control: 14px; --radius-card: 22px; } /* В4 — структура: едри ПЛОЧКИ (2 колони), пилюлни бутони и ПИЛЮЛНИ ФИЛТРИ * (чекбоксовете стават чипове), градиентна горна лента, коралов акцент. */ html[data-theme="fresh"] .radius-signature { border-radius: 999px; border-top-right-radius: 999px; } html[data-theme="fresh"] [data-add] { background-color: var(--color-brand-orange); color: #fff; } html[data-theme="fresh"] [data-add]:hover { background-color: var(--color-orange-deep); } html[data-theme="fresh"] header .bg-ink { background: linear-gradient(90deg, var(--color-green-deep), var(--color-brand-green)); } html[data-theme="fresh"] #search-input, html[data-theme="fresh"] #mobile-search-input { border-radius: 999px; padding-left: 44px; } html[data-theme="fresh"] .group.rounded-card { border: 0; box-shadow: 0 6px 20px rgba(14, 140, 130, 0.12); border-radius: 22px; } html[data-theme="fresh"] .group.rounded-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(14, 140, 130, 0.2); } html[data-theme="fresh"] .group.rounded-card > a > div:first-child { background: linear-gradient(160deg, var(--color-green-tint), var(--color-surface) 70%); } @media (min-width: 1024px) { html[data-theme="fresh"] #catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } } html[data-theme="fresh"] #catalog-grid .group.rounded-card > a > div:nth-child(2) > div:nth-child(4) span { background-color: var(--color-green-tint); border: 0; color: var(--color-green-deep); font-weight: 500; } html[data-theme="fresh"] #catalog-grid .group.rounded-card > div.mt-auto > div:first-child { border-radius: 999px; } html[data-theme="fresh"] #catalog-quicknav button { border: 0; background-color: var(--color-green-tint); border-radius: 18px; } html[data-theme="fresh"] #catalog-quicknav button[aria-pressed="true"] { background-color: var(--color-green-deep); color: #fff; } html[data-theme="fresh"] #catalog-filters .pb-3, html[data-theme="fresh"] #catalog-filters-mobile .pb-3 { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; } html[data-theme="fresh"] #catalog-filters label, html[data-theme="fresh"] #catalog-filters-mobile label { display: inline-flex; min-height: 0; width: auto; align-items: center; gap: 6px; border: 1px solid var(--color-border); border-radius: 999px; padding: 6px 14px; background-color: var(--color-surface); transition: border-color 0.15s, background-color 0.15s; } html[data-theme="fresh"] #catalog-filters label:hover, html[data-theme="fresh"] #catalog-filters-mobile label:hover { border-color: var(--color-green-deep); } html[data-theme="fresh"] #catalog-filters label:has(input:checked), html[data-theme="fresh"] #catalog-filters-mobile label:has(input:checked) { background-color: var(--color-green-tint); border-color: var(--color-green-deep); } html[data-theme="fresh"] #catalog-filters label input[type="checkbox"], html[data-theme="fresh"] #catalog-filters-mobile label input[type="checkbox"] { display: none; } html[data-theme="fresh"] #catalog-filters label span.tnum, html[data-theme="fresh"] #catalog-filters-mobile label span.tnum { font-size: 11px; color: var(--color-green-deep); } /* --- Елементи, съществуващи само в дадена визия (И-8) -------------------- * Markup-ът носи и двата варианта (span.acm-v5-hide / span.acm-v5-only); * CSS показва правилния според активната тема. */ html:not([data-theme="modern"]) .acm-v5-only { display: none !important; } html[data-theme="modern"] .acm-v5-hide { display: none !important; } /* --- В5 „Модерна" — по предоставения дизайн (И-7): крем/хартия, горско * зелено + оранжев акцент, Arial, тъмен футър, цветни категорийни плочки. * Референция: doc/reference/modern-vision/ ------------------------------- */ html[data-theme="modern"] { --color-brand-green: #a8c94a; --color-green-deep: #6e9f3a; --color-green-tint: #e7edda; --color-brand-orange: #ef762f; --color-orange-deep: #dc6526; --color-ink: #18231d; --color-muted: #69726c; --color-faint: #869089; --color-surface: #fffdf8; --color-surface-2: #f5f1e8; --color-border: #dedfd8; --radius-control: 10px; --radius-card: 16px; } html[data-theme="modern"] body { font-family: Arial, Helvetica, sans-serif; } html[data-theme="modern"] .radius-signature { border-radius: 10px; border-top-right-radius: 10px; } /* горна лента и футър: плътно горско зелено */ html[data-theme="modern"] header .bg-ink { background-color: #173e2c; } html[data-theme="modern"] footer { background-color: #173e2c; border-color: #173e2c; } html[data-theme="modern"] footer p, html[data-theme="modern"] footer span, html[data-theme="modern"] footer a { color: #dce7df; } html[data-theme="modern"] footer a:hover, html[data-theme="modern"] footer span:hover { color: #fff; } /* оранжеви CTA с бял текст (както .primary/.add-button в дизайна) */ html[data-theme="modern"] .bg-brand-green, html[data-theme="modern"] [data-add] { background-color: var(--color-brand-orange); color: #fff; box-shadow: 0 12px 26px rgba(239, 118, 47, 0.22); } html[data-theme="modern"] .bg-brand-green:hover, html[data-theme="modern"] [data-add]:hover { background-color: var(--color-orange-deep); } html[data-theme="modern"] [data-add] { box-shadow: none; background-color: #173e2c; } html[data-theme="modern"] [data-add]:hover { background-color: var(--color-brand-orange); } /* заглавия: по-плътни и по-сбити (Arial 800, tight tracking) */ html[data-theme="modern"] main h1 { font-weight: 800; letter-spacing: -0.045em; } html[data-theme="modern"] main h2 { font-weight: 800; letter-spacing: -0.03em; } /* eyebrow етикетите стават оранжеви */ html[data-theme="modern"] main .uppercase.text-green-deep { color: var(--color-brand-orange); letter-spacing: 0.14em; font-weight: 700; } /* статистики: числата в горско зелено */ html[data-theme="modern"] main > section.border-y .text-green-deep { color: #173e2c; } /* карти: повдигане + мека сянка (както .product-card:hover) */ html[data-theme="modern"] .group.rounded-card { border-color: #e0e0da; } html[data-theme="modern"] .group.rounded-card:hover { transform: translateY(-4px); box-shadow: 0 16px 35px rgba(27, 47, 35, 0.09); } /* категорийните плочки на началната: панел „Бърз достъп" (И-8) — компактни * хоризонтални цветни карти: икона в контурен кръг вляво, заглавие + брой * продукти до нея, стрелка ↗ горе вдясно, декоративен кръг долу вдясно. * (структура: .grid > div[data-reveal] > a → цветът се избира по обвивката) */ html[data-theme="modern"] main .grid > div > a.rounded-card[href^="/catalog/"] { border: 0; position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-content: center; align-items: center; min-height: 118px; padding: 16px 24px; border-radius: 24px; } html[data-theme="modern"] main .grid > div > a.rounded-card[href^="/catalog/"]::after { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; right: -30px; bottom: -58px; background: rgba(255, 255, 255, 0.1); } html[data-theme="modern"] main .grid > div > a.rounded-card[href^="/catalog/"]::before { content: "\2197"; position: absolute; top: 13px; right: 17px; font-size: 17px; line-height: 1; color: #fff; opacity: 0.9; } /* големият воден знак-икона и описанието отпадат — остават заглавие и брой */ html[data-theme="modern"] main .grid > div > a.rounded-card[href^="/catalog/"] > svg { display: none; } html[data-theme="modern"] main .grid > div > a.rounded-card[href^="/catalog/"] > p { display: none; } html[data-theme="modern"] main .grid > div:nth-child(1) > a.rounded-card[href^="/catalog/"] { background-color: #cf692f; } html[data-theme="modern"] main .grid > div:nth-child(2) > a.rounded-card[href^="/catalog/"] { background-color: #5f8535; } html[data-theme="modern"] main .grid > div:nth-child(3) > a.rounded-card[href^="/catalog/"] { background-color: #aa8b32; } html[data-theme="modern"] main .grid > div:nth-child(4) > a.rounded-card[href^="/catalog/"] { background-color: #173e2c; } html[data-theme="modern"] main .grid > div > a.rounded-card[href^="/catalog/"] :is(h3, p, span, small, strong) { color: #fff; } html[data-theme="modern"] main .grid > div > a.rounded-card[href^="/catalog/"] svg { color: #fff; } /* иконата: тънък контурен кръг с малка бяла икона, вляво през двата реда */ html[data-theme="modern"] main .grid > div > a.rounded-card[href^="/catalog/"] .rounded-2xl { background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.45); width: 54px; height: 54px; border-radius: 50%; grid-row: 1 / 3; } html[data-theme="modern"] main .grid > div > a.rounded-card[href^="/catalog/"] .rounded-2xl svg { width: 22px; height: 22px; } html[data-theme="modern"] main .grid > div > a.rounded-card[href^="/catalog/"] h3 { margin: 0; align-self: end; font-size: 18px; } /* долният ред: „Разгледай →" отпада, броят продукти застава под заглавието */ html[data-theme="modern"] main .grid > div > a.rounded-card[href^="/catalog/"] > div { grid-column: 2; align-self: start; margin: 4px 0 0; padding: 0; border: 0; justify-content: flex-start; } html[data-theme="modern"] main .grid > div > a.rounded-card[href^="/catalog/"] > div > span:last-child { display: none; } html[data-theme="modern"] main .grid > div > a.rounded-card[href^="/catalog/"] > div > span.tnum { color: #fff; opacity: 0.8; } /* заглавието на секцията „Какво търсите днес?": по-едро, нормална плътност */ html[data-theme="modern"] .acm-v5-h2 { font-weight: 400; font-size: 1.18em; letter-spacing: -0.02em; } /* каталог: бързата навигация вече е част от тъмния банер — виж И-16 най-долу */ /* търсачка: бяла, заоблена, с мека сянка */ html[data-theme="modern"] #search-input, html[data-theme="modern"] #mobile-search-input { background-color: #fff; border-radius: 12px; box-shadow: 0 7px 25px rgba(25, 47, 34, 0.04); } /* --- В5: продуктови карти по предоставения дизайн (И-7б) ------------------ * Структура на картата (productCard): a > [визуал(бадж+img), инфо(подкат, * h3, арт№, чипове, цена, складове)] + div.mt-auto [брояч, Добави]. * Редът на децата е договор — при промяна в JS тези правила се преглеждат. */ /* марка: сива пилюла без точка + „сърце" декорация вдясно */ html[data-theme="modern"] .group.rounded-card > a > div:first-child { background-color: var(--color-surface); } html[data-theme="modern"] .group.rounded-card > a > div:first-child > span.absolute { background-color: #f2f3ef; box-shadow: none; backdrop-filter: none; font-size: 12px; font-weight: 700; color: #536058; } html[data-theme="modern"] .group.rounded-card > a > div:first-child > span.absolute > span.rounded-full { display: none; } html[data-theme="modern"] .group.rounded-card > a > div:first-child::after { /* „сърцето" (любими) е СКРИТО ЗАСЕГА — няма такава опция. * За връщане: content: "\2661"; и махане на display: none. */ content: none; display: none; position: absolute; right: 12px; top: 8px; font-size: 19px; color: #8c948e; } /* тип продукт: оранжев, разреден */ html[data-theme="modern"] .group.rounded-card > a > div:nth-child(2) > p:first-child, html[data-theme="modern"] .group.rounded-card > a p.uppercase { color: var(--color-brand-orange); font-weight: 700; letter-spacing: 0.14em; font-size: 11px; } /* инфо блок: пренареждане — чиповете (кашон/пале) на един ред с арт. № */ html[data-theme="modern"] .group.rounded-card > a > div:nth-child(2) > p:nth-child(1) { order: 1; } html[data-theme="modern"] .group.rounded-card > a > div:nth-child(2) > h3 { order: 2; } html[data-theme="modern"] .group.rounded-card > a > div:nth-child(2) > p:nth-child(3) { order: 4; align-self: flex-end; margin-top: -27px; font-size: 12px; } /* И-10: чипът „пале" отпада (мострата показва само „кашон · …") — * арт. № винаги остава на реда на чипа */ html[data-theme="modern"] .group.rounded-card > a > div:nth-child(2) > div:nth-child(4) > span:nth-child(2) { display: none; } html[data-theme="modern"] .group.rounded-card > a > div:nth-child(2) > div:nth-child(4) { order: 3; margin-top: 4px; } html[data-theme="modern"] .group.rounded-card > a > div:nth-child(2) > div:nth-child(5) { order: 5; } html[data-theme="modern"] .group.rounded-card > a > div:nth-child(2) > div:nth-child(6) { order: 6; } /* чипове: беж правоъгълничета като в дизайна */ html[data-theme="modern"] .group.rounded-card > a > div:nth-child(2) > div:nth-child(4) span { background-color: #f2f2ec; border: 0; border-radius: 5px; color: var(--color-ink); } /* цена: „Цена на кашон" + едра цена, единичната цена долу вдясно */ html[data-theme="modern"] .group.rounded-card > a > div:nth-child(2) > div:nth-child(5) { display: flex; flex-direction: column; padding-bottom: 10px; border-bottom: 1px solid #e5e5df; } html[data-theme="modern"] .group.rounded-card > a > div:nth-child(2) > div:nth-child(5) > p:nth-child(3) { align-self: flex-end; margin-top: -24px; font-size: 12px; } /* складове: цветни плочки с бял текст вместо точка+сива буква */ html[data-theme="modern"] .group.rounded-card [role="group"] button > span:first-child { display: none; } html[data-theme="modern"] .group.rounded-card [role="group"] button > span:last-child { display: grid; place-items: center; width: 30px; height: 22px; border-radius: 5px; color: #fff; font-size: 10px; font-weight: 800; line-height: 1; } html[data-theme="modern"] .group.rounded-card [role="group"] { gap: 6px !important; } html[data-theme="modern"] .group.rounded-card [role="group"] button:has(.bg-st-green) > span:last-child { background-color: #77a342; } html[data-theme="modern"] .group.rounded-card [role="group"] button:has(.bg-st-orange) > span:last-child { background-color: #d8a52c; } html[data-theme="modern"] .group.rounded-card [role="group"] button:has(.bg-st-red) > span:last-child { background-color: #c96a5a; } html[data-theme="modern"] .group.rounded-card [role="group"] button:has(.bg-st-grey) > span:last-child { background-color: #c3c8c3; } /* ред за поръчка: брояч + „Добави" един до друг */ html[data-theme="modern"] .group.rounded-card > div.mt-auto { flex-direction: row; align-items: stretch; gap: 9px; } html[data-theme="modern"] .group.rounded-card > div.mt-auto > div:first-child { align-self: auto; } html[data-theme="modern"] .group.rounded-card > div.mt-auto [data-add] { flex: 1; width: auto; border-radius: 9px; } /* --- В5: продуктови карти изцяло по мострата (И-10) ----------------------- * Снимката се заменя с цветна плочка-буква (span.acm-v5-tile), а текстовите * разлики („Ваша цена", „кашон · 12 л", „115,00 € / л", „Добави") са дуални * span-ове .acm-v5-hide/.acm-v5-only. И двете добавя main.js:decorateV5Cards * върху всяка карта; каталогът ги добавя наново след всеки рендер. */ html[data-theme="modern"] .group.rounded-card > a > div:first-child img, html[data-theme="modern"] .group.rounded-card > a > div:first-child > span.inset-0 { display: none; } .acm-v5-tile { position: absolute; left: 50%; top: 45%; width: 86px; height: 108px; margin: -58px 0 0 -43px; display: grid; place-items: center; border-radius: 16px; color: #fff; font-size: 40px; font-weight: 800; line-height: 1; transform: rotate(var(--v5-rot, -5deg)); } /* мека елипсовидна сянка „на пода" под плочката */ html[data-theme="modern"] .group.rounded-card > a > div:first-child::before { content: ""; position: absolute; left: 50%; bottom: 15%; width: 110px; height: 16px; margin-left: -55px; border-radius: 50%; background: radial-gradient(closest-side, rgba(24, 35, 29, 0.16), transparent); } /* „Добави": горско зелено → оранжево при hover, без плюс-иконата; важи и за * началната, където бутонът е .bg-brand-green без [data-add] */ html[data-theme="modern"] .group.rounded-card button.bg-brand-green { background-color: #173e2c; color: #fff; box-shadow: none; } html[data-theme="modern"] .group.rounded-card button.bg-brand-green:hover { background-color: var(--color-brand-orange); } html[data-theme="modern"] .group.rounded-card button.bg-brand-green > svg, html[data-theme="modern"] .group.rounded-card [data-add] > svg { display: none; } /* броячът: компактен − 1 +, без вътрешни разделители и без единицата („каш.") */ html[data-theme="modern"] .group.rounded-card > div.mt-auto > div:first-child > button { width: 32px; border: 0; } html[data-theme="modern"] .group.rounded-card > div.mt-auto > div:first-child input { width: 32px; } html[data-theme="modern"] .group.rounded-card > div.mt-auto span.select-none { display: none; } /* --- В5: височина на картата 1:1 с мострата (И-10 доп.) ------------------- * В мострата картата е практически квадратна — при 3 колони на ~1400px тя е * 397 широка и ~410 висока, докато нашата беше 596. Пропорциите са свалени от * образеца и проверени с измерване в браузъра (визуал 296→166, инфо 236→~190, * футър 62→~52). Затова: по-нисък визуал с по-малка плочка, по-стегнати * отстъпи и по-ниски контроли. */ html[data-theme="modern"] .group.rounded-card > a > div:first-child { aspect-ratio: auto; height: 166px; } html[data-theme="modern"] .acm-v5-tile { width: 62px; height: 84px; margin: -46px 0 0 -31px; top: 50%; border-radius: 12px; font-size: 29px; } html[data-theme="modern"] .group.rounded-card > a > div:first-child::before { width: 78px; height: 12px; margin-left: -39px; bottom: 13%; } html[data-theme="modern"] .group.rounded-card > a > div:first-child::after { top: 10px; right: 12px; font-size: 17px; } html[data-theme="modern"] .group.rounded-card > a > div:first-child > span.absolute { left: 12px; top: 12px; } /* инфо блок: по-малки отстъпи; името е на един ред (мострата няма запазено * място за втори — при по-дълго име картата расте, а редът се изравнява) */ html[data-theme="modern"] .group.rounded-card > a > div:nth-child(2) { padding: 12px 14px; gap: 5px; } html[data-theme="modern"] .group.rounded-card > a > div:nth-child(2) > h3 { min-height: 0; font-size: 17px; } html[data-theme="modern"] .group.rounded-card > a > div:nth-child(2) > p:nth-child(3) { margin-top: -23px; } html[data-theme="modern"] .group.rounded-card > a > div:nth-child(2) > div:nth-child(5) { padding-bottom: 7px; } html[data-theme="modern"] .group.rounded-card > a > div:nth-child(2) > div:nth-child(5) > p:nth-child(2) { font-size: 19px; } /* ред за поръчка: контроли ниски като в мострата (на тесен екран се връщат * на 44px — там мострата не важи, а пръстът има нужда от площ) */ html[data-theme="modern"] .group.rounded-card > div.mt-auto { padding: 0 14px 13px; } /* броячът не се свива — иначе flex го стеснява и overflow-hidden отрязва „+" */ html[data-theme="modern"] .group.rounded-card > div.mt-auto > div:first-child { flex: none; } html[data-theme="modern"] .group.rounded-card > div.mt-auto > div:first-child > button, html[data-theme="modern"] .group.rounded-card > div.mt-auto > div:first-child input { height: 32px; } html[data-theme="modern"] .group.rounded-card > div.mt-auto button.bg-brand-green { min-height: 32px; height: 32px; font-size: 14px; } @media (max-width: 639px) { html[data-theme="modern"] .group.rounded-card > div.mt-auto > div:first-child > button, html[data-theme="modern"] .group.rounded-card > div.mt-auto > div:first-child input { height: 44px; } html[data-theme="modern"] .group.rounded-card > div.mt-auto button.bg-brand-green { min-height: 44px; height: 44px; } } /* --- В5: продуктовата снимка се връща в картата (И-15) -------------------- * И-10 замени снимката с цветна плочка-буква (така беше в подадената мостра). * Целта сега е клиентът да вижда самия продукт, затова снимката се показва * отново в пропорция 4:3 като при В1, а плочката-буква и „подовата" ѝ сянка * отпадат. Плочката си остава в DOM (main.js:decorateV5Cards я слага при * всеки рендер) — само е скрита, за да може да се върне с един ред. * Всичко останало от мострата (текстове, чипове, брояч, бутон) е непокътнато; * картата пораства от 407 на ~539px, защото визуалната зона става 166→298px. */ html[data-theme="modern"] .group.rounded-card > a > div:first-child { aspect-ratio: 4 / 3; height: auto; } html[data-theme="modern"] .group.rounded-card > a > div:first-child img { display: block; } html[data-theme="modern"] .group.rounded-card > a > div:first-child > span.inset-0 { display: grid; } html[data-theme="modern"] .acm-v5-tile, html[data-theme="modern"] .group.rounded-card > a > div:first-child::before { display: none; } /* И-24: продуктовите гридове „Най-поръчвани" (начална) и „Подобни продукти" * (продуктова) са отново по 4 карти на ред — както е в markup-а * (lg:grid-cols-4) и всичките 4 карти се показват. * (Отменя И-10 доп., което ги свиваше до 3 колони и скриваше 4-тата карта.) * Под 1024px гридът е 1–2 колони. Каталогът поначало е 3 колони. */ /* легенда за складовете в заглавието на секцията (има я само в каталога) */ /* --- И-25: панел „Пазарувайте по култура" със снимки ---------------------- * Снимката влиза на мястото на кръглата иконка в картата (markup-ът се * подменя от tools/culture-images.ps1 в doc/reference/home.html): * * Култура без снимка си остава с иконката — двата вида карти могат да * съществуват едновременно, затова правилата тук се закачат за самата * снимка (`:has(> .acm-culture-img)`), а не за целия панел. * Основното правило е без префикс на визия, за да не се разпада картата * при вътрешната сверка `?theme=classic`. */ .acm-culture-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; background-color: var(--color-surface-2); } /* картата: снимката е почти до кантовете, името е по-плътно, кантът отпада * в полза на сянка — както е в подадената мостра */ html[data-theme="modern"] a.group:has(> .acm-culture-img) { padding: 10px; gap: 9px; border-color: transparent; box-shadow: 0 1px 2px rgba(16, 24, 40, .07), 0 10px 22px -14px rgba(16, 24, 40, .22); } /* само при истинска мишка — на телефон :hover „залепва" след докосване */ @media (hover: hover) { html[data-theme="modern"] a.group:has(> .acm-culture-img):hover { border-color: var(--color-green-deep); } } /* Мобилно: при докосване Chrome/Safari слагат правоъгълно оцветяване върху * заоблената карта и рамката изглежда счупена, докато се зарежда новата * страница. Махаме го и даваме собствен, заоблен отклик. */ a.group:has(> .acm-culture-img) { -webkit-tap-highlight-color: transparent; } a.group:has(> .acm-culture-img):active { transform: scale(0.97); } html[data-theme="modern"] a.group:has(> .acm-culture-img) > span:last-child { gap: 3px; } html[data-theme="modern"] a.group:has(> .acm-culture-img) span.text-\[14px\] { font-size: 15px; font-weight: 700; } html[data-theme="modern"] a.group:has(> .acm-culture-img) span.text-\[12px\] { font-size: 13px; } /* --- В5: hero банер по предоставения дизайн (И-8) ------------------------- * Markup: tools/templates/hero-v5.html, инжектиран от build.ps1 само на * началната страница, непосредствено СЛЕД стандартния hero. Вижда се * единствено при html[data-theme="modern"]; при останалите визии е скрит, * а при В5 скриваме стандартния hero и лентата статистики (числата са * вградени в самия банер). Скриването е с :has(+ .v5-hero) — така * правилата не закачат други страници, където банерът липсва. */ /* --hs (hero scale) — ЕДИНСТВЕНИЯТ регулатор за размера на банера. * 1 = точно както е в макета; 0.9 = всичко в банера с 10% по-малко. * Всички размери по-долу са calc(Npx * var(--hs, 1)) — шрифтове, отстъпи, * бутони, картите и илюстрацията, за да остават в същите пропорции. * Величините БЕЗ --hs са нарочно: рамки 1px, проценти и em-стойности * (подчертаването под „тук.", центрирането на картите) се движат сами. * Резервната 1 в var() пази бутоните .v5-btn-*, ако някой ден се ползват * извън банера, където --hs я няма. */ .v5-hero { display: none; --hs: 0.9; } html[data-theme="modern"] main > section:has(+ .v5-hero) { display: none; } html[data-theme="modern"] .v5-hero ~ section.border-y { display: none; } /* --- И-7в: бърза лента на В5 (склад / поръчка / кредит / помощ) ----------- */ /* Инжектира се след hero-v5; вижда се само при В5 „Модерна". */ .v5-quick { display: none; } html[data-theme="modern"] .v5-quick { display: block; background-color: #fff; border-bottom: 1px solid var(--color-border); } .v5-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); min-height: 96px; } .v5-quick-cell { display: flex; align-items: center; gap: 11px; padding: 18px 24px; border-right: 1px solid var(--color-border); } .v5-quick-cell:first-child { border-left: 1px solid var(--color-border); } .v5-quick-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background-color: #eff3e7; color: var(--color-green-deep); } .v5-quick-cell p { display: flex; flex-direction: column; margin: 0; min-width: 0; } .v5-quick-cell small { color: var(--color-muted); font-size: 11px; margin-bottom: 4px; } .v5-quick-cell strong { font-size: 14px; color: var(--color-ink); white-space: nowrap; } .v5-quick-action { margin-left: auto; color: var(--color-green-deep); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: color 0.15s; } a.v5-quick-action:hover { color: var(--color-brand-orange); } span.v5-quick-action { cursor: default; } .v5-quick-badge { margin-left: auto; border-radius: 20px; padding: 4px 8px; white-space: nowrap; color: var(--color-green-deep); background-color: #edf4e6; font-size: 10px; text-transform: uppercase; font-weight: 800; letter-spacing: 0.04em; } @media (max-width: 1023px) { .v5-quick-grid { grid-template-columns: repeat(2, 1fr); } .v5-quick-cell { border-bottom: 1px solid var(--color-border); } } @media (max-width: 639px) { .v5-quick-grid { grid-template-columns: 1fr; } } html[data-theme="modern"] .v5-hero { display: flex; align-items: center; position: relative; overflow: hidden; /* Десният край е топлият кремав тон на самата картинка (#fbecd5), за да * няма видим шев там, където илюстрацията се слива с фона. */ background: linear-gradient(100deg, #f5f1e8 46%, #f8f0e2 66%, #fbecd5); } /* Височината на банера. `38vw` е ЕДИНСТВЕНИЯТ регулатор — по-голямо число = * по-висок банер; `clamp` го държи между 400px и 715px. * [047] След преместването на границата кутията с картинката е по-широка * (65% вместо 50%), значи и по-„лежаща": при `cover` се реже малко повече * отгоре-отдолу. Иска ли се пак ЦЯЛАТА картинка — вдига се `38vw`. * Под lg правилото не важи — там илюстрацията е скрита и банерът е висок * колкото текста. */ @media (min-width: 1024px) { html[data-theme="modern"] .v5-hero { min-height: clamp(400px, 38vw, 715px); } } /* — илюстрация: банерът от админа (`homepage_baner_1`) — * ГРАНИЦАТА МЕЖДУ ТЕКСТА И КАРТИНКАТА Е ТУК — първото число: `65%` значи * „картинката започва на 35% от левия край". По-голям процент = картинката * идва по-наляво. [047] премести границата от 50% на 65% по указание. * * Другите две числа са предпазители, не дизайн: * calc(100% - 460px) — текстовата колона никога не пада под 460px, за да не * я застигне картинката на по-тесен екран (под ~1300px); * 1220px — таван, за да не се разлее картинката на много широк * монитор (над ~1880px). * * `object-fit: cover` с `object-position: 55% 50%` кадрира по средата. При * по-широка кутия се реже малко повече отгоре-отдолу — регулаторът е `38vw` * във височината по-горе. * Маската отляво разтваря картинката във фона, за да няма права граница * между илюстрацията и текстовата колона. */ .v5-hero-art { position: absolute; top: 0; right: 0; bottom: 0; width: min(65%, calc(100% - 460px), 1220px); overflow: hidden; } .v5-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%); mask-image: linear-gradient(to right, transparent 0, #000 24%); } /* Целият десен блок е кликаем, но САМО когато `homepage_baner_1.image_url` * е попълнен от админа. Плаващите карти са със z-index:3 — те остават над * връзката и си запазват собствените кликове. */ .v5-hero-art-link { position: absolute; inset: 0; z-index: 1; display: block; } /* — лява колона — */ .v5-hero-wrap { position: relative; z-index: 2; padding-top: calc(40px * var(--hs, 1)); padding-bottom: calc(44px * var(--hs, 1)); } .v5-hero-copy { max-width: calc(560px * var(--hs, 1)); } .v5-hero-pill { display: inline-flex; align-items: center; gap: calc(8px * var(--hs, 1)); border-radius: 999px; background-color: #e9efdc; border: 1px solid rgba(23, 62, 44, 0.08); padding: calc(6px * var(--hs, 1)) calc(13px * var(--hs, 1)); font-size: calc(12px * var(--hs, 1)); font-weight: 700; color: #2f5233; } .v5-hero-pill > span { width: calc(6px * var(--hs, 1)); height: calc(6px * var(--hs, 1)); border-radius: 50%; background-color: #6e9f3a; } .v5-hero-kicker { margin-top: calc(20px * var(--hs, 1)); text-transform: uppercase; letter-spacing: 0.18em; font-weight: 800; font-size: calc(12px * var(--hs, 1)); color: var(--color-brand-orange); } .v5-hero-title { margin-top: calc(10px * var(--hs, 1)); font-size: calc(clamp(34px, 4.1vw, 54px) * var(--hs, 1)); line-height: 1.06; letter-spacing: -0.045em; font-weight: 800; color: var(--color-ink); } .v5-hero-accent { color: var(--color-green-deep); position: relative; display: inline-block; } .v5-hero-accent svg { position: absolute; left: 2%; bottom: -0.22em; width: 96%; height: 0.16em; color: var(--color-brand-orange); } .v5-hero-sub { margin-top: calc(18px * var(--hs, 1)); max-width: calc(460px * var(--hs, 1)); font-size: calc(16px * var(--hs, 1)); line-height: 1.6; color: #565e58; } .v5-hero-cta { margin-top: calc(24px * var(--hs, 1)); display: flex; flex-wrap: wrap; gap: calc(10px * var(--hs, 1)); } .v5-btn-primary { display: inline-flex; align-items: center; gap: calc(9px * var(--hs, 1)); height: calc(44px * var(--hs, 1)); padding: 0 calc(22px * var(--hs, 1)); border-radius: calc(9px * var(--hs, 1)); background-color: var(--color-brand-orange); color: #fff; font-weight: 700; font-size: calc(15px * var(--hs, 1)); box-shadow: 0 10px 22px rgba(239, 118, 47, 0.22); transition: background-color 0.15s, transform 0.15s; } .v5-btn-primary:hover { background-color: var(--color-orange-deep); } .v5-btn-primary:active { transform: scale(0.98); } .v5-btn-ghost { display: inline-flex; align-items: center; gap: calc(9px * var(--hs, 1)); height: calc(44px * var(--hs, 1)); padding: 0 calc(20px * var(--hs, 1)); border-radius: calc(9px * var(--hs, 1)); background-color: #fffdf8; border: 1px solid var(--color-border); color: var(--color-ink); font-weight: 700; font-size: calc(15px * var(--hs, 1)); transition: border-color 0.15s; } .v5-btn-ghost:hover { border-color: var(--color-ink); } .v5-hero-cta svg { width: calc(17px * var(--hs, 1)); height: calc(17px * var(--hs, 1)); } .v5-hero-stats { margin-top: calc(28px * var(--hs, 1)); padding-top: calc(20px * var(--hs, 1)); border-top: 1px solid #e0ddd0; display: flex; max-width: calc(460px * var(--hs, 1)); } .v5-hero-stats > div { padding-right: calc(24px * var(--hs, 1)); } .v5-hero-stats > div + div { border-left: 1px solid #e0ddd0; padding-left: calc(24px * var(--hs, 1)); } .v5-hero-stats dt { font-size: calc(25px * var(--hs, 1)); font-weight: 800; letter-spacing: -0.02em; color: #173e2c; } .v5-hero-stats dd { margin-top: calc(5px * var(--hs, 1)); font-size: calc(12px * var(--hs, 1)); color: var(--color-muted); } /* — плаващи карти върху илюстрацията — */ .v5-hero-card { position: absolute; z-index: 3; border-radius: calc(13px * var(--hs, 1)); background-color: #fffdf8; box-shadow: 0 16px 35px rgba(27, 47, 35, 0.12); } .v5-hero-card-promo { top: calc(28px * var(--hs, 1)); right: calc(32px * var(--hs, 1)); padding: calc(14px * var(--hs, 1)) calc(17px * var(--hs, 1)); } .v5-hero-card-kicker { font-size: calc(10px * var(--hs, 1)); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-brand-orange); } .v5-hero-card-big { margin-top: calc(5px * var(--hs, 1)); font-size: calc(17px * var(--hs, 1)); font-weight: 800; color: var(--color-ink); } .v5-hero-card-note { margin-top: calc(2px * var(--hs, 1)); font-size: calc(11px * var(--hs, 1)); color: var(--color-muted); } /* Кампанийната оферта, когато идва от `homepage_promo_text`. Полето е HTML от CMS-а ([050]): `

` абзаци с ``, `` и `` вътре. ЦВЕТОВЕТЕ И ПОЛУЧЕРНИЯТ ШРИФТ ИДВАТ ОТТАМ — тук не се задават, за да няма борба с inline стила. Оттук са само размерът, отстоянията между абзаците и таванът на ширината, за да не покрие картата илюстрацията. Основната дебелина е 500, за да личи `` вътре в текста. */ .v5-hero-card-text { max-width: calc(240px * var(--hs, 1)); font-size: calc(13px * var(--hs, 1)); font-weight: 500; line-height: 1.35; color: var(--color-ink); } .v5-hero-card-text p { margin: 0; } .v5-hero-card-text p + p { margin-top: calc(4px * var(--hs, 1)); } .v5-hero-card-order { left: 55%; bottom: calc(34px * var(--hs, 1)); display: flex; align-items: center; gap: calc(11px * var(--hs, 1)); padding: calc(12px * var(--hs, 1)) calc(16px * var(--hs, 1)); } .v5-hero-check { display: grid; place-items: center; width: calc(32px * var(--hs, 1)); height: calc(32px * var(--hs, 1)); border-radius: 50%; background-color: #e9efdc; color: #5f8535; flex-shrink: 0; } .v5-hero-check svg { width: calc(15px * var(--hs, 1)); height: calc(15px * var(--hs, 1)); } .v5-hero-order-no { display: block; font-size: calc(11px * var(--hs, 1)); color: var(--color-muted); } .v5-hero-order-status { display: block; margin-top: calc(2px * var(--hs, 1)); font-size: calc(14px * var(--hs, 1)); font-weight: 800; color: var(--color-ink); } .v5-hero-order-when { margin-left: calc(13px * var(--hs, 1)); align-self: flex-start; font-size: calc(11px * var(--hs, 1)); font-weight: 700; color: var(--color-green-deep); } /* — под lg: само текстовата колона върху крем фон — */ @media (max-width: 1023px) { .v5-hero-art, .v5-hero-card { display: none; } .v5-hero-wrap { padding-top: calc(32px * var(--hs, 1)); padding-bottom: calc(36px * var(--hs, 1)); } } /* --- Превключвател на визии (DEMO-ONLY UI на theme.js) -------------------- */ .acm-vision { position: fixed; bottom: 16px; left: 16px; z-index: 40; font-family: var(--font-sans); } .acm-vision-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 9999px; border: 0; cursor: pointer; background-color: var(--color-green-deep); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 2px 10px rgba(20, 24, 20, 0.25); transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1); } .acm-vision-btn:hover { transform: scale(1.06); } .acm-vision-panel { position: absolute; bottom: 54px; left: 0; min-width: 280px; overflow: hidden; border-radius: var(--radius-card); border: 1px solid var(--color-border); background-color: var(--color-surface); box-shadow: 0 8px 30px rgba(20, 24, 20, 0.18); } .acm-vision-panel p.acm-vision-title { padding: 10px 14px 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.025em; color: var(--color-faint); border-bottom: 1px solid var(--color-border); } .acm-vision-opt { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; cursor: pointer; background: none; padding: 10px 14px; font-size: 14px; text-align: left; color: var(--color-ink); transition: background-color 0.2s; } .acm-vision-opt:hover { background-color: var(--color-surface-2); } .acm-vision-opt .acm-vision-dot { display: inline-block; width: 14px; height: 14px; border-radius: 9999px; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, 0.12); } .acm-vision-opt[aria-checked="true"] { font-weight: 600; background-color: var(--color-green-tint); } /* --- Тостове -------------------------------------------------------------- */ .acm-toast { animation: acm-toast-in 0.2s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes acm-toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* --- В5: панелът „Предимства" по мострата (И-11) --------------------------- * „Всичко под контрол / Повече време за полето." вляво + три номерирани * колони с оранжева горна черта вдясно. Дуалните текстове (надслов, заглавие, * описания) са в reference/home.html като span.acm-v5-hide / span.acm-v5-only; * номерата 01/02/03 са декоративни (CSS брояч), четвъртата карта отпада. * Hook: section.bg-green-tint съществува само на началната страница. */ html[data-theme="modern"] section.bg-green-tint { background-color: var(--color-surface); } /* двуколонна подредба на широк екран: заглавен блок вляво, колоните вдясно */ @media (min-width: 1024px) { html[data-theme="modern"] section.bg-green-tint > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: start; } html[data-theme="modern"] section.bg-green-tint > div > .grid { margin-top: 0; } } /* заглавието: едро, нормална плътност (както в мострата) */ html[data-theme="modern"] section.bg-green-tint h2 { font-weight: 400; letter-spacing: -0.02em; font-size: 38px; line-height: 1.18; margin-top: 16px; } /* колоните: три равни, без кутии-карти */ html[data-theme="modern"] section.bg-green-tint > div > .grid { gap: 44px; counter-reset: acm-v5-benefit; } @media (min-width: 1024px) { html[data-theme="modern"] section.bg-green-tint > div > .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } html[data-theme="modern"] section.bg-green-tint > div > .grid > div { counter-increment: acm-v5-benefit; } html[data-theme="modern"] section.bg-green-tint > div > .grid > div:nth-child(4) { display: none; } /* картата губи кутията: оранжева черта горе + номер + заглавие + описание */ html[data-theme="modern"] section.bg-green-tint > div > .grid > div > div { background: transparent; box-shadow: none; border-radius: 0; padding: 22px 0 0; border-top: 2px solid var(--color-brand-orange); } html[data-theme="modern"] section.bg-green-tint > div > .grid > div > div::before { content: counter(acm-v5-benefit, decimal-leading-zero); display: block; color: var(--color-brand-orange); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; } html[data-theme="modern"] section.bg-green-tint > div > .grid > div > div > span.rounded-2xl { display: none; } html[data-theme="modern"] section.bg-green-tint > div > .grid > div > div > h3 { margin-top: 28px; font-weight: 400; font-size: 19px; } html[data-theme="modern"] section.bg-green-tint > div > .grid > div > div > p { margin-top: 12px; font-size: 14px; line-height: 1.6; } /* --- Слайдер „Най-нови продукти" на началната страница -------------------- * Markup: partials/homepage/acm/main.html, поведение: acm-bridge.js * (initAcmSliders). Заменя секцията с категориите „Какво търсите днес?". * * Лентата е обикновено хоризонтално превъртане с прилепване (scroll-snap), * а НЕ transform-карусел. Три причини: * 1. на телефон плъзгането с пръст работи само по себе си, без код; * 2. клавиатурата и екранните четци се движат из картите нормално — * браузърът сам довърта фокусираната карта; * 3. без JavaScript съдържанието не изчезва — стрелките се скриват, а * лентата остава превъртаема (затова правилата за тях са под `.js`). * * Ширината на картата се задава ТУК, не в JavaScript; скриптът я отчита от * разметката, за да знае по колко карти да прелиства. Праговете * (900/1400/1700/2000/2350px) повтарят тези на решетките по-долу * („ШИРИНА НА СЪДЪРЖАНИЕТО"), за да е еднакво голяма картата в слайдера * и в останалите секции. Сменени с [040] заедно с решетките. * ------------------------------------------------------------------------- */ .acm-slider-frame { position: relative; } .acm-slider-track { display: flex; gap: 20px; /* колкото `gap-5` на решетките наоколо */ overflow-x: auto; overflow-y: hidden; /* иначе повдигането при hover ражда вертикална лента */ scroll-snap-type: x mandatory; padding: 8px 0 16px; /* въздух за сянката и за hover `-translate-y` */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* стар Edge */ } .acm-slider-track::-webkit-scrollbar { display: none; } .acm-slider-item { flex: 0 0 100%; scroll-snap-align: start; } /* Праговете са СЪЩИТЕ като на продуктовите решетки ([040]) — лентата и * решетката под нея показват карти с една и съща ширина. Изваденото в calc() * е сборът на междините: (брой карти - 1) x 20px gap. */ @media (min-width: 640px) { .acm-slider-item { flex-basis: calc((100% - 20px) / 2); } } @media (min-width: 900px) { .acm-slider-item { flex-basis: calc((100% - 40px) / 3); } } @media (min-width: 1024px) { .acm-slider-item { flex-basis: calc((100% - 60px) / 4); } } @media (min-width: 1400px) { .acm-slider-item { flex-basis: calc((100% - 80px) / 5); } } @media (min-width: 1700px) { .acm-slider-item { flex-basis: calc((100% - 100px) / 6); } } @media (min-width: 2000px) { .acm-slider-item { flex-basis: calc((100% - 120px) / 7); } } @media (min-width: 2350px) { .acm-slider-item { flex-basis: calc((100% - 140px) / 8); } } /* Културите на началната страница — по-малки карти, повече на ред. * На широк екран 8, колкото беше старата решетка `lg:grid-cols-8`. */ .acm-slider--cultures .acm-slider-track { gap: 16px; } .acm-slider--cultures .acm-slider-item { flex-basis: calc((100% - 16px) / 2); } @media (min-width: 480px) { .acm-slider--cultures .acm-slider-item { flex-basis: calc((100% - 32px) / 3); } } @media (min-width: 768px) { .acm-slider--cultures .acm-slider-item { flex-basis: calc((100% - 48px) / 4); } } @media (min-width: 1024px) { .acm-slider--cultures .acm-slider-item { flex-basis: calc((100% - 80px) / 6); } } @media (min-width: 1280px) { .acm-slider--cultures .acm-slider-item { flex-basis: calc((100% - 112px) / 8); } } /* Картите в лентата НЕ се появяват с reveal анимацията: те идват отстрани, а * анимацията ги вдига отдолу — при всяко прелистване се вижда прелитане. */ .js .acm-slider-track [data-reveal] { opacity: 1; transform: none; transition: none; } /* --- Стрелки -------------------------------------------------------------- */ .acm-slider-nav { display: none; } .js .acm-slider-nav { display: grid; place-items: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; /* 44px — минимумът за пръст, както бутоните в макета */ border: 1px solid var(--color-border); border-radius: 999px; background-color: var(--color-surface); color: var(--color-ink); box-shadow: 0 2px 10px rgba(16, 24, 40, 0.12); cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; } .js .acm-slider-nav:hover { background-color: var(--color-green-deep); border-color: var(--color-green-deep); color: #fff; box-shadow: 0 4px 14px rgba(16, 24, 40, 0.18); } .js .acm-slider-nav:focus-visible { outline: 2px solid var(--color-green-deep); outline-offset: 2px; } /* Излизат в отстъпа на контейнера (`px-4` = 16px), не върху картите. */ .acm-slider-prev { left: -22px; } .acm-slider-next { right: -22px; } @media (max-width: 767px) { .acm-slider-prev { left: -10px; } .acm-slider-next { right: -10px; } } /* --- Точки ---------------------------------------------------------------- */ .acm-slider-dots { display: flex; justify-content: center; gap: 7px; margin-top: 4px; } .acm-slider-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background-color: var(--color-border); cursor: pointer; transition: width 0.15s, background-color 0.15s; } .acm-slider-dot.is-active { width: 22px; background-color: var(--color-green-deep); } /* Всички карти се побират наведнъж — няма какво да се прелиства. * Класът се слага от acm-bridge.js и се преизчислява при промяна на ширината. */ .acm-slider.is-static .acm-slider-nav, .acm-slider.is-static .acm-slider-dots { display: none; } /* --- И-12: бял фон САМО на логото Universum в подвала --------------------- * Логото е син текст върху прозрачен PNG и се губи на тъмния футър на В5. * Бялата плочка е върху самата картинка (не върху линка „Изпълнено чрез"); * content-box, за да не изяде padding-ът от 132px ширина на логото. * Върху белия футър на В1 плочката е невидима — правилото е общо за темите. * * ⚠️ Съвпадението е по ЧАСТ от адреса (`*=`), а не по целия. Картинката стои * на две различни места: в макета е `/assets/img/universum-logo.png`, а тук — * `/assets/acm/img/universum-logo.png` (`layout/acm/footer.html:89`). Правило, * закачено за целия адрес, важеше само в макета и на сайта плочката изобщо не * се появяваше. Виж changelog [024]. */ footer img[src*="universum-logo"] { background-color: #fff; border-radius: 6px; padding: 5px 8px; box-sizing: content-box; } /* ========================================================================= * И-16: В5 „Модерна" — каталожна страница по предоставения дизайн * (тъмнозелен банер със заглавие и категории, филтри в бяла карта, брояч * на реда със сортирането, бадж „Договорена цена" върху картите). * Markup: tools/pages/catalog-main.html + добавките в catalog.js. * Всичко тук важи САМО при html[data-theme="modern"] — В1 „Класик" ползва * същия markup без тези стилове и остава непроменена. * ========================================================================= */ /* --- Тъмният банер (трохи + заглавие + категории) ------------------------- * Секцията е извън

, затова фонът стига до ръбовете на екрана без * трикове с vw; вътрешната обвивка държи съдържанието в решетката на сайта. */ html[data-theme="modern"] .v5-cat-head { position: relative; overflow: hidden; color: #fff; background: linear-gradient(145deg, #173e2c 0%, #214d37 62%, #345f3b 100%); } /* декоративни концентрични кръгове горе вдясно */ html[data-theme="modern"] .v5-cat-head::after { content: ""; position: absolute; width: 430px; height: 430px; right: -120px; top: -230px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255, 255, 255, 0.03), 0 0 0 110px rgba(255, 255, 255, 0.025); pointer-events: none; } html[data-theme="modern"] .v5-cat-head-inner { position: relative; z-index: 1; padding-bottom: 28px; } /* трохите: светли върху тъмното */ html[data-theme="modern"] .v5-cat-head nav a { color: rgba(255, 255, 255, 0.62); } html[data-theme="modern"] .v5-cat-head nav a:hover { color: #fff; } html[data-theme="modern"] .v5-cat-head nav svg { color: rgba(255, 255, 255, 0.38); } html[data-theme="modern"] .v5-cat-head #catalog-breadcrumb { color: #fff; } /* --- Заглавен блок: текст вляво, брой продукти вдясно --------------------- */ .v5-cat-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin: 18px 0 14px; } .v5-cat-kicker { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 800; font-size: 12px; color: var(--color-brand-orange); } .v5-cat-h1 { margin-top: 12px; font-size: clamp(36px, 4.4vw, 60px); line-height: 0.98; letter-spacing: -0.05em; font-weight: 800; color: #fff; } .v5-cat-h1 span { color: #b6d35d; } .v5-cat-sub { margin-top: 18px; font-size: 15px; color: rgba(255, 255, 255, 0.68); } .v5-cat-stat { display: flex; align-items: center; gap: 13px; flex: 0 0 auto; border-left: 1px solid rgba(255, 255, 255, 0.2); padding: 8px 10px 8px 25px; margin-bottom: 5px; } .v5-cat-stat > span:first-child { font-size: 43px; font-weight: 800; line-height: 1; color: #b6d35d; } .v5-cat-stat > span:last-child { display: flex; flex-direction: column; } .v5-cat-stat strong { font-size: 13px; font-weight: 700; } .v5-cat-stat small { margin-top: 5px; font-size: 11px; color: rgba(255, 255, 255, 0.55); } /* --- Категорийните плочки в банера ---------------------------------------- * Същите бутони като при В1 (рендерират се от catalog.js), но полупрозрачни * върху тъмното, с оранжева стрелка вдясно и бяла активна плочка. * „Всички продукти" (data-cat="") застава първа — само с order, за да не се * пипа масивът QUICKNAV в catalog.js (той важи и за В1). */ html[data-theme="modern"] #catalog-quicknav button[data-cat=""] { order: -1; } html[data-theme="modern"] #catalog-quicknav button { min-height: 73px; border-radius: 12px; padding: 0 15px; border: 1px solid rgba(255, 255, 255, 0.14); background-color: rgba(255, 255, 255, 0.065); color: #fff; box-shadow: none; } html[data-theme="modern"] #catalog-quicknav button::after { content: "\2192"; margin-left: auto; padding-left: 10px; font-size: 15px; line-height: 1; } html[data-theme="modern"] #catalog-quicknav button > span:first-child { width: 37px; height: 37px; border-radius: 9px; border-top-right-radius: 9px; background-color: rgba(182, 211, 93, 0.18); color: #b6d35d; } html[data-theme="modern"] #catalog-quicknav button > span:first-child svg { width: 19px; height: 19px; } html[data-theme="modern"] #catalog-quicknav button span.tnum { color: rgba(255, 255, 255, 0.55); font-size: 12px; } /* активна и посочена плочка: бяла, с тъмен текст */ html[data-theme="modern"] #catalog-quicknav button:hover, html[data-theme="modern"] #catalog-quicknav button[aria-pressed="true"] { background-color: #fff; border-color: #fff; color: var(--color-ink); } html[data-theme="modern"] #catalog-quicknav button:hover > span:first-child, html[data-theme="modern"] #catalog-quicknav button[aria-pressed="true"] > span:first-child { background-color: #edf3df; color: var(--color-green-deep); } html[data-theme="modern"] #catalog-quicknav button:hover span.tnum, html[data-theme="modern"] #catalog-quicknav button[aria-pressed="true"] span.tnum { color: var(--color-muted); } html[data-theme="modern"] #catalog-quicknav button:hover::after, html[data-theme="modern"] #catalog-quicknav button[aria-pressed="true"]::after { color: var(--color-brand-orange); } /* Плочките в шаблона са (не