/* ==========================================================================
МедиКо Theme — Main Stylesheet
Mobile-first responsive design
========================================================================== */
/* --------------------------------------------------------------------------
CSS Custom Properties
-------------------------------------------------------------------------- */
:root {
--color-primary: #009846;
--color-primary-dark: #007A38;
--color-primary-light: #00B050;
--color-white: #FFFFFF;
--color-bg-light: #F4F4F4;
--color-bg-lighter: #F8F8F8;
--color-footer: #393939;
--color-text: #2D2D2D;
--color-text-light: #626262;
--color-text-muted: #626262;
--color-border: #D0D0D0;
--color-border-light: #E1E1E1;
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--container-max: 1170px;
--container-padding: 16px;
--header-height: 70px;
--section-gap: 48px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.14);
--shadow-lg: 0 4px 30px rgba(0, 0, 0, 0.12);
--shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.14);
--transition: 0.25s ease;
}
/* --------------------------------------------------------------------------
Reset & Base
-------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-family);
font-weight: 300;
line-height: 1.5;
color: var(--color-text);
background-color: var(--color-white);
overflow-x: hidden;
padding-top: var(--header-height);
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition);
}
a:hover,
a:focus-visible {
color: var(--color-primary-dark);
}
h1, h2, h3, h4, h5, h6 {
font-weight: 600;
line-height: 1.33;
color: var(--color-text);
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
ul, ol {
list-style: none;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
}
/* --------------------------------------------------------------------------
Accessibility
-------------------------------------------------------------------------- */
.skip-link {
position: absolute;
top: -100%;
left: 0;
background: var(--color-primary);
color: var(--color-white);
padding: 8px 16px;
z-index: 10000;
font-size: 0.875rem;
}
.skip-link:focus {
top: 0;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
word-wrap: normal;
}
/* --------------------------------------------------------------------------
Container
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container-max);
margin-left: auto;
margin-right: auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
/* --------------------------------------------------------------------------
Buttons
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 32px;
border: 2px solid transparent;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 0.9375rem;
line-height: 30px;
cursor: pointer;
transition: all var(--transition);
min-height: 50px;
text-decoration: none;
}
.btn-primary {
background-color: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.btn-primary:hover,
.btn-primary:focus-visible {
background-color: var(--color-primary-dark);
border-color: var(--color-primary-dark);
color: var(--color-white);
}
.btn-outline {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-outline:hover,
.btn-outline:focus-visible {
background-color: var(--color-primary);
color: var(--color-white);
}
.btn-outline-white {
background-color: transparent;
color: var(--color-white);
border-color: var(--color-white);
}
.btn-outline-white:hover,
.btn-outline-white:focus-visible {
background-color: var(--color-white);
color: var(--color-footer);
}
.btn-outline-green {
background-color: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn-outline-green:hover,
.btn-outline-green:focus-visible {
background-color: var(--color-primary);
color: var(--color-white);
}
.btn-sm {
padding: 8px 24px;
font-size: 0.875rem;
min-height: 40px;
}
/* --------------------------------------------------------------------------
Header
-------------------------------------------------------------------------- */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: var(--color-white);
border-bottom: 1px solid var(--color-border-light);
height: var(--header-height);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-height);
gap: 16px;
}
/* Logo */
.site-logo {
display: flex;
align-items: center;
text-decoration: none;
flex-shrink: 0;
}
.site-logo__img {
width: 200px;
height: 48px;
object-fit: contain;
margin: 0;
border-radius: 0;
}
/* Primary Navigation */
.primary-nav {
display: none;
}
.primary-nav__list {
display: flex;
align-items: center;
gap: 32px;
}
.primary-nav__link {
font-size: 1rem;
font-weight: 300;
color: var(--color-text);
text-decoration: none;
padding: 8px 0;
position: relative;
white-space: nowrap;
}
.primary-nav__link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background-color: var(--color-primary);
transform: scaleX(0);
transition: transform var(--transition);
}
.primary-nav__link:hover,
.primary-nav__link:focus-visible,
.primary-nav__link.current-menu-item > a,
.current-menu-item > .primary-nav__link {
color: var(--color-primary);
}
.primary-nav__link:hover::after,
.primary-nav__link:focus-visible::after {
transform: scaleX(1);
}
/* Header Contacts */
.header-contacts {
display: none;
flex-direction: column;
align-items: flex-end;
gap: 2px;
flex-shrink: 0;
}
.header-contacts__phones {
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.header-contacts__icon {
color: var(--color-primary);
display: flex;
align-items: center;
margin-right: 2px;
}
.header-contacts__phone {
font-size: 1rem;
font-weight: 400;
color: var(--color-text);
text-decoration: none;
white-space: nowrap;
}
.header-contacts__phone:hover {
color: var(--color-primary);
}
.header-contacts__email {
font-size: 0.875rem;
color: var(--color-primary);
text-decoration: none;
}
/* Search Toggle */
.search-toggle {
display: none;
align-items: center;
justify-content: center;
width: 41px;
height: 41px;
background: var(--color-bg-light);
border: none;
border-radius: 50%;
cursor: pointer;
color: var(--color-text);
transition: all var(--transition);
flex-shrink: 0;
}
.search-toggle:hover {
background: var(--color-border-light);
}
.search-toggle svg {
width: 20px;
height: 20px;
}
/* Global Search Bar */
.global-search-bar {
background: var(--color-white);
padding: 12px 0;
}
.global-search-bar[hidden] {
display: none;
}
.global-search-bar.is-collapsible.is-open {
display: block;
}
/* Hamburger */
.hamburger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
background: none;
border: none;
cursor: pointer;
padding: 8px;
gap: 5px;
flex-shrink: 0;
}
.hamburger__line {
width: 24px;
height: 2px;
background-color: var(--color-text);
border-radius: 2px;
transition: all var(--transition);
}
.hamburger.is-active .hamburger__line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger.is-active .hamburger__line:nth-child(2) {
opacity: 0;
}
.hamburger.is-active .hamburger__line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Mobile Menu */
.mobile-menu {
display: none;
position: fixed;
top: var(--header-height);
left: 0;
right: 0;
bottom: 0;
background: var(--color-white);
z-index: 999;
overflow-y: auto;
padding: 24px var(--container-padding);
}
.mobile-menu.is-open {
display: block;
}
.mobile-menu__nav {
margin-bottom: 24px;
}
.mobile-menu__list {
display: flex;
flex-direction: column;
gap: 0;
}
.mobile-menu__link {
display: block;
padding: 14px 0;
font-size: 1.0625rem;
font-weight: 600;
color: var(--color-text);
border-bottom: 1px solid var(--color-border-light);
}
.mobile-menu__link:hover {
color: var(--color-primary);
}
.mobile-menu__contacts {
padding-top: 16px;
}
.mobile-menu__contacts a {
display: block;
padding: 10px 0;
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
}
.mobile-menu__contacts .email-link {
font-weight: 400;
color: var(--color-text-light);
}
/* --------------------------------------------------------------------------
Hero / Slider
-------------------------------------------------------------------------- */
.hero-section {
width: 100%;
max-width: var(--container-max);
margin: 24px auto 0;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
box-sizing: border-box;
}
/* Smart Slider (boxed 1170) — round the card edges to match Figma (20px) */
.hero-section .n2-ss-slider,
.hero-section .n2-ss-slider-wrapper,
.hero-section .n2-ss-slider-wrapper-inside {
border-radius: 20px;
overflow: hidden;
}
.hero-section .n2-ss-slider-wrapper-inside {
min-height: 300px;
}
/* Banner arrows (#1 «Доработки-3»): on the symlinked prod deploy SS3 fails to
resolve the arrow image to a URL/base64 and emits a raw filesystem path in
![]()
, so the browser shows a broken-image icon (next has no image at all).
Hide the broken ![]()
and draw clean chevrons via inline-SVG backgrounds —
env-independent, ships with the theme (no separate SS3 DB patch). SS3 keeps
handling arrow position/visibility. */
.hero-section .nextend-arrow {
width: 44px !important;
height: 44px !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 24px 24px !important;
background-color: rgba(0, 0, 0, 0.28);
border-radius: 50%;
cursor: pointer;
}
.hero-section .nextend-arrow img {
display: none !important;
}
.hero-section .nextend-arrow-previous {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
}
.hero-section .nextend-arrow-next {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important;
}
/* Static fallback (when Smart Slider plugin is disabled) */
.hero-section .container {
width: 100%;
min-height: 300px;
display: flex;
align-items: center;
background-color: #f0f0f0;
border-radius: var(--radius-md);
}
/* Static hero banner (Figma layout) */
.hero-banner {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
padding: 40px 0;
}
.hero-banner__image {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
max-width: 400px;
width: 100%;
}
.hero-banner__image img {
max-width: 100%;
height: auto;
}
.hero-banner__image-placeholder {
width: 100%;
aspect-ratio: 4 / 3;
background: rgba(255,255,255,0.5);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
font-size: 0.875rem;
}
.hero-banner__content {
text-align: center;
}
.hero-banner__brand {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-muted);
letter-spacing: 0.3px;
margin-bottom: 8px;
}
.hero-banner__title {
font-size: 1.5rem;
font-weight: 400;
color: var(--color-text);
margin-bottom: 12px;
line-height: 1.2;
}
.hero-banner__desc {
font-size: 1rem;
color: var(--color-text-light);
margin-bottom: 24px;
line-height: 1.6;
}
/* Legacy placeholder fallback */
.hero-placeholder {
text-align: center;
padding: 60px 20px;
}
.hero-placeholder__title {
font-size: 1.75rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 16px;
}
.hero-placeholder__subtitle {
font-size: 1rem;
color: var(--color-text-light);
margin-bottom: 24px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* --------------------------------------------------------------------------
Section Commons
-------------------------------------------------------------------------- */
.section {
padding: var(--section-gap) 0;
}
.section--gray {
background-color: var(--color-bg-lighter);
}
.partners-section .section-title {
color: var(--color-white);
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 32px;
flex-wrap: wrap;
gap: 12px;
}
.section-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--color-text);
position: relative;
}
.section-link {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-primary);
text-decoration: none;
white-space: nowrap;
}
.section-link:hover {
color: var(--color-primary-dark);
}
/* --------------------------------------------------------------------------
Catalog Categories Grid
-------------------------------------------------------------------------- */
.catalog-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
/* Show only first 6 categories on home; toggle via .is-expanded (Figma 38:2) */
@media (max-width: 767px) {
.catalog-grid:not(.is-expanded) > .catalog-card:nth-child(n+7) {
display: none !important;
}
}
/* "Загрузить ещё" button — Figma 38:2 (350×50, green, white text) */
.catalog-loadmore {
display: none;
}
@media (max-width: 767px) {
.catalog-loadmore {
display: block;
width: 100%;
height: 50px;
margin-top: 16px;
background: var(--color-primary, #00843D);
color: #fff;
border: none;
border-radius: 8px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background var(--transition);
}
.catalog-loadmore:hover {
background: var(--color-primary-dark, #006c30);
}
.catalog-loadmore[hidden] {
display: none;
}
}
.catalog-card {
background: var(--color-white);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
overflow: hidden;
transition: all var(--transition);
text-decoration: none;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
}
.catalog-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
.catalog-card__image {
aspect-ratio: 4 / 3;
overflow: hidden;
background-color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.catalog-card__image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform var(--transition);
}
.catalog-card:hover .catalog-card__image img {
transform: scale(1.03);
}
.catalog-card__image-placeholder {
width: 48px;
height: 48px;
opacity: 0.3;
}
.catalog-card__body {
padding: 16px;
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
font-size: 1.0625rem;
font-weight: 400;
line-height: 24px;
border-top: 1px solid var(--color-border-light);
}
.catalog-card__title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text);
line-height: 1.4;
}
/* #3 — стрелочка после названия раздела (слева + →), как в Figma */
.catalog-card__title::after {
content: "\00A0→";
color: var(--color-primary);
font-weight: 600;
}
.catalog-card__count {
margin-top: auto;
padding-top: 8px;
font-size: 0.8125rem;
color: var(--color-text-muted);
}
/* Mobile: горизонтальная плитка [image | title] (Figma 38:2 / 44:896) */
@media (max-width: 767px) {
.catalog-card {
display: grid !important;
grid-template-columns: 80px 1fr;
align-items: center;
gap: 16px;
padding: 12px;
border-radius: 15px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.12);
border: none;
}
.catalog-card__image {
aspect-ratio: 1;
width: 80px;
height: 80px;
border-radius: var(--radius-sm, 6px);
padding: 4px;
}
.catalog-card__body {
padding: 0;
align-items: flex-start;
text-align: left;
border-top: none;
flex: 1;
}
.catalog-card__title {
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.4;
}
.catalog-card__count {
font-size: 0.75rem;
margin-top: 4px;
padding-top: 0;
}
}
/* --------------------------------------------------------------------------
Projects Grid + Mobile Carousel (Figma 38:2)
-------------------------------------------------------------------------- */
.projects-carousel {
position: relative;
}
.projects-carousel__nav {
display: none;
}
.projects-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (max-width: 767px) {
/* Only carousel-wrapped grid becomes horizontal scroller (Figma 38:2 home).
Plain .projects-grid on /proekty/ archive stays vertical 1-column. */
.projects-carousel .projects-grid {
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 12px;
}
.projects-carousel .projects-grid::-webkit-scrollbar {
display: none;
}
.projects-carousel .projects-grid > .project-card {
flex: 0 0 100%;
scroll-snap-align: start;
}
.projects-carousel__nav {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 16px;
}
.projects-carousel__btn {
width: 40px;
height: 40px;
border: 1px solid var(--color-border-light, #E1E1E1);
border-radius: 50%;
background: #fff;
color: var(--color-text, #2D2D2D);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--transition);
}
.projects-carousel__btn:hover {
background: var(--color-primary, #00843D);
color: #fff;
border-color: var(--color-primary, #00843D);
}
}
.project-card {
background: transparent;
overflow: hidden;
transition: box-shadow var(--transition);
}
.project-card__image {
aspect-ratio: 370 / 256;
overflow: hidden;
background-color: var(--color-bg-light, #f5f5f5);
border-radius: var(--radius-md);
}
.project-card__image a {
display: block;
width: 100%;
height: 100%;
}
.project-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
margin: 0;
}
.project-card__image-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--color-text-muted, #999);
background: var(--color-bg-light, #f5f5f5);
}
.project-card__body {
padding: 12px 0 0;
}
.project-card__date {
font-size: 0.875rem;
font-weight: 300;
color: var(--color-text-light);
margin-bottom: 4px;
}
.project-card__title {
font-size: 1rem;
font-weight: 300;
line-height: 1.5;
color: var(--color-text);
margin-bottom: 0;
}
/* Title link inherits dark text, not the global green link color — «Доработки-3» #10d */
.project-card__title a {
color: inherit;
text-decoration: none;
transition: color 0.15s ease;
}
.project-card__title a:hover {
color: var(--color-primary);
}
.project-card__excerpt {
font-size: 0.875rem;
font-weight: 300;
color: var(--color-text);
line-height: 1.5;
margin-bottom: 0;
}
.project-card__equipment {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.project-card__tag {
display: inline-block;
padding: 4px 10px;
font-size: 0.75rem;
background-color: transparent;
border-radius: var(--radius-sm);
color: var(--color-primary);
}
/* Search results — clean product-style cards (reuse project-card markup, but
results are mostly products on white, so frame + contain instead of cover-crop) */
body.search .project-card {
background: #fff;
border: 1px solid var(--color-border-light, #e8e8e8);
border-radius: var(--radius-md);
box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
overflow: hidden;
transition: box-shadow var(--transition), transform var(--transition);
}
body.search .project-card:hover {
box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .15);
transform: translateY(-2px);
}
body.search .project-card__image {
aspect-ratio: 4 / 3;
background: #fff;
border-radius: 0;
}
body.search .project-card__image img {
object-fit: contain;
padding: 16px;
box-sizing: border-box;
}
body.search .project-card__body {
padding: 16px;
}
/* Migration import date is identical for all products — noise in search results */
body.search .project-card__date {
display: none;
}
body.search .project-card__title {
font-weight: 500;
margin-bottom: 8px;
}
/* --------------------------------------------------------------------------
Reviews Grid
-------------------------------------------------------------------------- */
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
margin-bottom: 32px;
}
.review-card {
display: flex;
flex-direction: column;
background: var(--color-white);
border: 1px solid var(--color-border, #e5e7eb);
border-radius: var(--radius-md);
overflow: hidden;
transition: box-shadow var(--transition);
}
.review-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.review-card__image {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background-color: #f5f5f5;
}
.review-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
margin: 0;
}
.review-card__title {
font-size: 1rem;
font-weight: 500;
line-height: 1.4;
margin: 16px 16px 8px;
}
.review-card__title a {
color: var(--color-text);
text-decoration: none;
}
.review-card__title a:hover {
color: var(--color-primary);
}
.review-card__date {
display: block;
margin: 0 16px 8px;
font-size: 0.8125rem;
color: var(--color-text-light);
}
.review-card__excerpt {
margin: 0 16px 16px;
font-size: 0.875rem;
color: var(--color-text);
line-height: 1.5;
}
.review-single__date {
display: block;
margin-bottom: 16px;
font-size: 0.875rem;
color: var(--color-text-light);
}
.review-single__image {
margin: 0 0 24px;
}
.review-single__image img {
border-radius: var(--radius-md);
margin: 0;
}
/* --------------------------------------------------------------------------
Partners Carousel
-------------------------------------------------------------------------- */
.partners-section {
padding: var(--section-gap) 0;
overflow: hidden;
background: linear-gradient(rgba(0, 152, 70, 0.85), rgba(0, 152, 70, 0.85)), url('../images/partners-bg.jpg') center / cover no-repeat;
color: var(--color-white);
position: relative;
}
.partners-carousel {
position: relative;
padding: 0 60px;
}
.partners-carousel__track {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 16px 0;
}
.partners-carousel__track::-webkit-scrollbar {
display: none;
}
.partners-carousel__item {
flex: 0 0 170px;
min-width: 170px;
height: 83px;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
border: 1px solid #e8e8e8;
border-radius: 16px;
background: var(--color-white);
transition: all var(--transition);
}
.partners-carousel__item img {
max-width: 100%;
max-height: 55px;
width: auto;
object-fit: contain;
margin: 0;
border-radius: 0;
}
/* Navigation overlay: arrows on the sides, vertically centred over the track */
.partners-carousel__nav {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: space-between;
pointer-events: none;
margin: 0;
padding: 0;
}
.partners-carousel__btn {
pointer-events: auto;
width: 44px;
height: 44px;
border: 1px solid var(--color-border);
border-radius: 50%;
background: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition);
box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.partners-carousel__btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.partners-carousel__btn svg {
width: 18px;
height: 18px;
}
@media (max-width: 480px) {
.partners-carousel {
padding: 0 44px;
}
.partners-carousel__btn {
width: 36px;
height: 36px;
}
}
/* --------------------------------------------------------------------------
Footer (Figma: white bg, dark text, dark copyright bar)
-------------------------------------------------------------------------- */
.site-footer {
background-color: var(--color-white);
color: var(--color-text);
padding: 48px 0 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
padding-bottom: 40px;
}
/* Footer Logo Column */
.footer-logo__img {
margin: 0;
border-radius: 0;
}
.footer-description {
font-size: 0.875rem;
font-weight: 500;
line-height: 1.9;
margin: 16px 0 24px;
color: var(--color-text);
}
/* Footer Nav Columns */
.footer-nav-title {
font-size: 1rem;
font-weight: 300;
color: var(--color-text);
margin-bottom: 16px;
}
.footer-nav-title a {
color: inherit;
text-decoration: none;
}
.footer-nav-title a:hover {
color: var(--color-primary);
}
/* Hide Bitrix24 auto-rendered click button (we have our own «Обратная связь» buttons). */
.b24-form-click-btn-wrapper,
.b24-form-click-btn-66 {
display: none !important;
}
.footer-nav-list li {
margin-bottom: 8px;
}
.footer-nav-list a {
font-size: 1rem;
font-weight: 300;
line-height: 2;
color: var(--color-text);
text-decoration: none;
transition: color var(--transition);
}
.footer-nav-list a:hover {
color: var(--color-primary);
}
/* Footer Contacts */
.footer-contacts__phone {
display: block;
font-size: 1rem;
font-weight: 300;
line-height: 2;
color: var(--color-text);
margin-bottom: 4px;
text-decoration: none;
}
.footer-contacts__phone:hover {
color: var(--color-primary);
}
.footer-contacts__email {
display: block;
font-size: 1rem;
font-weight: 300;
line-height: 2;
color: var(--color-primary);
margin-top: 8px;
text-decoration: none;
}
.footer-contacts__email:hover {
color: var(--color-primary-dark);
}
/* Footer Bottom (dark copyright bar) */
.footer-bottom {
background-color: var(--color-footer);
padding: 10px 0;
text-align: center;
}
.footer-bottom__text {
font-size: 0.875rem;
font-weight: 300;
color: var(--color-white);
}
/* Chat Widget */
.chat-widget {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 900;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.chat-widget__bubble {
background-color: var(--color-primary);
color: var(--color-white);
border-radius: 12px 12px 0 12px;
padding: 12px 16px;
box-shadow: var(--shadow-lg);
max-width: 200px;
cursor: pointer;
transition: all var(--transition);
}
.chat-widget__bubble:hover {
background-color: var(--color-primary-dark);
}
.chat-widget__bubble-company {
font-size: 0.6875rem;
font-weight: 600;
opacity: 0.85;
margin-bottom: 2px;
}
.chat-widget__bubble-text {
font-size: 0.875rem;
font-weight: 400;
}
.chat-widget__btn {
width: 56px;
height: 56px;
border-radius: 50%;
background-color: var(--color-primary);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-lg);
transition: all var(--transition);
}
.chat-widget__btn:hover {
background-color: var(--color-primary-dark);
transform: scale(1.05);
}
.chat-widget__btn svg {
width: 24px;
height: 24px;
fill: var(--color-white);
}
/* --------------------------------------------------------------------------
WooCommerce — Catalog / Archive
-------------------------------------------------------------------------- */
.wc-catalog-header {
padding: 24px 0 0;
background-color: transparent;
}
.wc-search-bar {
max-width: 100%;
margin: 0 0 0;
position: relative;
}
.wc-search-bar input[type="search"] {
width: 100%;
padding: 14px 48px 14px 20px;
border: none;
border-radius: var(--radius-sm);
font-size: 1rem;
font-weight: 300;
background: var(--color-bg-light);
transition: background var(--transition);
}
.wc-search-bar input[type="search"]:focus {
outline: none;
border-color: var(--color-primary);
}
.wc-search-bar button {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
padding: 10px;
color: var(--color-text-light);
min-height: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.wc-category-section {
padding: 32px 0;
}
.wc-category-section__header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding-bottom: 16px;
margin-bottom: 20px;
border-bottom: 2px solid var(--color-border-light);
}
.wc-category-section__title {
margin: 0;
text-align: left;
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text);
}
.wc-category-section__cta {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-primary, #00843D);
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: color .15s ease, transform .15s ease;
}
.wc-category-section__cta:hover {
color: var(--color-primary-hover, #006b31);
}
.wc-category-section__cta:hover .wc-category-section__cta-arrow {
transform: translateX(3px);
}
.wc-category-section__cta-arrow {
flex-shrink: 0;
transition: transform .15s ease;
}
@media (max-width: 480px) {
.wc-category-section__cta-text {
display: none;
}
}
.wc-categories-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
/* Mobile: 1 колонка горизонтальная плитка [image | title] (Figma 44:896) */
@media (max-width: 767px) {
.wc-categories-grid {
grid-template-columns: 1fr;
gap: 10px;
}
}
/* WooCommerce — Products Grid (override WC default float layout) */
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
}
/* Mobile: single product page — gallery + summary in 1 column (Figma 41:137) */
@media (max-width: 767px) {
.woocommerce div.product .images,
.woocommerce-page div.product .images,
.woocommerce div.product div.images {
float: none !important;
width: 100% !important;
margin-right: 0 !important;
margin-bottom: 16px !important;
}
.woocommerce div.product .summary,
.woocommerce-page div.product .summary,
.woocommerce div.product div.summary {
float: none !important;
width: 100% !important;
margin-bottom: 24px !important;
}
.woocommerce div.product .woocommerce-tabs {
clear: both;
}
}
/* Kill WC clearfix pseudo-elements that occupy grid cells */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
display: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
float: none !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
}
@media (min-width: 768px) {
.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (min-width: 1024px) {
.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); gap: 30px; }
}
/* --------------------------------------------------------------------------
WooCommerce — Product Card
-------------------------------------------------------------------------- */
.product-card {
position: relative;
background: var(--color-white);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
overflow: hidden;
transition: all var(--transition);
display: flex;
flex-direction: column;
}
/* --------------------------------------------------------------------------
Catalog Layout — Filters + Products (Figma "Раздел")
-------------------------------------------------------------------------- */
.wc-catalog-layout {
display: block;
}
.wc-catalog-layout.has-filters {
display: grid;
grid-template-columns: 270px 1fr;
gap: 30px;
align-items: start;
}
.wc-catalog-filters-toggle { display: none; }
@media (max-width: 768px) {
.wc-catalog-layout.has-filters {
grid-template-columns: 1fr;
gap: 16px;
}
.wc-catalog-filters-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
height: 60px;
padding: 0 24px;
background: #F7F7F7;
border: none;
border-radius: 12px;
font-family: inherit;
font-size: 18px;
font-weight: 500;
color: #000;
cursor: pointer;
position: relative;
}
.wc-catalog-filters-toggle__label {
flex: 0 0 auto;
}
.wc-catalog-filters-toggle__icon {
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
transition: transform 0.2s ease;
}
.wc-catalog-filters-toggle[aria-expanded="true"] .wc-catalog-filters-toggle__icon {
transform: translateY(-50%) rotate(180deg);
}
.wc-catalog-filters[data-collapsed="true"] {
display: none;
}
}
.wc-catalog-filters {
position: sticky;
top: 100px;
}
@media (max-width: 768px) {
.wc-catalog-filters {
position: static;
top: auto;
background: #F7F7F7;
border-radius: 12px;
padding: 16px;
}
}
.filter-group {
margin-bottom: 24px;
}
.filter-group__title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-border);
}
.filter-group__options {
display: flex;
flex-direction: column;
gap: 6px;
}
@media (max-width: 768px) {
.filter-group__options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
}
}
.filter-checkbox {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 0.875rem;
color: var(--color-text);
}
.filter-checkbox input[type="checkbox"] {
accent-color: var(--color-primary);
width: 16px;
height: 16px;
}
.filter-checkbox__count {
color: var(--color-text-muted);
font-size: 0.8rem;
}
.filter-reset {
display: inline-block;
color: var(--color-primary);
font-size: 0.875rem;
text-decoration: underline;
margin-top: 8px;
}
.wc-catalog-products .woocommerce-result-count,
.wc-catalog-products .woocommerce-ordering {
margin-bottom: 16px;
}
.product-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
.product-card__image {
aspect-ratio: 3 / 2;
overflow: hidden;
/* #5 — белый фон карточки каталога (как на странице товара): при object-fit:contain
«леттербоксинг» вертикальных/горизонтальных картинок на белом становится невидимым,
карточки перестают выглядеть «кашей». Серый фон оставлял видимые поля. */
background-color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
}
.product-card__image img {
/* height:100% !important beats WooCommerce core `.woocommerce ul.products li.product a img { height:auto }`
(0,3,4). With height:auto a portrait photo scales to width:100%, grows taller than the
3:2 box and gets clipped by overflow:hidden — object-fit:contain can't help because the
img box itself isn't bound to the container height. — «Доработки-3» #5 (crop) */
width: 100% !important;
height: 100% !important;
object-fit: contain;
padding: 16px;
transition: transform var(--transition);
}
.product-card:hover .product-card__image img {
transform: scale(1.05);
}
/* Manufacturer logo header — above the photo, right-aligned, uncropped (medium size,
not the 150×150 thumbnail crop). Reserved min-height keeps cards aligned. — «Доработки-3» #5 */
.product-card__header {
display: flex;
align-items: center;
justify-content: flex-end;
min-height: 40px;
padding: 12px 16px 0;
}
.product-card__logo {
/* !important beats WooCommerce core `.woocommerce ul.products li.product img`
(0,3,3), which otherwise forces max-width:100% + margin:0 0 1em and lets a
wide wordmark span the whole card. — «Доработки-3» #5 */
max-height: 30px !important;
max-width: 46% !important;
width: auto !important;
height: auto !important;
object-fit: contain;
margin: 0 !important;
border-radius: 0;
}
.product-card__body {
padding: 16px 0;
margin: 0 16px;
border-top: 1px solid var(--color-border-light);
display: flex;
flex-direction: column;
flex: 1;
text-align: center;
}
.product-card__title {
font-size: 1rem;
font-weight: 400;
color: var(--color-text);
line-height: 1.44;
margin-bottom: 8px;
}
.product-card__title a {
color: inherit;
text-decoration: none;
}
.product-card__title a:hover {
color: var(--color-primary);
}
/* Hide price in catalog grid per Figma — only show on single product page */
.product-card__price {
display: none;
}
/* --------------------------------------------------------------------------
#6 — Результаты поиска: компактная сетка 5-в-ряд, мини-картинки (~10 на экран).
Товары приоритетны через вес post-type в Relevanssi (RelevanssiConfig.php).
-------------------------------------------------------------------------- */
.mediko-search-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.search-card {
display: flex;
flex-direction: column;
background: var(--color-white);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
overflow: hidden;
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: all var(--transition);
}
.search-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
.search-card__image {
aspect-ratio: 4 / 3;
background: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.search-card__image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
padding: 12px;
}
.search-card__body {
padding: 12px;
display: flex;
flex-direction: column;
gap: 4px;
border-top: 1px solid var(--color-border-light);
}
.search-card__type {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-primary);
}
.search-card__title {
font-size: 0.875rem;
font-weight: 500;
line-height: 1.35;
color: var(--color-text);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 1200px) { .mediko-search-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 992px) { .mediko-search-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .mediko-search-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.product-card__price .request-price {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-light);
}
.product-card__actions {
margin-top: auto;
padding-top: 12px;
}
.product-card__actions .btn {
width: 100%;
}
/* --------------------------------------------------------------------------
WooCommerce — Single Product
-------------------------------------------------------------------------- */
.single-product-section {
padding: 32px 0;
}
.single-product-layout {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
.product-gallery {
background: var(--color-white, #fff);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);
}
/* Product image framed card (feedback #9, Figma) — default WC gallery has no frame */
.woocommerce div.product div.images,
.woocommerce-page div.product div.images {
background: #fff;
border: 1px solid var(--color-border-light, #e8e8e8);
border-radius: 16px;
box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .05);
padding: 24px;
box-sizing: border-box;
}
/* Hide WooCommerce single-product meta block (Категории, SKU, Теги) — feedback #9 */
.product-info .product_meta,
.product_meta {
display: none !important;
}
/* Compact "Отправить запрос" CTA (feedback #9) — was full-width, too dominant */
.product-info .b24-web-form-popup-btn,
.product-info .b24-web-form,
.product-info .single-product__request-btn,
.product-info button.single-product__request-btn {
display: inline-block;
width: auto;
min-width: 0;
padding: 10px 20px;
font-size: 0.9375rem;
line-height: 1.3;
}
.product-gallery__main {
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.product-gallery__main img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.product-gallery__thumbs {
display: flex;
gap: 8px;
padding: 12px;
overflow-x: auto;
}
.product-gallery__thumb {
width: 64px;
height: 64px;
flex-shrink: 0;
border: 2px solid transparent;
border-radius: var(--radius-sm);
overflow: hidden;
cursor: pointer;
transition: border-color var(--transition);
}
.product-gallery__thumb.is-active,
.product-gallery__thumb:hover {
border-color: var(--color-primary);
}
.product-gallery__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Правки-4 #1 — «приблизить» = клик по фото открывает лайтбокс. Тема сама иконку-лупу
не рисует (WC-триггер добавляется только при zoom, а zoom мы убрали). Рисуем видимую
подсказку-лупу («zoom-in») поверх фото; pointer-events:none — клик проходит сквозь неё
на картинку и открывает лайтбокс. */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
position: relative;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image::after {
content: "";
position: absolute;
bottom: 12px;
right: 12px;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35M11 8v6M8 11h6'/%3E%3C/svg%3E") no-repeat center / 22px 22px;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
pointer-events: none;
z-index: 5;
}
.product-info__title,
.product-info .product_title {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.4;
margin-bottom: 16px;
}
.product-info__price {
font-size: 1.375rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 16px;
}
.product-info__description {
font-size: 0.9375rem;
color: var(--color-text-light);
line-height: 1.7;
margin-bottom: 24px;
}
.product-info__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 32px;
}
/* Product Tabs */
.product-tabs {
margin-top: 40px;
}
.product-tabs__nav {
display: flex;
border-bottom: 2px solid var(--color-border-light);
gap: 0;
overflow-x: auto;
}
/* Override WooCommerce default tabs styling */
/* Tabs as pills (feedback #9, Figma) */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
display: inline-block;
padding: 12px 28px;
border-radius: 999px;
background: var(--color-bg-light, #f2f2f2);
color: var(--color-text, #222);
font-size: 1rem;
font-weight: 600;
transition: background var(--transition), color var(--transition);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
background: #e6e6e6;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
background: var(--color-primary);
color: #fff;
}
/* Real tech specs (ACF specifications) + certificates list */
.product-specifications {
width: 100%;
border-collapse: collapse;
margin: 8px 0 16px;
}
.product-specifications th,
.product-specifications td {
text-align: left;
padding: 10px 14px;
border-bottom: 1px solid var(--color-border-light, #eee);
font-size: 0.9375rem;
line-height: 1.45;
vertical-align: top;
}
.product-specifications th {
width: 40%;
color: var(--color-text-light, #666);
font-weight: 500;
}
.product-specifications tr:nth-child(odd) {
background: var(--color-bg-light, #f7f7f7);
}
/* Правки-4 #6 — список документов на странице товара: строки-карточки с иконкой
PDF, читаемым именем, бейджем расширения и стрелкой скачивания. */
.product-documents {
display: flex;
flex-direction: column;
gap: 8px;
margin: 12px 0 0;
max-width: 640px;
}
.product-doc {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--color-border-light, #e8e8e8);
border-radius: var(--radius-sm, 8px);
background: var(--color-white, #fff);
text-decoration: none;
color: var(--color-text, #222);
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.product-doc:hover {
border-color: var(--color-primary, #00843D);
box-shadow: 0 2px 10px -4px rgba(0, 0, 0, 0.15);
background: #fafffb;
}
.product-doc__icon {
flex-shrink: 0;
display: flex;
color: #d0342c; /* красный «PDF» */
}
.product-doc__name {
flex: 1;
min-width: 0;
font-size: 0.9375rem;
line-height: 1.4;
word-break: break-word;
}
.product-doc__ext {
flex-shrink: 0;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--color-text-light, #666);
background: var(--color-bg-light, #f2f4f3);
border-radius: 4px;
padding: 3px 7px;
}
.product-doc__arrow {
flex-shrink: 0;
display: flex;
color: var(--color-primary, #00843D);
opacity: 0.6;
transition: opacity var(--transition), transform var(--transition);
}
.product-doc:hover .product-doc__arrow {
opacity: 1;
transform: translateY(2px);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
padding: 0;
margin: 0 0 24px;
border-bottom: none;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
border: none;
background: none;
padding: 0;
margin: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
border-bottom: none;
margin-bottom: 0;
}
.product-tabs__btn {
padding: 12px 24px;
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text-light);
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
cursor: pointer;
transition: all var(--transition);
white-space: nowrap;
min-height: 44px;
}
.product-tabs__btn:hover,
.product-tabs__btn.is-active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.product-tabs__content {
padding: 24px 0;
}
.product-tabs__panel {
display: none;
}
.product-tabs__panel.is-active {
display: block;
}
.product-tabs__panel p {
margin-bottom: 16px;
line-height: 1.7;
}
.product-tabs__panel table {
width: 100%;
border-collapse: collapse;
}
.product-tabs__panel table th,
.product-tabs__panel table td {
padding: 10px 16px;
border-bottom: 1px solid var(--color-border-light);
text-align: left;
font-size: 0.9375rem;
}
.product-tabs__panel table th {
font-weight: 600;
color: var(--color-text);
width: 40%;
}
.product-tabs__panel table td {
color: var(--color-text-light);
}
/* --------------------------------------------------------------------------
Content tables inserted via editor (Advanced Editor Tools) inside
product / category / page descriptions — feedback «Доработки-3» #4 (2026-07-03).
Editor tables render borderless with loose row spacing; give them borders
and compact padding to match the styled ТТХ tables.
-------------------------------------------------------------------------- */
.page-content table,
.about-section table,
.entry-content table,
.term-description table,
.woocommerce-product-details__short-description table,
.woocommerce-Tabs-panel table {
width: 100%;
border-collapse: collapse;
margin: 16px 0 24px;
font-size: 0.9375rem;
line-height: 1.4;
}
.page-content table th,
.page-content table td,
.about-section table th,
.about-section table td,
.entry-content table th,
.entry-content table td,
.term-description table th,
.term-description table td,
.woocommerce-product-details__short-description table th,
.woocommerce-product-details__short-description table td,
.woocommerce-Tabs-panel table th,
.woocommerce-Tabs-panel table td {
padding: 8px 14px;
border: 1px solid var(--color-border, #e0e0e0);
text-align: left;
vertical-align: top;
line-height: 1.4;
}
.page-content table th,
.about-section table th,
.entry-content table th,
.term-description table th,
.woocommerce-product-details__short-description table th,
.woocommerce-Tabs-panel table th {
font-weight: 600;
color: var(--color-text);
background: var(--color-bg-light, #f7f7f7);
}
/* --------------------------------------------------------------------------
Page Templates
-------------------------------------------------------------------------- */
.page-header {
background-color: var(--color-bg-light);
padding: 32px 0;
}
.page-header__title {
font-size: 1.75rem;
font-weight: 700;
line-height: 1.3;
}
.page-header__breadcrumbs {
font-size: 0.9375rem;
font-weight: 300;
color: var(--color-text-muted);
margin-top: 8px;
line-height: 1.6;
}
.page-header__breadcrumbs a {
color: var(--color-text-muted);
text-decoration: none;
}
.page-header__breadcrumbs a:hover {
color: var(--color-primary);
}
.page-header__breadcrumbs span {
color: var(--color-text-light);
}
.page-content {
padding: 40px 0;
}
.page-content p {
margin-bottom: 16px;
line-height: 1.7;
}
.page-content h2 {
margin: 32px 0 16px;
}
.page-content h3 {
margin: 24px 0 12px;
}
.page-content ul,
.page-content ol {
margin-bottom: 16px;
padding-left: 20px;
}
.page-content ul {
list-style: disc;
}
.page-content ol {
list-style: decimal;
}
.page-content li {
margin-bottom: 8px;
line-height: 1.6;
}
.page-content img {
border-radius: var(--radius-md);
margin: 24px 0;
}
/* --------------------------------------------------------------------------
About Page
-------------------------------------------------------------------------- */
.about-section {
padding: 40px 0;
}
.about-section + .about-section {
border-top: 1px solid var(--color-border-light);
}
.about-partners {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 24px;
}
.about-partner-card {
padding: 20px;
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
text-align: center;
}
.about-partner-card img {
max-height: 60px;
margin: 0 auto 12px;
object-fit: contain;
}
.about-partner-card__name {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text);
}
.about-partner-card__desc {
font-size: 0.8125rem;
color: var(--color-text-light);
margin-top: 4px;
}
/* --------------------------------------------------------------------------
Projects Page
-------------------------------------------------------------------------- */
.projects-map {
width: 100%;
height: 500px;
border-radius: 20px;
margin-bottom: 32px;
overflow: hidden;
background-color: var(--color-bg-light);
}
@media (max-width: 768px) {
.projects-map {
height: 282px;
}
}
.projects-timeline {
position: relative;
padding-left: 24px;
}
.projects-timeline::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background-color: var(--color-border-light);
}
.timeline-item {
position: relative;
padding-bottom: 32px;
padding-left: 24px;
}
.timeline-item::before {
content: '';
position: absolute;
left: -29px;
top: 6px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--color-primary);
border: 2px solid var(--color-white);
}
.timeline-item__date {
font-size: 0.8125rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 8px;
}
.timeline-item__title {
font-size: 1.0625rem;
font-weight: 600;
margin-bottom: 8px;
}
.timeline-item__text {
font-size: 0.9375rem;
color: var(--color-text-light);
line-height: 1.6;
}
.timeline-item__image {
margin-top: 12px;
border-radius: var(--radius-md);
overflow: hidden;
}
/* --------------------------------------------------------------------------
Contact Page
-------------------------------------------------------------------------- */
.contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
/* Правки-4 — гэп над формой: у Bitrix-виджета свой верхний отступ (~71px),
из-за него «Отправить запрос» висело ниже левой колонки. Убираем, чтобы
форма выравнивалась по верху с блоком контактов. */
.contact-form .b24-form-wrapper {
padding-top: 0 !important;
}
.contact-form .b24-form-header {
padding-top: 4px !important;
}
.contact-form .b24-form-header-title {
margin-top: 0 !important;
}
.contact-info__item {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid var(--color-border);
}
.contact-info__item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.contact-info__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-primary);
color: var(--color-white);
border-radius: var(--radius-sm);
}
.contact-info__label {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-muted);
margin-bottom: 4px;
}
.contact-info__value {
font-size: 1rem;
color: var(--color-text);
line-height: 1.6;
}
.contact-info__value a {
color: var(--color-text);
font-weight: 600;
}
.contact-info__value a:hover {
color: var(--color-primary);
}
.contact-info__note {
display: inline-block;
font-size: 0.8125rem;
color: var(--color-text-muted);
margin-left: 4px;
}
.contact-form__title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 8px;
}
.contact-form__subtitle {
font-size: 0.9375rem;
color: var(--color-text-muted);
margin-bottom: 24px;
}
/* Bitrix24 inline form container */
.b24-form-wrapper {
background-color: var(--color-bg-light);
border-radius: var(--radius-md);
padding: 24px;
min-height: 300px;
}
/* Bitrix24 form overrides for theme consistency */
.b24-form .b24-form-wrapper {
font-family: inherit;
}
.b24-form .b24-form-control-string input,
.b24-form .b24-form-control-text textarea,
.b24-form .b24-form-control-email input,
.b24-form .b24-form-control-phone input {
border-radius: var(--radius-sm) !important;
font-family: inherit !important;
}
.b24-form .b24-form-btn {
border-radius: var(--radius-sm) !important;
font-family: inherit !important;
}
/* Staff contacts — Правки-5 #1: блок идёт ПЕРВЫМ на странице контактов
(персональные контакты → общие + форма → карта), аватарки убраны. */
.staff-contacts {
margin: 0 0 48px;
}
.staff-section {
margin-bottom: 32px;
}
.staff-section__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid var(--color-border);
}
/* Правки-4/-5 — сотрудники: строки ФИО + должность + email + телефон, без фото. */
.staff-list {
display: flex;
flex-direction: column;
}
.staff-row {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 4px;
border-bottom: 1px solid var(--color-border-light, #eee);
}
.staff-row:last-child {
border-bottom: none;
}
.staff-row__info {
flex: 1 1 40%;
min-width: 180px;
}
.staff-row__name {
font-weight: 600;
font-size: 0.95rem;
line-height: 1.3;
}
.staff-row__position {
font-size: 0.85rem;
color: var(--color-text-muted, #666);
margin-top: 2px;
}
.staff-row__email {
flex: 0 1 auto;
color: var(--color-primary, #00843D);
font-size: 0.9rem;
text-decoration: none;
word-break: break-all;
}
.staff-row__email:hover {
text-decoration: underline;
}
.staff-row__phone {
flex-shrink: 0;
width: 90px;
text-align: right;
font-size: 0.85rem;
color: var(--color-text-muted, #666);
}
@media (max-width: 640px) {
.staff-row {
flex-wrap: wrap;
}
.staff-row__info {
flex-basis: 100%;
min-width: 0;
}
.staff-row__email,
.staff-row__phone {
flex-basis: 100%;
width: auto;
text-align: left;
}
}
.contact-map {
min-height: 450px;
border-radius: var(--radius-md);
overflow: hidden;
margin-top: 40px;
}
.contact-map iframe {
width: 100%;
height: 100%;
min-height: 450px;
border: 0;
}
/* Contact Form 7 override */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 0.9375rem;
transition: border-color var(--transition);
margin-bottom: 16px;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus {
outline: none;
border-color: var(--color-primary);
}
.wpcf7 input[type="submit"] {
background-color: var(--color-primary);
color: var(--color-white);
border: none;
padding: 14px 32px;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 0.9375rem;
cursor: pointer;
transition: background-color var(--transition);
min-height: 44px;
}
.wpcf7 input[type="submit"]:hover {
background-color: var(--color-primary-dark);
}
/* --------------------------------------------------------------------------
404 Page
-------------------------------------------------------------------------- */
.error-404 {
text-align: center;
padding: 80px 20px;
}
.error-404__code {
font-size: 6rem;
font-weight: 700;
color: var(--color-primary);
line-height: 1;
margin-bottom: 16px;
}
.error-404__title {
font-size: 1.5rem;
margin-bottom: 12px;
}
.error-404__text {
color: var(--color-text-light);
margin-bottom: 24px;
}
/* --------------------------------------------------------------------------
Search Form
-------------------------------------------------------------------------- */
.search-form {
display: flex;
max-width: 480px;
}
.search-form__input {
flex: 1;
padding: 12px 16px;
border: 1px solid var(--color-border);
border-right: none;
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
font-size: 0.9375rem;
}
.search-form__input:focus {
outline: none;
border-color: var(--color-primary);
}
.search-form__btn {
padding: 12px 20px;
background-color: var(--color-primary);
color: var(--color-white);
border: 1px solid var(--color-primary);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
cursor: pointer;
font-weight: 600;
font-size: 0.9375rem;
transition: background-color var(--transition);
min-height: 44px;
min-width: 44px;
}
.search-form__btn:hover {
background-color: var(--color-primary-dark);
}
/* --------------------------------------------------------------------------
WooCommerce Overrides
-------------------------------------------------------------------------- */
.woocommerce-notices-wrapper .woocommerce-message {
border-top-color: var(--color-primary);
}
.woocommerce .woocommerce-breadcrumb {
font-size: 0.8125rem;
color: var(--color-text-muted);
margin-bottom: 24px;
}
.woocommerce .woocommerce-breadcrumb a {
color: var(--color-text-muted);
}
.woocommerce .woocommerce-breadcrumb a:hover {
color: var(--color-primary);
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
margin-bottom: 20px;
}
.woocommerce .woocommerce-ordering select {
padding: 10px 14px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: 0.875rem;
}
.woocommerce nav.woocommerce-pagination ul {
border: none;
display: flex;
justify-content: center;
gap: 4px;
margin-top: 32px;
}
.woocommerce nav.woocommerce-pagination ul li {
border: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 10px 16px;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
color: var(--color-text);
transition: all var(--transition);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-white);
}
/* WooCommerce — Description tab heading (hidden, title is in the tab itself) */
.woocommerce-Tabs-panel--description > h2:first-child {
font-size: 0;
margin: 0;
padding: 0;
line-height: 0;
height: 0;
overflow: hidden;
}
/* Доработки-4 #2 — вернуть маркеры списков в описании товара. Глобальный
ресет `ul{list-style:none}` съедал буллеты, а `.page-content` их возвращает
только для страниц; таб описания товара — нет. Возвращаем в виде зелёных
галочек (как на старом сайте, #009846). Скоуп — только панель описания,
чтобы не задеть списки в «Тех. характеристики» / «Документы». */
.woocommerce-Tabs-panel--description ul {
list-style: none;
margin: 0 0 16px;
padding: 0;
}
.woocommerce-Tabs-panel--description ul li {
position: relative;
padding-left: 30px;
margin-bottom: 8px;
line-height: 1.6;
}
.woocommerce-Tabs-panel--description ul li::before {
content: "";
position: absolute;
left: 0;
top: 0.15em;
width: 19px;
height: 19px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23009846'/%3E%3Cpath d='M7 12.4l3.3 3.3L17 9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.woocommerce-Tabs-panel--description ol {
margin: 0 0 16px;
padding-left: 22px;
list-style: decimal;
}
.woocommerce-Tabs-panel--description ol li {
margin-bottom: 8px;
line-height: 1.6;
}
/* --------------------------------------------------------------------------
Responsive — Tablet (768px+)
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
:root {
--container-padding: 24px;
--header-height: 76px;
--section-gap: 64px;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
.section {
padding: var(--section-gap) 0;
}
.hero-banner {
flex-direction: row;
padding: 48px 0;
}
.hero-banner__image {
max-width: 45%;
}
.hero-banner__content {
text-align: left;
flex: 1;
}
.hero-banner__title {
font-size: 2.25rem;
}
.catalog-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.projects-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.wc-categories-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.single-product-layout {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.contact-grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.about-partners {
grid-template-columns: repeat(3, 1fr);
}
.hero-placeholder__title {
font-size: 2.25rem;
}
.partners-carousel__item {
flex: 0 0 170px;
min-width: 170px;
height: 90px;
}
}
/* --------------------------------------------------------------------------
Responsive — Desktop (1024px+)
-------------------------------------------------------------------------- */
@media (min-width: 1024px) {
:root {
--container-padding: 32px;
--section-gap: 72px;
}
h1 { font-size: 2.25rem; }
h2 { font-size: 2rem; }
.hamburger {
display: none;
}
.primary-nav {
display: block;
}
.search-toggle {
display: flex;
}
.header-contacts {
display: flex;
}
.hero-banner {
padding: 56px 0;
gap: 48px;
}
.hero-banner__image {
max-width: 480px;
}
.hero-banner__title {
font-size: 2.75rem;
}
.hero-banner__desc {
font-size: 1.125rem;
}
.catalog-grid {
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.projects-grid {
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.footer-grid {
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 48px;
}
.wc-categories-grid {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.section-title {
font-size: 2.5rem;
line-height: 1.25;
}
.hero-placeholder__title {
font-size: 2.75rem;
}
.hero-placeholder__subtitle {
font-size: 1.125rem;
}
.about-partners {
grid-template-columns: repeat(4, 1fr);
}
.partners-carousel__item {
flex: 0 0 190px;
min-width: 190px;
height: 100px;
}
}
/* --------------------------------------------------------------------------
Responsive — Large (1200px+)
-------------------------------------------------------------------------- */
@media (min-width: 1200px) {
:root {
--section-gap: 80px;
}
.partners-section {
padding: var(--section-gap) 0;
}
}
/* --------------------------------------------------------------------------
Product — Manufacturer Badge
-------------------------------------------------------------------------- */
/* NB: catalog-card logo moved to a header row above the photo (.product-card__logo,
see product card section) — «Доработки-3» #5. The old absolute .product-card-mfr-badge
overlay was removed. Below is the single-product page badge only. */
.product-manufacturer-badge {
margin-bottom: 8px;
}
.product-manufacturer-logo {
max-height: 40px;
width: auto;
height: auto;
object-fit: contain;
margin: 0;
border-radius: 0;
}
/* --------------------------------------------------------------------------
Bitrix24 CRM — Request Button & PDF Button
-------------------------------------------------------------------------- */
.product-crm-actions,
.summary .product-crm-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 24px;
margin-bottom: 16px;
grid-column: 1 / -1;
clear: both;
}
.woocommerce div.product .summary .product-crm-actions,
.woocommerce div.product .entry-summary .product-crm-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin: 20px 0;
clear: both;
}
.woocommerce div.product .summary button.btn-crm-request,
.woocommerce div.product .entry-summary button.btn-crm-request,
button.btn-crm-request {
display: flex !important;
align-items: center;
justify-content: center;
width: 100% !important;
height: 50px;
padding: 0 24px;
background-color: #00843D !important;
color: #fff !important;
border: 2px solid #00843D !important;
border-radius: 6px;
font-family: var(--font-family);
font-size: 1rem !important;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;
line-height: 1;
text-transform: none;
letter-spacing: 0;
}
.woocommerce div.product button.btn-crm-request:hover {
background-color: #006b32 !important;
border-color: #006b32 !important;
}
.woocommerce div.product a.btn-crm-pdf,
a.btn-crm-pdf {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
background-color: #fff !important;
color: #00843D !important;
border: 2px solid #00843D !important;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s;
}
.woocommerce div.product a.btn-crm-pdf:hover {
background-color: #00843D !important;
color: #fff !important;
}
.btn-crm-request {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
background-color: var(--color-primary);
color: var(--color-white);
border: 2px solid var(--color-primary);
border-radius: var(--radius-sm);
font-family: var(--font-family);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition);
text-transform: none;
letter-spacing: 0;
}
.btn-crm-request:hover,
.btn-crm-request:focus-visible {
background-color: var(--color-primary-dark);
border-color: var(--color-primary-dark);
}
.btn-crm-pdf,
.btn-crm-certificates {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 50px;
background-color: var(--color-white);
color: var(--color-primary);
border: 2px solid var(--color-primary);
border-radius: var(--radius-sm);
font-family: var(--font-family);
text-decoration: none;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition);
text-decoration: none;
text-transform: none;
letter-spacing: 0;
}
.btn-crm-pdf:hover,
.btn-crm-pdf:focus-visible,
.btn-crm-certificates:hover,
.btn-crm-certificates:focus-visible {
background-color: var(--color-primary);
color: var(--color-white);
}
/* --------------------------------------------------------------------------
Bitrix24 CRM — Modal Dialog
-------------------------------------------------------------------------- */
.crm-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 10000;
align-items: center;
justify-content: center;
padding: 16px;
}
.crm-modal-overlay.is-open {
display: flex;
}
.crm-modal {
position: relative;
background: var(--color-white);
border-radius: var(--radius-lg);
width: 100%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
padding: 32px 24px 24px;
box-shadow: var(--shadow-lg);
animation: crm-modal-appear 0.25s ease;
}
@keyframes crm-modal-appear {
from {
opacity: 0;
transform: translateY(20px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.crm-modal__close {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
font-size: 1.5rem;
line-height: 1;
color: var(--color-text-muted);
cursor: pointer;
border-radius: 50%;
transition: all var(--transition);
}
.crm-modal__close:hover,
.crm-modal__close:focus-visible {
color: var(--color-text);
background-color: var(--color-bg-light);
}
.crm-modal__title {
font-size: 1.125rem;
font-weight: 700;
color: var(--color-text);
margin-bottom: 20px;
padding-right: 32px;
}
.crm-modal__body {
min-height: 200px;
}
/* Bitrix24 form inside modal — ensure it fills the container */
.crm-modal__body iframe {
width: 100% !important;
}
/* --------------------------------------------------------------------------
Cookie consent
-------------------------------------------------------------------------- */
.cookie-consent {
position: fixed;
z-index: 9999;
bottom: 20px;
left: 20px;
right: auto;
max-width: 380px;
animation: cookieConsentFadeIn 0.5s ease-in-out;
transition: opacity 0.3s ease;
}
.cookie-consent[hidden] {
display: none;
}
@keyframes cookieConsentFadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.cookie-consent__inner {
display: grid;
grid-gap: 15px;
font-size: 14px;
padding: 20px;
line-height: 1.5;
background-color: #fff;
border-radius: var(--radius-md, 10px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}
.cookie-consent__text {
color: #5a5a5a;
margin: 0;
}
.cookie-consent__link {
color: var(--color-primary, #00843D);
text-decoration: underline;
}
.cookie-consent__link:hover {
color: var(--color-primary-dark, #006a31);
}
.cookie-consent__button {
background: var(--color-primary, #00843D);
color: #fff;
border: none;
padding: 10px 24px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: background-color 0.3s ease;
justify-self: end;
font-family: inherit;
}
.cookie-consent__button:hover {
background-color: var(--color-primary-dark, #006a31);
}
@media (max-width: 480px) {
.cookie-consent {
left: 10px;
right: 10px;
bottom: 10px;
max-width: none;
}
}
/* --------------------------------------------------------------------------
Print
-------------------------------------------------------------------------- */
@media print {
.site-header,
.site-footer,
.chat-widget,
.hamburger,
.mobile-menu,
.crm-modal-overlay,
.cookie-consent,
.product-crm-actions {
display: none;
}
body {
padding-top: 0;
}
.container {
max-width: 100%;
}
}
/* --------------------------------------------------------------------------
Single Project (CPT-driven /projects//)
-------------------------------------------------------------------------- */
.single-project__gallery {
margin-bottom: 32px;
/* Доработки-4 #5 — фото проектов растягивались на всю ширину контента и
смотрелись огромными. Ограничиваем галерею разумной шириной, чтобы фото
были «смотрибельными». */
max-width: 640px;
}
.single-project__main {
display: block;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-white);
box-shadow: var(--shadow-sm);
}
.single-project__main img {
display: block;
width: 100%;
height: auto;
margin: 0;
border-radius: 0;
}
.single-project__thumbs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 12px;
margin-top: 12px;
}
.single-project__thumb {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--radius-sm);
background: var(--color-white);
box-shadow: var(--shadow-sm);
transition: transform var(--transition);
}
.single-project__thumb:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.single-project__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
border-radius: 0;
display: block;
}
.single-project__meta {
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 20px 24px;
margin-bottom: 24px;
background: #F7F7F7;
border-radius: var(--radius-md);
}
.single-project__meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.single-project__meta-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
}
.single-project__meta-value {
font-size: 1rem;
font-weight: 500;
color: var(--color-text);
}
.single-project__meta-value a {
color: var(--color-primary, #00843D);
text-decoration: none;
border-bottom: 1px dashed currentColor;
}
.single-project__meta-value a:hover {
border-bottom-style: solid;
}
.single-project__equipment {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
}
.single-project__content {
margin-top: 24px;
}
/* Навигация «Предыдущий / Следующий проект» — задача 20 (было без стилей → messy) */
.single-project .post-navigation {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--color-border, #e5e7eb);
}
.single-project .post-navigation .nav-links {
display: flex;
justify-content: space-between;
gap: 24px;
}
.single-project .post-navigation .nav-previous,
.single-project .post-navigation .nav-next {
flex: 1 1 0;
min-width: 0;
}
.single-project .post-navigation .nav-next {
text-align: right;
}
.single-project .post-navigation a {
display: inline-flex;
flex-direction: column;
gap: 4px;
text-decoration: none;
color: var(--color-text, #1f2937);
transition: color 0.2s ease;
}
.single-project .post-navigation a:hover {
color: var(--color-primary, #00843d);
}
.single-project .post-navigation .nav-subtitle {
font-size: 13px;
color: var(--color-text-muted, #6b7280);
}
.single-project .post-navigation .nav-title {
font-weight: 600;
line-height: 1.35;
}
@media (max-width: 767px) {
.single-project__thumbs {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.single-project__meta {
flex-direction: column;
gap: 12px;
padding: 16px;
}
.single-project .post-navigation .nav-links {
flex-direction: column;
gap: 20px;
}
.single-project .post-navigation .nav-next {
text-align: left;
}
}