/* ========================================================================== AMGene — слой обновления интерфейса. v3. Только CSS, разметка не меняется. Путь: assets/templates/qmedia/css/refresh/amgene-refresh.css Подключение: ПОСЛЕ qmedia.css — сейчас на сайте это уже сделано верно. amgene-table.css из шаблона убрать: его содержимое внутри этого файла. Все пути к картинкам и шрифтам — абсолютные. Файл лежит в подпапке css/refresh/, и относительный "../images/pattern.jpg" вёл в css/images/, которой нет — из-за этого плашка заголовка была пустой и бледной. ========================================================================== */ /* ========================================================================== 1. ТЕМА — активен «Мост». Переключение: закомментировать активный блок, раскомментировать нужный. ========================================================================== */ /* --- АКТИВНА. «Мост»: индиго — структура, коралл — действие --------------- */ :root { --heading: #4D4291; --ink: #16202E; --ink-soft: #3F4A5C; --muted: #7A879A; --accent: #FC637B; --accent-ink: #E8465F; --brand: #6475B8; --tint: #E7ECFA; /* плашки: плотнее, чем было — «блекло» лечится здесь */ --tint-soft: #F3F5FC; --tint-strong: #D6DEF6; /* фон заголовка страницы */ --line: #DFE4F0; --line-soft: #ECEFF8; } /* --- «Свежий коралл» — палитра сайта как есть ------------------------------ :root { --heading: #16202E; --ink: #16202E; --ink-soft: #3F4A5C; --muted: #7A879A; --accent: #FC637B; --accent-ink: #E8465F; --brand: #00A6F7; --tint: #DFF1FD; --tint-soft: #F2FAFE; --tint-strong: #C9E9FB; --line: #DCE6ED; --line-soft: #EBF2F7; } --- */ /* --- «Индиго» — палитра презентации (требует замены логотипа) -------------- :root { --heading: #4D4291; --ink: #1C1C33; --ink-soft: #454560; --muted: #84849E; --accent: #4D4291; --accent-ink: #3B3274; --brand: #6DAFE0; --tint: #E7EAF8; --tint-soft: #F4F5FC; --tint-strong: #D6DAF2; --line: #DFE0EE; --line-soft: #EDEEF7; } --- */ /* ========================================================================== 2. ШРИФТ — Montserrat ========================================================================== Вариант А (рекомендую): положить woff2 в /assets/templates/qmedia/fonts/ и раскомментировать блок ниже. Файлы: fonts.google.com/specimen/Montserrat. Вариант Б: строка в шаблона — -------------------------------------------------------------------------- */ /* @font-face { font-family:'Montserrat'; font-weight:400; font-display:swap; src:url('/assets/templates/qmedia/fonts/montserrat-400.woff2') format('woff2'); } @font-face { font-family:'Montserrat'; font-weight:500; font-display:swap; src:url('/assets/templates/qmedia/fonts/montserrat-500.woff2') format('woff2'); } @font-face { font-family:'Montserrat'; font-weight:600; font-display:swap; src:url('/assets/templates/qmedia/fonts/montserrat-600.woff2') format('woff2'); } @font-face { font-family:'Montserrat'; font-weight:700; font-display:swap; src:url('/assets/templates/qmedia/fonts/montserrat-700.woff2') format('woff2'); } */ :root { --font: 'Montserrat', 'Rubik', system-ui, -apple-system, sans-serif; } body, button, input, select, textarea, .button, h1, h2, h3, .pagetitle__title, .section__header-title, .template__aside-title, .nav-desktop__point1-link, .nav-top__item, .nav-left__link, .nav-mobile__link, .product__title, .card__list-point { font-family: var(--font); } /* ========================================================================== 3. ОСНОВА ========================================================================== */ :root { --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --shadow-1: 0 1px 2px rgba(22,32,46,.05), 0 2px 6px rgba(22,32,46,.04); --shadow-2: 0 6px 14px rgba(22,32,46,.08), 0 18px 36px rgba(22,32,46,.08); --ease: cubic-bezier(.2,.7,.3,1); } body { font-size: 15.5px; line-height: 1.6; letter-spacing: -.003em; color: var(--ink); -webkit-font-smoothing: antialiased; } .pagetitle__title, h1 { font-size: clamp(27px, 3.2vw, 42px); line-height: 1.14; font-weight: 600; letter-spacing: -.02em; color: var(--heading); margin-bottom: 10px; text-wrap: balance; } .content h2, .section__header-title { font-size: clamp(20px, 2.2vw, 28px); line-height: 1.22; font-weight: 600; letter-spacing: -.015em; color: var(--heading); } .content h3 { font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--heading); } .content p, .content li { color: var(--ink-soft); } .content p { margin-bottom: 1em; max-width: 74ch; } .content a:not(.button) { color: var(--accent); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent); transition: color .18s var(--ease), text-decoration-color .18s var(--ease); } .content a:not(.button):hover { color: var(--accent-ink); text-decoration-color: currentColor; } .section__header-title::before, .section__header-title::after { content: none; } /* ========================================================================== 4. ШАПКА И ЗАГОЛОВОК СТРАНИЦЫ ========================================================================== */ .header .top { background-image: none; background-color: var(--tint-soft); border-bottom: 1px solid var(--line-soft); font-size: 14px; } .nav-top__item { color: var(--ink-soft); transition: color .18s var(--ease); } .nav-top__item:hover { color: var(--accent); } /* Плашка заголовка: паттерн виден, поверх — цветная маска, а не выбеливание */ .pagetitle__back { background-color: var(--tint-strong); background-image: linear-gradient(112deg, color-mix(in srgb, var(--tint-strong) 88%, transparent) 0%, color-mix(in srgb, var(--tint) 72%, transparent) 55%, color-mix(in srgb, #fff 62%, transparent) 100%), url("/assets/templates/qmedia/images/pattern.jpg"); background-size: cover, 340px auto; background-repeat: no-repeat, repeat; background-attachment: scroll, fixed; background-blend-mode: multiply, normal; } .pagetitle__body { padding-block: clamp(28px, 4vw, 56px); } .crumbs__list { font-size: 13px; } .crumbs__link, .crumbs__point { color: color-mix(in srgb, var(--ink) 55%, transparent); } .crumbs__link { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); transition: color .18s var(--ease), border-color .18s var(--ease); } .crumbs__link:hover { color: var(--accent); border-color: currentColor; } /* ========================================================================== 5. ВЕРХНЕЕ МЕНЮ КАТАЛОГА (.nav-desktop) ========================================================================== */ .nav-desktop { background-color: #fff; border-bottom: 1px solid var(--line); } .nav-desktop__list { display: flex; flex-wrap: wrap; align-items: stretch; } .nav-desktop__point1-link { position: relative; display: inline-flex; align-items: center; height: 54px; padding: 0 20px; font-size: 15px; font-weight: 500; color: var(--ink); transition: color .18s var(--ease), background-color .18s var(--ease); } .nav-desktop__point1-link::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background-color: transparent; transition: background-color .18s var(--ease); } .nav-desktop__point1-link:hover { color: var(--heading); background-color: var(--tint-soft); } .nav-desktop__point1-link:hover::after { background-color: color-mix(in srgb, var(--accent) 45%, transparent); } .nav-desktop__point1.active > .nav-desktop__point1-link { color: var(--heading); font-weight: 600; background-color: var(--tint); } .nav-desktop__point1.active > .nav-desktop__point1-link::after { background-color: var(--accent); } /* «Контакты» — единственная кнопка действия в строке меню */ .nav-desktop__instagram > .nav-desktop__point1-link { margin-left: auto; color: #fff; font-weight: 600; background-color: var(--accent); } .nav-desktop__instagram > .nav-desktop__point1-link:hover { color: #fff; background-color: var(--accent-ink); } .nav-desktop__instagram > .nav-desktop__point1-link::after { content: none; } /* ========================================================================== 6. ЛЕВОЕ МЕНЮ КАТАЛОГА (.nav-left) и сайдбар ========================================================================== */ .template__aside-title { font-size: 20px; font-weight: 600; letter-spacing: -.015em; color: var(--heading); margin-bottom: 14px; } .nav-left__outer { display: flex; flex-direction: column; gap: 4px; } .nav-left__point-title { padding: 0; background-color: transparent; border-radius: var(--r-sm); transition: background-color .18s var(--ease); } .nav-left__link { position: relative; display: block; padding: 11px 14px 11px 16px; font-size: 14.5px; line-height: 1.35; font-weight: 500; color: var(--ink-soft); text-decoration: none; border-radius: var(--r-sm); transition: color .18s var(--ease), background-color .18s var(--ease), padding-left .18s var(--ease); } .nav-left__link:hover { color: var(--heading); background-color: var(--tint-soft); padding-left: 20px; } .nav-left__point-title.active { background-color: transparent; } .nav-left__point-title.active > .nav-left__link { color: var(--heading); font-weight: 600; background-color: var(--tint); padding-left: 26px; } .nav-left__point-title.active > .nav-left__link::before { content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background-color: var(--accent); } /* «Вы смотрели» */ .lastview__item, .lastview .product { border-radius: var(--r-md); border: 1px solid var(--line-soft); background-color: #fff; } /* ========================================================================== 7. МОБИЛЬНОЕ МЕНЮ — оно уезжало под шапку и новые блоки ========================================================================== */ .mobile-menu { z-index: 1000; } .mobile-menu__body { z-index: 1001; background-color: #fff; box-shadow: 0 0 40px rgba(22,32,46,.18); } .mobile-menu__overlay, .mobile-menu__back { z-index: 999; } .nav-mobile__link { padding: 13px 18px; font-size: 15px; font-weight: 500; color: var(--ink); } .nav-mobile__point.active > .nav-mobile__link { color: var(--heading); background-color: var(--tint); } .nav-mobile__point--title .nav-mobile__link { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } /* ========================================================================== 8. КАРТОЧКА ТОВАРА В КАТАЛОГЕ ========================================================================== */ .category__list-point { display: flex; } .category__list { align-items: stretch; } .product { display: flex; flex-direction: column; width: 100%; padding: 12px 12px 14px; background-color: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); text-align: left; transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); } .product::before, .product:hover::before { content: none; } @media (hover: hover) { .product:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: var(--shadow-2); } .product:hover .product__title { color: var(--accent); } .product:hover .product__header img { transform: scale(1.05); } } /* Фото — всегда на белом, без подложек и блендов */ .product__header { display: grid; place-items: center; aspect-ratio: 1 / 1; margin-bottom: 12px; padding: 4px; background-color: #fff; border-radius: var(--r-md); overflow: hidden; } .product__header img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s var(--ease); } .product__header img[src*="noimage"] { width: auto; height: 38%; opacity: .18; } .product__body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; text-align: left; } .product .product__title { min-height: 2.7em; font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--heading); text-decoration: none; transition: color .18s var(--ease); } /* Артикулы: не «пузырёк», а строка спецификации. Пузырёк не держал «1000 реакций — 375.17.042» в одну строку и выглядел тяжело. */ .product .product__desc { margin-top: auto; padding: 9px 2px 0; border-top: 1px solid var(--line-soft); background: none; border-radius: 0; font-size: 11.5px; line-height: 1.7; letter-spacing: -.01em; color: var(--muted); white-space: nowrap; overflow-x: auto; font-variant-numeric: tabular-nums; } .product .product__desc::-webkit-scrollbar { height: 0; } /* ========================================================================== 9. СТРАНИЦА ТОВАРА — три блока, три разных решения ========================================================================== */ /* 9.1 Галерея — фото на белом, рамка вместо заливки */ .card__gallery { padding: 20px; background-color: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); } .card__gallery img { mix-blend-mode: normal; } /* 9.2 Спецификация (Наличие, Артикул) — таблица «ключ — значение» */ .card__list { margin: 0 0 20px; padding: 4px 0; list-style: none; border-top: 1px solid var(--line); } .card__list-point { display: grid; grid-template-columns: minmax(96px, 26%) 1fr; gap: 6px 18px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--line-soft); } .card__list-point .key { font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--muted); } .card__list-point .key br { display: none; } .card__list-point .value { font-size: 15px; line-height: 1.55; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; } /* 9.3 Сертификация — отдельная карточка, не строка списка */ .char__list { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; padding: 16px 18px; list-style: none; background-color: var(--tint-soft); border: 1px solid var(--line); border-radius: var(--r-md); } .char__list .card__list-point { display: flex; align-items: center; gap: 14px; padding: 0; border: 0; } .char__list img { width: 56px; height: auto; flex: none; } .char__list .Value, .char__list .value { font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); } /* 9.4 Описание — обычный текст, ширина ограничена */ .card__content .content > p:first-child strong { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 600; color: var(--heading); } .card__content .content ul { padding-left: 0; list-style: none; } .card__content .content ul li { position: relative; padding-left: 20px; margin-bottom: 6px; } .card__content .content ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background-color: var(--brand); } /* ========================================================================== 10. КНОПКИ, ПОЛЯ, ФОКУС ========================================================================== */ .button { height: 46px; padding: 0 22px; font-size: 15px; font-weight: 600; border-radius: var(--r-sm); background-color: var(--accent); border-color: var(--accent); color: #fff; transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease); } .button:hover { background-color: var(--accent-ink); border-color: var(--accent-ink); box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 32%, transparent); } .button:active { transform: translateY(1px); box-shadow: none; } .button--light { background-color: var(--tint); border-color: var(--tint); color: var(--ink); } .input, input[type=text], input[type=search], input[type=number], input[type=email], textarea { border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color .18s var(--ease), box-shadow .18s var(--ease); } .input:focus, input:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); outline: none; } :where(a, button, input, select, textarea, .button):focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } .product:hover { transform: none; } } img { max-width: 100%; height: auto; } ::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); } .footer { border-top: 1px solid var(--line); } /* ========================================================================== 11. ТАБЛИЦЫ В КОНТЕНТЕ (заменяет amgene-table.css) ========================================================================== */ .content table { display: block; width: 100%; max-width: 100%; min-width: 0; margin: 24px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border: 0; border-radius: var(--r-sm); box-shadow: 0 0 0 1px var(--line); font-size: 14px; line-height: 1.45; color: var(--ink); background: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center, linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center, radial-gradient(farthest-side at 0 50%, rgba(22,32,46,.14), rgba(22,32,46,0)) left center, radial-gradient(farthest-side at 100% 50%, rgba(22,32,46,.14), rgba(22,32,46,0)) right center; background-color: #fff; background-repeat: no-repeat; background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .content table > tbody, .content table > thead { display: table; width: 100%; border-collapse: collapse; } .content th, .content td { padding: 11px 16px; border: 0; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; font-variant-numeric: tabular-nums; } .content td p { margin: 0; } .content table > tbody > tr + tr > td, .content table > tbody > tr + tr > th { white-space: nowrap; } .content table > thead td, .content table > thead th, .content table > tbody > tr:first-child > td, .content table > tbody > tr:first-child > th { background-color: var(--tint); color: var(--heading); font-weight: 600; letter-spacing: .01em; white-space: normal; border-bottom: 1px solid color-mix(in srgb, var(--brand) 25%, var(--tint)); } .content table > tbody > tr:nth-child(even) > td { background-color: var(--tint-soft); } .content table > tbody > tr:last-child > td { border-bottom: 0; } @media (hover: hover) { .content table > tbody > tr:hover > td { background-color: color-mix(in srgb, var(--brand) 8%, transparent); } .content table > tbody > tr:first-child:hover > td { background-color: var(--tint); } } .content table.table--wrap > tbody > tr > td { white-space: normal; } @media print { .content table { display: table; overflow: visible; box-shadow: none; background: none; border: 1px solid #D6D6D6; } .content table > tbody { display: table-row-group; min-width: 0; } } /* ========================================================================== 12. МОБИЛЬНЫЕ ========================================================================== */ @media (max-width: 767px) { .product { padding: 10px 10px 12px; border-radius: var(--r-md); } .product .product__title { min-height: 0; font-size: 14px; } .product .product__desc { font-size: 11px; } .content table { font-size: 13px; margin: 20px 0; } .content th, .content td { padding: 9px 12px; } .card__list-point { grid-template-columns: 1fr; gap: 2px; } .char__list { flex-wrap: wrap; } }