/* ============================================================ FSSA Landing — base, tokens, keyframes, interaction states. Inline styles in the templates carry the high-fidelity design; this file adds what inline styles cannot (hover/focus, keyframes, active toggles, marquees, responsive collapse). ============================================================ */ /* ============================================================ THEME TOKENS — the accent system is driven by these vars so the client can preview different palettes from the top-of-page switcher. :root holds the default (Amber / current design). Each [data-theme] on overrides the accent; everything else inherits. --accent main accent (CTAs, links, highlights, icons) --accent-hover brighter accent for hover --accent-dark darker accent for accent text on LIGHT sections --accent-ink contrast color of text/icons sitting ON the accent fill --accent-2 secondary accent (the red-blue theme uses blue here) --wordmark color of the "FSSA" letters in the logo lockup --logo-filter recolors the gold PNG emblem toward the active theme ============================================================ */ :root, [data-theme="amber"]{ --accent:#F4C220; --accent-hover:#FFD23E; --accent-dark:#B07A06; --accent-ink:#0E1116; /* dark ink on bright gold */ --accent-2:#F4C220; --wordmark:#ffffff; --logo-filter:none; /* фон — нейтральный графит (исходный дизайн) */ --bg:#0E1116; --bg-deep:#0A0D11; --bg-soft:#11151B; --surface:#161B22; --bg-light:#ECEDEF; /* ----- режим ТЁМНЫЙ (по умолчанию): светлый текст / светлые линии. Эти токены зависят от режима (тёмный/светлый), а не от акцента, поэтому заданы в :root и наследуются всеми тёмными темами. ----- */ --text:#E7EAEF; /* основной текст */ --text-strong:#ffffff; /* заголовки, белый */ --text-bright:#C4CBD4; /* ссылки навигации, яркий вторичный */ --text-muted:#9AA3AE; /* приглушённый */ --text-faint:#6E7884; /* подписи/линки */ --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.1); --line-3:rgba(255,255,255,.15); --line-4:rgba(255,255,255,.2); --grid:rgba(255,255,255,.025); --ink-block:#11151B; /* всегда-тёмный блок (тёмная кнопка на светлой секции) */ --ink-on:#ffffff; /* текст на --ink-block */ } /* Лого ФССА — красно-синяя гамма оригинального сайта fssa.kz */ [data-theme="fssa"]{ --accent:#E11D2A; /* фирменный красный */ --accent-hover:#F4313D; --accent-dark:#C01018; --accent-ink:#ffffff; /* белый текст на красном */ --accent-2:#1E50C8; /* фирменный синий */ --wordmark:#E11D2A; /* буквы ФССА красные */ --logo-filter:saturate(1.5) hue-rotate(176deg) brightness(.98); /* эмблема синяя */ /* фон — глубокий тёмно-синий навигейт (красный акцент на нём горит) */ --bg:#0B0F1C; --bg-deep:#070A14; --bg-soft:#0F1428; --surface:#161E38; --bg-light:#ECEEF3; } /* Океан — синяя гамма */ [data-theme="ocean"]{ --accent:#2E7DF6; --accent-hover:#5599FF; --accent-dark:#1A5CC4; --accent-ink:#ffffff; --accent-2:#2E7DF6; --wordmark:#ffffff; --logo-filter:saturate(1.3) hue-rotate(180deg) brightness(.98); /* фон — синяя океаническая глубина */ --bg:#081223; --bg-deep:#040A15; --bg-soft:#0C1631; --surface:#122442; --bg-light:#EAEFF6; } /* Изумруд — зелёная гамма */ [data-theme="emerald"]{ --accent:#1FB57A; --accent-hover:#2BD993; --accent-dark:#137A52; --accent-ink:#06231A; --accent-2:#1FB57A; --wordmark:#ffffff; --logo-filter:saturate(1.2) hue-rotate(96deg) brightness(.97); /* фон — тёмно-изумрудный лес */ --bg:#08140F; --bg-deep:#040D09; --bg-soft:#0B1A15; --surface:#102822; --bg-light:#EAF1EC; } /* Аметист — фиолетовая гамма */ [data-theme="violet"]{ --accent:#8A5CF6; --accent-hover:#A47BFF; --accent-dark:#6A3FD6; --accent-ink:#ffffff; --accent-2:#8A5CF6; --wordmark:#ffffff; --logo-filter:saturate(1.3) hue-rotate(232deg) brightness(1); /* фон — глубокая фиолетовая слива */ --bg:#110B1E; --bg-deep:#0B0615; --bg-soft:#170F2B; --surface:#1F1639; --bg-light:#EFEBF5; } /* ===== Линейка 2 — дополнительные гаммы (фон тоже под акцент) ===== */ /* Коралл — тёплый оранжево-красный */ [data-theme="coral"]{ --accent:#FF6A45; --accent-hover:#FF8568; --accent-dark:#C7421F; --accent-ink:#2A0F06; --accent-2:#FF6A45; --wordmark:#ffffff; --logo-filter:saturate(1.3) hue-rotate(-30deg) brightness(1); --bg:#150D0A; --bg-deep:#0D0705; --bg-soft:#1B110D; --surface:#251812; --bg-light:#F2ECE9; } /* Бирюза — сине-зелёный циан */ [data-theme="teal"]{ --accent:#14B8B0; --accent-hover:#2BD8CF; --accent-dark:#0C7C77; --accent-ink:#04221F; --accent-2:#14B8B0; --wordmark:#ffffff; --logo-filter:saturate(1.3) hue-rotate(128deg) brightness(.98); --bg:#061213; --bg-deep:#030B0C; --bg-soft:#0A1A1B; --surface:#0E2526; --bg-light:#E8F1F1; } /* Роза — розово-пурпурный */ [data-theme="rose"]{ --accent:#F04E96; --accent-hover:#FF6FAD; --accent-dark:#C42B6E; --accent-ink:#ffffff; --accent-2:#F04E96; --wordmark:#ffffff; --logo-filter:saturate(1.4) hue-rotate(282deg) brightness(1); --bg:#170A12; --bg-deep:#0F0610; --bg-soft:#1E0E1A; --surface:#281522; --bg-light:#F4EAF0; } /* Лайм — жёлто-зелёный */ [data-theme="lime"]{ --accent:#A8CC1F; --accent-hover:#C2E63A; --accent-dark:#6E8710; --accent-ink:#18200A; --accent-2:#A8CC1F; --wordmark:#ffffff; --logo-filter:saturate(1.3) hue-rotate(28deg) brightness(1.02); --bg:#11140A; --bg-deep:#0A0C05; --bg-soft:#161A0D; --surface:#1F2613; --bg-light:#EFF2E6; } /* Сталь — монохром, холодное серебро */ [data-theme="slate"]{ --accent:#8FA6BE; --accent-hover:#AEC2D6; --accent-dark:#5E7086; --accent-ink:#0C1117; --accent-2:#8FA6BE; --wordmark:#ffffff; --logo-filter:grayscale(1) brightness(1.12); --bg:#0E1217; --bg-deep:#090C10; --bg-soft:#12161D; --surface:#1A2029; --bg-light:#ECEEF1; } /* ============================================================ Линейка 3 — СВЕТЛЫЕ темы: задняя часть страницы белая и чередуется со светлым оттенком под акцент (bg=белый, bg-light/bg-deep=тинт). Текст и линии инвертируются в тёмные через общий селектор ниже. ============================================================ */ [data-theme="amber-light"], [data-theme="fssa-light"], [data-theme="ocean-light"], [data-theme="emerald-light"], [data-theme="violet-light"], [data-theme="corporate"]{ /* режим СВЕТЛЫЙ: тёмный текст / тёмные линии (перебивают :root) */ --text:#1E242B; --text-strong:#0B0E13; --text-bright:#353B43; --text-muted:#5A626E; --text-faint:#868D97; --line:rgba(0,0,0,.10); --line-2:rgba(0,0,0,.13); --line-3:rgba(0,0,0,.16); --line-4:rgba(0,0,0,.22); --grid:rgba(0,0,0,.045); } /* Свет · Янтарь */ [data-theme="amber-light"]{ --accent:#C8920A;--accent-hover:#E0A810;--accent-dark:#8A6500; --accent-ink:#2A1D00;--accent-2:#C8920A;--wordmark:#11151B; --logo-filter:saturate(1.4) brightness(.82); --bg:#ffffff;--bg-soft:#FBFAF7;--bg-deep:#F3EFE0;--surface:#FAF6EC;--bg-light:#F6F1E2; } /* Свет · ФССА (красно-синий на белом) */ [data-theme="fssa-light"]{ --accent:#D81E2A;--accent-hover:#F02A38;--accent-dark:#A8121C; --accent-ink:#ffffff;--accent-2:#1E50C8;--wordmark:#D81E2A; --logo-filter:saturate(1.5) hue-rotate(176deg) brightness(.9); --bg:#ffffff;--bg-soft:#FAFBFD;--bg-deep:#EBEFF7;--surface:#F4F7FC;--bg-light:#EEF2F9; } /* Свет · Океан */ [data-theme="ocean-light"]{ --accent:#1F6FE0;--accent-hover:#3D88F2;--accent-dark:#1452AE; --accent-ink:#ffffff;--accent-2:#1F6FE0;--wordmark:#11151B; --logo-filter:saturate(1.3) hue-rotate(180deg) brightness(.9); --bg:#ffffff;--bg-soft:#F9FBFE;--bg-deep:#E6EEFA;--surface:#F2F7FD;--bg-light:#EBF2FC; } /* Свет · Изумруд */ [data-theme="emerald-light"]{ --accent:#0E9E68;--accent-hover:#14B879;--accent-dark:#0A7048; --accent-ink:#ffffff;--accent-2:#0E9E68;--wordmark:#11151B; --logo-filter:saturate(1.25) hue-rotate(96deg) brightness(.9); --bg:#ffffff;--bg-soft:#F8FCFA;--bg-deep:#E4F2EB;--surface:#F1F9F5;--bg-light:#E9F4EE; } /* Свет · Аметист */ [data-theme="violet-light"]{ --accent:#7B43E8;--accent-hover:#8F5DF2;--accent-dark:#5C2EC0; --accent-ink:#ffffff;--accent-2:#7B43E8;--wordmark:#11151B; --logo-filter:saturate(1.3) hue-rotate(232deg) brightness(.92); --bg:#ffffff;--bg-soft:#FBFAFD;--bg-deep:#EEE9F7;--surface:#F5F2FB;--bg-light:#F0EBF9; } /* Светлый корпоративный — фирменные цвета FSSA: бордовый #7C161A + тёмно-синий #19427F на белом фоне. Бордовый — акцент/CTA, тёмно-синий — заголовки и второй цвет, секции чередуются бел↔светлый сине-серый тинт. Лого НЕ перекрашивается. */ [data-theme="corporate"]{ --accent:#7C161A;--accent-hover:#97262B;--accent-dark:#5C1014; --accent-ink:#ffffff;--accent-2:#19427F;--wordmark:#19427F; --logo-filter:none; --bg:#ffffff;--bg-soft:#F7F9FC;--bg-deep:#E9EEF6;--surface:#F1F5FB;--bg-light:#E8EDF6; --text-strong:#19427F; /* заголовки — фирменный тёмно-синий */ --text-bright:#2B3A52; /* приглушённый/слабый текст темнее дефолтных светлых тем — иначе подписи/копирайт в подвале сливаются со светлым сине-серым фоном */ --text-muted:#4F5765; --text-faint:#5C6577; } .fssa-logo{filter:var(--logo-filter);transition:filter .35s ease;} /* Бренд-лого: настоящий логотип FSSA на белой «подложке» (clear space). Цвета лого не меняются (filter:none). На тёмных темах белая плашка даёт контраст для чёрных букв; на светлых темах плашка не нужна — прозрачная. */ .brandmark{display:inline-flex;align-items:center;background:#fff;border-radius:10px;padding:8px 12px;flex:none;} .brandmark img{width:auto;object-fit:contain;display:block;filter:none;} [data-theme$="-light"] .brandmark, [data-theme="corporate"] .brandmark{background:transparent;border-radius:0;padding:0;} /* logo original/palette switch (data-logo-mode on ) */ .fssa-logo--original{display:none;} [data-logo-mode="original"] .fssa-logo--palette{display:none !important;} [data-logo-mode="original"] .fssa-logo--original{display:block;} *{box-sizing:border-box;} html{scroll-behavior:smooth;} /* Единый шрифт заголовков (plex-only, утверждён клиентом 2026-07-03). Меняется в одном месте: раньше был Oswald, теперь IBM Plex Sans. var-fallback защищает страницы, где этот файл не подключён (напр. админка). */ :root{--font-display:'IBM Plex Sans',system-ui,sans-serif;} body{margin:0;font-family:'IBM Plex Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word;} /* Длинные слова (особенно казахские заголовки: МАНСАБЫҢЫЗДЫ, ҚҰРЫҢЫЗ) не должны вылезать за колонку/картинку ни на одном языке. overflow-wrap наследуется → защищает весь сайт; на заголовках добавляем мягкий перенос по слогам. */ h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;hyphens:auto;} ::selection{background:var(--accent);color:var(--accent-ink);} a{color:inherit;text-decoration:none;} select,input,button{font-family:inherit;} /* ---------- body copy left-aligned site-wide (best practice for the web: justify without hyphenation opens uneven "rivers" of whitespace, worse in narrow columns and on mobile). Single-line text is unaffected. ---------- */ .page p{text-align:left;} /* ---------- keyframes ---------- */ @keyframes mrq{from{transform:translateX(0);}to{transform:translateX(-50%);}} @keyframes heroSwap{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}} /* ---------- link / button hover (override inline base via !important) ---------- */ .lnk-amber:hover{color:var(--accent) !important;} .lnk-amber-dark:hover{color:var(--accent-dark) !important;} /* Премиальная замена бывшего бесконечного ctaWiggle: спокойный подъём + тень на hover. */ .btn-amber{transition:background .18s ease,transform .18s ease,box-shadow .18s ease;} .btn-amber:hover{background:var(--accent-hover) !important;transform:translateY(-2px);box-shadow:0 10px 22px -8px color-mix(in srgb, var(--accent) 55%, transparent);} .btn-amber:active{transform:translateY(0);box-shadow:0 4px 10px -6px color-mix(in srgb, var(--accent) 50%, transparent);} .btn-outline:hover{border-color:var(--accent) !important;color:var(--accent) !important;} .btn-dark:hover{background:#000 !important;} /* ---------- vacancy row layout ---------- */ /* Grid lives here (not only inline) so the JS filter can reset display via `style.display = ""` without wiping the grid — otherwise visible rows collapse to default inline and stack vertically. */ .vac-row{display:grid;grid-template-columns:1.6fr 1fr .9fr auto;align-items:center;gap:18px;} .vac-row.is-hidden{display:none !important;} .vac-more{display:block;width:100%;margin-top:22px;padding:15px;background:transparent;border:1px solid var(--line-3);border-radius:10px;color:var(--text-strong);font-family:var(--font-display,'IBM Plex Sans',system-ui,sans-serif);font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:border-color .15s,color .15s;} .vac-more:hover{border-color:var(--accent);color:var(--accent);} /* ---------- row / card hover ---------- */ .sector-row:hover{background:#E2E4E8;border-left-color:var(--accent) !important;padding-left:17px !important;padding-right:17px !important;} .vac-row:hover{background:var(--surface);padding-left:18px !important;padding-right:18px !important;} .svc-card:hover{background:#E7E8EB !important;box-shadow:inset 3px 0 0 var(--accent);} .ind-card:hover{background:#E7E8EB !important;box-shadow:inset 3px 0 0 var(--accent);} .group-card:hover{background:var(--surface) !important;} .why-card:hover{border-color:var(--accent) !important;} .news-card:hover{border-color:#11151B !important;} .news-card-dark:hover{border-color:var(--accent) !important;} .featured-card:hover{border-color:var(--accent) !important;} /* ---------- hero collage: invisible roaming magnifying lens ---------- */ .hero-collage{overflow:hidden;} .collage-lens{ position:absolute; left:0; top:0; border-radius:50%; background-repeat:no-repeat; pointer-events:none; will-change:transform,background-position; /* faint glassy lift so the magnified disc reads, with no drawn rim */ filter:brightness(1.08) contrast(1.06); /* mostly-defined disc with a thin feather: you see the circular area of bigger photos (the size jump), but the lens outline stays soft */ -webkit-mask-image:radial-gradient(circle closest-side,#000 88%,rgba(0,0,0,0) 100%); mask-image:radial-gradient(circle closest-side,#000 88%,rgba(0,0,0,0) 100%); } /* ---------- audience tabs / language switch / filter chips ---------- */ .aud-tab{background:transparent;color:var(--text-muted);} .aud-tab.is-active{background:var(--accent);color:var(--accent-ink);} .lang-btn{border:none;cursor:pointer;padding:6px 11px;background:transparent;color:var(--text-muted);text-decoration:none;display:inline-flex;align-items:center;line-height:1;} .lang-btn.is-active{background:var(--accent);color:var(--accent-ink);} .vac-chip{border:1px solid var(--line-3);background:transparent;color:var(--text-bright);} .vac-chip:hover{border-color:color-mix(in srgb, var(--accent) 50%, transparent);color:var(--text-strong);} .vac-chip.is-active{border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);} .vac-chip.is-active:hover{color:var(--accent-ink);} /* ---------- hero audience swap ---------- */ .path-block.is-hidden{display:none !important;} /* ---------- input focus ---------- */ .inp-dark:focus{border-color:var(--accent) !important;} /* ---------- resume dropzone (drag-over state set from JS) ---------- */ [data-dropzone].is-dragover{border-color:var(--accent) !important;background:#171d26 !important;} /* ---------- "Why FSSA" running ticker of reason badges ---------- */ .why-track{animation:mrq 45s linear infinite;} .why-badge{flex:0 0 360px;} /* drag-to-scroll: JS берёт управление, CSS-анимацию глушим */ .why-mrq.js-drag{cursor:grab;scrollbar-width:none;-ms-overflow-style:none;user-select:none;} .why-mrq.js-drag::-webkit-scrollbar{display:none;} .why-mrq.js-drag.is-grabbing{cursor:grabbing;} .why-mrq.js-drag .why-track{animation:none !important;} /* ---------- marquees ---------- */ .mrq-track{display:flex;width:max-content;} .mrq-clients{animation:mrq 90s linear infinite;} .mrq-offices{animation:mrq 26s linear infinite;} .mrq-wrap:hover .mrq-track{animation-play-state:paused;} /* Клиентская строка логотипов управляется JS (initClientsDragScroll): drag мышью + пауза при наведении. CSS-анимацию отключаем, скрываем скроллбар. */ .mrq-wrap.js-drag{cursor:grab;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;user-select:none;} .mrq-wrap.js-drag::-webkit-scrollbar{display:none;} .mrq-wrap.js-drag.is-grabbing{cursor:grabbing;} .mrq-wrap.js-drag .mrq-track{animation:none !important;} /* лого не перехватывают drag (иначе браузер стартует «перетаскивание картинки») */ .mrq-wrap.js-drag img{pointer-events:none;-webkit-user-drag:none;user-drag:none;} /* ---------- news archive hide-beyond-limit ---------- */ .news-card-dark.is-hidden{display:none !important;} /* ---------- navigation (desktop layout + hamburger) ---------- */ .nav-right{display:flex;align-items:center;gap:18px;} .nav-links{display:flex;align-items:center;gap:16px;font-family:var(--font-display,'IBM Plex Sans',system-ui,sans-serif);font-weight:500;font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:var(--text-bright);flex-wrap:nowrap;white-space:nowrap;} .nav-actions{display:flex;align-items:center;gap:12px;} .login-ico{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:none;border:none;cursor:pointer;color:var(--text-muted);transition:color .15s ease,background-color .15s ease;} .login-ico:hover{background:color-mix(in srgb, var(--accent) 12%, transparent);} .login-ico--in{color:var(--accent);} .login-ico-form{display:inline-flex;} /* Inline-кнопки управления статьёй на карточках новостей (видны staff'у) */ /* Тёмная «пилюля» под иконкой — высокий контраст глифа на ЛЮБОМ фоне (светлая corporate-тема, тёмные темы, поверх grayscale-обложек). */ .ncard-ico{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(17,21,27,.78);border:1px solid rgba(255,255,255,.18);box-shadow:0 2px 8px rgba(0,0,0,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background-color .15s;} .ncard-ico:hover{background:rgba(17,21,27,.92);} .ncard-ico:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .ncard-ico--edit{color:#46C68C;} .ncard-ico--del{color:#FF8A8A;cursor:pointer;} .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:10px;background:transparent;border:1px solid var(--line-3);border-radius:8px;cursor:pointer;} .nav-burger span{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;transition:transform .25s ease, opacity .2s ease;} .nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-burger.is-open span:nth-child(2){opacity:0;} .nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* ---------- «Группа» dropdown (hover on desktop, expanded on mobile) ---------- */ .nav-dd{position:relative;display:inline-flex;align-items:center;} .nav-dd-trigger{display:inline-flex;align-items:center;gap:5px;} .nav-dd-caret{transition:transform .2s ease;opacity:.8;} .nav-dd:hover .nav-dd-caret,.nav-dd:focus-within .nav-dd-caret{transform:rotate(180deg);color:var(--accent);} /* invisible bridge over the gap so the menu stays open while the cursor travels */ .nav-dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;} .nav-dd-menu{position:absolute;top:calc(100% + 12px);left:0;min-width:236px;display:flex;flex-direction:column; background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:6px; box-shadow:0 26px 46px -26px rgba(0,0,0,.55);z-index:60; opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .16s ease,transform .16s ease,visibility .16s;} .nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:translateY(0);} .nav-dd-menu a{display:block;padding:11px 13px;border-radius:8px;font-size:13px;letter-spacing:.02em; text-transform:uppercase;color:var(--text-bright);white-space:nowrap;text-decoration:none; transition:background-color .14s ease,color .14s ease;} .nav-dd-menu a:hover,.nav-dd-menu a:focus-visible{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent);} @media (max-width:1160px){ .nav-burger{display:flex;} .nav-right{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:18px;background:var(--bg);border-bottom:1px solid var(--line);padding:18px clamp(18px,4vw,44px) 24px;box-shadow:0 26px 44px -30px rgba(0,0,0,.95);} .nav-right.is-open{display:flex;} .nav-links{flex-direction:column;align-items:flex-start;gap:18px;font-size:16px;} .nav-actions{flex-direction:column;align-items:flex-start;gap:14px;width:100%;} .nav-actions .login-ico{width:44px;height:44px;} .nav-cta{width:100%;text-align:center;} /* «Группа» → sub-items expanded inline (no hover on touch) */ .nav-dd{display:block;width:100%;} .nav-dd::after{display:none;} .nav-dd-caret{display:none;} .nav-dd-menu{position:static;opacity:1;visibility:visible;transform:none;min-width:0; background:transparent;border:none;border-left:2px solid var(--line);border-radius:0; box-shadow:none;padding:0 0 0 14px;margin:12px 0 0 2px;gap:2px;} .nav-dd-menu a{font-size:14px;padding:9px 0;} } /* Экосистема группы: отдельные карточки с рамкой, скруглением и зазором — в том же формате, что и карточки-выгоды выше. Десктоп — 3 в ряд, планшет — 2, мобильный — 1. */ @media (max-width:1080px){ .group-grid{grid-template-columns:1fr 1fr !important;} } @media (max-width:760px){ .group-grid{grid-template-columns:1fr !important;gap:14px !important;} } /* Экосистема: карточки-выгоды «один партнёр» */ .group-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} .group-benefit{ background:var(--surface); border:1px solid var(--line-2); border-radius:14px; padding:24px 22px 26px; display:flex;flex-direction:column; transition:border-color .2s ease; } .group-benefit:hover{border-color:var(--accent);} .gb-ico{ width:46px;height:46px;border-radius:11px; border:1px solid var(--line-3); background:var(--bg-deep); display:inline-flex;align-items:center;justify-content:center; margin-bottom:16px; } .gb-title{ font-family:var(--font-display,'IBM Plex Sans',system-ui,sans-serif);font-weight:600; font-size:17px;text-transform:uppercase;letter-spacing:.01em; color:var(--text-strong);margin-bottom:8px;line-height:1.15; } .gb-desc{font-size:14px;line-height:1.55;color:var(--text-muted);margin:0;} @media (max-width:880px){ .group-benefits{grid-template-columns:1fr;} } /* ============================================================ Responsive collapse (the original desktop design has no media queries; these keep desktop identical and make small screens usable) ============================================================ */ @media (max-width:980px){ .hero-grid{grid-template-columns:1fr !important;} .grid-2-center{grid-template-columns:1fr !important;} .two-col-head{grid-template-columns:1fr !important;} .footer-grid{grid-template-columns:1fr 1fr !important;} } @media (max-width:760px){ .grid-3{grid-template-columns:1fr 1fr !important;} .ncard-ico{width:44px;height:44px;} .stat-strip{grid-template-columns:1fr 1fr !important;} .sector-row{grid-template-columns:40px minmax(0,1fr) auto !important;align-items:start !important;column-gap:14px;} .sector-row > span:last-child{align-self:start;} .featured-card{grid-template-columns:1fr !important;} } @media (max-width:560px){ .grid-3{grid-template-columns:1fr !important;} .grid-2{grid-template-columns:1fr !important;} .footer-grid{grid-template-columns:1fr !important;} .vac-row{grid-template-columns:1fr auto !important;row-gap:8px !important;} .vac-row > span:nth-child(2), .vac-row > span:nth-child(3){grid-column:1;} .why-badge{flex-basis:300px;} } /* ---------- mobile card behaviours (swipe carousels & stacking) ---------- */ /* Горизонтальная «карусель» под палец: карточки не обрезаются за краем экрана, а прокручиваются свайпом влево/вправо со snap. Для «Клиенты и отрасли» и «География» (контакты филиалов). Размещено ПОСЛЕ правил .grid-3 выше, поэтому display:flex берёт верх над их grid-раскладкой. */ @media (max-width:760px){ .m-swipe{ display:flex !important; grid-template-columns:none !important; flex-wrap:nowrap !important; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; gap:12px !important; background:transparent !important; border:none !important; border-radius:0 !important; scrollbar-width:none; /* выезд к краям экрана: следующая карточка «выглядывает» — подсказка, что можно листать */ margin-left:calc(-1 * clamp(18px,4vw,44px)); margin-right:calc(-1 * clamp(18px,4vw,44px)); padding:2px clamp(18px,4vw,44px) 10px; } .m-swipe::-webkit-scrollbar{display:none;} .m-swipe > *{ flex:0 0 80% !important; scroll-snap-align:start; } /* карточки «Клиенты и отрасли» на десктопе разделены сеткой — в карусели им нужна своя рамка */ .m-swipe .ind-card{border:1px solid #D2D5DB;border-radius:12px;} } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ [data-cta-wiggle],[data-hero-swap]{animation:none !important;} .mrq-track{animation:none !important;} .fssa-logo{transition:none !important;} } /* ============================================================ MOBILE FIXES — independent mobile-review panel (2026-06-27), verified at 360 / 390 / 768px. Desktop layout is unchanged: each rule is either inside an @media or a tap-target min-height that does not move desktop content. (Replaces the dead THEME SWITCHER block — that preview widget was removed from base.html.) ============================================================ */ /* Safety net: never let a stray full-width block scroll the page sideways. */ html,body{overflow-x:clip;} /* [critical] Sector rows: long uppercase names (min-width:auto on a 1fr track) forced the whole page wider than the phone → horizontal scroll. Let the name track shrink and wrap instead. */ @media (max-width:760px){ /* [#1] 3 колонки: № | название | стрелка. align-items:start → стрелка на уровне ВЕРХНЕЙ строки названия (а не по центру многострочного имени). */ .sector-row{grid-template-columns:40px minmax(0,1fr) auto !important;align-items:start !important;column-gap:14px;} .sector-row > span:nth-child(2){overflow-wrap:anywhere;word-break:break-word;min-width:0;} .sector-row > span:last-child{align-self:start;margin-top:2px;} } /* [major] Hero «цифры» strip: two padded cells overflow ≤360px → 1 column. */ @media (max-width:560px){ .stat-strip{grid-template-columns:1fr !important;} .stat-strip > div{padding:22px 18px;} } /* [minor] News archive grid: 3 columns are cramped on tablets → 2-up across 561–980px (phones still drop to 1 column at ≤560px). */ /* [#3 fix] 2-up ТОЛЬКО в диапазоне планшета 561–980px. Раньше было @media(max-width:980) → это правило шло ПОЗЖЕ ≤560-правила «1 колонка» (строка выше) и перебивало его, из-за чего «Работодателям» (services, .grid-3 без m-stack) оставался в 2 колонки на телефоне и уезжал за экран. Теперь ≤560 остаётся 1 колонкой. */ @media (min-width:561px) and (max-width:980px){ .grid-3{grid-template-columns:1fr 1fr !important;} } @media (max-width:980px){ /* «Новости» (.m-stack) — строго 1 карточка в ряд на моб/планшете. */ .grid-3.m-stack{grid-template-columns:1fr !important;} } /* Карточки не расширяют грид-трек своим min-content → нет горизонтального выезда. */ .svc-card,.ind-card{min-width:0;} /* [minor] Vacancy rows on phones: pin the arrow to the top-right and tighten the loose inter-line spacing. */ @media (max-width:560px){ .vac-row{row-gap:6px !important;padding-top:16px !important;padding-bottom:16px !important;} .vac-row > span:nth-child(4){grid-column:2;grid-row:1 / -1;align-self:start;margin-top:2px;} } /* [minor] Touch targets ≥44px. min-height/inline-flex keep the desktop look; the panel-link & lang rules are scoped to the burger breakpoint so the desktop nav row is untouched. */ .vac-chip{min-height:44px;display:inline-flex;align-items:center;} /* [#2] Город-кнопки одинаковой ширины; название внутри всегда едет непрерывной бегущей строкой справа налево (JS дублирует текст сегментами для бесшовного цикла и ставит класс .is-marquee). При наведении анимация встаёт на паузу, чтобы название можно было прочитать и кликнуть. */ .vac-chip{width:124px;box-sizing:border-box;justify-content:center;overflow:hidden;padding-left:10px !important;padding-right:10px !important;} .vac-chip-txt{display:inline-block;white-space:nowrap;will-change:transform;} .vac-chip-txt .mq-seg{display:inline-block;padding-right:var(--mq-gap,28px);} .vac-chip.is-marquee{justify-content:flex-start;} .vac-chip.is-marquee .vac-chip-txt{animation:chipMarquee var(--mq-dur,6s) linear infinite;} .vac-chip.is-marquee:hover .vac-chip-txt{animation-play-state:paused;} @keyframes chipMarquee{from{transform:translateX(0);}to{transform:translateX(var(--mq-shift,-50%));}} @media (prefers-reduced-motion:reduce){.vac-chip.is-marquee .vac-chip-txt{animation:none !important;}} /* [#2 моб] На телефоне ровно 3 кнопки в ряд: ширина = 1/3 контейнера минус gap (контейнер flex-wrap gap:8px → 2 промежутка = 16px). -1px — запас от округления. */ @media (max-width:560px){ .vac-chip{width:auto;flex:0 0 calc((100% - 16px) / 3 - 1px);} } /* [#4] «Ключевые клиенты»: маркиза во всю ширину экрана на мобиле — лого выезжают из-под правого края и уходят за левый (рамок нет; как в «Почему FSSA»). */ @media (max-width:760px){ .mrq-clients-bleed{margin-left:calc(-1 * clamp(18px,4vw,44px));margin-right:calc(-1 * clamp(18px,4vw,44px));} } .nav-burger{height:44px;} @media (max-width:1160px){ .nav-right .nav-links{align-items:stretch;} .nav-right .nav-links a{display:block;width:100%;padding:10px 0;} .lang-btn{min-height:44px;padding:11px 16px;display:inline-flex;align-items:center;justify-content:center;} } @media (max-width:760px){ .back-link{display:inline-flex;align-items:center;min-height:44px;} }