/* ========================================================================== 1. ШРИФТЫ, ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ И БАЗОВЫЕ СТИЛИ ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&family=Lora:ital,wght@0,400;0,600;1,400&display=swap'); :root { --cassiopeia-color-primary: #8a081d; /* Бордовый фон */ --cassiopeia-color-hover: #f9f6e5; /* Песочный ховер */ --cassiopeia-color-link: #dde426; /* Желтые ссылки */ --font-family-headings: 'Philosopher', sans-serif; --font-family-base: 'Lora', serif; } html { /* Оставляем системный размер (обычно 16px) для правильной работы rem */ scroll-behavior: smooth; } body { background-color: #8a081d; color: #fbb53a; font-family: var(--font-family-base), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; /* Сглаживание шрифтов */ -moz-osx-font-smoothing: grayscale; /* Добавлено сглаживание для Firefox на macOS */ } h1, h2, h3 { font-weight: 700; line-height: 1.2; /* У заголовков строка должна быть плотнее */ margin-top: 0; /* Сбрасываем верхний отступ для предсказуемой верстки */ margin-bottom: 0.5em; /* Отступ снизу зависит от размера самого заголовка */ } h1 { /* Мин: 28px, Растет адаптивно, Макс: 40px */ font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); letter-spacing: -0.02em; /* Легкое сужение для крупных заголовков */ } h2 { /* Мин: 24px, Растет адаптивно, Макс: 32px */ font-size: clamp(1.5rem, 3vw + 1rem, 2rem); letter-spacing: -0.01em; } h3 { /* Мин: 20px, Растет адаптивно, Макс: 24px */ font-size: clamp(1.25rem, 2vw + 1rem, 1.5rem); } p { margin-top: 0; margin-bottom: 1.25rem; /* Оптимальный отступ между абзацами */ } /* Вспомогательный класс для лид-абзацев (первый абзац статьи, крупнее обычного) */ p.lead { font-size: clamp(1.05rem, 0.5vw + 1rem, 1.25rem); color: #495057; } a, .header a, .mod-menu a { color: #dde426 !important; text-decoration: none !important; } a:hover, .header a:hover, .mod-menu a:hover { color: #f9f6e5 !important; /* НОВЫЙ ЦВЕТ: песочный */ text-decoration: none !important; } @media (max-width: 480px) { body { /* Корректируем базовый размер для самых маленьких экранов при необходимости */ font-size: 0.9375rem; /* ~15px для экономии места на экранах < 360px */ line-height: 1.5; } h1, h2, h3 { /* Автоматический перенос слишком длинных слов, чтобы они не ломали экран */ overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; /* Включает дефисы при переносе (нужен атрибут lang в HTML) */ } /* Уменьшаем отступы между секциями текста на мобильных, чтобы контент не был слишком разреженным */ p { margin-bottom: 1rem; } } .left.item-image img { padding-right: 2em } /* ========================================================================== 2. ССЫЛКИ, ХЛЕБНЫЕ КРОШКИ И НАВИГАЦИЯ (базовые стили a / .header a / .mod-menu a заданы в разделе 1 выше — дублирующийся блок убран) ========================================================================== */ .header { background: #8a081d !important; } .breadcrumb { color: #fbb53a !important; font-size: 16px !important; background: none; } .breadcrumb-item, .breadcrumb-item a, .breadcrumb-item + .breadcrumb-item::before { color: #fbb53a !important; } .breadcrumb-item a:hover { color: #f9f6e5 !important; } /* Главное меню */ .container-nav, .navbar, .navbar-nav { background: transparent !important; } .navbar-nav .nav-link { color: #dde426 !important; font-family: var(--font-family-headings) !important; font-size: 20px !important; } .navbar-nav .nav-link:hover, .navbar-nav .nav-item.active .nav-link { color: #ca0f32 !important; } .navbar-nav .dropdown-menu { background-color: #7d1f31 !important; border: 1px solid #dde426 !important; } .navbar-nav .dropdown-item { color: #dde426 !important; font-size: 16px !important; } .navbar-nav .dropdown-item:hover { background-color: transparent !important; color: #ca0f32 !important; } /* ========================================================================== 3. ЗАГОЛОВКИ И ЦИТАТЫ ========================================================================== */ h1, h2, h3, h4, h5, h6, .page-header h1, .page-header h2, .moduletable h3, .card-title { font-family: var(--font-family-headings) !important; color: #fbb53a !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; } h1 { font-size: 22px !important; } h2 { font-size: 19px !important; } h3 { font-size: 18px !important; } blockquote, .qtn { margin: 40px 40px 40px 60px !important; padding: 5px 5px 5px 15px !important; border-left: 7px #21BAFF solid !important; font-style: italic !important; } /* ========================================================================== 4. КЛАССИЧЕСКАЯ ВОСТОЧНАЯ ДВОЙНАЯ РАМКА ВОКРУГ БЛОКОВ ========================================================================== */ /* Двойная рамка вокруг основного контента (статей и блогов) */ .com-content-article, .blog { border: 4px double #dde426 !important; /* Изящная двойная золотая линия */ border-radius: 6px !important; padding: 24px !important; margin-bottom: 25px !important; background-color: rgba(138, 8, 29, 0.4) !important; /* Прозрачный фирменный бордовый */ box-shadow: inset 0 0 15px rgba(251, 181, 58, 0.15); /* Мягкое внутреннее свечение */ } /* Двойная рамка вокруг правых модулей (карточек меню и логина) */ .card { border: 4px double #dde426 !important; /* Двойная линия чуть тоньше для карточек */ background-color: rgba(138, 8, 29, 0.5) !important; color: #fbb53a !important; padding: 16px !important; margin-bottom: 20px !important; border-radius: 6px !important; } /* Декоративный точечный разделитель внутри модулей под заголовком */ .card-header, .card-title, .card h3 { background-color: transparent !important; color: #fbb53a !important; border-bottom: 3px dotted #dde426 !important; padding-bottom: 8px !important; text-align: center !important; text-transform: uppercase !important; } /* ========================================================================== 5. ФОРМА АВТОРИЗАЦИИ (БОРДОВЫЕ ПОЛЯ И КНОПКА) ========================================================================== */ .card .btn-primary { background-color: #ca0f32 !important; border: 1px solid #dde426 !important; color: #dde426 !important; font-family: var(--font-family-headings) !important; } .card .btn-primary:hover { background-color: #f9f6e5 !important; color: #8a081d !important; } .card .form-control, #mod-login-username, #mod-login-password, .card input { background-color: #580310 !important; border: 1px solid #dde426 !important; color: #f9f6e5 !important; } .card .input-group-text { background-color: #580310 !important; border: 1px solid #dde426 !important; color: #fbb53a !important; } .card .form-check-label, .card .login-links a { color: #fbb53a !important; } .card .login-links a:hover { color: #f9f6e5 !important; } .card .webauthn-btn, .w3c-webauthn-btn, .card .btn-outline-secondary { background-color: #580310 !important; border: 1px solid #dde426 !important; color: #fbb53a !important; } /* Изменение цвета даты и автора в материалах Joomla */ .article-info { color: #f2ce4b !important; /* Светло-желтый цвет текста */ } /* Изменение цвета иконок (календарь) */ .article-info dd i, .article-info dd span[class^="icon-"] { color: #f2ce4b !important; } /* Яркие и четкие стрелочки-разделители для Shanti */ .breadcrumb-item + .breadcrumb-item::before { content: "»" !important; /* Меняем на более заметную двойную стрелочку */ color: #f2ce4b !important; /* Чистый золотой цвет без прозрачности */ font-weight: bold !important; /* Делаем её чуть толще */ padding-left: 8px !important; padding-right: 8px !important; } /* Убираем начок геоположения, кастомные тире, если шаблон их добавляет */ .breadcrumb span.divider, .breadcrumb .divider-container { display: none !important; } /* Контейнер-изолятор для иконки (создает отступ для текста) */ .shanti-breadcrumbs-icon-wrap { display: inline-block !important; position: relative !important; width: 33px !important; /* 25px иконка + 8px отступ до текста */ height: 25px !important; vertical-align: middle !important; } /* Сама векторная иконка домика */ .shanti-breadcrumbs-icon { position: absolute !important; width: 25px !important; height: 25px !important; left: 0 !important; /* ГЛАВНЫЙ ПЕРЕКЛЮЧАТЕЛЬ ВЫСОТЫ ИКОНКИ */ top: -4px !important; /* Меняйте эту цифру, чтобы двигать домик вверх/вниз */ } /* Полностью скрываем старый пустой значок календаря шаблона */ .published span.icon-calendar, .modified span.icon-calendar, .published i, .modified i { display: none !important; } /* Увеличиваем только значок обновления в дате */ .shanti-date-icon { font-size: 17px !important; /* Делаем значок крупным и заметным */ /* font-weight: bold !important; /* Делаем линии стрелочки плотнее */ /*margin-right: 4px !important; /* Аккуратный отступ от слова Оновлено */ /* vertical-align: -2px !important; /* Опускаем увеличенный значок, чтобы он стоял ровно по центру букв */ display: inline-block !important; } /* Обычный аккуратный размер для остального текста строки */ .published, .modified, .com-content-category-blog__item-published { font-size: 13px !important; /* Буквы остаются компактными */ font-weight: normal !important; color: #f2ce4b !important; opacity: 0.85 !important; margin-top: 6px !important; display: inline-flex !important; align-items: center !important; } /* Измение кнопки ReadMore */ .readmore .btn-secondary { background-color: transparent !important; /* Убираем белый фон */ background-image: none !important; /* На случай, если есть градиент */ border-color: #f7ec7d !important; /* Цвет рамки (желтый, как иконка >) */ color: #f7ec7d !important; /* Цвет текста */ } /* Состояние ReadMore при наведении курсора (Hover) */ .readmore .btn-secondary:hover { background-color: #f7ec7d !important; /* При наведении фон становится желтым */ color: #7b0012 !important; /* Текст становится темно-красным (под цвет сайта) */ border-color: #f7ec7d !important; } /* Кнопки пагинации (Попередня / Наступна) */ .pagination a, .pagenav a, a.btn.btn-secondary { background-color: transparent !important; /* Убираем белый фон */ background-image: none !important; /* Отменяем градиенты */ border: 1px solid #dde426 !important; /* Делаем золотистую рамку */ color: #dde426 !important; /* Цвет текста и стрелочек */ } /* Эффект при наведении на кнопки пагинации */ .pagination a:hover, .pagenav a:hover, a.btn.btn-secondary:hover { background-color: #dde426 !important; /* Мягкая заливка золотом при наведении */ color: #7b0012 !important; /* Бордовый текст на золотом фоне */ border-color: #dde426 !important; } /* Кнопка Вверх в Cassiopeia — убираем белый фон */ #back-top.back-to-top-link { background-color: transparent !important; /* Убираем белый фон полностью */ background-image: none !important; border: 1px solid #dde426 !important; /* Золотистая рамка */ color: #dde426 !important; /* Золотистая стрелочка */ } /* Цвет иконки-стрелочки внутри кнопки */ #back-top.back-to-top-link .icon-arrow-up { color: #dde426 !important; } /* Поведение кнопки Вверх при наведении */ #back-top.back-to-top-link:hover, #back-top.back-to-top-link:focus { background-color: #dde426 !important; /* Золотой фон при наведении */ border-color: #dde426 !important; } /* Цвет стрелочки при наведении */ #back-top.back-to-top-link:hover .icon-arrow-up, #back-top.back-to-top-link:focus .icon-arrow-up { color: #7b0012 !important; /* Бордовая стрелочка на золотом фоне */ } /* Базовое состояние для ВСЕХ кнопок пагинации (активные, неактивные, стрелочки) */ .pagination .page-link { background-color: transparent !important; /* Полностью убираем белый фон */ background-image: none !important; border: 1px solid #dde426 !important; /* Золотистая рамка */ color: #dde426 !important; /* Золотистый цвет стрелок и цифр */ } /* Состояние при наведении (Hover) на доступные кнопки */ .pagination .page-item:not(.active):not(.disabled) .page-link:hover { background-color: #dde426 !important; /* Золотой фон при наведении */ color: #7b0012 !important; /* Бордовые стрелочки/цифры на золотом фоне */ border-color: #dde426 !important; } /* Стили для текущей активной страницы (например, цифра 2, где вы сейчас) */ .pagination .page-item.active .page-link { background-color: #dde426 !important; /* Заливаем золотом */ color: #7b0012 !important; /* Номер страницы становится бордовым */ border-color: #dde426 !important; } /* Стили для отключенных кнопок (например, стрелка "назад" на первой странице) */ .pagination .page-item.disabled .page-link { background-color: transparent !important; /* Прозрачный фон */ color: #dde426 !important; border-color: #dde426 !important; opacity: 0.4 !important; /* Делаем их слегка блеклыми, чтобы видно было, что они не активны */ } .pseo-score__content {border: 1px solid red;} .pseo-score__content ul.common-keywords li.btn-primary { color: red !important; } /* ========================================================================== 6. КОРЗИНА ========================================================================== */ .jlcc-item-count { color: #dde426 !important; } /* БАЗОВЫЕ СТИЛИ (для ПК) */ .cart-action-module { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: nowrap; border: 1px solid rgba(214, 164, 46, 0.25); border-radius: 10px; padding: 10px 16px; margin: 14px 0; /* Вариант 3: Теплый винно-шоколадный тон + легкий внутренний свет */ /*background: rgba(45, 12, 18, 0.5); */ background: rgba(67, 11, 21, 0.5); /*background: rgba (65, 12, 18, 0.5)*/ box-shadow: inset 0 0 15px rgba(214, 164, 46, 0.1); } .cart-action-info { flex: 1 1 auto; display: flex; align-items: baseline; gap: 8px; } .cart-action-title { font-size: 1.1em; font-weight: 700; color: #f5eed7; } .cart-action-pack { font-size: 0.85em; color: #bfa38a; } .cart-action-price { flex: 0 0 auto; font-size: 1em; white-space: nowrap; /* Вариант 1: Изящный вертикальный разделитель */ border-left: 1px solid rgba(214, 164, 46, 0.3); padding-left: 20px; } .cart-action-price-label { color: #d6a42e; margin-right: 4px; } .cart-action-price-value { font-weight: 700; color: #ffd700; } .cart-action-controls { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .cart-action-count { width: 45px; height: 34px; text-align: center; background: #000000; border: 1px solid #d6a42e; color: #f5eed7; border-radius: 4px; font-size: 0.95em; } .cart-action-button { width: 100%; margin-left: 15px; } .cart-action-button:hover { background: #b88d22; /* Мягкое благородное золото, чуть светлее базового */ box-shadow: 0 4px 12px rgba(214, 164, 46, 0.3); /* Объемная золотистая тень */ transform: translateY(-1px); /* Легкий интерактивный подъем кнопки вверх */ } .cart-action-button.jlcc-added { background-color: #ffd700 !important; /* Делаем золото чуть ярче на 2 секунды */ color: #000000 !important; border-color: #ffffff !important; /* Белая или ярко-золотая рамка */ /* Эффект дорогого неонового свечения */ box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), inset 0 0 10px rgba(255, 255, 255, 0.5) !important; } .cart-action-button.jlcc-in-cart { background: transparent !important; /* Убираем плотную заливку */ color: #d6a42e !important; /* Текст становится золотым */ border: 1px solid rgba(214, 164, 46, 0.5) !important; /* Аккуратная золотая рамка */ box-shadow: none !important; transform: none !important; } /* Эффект при наведении на контурную кнопку */ .cart-action-button.jlcc-in-cart:hover { background: rgba(214, 164, 46, 0.12) !important; /* Мягкий полупрозрачный отблеск внутри */ color: #ffd700 !important; border-color: #d6a42e !important; box-shadow: 0 2px 8px rgba(214, 164, 46, 0.2) !important; } /* Состояние кнопки, когда товар уже в корзине */ .cart-action-button.added { background: rgba(214, 164, 46, 0.15); /* Прозрачно-золотистый фон, кнопка "потухла" */ color: #bfa38a; /* Приглушенный песочный цвет текста */ border: 1px solid rgba(214, 164, 46, 0.3); cursor: default; /* Убираем палец при наведении */ pointer-events: none; /* Блокируем повторные клики */ box-shadow: none !important; /* Отменяем свечение */ transform: none !important; /* Отменяем подъем кнопки */ } /* Блокируем инпут количества для добавленного товара, чтобы не путать пользователя */ .cart-action-count:disabled { opacity: 0.5; cursor: not-allowed; } /* АДАПТИВ Корзины ДЛЯ МОБИЛЬНЫХ (экраны менее 768px) */ @media (max-width: 767px) { .cart-action-module { flex-wrap: wrap; gap: 12px; padding: 12px; } .cart-action-info { flex: 1 1 50%; flex-direction: column; gap: 2px; } .cart-action-price { flex: 1 1 auto; text-align: right; /* На мобильных убираем вертикальную черту, так как верстка перестраивается */ border-left: none; padding-left: 0; } .cart-action-controls { flex: 1 1 100%; justify-content: space-between; margin-top: 4px; } .cart-action-count { width: 55px; height: 38px; } .cart-action-button { flex: 1; height: 38px; font-size: 0.9em; } } @media (max-width: 500px) { .cart-action-buyblock .cart-action-price { white-space: collapse } } #header-cart-root * { text-align: center; } #articart-cart-tooltip .header-cart-tooltip-messengers { justify-content: space-around; } /* ------------------------------------------------------------------ */ /* ТУЛТИП КОРЗИНЫ — ПРЕМИУМ ВЕРСИЯ (Shanti Dark Luxury) */ /* ------------------------------------------------------------------ */ .header-cart-tooltip { --tt-x: 0px; --tt-y: 0px; position: absolute; top: 130%; right: 0; width: 320px; /* чуть шире для комфортного размещения мессенджеров */ background: #230a0f; border: 1.5px solid rgba(214, 164, 46, 0.5); border-radius: 8px; /* чуть более скругленные углы — премиум */ padding: 16px 18px 18px; color: #fff; font-size: 0.9em; line-height: 1.5; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(214, 164, 46, 0.15); /* тонкий внутренний свечение */ z-index: 999; opacity: 0; visibility: hidden; transform: translate(var(--tt-x), var(--tt-y)) scale(0.96); transform-origin: top right; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; backdrop-filter: blur(2px); /* легкое размытие фона */ } .header-cart-tooltip.is-active { opacity: 1; visibility: visible; transform: translate(var(--tt-x), var(--tt-y)) scale(1); } .header-cart-tooltip.no-anim { transition: none !important; } /* ------------------------------------------------------------------ */ /* ЗАГОЛОВОК БЛОКА "Бажаєте щось купити?" — ПРЕМИУМ */ /* ------------------------------------------------------------------ */ .header-cart-tooltip-text { margin: 0 0 12px 0; position: relative; } /* Декоративный золотой акцент сверху */ .header-cart-tooltip-text::before { content: ''; display: block; width: 40px; height: 2px; background: linear-gradient(90deg, rgba(214, 164, 46, 0.8), rgba(214, 164, 46, 0.2)); margin-bottom: 10px; border-radius: 2px; } .header-cart-tooltip-intro { display: block; font-size: 1.1em; font-weight: 600; color: #fff; margin-bottom: 4px; letter-spacing: 0.3px; } .header-cart-tooltip-connector { display: block; color: rgba(255, 255, 255, 0.7); font-size: 0.88em; margin-bottom: 2px; } .header-cart-tooltip-outro { display: block; color: rgba(255, 255, 255, 0.65); font-size: 0.85em; font-weight: 300; font-style: italic; height: auto; padding-bottom: 5px; } /* Золотая ссылка внутри текста */ .header-cart-tooltip-link { color: #e6b94a; text-decoration: none; font-weight: 600; border-bottom: 2px solid rgba(214, 164, 46, 0.3); transition: border-color 0.2s ease, color 0.2s ease; } .header-cart-tooltip-link:hover { color: #ffd700; border-bottom-color: rgba(214, 164, 46, 0.8); } /* ------------------------------------------------------------------ */ /* МЕССЕНДЖЕРЫ — ПРЕМИУМ: цветные кружки с белыми логотипами */ /* ------------------------------------------------------------------ */ .header-cart-tooltip-messengers { display: flex; justify-content: flex-start; gap: 14px; align-items: center; padding-top: 14px; margin-top: 4px; border-top: 1px solid rgba(214, 164, 46, 0.2); position: relative; } /* Декоративная золотая точка-разделитель */ .header-cart-tooltip-messengers::before { content: '✦'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); color: rgba(214, 164, 46, 0.3); font-size: 10px; background: #230a0f; padding: 0 8px; } /* Кожна іконка месенджера — овальна золотиста підсвітка навколо (не кольоровий бейдж під бренд — той прибрано, лишається тільки м'яке золоте сяйво). */ .header-cart-messenger-link { display: inline-flex; align-items: center; gap: 8px; justify-content: center; text-decoration: none; color: rgba(255, 255, 255, 0.8); flex-shrink: 0; padding: 4px 12px 4px 4px; border-radius: 30px; background: rgba(255, 255, 255, 0.04); /*background: rgba(214, 164, 46, 0.1);*/ border: 1px solid transparent; box-shadow: 0 0 14px rgba(214, 164, 46, 0.2); transition: box-shadow 0.25s ease, background 0.25s ease; } .header-cart-messenger-link:hover { background: rgba(255, 255, 255, 0.08); /*background: rgba(214, 164, 46, 0.16);*/ border-color: rgba(214, 164, 46, 0.2); color: #fff; text-decoration: none; transform: translateY(-1px); /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);*/ box-shadow: 0 0 20px rgba(214, 164, 46, 0.32); } /* Просто зона іконки 44×44 (мінімальний розмір для зручного натискання на телефоні) — без кружка-підложки й без фону: сам силует і є іконкою. */ .header-cart-messenger-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; transition: transform 0.25s ease; } .header-cart-messenger-link:hover .header-cart-messenger-icon { transform: scale(1.08); } /* SVG заповнює всю область іконки (44×44), а не маленький значок посередині. */ .header-cart-messenger-icon svg { width: 44px; height: 44px; display: block; } /* Колір за замовчуванням — стандартний колір тексту тултипа (не бренд-кольори, без фону). `svg *` потрібен окремо: у Viber fill стоїть на вкладеному , на рівень глибше, ніж у Telegram/WhatsApp (де fill прямо на ) — правило на самому туди не докотиться. */ .header-cart-messenger-icon svg, .header-cart-messenger-icon svg * { fill: rgba(245, 236, 224, 0.85); transition: fill 0.25s ease; } /* При наведенні — м'яка пастельна заливка силуету під кожен месенджер. */ .header-cart-messenger-link.messenger-whatsapp:hover .header-cart-messenger-icon svg, .header-cart-messenger-link.messenger-whatsapp:hover .header-cart-messenger-icon svg * { fill: #B5E6C3; } .header-cart-messenger-link.messenger-viber:hover .header-cart-messenger-icon svg, .header-cart-messenger-link.messenger-viber:hover .header-cart-messenger-icon svg * { fill: #D4C9F0; } .header-cart-messenger-link.messenger-telegram:hover .header-cart-messenger-icon svg, .header-cart-messenger-link.messenger-telegram:hover .header-cart-messenger-icon svg * { fill: #C2E0F4; } /* появился эффект рамки вокруг свечения*/ a.header-cart-messenger-link.messenger-whatsapp:hover { color: #B5E6C3 !important; } a.header-cart-messenger-link.messenger-viber:hover { color: #D4C9F0 !important; } a.header-cart-messenger-link.messenger-telegram:hover { color: #C2E0F4 !important; } /* Текст рядом с иконкой */ .header-cart-messenger-label { font-weight: 400; font-size: 0.85em; color: rgba(255, 255, 255, 0.75); transition: color 0.2s ease; white-space: nowrap; } .header-cart-messenger-link:hover .header-cart-messenger-label { color: #fff; } /* ------------------------------------------------------------------ */ /* АНИМАЦИЯ НАЖАТИЯ (оставляем вашу, но слегка улучшаем) */ /* ------------------------------------------------------------------ */ @keyframes messengerPop { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 65% { transform: scale(0.92); } 100% { transform: scale(1); } } .header-cart-messenger-link.messenger-pop .header-cart-messenger-icon { animation: messengerPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* ------------------------------------------------------------------ */ /* СТИЛИ ДЛЯ ТОВАРОВ В КОРЗИНЕ (если есть) — ПРЕМИУМ */ /* ------------------------------------------------------------------ */ .header-cart-items { max-height: 180px; overflow-y: auto; margin: 8px 0 10px; padding-right: 4px; } .header-cart-items::-webkit-scrollbar { width: 3px; } .header-cart-items::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); border-radius: 2px; } .header-cart-items::-webkit-scrollbar-thumb { background: rgba(214, 164, 46, 0.35); border-radius: 2px; } .header-cart-item { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 0.85em; } .header-cart-item:last-child { border-bottom: none; } .header-cart-item-name { color: rgba(255, 255, 255, 0.85); flex: 1; padding-right: 8px; } .header-cart-item-price { color: rgba(214, 164, 46, 0.85); font-weight: 500; white-space: nowrap; } .header-cart-item-remove { background: none; border: none; color: rgba(255, 255, 255, 0.2); cursor: pointer; padding: 2px 4px; margin-left: 6px; transition: color 0.2s ease; font-size: 1.1em; line-height: 1; } .header-cart-item-remove:hover { color: #e87a7a; } /* ------------------------------------------------------------------ */ /* ИТОГО И КНОПКА ОФОРМЛЕНИЯ — ПРЕМИУМ */ /* ------------------------------------------------------------------ */ .header-cart-total { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid rgba(214, 164, 46, 0.15); margin-top: 2px; font-weight: 500; } .header-cart-total-label { color: rgba(255, 255, 255, 0.6); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.5px; } .header-cart-total-price { color: #ffd700; font-size: 1.1em; font-weight: 600; } .header-cart-checkout { display: block; width: 100%; margin-top: 12px; padding: 10px 0; background: linear-gradient(135deg, rgba(214, 164, 46, 0.2), rgba(214, 164, 46, 0.05)); border: 1px solid rgba(214, 164, 46, 0.3); border-radius: 4px; color: #fff; font-size: 0.9em; font-weight: 500; text-align: center; cursor: pointer; transition: all 0.25s ease; text-decoration: none; letter-spacing: 0.3px; } .header-cart-checkout:hover { background: linear-gradient(135deg, rgba(214, 164, 46, 0.3), rgba(214, 164, 46, 0.1)); border-color: rgba(214, 164, 46, 0.6); color: #fff; text-decoration: none; box-shadow: 0 4px 20px rgba(214, 164, 46, 0.1); } /* Кнопка "пустая корзина" — оформить красиво */ .header-cart-empty { color: rgba(255, 255, 255, 0.4); text-align: center; padding: 14px 0 8px; font-size: 0.85em; font-style: italic; } /* ------------------------------------------------------------------ */ /* МОБИЛЬНАЯ АДАПТАЦИЯ */ /* ------------------------------------------------------------------ */ @media (max-width: 480px) { .header-cart-tooltip { width: 270px; right: -10px; padding: 14px 14px 16px; } .header-cart-messenger-link { padding: 5px 10px; } .header-cart-messenger-icon { width: 44px; height: 44px; } .header-cart-messenger-icon svg { width: 44px; height: 44px; } .header-cart-messenger-label { font-size: 0.75em; } .header-cart-tooltip-intro { font-size: 1em; } .header-cart-total-price { font-size: 1em; } .header-cart-tooltip-messengers { gap: 8px; flex-wrap: wrap; } /* Убираем декоративную звездочку на мобильных */ .header-cart-tooltip-messengers::before { display: none; } } /*================================= ================================== =================================*/ /* * Адаптивные карточки товаров на странице оформления заказа (#cart-from-storage). * Заменяют жёсткую таблицу, которая на узких экранах вылезала за пределы блока * при длинных названиях товаров. Добавьте в media/plg_content_contentcart/css/jlcontentcart.css * (или отдельным файлом через joomla.asset.json) — рядом с header-cart.css. */ .cc-cart-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .cc-cart-item { border: 1px solid rgba(214, 164, 46, 0.35); border-radius: 6px; padding: 10px 14px; background: rgba(255, 255, 255, 0.03); } .cc-cart-item-row { display: flex; align-items: center; gap: 10px; } /* Строка 1: название + бренд слева, кнопка удаления справа */ .cc-cart-item-row-main { justify-content: space-between; } .cc-cart-item-title { flex: 1 1 auto; min-width: 0; /* критично: без этого длинное название растягивает карточку вместо переноса */ } .cc-cart-item-name { font-weight: 700; text-decoration: none; color: inherit; word-break: break-word; } .cc-cart-item-brand { font-weight: 400; opacity: 0.75; font-size: 0.9em; margin-left: 4px; } /* Кнопка-иконка удаления вместо текста "Удалить" — корзина/мусорка однозначно читается как "удалить товар", отдельный текст был избыточен. */ .cc-cart-item-remove { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: inherit; opacity: 0.7; transition: opacity 0.15s ease, background-color 0.15s ease; } .cc-cart-item-remove:hover { opacity: 1; background: rgba(255, 59, 48, 0.12); } /* Строка 2: характеристики (pack) — мелким приглушённым текстом */ .cc-cart-item-row-pack { margin-top: 2px; } .cc-cart-item-pack { font-size: 0.82em; opacity: 0.65; } /* Строка 3: количество / цена за единицу / сумма */ .cc-cart-item-row-finance { margin-top: 8px; flex-wrap: wrap; justify-content: space-between; gap: 6px 0; } .cc-cart-item-qty { width: 60px; padding: 4px; text-align: center; flex: 0 0 auto; } .cc-cart-item-unit-price { font-size: 0.88em; opacity: 0.75; flex: 1 1 auto; text-align: left; padding-left: 1em } .cc-cart-item-sum { flex: auto; order: 3; font-weight: 700; flex: 0 0 auto; text-align: right; } /* Итоговая сумма заказа под списком карточек */ .cc-cart-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; border-top: 2px solid rgba(214, 164, 46, 0.4); font-size: 1.1em; font-weight: 700; } /* На самых узких экранах: цена за единицу переносится на отдельную строку, чтобы количество и сумма не сжимались друг к другу */ @media (max-width: 420px) { .cc-cart-item-unit-price { flex: 0 0 auto; order: 2; text-align: right; margin-top: 4px; } .cc-cart-item-sum { flex: auto !important; } } /* ------------------------------------------------------------------ */ /* ФОРМА ОФОРМЛЕННЯ — розбита на 2 візуальні блоки, щоб не виглядала */ /* переобтяженою полями (Контактні дані / Доставка + примітка) */ /* ------------------------------------------------------------------ */ .jlcc-form-block { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(214, 164, 46, 0.2); } .jlcc-form-block:first-child { margin-top: 0; padding-top: 0; border-top: none; } /* Єдина ширина полів в обох блоках форми — щоб поля доставки не розтягувались на весь екран, а виглядали так само, як Ім'я/email/телефон. Трохи більші за замовчуванням: вище і довше, щоб не відчувалось затиснутості. */ .jlcc-form-block input[type="text"], .jlcc-form-block input[type="email"], .jlcc-form-block input[type="tel"], .jlcc-form-block select, .jlcc-form-block textarea { width: 100%; max-width: 340px; min-height: 46px; padding: 12px 14px; font-size: 1em; box-sizing: border-box; display: block; margin-left: auto; margin-right: auto; background: #000000; border: 1px solid #d6a42e; color: #f5eed7; border-radius: 4px; } .jlcc-form-block textarea { min-height: 90px; resize: vertical; } /* Обёртки полей (простые
в cart.php) и текст меток — центрируем, иначе label/paragraph остаются прижаты к левому краю, даже когда сам input уже центрирован через margin:auto выше. */ .jlcc-form-block > div { text-align: center; } .jlcc-label { display: block; font-size: 0.85em; margin-bottom: 4px; text-align: center; color: rgba(245, 238, 215, 0.7); } .jlcc-delivery-fixed-label { font-size: 0.9em; margin: 4px 0 10px; text-align: center; color: #f5eed7; } .jlcc-delivery-group { margin-top: 8px; display: grid; justify-items: center; gap: 8px; } /* ------------------------------------------------------------------ */ /* Кнопки "назад/у каталог" одразу після суми замовлення (перед */ /* полями форми), а нижче — заклик "Готові оформити замовлення?" */ /* Все по центру. DOM-порядок лишається title → subtitle → кнопки */ /* (так природньо читає скрінрідер і клавіатурна навігація), а */ /* видима черговість "кнопки, потім фрази" задана через flex order. */ /* ------------------------------------------------------------------ */ .jlcc-order-intro { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 14px 0 22px; padding-top: 14px; border-top: 1px solid rgba(214, 164, 46, 0.2); } .jlcc-order-intro-title { order: 2; font-size: 1.25em; font-weight: 700; color: #f5eed7; margin: 14px 0 4px; } .jlcc-order-intro-subtitle { order: 3; font-size: 0.88em; color: rgba(245, 238, 215, 0.65); margin: 0; } .jlcc-continue-shopping-actions { order: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } /* Всі кнопки форми оформлення (і ці дві, і кнопка "Оформити замовлення" нижче) в одному стилі з кнопкою "Купити" у статті — золота пігулка. */ .jlcc-continue-shopping-actions .jlcc-button, .jlcc-form-block .jlcc-button, .jlcc-form-block input[type="submit"].jlcc-button { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; min-height: 44px; padding: 0 18px; background: #d6a42e !important; color: #000000 !important; border: none !important; border-radius: 4px; font-weight: 700; text-transform: uppercase; font-size: 0.8em; letter-spacing: 0.5px; text-decoration: none; cursor: pointer; transition: background 0.2s, box-shadow 0.2s, transform 0.2s; } .jlcc-order-intro .jlcc-button:hover, .jlcc-form-block .jlcc-button:hover, .jlcc-form-block input[type="submit"].jlcc-button:hover { background: #b88d22 !important; box-shadow: 0 4px 12px rgba(214, 164, 46, 0.3); transform: translateY(-1px); text-decoration: none; } @media (max-width: 480px) { .jlcc-continue-shopping-actions { flex-direction: column; width: 100%; } .jlcc-order-intro .jlcc-button, .jlcc-form-block .jlcc-button { width: 100%; } .jlcc-form-block input[type="text"], .jlcc-form-block input[type="email"], .jlcc-form-block input[type="tel"], .jlcc-form-block select, .jlcc-form-block textarea { max-width: 100%; } } /* ------------------------------------------------------------------ */ /* ПЛАШКА "ЗАМОВЛЕННЯ ПРИЙНЯТО" — стандартне повідомлення Joomla */ /* (enqueueMessage) перефарбоване під стиль сайту замість дефолтного */ /* bootstrap-алерту. Якщо шаблон сайту виводить повідомлення іншою */ /* розміткою — уточніть реальний селектор через інспектор браузера, */ /* тут покриті обидва поширені варіанти (Joomla 4 і Joomla 5). */ /* ------------------------------------------------------------------ */ #system-message-container .alert-success, joomla-alert[type="success"] { background: linear-gradient(135deg, #3a1f1f, #2a1414); border: 1px solid rgba(214, 164, 46, 0.4); color: #f5ece0; border-radius: 8px; padding: 14px 18px; } #system-message-container .alert-success .alert-heading, joomla-alert[type="success"] strong { color: #d6a42e; } #system-message-container .alert-error, #system-message-container .alert-danger, joomla-alert[type="danger"] { background: linear-gradient(135deg, #3a1f1f, #2a1414); border: 1px solid rgba(214, 60, 46, 0.5); color: #f5ece0; border-radius: 8px; padding: 14px 18px; } /* ====================================*/ /* Категории */ /* ====================================*/ .desc-intro-img {margin: 0 auto} /* ========================================================================== ВЕРХНЕЕ ОПИСАНИЕ КАТЕГОРИИ В РАМОЧКЕ ========================================================================== */ .category-desc { margin-bottom: 40px !important; /* Отступ снизу до товаров, чтобы разгрузить кашу */ padding: 24px !important; /* Внутренние отступы, как в нижнем блоке */ background-color: transparent !important; /* Тонкая золотая рамка в один стиль с нижним блоком */ border: 1px solid #dde426 !important; border-radius: 6px !important; /* Стандартный цвет и размер текста */ color: #fbb53a !important; font-size: 18px !important; /* Базовый крупный размер вашего сайта */ line-height: 24px !important; } /* Делаем главный заголовок внутри верхнего блока красивым */ .category-desc h1, .category-desc h2 { color: #fbb53a !important; margin-top: 0 !important; /* Убираем отступ сверху */ margin-bottom: 15px !important; font-size: 22px !important; /* Крупный размер для акцента */ text-transform: uppercase !important; /* Оставляем заглавные буквы для главного заголовка */ } /* ========================================================================== НИЖНЕЕ SEO-ОПИСАНИЕ В ИЗЯЩНОЙ РАМОЧКЕ (БЕЗОПАСНО ДЛЯ GOOGLE) ========================================================================== */ .category-bottom-field { margin-top: 50px !important; /* Отступ сверху от каталога товаров */ padding: 24px !important; /* Внутренние отступы, чтобы текст не лип к рамке */ background-color: transparent !important; /* Без плотного выделения фоном */ /* Изящная золотая рамка в стиле вашего сайта, но тоньше (в 1 линию вместо двойной) */ border: 1px solid #dde426 !important; border-radius: 6px !important; /* Скругление как у блоков выше */ /* Стандартный безопасный цвет и размер текста */ color: #fbb53a !important; font-size: 15px !important; /* Чуть компактнее основного текста */ line-height: 22px !important; } /* Стилизуем заголовки внутри этой рамки */ .category-bottom-field h2, .category-bottom-field h3 { color: #fbb53a !important; font-size: 17px !important; margin-top: 0 !important; /* Убираем отступ у самого первого заголовка */ margin-bottom: 12px !important; text-transform: none !important; /* Отменяем Caps Lock, чтобы заголовок не кричал */ letter-spacing: 0.5px !important; } /* Списки преимуществ */ .category-bottom-field ul { list-style-type: none !important; padding-left: 0 !important; margin-top: 10px !important; margin-bottom: 15px !important; } .category-bottom-field ul li { position: relative !important; padding-left: 20px !important; margin-bottom: 8px !important; color: #fbb53a !important; } /* Скромные маркеры списков в цвет рамки */ .category-bottom-field ul li::before { content: "•" !important; color: #dde426 !important; font-size: 1.2rem !important; position: absolute !important; left: 0 !important; top: -2px !important; } /* Жирный текст внутри списков */ .category-bottom-field ul li strong { color: #fbb53a !important; font-weight: 600 !important; } /* ========================================================================== ОФОРМЛЕНИЕ КАТАЛОГА ТОВАРОВ (СТАТЕЙ) В СЕТКУ ========================================================================== */ /* 1. Убираем внешнюю двойную рамку ТОЛЬКО на странице блога категории */ .blog { border: none !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; } /* 2. Делаем контейнер товаров сеткой (Grid) */ .com-content-category-blog__items { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important; gap: 30px !important; /* Отступы между карточками товаров */ margin-top: 30px !important; margin-bottom: 40px !important; } /* 3. Оформляем каждую статью (товар) как отдельную изящную карточку */ .com-content-category-blog__item { background-color: rgba(138, 8, 29, 0.3) !important; /* Фирменный полупрозрачный бордовый */ border: 1px solid rgba(222, 228, 38, 0.3) !important; /* Тонкая золотая рамка */ border-radius: 6px !important; padding: 20px !important; /* Вертикальное выравнивание элементов внутри карточки */ display: flex !important; flex-direction: column !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* Эффект при наведении мыши на карточку товара */ .com-content-category-blog__item:hover { border-color: #dde426 !important; /* Рамка становится ярко-золотой */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) !important; /* Легкая тень */ } /* 4. Стили внутри карточки для компактности */ .com-content-category-blog__item .page-header h2 { font-size: 18px !important; /* Делаем заголовки товаров чуть компактнее */ margin-bottom: 10px !important; } /* Центрируем картинки товаров в карточке */ .com-content-category-blog__item img { max-width: 100% !important; height: auto !important; display: block !important; margin: 0 auto 15px !important; border-radius: 4px !important; } /* ===== Continue shopping / back to catalog — text links (not buttons) ===== Задача: дать пользователю возможность вернуться к покупкам, но НЕ создавать визуальную конкуренцию с основным действием "Оформити замовлення". Поэтому: маленький шрифт, приглушённый (не акцентный) золотой, без фона/рамки, подчёркивание только на hover — стандартный визуальный код "второстепенное действие". */ .jlcc-continue-shopping-links { display: flex; justify-content: flex-end; /* прижаты к правому краю, под шапкой блока корзины */ gap: 24px; margin: 4px 0 16px; flex-wrap: wrap; } .jlcc-link { /* сброс нативных стилей