/* =========================================================================== FlyCentralAsia V2 — оформление по макету «FlyCentralAsia Data.dc.html» Токены и размеры взяты из макета один в один. Инлайновые стили артборда переведены в классы: макет рисует один экран фиксированной ширины, а сайту нужна сетка, которая живёт на любом окне. Область действия — .v2 на . Существующие страницы (главная, новости) продолжают использовать site.css и этим файлом не затрагиваются. =========================================================================== */ .v2{ /* поверхности */ --bg:#0A1727; --panel:#0F2036; --panel-alt:#0C1D33; --footer:#081320; /* акценты */ --gold:#E0AE55; --gold-hi:#F0C273; --blue:#6FA0D8; --blue-soft:#8FB3DA; --green:#5FB59A; /* текст */ --tx:#FFFFFF; --tx-1:#EDF2F8; --tx-2:#C3D2E4; --tx-3:#A9BCD2; --tx-4:#93A7BE; --tx-5:#7E94AC; --tx-6:#6B8098; /* линии */ --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.16); --gold-line:rgba(224,174,85,.32); --gold-line-2:rgba(224,174,85,.28); --maxw:1360px; --pad:34px; background:var(--bg); color:var(--tx-3); font-family:'Golos Text',system-ui,-apple-system,Segoe UI,sans-serif; margin:0; -webkit-font-smoothing:antialiased; } .v2 *{box-sizing:border-box} /* :where() держит специфичность на нуле для класса .v2, оставляя только тег a — (0,0,1). Раньше здесь стояло .v2 a (0,1,1), и это перебивало ЛЮБОЙ компонент с цветом на самом теге , если у него один класс: и .v2-btn (заметно — золотой текст на золотой кнопке), и .v2-signin (незаметно — золотой вместо светло-серого, но на тёмном фоне сходило с рук). Теперь любой класс уровня компонента побеждает без специальных трюков. */ :where(.v2) a{color:var(--gold);text-decoration:none;transition:color .18s ease} .v2 a:hover{color:var(--gold-hi)} .v2 :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} .v2 ::selection{background:var(--gold);color:var(--bg)} /* Пропустить навигацию — для клавиатуры и скринридеров. */ .v2 .skip{ position:absolute;left:-9999px;top:0;z-index:100; padding:12px 18px;background:var(--gold);color:var(--bg); font:600 13px/1 'Golos Text',sans-serif;border-radius:0 0 7px 0; } .v2 .skip:focus{left:0} /* ── шапка ───────────────────────────────────────────────────────────── */ .v2-hdr{ display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:20px; padding:14px 22px;min-height:72px; border-bottom:1px solid var(--line); } .v2-brand{display:flex;align-items:center;gap:10px;flex:none} .v2-brand img{height:26px;display:block} .v2-word{font:800 18px/1 'Golos Text',sans-serif;color:var(--tx);letter-spacing:-.01em} .v2-word i{color:var(--blue-soft);font-weight:500;font-style:italic} .v2-nav{ display:flex;align-items:center;flex-wrap:wrap;gap:8px 8px; font:600 13px/1 'Golos Text',sans-serif; } .v2-nav a{color:var(--tx-2);padding-bottom:3px;border-bottom:2px solid transparent} .v2-nav a:hover{color:var(--tx)} .v2-nav a[aria-current="page"]{color:var(--tx);border-bottom-color:var(--gold)} .v2-tools{display:flex;align-items:center;gap:12px} .v2-lang{ display:flex;height:34px;border-radius:6px;overflow:hidden; border:1px solid var(--line-2); font:600 12px/1 'JetBrains Mono',monospace; } .v2-lang a{ display:flex;align-items:center;padding:0 11px;color:var(--tx-4); transition:background .18s ease,color .18s ease; } .v2-lang a:hover{color:var(--tx)} .v2-lang a[aria-current="true"]{background:var(--gold);color:var(--bg)} .v2-lang a[aria-current="true"]:hover{background:var(--gold-hi);color:var(--bg)} .v2-signin{ display:inline-flex;align-items:center;height:34px;padding:0 15px; border:1px solid var(--line-2);border-radius:6px; font:600 12.5px/1 'Golos Text',sans-serif;color:var(--tx-1); white-space:nowrap;background:none;cursor:pointer; transition:border-color .18s ease,background .18s ease,color .18s ease; } .v2-signin:hover{border-color:var(--gold);color:var(--gold);background:rgba(224,174,85,.06)} /* ── контейнер страницы ──────────────────────────────────────────────── */ .v2-wrap{max-width:var(--maxw);margin:0 auto;padding:44px var(--pad) 70px} .v2-crumbs{ display:flex;align-items:center;gap:10px; font:500 11.5px/1 'JetBrains Mono',monospace;color:var(--tx-5); margin-bottom:26px; } .v2-crumbs a{color:var(--tx-5)} .v2-crumbs a:hover{color:var(--gold)} .v2-crumbs [aria-current="page"]{color:var(--tx-1)} .v2-h1{ margin:0 0 18px;max-width:820px; font:800 52px/1.06 'Golos Text',sans-serif;color:var(--tx);letter-spacing:-.03em; } .v2-lead{ margin:0 0 34px;max-width:660px; font:400 16.5px/1.65 'Golos Text',sans-serif;color:var(--tx-3); } /* ── поиск ───────────────────────────────────────────────────────────── */ .v2-search{ display:flex;align-items:center;gap:8px; height:52px;padding:0 18px;max-width:560px;margin-bottom:44px; border:1px solid var(--line-3);border-radius:8px;background:var(--panel); transition:border-color .18s ease,background .18s ease; } .v2-search:focus-within{border-color:var(--gold);background:#12253d} .v2-search svg{width:17px;height:17px;flex:none;color:var(--tx-4);stroke:currentColor;fill:none;stroke-width:2} .v2-search input{ flex:1;min-width:0;height:100%;border:0;background:none;color:var(--tx-1); font:400 14.5px/1 'Golos Text',sans-serif; } /* В макете плейсхолдер #6B8098: на панели это 4.04:1 — ниже порога AA (4.5). Берём соседний токен палитры --tx-5, он даёт 5.25:1 и почти не отличается визуально. */ .v2-search input::placeholder{color:var(--tx-5)} .v2-search input:focus{outline:none} /* ── заголовок группы ────────────────────────────────────────────────── */ .v2-label{ font:500 11px/1 'JetBrains Mono',monospace;letter-spacing:.2em; color:var(--blue);margin:0 0 16px; } /* ── карточки разделов ───────────────────────────────────────────────── */ .v2-cards{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;margin-bottom:44px; } .v2-card{ display:flex;flex-direction:column; padding:24px;border-radius:10px; background:var(--panel);border:1px solid var(--line); transition:transform .2s cubic-bezier(.2,.7,.3,1),border-color .2s ease,background .2s ease; } .v2-card--live{border-color:var(--gold-line)} a.v2-card:hover{transform:translateY(-3px);border-color:var(--gold);background:#12253d} .v2-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:24px} .v2-card-title{margin:0;font:700 19px/1.2 'Golos Text',sans-serif;color:var(--tx)} .v2-card-desc{font:400 13px/1.55 'Golos Text',sans-serif;color:var(--tx-4);margin-bottom:18px} .v2-card-cta{ margin-top:auto;display:inline-flex;align-items:center;gap:6px; font:600 12.5px/1 'Golos Text',sans-serif;color:var(--gold); } .v2-card-cta i{font-style:normal;transition:transform .2s ease} a.v2-card:hover .v2-card-cta i{transform:translateX(3px)} .v2-card-note{margin-top:auto;font:600 12.5px/1 'Golos Text',sans-serif;color:var(--tx-5)} /* ── бейджи ──────────────────────────────────────────────────────────── */ .v2-pill{ padding:4px 8px;border-radius:12px;white-space:nowrap; font:600 9.5px/1 'JetBrains Mono',monospace; background:rgba(255,255,255,.08);color:var(--tx-4); } .v2-pill--live{background:rgba(224,174,85,.16);color:var(--gold)} .v2-lvl{ padding:4px 8px;border-radius:3px;white-space:nowrap; font:600 10px/1 'JetBrains Mono',monospace; background:rgba(255,255,255,.08);color:var(--tx-4); } .v2-lvl--l1{background:rgba(95,181,154,.14);color:var(--green)} .v2-lvl--l2{background:rgba(111,160,216,.14);color:var(--blue-soft)} .v2-lvl--l3{background:rgba(224,174,85,.18);color:var(--gold)} /* ── плитки отрасли ──────────────────────────────────────────────────── */ .v2-tiles{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px;background:var(--line); border:1px solid var(--line);border-radius:10px;overflow:hidden; margin-bottom:44px; } .v2-tile{padding:22px;background:var(--panel);transition:background .2s ease} .v2-tile:hover{background:#12253d} .v2-tile h3{font:700 16px/1.2 'Golos Text',sans-serif;color:var(--tx);margin:0 0 10px} .v2-tile p{font:400 12.5px/1.5 'Golos Text',sans-serif;color:var(--tx-4);margin:0 0 14px} .v2-tile .v2-meta{font:500 10px/1 'JetBrains Mono',monospace;color:var(--tx-5)} /* ── операционные продукты (L3) ──────────────────────────────────────── */ .v2-ops{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:44px} .v2-op{ padding:26px;border-radius:10px; background:linear-gradient(160deg,rgba(224,174,85,.09),rgba(224,174,85,0) 65%),var(--panel); border:1px solid var(--gold-line-2); transition:border-color .2s ease,transform .2s cubic-bezier(.2,.7,.3,1); } .v2-op:hover{border-color:var(--gold);transform:translateY(-2px)} .v2-op-top{display:flex;align-items:center;gap:9px;margin-bottom:16px;flex-wrap:wrap} .v2-kicker{ font:500 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--tx-5); } .v2-op h3{font:700 22px/1.2 'Golos Text',sans-serif;color:var(--tx);margin:0 0 10px} .v2-op p{font:400 13.5px/1.6 'Golos Text',sans-serif;color:var(--tx-4);margin:0 0 20px} /* ── кнопки: единая система, используется на /data/, /data/airports/ и на главной. Раньше здесь и в v2-home.css было ДВА разных определения .v2-btn с одинаковой специфичностью (0,1,0): это, а не только правило .v2 a, и было второй причиной нечитаемых кнопок — .v2-btn--ghost и .v2-btn--outline сами фон не задают, поэтому по цепочке использовался background:var(--gold) из более раннего правила, случайно оставшегося активным. Теперь определение одно и лежит в общем файле. ── */ .v2-btn{ display:inline-flex;align-items:center;height:48px;padding:0 24px; border-radius:7px;font:600 14.5px/1 'Golos Text',sans-serif; border:1px solid transparent;cursor:pointer; transition:transform .18s ease,background .18s ease,border-color .18s ease; } .v2-btn:hover{transform:translateY(-1px)} .v2-btn--blue{background:#2F6FE4;color:#fff} .v2-btn--blue:hover{background:#3f7cec;color:#fff} .v2-btn--ghost{border-color:var(--line-2);color:var(--tx-1)} .v2-btn--ghost:hover{border-color:var(--gold);color:var(--gold)} .v2-btn--gold{height:44px;padding:0 22px;background:var(--gold);color:var(--bg);border:0} .v2-btn--gold:hover{background:var(--gold-hi);color:var(--bg)} .v2-btn--outline{height:44px;padding:0 22px;border-color:rgba(255,255,255,.2);color:var(--tx-1)} .v2-btn--outline:hover{border-color:var(--gold);color:var(--gold)} /* ── легенда уровней доступа ─────────────────────────────────────────── */ .v2-levels{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px;background:var(--line); border:1px solid var(--line);border-radius:10px;overflow:hidden; } .v2-level{padding:24px;background:var(--panel-alt)} .v2-level-top{display:flex;align-items:center;gap:8px;margin-bottom:12px} .v2-level-name{font:600 13.5px/1 'Golos Text',sans-serif;color:var(--tx-1)} .v2-level p{font:400 12.5px/1.55 'Golos Text',sans-serif;color:var(--tx-4);margin:0} /* ── подвал ──────────────────────────────────────────────────────────── */ .v2-foot{ display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:16px; padding:34px;border-top:1px solid var(--line);background:var(--footer); } .v2-foot-mark{font:400 11px/1.5 'JetBrains Mono',monospace;color:var(--tx-5)} .v2-foot a{font:500 12px/1 'Golos Text',sans-serif;color:var(--tx-4)} .v2-foot a:hover{color:var(--gold)} /* ── адаптив ───────────────────────────────────────────────────────────── Макет нарисован на широком экране. Ниже — та же композиция, свёрнутая так, чтобы ничего не обрезалось и всё оставалось нажимаемым. ───────────────────────────────────────────────────────────────────── */ @media (max-width:1000px){ .v2-ops{grid-template-columns:1fr} } @media (max-width:820px){ .v2-hdr{padding:12px 20px;gap:14px} .v2-nav{order:3;width:100%;gap:8px 16px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none} .v2-nav::-webkit-scrollbar{display:none} .v2-wrap{padding:32px 20px 56px} .v2-h1{font-size:clamp(30px,7.4vw,44px)} .v2-lead{font-size:15.5px} } @media (max-width:560px){ .v2-hdr{padding:12px 16px} .v2-wrap{padding:26px 16px 48px} .v2-h1{letter-spacing:-.02em} .v2-search{height:48px;padding:0 14px} .v2-card,.v2-op{padding:20px} .v2-tile,.v2-level{padding:18px} .v2-foot{padding:26px 16px;flex-direction:column;align-items:flex-start;gap:12px} /* 44px — минимальная площадь нажатия */ /* 44px — минимальная площадь нажатия, по высоте тоже */ .v2-lang{height:46px} /* 46 внешних = 44 внутренних, за вычетом рамки */ .v2-lang a{min-width:44px;justify-content:center} .v2-signin{height:40px;padding:0 18px} } @media (prefers-reduced-motion:reduce){ .v2 *,.v2 *::before,.v2 *::after{transition:none!important;animation:none!important} a.v2-card:hover,.v2-op:hover,.v2-btn:hover{transform:none} } /* Видно только скринридеру. */ .v2 .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ════════════════════════════════════════════════════════════ V2 — навигация с выпадающими меню (артборд 1a) Плоское меню из артборда Data было заглушкой. Здесь настоящая шапка: пункты-пилюли 38px, каретка ▾ у разделов с подменю, бейдж SOON у ненаполненных. ════════════════════════════════════════════════════════════ */ .v2 .v2-nav{ position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:6px; font:600 13px/1 'Golos Text',sans-serif;color:var(--tx-2); } .v2 .v2-navlink{ display:flex;align-items:center;gap:6px;height:38px;padding:0 9px; border-radius:7px;color:var(--tx-2);border-bottom:0;white-space:nowrap; transition:background .18s ease,color .18s ease; } .v2 .v2-navlink:hover{background:rgba(255,255,255,.06);color:var(--tx)} .v2 .v2-navlink.on{color:var(--tx);background:rgba(255,255,255,.07)} .v2 .v2-navlink.is-soon{color:var(--tx-5)} .v2 .v2-soon{ padding:3px 6px;border-radius:10px;white-space:nowrap; background:rgba(255,255,255,.07); font:600 8.5px/1 'JetBrains Mono',monospace;color:var(--tx-5); } .v2 .navitem{position:relative;display:flex;align-items:center;gap:0} .v2 .subtoggle{ display:inline-flex;align-items:center;justify-content:center; width:24px;height:38px;margin-left:-6px; background:none;border:0;cursor:pointer;color:var(--tx-2); font-size:9px;transition:color .18s ease,transform .22s ease; } .v2 .navitem:hover .subtoggle, .v2 .navitem:focus-within .subtoggle{color:var(--tx)} .v2 .navitem:hover .subtoggle, .v2 .navitem.open .subtoggle{transform:rotate(180deg)} .v2 .submenu{ position:absolute;top:100%;left:0;padding-top:10px;z-index:120; opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px); transition:opacity .18s ease,transform .18s ease,visibility .18s; } .v2 .navitem:hover > .submenu, .v2 .navitem:focus-within > .submenu, .v2 .navitem.open > .submenu{ opacity:1;visibility:visible;pointer-events:auto;transform:none; } .v2 .submenu-inner{ display:flex;gap:30px;padding:22px 24px;min-width:250px; background:var(--panel);border:1px solid var(--line);border-radius:10px; box-shadow:0 26px 64px rgba(0,0,0,.5); } .v2 .submenu-mega .submenu-inner{min-width:660px} .v2 .subgroup{min-width:196px} .v2 .subgroup-label{ font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.16em; color:var(--blue);margin-bottom:10px;padding:0 10px; } .v2 .submenu ul{list-style:none;margin:0;padding:0} .v2 .submenu a{ display:flex;align-items:center;justify-content:space-between;gap:12px; height:36px;padding:0 10px;border-radius:6px; font:500 13px/1 'Golos Text',sans-serif;color:var(--tx-2); transition:background .16s ease,color .16s ease; } .v2 .submenu a:hover{background:rgba(255,255,255,.06);color:var(--tx)} .v2 .submenu .v2-pill,.v2 .submenu .v2-lvl{font-size:8.5px;padding:3px 6px} /* гамбургер — только на узких экранах */ .v2 .navtoggle{ display:none;width:44px;height:44px;flex:none; background:none;border:0;cursor:pointer;padding:12px 10px; } .v2 .navtoggle span{ display:block;height:1.5px;background:var(--tx-4);border-radius:2px; transition:transform .25s ease,opacity .2s ease; } .v2 .navtoggle span+span{margin-top:5px} .v2 .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .v2 .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0} .v2 .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} @media (max-width:1100px){ .v2 .submenu-mega .submenu-inner{min-width:0;flex-wrap:wrap;gap:20px} .v2 .submenu{left:auto;right:0} } @media (max-width:900px){ .v2 .navtoggle{display:block} .v2 .v2-nav{ display:flex;flex-direction:column;align-items:stretch;gap:0; position:fixed;top:72px;left:0;right:0;z-index:200; background:var(--bg);border-bottom:1px solid var(--line); padding:6px 20px 18px; max-height:calc(100vh - 72px);overflow-y:auto; transform:translateY(-12px);opacity:0;pointer-events:none; transition:opacity .22s ease,transform .22s ease; } .v2 .v2-nav.open{transform:none;opacity:1;pointer-events:auto} .v2 .navitem{display:flex;flex-wrap:wrap;justify-content:space-between;position:static} .v2 .v2-navlink{flex:1;height:auto;min-height:46px;font-size:15px;border-radius:0} .v2 .navitem,.v2 .v2-nav > .v2-navlink{border-bottom:1px solid var(--line)} .v2 .v2-nav > :last-child{border-bottom:0} .v2 .subtoggle{width:46px;height:46px;margin:0;font-size:12px} /* На сенсоре наведения нет: раскрываем только по нажатию. */ .v2 .submenu{ position:static;transform:none;padding-top:0;width:100%; opacity:1;visibility:visible;pointer-events:auto;display:none;transition:none; } .v2 .navitem:hover > .submenu, .v2 .navitem:focus-within > .submenu, .v2 .navitem.open > .submenu{transform:none} .v2 .navitem.open > .submenu{display:block} .v2 .submenu-inner,.v2 .submenu-mega .submenu-inner{ flex-direction:column;gap:14px;padding:4px 0 12px;min-width:0; background:none;border:0;box-shadow:none; } .v2 .subgroup{min-width:0} .v2 .submenu a{height:44px;padding:0 14px;border-radius:0} body.nav-open{overflow:hidden} } /* ════════════════════════════════════════════════════════════ V2 — каталог аэропортов (артборд «FlyCentralAsia Airports») ════════════════════════════════════════════════════════════ */ .v2-h1--sm{font-size:44px;line-height:1.08;margin-bottom:12px} .v2-lead--sm{font-size:15.5px;line-height:1.6;max-width:560px;margin-bottom:0} .v2-pagehead{ display:flex;align-items:flex-end;justify-content:space-between; gap:30px;flex-wrap:wrap;margin-bottom:32px; } .v2-stats{display:flex;gap:22px;padding-left:26px;border-left:1px solid rgba(255,255,255,.12);margin:0} .v2-stats div{margin:0} .v2-stats dd{margin:0;font:700 28px/1 'Golos Text',sans-serif;color:var(--tx)} .v2-stats dd.is-ok{color:var(--green)} .v2-stats dd.is-gold{color:var(--gold)} .v2-stats dt{ order:2;margin-top:6px; font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--tx-5); } .v2-stats div{display:flex;flex-direction:column} /* ── фильтры ── */ .v2-filters{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap} .v2-search--sm{height:44px;padding:0 15px;margin-bottom:0;flex:1;min-width:280px;border-radius:7px} .v2-search--sm input{font-size:13.5px} .v2-chips{display:flex;gap:6px;flex-wrap:wrap} .v2-chip{ display:inline-flex;align-items:center;height:44px;padding:0 14px;border-radius:7px; border:1px solid var(--line-2);background:none;color:var(--tx-2);cursor:pointer; font:500 11.5px/1 'JetBrains Mono',monospace; transition:background .18s ease,color .18s ease,border-color .18s ease; } .v2-chip:hover{border-color:var(--gold);color:var(--tx)} .v2-chip.is-on{background:var(--gold);border-color:var(--gold);color:var(--bg)} /* ── таблица ── */ .v2-table{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px} .v2-tr{ display:grid; grid-template-columns:2.2fr 90px 1.1fr 100px 1.1fr 1.2fr 116px; gap:16px;align-items:center; padding:16px 20px;background:var(--panel); border-top:1px solid rgba(255,255,255,.06); font:400 13.5px/1.35 'Golos Text',sans-serif;color:var(--tx-2); transition:background .16s ease; } .v2-tr:hover:not(.v2-thead){background:#12253d} .v2-thead{ padding:13px 20px;background:var(--footer);border-top:0; font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--tx-5); } .v2-td-name{font-weight:700;color:var(--tx)} .v2-mono{font-family:'JetBrains Mono',monospace;font-size:12.5px} .v2-iata{color:var(--gold)} .v2-dim{color:var(--tx-4);font-size:12px} .v2-levels-cell{display:flex;gap:4px} .v2-lvl--none{background:rgba(126,148,172,.14);color:var(--tx-5)} .v2-levels-cell .v2-lvl{padding:4px 6px;font-size:9.5px} .v2-count{ font:500 11.5px/1 'JetBrains Mono',monospace;color:var(--tx-5); margin:0 0 70px; } /* ── пустое состояние ── */ .v2-empty{ border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:10px; background:rgba(224,174,85,.05);padding:34px 36px;margin-bottom:70px;max-width:70ch; } .v2-empty h2{font:700 20px/1.25 'Golos Text',sans-serif;color:var(--tx);margin:0 0 10px} .v2-empty p{font:400 14.5px/1.65 'Golos Text',sans-serif;color:var(--tx-4);margin:0 0 20px} /* ── адаптив таблицы ────────────────────────────────────────────────── Семь колонок на телефоне не помещаются. Строка превращается в карточку, а заголовки колонок подставляются через data-атрибуты. ─────────────────────────────────────────────────────────────────── */ @media (max-width:1080px){ .v2-tr{grid-template-columns:2fr 78px 1.1fr 1.2fr 116px} .v2-tr > :nth-child(4),.v2-tr > :nth-child(5){display:none} } @media (max-width:760px){ .v2-pagehead{align-items:flex-start} .v2-stats{padding-left:0;border-left:0;gap:26px} .v2-thead{display:none} .v2-tr{ grid-template-columns:1fr auto;gap:6px 12px;padding:16px; border-top:1px solid var(--line); } .v2-tr > :nth-child(4),.v2-tr > :nth-child(5){display:none} .v2-td-name{grid-column:1;font-size:15px} .v2-iata{grid-column:2;justify-self:end} .v2-tr > :nth-child(3){grid-column:1;color:var(--tx-4);font-size:12.5px} .v2-levels-cell{grid-column:1/-1;margin-top:6px} .v2-tr > :nth-child(6){grid-column:1/-1;font-size:11.5px} } /* ── честные заглушки: главная, /insights/, /reports/, /business/, и все 26 страниц подкатегорий ─────────────────────────────────────── */ .v2-stub{ margin-top:20px;padding:26px 28px;border-radius:10px; border:1px solid var(--gold-line); background:linear-gradient(160deg,rgba(224,174,85,.07),rgba(224,174,85,0) 65%),var(--panel); } .v2-stub h3{margin:0 0 8px;font:700 18px/1.3 'Golos Text',sans-serif;color:var(--tx)} .v2-stub p{margin:0 0 14px;font:400 13.5px/1.6 'Golos Text',sans-serif;color:var(--tx-4)} .v2-stub .v2-more{margin:0} .v2-stub .v2-btn{margin-top:2px} /* ── группа карточек: /insights/, /routes/, /map/, /reports/, /business/ ── */ .v2-group{margin-bottom:56px} .v2-group:last-of-type{margin-bottom:90px} /* ── честный статус раздела ("каталог наполняется" и т.п.) ───────────── */ .v2-state{ display:flex;align-items:flex-start;gap:10px;margin:22px 0 0;max-width:68ch; padding:14px 18px;border:1px solid var(--line);border-left:2px solid var(--gold); border-radius:8px;background:rgba(224,174,85,.05); font:400 13.5px/1.6 'Golos Text',sans-serif;color:var(--tx-4); } .v2-state svg{flex:none;margin-top:2px;color:var(--gold)} /* ── строка поиска в шапке (артборд 1a) ──────────────────────────────── */ .v2-hdr-search{ display:flex;align-items:center;gap:8px; height:34px;padding:0 12px;width:190px; border:1px solid var(--line-2);border-radius:6px; transition:border-color .18s ease,width .2s ease; } .v2-hdr-search:focus-within{border-color:var(--gold);width:220px} .v2-hdr-search svg{ width:13px;height:13px;flex:none;opacity:.7; color:var(--tx-4);stroke:currentColor;fill:none;stroke-width:2; } .v2-hdr-search input{ flex:1;min-width:0;height:100%;border:0;background:none;color:var(--tx-1); font:400 12px/1 'JetBrains Mono',monospace; } .v2-hdr-search input::placeholder{color:var(--tx-5)} .v2-hdr-search input:focus{outline:none} /* Свёрнутая версия поиска — только иконка, для узких ширин, где полю с плейсхолдером уже не хватает места (ниже). Ведёт на /search/ напрямую, так что кнопка триггерит поиск и на телефоне, и на ноутбучной ширине. */ .v2-search-icon{ display:none;align-items:center;justify-content:center; width:38px;height:38px;flex:none;border-radius:6px; color:var(--tx-4);transition:background .18s ease,color .18s ease; } .v2-search-icon:hover{background:rgba(255,255,255,.06);color:var(--tx)} .v2-search-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2} /* Приоритет при нехватке места: развёрнутое поле поиска — самый необязательный элемент шапки, поэтому именно оно уступает место первой, но не поиск целиком — сворачиваем его до иконки, а не прячем. Раньше это было одно правило на 900px, но на 1280px (частое разрешение ноутбука) семь пунктов навигации + поиск + RU/EN + Войти физически не помещаются в 1360px-контейнер ни на одном языке: EN даёт перенос строки так же, как раньше RU. Дело не в языке, а в том, что раньше эта ширина вообще не проверялась. Один и тот же порог для всех языков. */ @media (max-width:1410px){ .v2-hdr-search{display:none} .v2-search-icon{display:flex} }