/* ========================================================================== OUD.bg – дизайн система v2.0 ========================================================================== Обхват: WooCommerce output, продуктова страница, състояния, микро-анимации, достъпност. Стилът на Divi модулите живее в Global Colors + Global Presets. Ако търсиш цвят на бутон в Divi секция – не е тук, а в preset-ите. Ако търсиш как изглежда количката – тук е. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Токени -------------------------------------------------------------------------- */ :root { /* Палитра v2.0 – същите стойности като Divi Global Colors */ --oud-paper: #FBF5E5; --oud-surface: #FFFCF4; --oud-surface-alt: #F5EDD9; --oud-track: #EADFC6; --oud-ink: #15110B; --oud-ink-muted: #6B6250; --oud-green: #062E1B; --oud-gold: #E5B842; --oud-gold-deep: #7A5B1C; --oud-on-gold: #15110B; --oud-on-green: #FBF5E5; --oud-success: #1E6E45; --oud-sale: #6F1728; --oud-line: rgba(122, 91, 28, 0.22); --oud-line-strong: rgba(122, 91, 28, 0.50); /* Шрифтове 27.09.2026: Cormorant Garamond излезе от сайта (Сабри: цените не се четат ясно). Името `--oud-serif` остава, за да не се пипат правилата, които го ползват, но вече сочи към Montserrat. Кегелът и теглото на тези места са компенсирани в раздел 65. */ --oud-serif: Montserrat, "Segoe UI", Arial, sans-serif; --oud-sans: Montserrat, "Segoe UI", Arial, sans-serif; /* Типографска стълба – плавна, без чупки между брекпойнтите */ --oud-step-hero: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem); --oud-step-1: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); --oud-step-2: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); --oud-step-3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); --oud-step-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* 16 → 18 px */ --oud-step-micro: 0.75rem; /* 12 px – абсолютният под за четим текст */ /* Ритъм */ --oud-lh-display: 1.06; --oud-lh-heading: 1.18; --oud-lh-body: 1.75; --oud-track-micro: 0.14em; /* Движение – expo-out е „скъпото“ усещане, bounce е за потвърждения */ --oud-ease: cubic-bezier(0.16, 1, 0.30, 1); --oud-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --oud-fast: 180ms; --oud-base: 320ms; --oud-slow: 620ms; /* Повърхности */ --oud-radius: 2px; --oud-radius-lg: 4px; --oud-shadow-sm: 0 1px 2px rgba(21, 17, 11, 0.04), 0 2px 8px rgba(21, 17, 11, 0.04); --oud-shadow-md: 0 4px 12px rgba(21, 17, 11, 0.06), 0 12px 32px rgba(21, 17, 11, 0.08); --oud-shadow-lg: 0 8px 20px rgba(21, 17, 11, 0.08), 0 24px 60px rgba(21, 17, 11, 0.12); --oud-content: 1240px; } /* -------------------------------------------------------------------------- 2. База -------------------------------------------------------------------------- */ .oud-site { background-color: var(--oud-paper); color: var(--oud-ink); font-family: var(--oud-sans); font-size: var(--oud-step-body); line-height: var(--oud-lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .oud-site h1, .oud-site h2, .oud-site h3, .oud-site h4 { font-family: var(--oud-serif); line-height: var(--oud-lh-heading); font-weight: 600; color: var(--oud-green); } .oud-site h1 { font-size: var(--oud-step-1); line-height: var(--oud-lh-display); } .oud-site h2 { font-size: var(--oud-step-2); } .oud-site h3 { font-size: var(--oud-step-3); } /* Микро-етикет: „НОВО“, „БРАНД“, „БЕЗПЛАТНА ДОСТАВКА“ – подписът на марката */ .oud-micro, .oud-site .oud-eyebrow { font-family: var(--oud-sans); font-size: var(--oud-step-micro); font-weight: 600; letter-spacing: var(--oud-track-micro); text-transform: uppercase; color: var(--oud-gold-deep); } /* Тъмнозелените зони – текстът в тях винаги е кремав. Тази грешка вече веднъж даде контраст 1.27:1 в прототипа. */ .oud-site .oud-on-green, .oud-site .oud-on-green h1, .oud-site .oud-on-green h2, .oud-site .oud-on-green h3, .oud-site .oud-on-green p { color: var(--oud-on-green); } /* -------------------------------------------------------------------------- 3. Връзки – подчертаване, което расте отляво -------------------------------------------------------------------------- */ .oud-site .oud-link, .oud-site .woocommerce-message a, .oud-site .woocommerce-info a, .oud-site .woocommerce-error a { position: relative; color: inherit; text-decoration: none; background-image: linear-gradient(var(--oud-gold-deep), var(--oud-gold-deep)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size var(--oud-base) var(--oud-ease); } .oud-site .oud-link:hover, .oud-site .woocommerce-message a:hover, .oud-site .woocommerce-info a:hover, .oud-site .woocommerce-error a:hover { background-size: 100% 1px; } /* Същото за менюто в хедъра, без да се пипа Divi структурата */ .oud-site .et-menu > li > a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--oud-gold); transition: width var(--oud-base) var(--oud-ease); } .oud-site .et-menu > li > a { position: relative; } .oud-site .et-menu > li > a:hover::after, .oud-site .et-menu > li.current-menu-item > a::after { width: 100%; } /* -------------------------------------------------------------------------- 4. Бутони на WooCommerce Divi бутоните се стилизират през preset-ите – тук са само тези, които WooCommerce печата със собствен markup. -------------------------------------------------------------------------- */ .oud-site .woocommerce a.button, .oud-site .woocommerce button.button, .oud-site .woocommerce input.button, .oud-site .woocommerce #respond input#submit { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.75rem; border: 1px solid var(--oud-line-strong); border-radius: var(--oud-radius); background: transparent; color: var(--oud-ink); font-family: var(--oud-sans); font-size: var(--oud-step-micro); font-weight: 700; letter-spacing: var(--oud-track-micro); text-transform: uppercase; line-height: 1; transition: transform var(--oud-base) var(--oud-ease), box-shadow var(--oud-base) var(--oud-ease), background-color var(--oud-base) var(--oud-ease), border-color var(--oud-base) var(--oud-ease), color var(--oud-base) var(--oud-ease); } /* Светлинна вълна при hover – детайлът, който отличава скъпия бутон */ .oud-site .woocommerce a.button::before, .oud-site .woocommerce button.button::before, .oud-site .woocommerce input.button::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100% ); transform: translateX(-100%); transition: transform var(--oud-slow) var(--oud-ease); pointer-events: none; } .oud-site .woocommerce a.button:hover::before, .oud-site .woocommerce button.button:hover::before, .oud-site .woocommerce input.button:hover::before { transform: translateX(100%); } .oud-site .woocommerce a.button:hover, .oud-site .woocommerce button.button:hover, .oud-site .woocommerce input.button:hover { transform: translateY(-2px); border-color: var(--oud-gold-deep); box-shadow: var(--oud-shadow-md); } .oud-site .woocommerce a.button:active, .oud-site .woocommerce button.button:active, .oud-site .woocommerce input.button:active { transform: translateY(0); box-shadow: var(--oud-shadow-sm); } /* Основното действие – злато. Единственият пълен златен елемент на екрана. */ .oud-site .woocommerce button.single_add_to_cart_button, .oud-site .woocommerce a.checkout-button, .oud-site .woocommerce #place_order, .oud-site .woocommerce .button.alt { border-color: var(--oud-gold); background: var(--oud-gold); color: var(--oud-on-gold); } .oud-site .woocommerce button.single_add_to_cart_button:hover, .oud-site .woocommerce a.checkout-button:hover, .oud-site .woocommerce #place_order:hover, .oud-site .woocommerce .button.alt:hover { border-color: var(--oud-gold-deep); background: var(--oud-gold-deep); color: var(--oud-on-green); } /* -------------------------------------------------------------------------- 5. Полета и брояч на количество -------------------------------------------------------------------------- */ .oud-site .woocommerce input[type="text"], .oud-site .woocommerce input[type="email"], .oud-site .woocommerce input[type="tel"], .oud-site .woocommerce input[type="number"], .oud-site .woocommerce input[type="password"], .oud-site .woocommerce textarea, .oud-site .woocommerce select { min-height: 48px; padding: 0.65rem 0.9rem; border: 1px solid var(--oud-line); border-radius: var(--oud-radius); background: var(--oud-surface); color: var(--oud-ink); font-family: var(--oud-sans); font-size: 1rem; /* 16px – под това iOS зумва полето при фокус */ transition: border-color var(--oud-fast) var(--oud-ease), box-shadow var(--oud-fast) var(--oud-ease); } .oud-site .woocommerce input:focus, .oud-site .woocommerce textarea:focus, .oud-site .woocommerce select:focus { outline: none; border-color: var(--oud-gold-deep); box-shadow: 0 0 0 3px rgba(229, 184, 66, 0.22); } .oud-site .woocommerce .quantity { display: inline-flex; align-items: center; border: 1px solid var(--oud-line); border-radius: var(--oud-radius); background: var(--oud-surface); overflow: hidden; } .oud-site .woocommerce .quantity input.qty { width: 4rem; min-height: 46px; border: 0; background: transparent; text-align: center; font-weight: 600; } /* -------------------------------------------------------------------------- 6. Съобщения на WooCommerce – в нашата палитра, не в лилавото по подразбиране -------------------------------------------------------------------------- */ .oud-site .woocommerce-message, .oud-site .woocommerce-info, .oud-site .woocommerce-error { border: 1px solid var(--oud-line); border-top: 2px solid var(--oud-gold-deep); border-radius: var(--oud-radius); background: var(--oud-surface); box-shadow: var(--oud-shadow-sm); color: var(--oud-ink); font-size: 0.9375rem; } .oud-site .woocommerce-message { border-top-color: var(--oud-success); } .oud-site .woocommerce-error { border-top-color: var(--oud-sale); } .oud-site .woocommerce-message::before { color: var(--oud-success); } .oud-site .woocommerce-error::before { color: var(--oud-sale); } /* -------------------------------------------------------------------------- 7. Цени -------------------------------------------------------------------------- */ .oud-site .woocommerce .price, .oud-site .woocommerce span.amount { font-family: var(--oud-serif); font-size: 1.5rem; font-weight: 600; color: var(--oud-green); letter-spacing: 0.01em; } .oud-site .woocommerce .price del { opacity: 0.55; font-size: 0.7em; margin-right: 0.5rem; text-decoration-thickness: 1px; } .oud-site .woocommerce .price ins { text-decoration: none; color: var(--oud-sale); } .oud-site .oud-tax-note { font-size: 0.875rem; color: var(--oud-ink-muted); } /* -------------------------------------------------------------------------- 8. Продуктова карта в каталога -------------------------------------------------------------------------- */ .oud-site .woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; } .oud-site .woocommerce ul.products li.product { position: relative; display: flex; flex-direction: column; width: auto !important; /* WooCommerce печата inline float ширини */ float: none !important; margin: 0 0 -1px -1px !important; padding: 1.25rem; border: 1px solid var(--oud-line); background: var(--oud-surface); transition: transform var(--oud-base) var(--oud-ease), box-shadow var(--oud-base) var(--oud-ease), z-index 0s; } .oud-site .woocommerce ul.products li.product:hover { z-index: 2; transform: translateY(-4px); box-shadow: var(--oud-shadow-lg); } /* Снимката – фиксирано съотношение, за да не подскача решетката, докато снимките на различните флакони се зареждат */ .oud-site .woocommerce ul.products li.product img { aspect-ratio: 3 / 4; width: 100%; height: auto; object-fit: contain; background: var(--oud-paper); border-radius: var(--oud-radius); transition: transform var(--oud-slow) var(--oud-ease); } .oud-site .woocommerce ul.products li.product:hover img { transform: scale(1.04); } .oud-site .woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--oud-serif); font-size: 1.25rem; font-weight: 600; color: var(--oud-green); padding: 0.75rem 0 0.25rem; } .oud-site .woocommerce ul.products li.product .price { font-size: 1.25rem; margin-top: auto; padding-top: 0.5rem; } /* „Add to cart“ в картата се появява плавно на hover, но остава винаги видим на тъч устройства, където hover не съществува */ .oud-site .woocommerce ul.products li.product a.add_to_cart_button, .oud-site .woocommerce ul.products li.product a.product_type_variable, .oud-site .woocommerce ul.products li.product a.product_type_simple { margin-top: 0.75rem; opacity: 0; transform: translateY(6px); transition: opacity var(--oud-base) var(--oud-ease), transform var(--oud-base) var(--oud-ease); } .oud-site .woocommerce ul.products li.product:hover a.add_to_cart_button, .oud-site .woocommerce ul.products li.product:hover a.product_type_variable, .oud-site .woocommerce ul.products li.product:hover a.product_type_simple, .oud-site .woocommerce ul.products li.product a.add_to_cart_button:focus-visible { opacity: 1; transform: translateY(0); } /* Тъч устройства нямат hover – там бутонът стои винаги видим. Двете условия са нарочно отделни правила, а не едно с запетая: ако браузърът не разбира едното, другото пак работи. */ @media (hover: none) { .oud-site .woocommerce ul.products li.product a.add_to_cart_button, .oud-site .woocommerce ul.products li.product a.product_type_variable, .oud-site .woocommerce ul.products li.product a.product_type_simple { opacity: 1; transform: none; } } @media (max-width: 980px) { .oud-site .woocommerce ul.products li.product a.add_to_cart_button, .oud-site .woocommerce ul.products li.product a.product_type_variable, .oud-site .woocommerce ul.products li.product a.product_type_simple { opacity: 1; transform: none; } } /* Значка „Промоция“ */ .oud-site .woocommerce span.onsale { top: 1.25rem; left: 1.25rem; right: auto; min-height: 0; min-width: 0; padding: 0.35rem 0.7rem; border-radius: var(--oud-radius); background: var(--oud-sale); color: var(--oud-on-green); font-family: var(--oud-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: var(--oud-track-micro); text-transform: uppercase; line-height: 1.4; } /* -------------------------------------------------------------------------- 9. Продуктова страница Структурата е тази от прототипа и НЕ се променя: галерия · резюме · нотки · трайност и проекция · вдъхновен от · историята · защо арабски парфюми · отзиви · може да харесаш Модернизира се само изпълнението. -------------------------------------------------------------------------- */ /* 9.1 Дясната колона се движи с потребителя – купуването е винаги на екрана. Това е най-голямата съвременна печалба за конверсия при дълга страница. */ @media (min-width: 981px) { .oud-pdp .oud-buy-column { position: sticky; top: 120px; /* под sticky хедъра */ align-self: start; } } /* 9.2 Trust лента под бутона за купуване */ .oud-site .oud-trust-strip { display: flex; flex-wrap: wrap; gap: 1.25rem; padding: 1.15rem 0; border-top: 1px solid var(--oud-line); border-bottom: 1px solid var(--oud-line); } .oud-site .oud-trust-mini { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--oud-ink-muted); } /* 9.3 Ароматни нотки – редове „връх / сърце / основа“ */ .oud-site .oud-note-row { display: grid; grid-template-columns: minmax(88px, 148px) 1fr; gap: 1rem 1.5rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--oud-line); } .oud-site .oud-note-row:last-child { border-bottom: 0; } .oud-site .oud-note-row__label { font-size: var(--oud-step-micro); font-weight: 600; letter-spacing: var(--oud-track-micro); text-transform: uppercase; color: var(--oud-gold-deep); } /* Нотките като таблетки – четат се на един поглед, вместо като списък със запетаи */ .oud-site .oud-note { display: inline-block; margin: 0 0.4rem 0.4rem 0; padding: 0.35rem 0.85rem; border: 1px solid var(--oud-line); border-radius: 999px; background: var(--oud-surface-alt); font-size: 0.875rem; transition: border-color var(--oud-fast) var(--oud-ease), background-color var(--oud-fast) var(--oud-ease); } .oud-site .oud-note:hover { border-color: var(--oud-gold-deep); background: var(--oud-surface); } /* 9.4 Трайност и проекция – измерими неща заслужават скала, не прилагателно */ .oud-site .oud-meter { display: grid; grid-template-columns: minmax(88px, 148px) 1fr auto; gap: 1rem; align-items: center; padding: 0.85rem 0; } .oud-site .oud-meter__track { position: relative; height: 4px; border-radius: 999px; background: var(--oud-track); overflow: hidden; } .oud-site .oud-meter__fill { position: absolute; inset: 0 auto 0 0; width: var(--oud-meter-value, 0%); border-radius: 999px; background: linear-gradient(90deg, var(--oud-gold-deep), var(--oud-gold)); transform-origin: left center; transform: scaleX(0); transition: transform 900ms var(--oud-ease); } .oud-site .is-revealed .oud-meter__fill, .oud-site .oud-meter.is-revealed .oud-meter__fill { transform: scaleX(1); } .oud-site .oud-meter__value { font-size: var(--oud-step-micro); font-weight: 600; letter-spacing: 0.06em; color: var(--oud-ink-muted); white-space: nowrap; } /* 9.5 „Вдъхновен от“ – юридически чувствителна зона, затова визуално е обособена и дисклеймърът е част от кутията, не бележка под линия */ .oud-site .oud-inspired { padding: 1.5rem; border: 1px solid var(--oud-line); border-left: 3px solid var(--oud-gold); border-radius: var(--oud-radius); background: var(--oud-surface-alt); } .oud-site .oud-inspired__disclaimer { margin-top: 0.85rem; font-size: 0.75rem; line-height: 1.6; color: var(--oud-ink-muted); } /* 9.6 Отзиви */ .oud-site .oud-review-card { padding: 1.5rem; border: 1px solid var(--oud-line); border-radius: var(--oud-radius); background: var(--oud-surface); transition: box-shadow var(--oud-base) var(--oud-ease), transform var(--oud-base) var(--oud-ease); } .oud-site .oud-review-card:hover { transform: translateY(-2px); box-shadow: var(--oud-shadow-md); } .oud-site .woocommerce .star-rating span::before, .oud-site .oud-stars { color: var(--oud-gold); } /* 9.9 Мета редът под бутона – код, категория и етикети на отделни редове. WooCommerce ги пише като три съседни span в един контейнер и на екрана излиза „Код: LAT-KHM-100Категория: Унисекс парфюми“ без нито един интервал. Divi модулът „Woo Product Meta“ има само превключватели кое да се вижда, но няма настройка за подредба – затова правилото е тук, а не в билдъра. */ .oud-site .et_pb_wc_meta .product_meta > span { display: block; } .oud-site .et_pb_wc_meta .product_meta > span + span { margin-top: 0.4rem; } /* -------------------------------------------------------------------------- 10. Количка и чекаут -------------------------------------------------------------------------- */ .oud-site .oud-cart-line { display: flex; align-items: center; gap: 0.85rem; } .oud-site .oud-cart-thumb { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--oud-line); border-radius: var(--oud-radius); background: var(--oud-paper); flex: 0 0 auto; } .oud-site .woocommerce table.shop_table { border: 1px solid var(--oud-line); border-radius: var(--oud-radius); border-collapse: separate; border-spacing: 0; background: var(--oud-surface); } .oud-site .woocommerce table.shop_table th { font-family: var(--oud-sans); font-size: var(--oud-step-micro); font-weight: 700; letter-spacing: var(--oud-track-micro); text-transform: uppercase; color: var(--oud-ink-muted); } .oud-site .woocommerce a.remove { color: var(--oud-ink-muted) !important; transition: color var(--oud-fast) var(--oud-ease), transform var(--oud-fast) var(--oud-bounce); } .oud-site .woocommerce a.remove:hover { background: transparent !important; color: var(--oud-sale) !important; transform: scale(1.15); } /* -------------------------------------------------------------------------- 11. Появяване при скрол – вече е работа на Divi -------------------------------------------------------------------------- Тук стоеше собствена система с клас `oud-reveal`. Премахната на 22.08.2026. Divi има Animation по модул – style, direction, duration, delay, intensity, startingOpacity, speed curve. Прави същото, но се вижда и се пипа в билдъра, вместо да е клас, скрит в CSS файл. Правилото е: в child темата остава само това, което билдърът няма. Настройката на живо: slide отдолу, 1000ms за редовете и 850ms за картите в решетка, интензитет 6%, начална непрозрачност 0%, ease-out, забавяне на стъпала от по 100–140ms между съседните колони. -------------------------------------------------------------------------- */ /* Наливането (17.7) остава наше и се нуждае от предпазител: скрито съдържание без кой да го покаже е счупено съдържание. */ @media (scripting: none) { .oud-site .oud-fill { clip-path: none; } } /* -------------------------------------------------------------------------- 10.1 Правни страници Дълъг текст, който трябва да се чете, не да се разглежда. Ограничена ширина, спокоен ритъм, ясна йерархия – иначе никой не стига до края на Общите условия. -------------------------------------------------------------------------- */ .oud-site .oud-legal { max-width: 78ch; margin: 0 auto; font-size: 1rem; line-height: 1.8; color: var(--oud-ink); } /* Главните раздели на документа са h2 (H1 е заглавието на страницата). До 31.08.2026 бяха h3 и страницата прескачаше ниво – h1 направо на h3. Линията отгоре разделя разделите. */ .oud-site .oud-legal > h2 { margin: 3rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--oud-line); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); } .oud-site .oud-legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } /* Подразделите нямат линия – иначе документът се накъсва. h3 и h4 споделят стила: h3 е подраздел, h4 – подраздел на подраздела. */ .oud-site .oud-legal > h3, .oud-site .oud-legal > h4 { margin: 2rem 0 0.75rem; font-family: var(--oud-serif); font-size: clamp(1.1rem, 1.05rem + 0.35vw, 1.3rem); font-weight: 600; color: var(--oud-green); letter-spacing: 0; text-transform: none; } .oud-site .oud-legal > h5 { margin: 1.75rem 0 0.65rem; font-family: var(--oud-sans); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.04em; color: var(--oud-gold-deep); } .oud-site .oud-legal p { margin: 0 0 1.1rem; } .oud-site .oud-legal ul, .oud-site .oud-legal ol { margin: 0 0 1.4rem; padding-left: 1.4rem; } .oud-site .oud-legal li { margin-bottom: 0.6rem; } .oud-site .oud-legal a { color: var(--oud-gold-deep); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; /* дълги URL адреси не бива да разчупват страницата */ } .oud-site .oud-legal hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--oud-line); } .oud-site .oud-legal blockquote { margin: 1.75rem 0; padding: 1.25rem 1.5rem; border: 0; border-left: 3px solid var(--oud-gold); border-radius: var(--oud-radius); background: var(--oud-surface-alt); } .oud-site .oud-legal blockquote p:last-child { margin-bottom: 0; } /* Таблиците в правните текстове често са широки – скролват в себе си, вместо да бутат цялата страница настрани */ .oud-site .oud-legal table { display: block; width: 100%; overflow-x: auto; margin: 0 0 1.75rem; border-collapse: collapse; font-size: 0.9375rem; } .oud-site .oud-legal th, .oud-site .oud-legal td { padding: 0.7rem 0.9rem; border: 1px solid var(--oud-line); text-align: left; vertical-align: top; } .oud-site .oud-legal th { background: var(--oud-surface-alt); font-family: var(--oud-sans); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--oud-ink-muted); } .oud-site .oud-legal code { padding: 0.1rem 0.35rem; border-radius: var(--oud-radius); background: var(--oud-surface-alt); font-size: 0.9em; } /* -------------------------------------------------------------------------- 10.2 Тест „Открий своя аромат“ Съдържанието е Divi модули – тук е само кое се вижда и как реагира. Скриването е с атрибута `hidden`, който JS-ът превключва: без JS всички въпроси са видими и секцията пак се чете, само не се държи като тест. -------------------------------------------------------------------------- */ .oud-site .oud-quiz [hidden] { display: none !important; } /* Отговорите са кликаеми карти. Курсорът и състоянията го казват. */ .oud-site .oud-quiz__opt { /* Divi оразмерява flex колоните по съдържание – четирите отговора излизаха с различна ширина. Това ги изравнява. */ flex: 1 1 0 !important; min-width: 0; cursor: pointer; transition: transform var(--oud-base) var(--oud-ease), border-color var(--oud-base) var(--oud-ease), box-shadow var(--oud-base) var(--oud-ease), background-color var(--oud-base) var(--oud-ease); } .oud-site .oud-quiz__opt:hover, .oud-site .oud-quiz__opt:focus-visible { transform: translateY(-4px); border-color: var(--oud-gold) !important; box-shadow: var(--oud-shadow-md); } /* Кратко потвърждение при избор, преди следващия въпрос */ .oud-site .oud-quiz__opt.is-picked { transform: translateY(0) scale(0.98); border-color: var(--oud-gold) !important; background-color: var(--oud-surface-alt) !important; box-shadow: inset 0 0 0 2px var(--oud-gold); } /* Резултатът се появява плавно */ .oud-site .oud-quiz__result:not([hidden]) { animation: oud-quiz-in var(--oud-slow) var(--oud-ease) both; } @keyframes oud-quiz-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .oud-site .oud-quiz__result:not([hidden]) { animation: none; } } @media (max-width: 980px) { /* Четири отговора един до друг не се четат на телефон. Редът на Divi е flex, затова се пренарежда с flex-wrap, а не с ширини: отговорите са divi/column-inner, тоест .et_pb_column_inner. */ .oud-site .oud-quiz__step .et_pb_row_inner { flex-wrap: wrap !important; gap: 12px; } .oud-site .oud-quiz__step .et_pb_column_inner { width: calc(50% - 6px) !important; max-width: calc(50% - 6px) !important; margin: 0 !important; } } @media (max-width: 479px) { /* На тесен телефон дори два са тесни – минават на един под друг */ .oud-site .oud-quiz__step .et_pb_column_inner { width: 100% !important; max-width: 100% !important; } } /* -------------------------------------------------------------------------- 11.1 Състояния на хедъра (класът идва от oud-site.js) -------------------------------------------------------------------------- Хедърът е шаблон на Theme Builder, затова коренът му е `.et-l--header`. `#main-header` съществува само когато хедърът се рисува от самата тема – правилата, писани за него, никога не са се прилагали. Тук стои само преходът. Как изглежда хедърът е раздел 15. -------------------------------------------------------------------------- */ .oud-site .et-l--header .et_pb_section { transition: box-shadow var(--oud-base) var(--oud-ease); } /* -------------------------------------------------------------------------- 12. Достъпност -------------------------------------------------------------------------- */ .oud-site :focus-visible { outline: 2px solid var(--oud-gold-deep); outline-offset: 3px; border-radius: var(--oud-radius); } .oud-site .oud-skip-link { position: absolute; left: -9999px; z-index: 999999; padding: 0.85rem 1.25rem; background: var(--oud-green); color: var(--oud-on-green); font-size: 0.875rem; } .oud-site .oud-skip-link:focus { left: 1rem; top: 1rem; } /* Уважава системната настройка. Който е изключил анимациите, не ги получава. */ @media (prefers-reduced-motion: reduce) { .oud-site *, .oud-site *::before, .oud-site *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .oud-site .oud-meter__fill { transform: scaleX(1); } } /* -------------------------------------------------------------------------- 13. Мобилно -------------------------------------------------------------------------- */ @media (max-width: 980px) { .oud-site .oud-note-row, .oud-site .oud-meter { grid-template-columns: 1fr; gap: 0.5rem; } .oud-site .oud-trust-strip { flex-direction: column; gap: 0.75rem; } } @media (max-width: 767px) { .oud-site .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } .oud-site .woocommerce ul.products li.product { padding: 0.85rem; } .oud-site .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.0625rem; } /* Купуването остава на екрана и на телефон */ .oud-pdp .oud-buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--oud-line); background: var(--oud-surface); box-shadow: 0 -4px 20px rgba(21, 17, 11, 0.08); } } /* -------------------------------------------------------------------------- 14. Печат – клиентите разпечатват поръчки -------------------------------------------------------------------------- */ @media print { .oud-site .oud-buy-bar, .oud-site #main-header, .oud-site #main-footer { display: none !important; } .oud-site { background: #fff; color: #000; } } /* -------------------------------------------------------------------------- 15. Хедър – лентата, менюто и иконите -------------------------------------------------------------------------- Кой какво държи: · Divi (Theme Builder, шаблон „OUD.bg – Глобален шаблон“, хедър 217) – фонът на секциите, ширината на реда, размерът на логото и на иконите. Това са неща, които се виждат и се пипат в билдъра. · Max Mega Menu → Menu Themes → „OUD.bg“ – цветовете и шрифтовете на самото меню и на мега панелите. · Тук – само това, което нито едното, нито другото може да опише: подредбата на реда, свиването при скрол, брояча на количката, анимираното подчертаване, търсенето и мобилното чекмедже. Мерките са в променливи най-отгоре, защото свиването при скрол сменя само тях – така има едно място, което се пипа, вместо пет правила. -------------------------------------------------------------------------- */ .oud-site .et-l--header { --oud-nav-h: 64px; /* височина на позиция от горното ниво */ --oud-logo-h: 64px; /* 29.08.2026: 54 → 64. Новото лого е изрязано до съдържанието си (294×200 вместо 500×150 с 56% празнина), затова при същата височина заема много по-малко ширина – има място да порасне. Изравнено с --oud-nav-h, за да не расте лентата. Въпрос A5. */ } /* 15.0.1 Логото по ширина на екрана (A5: „достатъчно видимо и на десктоп, и на таблет, и на мобилна версия“). До 29.08.2026 стойността беше една – 54px и на 1440px, и на 390px, където логото изяждаше несъразмерно голяма част от лентата. */ @media (max-width: 1100px) { .oud-site .et-l--header { --oud-logo-h: 56px; } } @media (max-width: 767px) { .oud-site .et-l--header { --oud-logo-h: 44px; } } /* 15.1 Лентата – дълбочина, без да се излиза от палитрата. Градиентът е един и същ зелен тон, само по-светъл отгоре: така лентата изглежда като материал, а не като плосък правоъгълник. */ .oud-site .et-l--header .oud-headerbar { position: relative; background-image: linear-gradient(180deg, #0A3A22 0%, #062E1B 58%, #04240F 100%); } /* Долният ръб: Divi рисува бронзова черта през цялата ширина, а тази тук ляга точно върху нея – прави я златна в средата, където са логото и менюто, и я оставя бронзова към краищата. */ .oud-site .et-l--header .oud-headerbar::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; background-image: linear-gradient( 90deg, rgba(229, 184, 66, 0) 0%, rgba(229, 184, 66, 0.55) 50%, rgba(229, 184, 66, 0) 100% ); content: ""; pointer-events: none; } /* Скролната страница – лентата се откъсва от съдържанието със сянка, вместо с още една линия. */ .oud-site.oud-scrolled .et-l--header .oud-headerbar { box-shadow: 0 10px 30px -14px rgba(4, 31, 18, 0.6); } /* 15.2 Горна лента – микро обещанията над хедъра. */ .oud-site .oud-topbar__text .et_pb_text_inner > p { margin: 0; padding: 0; } .oud-site .oud-topbar__item--lead { font-weight: 700; } .oud-site .oud-topbar__item + .oud-topbar__item::before { margin: 0 0.85em; color: rgba(122, 91, 28, 0.9); content: "·"; } /* 15.3 Редът на хедъра – ТУК Е ПОПРАВКАТА НА СЧУПЕНАТА ПОДРЕДБА. Divi слага логото, менюто и иконите в един flex ред, който по подразбиране се пренася. Мега менюто заема цялата останала ширина и изтласкваше иконата на търсенето на втори ред под лентата. Редът се заключва на един (nowrap), менюто получава правото да се свива (min-width: 0), а иконите – правото да не се свиват. */ .oud-site .et-l--header .et_pb_menu_inner_container { position: relative; /* отмерна точка за панела на търсенето – виж 15.11 */ display: flex; /* Divi върти посоката през `flex-direction: var(--flex-direction)` върху `.et_flex_module`. На страниците на магазина тази променлива е `column` и хедърът се разпадаше на три реда: лого, меню, икони. Редът на хедъра е ред винаги – заковава се тук. */ flex-direction: row; flex-wrap: nowrap; align-items: center; column-gap: 28px; } .oud-site .et-l--header .et_pb_menu__logo-wrap { flex: 0 0 auto; margin: 0; } .oud-site .et-l--header .et_pb_menu__wrap { display: flex; flex: 1 1 auto; flex-wrap: nowrap; align-items: center; justify-content: flex-end; column-gap: 4px; min-width: 0; } .oud-site .et-l--header .et_pb_menu__menu { flex: 1 1 auto; min-width: 0; margin-right: auto; } .oud-site .et-l--header .et_pb_menu__icon { flex: 0 0 auto; } /* 15.4 Логото. Размерът е и в Divi, но само оттук може да се анимира. Височината е `height`, а НЕ `max-height`, и това е съществено. WordPress слага `loading="lazy"` на логото. Докато файлът не е зареден, браузърът знае само пропорцията от атрибутите width/height, но не и размер. При `max-height` + `width: auto` двете мерки са неопределени и картинката се свива до 0×0 – а 0×0 никога не влиза в полезрението и lazy зареждането не се задейства. С определена височина ширината се смята от пропорцията и логото заема място още преди да се е заредило. */ .oud-site .et-l--header .et_pb_menu__logo img { height: var(--oud-logo-h); max-width: 46vw; width: auto; transition: height var(--oud-base) var(--oud-ease); } /* 15.5 Позициите от горното ниво. Височината идва от променливата, за да може да се свие при скрол – Max Mega Menu я задава твърдо на 64px със селектор от две ID-та. */ .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link { position: relative; height: var(--oud-nav-h); min-height: var(--oud-nav-h); line-height: var(--oud-nav-h); transition: color var(--oud-fast) var(--oud-ease), height var(--oud-base) var(--oud-ease), min-height var(--oud-base) var(--oud-ease), line-height var(--oud-base) var(--oud-ease); } /* Златната черта расте от средата навън. Закачена е за средата на позицията (top: 50%), а не за долния ѝ ръб – така при свиването на хедъра остава на същото разстояние под буквите. */ .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link::before { position: absolute; top: 50%; left: 50%; width: 0; height: 2px; background-image: linear-gradient(90deg, #7A5B1C 0%, #E5B842 50%, #7A5B1C 100%); content: ""; transform: translate(-50%, 13px); transition: width var(--oud-base) var(--oud-ease); } .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link:hover::before, .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link:focus-visible::before, .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link::before, .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link::before, .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link::before, .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link::before { width: calc(100% - 30px); } /* Отворената позиция става златна и по буква, не само по чертата – иначе при клик без посочване (клавиатура, тъчпад) нищо не казва кой панел е отворен. */ .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link { color: var(--oud-gold); } /* 15.6 „Мъртвата зона“ между лентата и панела. Divi секцията има долен padding, затова между долния ръб на позицията и мега панела остават около 10px, в които мишката излиза от li и панелът се затваря. Мостът е прозрачен и не се вижда. */ .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item-has-children > a.mega-menu-link::after { position: absolute; right: 0; bottom: -16px; left: 0; height: 16px; content: ""; } /* 15.7 Забележка: разредката (letter-spacing) на менюто НЕ може да стои тук. Max Mega Menu има reset правило `letter-spacing: revert` върху `#mega-menu-primary-menu li.mega-menu-item a.mega-menu-link`, което побеждава всичко оттук по специфичност. Затова разредката е в Mega Menu → Menu Themes → OUD.bg → Custom Styling, където плъгинът я извежда СЛЕД reset-ите си. */ /* 15.8 Мега панелът. Цветовете му са в темата на плъгина, но решението заслужава ред тук: панелът е ТЪМЕН и продължава лентата надолу, вместо да е крем кутия под нея. Крем панел върху крем страница нямаше край – окото не намираше границата и менюто се четеше като част от съдържанието. Тъмното дава недвусмислена рамка: заглавия в злато, линкове в крем, разделители в злато на 28%. Панелът е на цялата ширина на екрана, но съдържанието се държи в колона от 1180px, подравнена с останалото съдържание на сайта. */ #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu > ul.mega-sub-menu { padding-right: max(24px, calc((100vw - 1180px) / 2)); padding-left: max(24px, calc((100vw - 1180px) / 2)); } /* Линковете в колоните се отместват едва забележимо при посочване – дава усещане за отзивчивост, без да мести съседите. */ #mega-menu-wrap-primary-menu .mega-sub-menu .mega-sub-menu > li.mega-menu-item > a.mega-menu-link { transition: color var(--oud-fast) var(--oud-ease), transform var(--oud-fast) var(--oud-ease); } #mega-menu-wrap-primary-menu .mega-sub-menu .mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover { transform: translateX(3px); } /* Последният ред в колона, маркиран с клас oud-mega-cta – водещият линк „виж всичко“, в бронз и с горна линия. */ #mega-menu-wrap-primary-menu #mega-menu-primary-menu li.mega-menu-item.oud-mega-cta.mega-oud-mega-cta > a.mega-menu-link { margin-top: 0.6rem; padding-top: 0.7rem; border-top: 1px solid rgba(229, 184, 66, 0.25); color: var(--oud-gold); font-weight: 600; } /* 15.9 Иконите на количката и търсенето. Divi ги извежда като гол глиф. Тук всяка получава кръгло поле, което се пали при посочване – целта става 42px вместо 22px, а това е разликата между „уцелих“ и „не уцелих“ с пръст. */ .oud-site .et-l--header .et_pb_menu__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin: 0; padding: 0; border-radius: 50%; background-color: transparent; transition: background-color var(--oud-fast) var(--oud-ease), color var(--oud-fast) var(--oud-ease); } .oud-site .et-l--header .et_pb_menu__icon:hover, .oud-site .et-l--header .et_pb_menu__icon:focus-visible { background-color: rgba(229, 184, 66, 0.14); color: var(--oud-gold); } /* 15.10 Броячът на количката. Divi изписва количката като текст – „1 Item“, на латиница и с 105px ширина. oud-site.js оставя в елемента само числото; оттук нататък това е кръгче в злато, кацнало върху иконата. Празна количка – кръгчето изчезва, за да не крещи нула. */ .oud-site .et-l--header .et_pb_menu__cart-count { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background-color: var(--oud-gold); box-shadow: 0 0 0 2px #062E1B; color: var(--oud-green); font-family: var(--oud-sans); font-size: 11px; font-weight: 700; line-height: 18px; letter-spacing: 0; text-align: center; text-transform: none; } .oud-site .et-l--header .et_pb_menu__cart-count[data-oud-empty] { display: none; } /* 15.11 Търсенето. Полето остава върху тъмната лента – крем текст върху зелено и златна черта отдолу, вместо бялата кутия по подразбиране. Панелът е брат на логото и на менюто в един flex ред. На част от страниците Divi НЕ го изважда от потока, докато е скрит, и той изяжда 186px от реда – менюто се пренасяше на втори ред в магазина. Тук се вади от потока и винаги ляга върху цялата лента, когато се отвори. */ .oud-site .et-l--header .et_pb_menu__search-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; background-color: transparent; } .oud-site .et-l--header .et_pb_menu__search-input { border: 0; border-bottom: 1px solid rgba(229, 184, 66, 0.45); background-color: transparent; color: var(--oud-on-green); font-family: var(--oud-sans); font-size: 15px; letter-spacing: 0.06em; transition: border-color var(--oud-fast) var(--oud-ease); } .oud-site .et-l--header .et_pb_menu__search-input:focus { border-bottom-color: var(--oud-gold); outline: none; } .oud-site .et-l--header .et_pb_menu__search-input::placeholder { color: rgba(251, 245, 229, 0.5); } .oud-site .et-l--header .et_pb_menu__close-search-button { color: var(--oud-on-green); } /* 15.12 Свиване при скрол. Само на десктоп – на телефон хедърът вече е нисък и всяко местене там дърпа окото без полза. Свиват се позициите (64 → 52) и логото (54 → 40). Лентата пада от 85px на 73px. Padding-ът на реда НЕ се пипа: Divi го изписва като `.et_pb_row_1_tb_header.et_pb_row { padding: 10px 0 !important }` и единственият начин да бъде победен е още едно !important. Дванадесетте пиксела не струват колкото това. Ако някога потрябват – сменят се в Divi, не тук. */ @media (min-width: 1101px) { .oud-site.oud-scrolled .et-l--header { --oud-nav-h: 52px; --oud-logo-h: 46px; /* 29.08.2026: 40 → 46, пропорционално на 54 → 64 */ } } /* 15.13 Тесни екрани преди мобилния праг – 8 позиции в 1100px са тясно. Буквите слизат с един пункт, вместо менюто да се пренесе. */ @media (min-width: 1101px) and (max-width: 1300px) { .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link { padding-right: 10px; padding-left: 10px; font-size: 13px; } .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link:hover::before, .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link:focus-visible::before, .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link::before, .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link::before, .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-current-menu-parent > a.mega-menu-link::before, .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link::before { width: calc(100% - 20px); } } /* 15.14 Мобилно – Divi има собствен хамбургер, който би дублирал този на плъгина. Скрива се, менюто се поема изцяло от Max Mega Menu. */ @media (max-width: 1100px) { .et-l--header .et_pb_menu .et_mobile_nav_menu { display: none; } /* Бутонът „МЕНЮ“ отива най-вдясно – както очаква палецът. Без order той стои преди иконите на количката и търсенето. */ .et-l--header .et_pb_menu .et_pb_menu__menu { order: 9; flex: 0 0 auto; margin-right: 0; margin-left: 8px; } #mega-menu-wrap-primary-menu .mega-menu-toggle { justify-content: flex-end; } /* Бутонът получава кант – иначе е гол текст, който не изглежда натискаем. Селекторът е дълъг по същата причина като в 15.7: Max Mega Menu има reset върху `... .mega-toggle-block-0 button.mega-toggle-standard`. Същата специфичност плюс по-късно място в страницата означава, че плъгинът печели. Добавените тук елемент и втори клас обръщат везните. */ #mega-menu-wrap-primary-menu .mega-menu-toggle .mega-toggle-block-0 button.mega-toggle-standard.mega-toggle-label { padding: 7px 13px; border: 1px solid rgba(229, 184, 66, 0.5); border-radius: 2px; font-family: var(--oud-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; } /* На нисък екран панелът да може да се превърти, вместо да излиза извън него. */ #mega-menu-wrap-primary-menu #mega-menu-primary-menu { max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; } /* Второто и третото обещание в горната лента не се побират до първото. */ .oud-site .oud-topbar__item + .oud-topbar__item { display: none; } } /* 15.14.1 Под 980px Divi скрива целия контейнер на менюто (`.et_pb_menu .et_pb_menu__menu { display: none }`), защото там показва собствения си хамбургер. Max Mega Menu живее вътре в този контейнер – без това правило менюто изчезва напълно на телефон. Селекторът е с един клас повече от този на Divi, за да не се налага !important. */ @media (max-width: 980px) { .et-l--header .et_pb_menu .et_pb_menu__menu { display: flex; } } /* 15.15 Клавиатура – фокусът трябва да се вижда върху тъмната лента. */ .oud-site .et-l--header a:focus-visible, .oud-site .et-l--header button:focus-visible { outline: 2px solid var(--oud-gold); outline-offset: 2px; } /* 15.16 Уважава системната настройка за намалено движение. */ @media (prefers-reduced-motion: reduce) { .oud-site .et-l--header .et_pb_menu__logo img, .oud-site .et-l--header .oud-headerbar .et_pb_row, .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link, .oud-site #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link::before { transition: none; } #mega-menu-wrap-primary-menu .mega-sub-menu .mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover { transform: none; } } /* -------------------------------------------------------------------------- 16. Профил на аромата – обвивките на [oud_product_profile] -------------------------------------------------------------------------- Раздел 9 вече описва самите блокове – нотки, скала за трайност, кутията „Вдъхновен от“. Тук стоят само обвивките, които плъгинът OUD.BG Core извежда около тях. -------------------------------------------------------------------------- */ .oud-site .oud-product-profile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.75rem); } .oud-site .oud-detail-block { margin-bottom: 2.75rem; } .oud-site .oud-detail-block:last-child { margin-bottom: 0; } /* Заглавие с линия, която дояжда реда – както в прототипа. */ .oud-site .oud-detail-title { display: flex; align-items: center; gap: 0.875rem; margin: 0 0 1.25rem; font-family: var(--oud-serif); font-size: var(--oud-step-2); font-weight: 500; color: var(--oud-green); } .oud-site .oud-detail-title::after { flex: 1; height: 1px; background: var(--oud-line); content: ""; } .oud-site .oud-note-row__values { display: block; } .oud-site .oud-meta-card { margin-bottom: 0.625rem; padding: 1.125rem; border: 1px solid var(--oud-line); border-radius: var(--oud-radius); background: var(--oud-surface); } .oud-site .oud-meta-label { display: block; margin-bottom: 0.5rem; font-size: var(--oud-step-micro); font-weight: 600; letter-spacing: var(--oud-track-micro); text-transform: uppercase; color: var(--oud-gold-deep); } .oud-site .oud-inspired__direction { margin: 0; font-family: var(--oud-serif); font-size: var(--oud-step-3); line-height: 1.35; color: var(--oud-ink); } .oud-site .oud-story-quote { margin: 0 0 1.25rem; padding-left: 1.125rem; border-left: 2px solid var(--oud-gold); font-family: var(--oud-serif); font-size: var(--oud-step-3); font-style: italic; color: var(--oud-gold-deep); } @media (max-width: 980px) { .oud-site .oud-product-profile { grid-template-columns: 1fr; gap: 0; } } /* -------------------------------------------------------------------------- 17. Ефекти -------------------------------------------------------------------------- Всички се закачат по КЛАС, защото Divi дава поле „CSS Class“ на всеки модул, но не дава поле за data-атрибут. Класът е договорът между билдъра и този файл – Сабри пише име на клас в Divi и ефектът тръгва. Правила, които важат за целия раздел: · Малки амплитуди. Паралакс 32px, наклон 2.6°, появяване 24px. Над това ефектът спира да се усеща като материал и започва да се вижда като ефект. · Всичко минава през `prefers-reduced-motion`, а движенията с мишка – и през `pointer: fine`. На телефон pointermove идва от пръста. · Нищо не се анимира освен `transform` и `opacity`. Те не карат браузъра да прелива и преподрежда, останалото – да. Списък: 17.1 паралакс · 17.2 лента с брандове · 17.3 броене на числата · 17.4 наклон · 17.5 затъмняване на съседите и златен отблясък · 17.6 светлина под курсора · 17.7 наливане и начертаване -------------------------------------------------------------------------- */ /* 17.1 Паралаксът е на Divi – Scroll Effects → Vertical Motion върху модула със снимката. Вързан е за скрола, не за таймер, и се настройва в билдъра: от +6 до −6 при преминаване през средата на екрана. Нашата версия беше премахната на 22.08.2026. */ /* 17.2 Лента с брандовете. Съдържанието идва от WooCommerce ([product_brand_thumbnails]); oud-site.js го удвоява, за да няма шев. Половината ширина е един пълен цикъл – затова ключовият кадър е точно 50%. Отстоянието е `margin-right` на елемента, а НЕ `gap` на реда. При gap удвоеният списък има с една междина по-малко от два пъти единичния и -50% не съвпада – на всяко завъртане се вижда подскок. Посоката е отляво надясно, както е поръчана: започва изместена наляво и се връща. */ .oud-site .oud-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .oud-site .oud-marquee ul.brand-thumbnails { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; animation: oud-marquee var(--oud-marquee-duration, 42s) linear infinite; } .oud-site .oud-marquee ul.brand-thumbnails > li { flex: 0 0 auto; margin: 0 clamp(2rem, 5vw, 4.5rem) 0 0; padding: 0; list-style: none; } .oud-site .oud-marquee ul.brand-thumbnails > li::before { content: none; /* Woo слага bullet през ::before */ } .oud-site .oud-marquee .brand-thumbnail { display: block; width: auto; height: clamp(34px, 4.2vw, 52px); opacity: 0.5; filter: grayscale(1); transition: opacity var(--oud-base) var(--oud-ease), filter var(--oud-base) var(--oud-ease); } .oud-site .oud-marquee a:hover .brand-thumbnail, .oud-site .oud-marquee a:focus-visible .brand-thumbnail { opacity: 1; filter: none; } /* Спира при посочване – за да може човек да разгледа бранда, който е видял. */ .oud-site .oud-marquee:hover ul.brand-thumbnails, .oud-site .oud-marquee:focus-within ul.brand-thumbnails { animation-play-state: paused; } @keyframes oud-marquee { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } /* 17.3 Броенето е на Divi – модулът Number Counter. Числото, знакът за процент и заглавието са негови полета. Нашата версия беше премахната на 22.08.2026. Табличните цифри остават полезни, за да не подскача ширината по време на броенето – затова важат и за модула на Divi. */ .oud-site .et_pb_number_counter .percent-value, .oud-site .et_pb_number_counter .percent-sign { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* 17.4 Наклон на карта под мишката. Ъгълът идва от JS. Тук е само връщането в изходно положение и сянката, която подсказва, че картата се е повдигнала. */ .oud-site .oud-tilt { transition: transform 240ms var(--oud-ease), box-shadow 240ms var(--oud-ease); } .oud-site .oud-tilt:hover { box-shadow: var(--oud-shadow-md); } /* 17.5 Затъмняване на съседите – ПРЕМАХНАТО на 25.08.2026. Класът .oud-dim гасеше съседните карти до 50% непрозрачност. Върху тъмнозелено това сваляше текста под прага за четимост и секцията изглеждаше счупена, а не акцентирана. Заменено с раздел 21 – там се награждава посочената карта, а съседите не се пипат. Класът е махнат и от петте реда в Divi. */ /* Златен отблясък, който минава по картата при посочване. */ .oud-site .oud-sheen { position: relative; overflow: hidden; } .oud-site .oud-sheen::after { position: absolute; top: 0; left: -60%; z-index: 2; width: 42%; height: 100%; background-image: linear-gradient( 105deg, rgba(229, 184, 66, 0) 0%, rgba(229, 184, 66, 0.26) 45%, rgba(255, 252, 244, 0.42) 50%, rgba(229, 184, 66, 0.26) 55%, rgba(229, 184, 66, 0) 100% ); content: ""; pointer-events: none; transform: skewX(-14deg); } .oud-site .oud-sheen:hover::after, .oud-site .oud-sheen:focus-within::after { left: 130%; transition: left 0.85s var(--oud-ease); } /* 17.6 Светлина под курсора. За тъмнозелените секции – хедър, hero, промо ленти. JS записва само позицията в две променливи; рисуването е това правило. Слоят е под съдържанието, затова децата на секцията се вдигат на z-index 1. Без това позиционираният ::before ляга върху непозиционирания текст. */ .oud-site .oud-glow { position: relative; isolation: isolate; } .oud-site .oud-glow > * { position: relative; z-index: 1; } .oud-site .oud-glow::before { position: absolute; inset: 0; z-index: 0; background-image: radial-gradient( 420px circle at var(--oud-mx, 50%) var(--oud-my, 50%), rgba(229, 184, 66, 0.16) 0%, rgba(229, 184, 66, 0.05) 42%, rgba(229, 184, 66, 0) 68% ); content: ""; opacity: 0; pointer-events: none; transition: opacity var(--oud-base) var(--oud-ease); } .oud-site .oud-glow.is-cursor-in::before { opacity: 1; } /* 17.7 Наливане и начертаване. `.oud-fill` открива съдържанието отдолу нагоре – за флаконите по ароматни семейства. `inset(100% 0 0 0)` свива видимото до нула откъм горния ръб; докато отстъпът се връща към нула, съдържанието изплува нагоре. `.oud-draw` начертава линии и иска КОНТУРЕН SVG. Нашите флакони са запълнени форми – правилото стои готово, но днес не се ползва. */ .oud-site .oud-fill { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--oud-ease); } .oud-site .oud-fill.is-drawn { clip-path: inset(0 0 0 0); } .oud-site .oud-draw path, .oud-site .oud-draw line, .oud-site .oud-draw polyline, .oud-site .oud-draw circle, .oud-site .oud-draw rect, .oud-site .oud-draw ellipse { stroke-dasharray: var(--oud-draw-length); stroke-dashoffset: var(--oud-draw-length); transition: stroke-dashoffset 1.4s var(--oud-ease); transition-delay: var(--oud-draw-delay, 0ms); } .oud-site .oud-draw.is-drawn path, .oud-site .oud-draw.is-drawn line, .oud-site .oud-draw.is-drawn polyline, .oud-site .oud-draw.is-drawn circle, .oud-site .oud-draw.is-drawn rect, .oud-site .oud-draw.is-drawn ellipse { stroke-dashoffset: 0; } /* 17.8 Изключено движение. Не „по-малко движение“ – никакво. Лентата спира, наклонът изчезва, наливането показва всичко наведнъж. Съдържанието остава непокътнато. */ @media (prefers-reduced-motion: reduce) { .oud-site .oud-marquee ul.brand-thumbnails { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 1.5rem; animation: none; transform: none; } .oud-site .oud-tilt, .oud-site .oud-sheen::after, .oud-site .oud-glow::before { transition: none; } .oud-site .oud-sheen:hover::after { left: -60%; } .oud-site .oud-fill { clip-path: none; transition: none; } .oud-site .oud-draw path, .oud-site .oud-draw line, .oud-site .oud-draw polyline, .oud-site .oud-draw circle, .oud-site .oud-draw rect, .oud-site .oud-draw ellipse { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; } } /* -------------------------------------------------------------------------- 18. Уводен абзац на вътрешните страници -------------------------------------------------------------------------- Страниците „Брандове“, „Промоции“ и „Любими“ са чисти шорткодове – тяхното съдържание влиза през Post Content модула на Theme Builder шаблона, а не като отделен Divi модул. Затова билдърът няма как да ги оформи и правилото е тук. Класът се пише в самия абзац в редактора. -------------------------------------------------------------------------- */ .oud-site .oud-page-intro { max-width: 68ch; margin: 0 0 2rem; font-family: var(--oud-sans); font-size: var(--oud-step-body); line-height: var(--oud-lh-body); color: var(--oud-ink-muted); } /* -------------------------------------------------------------------------- Четене на глас – .oud-read-aloud Блокът се показва само ако устройството има български глас; JS-ът го разкрива. До тогава стои hidden, за да няма мигане при зареждане. -------------------------------------------------------------------------- */ .oud-read-aloud[hidden] { display: none !important; } .oud-read-aloud { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px 22px; border: 1px solid rgba( 229, 184, 66, 0.35 ); border-radius: 14px; background: var( --oud-surface, #FFFCF4 ); position: relative; overflow: hidden; } .oud-read-aloud::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var( --oud-read-progress, 0% ); background: rgba( 229, 184, 66, 0.16 ); transition: width 0.4s ease; pointer-events: none; } .oud-read-aloud > * { position: relative; z-index: 1; } .oud-read-aloud__play, .oud-read-aloud__stop { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var( --gcid-secondary-color, #E5B842 ); border-radius: 999px; padding: 10px 20px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; } .oud-read-aloud__play { background: var( --gcid-secondary-color, #E5B842 ); color: var( --gcid-primary-color, #062E1B ); } .oud-read-aloud__play:hover, .oud-read-aloud__play:focus-visible { background: var( --gcid-primary-color, #062E1B ); color: var( --oud-cream, #FBF5E5 ); } .oud-read-aloud__stop { background: transparent; color: var( --gcid-primary-color, #062E1B ); } .oud-read-aloud__stop:hover, .oud-read-aloud__stop:focus-visible { background: rgba( 6, 46, 27, 0.08 ); } /* Триъгълник за пускане, две чертички за пауза – без иконен шрифт. */ .oud-read-aloud__icon { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; } .oud-read-aloud__play.is-playing .oud-read-aloud__icon { width: 10px; height: 12px; border: 0; background: linear-gradient( to right, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px ); } .oud-read-aloud__status { font-family: 'Montserrat', sans-serif; font-size: 13px; color: var( --oud-muted, #6B6250 ); min-height: 1em; } .oud-read-aloud__note { flex-basis: 100%; font-family: 'Montserrat', sans-serif; font-size: 12px; line-height: 1.6; color: var( --oud-muted, #6B6250 ); margin: 0; } @media ( max-width: 480px ) { .oud-read-aloud { padding: 16px; gap: 10px; } .oud-read-aloud__play, .oud-read-aloud__stop { flex: 1 1 auto; justify-content: center; } } /* Съдържанието на Divi – да съвпадне с дизайн системата. */ .oud-article-toc .et_pb_table_of_contents { border: 1px solid rgba( 6, 46, 27, 0.12 ); border-radius: 14px; padding: 22px 26px; background: var( --oud-surface, #FFFCF4 ); } /* -------------------------------------------------------------------------- Съдържание на статия – .oud-toc Строи се от initArticleToc() в oud-site.js, защото нативният модул на Divi 5.11.1 не вижда заглавията на статията. -------------------------------------------------------------------------- */ .oud-toc[hidden] { display: none !important; } .oud-toc { border: 1px solid rgba( 6, 46, 27, 0.12 ); border-left: 3px solid var( --gcid-secondary-color, #E5B842 ); border-radius: 14px; padding: 22px 26px; background: var( --oud-surface, #FFFCF4 ); } .oud-toc__title { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var( --gcid-907fc01c-6027-4ed8-b2d2-8ba71ce8bc79, #7A5B1C ); margin: 0 0 12px; } .oud-toc__list { list-style: none; counter-reset: oud-toc; margin: 0; padding: 0; } /* Divi слага собствен `list-style` на всеки `ol` в съдържанието и той идва по-късно от правилото отгоре – затова номерата на браузъра се показваха ЗАЕДНО с нашия брояч: „1. 1.“, а при въпросите от ЧЗВ „9. –“. Поправката е по-висока специфичност, не !important. (23.09.2026) */ .oud-site .oud-toc .oud-toc__list, .oud-site .oud-toc ol.oud-toc__list { list-style: none; margin: 0; padding: 0; } .oud-toc__item { counter-increment: oud-toc; margin: 0; padding: 5px 0; line-height: 1.5; } .oud-toc__item--h3 { padding-left: 22px; } .oud-toc__item--h2::before { content: counter( oud-toc ) '.'; display: inline-block; min-width: 22px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: var( --gcid-secondary-color, #E5B842 ); } .oud-toc__item--h3::before { content: '\2014'; display: inline-block; min-width: 18px; color: rgba( 107, 98, 80, 0.6 ); } .oud-toc__item a { font-family: 'Montserrat', sans-serif; font-size: 15px; color: var( --gcid-primary-color, #062E1B ); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; } .oud-toc__item--h3 a { font-size: 14px; color: var( --oud-muted, #6B6250 ); } .oud-toc__item a:hover, .oud-toc__item a:focus-visible { color: var( --gcid-907fc01c-6027-4ed8-b2d2-8ba71ce8bc79, #7A5B1C ); border-bottom-color: currentColor; } /* Заглавието, към което скочихме, не трябва да се очертава с браузърна рамка. */ .oud-article-body h2:focus, .oud-article-body h3:focus { outline: none; } .oud-article-body h2[id], .oud-article-body h3[id] { scroll-margin-top: 120px; } /* Уводният абзац на статия. */ .oud-lead p, p.oud-lead { font-size: 19px; line-height: 1.75; color: var( --gcid-primary-color, #062E1B ); } @media ( max-width: 480px ) { .oud-toc { padding: 18px 20px; } .oud-lead p, p.oud-lead { font-size: 17px; } } /* -------------------------------------------------------------------------- 19. Решетката на Divi 5 – поправка на двойния отстъп между колоните -------------------------------------------------------------------------- Какво става: Divi 5 подрежда редовете си с flex и слага разстоянието през column-gap: var(--horizontal-gap) – 5.5%. Но старият CSS на Divi 4 още се зарежда и правилото .et_pb_gutters3 .et_block_row .et_pb_column { margin-right: 5.5%; } хваща и новите колони, защото шаблонът на Theme Builder обвива съдържанието в стар et_block_row. Разстоянието се плаща два пъти. Измерено на 25.08.2026 при екран 1280px, ред с ширина 1163px: | Колони | Преди | След | Колко трябва | |--------|-------|-------|--------------| | 5 | 130px | 182px | 182px | | 4 | 195px | 243px | 243px | | 3 | 303px | 345px | 345px | | 2 | 518px | 550px | 550px | Последната колона е взета от футъра, който е стар et_block_row и не е засегнат от бъга – тоест поправката връща точно решетката, която Divi сам смята за правилна, а не някаква наша стойност. Защо е тук, а не в Divi: проверени са три пътя – Gutter Width на реда (маха и разстоянието, колоните се долепват), ширина на колоната в Row settings (не отменя чуждия margin) и Divi → Theme Options → Custom CSS (същият код, но на място, което не влиза в архива на проекта). Причината е чужд CSS, който изтича върху новите модули. Обхватът е стеснен нарочно: само преки деца на et_flex_row. Старите редове (футър, стари страници) си запазват margin-а и не се пипат. -------------------------------------------------------------------------- */ @media ( min-width: 981px ) { .et_block_row .et_flex_row > .et_pb_column, .et_block_row .et_flex_row > .et_pb_column_inner { margin-right: 0 !important; } } /* -------------------------------------------------------------------------- 20. Редовете на Divi 5 не се подреждат един под друг на телефон -------------------------------------------------------------------------- Това е по-тежко от горното. Измерено на 25.08.2026 при екран 375px: нито един et_flex_row на началната страница не се подреждаше вертикално. Колоните оставаха една до друга и излизаха извън екрана: | Секция | Докъде стигаше | Екран | |-------------------------|----------------|-------| | Категории (4 колони) | 721px | 375px | | Защо OUD.bg (5 колони) | 621px | 375px | | Ароматни семейства (3) | 620px | 375px | Всичко след 375px е отрязано – не се скролва, просто не се вижда. Тоест на телефон последните две от петте причини бяха невидими, а повечето от посетителите ще идват от TikTok и Instagram, тоест от телефон. Старите редове (футърът) се подреждаха правилно – тоест поведението по-долу е същото, което Divi сам прави със старите си редове. Прагът 980px е същият, който ползва Divi. Проверено е и че хедърът не се засяга – неговите редове не са flex редове. -------------------------------------------------------------------------- */ @media ( max-width: 980px ) { .et_pb_row.et_flex_row { flex-direction: column; row-gap: var( --vertical-gap, 40px ); } .et_pb_row.et_flex_row > .et_pb_column, .et_pb_row_inner.et_flex_row > .et_pb_column_inner { width: 100% !important; } } /* -------------------------------------------------------------------------- 21. Езикът на посочването – един за целия сайт -------------------------------------------------------------------------- Преди 25.08.2026 посочването правеше едно нещо: затъмняваше съседните карти до 50% (клас oud-dim). Това е грешен подход по две причини: 1. Намален контраст не чете се като намерение, а като счупен текст. Върху тъмнозелено кремът на 50% пада под прага за четимост. 2. Наказва четири карти, за да отличи една. По-добре е да се награди посочената, отколкото да се гасят останалите. Новият език е един и същ всякъде: посоченото се повдига, получава сянка, рамката му се сгъстява и по горния ръб се изчертава златна черта отляво надясно. Съседите не се пипат. Всичко е в @media (hover: hover) and (pointer: fine) – на телефон и таблет hover състоянието залепва след допиране и картата остава повдигната. Там има :active – кратко натискане, което потвърждава допирането. Класовете се слагат на РЕДА в Divi (Row → Advanced → CSS Class): .oud-cards – колоните в реда са карти (рамка, фон, падинг) .oud-cards.oud-on-dark – същото, но върху тъмнозелена секция .oud-quiet – ред без карти: движи се само емблемата -------------------------------------------------------------------------- */ /* 21.1 Бутоните на Divi говорят същия език като бутоните на WooCommerce. Преди: 12 бутона с padding 4.8px/16px, 16px текст, радиус 3px – съвсем друг бутон от този в магазина. И нещо по-лошо: 26px височина при минимум 44px за докосване с пръст – тоест всеки бутон на сайта беше под нормата. Стрелката на Divi е изключена нарочно: тя се появява при hover и разширява падинга, така че текстът подскача. Подскачащ текст изглежда евтино. */ .oud-site .et_pb_button { position: relative; overflow: hidden; padding: 16px 30px !important; border-width: 1px !important; border-radius: var( --oud-radius ) !important; font-family: var( --oud-sans ) !important; font-size: var( --oud-step-micro ) !important; font-weight: 700 !important; letter-spacing: var( --oud-track-micro ) !important; text-transform: uppercase !important; line-height: 1 !important; transition: transform var( --oud-base ) var( --oud-ease ), box-shadow var( --oud-base ) var( --oud-ease ), background-color var( --oud-base ) var( --oud-ease ), border-color var( --oud-base ) var( --oud-ease ), color var( --oud-base ) var( --oud-ease ); } .oud-site .et_pb_button::after { display: none !important; } .oud-site .et_pb_button:hover { padding: 16px 30px !important; } /* Светлинната вълна – същата като на бутоните в магазина */ .oud-site .et_pb_button::before { /* Divi гаси това ::before с display: none (там стои иконата му, която не ползваме) */ display: block !important; content: ''; position: absolute; inset: 0; background-image: linear-gradient( 120deg, transparent 0%, rgba( 255, 255, 255, 0.28 ) 50%, transparent 100% ); transform: translateX( -100% ); transition: transform var( --oud-slow ) var( --oud-ease ); pointer-events: none; } /* 21.2 Картите – колоните в ред с клас .oud-cards. Златната черта се изчертава с scaleX отляво надясно – не се появява наведнъж. По-бавно от останалото (520ms), защото е единственото движение, което се гледа – останалото се усеща. */ .oud-site .oud-cards > .et_pb_column { position: relative; transition: transform var( --oud-base ) var( --oud-ease ), box-shadow var( --oud-base ) var( --oud-ease ), border-color var( --oud-base ) var( --oud-ease ), background-color var( --oud-base ) var( --oud-ease ); } .oud-site .oud-cards > .et_pb_column::before { content: ''; position: absolute; top: -1px; right: -1px; left: -1px; z-index: 2; height: 2px; background-color: var( --oud-gold ); transform: scaleX( 0 ); transform-origin: left center; transition: transform 520ms var( --oud-ease ); pointer-events: none; } .oud-site .oud-cards > .et_pb_column .et_pb_image img, .oud-site .oud-cards > .et_pb_column .et_pb_main_blurb_image img { transition: transform var( --oud-slow ) var( --oud-ease ); } .oud-site .oud-cards > .et_pb_column h2, .oud-site .oud-cards > .et_pb_column h3, .oud-site .oud-cards > .et_pb_column h4 { transition: color var( --oud-base ) var( --oud-ease ); } /* 21.3 Посочване – само там, където има мишка */ @media ( hover: hover ) and ( pointer: fine ) { .oud-site .oud-cards > .et_pb_column:hover, .oud-site .oud-cards > .et_pb_column:focus-within { transform: translateY( -6px ); box-shadow: var( --oud-shadow-md ); border-color: var( --oud-line-strong ); } .oud-site .oud-cards > .et_pb_column:hover::before, .oud-site .oud-cards > .et_pb_column:focus-within::before { transform: scaleX( 1 ); } .oud-site .oud-cards > .et_pb_column:hover .et_pb_image img, .oud-site .oud-cards > .et_pb_column:focus-within .et_pb_image img { transform: scale( 1.04 ); } .oud-site .oud-cards > .et_pb_column:hover h3, .oud-site .oud-cards > .et_pb_column:focus-within h3 { color: var( --oud-gold-deep ); } /* Върху тъмнозелено златото трябва да е ярко, а фонът се вдига с три стотни */ .oud-site .oud-cards.oud-on-dark > .et_pb_column:hover, .oud-site .oud-cards.oud-on-dark > .et_pb_column:focus-within { background-color: rgba( 251, 245, 229, 0.085 ); border-color: rgba( 229, 184, 66, 0.55 ); } .oud-site .oud-cards.oud-on-dark > .et_pb_column:hover h3, .oud-site .oud-cards.oud-on-dark > .et_pb_column:focus-within h3 { color: var( --oud-gold ); } /* Редът без карти – движи се само емблемата */ .oud-site .oud-quiet .et_pb_main_blurb_image img { transition: transform var( --oud-base ) var( --oud-ease ); } .oud-site .oud-quiet .et_pb_blurb:hover .et_pb_main_blurb_image img { transform: translateY( -5px ) scale( 1.08 ); } /* Бутоните */ .oud-site .et_pb_button:hover { transform: translateY( -2px ); box-shadow: var( --oud-shadow-md ); } .oud-site .et_pb_button:hover::before { transform: translateX( 100% ); } } /* 21.4 Връзките в текстовите модули на Divi. Проверено 25.08.2026: връзките във всеки текстов модул бяха без подчертаване и без разлика в цвета – тоест не се виждаше, че са връзки. Сега получават същото подчертаване, което расте отляво, като .oud-link – без да се пипа нито един модул в билдъра. Изключени са: бутоните, лентата с брандовете, съдържанието на статиите и плеърът – те си имат собствени стилове. */ .oud-site .et_pb_text a:not( .et_pb_button ), .oud-site .et_pb_blurb_description a:not( .et_pb_button ) { background-image: linear-gradient( currentColor, currentColor ); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; text-decoration: none; transition: background-size var( --oud-base ) var( --oud-ease ); } .oud-site .oud-marquee a, .oud-site .oud-toc a, .oud-site .oud-article-body a { background-image: none; } @media ( hover: hover ) and ( pointer: fine ) { .oud-site .et_pb_text a:not( .et_pb_button ):hover, .oud-site .et_pb_blurb_description a:not( .et_pb_button ):hover { background-size: 100% 1px; } } .oud-site .et_pb_text a:not( .et_pb_button ):focus-visible, .oud-site .oud-cards > .et_pb_column:focus-visible { outline: 2px solid var( --oud-gold ); outline-offset: 3px; } /* 21.5 Тъч – кратко натискане вместо hover. На телефон hover състоянието залепва след докосване и картата остава повдигната, докато не се докосне друго място. Затова там няма hover. */ @media ( hover: none ) { .oud-site .oud-cards > .et_pb_column { transition: transform 120ms ease-out; } .oud-site .oud-cards > .et_pb_column:active { transform: scale( 0.985 ); } .oud-site .et_pb_button:active { transform: scale( 0.97 ); } } /* 21.6 Изключено движение – състоянието остава, движението пада. Картата пак се отличава – със сянка и рамка, без да се повдига. */ @media ( prefers-reduced-motion: reduce ) { .oud-site .oud-cards > .et_pb_column, .oud-site .oud-cards > .et_pb_column::before, .oud-site .oud-cards > .et_pb_column .et_pb_image img, .oud-site .et_pb_button, .oud-site .et_pb_button::before, .oud-site .oud-quiet .et_pb_main_blurb_image img { transition: none; } .oud-site .oud-cards > .et_pb_column:hover, .oud-site .et_pb_button:hover, .oud-site .oud-quiet .et_pb_blurb:hover .et_pb_main_blurb_image img { transform: none; } .oud-site .oud-cards > .et_pb_column:hover::before { transform: scaleX( 1 ); } } /* -------------------------------------------------------------------------- 22. Телефон и таблет – поправки от одита на 25.08.2026 -------------------------------------------------------------------------- Всяка страница е измерена на 375px, 768px и 1280px. Тук са намерените проблеми и поправката на всеки, с числата. */ /* 22.1 Продуктовата решетка излизаше извън екрана на телефон. Измерено: при 375px страницата ставаше 412px – тоест 37px от всяка втора карта оставаха отрезани. Важи за /shop/ и за всички категории. Причината: `1fr` в CSS Grid е всъщност `minmax(auto, 1fr)`, а `auto` като минимум значи min-content. Бутонът „Добави в количката“ с главни букви и разредка иска около 198px на един ред – и колоната не можеше да се свие под това. `minmax(0, 1fr)` маха този минимум, а текстът на бутона се пренася. */ @media ( max-width: 767px ) { .oud-site .woocommerce ul.products { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } .oud-site .woocommerce ul.products li.product { min-width: 0; } .oud-site .woocommerce ul.products li.product a.button { width: 100%; padding: 14px 8px; letter-spacing: 0.08em; white-space: normal; line-height: 1.35; } } /* 22.2 Тестът „Открий своя аромат“. На 25.08.2026 се оказа, че тестът не е само 22px висок – той беше и сив, браузърно сив (`rgb(240,240,240)`), и не работеше. Плъгинът изкарваше класове `oud-quiz-option`, а CSS-ът и JS-ът търсеха `oud-quiz__opt` – две различни именувания, писани поотделно. Плъгинът е вдигнат на 1.4.1 и вече говори езика на JS-а. Тук е видът. */ .oud-site .oud-quiz { max-width: 760px; margin: 0 auto; text-align: center; } .oud-site .oud-quiz__count { margin: 0 0 14px; font-family: var( --oud-sans ); font-size: var( --oud-step-micro ); font-weight: 700; letter-spacing: var( --oud-track-micro ); text-transform: uppercase; color: var( --oud-gold-deep ); } .oud-site .oud-quiz h2 { margin: 0 0 26px; font-family: var( --oud-serif ); font-size: var( --oud-step-2 ); font-weight: 500; line-height: var( --oud-lh-heading ); color: var( --oud-green ); } .oud-site .oud-quiz__intro p, .oud-site .oud-quiz__desc p { max-width: 54ch; margin: 0 auto 26px; font-size: var( --oud-step-body ); line-height: var( --oud-lh-body ); color: var( --oud-ink-muted ); } .oud-site .oud-quiz__options { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 14px; text-align: left; } /* Височината е 64px нарочно – това е главното действие на страницата */ .oud-site .oud-quiz__opt { display: block; width: 100%; min-height: 64px; margin: 0; padding: 20px 22px; border: 1px solid var( --oud-line ); border-radius: var( --oud-radius ); background-color: var( --oud-surface ); font-family: var( --oud-sans ); font-size: 15px; font-weight: 500; line-height: 1.4; text-align: left; color: var( --oud-green ); cursor: pointer; } .oud-site .oud-quiz__start, .oud-site .oud-quiz__cta { display: inline-block; padding: 16px 30px; border: 1px solid var( --oud-gold ); border-radius: var( --oud-radius ); background-color: var( --oud-gold ); font-family: var( --oud-sans ); font-size: var( --oud-step-micro ); font-weight: 700; letter-spacing: var( --oud-track-micro ); text-transform: uppercase; line-height: 1; text-decoration: none; color: var( --oud-on-gold ); transition: background-color var( --oud-base ) var( --oud-ease ), border-color var( --oud-base ) var( --oud-ease ), transform var( --oud-base ) var( --oud-ease ); } .oud-site .oud-quiz__restart { display: inline-block; padding: 16px 20px; font-family: var( --oud-sans ); font-size: 14px; text-decoration: none; color: var( --oud-ink-muted ); } .oud-site .oud-quiz__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin: 26px 0 0; } .oud-site .oud-quiz__traits p { margin: 0 0 8px; font-family: var( --oud-sans ); font-size: var( --oud-step-micro ); font-weight: 700; letter-spacing: var( --oud-track-micro ); text-transform: uppercase; color: var( --oud-gold-deep ); } @media ( hover: hover ) and ( pointer: fine ) { .oud-site .oud-quiz__start:hover, .oud-site .oud-quiz__cta:hover { transform: translateY( -2px ); border-color: var( --oud-gold-deep ); background-color: var( --oud-gold-deep ); color: var( --oud-on-green ); } .oud-site .oud-quiz__restart:hover { color: var( --oud-green ); } } @media ( max-width: 600px ) { .oud-site .oud-quiz__options { grid-template-columns: 1fr; } } /* 22.3 Размерът на докосване – минимум 44px. Измерено на 375px: тестът 22px, трохите 20px, заглавията в блога 29px, „прочетете още“ 30px, телефонът и пощата във футъра 19px. 44px е прагът на Apple и на WCAG 2.5.5. Под него човек с пръст греши, а при нас грешката струва поръчка. Важи само за САМОСТОЯТЕЛНИ връзки. Връзка всред абзац не се раздува – това би разкъсало реда; самият WCAG я освобождава от правилото. */ @media ( max-width: 980px ) { .oud-site .et_pb_breadcrumbs--breadcrumb, .oud-site .rank-math-breadcrumb a, .oud-site .woocommerce-breadcrumb a { display: inline-block; padding: 12px 2px; } .oud-site .entry-title a, .oud-site .more-link { display: inline-block; padding: 8px 0; } .oud-site .post-meta a, .oud-site .entry-categories a, .oud-site .author a { display: inline-block; padding: 13px 4px; } /* Телефонът и пощата във футъра и в Контакти – самостоятелни редове */ .oud-site .et-l--footer a[href^='tel:'], .oud-site .et-l--footer a[href^='mailto:'], .oud-site .oud-contact-list a { display: inline-block; padding: 12px 0; } .oud-site .oud-toc__item a { display: inline-block; padding: 10px 0; } } /* 22.4 Минимален размер на текста. Дизайн системата ни казва в раздел 1, че 12px е абсолютният под. Одитът намери три места под него: горната лента (11px), броячът на количката (11px) и сивият текст в Контакти (10px). */ .oud-site .oud-topbar__item, .oud-site .oud-topbar__line, .oud-site .et_pb_menu__cart-count, .oud-site .muted { font-size: var( --oud-step-micro ); } /* 22.5 Три места, където Divi бие нашето !important по специфичност. Когато и двете правила са !important, решава специфичността, а Divi пише `.et_button_no_icon.et_button_icon_visible.et_button_left .et_pb_button` – четири класа. Затова тук класът е повторен – единственият начин да се надделее без да се пише ID в CSS. Засяга бутона под коментарите (беше 19px висок). */ .oud-site .et_pb_button.et_pb_button.et_pb_button.et_pb_button { padding: 16px 30px !important; font-size: var( --oud-step-micro ) !important; line-height: 1 !important; } /* Броячът на количката – 11px е под собствения ни под от 12px */ .oud-site .et_pb_menu .et_pb_menu__cart-count, .oud-site .et_pb_menu__icon .et_pb_menu__cart-count { font-size: var( --oud-step-micro ); line-height: 1.5; } /* Бутонът „Добави в любими“ на TI Wishlist – 26px на телефон */ @media ( max-width: 980px ) { .oud-site .tinvwl_add_to_wishlist_button { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 4px; } /* Връзките във футъра – менюта и правни страници */ .oud-site .et-l--footer a { display: inline-block; padding-top: 11px; padding-bottom: 11px; } .oud-site .et-l--footer .oud-marquee a, .oud-site .et-l--footer .et_pb_menu a { padding-top: 0; padding-bottom: 0; } } /* 22.6 Предпазен колан срещу хоризонтално преливане. На /kontakti/ колоната на хедъра излиза 402px в екран от 375px, защото Divi не е генерирал динамичния CSS файл за тази страница (виж въпрос A3). Това тук не лекува причината – само не позволява липсващ файл да изкарва страницата извън екрана. Причината се лекува с престрояване на страницата. */ .oud-site .et-l--header .et_pb_column, .oud-site .et-l--footer .et_pb_column { max-width: 100%; } /* 22.7 Страниците на каталога и връзките в банера за бисквитки. Цифрите на страниците бяха 32px, а връзките в банера – 18px. И двете се натискат с пръст, и двете бяха под 44px. */ .oud-site .woocommerce nav.woocommerce-pagination ul li a, .oud-site .woocommerce nav.woocommerce-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; } @media ( max-width: 980px ) { .oud-site .cmplz-links a, .oud-site .cmplz-documents a { display: inline-block; padding: 12px 6px; } } /* ===================================================================== 23. ОДИТ НА ТЕЛЕФОН И ТАБЛЕТ – 27.08.2026 ===================================================================== Мерено на 375px и 768px в композиращ браузър, а не в панел. Това е важно: панелът на браузъра не рисува кадри и там всеки