/* ═══════════════════════════════════════════════════════ AW Legacy Restyle Repaints original Bitrix HTML markup to match the new navy + gold + Rubik design used on the homepage. Loaded LAST by LegacyContent (after the original /css/style.css) so cascade always wins. !important is used liberally because legacy CSS has high-specificity selectors. ═══════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&display=swap'); /* === Design tokens (mirrors src/app/(frontend)/styles.css) === */ .legacy-content { --aw-brand: #FEDC3C; --aw-brand-hover: #ffe566; --aw-navy: #1a2332; --aw-navy-light: #243044; --aw-light: #f5f7fa; --aw-light-2: #edf0f5; --aw-light-3: #dfe4ec; --aw-ink: #1a2332; --aw-text-secondary: #4d5d72; --aw-text-tertiary: #7a8a9e; --aw-border: #e2e7ef; --aw-radius-sm: 6px; --aw-radius-md: 10px; --aw-radius-lg: 14px; --aw-radius-full: 9999px; } /* === Hide duplicate Bitrix chrome rendered inside === Our React SiteHeader + SiteFooter already provide nav / contacts / support / requisites. Anything Bitrix replicated inside the body would show up as a redundant duplicate. */ .legacy-content nav.menu, .legacy-content #panel, .legacy-content .menu-pull, .legacy-content .contact-block, .legacy-content .contact-panel, .legacy-content .contact-toggle, .legacy-content .contact-moscow-info, .legacy-content .contact-karaganda-info, .legacy-content .send-me, .legacy-content .send-me-link, .legacy-content .send-me-links, .legacy-content .send-me__toggle, .legacy-content .send-me__text, .legacy-content .chat-widget, .legacy-content .footer-requisites, .legacy-content .requisites-block, .legacy-content .mobile-no, .legacy-content #map-moscow, .legacy-content #map-karaganda, .legacy-content .sidebar-menu-outer, .legacy-content .sidebar-menu-wrapper, .legacy-content aside.sidebar { display: none !important; } /* Hide the Bitrix sidebar sub-menu on /about/* pages (Миссия / Лицензии / Сотрудники / Вакансии / Новости / Артвелл в цифрах). Our PageHero breadcrumbs + header nav already handle navigation. */ .legacy-content .spanning > .wrap > .sidebar-menu, .legacy-content .wrap > .sidebar-menu:first-child, .legacy-content .sidebar-about, .legacy-content .sidebar-news { display: none !important; } /* === Container reset === */ .legacy-content, .legacy-content * { font-family: 'Rubik', system-ui, -apple-system, sans-serif !important; box-sizing: border-box; } .legacy-content { background: #fff; color: var(--aw-ink) !important; font-size: 16px !important; line-height: 1.65 !important; } .legacy-content .main { background: transparent !important; display: block !important; } .legacy-content .spanning { padding: 32px 0 80px !important; } .legacy-content .wrap { max-width: 1200px !important; margin: 0 auto !important; padding: 0 24px !important; width: 100% !important; float: none !important; } /* Legacy `.content { width: 67.1875%; float: right }` — kill it so services / portfolio / etc. content uses the full wrap width. */ .legacy-content .content, .legacy-content .content-full-width { width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; float: none !important; clear: both !important; } /* Hide the default legacy sidebar column that float-ed to the left of .content */ .legacy-content aside, .legacy-content .aside, .legacy-content > aside, .legacy-content .sidebar { display: none !important; } /* Legacy .services-columns wraps 3 service-column floats — grid it */ .legacy-content .services-columns { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; gap: 24px !important; margin: 0 !important; width: 100% !important; float: none !important; clear: both !important; } .legacy-content .service-column { width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; } /* === Breadcrumbs === */ .legacy-content .breadcrumbs { margin: 0 0 24px !important; padding: 0 !important; font-size: 13px !important; color: var(--aw-text-tertiary) !important; background: transparent !important; border: 0 !important; } .legacy-content .breadcrumbs a { color: var(--aw-text-secondary) !important; text-decoration: none !important; transition: color 0.2s !important; } .legacy-content .breadcrumbs a:hover { color: var(--aw-navy) !important; } .legacy-content .breadcrumbs-arrow::before { content: '/' !important; color: var(--aw-text-tertiary) !important; margin: 0 6px !important; display: inline !important; background: none !important; } .legacy-content .breadcrumbs-home { display: inline-block !important; background: none !important; width: auto !important; height: auto !important; } .legacy-content .breadcrumbs-home::before { content: 'Главная' !important; color: var(--aw-text-secondary) !important; } /* === Typography === */ .legacy-content h1 { font-size: clamp(28px, 5vw, 48px) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.1 !important; color: var(--aw-navy) !important; margin: 16px 0 32px !important; text-align: left !important; text-transform: none !important; } .legacy-content h2 { font-size: clamp(24px, 4vw, 36px) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.15 !important; color: var(--aw-navy) !important; margin: 32px 0 16px !important; text-align: left !important; } .legacy-content h3 { font-size: clamp(18px, 3vw, 22px) !important; font-weight: 600 !important; color: var(--aw-navy) !important; margin: 24px 0 12px !important; } .legacy-content h4, .legacy-content h5 { font-size: 16px !important; font-weight: 600 !important; color: var(--aw-navy) !important; margin: 16px 0 8px !important; } .legacy-content p { margin: 0 0 16px !important; color: var(--aw-text-secondary) !important; font-size: 15px !important; line-height: 1.65 !important; } .legacy-content a { color: var(--aw-navy) !important; text-decoration: none !important; transition: color 0.2s !important; } .legacy-content a:hover { color: var(--aw-brand-hover) !important; } .legacy-content ul, .legacy-content ol { margin: 0 0 24px !important; padding-left: 20px !important; color: var(--aw-text-secondary) !important; } .legacy-content li { margin: 0 0 8px !important; font-size: 15px !important; line-height: 1.6 !important; } /* === Page title (.text > h1) === */ .legacy-content .text { margin-bottom: 32px !important; } .legacy-content .text-center { text-align: left !important; } /* === PROJECTS GRID (portfolio) === */ .legacy-content .projects-list, .legacy-content .projects { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; gap: 16px !important; margin: 0 0 32px !important; list-style: none !important; padding: 0 !important; } .legacy-content .project { position: relative !important; border-radius: var(--aw-radius-lg) !important; overflow: hidden !important; background: #fff !important; border: 1px solid var(--aw-border) !important; transition: transform 0.2s, box-shadow 0.3s, border-color 0.3s !important; margin: 0 !important; width: auto !important; height: auto !important; float: none !important; display: flex !important; flex-direction: column !important; } .legacy-content .project:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 30px rgba(26, 35, 50, 0.08) !important; border-color: var(--aw-light-3) !important; } .legacy-content .project-link { display: flex !important; flex-direction: column !important; text-decoration: none !important; color: inherit !important; height: 100% !important; padding: 0 !important; } .legacy-content .project-link img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; border: 0 !important; display: block !important; background: var(--aw-light-2) !important; } .legacy-content .project-desc { display: flex !important; flex-direction: column !important; flex: 1 !important; padding: 16px 18px 18px !important; background: #fff !important; position: static !important; width: auto !important; height: auto !important; bottom: auto !important; left: auto !important; opacity: 1 !important; transform: none !important; } .legacy-content .project-desc-title { display: block !important; font-size: 15px !important; font-weight: 700 !important; color: var(--aw-navy) !important; margin: 0 0 6px !important; line-height: 1.3 !important; text-transform: none !important; } .legacy-content .project-desc-subtitle { display: block !important; font-size: 13px !important; font-weight: 400 !important; color: var(--aw-text-tertiary) !important; margin: 0 0 12px !important; line-height: 1.4 !important; text-transform: none !important; flex: 1 !important; } .legacy-content .project-desc-button { display: inline-flex !important; align-items: center !important; align-self: flex-start !important; margin-top: auto !important; padding: 0 !important; background: transparent !important; color: var(--aw-navy) !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; border: 0 !important; } .legacy-content .project-desc-button::after { content: ' →' !important; color: var(--aw-brand) !important; margin-left: 4px !important; font-weight: 600 !important; } /* === CLIENTS GRID === */ .legacy-content .clients, .legacy-content .client-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 12px !important; margin: 0 0 32px !important; list-style: none !important; padding: 0 !important; } .legacy-content .client { background: #fff !important; border: 1px solid var(--aw-border) !important; border-radius: var(--aw-radius-md) !important; padding: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; min-height: 100px !important; float: none !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: border-color 0.2s, box-shadow 0.2s !important; } .legacy-content .client:hover { border-color: var(--aw-light-3) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important; } .legacy-content .client.client-x2 { grid-column: span 2 !important; } .legacy-content .client.client-x4 { grid-column: span 2 !important; } @media (min-width: 1024px) { .legacy-content .client.client-x4 { grid-column: span 4 !important; } } .legacy-content .client-inside { display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px !important; width: 100% !important; height: 100% !important; } .legacy-content .client-inside img { max-width: 100% !important; max-height: 60px !important; width: auto !important; height: auto !important; object-fit: contain !important; filter: grayscale(100%) !important; opacity: 0.65 !important; transition: filter 0.3s, opacity 0.3s !important; } .legacy-content .client:hover .client-inside img { filter: grayscale(0%) !important; opacity: 1 !important; } /* Hide background helpers and old icons */ .legacy-content .client > img.client-image { display: none !important; } /* === REVIEWS GRID === */ .legacy-content .reviews, .legacy-content .reviews-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; background: transparent !important; } /* Hide duplicate page heading — the body already has an

Отзывы

*/ .legacy-content .reviews-title { display: none !important; } /* Review card — shows thumbnail + client name, click opens fancybox modal */ .legacy-content .review { background: #fff !important; border: 1px solid var(--aw-border) !important; border-radius: var(--aw-radius-md) !important; padding: 12px !important; margin: 0 !important; width: auto !important; height: auto !important; float: none !important; display: flex !important; flex-direction: column !important; gap: 12px !important; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important; } .legacy-content .review:hover { border-color: var(--aw-light-3) !important; box-shadow: 0 8px 24px rgba(26, 35, 50, 0.08) !important; transform: translateY(-2px) !important; } .legacy-content .review-link { display: block !important; text-decoration: none !important; overflow: hidden !important; border-radius: var(--aw-radius-sm) !important; } .legacy-content .review-link img { width: 100% !important; height: auto !important; aspect-ratio: 3 / 4 !important; object-fit: cover !important; display: block !important; transition: transform 0.3s !important; } .legacy-content .review:hover .review-link img { transform: scale(1.03) !important; } /* Keep review-detail visible but flatten it — pull the title next to thumb */ .legacy-content .review-detail { display: contents !important; } .legacy-content .review-detail-img { display: none !important; } .legacy-content .review-detail-info { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; padding: 0 4px !important; } .legacy-content .review-detail-title { font-size: 13px !important; font-weight: 600 !important; color: var(--aw-navy) !important; line-height: 1.35 !important; } .legacy-content .review-detail-info .button { padding: 6px 14px !important; font-size: 12px !important; background: var(--aw-light) !important; color: var(--aw-navy) !important; border: 1px solid var(--aw-border) !important; } .legacy-content .review-detail-info .button:hover { background: var(--aw-navy) !important; color: #fff !important; border-color: var(--aw-navy) !important; } /* === TABS / FILTERS === */ .legacy-content .tabs, .legacy-content .filter-tabs { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 0 24px !important; padding: 0 !important; list-style: none !important; border: 0 !important; background: transparent !important; } .legacy-content .tabs li, .legacy-content .filter-tabs li { display: inline-flex !important; padding: 8px 16px !important; margin: 0 !important; border-radius: var(--aw-radius-full) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--aw-text-secondary) !important; background: var(--aw-light) !important; border: 1px solid var(--aw-border) !important; cursor: pointer !important; transition: all 0.2s !important; list-style: none !important; } .legacy-content .tabs li:hover, .legacy-content .filter-tabs li:hover { border-color: var(--aw-light-3) !important; color: var(--aw-navy) !important; } .legacy-content .tabs li.active, .legacy-content .filter-tabs li.active { background: var(--aw-navy) !important; color: #fff !important; border-color: var(--aw-navy) !important; } /* === BUTTONS === */ .legacy-content .button, .legacy-content button.button, .legacy-content a.button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; background: var(--aw-brand) !important; color: var(--aw-navy) !important; border: 0 !important; border-radius: var(--aw-radius-full) !important; padding: 12px 28px !important; font-size: 15px !important; font-weight: 600 !important; text-decoration: none !important; cursor: pointer !important; transition: background 0.2s, box-shadow 0.2s !important; text-transform: none !important; height: auto !important; width: auto !important; line-height: 1.4 !important; } .legacy-content .button:hover { background: var(--aw-brand-hover) !important; color: var(--aw-navy) !important; box-shadow: 0 8px 24px rgba(254, 220, 60, 0.25) !important; } .legacy-content .button-small { padding: 8px 18px !important; font-size: 13px !important; } .legacy-content .button-modal-prev, .legacy-content .button-modal-next, .legacy-content .button-close { background: rgba(0, 0, 0, 0.05) !important; color: var(--aw-navy) !important; } /* === FORMS === */ .legacy-content input[type="text"], .legacy-content input[type="email"], .legacy-content input[type="tel"], .legacy-content input[type="url"], .legacy-content textarea, .legacy-content select, .legacy-content .input-text { font-family: 'Rubik', sans-serif !important; border: 1px solid var(--aw-border) !important; border-radius: var(--aw-radius-md) !important; padding: 12px 16px !important; font-size: 14px !important; background: #fff !important; color: var(--aw-ink) !important; width: 100% !important; height: auto !important; transition: border-color 0.2s, box-shadow 0.2s !important; margin: 0 0 12px !important; } .legacy-content input:focus, .legacy-content textarea:focus, .legacy-content select:focus { border-color: var(--aw-brand) !important; outline: 0 !important; box-shadow: 0 0 0 3px rgba(254, 220, 60, 0.2) !important; } .legacy-content textarea { min-height: 120px !important; resize: vertical !important; } /* === SIDEBAR (services sidebar-menu — the 3-column services tree) === */ .legacy-content .sidebar-menu, .legacy-content .sidebar-menu .sother, .legacy-content .sidebar-menu > li > ul { list-style: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; } .legacy-content .sidebar-menu > li { margin: 0 0 20px !important; padding: 0 !important; } .legacy-content .sidebar-menu > li > a { display: flex !important; align-items: center !important; gap: 14px !important; padding: 12px 16px !important; padding-left: 16px !important; /* KILL legacy 75px padding-left */ min-height: 0 !important; background: var(--aw-light) !important; border-radius: var(--aw-radius-md) !important; font-size: 15px !important; font-weight: 600 !important; color: var(--aw-navy) !important; text-decoration: none !important; margin: 0 0 8px !important; transition: background 0.2s !important; position: static !important; /* KILL legacy position:relative with absolute children */ font-family: 'Rubik', sans-serif !important; } .legacy-content .sidebar-menu > li > a:hover { background: var(--aw-light-2) !important; } .legacy-content .sidebar-menu .ico, .legacy-content .sidebar-menu .ico-img { flex-shrink: 0 !important; position: static !important; /* KILL legacy position:absolute */ left: auto !important; top: auto !important; width: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--aw-brand) !important; background-image: none !important; /* KILL sprite.png */ border-radius: 50% !important; padding: 6px !important; } .legacy-content .sidebar-menu .ico-img img { width: 100% !important; height: 100% !important; max-width: 24px !important; max-height: 24px !important; object-fit: contain !important; position: static !important; display: block !important; margin: 0 !important; } .legacy-content .sidebar-menu .sidebar-valign-text { position: static !important; display: block !important; flex: 1 !important; height: auto !important; padding: 0 !important; font-family: 'Rubik', sans-serif !important; font-size: 15px !important; line-height: 1.3 !important; font-weight: 600 !important; color: var(--aw-navy) !important; vertical-align: baseline !important; } /* Sub-item list inside a category (".sother" or nested