/* ========================================================================= HOBBY GATE — стили для шаблона uCoz Все классы с префиксом hg- во избежание конфликтов с системными классами uCoz (layer1.css и т.п.). Сброс стилей скопирован ТОЛЬКО внутри .hg-wrap, чтобы не затронуть остальные системные блоки страницы (админ-панель, всплывающие окна uCoz и т.д.). ========================================================================= */ /* ---------- 0. Поля страницы по умолчанию ---------- Браузерный User-Agent stylesheet даёт отступ ~8px по умолчанию. .hg-wrap-сброс ниже его не трогает (он только внутри .hg-wrap), поэтому обнуляем явно здесь — иначе сайт выглядит "в рамке" с белым полем по краям. */ html, body { margin: 0; padding: 0; } /* ---------- 1. Локальный сброс (только внутри .hg-wrap) ---------- */ .hg-wrap, .hg-wrap *, .hg-wrap *::before, .hg-wrap *::after { margin: 0; padding: 0; box-sizing: border-box; border: 0; font: inherit; vertical-align: baseline; text-decoration: none; list-style: none; color: inherit; background: none; -webkit-tap-highlight-color: transparent; } .hg-wrap { display: block; width: 100%; } .hg-wrap a { cursor: pointer; } .hg-wrap button, .hg-wrap input, .hg-wrap select { font-family: inherit; } .hg-wrap img, .hg-wrap svg { display: block; max-width: 100%; } .hg-wrap ul, .hg-wrap ol { list-style: none; } .hg-wrap h1, .hg-wrap h2, .hg-wrap h3, .hg-wrap h4 { font-weight: 700; } /* ---------- 2. Переменные ---------- */ .hg-wrap { --hg-navy: #18202e; --hg-navy-soft: #232d3f; --hg-accent: #ff3100; --hg-accent-dark: #d92700; --hg-bg: #ffffff; --hg-bg-alt: #f4f5f7; --hg-border: #e6e8ec; --hg-text: #18202e; --hg-muted: #6b7280; --hg-green: #1a9c4b; font-family: Arial, Helvetica, sans-serif; color: var(--hg-text); background: var(--hg-bg-alt); font-size: 14px; line-height: 1.4; } .hg-container { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* ---------- 3. Общие элементы ---------- */ .hg-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 700; white-space: nowrap; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .hg-btn--solid { background: var(--hg-accent); color: #fff; } .hg-btn--solid:hover { background: var(--hg-accent-dark); } .hg-btn--outline { background: transparent; border: 1.5px solid var(--hg-navy); color: var(--hg-navy); } .hg-btn--outline:hover { background: var(--hg-navy); color: #fff; } .hg-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; } .hg-tag--new { background: var(--hg-accent); color: #fff; } .hg-tag--sale { background: var(--hg-navy); color: #fff; } /* ========================================================================= ВЕРХНЯЯ ЧАСТЬ ========================================================================= */ .hg-header { background: #fff; } /* служебная строка */ .hg-topline { background: var(--hg-navy); color: #cfd4dc; font-size: 12.5px; } .hg-topline__row { display: flex; align-items: center; justify-content: space-between; height: 32px; gap: 16px; } .hg-topline__nav { display: flex; gap: 20px; } .hg-topline__nav a:hover, .hg-topline__right a:hover { color: #fff; } .hg-topline__right { display: flex; align-items: center; gap: 18px; } .hg-topline__phone { font-weight: 700; color: #fff; } .hg-topline__lang { color: #fff; font-weight: 700; } /* логотип */ .hg-logo { display: flex; align-items: center; gap: 10px; } .hg-logo__icon { width: 34px; height: 34px; flex: none; background: var(--hg-navy); -webkit-mask-image: var(--hg-mask-grid, none); border-radius: 4px; position: relative; } .hg-logo__icon::before { content: ""; position: absolute; inset: 6px; background-image: linear-gradient(#fff 1.5px, transparent 1.5px), linear-gradient(90deg, #fff 1.5px, transparent 1.5px); background-size: 7px 7px; } .hg-logo__text { font-size: 21px; font-weight: 800; letter-spacing: .5px; color: var(--hg-navy); text-transform: uppercase; } .hg-logo__text b { font-weight: 800; color: var(--hg-accent); } .hg-logo--light .hg-logo__icon { background: #fff; } .hg-logo--light .hg-logo__icon::before { background-image: linear-gradient(var(--hg-navy) 1.5px, transparent 1.5px), linear-gradient(90deg, var(--hg-navy) 1.5px, transparent 1.5px); } .hg-logo--light .hg-logo__text { color: #fff; } /* шапка: каталог + поиск + иконки */ /* HERO: единый градиентный блок для строки поиска, быстрых ссылок и баннера акции. .hg-hero__bg — декоративный фон (z-index:0), .hg-hero__content — весь функциональный контент поверх него (z-index:1). Внутри содержимого баннер акции идёт ПОСЛЕ строки поиска/иконок в разметке, поэтому графика акции физически ниже — не перекрывает поиск и кнопки аккаунта/корзины. */ .hg-hero { position: relative; } .hg-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 0 0 12px 12px; background: linear-gradient(120deg, var(--hg-navy) 0%, #2a3550 50%, var(--hg-accent-dark) 145%); } .hg-hero__bg::before { content: ""; position: absolute; top: -70px; right: -30px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%); border-radius: 50%; } .hg-hero__bg::after { content: ""; position: absolute; bottom: -90px; right: 140px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(255,49,0,.20), transparent 70%); border-radius: 50%; } .hg-hero__content { position: relative; } .hg-hero__promo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 18px 0 26px; } .hg-hero__promo-text { display: flex; flex-direction: column; gap: 3px; } .hg-hero__promo-text strong { font-size: 17px; color: #fff; } .hg-hero__promo-text span { font-size: 13px; color: #c7cede; } .hg-hero__promo-cta { grid-column: 2; } /* Кнопка баннера акции — отдельный, более заметный стиль: полупрозрачная заливка + статичное (без пульсации) свечение, вместо обычной сплошной .hg-btn--solid. */ .hg-btn--glow { position: relative; background: rgba(255, 61, 0, .3); border: 1.5px solid rgba(255, 255, 255, .38); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 0 22px 3px rgba(255, 90, 20, .55), inset 0 0 0 1px rgba(255,255,255,.10); } .hg-btn--glow:hover { background: rgba(255, 61, 0, .42); border-color: rgba(255,255,255,.55); box-shadow: 0 0 28px 5px rgba(255, 100, 30, .75), inset 0 0 0 1px rgba(255,255,255,.16); } .hg-mainbar { padding: 14px 0; } .hg-mainbar__row { display: flex; align-items: center; gap: 20px; } /* обёртка для группы "каталог + поиск" — нужна только для управления переносом строки на узких экранах (см. медиа-запросы ниже), сама по себе без рамки/фона — визуально это два раздельных элемента с отступом */ .hg-searchbar { display: flex; align-items: stretch; gap: 12px; flex: 1 1 auto; min-width: 0; max-width: 780px; } /* каталог и поиск — раздельные элементы с отступом между ними */ .hg-catalog { position: relative; flex: none; } .hg-catalog__btn { display: flex; align-items: center; gap: 9px; height: 100%; padding: 0 18px; background: rgba(255,255,255,.14); color: #fff; font-weight: 700; font-size: 13.5px; white-space: nowrap; border-radius: 8px; } .hg-catalog__btn:hover { background: rgba(255,255,255,.24); } .hg-catalog__burger { display: flex; flex-direction: column; gap: 3px; width: 16px; flex: none; } .hg-catalog__burger i { display: block; height: 2px; background: #fff; border-radius: 2px; } .hg-catalog__chevron { width: 14px; height: 14px; flex: none; transition: transform .15s ease; } .hg-catalog:hover .hg-catalog__chevron, .hg-catalog.is-open .hg-catalog__chevron { transform: rotate(180deg); } /* Поиск. Без выпадающего выбора раздела ("где искать") — большинство версий модуля поиска uCoz не дают фильтровать результаты по разделу магазина "из коробки"; если у вас это поддерживается, добавьте свой