/* ============================================================================ medispatechnology.ru — HOMEPAGE RESKIN (2026-08) ---------------------------------------------------------------------------- EVERY rule is scoped to body.index — the homepage-only class emitted by header.php:142. No other page on the site can be affected by this file. Phase 2 (site-wide rollout) = mechanical removal of the "body.index " prefix. Loaded LAST in (see header.php) so it wins specificity ties against styles.css / template_styles.css, which Bitrix injects after custom.css. ========================================================================== */ /* ---------------------------------------------------------------- 1. TOKENS */ :root { --color-primary-dark: #0E3A3F; --color-primary-deep: #14494F; --color-teal-cta: #1F8A7D; --color-teal-hover: #176F64; --color-aqua-mint: #A8DCD4; --color-bg-light: #F6FAF9; --color-bg-card: #FFFFFF; --color-gold: #C9A96A; --color-ink: #12232A; --color-ink-muted: #55676E; --color-text-inverse: #FFFFFF; --color-hairline: #E2ECEA; --radius-card: 16px; --radius-button: 8px; --radius-input: 8px; --shadow-card: 0 8px 24px rgba(14, 58, 63, .08); --shadow-card-hover: 0 12px 32px rgba(14, 58, 63, .14); --font-head: "Montserrat", "Segoe UI", Arial, sans-serif; --font-body: "Manrope", "Inter", "Segoe UI", Arial, sans-serif; --gutter: 24px; --section-gap: 64px; } /* Self-hosted variable faces — NO external CDN at runtime. Google ships these as variable fonts, so one file per family+subset covers the whole weight range (verified by md5: the per-weight downloads were byte-identical). 4 files / 101,120 b instead of 8 files / 202,240 b. Split by unicode-range so Latin-only viewports never fetch the Cyrillic file and vice versa. */ @font-face{font-family:"Montserrat";font-style:normal;font-weight:400 700;font-display:swap; src:url("fonts/montserrat/montserrat-cyrillic.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;} @font-face{font-family:"Montserrat";font-style:normal;font-weight:400 700;font-display:swap; src:url("fonts/montserrat/montserrat-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:"Manrope";font-style:normal;font-weight:400 700;font-display:swap; src:url("fonts/manrope/manrope-cyrillic.woff2") format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;} @font-face{font-family:"Manrope";font-style:normal;font-weight:400 700;font-display:swap; src:url("fonts/manrope/manrope-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} /* ------------------------------------------------------- 2. BASE TYPOGRAPHY */ body.index { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--color-ink); background-color: var(--color-bg-card); -webkit-font-smoothing: antialiased; } body.index h1, body.index h2, body.index h3, body.index .activities-title, body.index .brands-blocks-heading, body.index .our-brands-heading, body.index .parallax-form-title { font-family: var(--font-head); font-weight: 700; color: var(--color-ink); letter-spacing: .02em; } body.index p { font-size: 16px; line-height: 1.6; color: var(--color-ink); } body.index a { color: var(--color-teal-cta); } body.index a:hover { color: var(--color-teal-hover); } body.index ::selection { background: var(--color-aqua-mint); color: var(--color-ink); } /* Section titles that sit on dark bands */ body.index .activities-title, body.index .brands-blocks-heading { color: var(--color-text-inverse); text-align: center; text-transform: uppercase; letter-spacing: .06em; font-size: 26px; } /* ------------------------------------------------------------- 3. BUTTONS */ /* The live theme's accent is orange (#ff9601 / #ffa800 / #ff8976, ~292 uses). Everything collapses to the teal CTA per the approved mapping. */ body.index .btn a, body.index .person-ext-button a, body.index input[type="submit"], body.index button[type="submit"], body.index .webFormTools input, body.index .modal-btn a, body.index .sliderContent a.link, body.index #slider .link { background-color: var(--color-teal-cta) !important; border: 1.5px solid var(--color-teal-cta) !important; color: var(--color-text-inverse) !important; border-radius: var(--radius-button) !important; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; padding: 13px 30px !important; box-shadow: none !important; transition: background .18s ease, border-color .18s ease; } body.index .btn a:hover, body.index .person-ext-button a:hover, body.index input[type="submit"]:hover, body.index button[type="submit"]:hover, body.index .webFormTools input:hover, body.index .modal-btn a:hover { background-color: var(--color-teal-hover) !important; border-color: var(--color-teal-hover) !important; } /* ------------------------------------------------- 4. TOP UTILITY BAR + NAV */ body.index #topHeader { background-color: var(--color-primary-dark) !important; border: 0 !important; } body.index #topHeader a, body.index #topHeader li, body.index #topHeader .topMenu > li > a, body.index #topService a { color: var(--color-text-inverse) !important; font-size: 13px; font-family: var(--font-body); } body.index #topHeader a:hover, body.index #topService a:hover { color: var(--color-aqua-mint) !important; } /* "Ваш город: Определение" — my larger base font/line-height pushed this onto a SECOND line inside a 32px-tall bar, so the city value was cut off (measured: 185x62 with the reskin vs 188x32 without). Keep it on one line. */ body.index #topService .user-geo-position, body.index .user-geo-position { white-space: nowrap; line-height: 30px; } body.index .user-geo-position-label, body.index .user-geo-position-value, body.index .user-geo-position-value-link { display: inline !important; white-space: nowrap; font-size: 13px; line-height: 30px; color: var(--color-text-inverse) !important; } body.index .user-geo-position-value-link { text-decoration: underline; text-underline-offset: 2px; } body.index .user-geo-position-value-link:hover { color: var(--color-aqua-mint) !important; } /* category nav band */ body.index #mainMenuContainer, body.index #mainMenu, body.index #menuCatalogSection { background-color: var(--color-primary-dark) !important; border: 0 !important; } body.index #mainMenu > li > a, body.index #mainMenu a.root-item, body.index #menuCatalogSection .catalogButton { color: var(--color-text-inverse) !important; font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: .02em; border: 0 !important; } body.index #mainMenu > li > a:hover, body.index #mainMenu a.root-item:hover { color: var(--color-aqua-mint) !important; box-shadow: inset 0 -3px 0 var(--color-aqua-mint); } body.index #mainMenu .drop, body.index #mainMenu .dropdown-menu, body.index .topMenu .drop { background-color: var(--color-bg-card) !important; border: 1px solid var(--color-hairline) !important; border-radius: var(--radius-button); box-shadow: var(--shadow-card); } /* Dropdown links must be INK on the white panel. NOTE the specificity trap: `body.index #topHeader a` carries an ID and beat `body.index .topMenu .drop a` (classes only), so top-bar submenu links rendered WHITE ON WHITE and were invisible. These selectors therefore include #topHeader / #mainMenu so they outrank the bar-level colour rule. */ body.index #mainMenu .drop a, body.index #topHeader .topMenu .drop a, body.index #topHeader .drop a, body.index #topHeader .dropdown-menu a, body.index .topMenu .drop a { color: var(--color-ink) !important; } body.index #mainMenu .drop a:hover, body.index #topHeader .topMenu .drop a:hover, body.index #topHeader .drop a:hover, body.index .topMenu .drop a:hover { color: var(--color-teal-cta) !important; background-color: var(--color-bg-light) !important; } /* ---------------------------------------------------------- 5. MAIN HEADER */ body.index .stSlickHead, body.index #header, body.index .telephone_on_fixedHeader { background-color: var(--color-bg-card) !important; border-bottom: 1px solid var(--color-hairline); } body.index .stSlickHead a, body.index .telephone_on_fixedHeader a { color: var(--color-ink); } body.index .stSlickHead .phone, body.index .telephone_on_fixedHeader { font-family: var(--font-head); font-weight: 600; color: var(--color-ink); } /* messenger icons -> teal circles */ body.index .gr__social-block a, body.index .gr__social-block img { border-radius: 50%; filter: none; } body.index .gr__social-block a { background-color: var(--color-teal-cta); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; } /* search field — real selector is #searchQuery.search-input-field inside form.search-input-form (verified in-browser; it is width:0 until #openSearch expands it, which is why an earlier guess at `.search input` never applied) */ body.index #searchQuery, body.index .search-input-field, body.index .search-input-form input[type="text"] { border: 1px solid var(--color-hairline) !important; border-radius: 24px !important; background-color: var(--color-bg-light) !important; padding: 9px 18px !important; font-family: var(--font-body); font-size: 15px; color: var(--color-ink) !important; } body.index #searchQuery:focus, body.index .search-input-field:focus { border-color: var(--color-teal-cta) !important; outline: none; box-shadow: 0 0 0 3px rgba(31,138,125,.14) !important; } body.index .search-input-form { border-radius: 24px; overflow: hidden; } /* ------------------------------------------------------------- 6. HERO */ body.index #slider { background-image: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary-deep) 100%) !important; position: relative; overflow: hidden; } /* NOTE: no overlay on the hero. Verified on the live site — the slides are background images served from /upload/iblock/ (CONTENT), and they already carry the petrol + teal hexagon treatment the mockup was drawn from. The gradient above is a fallback that shows only before/behind the slide image; tinting the slides themselves would mean overlaying client content, which is outside the agreed boundary. */ body.index #slider .sliderContent, body.index #slider .limiter { position: relative; z-index: 2; } body.index #slider h2, body.index #slider .sliderContent h2, body.index #slider .sliderContent strong { font-family: var(--font-head); font-weight: 700; color: var(--color-text-inverse) !important; letter-spacing: .01em; } body.index #slider .sliderContent p, body.index #slider .sliderContent span { color: var(--color-aqua-mint) !important; } /* dots — the real element is `#slider > ol.pager > li` (found on the LIVE site post-deploy; the .owl-dot/.dot guesses below never matched and the dots were still beige #f1e7e2) */ body.index #slider ol.pager li, body.index #slider .owl-dot span, body.index #slider .dot, body.index #slider .sliderNav span { background-color: rgba(255, 255, 255, .45) !important; border: 0 !important; border-radius: 50% !important; } body.index #slider ol.pager li.active, body.index #slider ol.pager li.selected, body.index #slider ol.pager li:hover, body.index #slider .owl-dot.active span, body.index #slider .dot.active { background-color: var(--color-text-inverse) !important; } /* The theme's keyword h1 ("Группа компаний «МЕДИКАЛ СПА ТЕХНОЛОДЖИ» — магазин профессионального оборудования…") sits directly under the hero. The hero now carries the real h1, so this one is hidden — one h1 per page. IT IS HIDDEN HERE, UNCONDITIONALLY, AND THAT IS DELIBERATE. It used to be hidden only by overrides-mobile.css, inside TWO media queries: (max-width:768px) and (min-width:769px). That left two ways for the long title to reappear under the hero: 1. a fractional viewport between 768 and 769 matches NEITHER query — and Safari does report fractional widths at some zoom levels; 2. if overrides-mobile.css is stale, slow or fails to load, this file alone used to merely restyle the h1 to 15px, so it rendered. A single rule with no media query closes both. Do not move it back inside one. The text is not lost: it remains in and in the footer copy. */ body.index #main > h1 { display: none !important; } /* -------------------------------------------- 7. SECTION RHYTHM + REORDER */ /* #main is a plain block; making it a flex column lets us move the certificates block to its mockup position WITHOUT touching the DOM (approved: CSS reorder only — heading hierarchy + SEO stay intact). */ body.index #main { display: flex; flex-direction: column; } /* CRITICAL: order must NOT be assigned per class — .brands-blocks-wrap and .info-block-wrap each match THREE different sections, so a class-level order value collapses them into one group and scrambles the page. Everything keeps order:0 (= source order); ONLY the approved certificates move. This is the single sanctioned deviation from DOM order. */ body.index #main > * { order: 0; } body.index #main > .banners-outer-wrap { order: 1; } /* certificates -> bottom */ body.index .info-block-wrap, body.index .our-brands-wrap, body.index .activities-wrap, body.index .brands-blocks-wrap { padding: var(--section-gap) 0; } /* ------------------------------------------------- 8. NEWS / PROMO CARDS */ /* .brands-blocks-wrap is shared by the news block AND both product carousels. NOTE: ALL THREE contain .owl-carousel, so :has(.owl-carousel) does NOT separate them (an earlier pass got this wrong and painted the news block petrol). Verified differentiator: the news block renders 11 .btn elements ("ПОДРОБНЕЕ"); the two product carousels render 0. */ body.index #main > .brands-blocks-wrap:has(.btn) { background-color: var(--color-bg-light); } body.index #main > .brands-blocks-wrap:has(.btn) .brands-blocks-heading { color: var(--color-ink); } body.index .banners-wrap { gap: var(--gutter); } body.index .banners-wrap .banner, body.index .banner { background-color: var(--color-bg-card); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; } body.index .banners-wrap .banner:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); } body.index .banner img { display: block; width: 100%; height: auto; } /* ------------------------------------------------------------ 9. VIDEO */ /* the theme constrains .main-video to ~779px; width:100% + max-width lets it reach the intended 1200px container width (verified: computed was 778.656px) */ body.index .main-video { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); background-color: var(--color-primary-dark); } body.index .main-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; } /* --------------------------------------------------------- 10. OUR BRANDS */ body.index .our-brands-wrap { background: var(--color-bg-card); } body.index .our-brands-heading { color: var(--color-ink); text-transform: uppercase; text-align: center; letter-spacing: .06em; } body.index .our-brands-wrap .owl-carousel img { filter: grayscale(100%) opacity(.62); transition: filter .2s ease; } body.index .our-brands-wrap .owl-carousel img:hover { filter: none; } /* --------------------------------------- 11. НАПРАВЛЕНИЯ ДЕЯТЕЛЬНОСТИ */ body.index .activities-wrap { background: var(--color-primary-dark); } body.index .activities-wrap .activity-title-1, body.index .activities-wrap .activity-title-2 { color: var(--color-text-inverse); } body.index .activities-wrap a, body.index .activities-wrap .activity-title-wrap { border-radius: var(--radius-card); overflow: hidden; } body.index .activities-wrap img { transition: transform .35s ease; display:block; width:100%; height:auto; } body.index .activities-wrap a:hover img { transform: scale(1.05); } /* dark glass gradient behind the bottom labels */ body.index .activities-wrap .activity-title-wrap { position: relative; background-image: linear-gradient(to top, rgba(14,58,63,.92) 0%, rgba(14,58,63,.55) 55%, rgba(14,58,63,0) 100%); } /* --------------------------------------------------- 12. TEXT / INFO BLOCKS */ body.index .info-block-wrap { background: var(--color-bg-card); } body.index .info-block-wrap.no-margin-top { background: var(--color-bg-light); } body.index .info-block-wrap h2 { font-size: 30px; color: var(--color-ink); margin-bottom: 18px; } body.index .info-block-wrap p { color: var(--color-ink-muted); } body.index .info-block-wrap ul li { color: var(--color-ink-muted); } /* ------------------------------------------- 13. PRODUCT CAROUSEL SECTIONS */ /* product carousels = .brands-blocks-wrap WITHOUT .btn (see note above) */ body.index #main > .brands-blocks-wrap:not(:has(.btn)) { background-color: var(--color-primary-dark); } body.index #main > .brands-blocks-wrap:not(:has(.btn)) .brands-blocks-heading { color: var(--color-text-inverse); } /* white product cards on the petrol band */ body.index .brands-blocks-wrap .owl-item > div, body.index .brands-blocks-wrap .owl-carousel .item { background-color: var(--color-bg-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; position: relative; transition: box-shadow .2s ease, transform .2s ease; } body.index .brands-blocks-wrap .owl-item > div:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); } /* product imagery is NEVER filtered or tinted — it must read truthfully. Only padding/containment is applied so cards sit on a consistent grid. */ body.index .brands-blocks-wrap .owl-item > div > img { display: block; width: 100%; height: auto; object-fit: contain; background-color: var(--color-bg-card); } body.index .brands-blocks-wrap .owl-item > div .fill-link { z-index: 3; } body.index .owl-nav button, body.index .owl-prev, body.index .owl-next { background-color: var(--color-bg-card) !important; color: var(--color-primary-dark) !important; border-radius: 50% !important; width: 44px; height: 44px; box-shadow: var(--shadow-card); } /* ------------------------------------------------------ 14. CERTIFICATES */ body.index .banners-2 .banners-wrap .banner, body.index .banners-outer-wrap .banner { background-color: var(--color-bg-card); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } /* -------------------------------------------------------- 15. PARALLAX */ body.index .parallax-wrapper .parallax-block-text, body.index .parallax-wrapper h2, body.index .parallax-wrapper p { color: var(--color-text-inverse); } body.index .parallax-wrapper .bg-dark-opacity { background-image: linear-gradient(135deg, rgba(14,58,63,.88) 0%, rgba(20,73,79,.80) 100%) !important; } /* ------------------------------------------- 16. SPECIAL-PRICES BANNER */ /* class in live HTML is literally "person-ext-banner index}" (known bug, left unfixed by decision) — target the valid class only. */ body.index .person-ext-banner { background-color: var(--color-primary-deep) !important; border-radius: 0; } body.index .person-ext-message { color: var(--color-text-inverse) !important; font-family: var(--font-head); letter-spacing: .04em; } /* --------------------------------------------------- 17. VIEWED PRODUCTS */ body.index #viewedProduct { background: var(--color-bg-light); padding: 40px 0; } body.index #viewedProduct .title, body.index #viewedProduct .heading { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .06em; color: var(--color-ink); text-align: center; } body.index #viewedProduct .productList .item { background-color: var(--color-bg-card); border: 1px solid var(--color-hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } /* ------------------------------------------------------- 18. LEAD FORM */ body.index .parallax.parallax-form { background: var(--color-primary-dark); } body.index .parallax-form .bg-dark-opacity { background-image: linear-gradient(90deg, rgba(14,58,63,.82) 0%, rgba(20,73,79,.72) 100%) !important; } body.index .parallax-form-title { font-family: var(--font-head); font-weight: 700; font-size: 34px; line-height: 1.2; text-transform: uppercase; color: var(--color-text-inverse); letter-spacing: .03em; } /* right-hand white form card */ body.index .parallax-form-wrap { background-color: var(--color-bg-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover); padding: 28px; } body.index .webFormDw.my input[type="text"], body.index .webFormDw.my input[type="email"], body.index .webFormDw.my input[type="tel"], body.index .webFormDw.my select, body.index .webFormDw.my textarea { background-color: var(--color-bg-card) !important; border: 1px solid var(--color-hairline) !important; border-radius: var(--radius-input) !important; padding: 11px 14px !important; font-family: var(--font-body); font-size: 15px; color: var(--color-ink) !important; box-shadow: none !important; } body.index .webFormDw.my input:focus, body.index .webFormDw.my select:focus, body.index .webFormDw.my textarea:focus { border-color: var(--color-teal-cta) !important; outline: none; box-shadow: 0 0 0 3px rgba(31,138,125,.14) !important; } body.index .webFormItemError input, body.index .webFormError { border-color: #D8574C !important; color: #D8574C; } body.index .webFormTools input[type="submit"] { width: 100%; } /* ---------------------------------------------------------- 19. FOOTER */ body.index .fc, body.index footer, body.index .footerCopyright { background-color: var(--color-primary-dark) !important; color: var(--color-text-inverse); } /* real footer heading element is li.footerMenu__heading — `.fc .column .heading` and `.fc .column > .title` matched NOTHING (dead CSS found by rule audit; the four columns contain div.logo / ul.widget_links / ul.footerMenu only) */ body.index .footerMenu__heading, body.index .fc .footerMenu__heading { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-inverse) !important; font-size: 14px; list-style: none; margin-bottom: 10px; } body.index .fc a, body.index .footerMenu a { color: rgba(255,255,255,.82) !important; font-size: 14px; } body.index .fc a:hover, body.index .footerMenu a:hover { color: var(--color-aqua-mint) !important; } body.index .footerCopyright { border-top: 1px solid var(--color-gold); font-size: 12px; color: rgba(255,255,255,.62); line-height: 1.55; } body.index .footerCopyright p { color: rgba(255,255,255,.62); font-size: 12px; } /* --------------------------------- 20. COOKIE / MODALS / UP BUTTON / MISC */ body.index .widget_cookie, body.index .notify-cookie-modal__wrapper { background-color: var(--color-primary-dark) !important; color: var(--color-text-inverse); border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover); } body.index .widget_cookie a { color: var(--color-aqua-mint) !important; } body.index .widget_cookie__btn-close-cookie, body.index .widget_cookie button { background-color: var(--color-teal-cta) !important; color: var(--color-text-inverse) !important; border-radius: var(--radius-button) !important; border: 0 !important; } body.index #upButton { background-color: var(--color-teal-cta) !important; border-radius: 50% !important; border: 0 !important; box-shadow: var(--shadow-card); } body.index #modal .modal-content, body.index .modal1 .block { background-color: var(--color-primary-dark) !important; border-radius: var(--radius-card) !important; color: var(--color-text-inverse); } body.index #modal .modal-header2 { color: var(--color-gold) !important; } /* ========================================================================== 21. WARM-COLOUR SWEEP — containers the first pass missed -------------------------------------------------------------------------- These are the structural containers that actually paint the brown/beige. They are very desaturated (#3f3331 has only 14 points of r-b spread), which is why a naive "warm" detector skips them. Verified by computed style. ========================================================================== */ /* --- the two biggest offenders: page + footer shells --- */ body.index #main { background: var(--color-bg-card) !important; } body.index #footer { background: var(--color-primary-dark) !important; } /* --- header band: #subHeader is the real header container (beige #f1e7e2) --- */ body.index #subHeader { background-color: var(--color-bg-card) !important; border-bottom: 1px solid var(--color-hairline); } /* top utility bar: children re-paint brown over the petrol parent */ body.index #topHeader .limiter, body.index #topHeader .topMenu, body.index #topHeader #topService, body.index ul.topMenu, body.index ul#topService { background: transparent !important; } /* --- light sections that were beige --- */ body.index .our-brands-heading, body.index #footerTabs, body.index #footerTabsCaption { background: var(--color-bg-light) !important; } body.index #footerTabs, body.index #footerTabsCaption { color: var(--color-ink); } /* --- certificates section shell --- */ body.index .banners-outer-wrap { background: var(--color-bg-light) !important; } /* --- header icons / links that carried brown --- */ body.index a.icon, body.index a#openSearch.icon, body.index a.selected, body.index .stSlickHead a.icon { color: var(--color-primary-dark) !important; } body.index a.icon:hover, body.index a#openSearch.icon:hover { color: var(--color-teal-cta) !important; } body.index .fa, body.index i.fa { color: var(--color-primary-dark); } body.index .gr__social-block .fa, body.index .fc .fa, body.index #footer .fa { color: var(--color-text-inverse); } /* --- bottom logo plate --- */ body.index .bottom-logo-wrap { background: rgba(14, 58, 63, .80) !important; } /* --- gold straggler: #DBB460 -> token --- */ body.index .modal-text, body.index .modal-text a { color: var(--color-gold) !important; } body.index .modal-text { border-top-color: var(--color-gold) !important; border-bottom-color: var(--color-gold) !important; } /* ========================================================================== 22. DECORATIVE IMAGERY — overlay harmonisation (NOT filters) -------------------------------------------------------------------------- Applies ONLY to decorative lifestyle imagery: the 6 направления cards and the lead-form background photo. Product / equipment / cosmetics photography is deliberately untouched so products render truthfully. Nothing in /upload/ or the iblock content is modified — this is a pure CSS overlay. ========================================================================== */ /* --- 6 направления cards: petrol tint + dark-glass gradient, labels overlaid --- */ body.index .activities-item { position: relative; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); } body.index .activities-item img { display: block; width: 100%; height: 100%; min-height: 287px; object-fit: cover; transition: transform .35s ease; } body.index .activities-item:hover img { transform: scale(1.05); } /* petrol tint — harmonises warm photography into the palette (~18%) */ body.index .activities-item::before { content: ""; position: absolute; inset: 0; background-color: rgba(14, 58, 63, .18); z-index: 1; pointer-events: none; } /* labels overlaid on the photo, dark-glass gradient behind them */ body.index .activities-item .activity-title-wrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 20px 18px; background-image: linear-gradient(to top, rgba(14, 58, 63, .94) 0%, rgba(14, 58, 63, .72) 48%, rgba(14, 58, 63, 0) 100%) !important; } body.index .activities-item .activity-title-1 { background-color: transparent !important; color: var(--color-text-inverse) !important; font-family: var(--font-head); font-weight: 700; font-size: 19px; line-height: 1.25; } body.index .activities-item .activity-title-2 { background-color: transparent !important; /* was solid #2f2827 */ color: rgba(255, 255, 255, .88) !important; font-size: 14px; line-height: 1.45; } /* the full-card link must stay clickable above tint + gradient */ body.index .activities-item a.fill-link { z-index: 4; } /* --- lead-form background photo: petrol tint + petrol-hued dark glass --- */ body.index .parallax-form .parallax-img { object-fit: cover; } body.index .parallax-form::before { content: ""; position: absolute; inset: 0; background-color: rgba(14, 58, 63, .20); /* harmonising tint */ z-index: 1; pointer-events: none; } /* existing overlay re-tinted to petrol; opacity kept high enough that the white headline stays legible over a busy photo */ body.index .parallax-form .bg-dark-opacity { background-image: linear-gradient(90deg, rgba(14,58,63,.80) 0%, rgba(20,73,79,.62) 100%) !important; z-index: 2; } body.index .parallax-form .limiter { position: relative; z-index: 3; } /* ========================================================================== 23. POPUPS / MODALS SWEEP -------------------------------------------------------------------------- Each popup was force-opened in a real browser and audited for warm values. Findings fixed below. Verified: #requestPrice, #askQuest, #askPrice, #requestPrice2 were already clean (0 warm values). ========================================================================== */ /* city detection ("Выберите ваш город") */ body.index .geo-location-window-container-bg { background: rgba(14, 58, 63, .55) !important; } /* Only ONE element may be the card. Styling BOTH the container and the .wp produced two stacked white panels with two shadows, offset by the container's 24px side padding — the doubled/misaligned popup reported on live. Original: container was transparent, .wp was beige. So .wp is the card. */ body.index .geo-location-window-container { background-color: transparent !important; box-shadow: none !important; border-radius: 0 !important; } body.index .geo-location-window-wp { background-color: var(--color-bg-card) !important; border-radius: var(--radius-card) !important; box-shadow: var(--shadow-card-hover) !important; /* NO overflow:hidden — the suggestions list is position:absolute and would be clipped by it. */ } /* round the petrol heading to match the card's top corners without clipping */ body.index .geo-location-window-heading { border-radius: var(--radius-card) var(--radius-card) 0 0; } /* close X must be light against the petrol heading / dark modal */ body.index .geo-location-window-exit, body.index #close-modal, body.index #modal .close { color: var(--color-text-inverse) !important; opacity: .9; } body.index .geo-location-window-exit:hover, body.index #close-modal:hover, body.index #modal .close:hover { opacity: 1; } body.index .geo-location-window-heading { background-color: var(--color-primary-dark) !important; color: var(--color-text-inverse) !important; font-family: var(--font-head); font-weight: 600; letter-spacing: .02em; } body.index .geo-location-window-search input { background-color: var(--color-bg-light) !important; border: 1px solid var(--color-hairline) !important; border-radius: var(--radius-input) !important; color: var(--color-ink) !important; } body.index .geo-location-window-button-container a, body.index .geo-location-window-button-container button, body.index .geo-location-window-button-container input { background-color: var(--color-teal-cta) !important; color: var(--color-text-inverse) !important; border: 0 !important; border-radius: var(--radius-button) !important; } body.index .geo-location-window-search-values li:hover { background: var(--color-bg-light) !important; } /* second cookie notice (separate widget from scody:cookie) */ body.index .notify-cookie-modal__wrapper { background-color: var(--color-primary-dark) !important; color: var(--color-text-inverse) !important; border-top: 1px solid var(--color-gold); } body.index .notify-cookie-modal__title, body.index .notify-cookie-modal__wrapper p { color: var(--color-text-inverse) !important; } body.index .notify-cookie-modal__wrapper a { color: var(--color-aqua-mint) !important; } body.index .notify-cookie-modal__wrapper button, body.index .notify-cookie-modal__wrapper .btn { background-color: var(--color-teal-cta) !important; color: var(--color-text-inverse) !important; border: 0 !important; border-radius: var(--radius-button) !important; } /* buy-in-one-click. #fastBuyFormSubmit ("Купить в один клик") carries NO class and was still #ff9601 after the first pass — targeted by id. */ body.index #appFastBuy a.closeWindow, body.index #appFastBuy a[class*="close"], body.index .closeWindow, body.index #fastBuyFormSubmit, body.index #appFastBuy a[href="#"]:not([class]) { background-color: var(--color-teal-cta) !important; color: var(--color-text-inverse) !important; border: 0 !important; border-radius: var(--radius-button) !important; } body.index #fastBuyFormSubmit:hover { background: var(--color-teal-hover) !important; } /* cart flyout — .heading #2f2827 / .lower #3f3331 */ body.index #appBasket .heading, body.index #appBasket .lower { background-color: var(--color-primary-dark) !important; color: var(--color-text-inverse) !important; } body.index #appBasket .heading { font-family: var(--font-head); font-weight: 600; } /* modal web-form heading — #2f2827 */ body.index .webFormModalHeading, body.index #webFormDwModal_1 .webFormModalHeading { background-color: var(--color-primary-dark) !important; color: var(--color-text-inverse) !important; font-family: var(--font-head); font-weight: 600; } /* ========================================================================== 24. FORM VALIDATION STATES -------------------------------------------------------------------------- Verified in-browser: an empty submit is caught CLIENT-SIDE and marks fields with .error / .phone.error. Those carried no colour of their own, so they inherited body ink and were invisible as errors. Given an explicit state. ========================================================================== */ body.index .parallax-form .error, body.index .parallax-form input.error, body.index .parallax-form select.error, body.index .parallax-form textarea.error, body.index .webFormItemError input, body.index .webFormItemError select, body.index .webFormItemError textarea { border-color: #D8574C !important; box-shadow: 0 0 0 3px rgba(216, 87, 76, .12) !important; } body.index .parallax-form label.error, body.index .webFormError, body.index .errortext { color: #D8574C !important; font-size: 13px; line-height: 1.4; } body.index .parallax-form input[type="checkbox"].error, body.index .parallax-form input[type="checkbox"]:invalid { outline: 2px solid #D8574C; outline-offset: 1px; } /* required asterisk — real class is .webFormItemRequired (found live; it was still the theme's harsh pure red #ff0000). Aligned to the error tone. */ body.index .webFormItemRequired, body.index .parallax-form .webFormItemRequired, body.index .parallax-form .starrequired, body.index .parallax-form .required { color: #D8574C !important; } /* form headline contrast — it sits over a light region of the photo, so the left side of the overlay is deepened until the white type is legible */ body.index .parallax-form .bg-dark-opacity { background-image: linear-gradient(90deg, rgba(14,58,63,.90) 0%, rgba(14,58,63,.78) 42%, rgba(20,73,79,.55) 100%) !important; } body.index .parallax-form-title { color: var(--color-text-inverse) !important; text-shadow: 0 2px 14px rgba(0, 0, 0, .35); } /* ------------------------------------------------------- 25. RESPONSIVE */ @media (max-width: 1200px) { body.index .activities-title, body.index .brands-blocks-heading { font-size: 23px; } body.index .parallax-form-title { font-size: 28px; } } @media (max-width: 992px) { body.index { --section-gap: 48px; } body.index .info-block-wrap h2 { font-size: 25px; } } @media (max-width: 768.98px) { body.index { --section-gap: 36px; font-size: 15px; } /* ---- MOBILE NAV FALLBACK ---------------------------------------------- PRE-EXISTING DEFECT (confirmed identical on the LIVE site, so NOT caused by this reskin): the #topSlideMenu burger fires but no drawer opens, and #mainMenu computes to 0x0 below 768px — mobile visitors currently have no category navigation at all. Fixing the drawer would mean touching JS, which is out of scope. Instead this is a CSS-only, JS-free fallback: the existing menu becomes a horizontally scrollable petrol chip row that is always reachable. No markup change, no JS, fully reversible by deleting this block. ---------------------------------------------------------------------- */ body.index #mainMenuContainer { overflow: visible; height: auto; } body.index #mainMenu { display: flex !important; height: auto !important; visibility: visible !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; gap: 6px; padding: 8px 12px; margin: 0; scrollbar-width: none; background-color: var(--color-primary-dark); } body.index #mainMenu::-webkit-scrollbar { display: none; } body.index #mainMenu > li { flex: 0 0 auto; float: none !important; list-style: none; } body.index #mainMenu > li > a { display: block; white-space: nowrap; padding: 9px 14px; font-size: 13px; border-radius: var(--radius-button); background-color: rgba(255, 255, 255, .08); color: var(--color-text-inverse) !important; min-height: 40px; /* tap target */ line-height: 22px; } body.index #mainMenu > li > a:active { background: var(--color-teal-cta); } /* nested dropdowns can't work in a scroll strip — collapse them */ body.index #mainMenu .drop, body.index #mainMenu .dropdown-menu, body.index #mainMenu .plusmenu { display: none !important; } /* tap targets + overflow guards */ body.index a, body.index button { -webkit-tap-highlight-color: rgba(31,138,125,.2); } body.index .info-block-wrap p, body.index .info-block-wrap li { overflow-wrap: anywhere; } body.index .activities-item .activity-title-1 { font-size: 16px; } body.index .activities-item .activity-title-2 { font-size: 13px; } body.index .activities-title, body.index .brands-blocks-heading { font-size: 20px; letter-spacing: .04em; } body.index .parallax-form-title { font-size: 23px; } body.index .parallax-form-wrap { padding: 20px; } body.index .main-video { border-radius: 12px; } /* form section stacks: photo above, form below */ body.index .wrap-parallax-block { display: block; } body.index .parallax-form-title-wrap, body.index .parallax-form-wrap { width: 100%; max-width: 100%; } } @media (max-width: 480px) { body.index { --gutter: 14px; --section-gap: 28px; } body.index .activities-title, body.index .brands-blocks-heading { font-size: 18px; } body.index .info-block-wrap h2 { font-size: 21px; } body.index .btn a, body.index input[type="submit"] { padding: 12px 20px !important; font-size: 12px; } body.index .banner { border-radius: 12px; } } /* ----------------------------------------- 15. HEADER: SHOP-HOURS LINE HIDDEN Operator asked for "Интернет-магазин" to go from the desktop header. It was a bare text node in .gr-table.fixed-hide, so header.php now wraps it in .omni-shop-hours purely to give CSS something to select — the text itself is untouched and still in the DOM. Desktop only (the operator said "desktop version") and homepage only, like every other rule in this file. "Call-centre: 09:00-19:00" is deliberately kept; the <br> goes too, or it would leave an empty first line. To restore: delete these two rules. */ @media (min-width: 769px) { body.index .omni-shop-hours, body.index .omni-shop-hours-br { display: none !important; } }