/* * СЕКЦИЯ РЕЙСОВ страницы яхты — стили. * * ФАЙЛ СГЕНЕРИРОВАН из макета скриптом docs/design/yacht-page/build-prod.py. * Руками не править: правка потеряется и разведёт прод с макетом. * * Отдельный файл, а не вставка в страницу: вставленное не кэшируется (ехало * бы на КАЖДЫЙ просмотр КАЖДОЙ страницы), видно постобработчикам Joomla и * закрывает дорогу к строгой политике безопасности (CSP). Порядок каскада * держит не место вставки, а стена .cy-routes.cy-routes — см. scope_css(). */ .cy-routes{container-type:inline-size;container-name:cyrt} /* ═══════════════ СТРОКА ═══════════════ */ .cy-routes.cy-routes .lane{display:flex;flex-direction:column;gap:14px}.cy-routes.cy-routes .row{position:relative;display:grid;grid-template-columns:264px 1fr;gap:0;cursor:pointer; background:linear-gradient(180deg,#fffefb 0%,#fbfaf6 100%);border-radius:22px;padding:9px; box-shadow:0 1px 1px rgba(10,22,40,.04),0 4px 10px rgba(10,22,40,.05),0 18px 38px -16px rgba(10,22,40,.22),inset 0 1px 0 rgba(255,255,255,.75); transition:box-shadow .26s cubic-bezier(.2,.7,.3,1),transform .26s cubic-bezier(.2,.7,.3,1); will-change:transform}@media(hover:hover){.cy-routes.cy-routes .row:hover{transform:translateY(-3px); box-shadow:0 2px 5px rgba(10,22,40,.06),0 12px 24px rgba(10,22,40,.08),0 30px 60px -18px rgba(10,22,40,.3),inset 0 1px 0 rgba(255,255,255,.9)}}/* signature — тёплая подложка + золотой волосок внутрь, без громкой рамки */ .cy-routes.cy-routes .row.sig{background:linear-gradient(180deg,#fffefb 0%,#fdfbf5 100%); box-shadow:0 1px 1px rgba(10,22,40,.04),0 4px 10px rgba(10,22,40,.05),0 20px 42px -16px rgba(10,22,40,.24), inset 0 0 0 1px rgba(201,169,110,.2),inset 0 1px 0 rgba(255,255,255,.8)}@media(hover:hover){.cy-routes.cy-routes .row.sig:hover{box-shadow:0 2px 5px rgba(10,22,40,.06),0 30px 62px -18px rgba(10,22,40,.3), inset 0 0 0 1px rgba(201,169,110,.3),inset 0 1px 0 rgba(255,255,255,.9)}}/* СИГНАТУРА — ОБЫЧНАЯ СТРОКА, НЕ ГЕРОЙ (вердикт «на десктопе тоже должно быть компактным, не супер здоровым»). Кадр 340 и высота 238 делали из сигнатуры отдельный жанр: рядом с ней рейсы Events выглядели «другими полностью и растянутыми». Теперь ВСЕ необычные рейсы — один и тот же размер строки, а сигнатуру держат лента SIGNATURE, тёплая подложка и золотой волосок. Ничего цветного/синего — отличие структурой и печатью бренда. */ /* ── медиа + карусель ── */ /* высоту строки задаёт медиа: 16/10 при 264px = 165px, ровно столько же занимает текстовый столбец — строка выходит «квадратной» по балансу, без пустот справа */ /* медиа тянется во всю высоту строки — иначе под фото остаётся белый карман, а строка выглядит недоделанной. min-height держит кадр, если текста мало. */ .cy-routes.cy-routes .med{position:relative;border-radius:16px;overflow:hidden;background:#0d1b30;height:100%;min-height:158px}.cy-routes.cy-routes .trk{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none; -webkit-overflow-scrolling:touch;scroll-behavior:smooth}.cy-routes.cy-routes .trk::-webkit-scrollbar{display:none}.cy-routes.cy-routes .sl{flex:0 0 100%;height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative}.cy-routes.cy-routes .sl img,.cy-routes.cy-routes .sl video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}/* слой постера под роликом: тот же кадр, что в атрибуте poster, но рисуется из DOM сразу — сеть на него не нужна вовсе */ .cy-routes.cy-routes .sl.vid{background-size:cover;background-position:center}.cy-routes.cy-routes .sl.map{background:#eaf1f5}/* НАСТОЯЩАЯ КАРТА в слайде. Схема лежит под ней и гаснет, когда приехали тайлы: так кадр никогда не бывает пустым, даже если сеть медленная. */ .cy-routes.cy-routes .sl.map{position:relative}.cy-routes.cy-routes .sl.map svg{transition:opacity .35s ease}.cy-routes.cy-routes .sl .lmap{position:absolute;inset:0;z-index:1;pointer-events:none}.cy-routes.cy-routes .sl .lmap .leaflet-container{width:100%;height:100%;background:#eaf1f6;font-family:'DM Sans',sans-serif}.cy-routes.cy-routes .sl .lmap .leaflet-control-container{display:none}/* Точки МЕЛЬЧЕ линии: на маленьком кадре пять одинаковых кружков спорили с маршрутом и выигрывали — читалось «точки на карте», а не «путь». */ .cy-routes.cy-routes .lmap-pin i{display:block;width:7px;height:7px;border-radius:50%;background:#fff; box-shadow:0 0 0 2px #0a1628,0 1px 4px rgba(10,22,40,.5)}.cy-routes.cy-routes .lmap-pin.start i{width:10px;height:10px;background:var(--gold);box-shadow:0 0 0 2.5px #0a1628,0 2px 8px rgba(150,110,40,.55)}.cy-routes.cy-routes .lmap-pin.end i{width:10px;height:10px;background:#0a1628;box-shadow:0 0 0 2.5px #fff,0 2px 8px rgba(10,22,40,.55)}.cy-routes.cy-routes .sl.map svg{position:absolute;inset:0;width:100%;height:100%}.cy-routes.cy-routes .med::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:1; background:linear-gradient(180deg,rgba(10,22,40,.1) 0%,rgba(10,22,40,0) 16%,rgba(10,22,40,0) 68%,rgba(10,22,40,.28) 100%)}.cy-routes.cy-routes .med.on-map::after{opacity:0}.cy-routes.cy-routes .dots{position:absolute;left:0;right:0;bottom:10px;z-index:3;display:flex;justify-content:center;gap:5px;pointer-events:none; filter:drop-shadow(0 1px 2px rgba(10,22,40,.55))}.cy-routes.cy-routes .dots i{width:5.5px;height:5.5px;border-radius:50%;background:rgba(255,255,255,.5);transition:all .22s}.cy-routes.cy-routes .dots i.on{background:#fff;transform:scale(1.2)}.cy-routes.cy-routes .med.on-map .dots i{background:rgba(10,22,40,.25)}.cy-routes.cy-routes .med.on-map .dots i.on{background:var(--navy)}.cy-routes.cy-routes .arr{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;z-index:4; background:rgba(255,255,255,.95);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .2s,transform .15s; box-shadow:0 2px 8px rgba(0,0,0,.26)}.cy-routes.cy-routes .arr svg{width:13px;height:13px;stroke:var(--navy);stroke-width:2.4;fill:none}.cy-routes.cy-routes .arr.p{left:9px}.cy-routes.cy-routes .arr.n{right:9px}.cy-routes.cy-routes .arr:active{transform:translateY(-50%) scale(.92)}/* на первом кадре нет «назад», на последнем нет «вперёд» — стрелка в тупик не ведёт, ровно то же правило, что у стрелок ленты */ .cy-routes.cy-routes .arr.off{opacity:0 !important;pointer-events:none}@media(hover:hover){.cy-routes.cy-routes .arr{display:flex}.cy-routes.cy-routes .med:hover .arr{opacity:1}}/* прыжок на карту / обратно */ .cy-routes.cy-routes .jmp{position:absolute;right:9px;top:9px;z-index:4;display:inline-flex;align-items:center;gap:6px;border:0;cursor:pointer; font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.14em;color:var(--navy);text-transform:uppercase; background:rgba(255,255,255,.95);padding:7px 11px;border-radius:999px;box-shadow:0 2px 8px rgba(10,22,40,.22); transition:transform .15s}.cy-routes.cy-routes .jmp svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}.cy-routes.cy-routes .jmp:active{transform:scale(.94)}.cy-routes.cy-routes .vbadge{position:absolute;left:9px;top:9px;z-index:3;display:inline-flex;align-items:center;gap:5px; background:rgba(10,22,40,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff; font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.14em;padding:5px 9px;border-radius:999px}.cy-routes.cy-routes .vbadge svg{width:9px;height:9px;fill:currentColor;stroke:none}/* угловая лента SIGNATURE — фирменный маркер особого рейса (как на карточке V8). Живёт на кадре и на телефоне тоже: это печать бренда, а не данные — санкционированное исключение из «медиа чистое» (решение Артёма). */ /* лента живёт на КАРТОЧКЕ: сидит на off-white рамке и залазит на фото — 1:1 как .ribbon на проде (странице яхты). Карточка клипает её своим скруглением. */ .cy-routes.cy-routes .row.sig{overflow:hidden}.cy-routes.cy-routes .rib{position:absolute;top:0;left:0;width:122px;height:122px;overflow:hidden;z-index:5;pointer-events:none}.cy-routes.cy-routes .rib span{position:absolute;top:22px;left:-34px;width:156px;transform:rotate(-45deg);text-align:center; background:linear-gradient(120deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));color:var(--navy); font-family:'Space Mono',monospace;font-weight:700;font-size:8.5px;letter-spacing:.18em;padding:5px 0; box-shadow:0 3px 9px rgba(80,55,10,.4),inset 0 1px 0 rgba(255,255,255,.4)}/* прод-схема углов сигнатуры (вердикт Артёма): лента TL, кнопка КУРСА — справа СВЕРХУ как на проде (.jmp остаётся на дефолтном top:9;right:9), якорь уходит вниз влево — слот прод-пилюли «5 STOPS». */ .cy-routes.cy-routes .row.sig .anch{left:9px;right:auto;top:auto;bottom:9px;max-width:56%}@container cyrt (max-width: 560px){.cy-routes.cy-routes .rib{width:82px;height:82px}.cy-routes.cy-routes .rib span{top:14px;left:-26px;width:110px;font-size:6.5px;letter-spacing:.16em;padding:3px 0} }/* ── тело ── */ .cy-routes.cy-routes .bd{position:relative;padding:12px 14px 10px 20px;display:flex;flex-direction:column;min-width:0}/* статус — в правый верхний угол: это метка состояния, а не часть покупки. Лежит в потоке внутри .when (там его место на телефоне), а на десктопе всплывает абсолютом на линию названия — один элемент, две раскладки. */ .cy-routes.cy-routes .top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.cy-routes.cy-routes .when .av{position:absolute;top:11px;right:0}.cy-routes.cy-routes .nm{padding-right:132px}/* статус может отсутствовать (рейс не связан с окном движка) — тогда резерв под него не нужен, иначе имя жмётся к левому краю без причины */ .cy-routes.cy-routes .row.no-av .nm{padding-right:0}.cy-routes.cy-routes .nm{font-family:'Outfit',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.015em;line-height:1.22;min-width:0}.cy-routes.cy-routes .when{margin-top:7px;display:flex;align-items:center;gap:9px;flex-wrap:wrap; font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}.cy-routes.cy-routes .when b{font-family:'Outfit',sans-serif;font-weight:700;font-size:14px;letter-spacing:0;color:var(--ink); font-variant-numeric:tabular-nums;text-transform:none}.cy-routes.cy-routes .when .d{width:3px;height:3px;border-radius:50%;background:rgba(10,22,40,.2);flex:0 0 auto}/* ЯКОРЬ — чипом НА ФОТО, а не отдельной строкой над названием: строка съедала вертикаль и в половине случаев дублировала имя («Cascais Bay» над «Cascais Bay Coastal Tour»). На фото он ничего не стоит по высоте и попадает туда, где взгляд и так задерживается. */ /* углы медиа заняты по схеме: слева-сверху якорь, справа-сверху MAP, снизу-центр точки. Внизу слева чип наезжал на точки — развели. */ .cy-routes.cy-routes .anch{position:absolute;left:9px;top:9px;z-index:3;display:inline-flex;align-items:center;gap:6px; background:rgba(10,22,40,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); color:#fff;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.01em; padding:5px 11px;border-radius:999px;box-shadow:0 2px 8px rgba(10,22,40,.28);max-width:62%}.cy-routes.cy-routes .anch span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cy-routes.cy-routes .anch::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold-hi);flex:0 0 auto}/* Описание обрезается СЧЁТОМ СТРОК, и это единственный механизм обрезки здесь. Остальное объявлено не для красоты, а чтобы карточка не зависела от того, во что её положили: страница яхты держит свой `.desc` — с ограничением высоты, собственным position и градиентом-затуханием в `::after`. Пока мы про эти свойства молчали, они доставались нам от неё: описание вставало на 87px и получало серую плашку цвета ЧУЖОГО фона прямо поверх текста. Молчание — это тоже решение, просто принятое за тебя. */ .cy-routes.cy-routes .desc{margin-top:9px;font-size:13px;line-height:1.55;color:var(--muted); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; position:static;max-height:none;max-width:none;transition:none}.cy-routes.cy-routes .desc::after{content:none}.cy-routes.cy-routes .desc.free{color:var(--faint);font-style:italic}.cy-routes.cy-routes .fbar{display:flex;align-items:center;gap:13px;margin-top:10px;flex-wrap:wrap}.cy-routes.cy-routes .fbar .f{display:flex;align-items:baseline;gap:5px;white-space:nowrap}.cy-routes.cy-routes .fbar .f b{font-family:'Outfit',sans-serif;font-weight:700;font-size:14px;line-height:1;font-variant-numeric:tabular-nums}.cy-routes.cy-routes .fbar .f.hi b{color:var(--gold-lo)}.cy-routes.cy-routes .fbar .f span{font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}.cy-routes.cy-routes .fbar .s{width:1px;height:11px;background:rgba(10,22,40,.11)}.cy-routes.cy-routes .tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.cy-routes.cy-routes .tag{font-size:11px;font-weight:500;color:#4b5866;background:rgba(10,22,40,.05);padding:4px 10px;border-radius:999px;white-space:nowrap}/* «+N» — не обрезка, а вход: остальные тезисы открываются в карточке рейса */ .cy-routes.cy-routes .tag.more{color:var(--gold-lo);background:rgba(201,169,110,.13);font-weight:600}.cy-routes.cy-routes .grow{flex:1;min-height:8px}/* подвал строки: цена слева, действие справа — цены выстраиваются в одну вертикаль */ .cy-routes.cy-routes .foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:12px;margin-top:2px; border-top:1px solid var(--line)}.cy-routes.cy-routes .pr{font-family:'Outfit',sans-serif;font-weight:700;font-size:23px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}.cy-routes.cy-routes .pr .frm{display:block;font-family:'Space Mono',monospace;font-size:8.5px;letter-spacing:.15em;color:var(--faint);font-weight:400;margin-bottom:4px}.cy-routes.cy-routes .pr .per{font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:500;color:var(--faint);margin-left:3px}.cy-routes.cy-routes .right{display:flex;align-items:center;gap:14px}/* СТАТУС = тихий бейдж. Капслок-моноширинный с точкой рябил и кричал громче цены; здесь мягкая подложка, обычный регистр, точка — единственный цветной акцент. */ /* СТАТУС. Точка-индикатор убрана: цветной кружок внутри цветной пилюли — это два сигнала об одном и том же, и он читался как инородная деталь. Цвет самой пилюли уже всё говорит. */ .cy-routes.cy-routes .av{display:inline-flex;align-items:center;white-space:nowrap; font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.005em;text-transform:none; padding:5px 12px;border-radius:8px}.cy-routes.cy-routes .av i{display:none}.cy-routes.cy-routes .av.free{color:#2c7a56;background:rgba(63,155,109,.11)}.cy-routes.cy-routes .av.soon{color:#a1692a;background:rgba(201,138,62,.13)}.cy-routes.cy-routes .av.gone{color:var(--faint);background:rgba(10,22,40,.05)}/* ── ВАРИАНТЫ КНОПКИ ── */ /* K2 — светлее и контрастнее: явный блик сверху, тёплый низ, тонкая обводка */ .cy-routes.cy-routes .cta.k2{background:linear-gradient(180deg,#f2ddb0 0%,#dcbc86 40%,#c9a96e 70%,#b58b46 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(150,110,45,.28), 0 1px 2px rgba(10,22,40,.12),0 5px 12px -5px rgba(10,22,40,.26)}/* K3 — navy: максимальный контраст на светлой карточке, золото остаётся акцентом текста */ .cy-routes.cy-routes .cta.k3{background:linear-gradient(180deg,#16283f 0%,#0a1628 100%);color:#f0dcae; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(10,22,40,.16),0 6px 14px -6px rgba(10,22,40,.4)}/* K4 — тихая: контур, вес держит цена, а не кнопка */ .cy-routes.cy-routes .cta.k4{background:transparent;color:#a1782f; box-shadow:inset 0 0 0 1.5px rgba(181,139,70,.42)}.cy-routes.cy-routes .cta.k4::before{display:none}/* ── лаборатория вариантов: тот же рейс, меняется одна деталь ── */ .cy-routes.cy-routes .labnote{color:var(--muted);font-size:13.5px;line-height:1.55;margin:-6px 0 14px;max-width:640px}.cy-routes.cy-routes .labnote b{color:var(--ink)}.cy-routes.cy-routes .varcap{display:flex;align-items:center;gap:9px;margin:14px 0 -4px; font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lo)}.cy-routes.cy-routes .varcap::after{content:'';flex:1;height:1px;background:rgba(10,22,40,.07)}.cy-routes.cy-routes .varcap:first-child{margin-top:0}/* B — без подложки, только цветной текст */ .cy-routes.cy-routes .av.b2{background:none;padding:0;font-size:12px}/* C — подложка + точка (как было; для сравнения — точку вернули) */ .cy-routes.cy-routes .av.b3 i{display:block;width:5px;height:5px;border-radius:50%;margin-right:6px;flex:0 0 auto}.cy-routes.cy-routes .av.b3.free i{background:#3f9b6d}.cy-routes.cy-routes .av.b3.soon i{background:#c98a3e}.cy-routes.cy-routes .av.b3{padding:5px 11px 5px 9px;border-radius:999px}/* D — моноширинный капс, как остальные служебные метки страницы */ .cy-routes.cy-routes .av.b4{background:none;padding:0;font-family:'Space Mono',monospace;font-size:9px; letter-spacing:.14em;text-transform:uppercase;font-weight:700}/* CTA = стандартная золотая liquid-metal кнопка сайта, 1:1 как в v8-card: 120deg градиент, navy текст, inset-подсветка сверху и тень снизу, свип-сияние */ /* CTA. Было: широкая жёлто-коричневая тень 26 px — под кнопкой висел грязный ореол, а сама она читалась горчичной. Теперь металл чище (светлее верх, тёплый низ), тень НЕЙТРАЛЬНАЯ и короткая — кнопка лежит на карточке, а не плавает в жёлтом пятне. Свип и navy-текст — как в стандарте. */ /* margin:0 объявлен намеренно — кнопка стоит в одной строке с ценой, и любой внешний отступ ломает эту строку. Страница яхты даёт своей `.cta` отступ сверху 16px, и он доставался нашей, пока мы про margin молчали. */ .cy-routes.cy-routes .cta{margin:0;position:relative;overflow:hidden;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px; background:linear-gradient(135deg,#e6cb96 0%,#d3b47c 46%,#c19a5d 100%);color:var(--navy); font-family:'DM Sans',sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.005em;line-height:1.15; padding:12px 19px;border-radius:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.62),inset 0 -1px 0 rgba(120,85,20,.18), 0 1px 2px rgba(10,22,40,.1),0 6px 14px -6px rgba(10,22,40,.24); transition:transform .16s,box-shadow .22s,filter .22s}.cy-routes.cy-routes .cta svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.3;fill:none;transition:transform .18s;position:relative;z-index:2}.cy-routes.cy-routes .cta span{position:relative;z-index:2}/* свип-блик на TRANSFORM, а не на left: анимация left пересчитывает layout на каждом кадре (~55 кадров подряд на каждый ховер) — отсюда лаг. transform уходит на GPU, layout не трогается вовсе. will-change подсказывает браузеру поднять слой заранее. */ .cy-routes.cy-routes .cta::before{content:'';position:absolute;top:0;left:0;width:45%;height:100%;z-index:1; background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-160%) skewX(-18deg);will-change:transform; transition:transform .55s ease}@media(hover:hover){.cy-routes.cy-routes .row:hover .cta::before{transform:translateX(320%) skewX(-18deg)}.cy-routes.cy-routes .row:hover .cta{filter:brightness(1.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(120,85,20,.2), 0 2px 4px rgba(10,22,40,.12),0 10px 22px -8px rgba(10,22,40,.3)}.cy-routes.cy-routes .row:hover .cta svg{transform:translateX(4px)}}.cy-routes.cy-routes .cta:active{transform:translateY(1px) scale(.99);box-shadow:inset 0 1px 2px rgba(120,85,20,.26),0 1px 2px rgba(10,22,40,.14);transition:none}.cy-routes.cy-routes .row.taken{opacity:.6}.cy-routes.cy-routes .row.taken .cta{background:rgba(10,22,40,.05);color:var(--faint);box-shadow:none}/* ── мобильный ── */ /* ═══════════ ТЕЛЕФОН — та же горизонтальная строка, только плотнее ═══════════ Вертикальная карточка (фото сверху) давала 433 px на роут: пять рейсов — это уже прокрутка на две минуты. Список должен листаться глазами, а не пальцем. Поэтому на телефоне строка ОСТАЁТСЯ строкой: фото слева, справа только то, по чему выбирают — имя, окно, свободно ли, цена, действие. Описание, теги и факты уходят в карточку рейса по тапу (паттерн Airbnb: в списке минимум, в карточке всё). */ @container cyrt (max-width: 560px){.cy-routes.cy-routes .doc{padding:0 15px}.cy-routes.cy-routes .row{grid-template-columns:112px 1fr;padding:8px;border-radius:18px;gap:0}.cy-routes.cy-routes .med,.cy-routes.cy-routes .row.sig .med{height:100%;min-height:112px;aspect-ratio:auto}/* тело — плотный столбик без растяжек: четыре строки подряд, никаких дыр */ .cy-routes.cy-routes .bd{padding:2px 2px 2px 12px;justify-content:center;gap:0}.cy-routes.cy-routes .top{display:block}.cy-routes.cy-routes .nm,.cy-routes.cy-routes .row.sig .nm{font-size:15.5px;line-height:1.25;padding-right:0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}/* часы и статус — РЯДОМ, а не по разным краям: прижатый вправо бейдж на узкой строке читается как съехавший, между ним и часами повисает дыра */ .cy-routes.cy-routes .when{position:static;margin-top:5px;gap:7px;font-size:8.5px;flex-wrap:nowrap;justify-content:flex-start}.cy-routes.cy-routes .when b{font-size:12px}/* слово окна («Morning») уходит — часы уже сказали, когда это; длительность остаётся. Так в строку помещаются и часы, и статус, без переноса. */ .cy-routes.cy-routes .when .wlbl,.cy-routes.cy-routes .when .d:not(.dur){display:none}.cy-routes.cy-routes .when .wdur{font-size:9px}/* статус стоит вплотную за часами — БЕЗ margin-left:auto. Именно прижатие к правому краю и создавало «то слева, то справа» относительно ряда тегов ниже */ .cy-routes.cy-routes .when .av{position:static;margin:0;font-size:10px;padding:2px 8px}/* ТЕГИ ОСТАЮТСЯ ЧИПАМИ. Я их сворачивал в строку текста — неверно: это тезисы рейса, по ним же идёт фильтрация на поиске, и выглядеть они должны одинаково везде, иначе на телефоне человек не узнаёт то, по чему фильтровал. */ /* L1 — СТРОКА СПИСКА. Описание и факты сюда НЕ идут: они отвечают на вопрос «покупать ли этот рейс», а список отвечает на «который из». Шесть блоков в строке превращают ленту в стену текста — оба уезжают в карточку по тапу (см. CARD-CONTRACT.md, уровни L1/L2/L3). Теги остаются: это фильтры. */ .cy-routes.cy-routes .desc,.cy-routes.cy-routes .fbar{display:none}/* один ряд капсул: статус + теги. Перенос разрешён — лучше вторая строка с тем же выравниванием, чем капсулы у разных краёв */ .cy-routes.cy-routes .tags{display:flex;margin-top:7px;gap:5px;flex-wrap:wrap;overflow:visible}.cy-routes.cy-routes .tags .tag{font-size:10.5px;padding:3px 8px}/* ── ПЛОТНОСТЬ: три варианта, переключаются ?dense= ────────────────────── M1 (без класса) — как есть. M2 — снимаем ДУБЛИ и лишние линии: «5H» повторяет то, что уже сказано часами (08:00–13:00 и есть пять часов), разделитель над подвалом ничего не разделяет — рядов и так мало. M3 — только то, чем выбирают: имя, когда, свободно ли, цена. Теги и всё остальное открываются тапом. */ .cy-routes.cy-routes.d2 .wdur,.cy-routes.cy-routes.d2 .when .d{display:none}.cy-routes.cy-routes.d2 .foot{border-top:0;padding-top:6px;margin-top:4px}.cy-routes.cy-routes.d2 .tags{margin-top:5px}.cy-routes.cy-routes.d2 .bd{padding-top:0;padding-bottom:0}.cy-routes.cy-routes.d3 .wdur,.cy-routes.cy-routes.d3 .when .d,.cy-routes.cy-routes.d3 .tags{display:none}.cy-routes.cy-routes.d3 .foot{border-top:0;padding-top:6px;margin-top:4px}.cy-routes.cy-routes.d3 .bd{padding-top:0;padding-bottom:0}.cy-routes.cy-routes.d3 .nm{-webkit-line-clamp:2}/* M4 — ДЛИТЕЛЬНОСТЬ УХОДИТ К ЦЕНЕ. Не выкидываем, а ставим туда, где она отвечает на вопрос «сколько времени за эти деньги»: «€1,900 · 5 ч». Строка часов освобождается, дубля не читается — это уже про сделку. */ .cy-routes.cy-routes.d4 .foot{border-top:0;padding-top:7px;margin-top:5px}.cy-routes.cy-routes.d4 .bd{padding-top:0;padding-bottom:0}.cy-routes.cy-routes.d4 .pr .dur-side{display:inline;font-family:'Space Mono',monospace;font-size:9px; letter-spacing:.1em;color:var(--faint);margin-left:7px;text-transform:uppercase;white-space:nowrap}/* ═══ M6 — ОДНА ФРАЗА ВМЕСТО ЧЕТЫРЁХ МЕТОК (решение) ═══════════════════════ Дело было не в том, ГДЕ длительность, а в том, что в строке жили четыре разных визуальных типа мелочи: моношрифт часов, зелёная капсула статуса, серые капсулы тегов, цифра с подписью. Глаз спотыкается о каждый переход. Оставляем ДВА типа: 1) одна строка-фраза «08:00–13:00 · 5 ч · свободно завтра» — читается слева направо как предложение, разделена не рамками, а ВЕСОМ: часы тёмные и плотные, длительность тихая серая, статус зелёный; 2) теги — единственные капсулы в карточке. Бейджей стало на один меньше, а статус не потерялся: зелёный цвет ловится периферийным зрением быстрее, чем читается сама подложка. */ .cy-routes.cy-routes.d6 .when{gap:0;font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:0; text-transform:none;color:var(--faint);flex-wrap:nowrap;margin-top:5px}.cy-routes.cy-routes.d6 .when b{font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:0}.cy-routes.cy-routes.d6 .when .wdur{font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:0; text-transform:none;color:var(--faint);font-weight:400}/* разделители рисуем ТОЛЬКО псевдоэлементами перед видимыми частями: сами точки-элементы прячем, иначе от скрытой подписи окна остаётся висячее «· ·» */ .cy-routes.cy-routes.d6 .when .d,.cy-routes.cy-routes.d6 .when .wlbl{display:none}.cy-routes.cy-routes.d6 .when .wdur::before,.cy-routes.cy-routes.d6 .when .av::before{content:'·';color:rgba(10,22,40,.28);margin:0 6px;font-weight:400}.cy-routes.cy-routes.d6 .when .av{background:none;padding:0;margin:0;font-size:11.5px;font-weight:600;border-radius:0}/* фраза обязана быть В ОДНУ строку: часы плотнее и чуть мельче, перенос запрещён */ .cy-routes.cy-routes.d6 .when{font-size:11.5px;white-space:nowrap;overflow:hidden}.cy-routes.cy-routes.d6 .when b{font-size:12px;white-space:nowrap}.cy-routes.cy-routes.d6 .when .wdur{font-size:11.5px;white-space:nowrap}.cy-routes.cy-routes.d6 .foot{border-top:0;padding-top:7px;margin-top:5px}.cy-routes.cy-routes.d6 .bd{padding-top:0;padding-bottom:0}/* ═══ V7 — ДАТА ВМЕСТО ФРАЗЫ ══════════════════════════════════════════════ «Free tomorrow» + «2h 30m» + часы в одну строку на 360 px не влезают ни при какой вёрстке. Но смысл статуса несёт ДАТА, а не слово free: «Tomorrow» говорит то же вдвое короче. Фраза перестаёт быть хрупкой. */ .cy-routes.cy-routes.d7 .when .d,.cy-routes.cy-routes.d7 .when .wlbl{display:none}.cy-routes.cy-routes.d7 .when{font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:0;text-transform:none; color:var(--faint);white-space:nowrap;overflow:hidden;margin-top:5px;gap:0}.cy-routes.cy-routes.d7 .when b{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;color:var(--ink);letter-spacing:0}.cy-routes.cy-routes.d7 .when .wdur{font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:0;text-transform:none;font-weight:400}.cy-routes.cy-routes.d7 .when .wdur::before,.cy-routes.cy-routes.d7 .when .av::before{content:'·';color:rgba(10,22,40,.28);margin:0 6px}.cy-routes.cy-routes.d7 .when .av{background:none;padding:0;margin:0;font-size:11.5px;font-weight:600;border-radius:0}.cy-routes.cy-routes.d7 .foot{border-top:0;padding-top:7px;margin-top:5px}.cy-routes.cy-routes.d7 .bd{padding-top:0;padding-bottom:0}/* ═══ V9 — ВОЗДУХ ══════════════════════════════════════════════════════════ «Не выглядит круто» — это чаще всего про плотность, а не про состав. Кадр крупнее, имя крупнее, цена крупнее, между блоками больше паузы, статус уходит тихой строкой под цену. Данные те же, дышится иначе. */ .cy-routes.cy-routes.d9 .row{grid-template-columns:132px 1fr;padding:10px;border-radius:20px}/* КАДР — ВРЕЗКА НА ВСЮ ВЫСОТУ, ПРОПОРЦИЯ 4:5. Квадрат по центру оставлял белые поля сверху и снизу — читалось как сломанная вёрстка, не как приём (Артём). Карточка фиксированная 176 → кадр 124×156 = стандартный портрет 4:5 (лента Instagram), а не 1:1.37, с которого началась жалоба «высокое». */ .cy-routes.cy-routes.d9 .med{height:100%;min-height:0;align-self:stretch}.cy-routes.cy-routes.d9 .bd{padding:2px 2px 2px 14px}.cy-routes.cy-routes.d9 .nm,.cy-routes.cy-routes.d9 .row.sig .nm{font-size:16.5px;line-height:1.28}/* РАВНАЯ ВЫСОТА КАРТОЧЕК — резерв на КАРТОЧКЕ, а не на имени. Резерв на имени оставлял пустую строку под коротким названием. Теперь запас распределяется вокруг центрированного текста, а фото height:100% одинаковое у всех. 190px = высота карточки с двухстрочным именем. */ /* 132-колонка + строка 152 → кадр ~132×132..145: почти квадрат, не портрет. («вытянутое выглядит очень плохо» — при этом строка остаётся строкой) */ .cy-routes.cy-routes.d9 .row{min-height:152px}.cy-routes.cy-routes.d9 .when .d,.cy-routes.cy-routes.d9 .when .wlbl{display:none}.cy-routes.cy-routes.d9 .when{font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:0;text-transform:none; color:var(--faint);margin-top:6px;gap:0;white-space:nowrap}.cy-routes.cy-routes.d9 .when b{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:700;color:var(--ink);letter-spacing:0}.cy-routes.cy-routes.d9 .when .wdur{font-family:'DM Sans',sans-serif;font-size:11.5px;letter-spacing:0;text-transform:none}.cy-routes.cy-routes.d9 .when .wdur::before{content:'·';color:rgba(10,22,40,.28);margin:0 6px}.cy-routes.cy-routes.d9 .tags{margin-top:9px}.cy-routes.cy-routes.d9 .foot{border-top:1px solid var(--line);padding-top:10px;margin-top:8px;align-items:flex-end}.cy-routes.cy-routes.d9 .pr{font-size:19px}.cy-routes.cy-routes.d9 .pr .av{display:block;margin-top:3px;background:none;padding:0;font-size:11px;font-weight:600;border-radius:0}/* зона сделки: цена ~63px + кнопка — в 200px помещаются только если кнопка не переносится. Запрет переноса + чуть плотнее кегль (замер, не глаз). */ .cy-routes.cy-routes.d9 .cta{font-size:11.5px;padding:9px 12px;gap:5px}.cy-routes.cy-routes.d9 .cta span{white-space:nowrap}.cy-routes.cy-routes.d9 .cta svg{width:11px;height:11px}.cy-routes.cy-routes .grow{display:none}.cy-routes.cy-routes .foot{padding-top:7px;margin-top:6px;gap:10px;border-top:1px solid rgba(10,22,40,.05)}.cy-routes.cy-routes .pr{font-size:17.5px}.cy-routes.cy-routes .pr .frm{display:none}.cy-routes.cy-routes .pr .per{display:none}.cy-routes.cy-routes .cta{padding:8px 13px;font-size:12px;border-radius:10px;gap:6px}.cy-routes.cy-routes .cta svg{width:11px;height:11px}/* ФОТО НА ТЕЛЕФОНЕ — ЧИСТОЕ. 112 px не вмещают ни чип якоря, ни кнопку MAP: они налезали друг на друга и превращали кадр в свалку. Снимаем с фото всё — точки, стрелки, MAP и чип. Якорь переезжает в текст (строка сути), карта открывается тапом по строке. */ .cy-routes.cy-routes .arr,.cy-routes.cy-routes .dots,.cy-routes.cy-routes .jmp,.cy-routes.cy-routes .anch{display:none}.cy-routes.cy-routes .sh{margin-bottom:18px;padding-bottom:12px}.cy-routes.cy-routes .sh h3{font-size:18px}.cy-routes.cy-routes .sh a{font-size:12px;white-space:nowrap;flex:0 0 auto} }/* совсем узкие экраны — фото ещё компактнее, но строка не ломается */ @container cyrt (max-width: 380px){/* «See the voyage» на 360 px ломался на две строки и корёжил подвал */ .cy-routes.cy-routes .cta{font-size:11.5px;padding:8px 11px;gap:5px}.cy-routes.cy-routes .cta svg{width:10px;height:10px}.cy-routes.cy-routes .row{grid-template-columns:96px 1fr}.cy-routes.cy-routes .med,.cy-routes.cy-routes .row.sig .med{min-height:96px}.cy-routes.cy-routes .bd{padding-left:10px}.cy-routes.cy-routes .nm,.cy-routes.cy-routes .row.sig .nm{font-size:14.5px}.cy-routes.cy-routes .cta{padding:8px 12px;font-size:12px} }/* ═══ Mc — КАРУСЕЛЬ + ШИРОКИЕ СПЕЦ-КАРТОЧКИ (телефон) ═══════════════════════ Медиа-карточка (кадр 3:2 сверху) в двух весах, иерархия по важности: .carousel — default-группа, ЛЁГКАЯ: 64% ширины, peek следующей, свайп вбок; .mwide — спец-группа (signature), САМАЯ ТЯЖЁЛАЯ: та же карточка на всю ширину. Спец обязан выглядеть массивнее дефолта, не наоборот. Остальные группы (events и операторские) — обычные строки V9. Тень: скроллер с overflow-x клипает по вертикали — даём тени место щедрым нижним padding и компенсируем отрицательным margin (записанная ловушка). */ @container cyrt (max-width: 560px){/* scroll-padding ОБЯЗАТЕЛЕН: mandatory-snap выравнивает первую карточку по краю скроллпорта, игнорируя обычный padding — лента сама подкручивалась на 15px и липла к границе экрана (замер: scrollLeft=15 сразу после загрузки) */ .cy-routes.cy-routes.dc .lane.carousel{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 15px;gap:12px; margin:-10px -15px -44px;padding:14px 15px 62px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.cy-routes.cy-routes.dc .lane.carousel::-webkit-scrollbar{display:none}/* ховер-тень выше статичной — карман скроллера рассчитан на неё (62px), а подъём внутри ленты приглушён: на тач-экранах ховера нет вовсе */ @media(hover:hover){.cy-routes.cy-routes.dc .carousel .row:hover{transform:translateY(-2px); box-shadow:0 2px 5px rgba(10,22,40,.06),0 10px 20px rgba(10,22,40,.08),0 22px 40px -16px rgba(10,22,40,.26),inset 0 1px 0 rgba(255,255,255,.9)} }.cy-routes.cy-routes.dc .carousel .row{flex:0 0 64%;max-width:64%;scroll-snap-align:start}/* сигнатура в ленте — «премиальное издание», а не поехавшая картинка: шире (74% против 64), кадр ВЫШЕ дневных (4:3 против 3:2), имя крупнее, золото на всю ширину — плюс тёплая подложка, волосок и лента из базы */ .cy-routes.cy-routes.dc .carousel .row.sig{flex:0 0 70%;max-width:70%}.cy-routes.cy-routes.dc .carousel .row.sig .med{aspect-ratio:4/3}.cy-routes.cy-routes.dc .carousel .row.sig .nm{font-size:17px}.cy-routes.cy-routes.dc .carousel .row.sig .foot{flex-direction:column;align-items:stretch;gap:8px}.cy-routes.cy-routes.dc .carousel .row.sig .cta{width:100%;justify-content:center}.cy-routes.cy-routes.dc .carousel .row,.cy-routes.cy-routes.dc .mwide .row{display:flex;flex-direction:column;min-height:0;padding:8px}.cy-routes.cy-routes.dc .carousel .med,.cy-routes.cy-routes.dc .mwide .med{width:100%;height:auto;min-height:0;aspect-ratio:3/2;align-self:auto}.cy-routes.cy-routes.dc .carousel .bd,.cy-routes.cy-routes.dc .mwide .bd{padding:10px 6px 4px;justify-content:flex-start;flex:1}.cy-routes.cy-routes.dc .carousel .dots,.cy-routes.cy-routes.dc .mwide .dots{display:flex}.cy-routes.cy-routes.dc .carousel .jmp,.cy-routes.cy-routes.dc .mwide .jmp{display:inline-flex;top:8px;right:8px}.cy-routes.cy-routes.dc .carousel .anch,.cy-routes.cy-routes.dc .mwide .anch{display:inline-flex;left:8px;top:8px}.cy-routes.cy-routes.dc .carousel .row.sig .anch,.cy-routes.cy-routes.dc .mwide .row.sig .anch{left:auto;right:8px;top:8px;bottom:auto}/* сигнатура: базовое правило даёт .jmp bottom:9, режим карусели — top:8; вместе это top+bottom одновременно → абсолют растягивается в столб. Явно: MAP у сигнатуры внизу справа (угол сверху занят якорем, слева — лентой). */ .cy-routes.cy-routes.dc .carousel .row.sig .jmp,.cy-routes.cy-routes.dc .mwide .row.sig .jmp{top:auto;bottom:8px;right:8px}.cy-routes.cy-routes.dc .carousel .nm,.cy-routes.cy-routes.dc .mwide .nm{min-height:0}.cy-routes.cy-routes.dc .carousel .grow,.cy-routes.cy-routes.dc .mwide .grow{display:block;flex:1;min-height:6px}.cy-routes.cy-routes.dc .carousel .foot,.cy-routes.cy-routes.dc .mwide .foot{margin-top:0}.cy-routes.cy-routes.dc .showall{display:none} }/* «Show all N routes» — длинный ассортимент не скроллят, его раскрывают. Тихий золотой контур (язык K4): это навигация, не продажа. */ .cy-routes.cy-routes .showall{width:100%;margin-top:12px;border:0;cursor:pointer;background:transparent;color:#a1782f; font-family:'DM Sans',sans-serif;font-weight:700;font-size:13.5px;padding:13px;border-radius:13px; box-shadow:inset 0 0 0 1.5px rgba(181,139,70,.4);transition:background .18s}.cy-routes.cy-routes .showall:active{background:rgba(201,169,110,.12)}/* заголовки групп */ .cy-routes.cy-routes .ghead{display:flex;align-items:baseline;gap:8px;margin:24px 0 12px; font-family:'Outfit',sans-serif;font-weight:700;font-size:16px;color:var(--navy)}.cy-routes.cy-routes .ghead:first-child{margin-top:0}.cy-routes.cy-routes .ghead .c{font-family:'DM Sans',sans-serif;font-weight:500;font-size:12px;color:var(--faint)}/* ЗАГОЛОВОК-СПАЙ второй ленты. Кегль у всех ОДИНАКОВЫЙ. Раньше активный пункт вырастал с 14 до 19 — менялась высота строки и ширина кнопки, из-за чего при переключении подпрыгивала вся страница, а соседние названия разъезжались вбок. Активный держат цвет и скользящая золотая черта под ним: ноль изменений раскладки, и это же читается премиальнее — движение вместо скачка. */ .cy-routes.cy-routes .ghead2{position:relative;display:flex;align-items:baseline;gap:22px;margin:26px 0 14px; padding:2px 0 11px;overflow-x:auto;scrollbar-width:none}.cy-routes.cy-routes .ghead2::-webkit-scrollbar{display:none}.cy-routes.cy-routes .ghead2::after{content:'';position:absolute;left:0;bottom:0;height:2px;border-radius:2px; width:var(--iw,0px);transform:translateX(var(--ix,0px)); background:linear-gradient(90deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo)); opacity:var(--io,0); transition:transform .34s cubic-bezier(.2,.7,.3,1),width .34s cubic-bezier(.2,.7,.3,1),opacity .2s}.cy-routes.cy-routes .gh{border:0;background:none;cursor:pointer;padding:0;white-space:nowrap; font-family:'Outfit',sans-serif;font-weight:700;font-size:15.5px;color:var(--faint); transition:color .24s}.cy-routes.cy-routes .gh .c{font-family:'DM Sans',sans-serif;font-weight:500;font-size:11.5px;color:var(--faint);margin-left:5px}.cy-routes.cy-routes .gh.on{color:var(--navy)}/* корешок-разделитель во второй ленте — без полосок, без фона */ .cy-routes.cy-routes .gdiv{flex:0 0 64px;max-width:64px;scroll-snap-align:start;display:flex;flex-direction:column; justify-content:center;align-items:center;gap:10px;padding:8px 0;cursor:pointer}.cy-routes.cy-routes .gdiv .e{display:none}.cy-routes.cy-routes .gdiv .n{writing-mode:vertical-rl;font-family:'Outfit',sans-serif;font-weight:800;font-size:15px; letter-spacing:.14em;text-transform:uppercase;color:var(--navy);line-height:1}.cy-routes.cy-routes .gdiv .cnt{font-family:'DM Sans',sans-serif;font-size:11px;color:var(--faint)}.cy-routes.cy-routes .gdiv .ar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto; background:linear-gradient(120deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));color:var(--navy); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 5px 12px -4px rgba(150,110,40,.5)}.cy-routes.cy-routes .gdiv .ar svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4;fill:none}/* чипы-фильтры грида /routes (телефон) */ .cy-routes.cy-routes .gchips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 0 16px;padding-bottom:2px}.cy-routes.cy-routes .gchips::-webkit-scrollbar{display:none}.cy-routes.cy-routes .gchip{flex:0 0 auto;border:0;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:600;font-size:12.5px; color:var(--ink);background:rgba(10,22,40,.055);padding:9px 14px;border-radius:999px;white-space:nowrap; transition:background .16s,color .16s}.cy-routes.cy-routes .gchip.on{background:var(--navy);color:#fff}.cy-routes.cy-routes .gchip .c{color:var(--faint);margin-left:6px;font-weight:500}.cy-routes.cy-routes .gchip.on .c{color:rgba(255,255,255,.6)}/* кнопка развёртывания у заголовка группы — тихая, это навигация, не продажа */ /* Геометрия кнопки ПОСТОЯННА. Раньше в открытом состоянии добавлялись поля — менялась высота строки заголовка, и от этого прыгала вся страница и сам переключатель групп. Меняются только цвет и волосок. */ .cy-routes.cy-routes .gexp{margin-left:auto;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px; font-family:'DM Sans',sans-serif;font-weight:600;font-size:13px;color:#a1782f; padding:6px 13px;border-radius:999px;box-shadow:inset 0 0 0 1.3px rgba(181,139,70,0); white-space:nowrap;transition:color .2s,box-shadow .25s}.cy-routes.cy-routes .gexp:hover{color:var(--gold-lo)}.cy-routes.cy-routes .gexp svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;transition:transform .26s}.cy-routes.cy-routes .gexp.on svg{transform:rotate(180deg)}/* в открытом состоянии — только золотой волосок; геометрия не меняется */ .cy-routes.cy-routes .gexp.on{box-shadow:inset 0 0 0 1.3px rgba(181,139,70,.42)}.cy-routes.cy-routes .ghead{align-items:center}.cy-routes.cy-routes .ghead2{align-items:center}/* ПОИСК — появляется САМ, когда рейсов в секции много. При четырёх он выглядел бы как признак свалки; при пятнадцати без него не обойтись. Порог — одно число. */ .cy-routes.cy-routes .srch{margin-left:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto}.cy-routes.cy-routes .srch input{width:0;opacity:0;padding:0;border:0;outline:0;background:rgba(10,22,40,.05); border-radius:999px;font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--navy); transition:width .3s cubic-bezier(.2,.7,.3,1),opacity .22s,padding .3s}.cy-routes.cy-routes .srch input::placeholder{color:var(--faint)}.cy-routes.cy-routes .srch.on input{width:230px;opacity:1;padding:9px 15px}.cy-routes.cy-routes .srch .sbtn{border:0;background:none;cursor:pointer;width:34px;height:34px;border-radius:50%; display:grid;place-items:center;color:var(--muted);transition:background .18s,color .18s}.cy-routes.cy-routes .srch .sbtn:hover{background:rgba(10,22,40,.06);color:var(--navy)}.cy-routes.cy-routes .srch svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none}.cy-routes.cy-routes .nores{padding:26px 2px;color:var(--muted);font-size:14px}.cy-routes.cy-routes .nores b{color:var(--navy)}/* ЛИНЕЙКА ПОД ЛЕНТОЙ — «сколько всего, докуда долистал, где границы групп». Заголовок сверху говорит, ЧТО сейчас под глазами; линейка добавляет позицию и объём. Делится на отрезки по группам, поэтому границы видно, не листая. */ .cy-routes.cy-routes .lprog{display:flex;gap:5px;height:3px;margin:15px 0 0}.cy-routes.cy-routes .lprog i{flex:1;height:3px;border-radius:3px;background:rgba(10,22,40,.09);overflow:hidden}.cy-routes.cy-routes .lprog u{display:block;height:100%;width:0;border-radius:3px; background:linear-gradient(90deg,var(--gold-hi),var(--gold-lo));transition:width .14s linear}.cy-routes.cy-routes .lane.open ~ .lprog{display:none}/* «Show all» — раскрытие на месте */ .cy-routes.cy-routes .showall{width:100%;margin-top:12px;border:0;cursor:pointer;background:transparent;color:#a1782f; font-family:'DM Sans',sans-serif;font-weight:700;font-size:13.5px;padding:13px;border-radius:13px; box-shadow:inset 0 0 0 1.5px rgba(181,139,70,.4);transition:background .18s}.cy-routes.cy-routes .showall:active{background:rgba(201,169,110,.12)}/* ═══ ДЕСКТОП ════════════════════════════════════════════════════════════════ Колонка страницы яхты = 800px (1320 − 400 сайдбар − 60 gap − 60 padding) — макет повторяет её 1:1. ДВЕ ленты на всю секцию. Разметка ТА ЖЕ, что на телефоне (те же .carousel и .rlane): раскладки не могут разъехаться, и каждый рейс рисуется один раз, а не по копии на устройство. Дневные: ширина карточки считается ОТ ИХ ЧИСЛА — 2 рейса дают 2 колонки, 3 → 3, 4 и больше → те же 3 плюс подглядывание и стрелки. Секция не растёт вниз никогда, сколько бы рейсов оператор ни завёл. Привязка PROXIMITY, а не mandatory: широкая карточка ставит свою точку привязки дальше предела прокрутки, и жёсткая привязка запирала ленту — стрелка «вперёд» уезжала на 148px и застревала, «назад» не работала вовсе. */ @container cyrt (min-width: 561px){.cy-routes.cy-routes .phone-only{display:none!important}/* КАРМАН ПОД ТЕНЬ — по ВСЕМ четырём сторонам. overflow-x:auto режет и по вертикали, и по горизонтали. Снизу карман был (46px под ховер-тень 42px), а по бокам стояло 2px при горизонтальном вылете тени ~13px — отсюда ровный вертикальный срез вдоль первой и последней карточки. Отрицательное поле возвращает карточки ровно на край колонки. Расчёт вылета: для тени `0 Ypx Bpx -Spx` вбок уходит B/2 − S, вниз Y + B/2 − S. */ .cy-routes.cy-routes .lane.dlane{flex-direction:row;gap:18px;overflow-x:auto;scroll-snap-type:x proximity; scroll-padding:0 22px 0 56px;padding:14px 22px 52px;margin:-8px -22px -44px;scrollbar-width:none}.cy-routes.cy-routes .lane.dlane::-webkit-scrollbar{display:none}/* Подглядывание следующей карточки НЕ вычитаем из ширины: замер показал, что при 235px зелёный бейдж перестаёт помещаться к часам и снова срывается на отдельную строку (нужно минимум 245px). Колонки остаются полными, а «дальше есть ещё» говорят стрелка и фейд — у дневной ленты он уже 44px, чтобы едва касаться края последней видимой карточки. */ .cy-routes.cy-routes .dlane .row{--w:var(--wpx, calc((100% - (var(--cols) - 1) * 18px - var(--peek, 0px)) / var(--cols))); flex:0 0 var(--w);max-width:var(--w);scroll-snap-align:start; display:flex;flex-direction:column;padding:9px}/* последняя карточка встаёт ровно по краю колонки. Распорка-хвост здесь была подпоркой под старый фейд-накладку; с маской она не нужна, а пустое поле справа в конце ленты читалось как «недоехало». */ .cy-routes.cy-routes .dlane .row:last-child{scroll-snap-align:end}/* ОДИН РЕЙС. Вертикальная карточка в 391px оставляла половину колонки пустой — секция выглядела недоделанной ровно у того, у кого рейс всего один, то есть у первого клиента. Одиночка разворачивается в СТРОКУ во всю ширину: та же карточка, другая раскладка, пустоты нет. */ .cy-routes.cy-routes .dlane.one .row,.cy-routes.cy-routes .dlane.onecol .row{flex:0 0 100%;max-width:100%;display:grid;grid-template-columns:264px 1fr;padding:9px}.cy-routes.cy-routes .dlane.one .med,.cy-routes.cy-routes .dlane.onecol .med{height:100%;min-height:176px;aspect-ratio:auto;width:auto}.cy-routes.cy-routes .dlane.one .bd,.cy-routes.cy-routes .dlane.onecol .bd{padding:12px 14px 10px 20px}.cy-routes.cy-routes .dlane.one .nm,.cy-routes.cy-routes .dlane.onecol .nm{font-size:20px;padding-right:132px}.cy-routes.cy-routes .dlane.one .when .av,.cy-routes.cy-routes .dlane.onecol .when .av{position:absolute}.cy-routes.cy-routes .dlane.one .foot,.cy-routes.cy-routes .dlane.onecol .foot{flex-direction:row;align-items:center;gap:14px}.cy-routes.cy-routes .dlane.one .cta,.cy-routes.cy-routes .dlane.onecol .cta{width:auto;justify-content:center;padding:12px 19px}.cy-routes.cy-routes .dlane .med{height:auto;min-height:0;aspect-ratio:3/2;width:100%}.cy-routes.cy-routes .dlane .bd{padding:13px 9px 8px;flex:1;display:flex;flex-direction:column}/* статус живёт в строке часов: абсолютом в правом верхнем углу он резервировал у имени 132px из 236 и ломал название, а отдельной строкой — дарил каждой карточке ~30px пустоты («бейдж занимает чисто одну строку») */ .cy-routes.cy-routes .dlane .nm{padding-right:0;font-size:17px}.cy-routes.cy-routes .dlane .when{margin-top:6px;gap:5px}.cy-routes.cy-routes .dlane .when .av{position:static}.cy-routes.cy-routes .dlane .av{padding:4px 9px;font-size:11px}.cy-routes.cy-routes .dlane .grow{display:block;flex:1;min-height:6px}.cy-routes.cy-routes .dlane .foot{flex-direction:column;align-items:stretch;gap:9px}.cy-routes.cy-routes .dlane .cta{width:100%;justify-content:center;padding:12px}/* НЕОБЫЧНЫЕ — ОДНА лента на все группы (сигнатуры, события, будущие операторские). Отдельная карусель на группу тянула секцию вниз тем сильнее, чем больше у лодки ассортимент. Здесь подгруппы разделены вертикальным корешком, а заголовок-спай сверху подсвечивает ту группу, что сейчас под глазами, и тут же перечисляет остальные со счётчиками. */ .cy-routes.cy-routes .lane.rlane{flex-direction:row;gap:14px;overflow-x:auto;scroll-snap-type:x proximity; scroll-padding:0 22px 0 56px;padding:14px 22px 52px;margin:-8px -22px -44px;scrollbar-width:none}.cy-routes.cy-routes .lane.rlane::-webkit-scrollbar{display:none}.cy-routes.cy-routes .rlane .row{flex:0 0 93%;max-width:93%;scroll-snap-align:start;grid-template-columns:264px 1fr}/* отступ привязки СПРАВА = карману (28), а не 2: привязка целится по краю СКРОЛЛЕРА, а он на ширину кармана правее колонки. С двойкой последняя карточка не доезжала — вставала на 26px за колонкой, гасилась маской, а лента отскакивала назад и стрелка «вперёд» появлялась снова. */ .cy-routes.cy-routes .rlane .row:last-child{scroll-snap-align:end}/* кадр держит ровный формат: иначе у рейса с фактами он 240, у соседнего 163 */ .cy-routes.cy-routes .rlane .med{min-height:176px}/* корешок между подгруппами — на десктопе просторнее */ .cy-routes.cy-routes .rlane .gdiv{flex:0 0 78px;max-width:78px}.cy-routes.cy-routes .rlane .gdiv .n{font-size:16px}/* ПОСЛЕДНЯЯ карточка группы ужимается ровно на ширину корешка: иначе он оказывался за правым краем и его не было видно вообще — про следующую группу человек узнавал, только долистав до неё. Теперь «Up next · Events» стоит рядом с последней сигнатурой и зовёт дальше. */ .cy-routes.cy-routes .rlane .row:has(+ .gdiv){flex-basis:calc(93% - 96px);max-width:calc(93% - 96px)}.cy-routes.cy-routes .ghead2{gap:26px}.cy-routes.cy-routes .gh{font-size:17px}/* КРАЙ ЛЕНТЫ ГАСИТСЯ МАСКОЙ САМОЙ ЛЕНТЫ, а не накладкой поверх. Накладка красила прямоугольник цветом страницы: она прятала обрезанный край карточки, но НЕ обрезанную тень. Тень уезжала в карман, а карман скроллера — это ПРОКРУЧИВАЕМОЕ пространство: карточки въезжали в него и обрезались уже на краю кармана, на 16px за колонкой. Ровно это и был «блок с резким краем». Маска гасит содержимое и тень вместе — резкой границы не остаётся в принципе. Бонус: маска не зависит от цвета фона, и в партиале секция может стоять на любом фоне без подбора --pagebg. Стрелки остаются отдельным слоем обёртки. */ /* ТЕНЬ ВНУТРИ ЛЕНТЫ — БЕЗ БОКОВОГО ВЫЛЕТА. Скроллер обрезает по своим краям, и спорить с ним бессмысленно: надёжнее убрать то, что он может срезать. Боковой вылет тени = blur/2 − spread; здесь он сведён к ~2px при кармане 22 — срезать физически нечего ни при какой ширине окна. Вниз тень работает как прежде, а она и держит всю подъёмность карточки. Ховер пересчитан тоже: было 0 30px 62px −18px, то есть 13px вбок. */ .cy-routes.cy-routes .dlane .row,.cy-routes.cy-routes .rlane .row{ box-shadow:0 1px 1px rgba(10,22,40,.04),0 4px 10px -4px rgba(10,22,40,.07), 0 18px 34px -20px rgba(10,22,40,.3),inset 0 1px 0 rgba(255,255,255,.75)}/* Тень сигнатуры — ОБЩАЯ, не золотая. Золотая (rgba(90,70,30)) читалась буквально как жёлтое пятно под карточкой. Сигнатуру отличают лента на углу и заголовок группы; цветная тень — это громкость, а не отличие. Золотой остаётся только волосок ВНУТРЬ — он не выходит за карточку. */ .cy-routes.cy-routes .dlane .row.sig,.cy-routes.cy-routes .rlane .row.sig{ box-shadow:0 1px 1px rgba(10,22,40,.04),0 4px 10px -4px rgba(10,22,40,.07), 0 20px 38px -22px rgba(10,22,40,.3),inset 0 0 0 1px rgba(201,169,110,.2), inset 0 1px 0 rgba(255,255,255,.8)}@media(hover:hover){.cy-routes.cy-routes .dlane .row:hover,.cy-routes.cy-routes .rlane .row:hover{ box-shadow:0 2px 5px -2px rgba(10,22,40,.09),0 12px 22px -12px rgba(10,22,40,.12), 0 30px 54px -26px rgba(10,22,40,.4),inset 0 1px 0 rgba(255,255,255,.9)}.cy-routes.cy-routes .dlane .row.sig:hover,.cy-routes.cy-routes .rlane .row.sig:hover{ box-shadow:0 2px 5px -2px rgba(10,22,40,.09),0 30px 56px -26px rgba(10,22,40,.4), inset 0 0 0 1px rgba(201,169,110,.3),inset 0 1px 0 rgba(255,255,255,.9)} }/* РАЗВЁРНУТЫЙ СПИСОК. Лента по умолчанию не занимает места, но если человек пришёл именно за рейсами — одно нажатие, и он видит всё полотно сразу. Ничего не спрятано, просто свёрнуто. Дневные раскрываются в грид (карточка вертикальная, в столбик она была бы во всю колонку с фото 533px высотой), необычные — в столбик строк, а корешок группы разворачивается в обычный горизонтальный подзаголовок. */ /* В развёрнутом виде меняется ТОЛЬКО раскладка. Поля и отступы коробки те же, что в свёрнутом: раньше нижнее поле прыгало с −44 на 0, а нижний отступ с 52 на 8 — высота дёргалась ещё до начала анимации. Никакого фона и поддона: что список раскрыт, говорят сам список и подпись «Collapse». */ .cy-routes.cy-routes .lane.open{overflow:visible;scroll-snap-type:none}/* Ширины в развёрнутом виде — ТЕ ЖЕ. Карточки, которые человек уже видит, не должны шелохнуться: раскрытие — это «снизу добавились ещё», а не «всё пересобралось». Колонки по var(--wpx), а не 1fr, иначе первые три заметно подрастают, и глаз читает это как перезагрузку страницы. */ .cy-routes.cy-routes .dlane.open{display:grid;grid-template-columns:repeat(var(--cols),var(--wpx,1fr)); justify-content:start;gap:18px}.cy-routes.cy-routes .dlane.open .row{max-width:var(--wpx,none);width:auto}.cy-routes.cy-routes .dlane.open::after{display:none}.cy-routes.cy-routes .rlane.open{flex-direction:column;gap:14px}.cy-routes.cy-routes .rlane.open .row,.cy-routes.cy-routes .rlane.open .row:has(+ .gdiv){flex:0 0 auto;flex-basis:auto;width:93%;max-width:93%}.cy-routes.cy-routes .rlane.open .gdiv{flex:0 0 auto;max-width:none;width:100%;flex-direction:row;justify-content:flex-start; align-items:baseline;gap:9px;padding:18px 0 0;cursor:default;opacity:1 !important}.cy-routes.cy-routes .rlane.open .gdiv .n{writing-mode:horizontal-tb;font-size:17px;letter-spacing:0;text-transform:none}.cy-routes.cy-routes .rlane.open .gdiv .ar,.cy-routes.cy-routes .rlane.open .gdiv .e{display:none}/* на десктопе линейка не нужна: границу групп там держит вертикальный корешок, он виден целиком рядом с карточкой. Линейка осталась бы дублем. */ .cy-routes.cy-routes .lprog{display:none}/* ТЕНЬ КАРТОЧКИ И СЛЕДУЮЩИЙ БЛОК. Карман под тень у ленты — 52px снизу, но отрицательное поле -44px подтягивает следующий блок обратно, и до него остаётся 8px. При наведении тень уходит вниз на 42px (y30 + blur60/2 − spread18), то есть следующий блок закрашивает 34px тени собой — и это читается не как тень, а как РОВНАЯ ЛИНИЯ ОБРЕЗА под карточкой. Увеличивать карман нельзя: он прокручивается вместе с лентой (см. память reference-scroller-shadow-clipping), да и секция вырастет. Маска на ленте делает её контекстом наложения, поэтому поднимать z-index у самой карточки бесполезно — он не выходит за пределы ленты. Поднимаем ленту целиком, и только пока в ней держат курсор. */ .cy-routes.cy-routes .lanewrap{position:relative;z-index:0}.cy-routes.cy-routes .lanewrap:hover{z-index:2}@property --mk-l{syntax:'';inherits:false;initial-value:0px}@property --mk-r{syntax:'';inherits:false;initial-value:0px}/* ═══ ТЕНЬ БОЛЬШЕ НЕ ОБРЕЗАЕТСЯ — ПО УСТРОЙСТВУ, А НЕ ПО РАСЧЁТУ ═══════════ До этого карман считали: «тень достаёт на 31px, кармана 52px, значит влезет». Так и было — пока кто-нибудь не поменяет тень, отступ или высоту карточки. Расчёт, который надо каждый раз пересчитывать вручную, — это не решение, а отложенная поломка. Здесь два правила, снимающие вопрос совсем: 1. ПО ВЕРТИКАЛИ ЛЕНТА НЕ РЕЖЕТ ВООБЩЕ. Листать нужно только вбок, поэтому `overflow-y:clip` + `overflow-clip-margin` — граница обрезки отодвигается на 80px наружу, и тень любой разумной величины выходит целиком. Просто сделать `overflow-y:visible` нельзя: рядом с `overflow-x:auto` браузер всё равно превратит его в прокрутку. 2. МАСКА ВЕШАЕТСЯ ТОЛЬКО КОГДА ЕСТЬ ЧТО ГАСИТЬ. Маска режет по своей рамке независимо от того, что нарисовано в градиенте, — то есть на НЕлистаемой ленте она резала тень просто фактом своего существования. Теперь она появляется вместе с классами can-l/can-r, а там, где всё-таки нужна, `mask-clip:no-clip` снимает и её рамку. */ .cy-routes.cy-routes .lane.dlane,.cy-routes.cy-routes .lane.rlane{overflow-y:clip;overflow-clip-margin:80px}.cy-routes.cy-routes .lanewrap.can-l .lane,.cy-routes.cy-routes .lanewrap.can-r .lane{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--mk-l,0px), #000 calc(100% - var(--mk-r,0px)),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 var(--mk-l,0px), #000 calc(100% - var(--mk-r,0px)),transparent 100%); -webkit-mask-clip:no-clip;mask-clip:no-clip; transition:--mk-l .28s ease,--mk-r .28s ease}.cy-routes.cy-routes .lanewrap.can-l .lane{--mk-l:56px}.cy-routes.cy-routes .lanewrap.can-r .lane{--mk-r:56px}/* в развёрнутом виде гасить нечего — и правило обязано стоять ПОСЛЕ маски, иначе оно проигрывает по порядку каскада при равной специфичности и весь столбец карточек оказывается размытым слева */ .cy-routes.cy-routes .lane.open{-webkit-mask-image:none !important;mask-image:none !important}.cy-routes.cy-routes .lnav{position:absolute;top:calc((100% - 38px) / 2);z-index:4;width:44px;height:44px; border-radius:50%;border:0;cursor:pointer;background:#fff;display:grid;place-items:center; opacity:0;pointer-events:none;transform:translateY(-50%); box-shadow:0 2px 6px rgba(10,22,40,.14),0 12px 26px -10px rgba(10,22,40,.45); transition:opacity .28s ease,box-shadow .2s,scale .14s}.cy-routes.cy-routes .lnav svg{width:18px;height:18px;stroke:var(--navy);stroke-width:2.2;fill:none}.cy-routes.cy-routes .lnav.p{left:-16px}.cy-routes.cy-routes .lnav.n{right:-16px}.cy-routes.cy-routes .lanewrap.can-l .lnav.p,.cy-routes.cy-routes .lanewrap.can-r .lnav.n{opacity:1;pointer-events:auto}/* в развёрнутом виде стрелки не нужны — но ГАСНУТ, а не исчезают: display:none выдёргивал их из кадра рывком прямо посреди анимации */ .cy-routes.cy-routes .lanewrap.open .lnav,.cy-routes.cy-routes .lanewrap.open.can-l .lnav.p,.cy-routes.cy-routes .lanewrap.open.can-r .lnav.n{ opacity:0;pointer-events:none}/* ДВЕ ПАРЫ СТРЕЛОК НЕ ЖИВУТ ОДНОВРЕМЕННО, и уступает та, что мельче. Сначала было наоборот — гасла стрелка ленты при наведении на кадр. Это сделало её НЕДОСТИЖИМОЙ: она стоит поверх соседней карточки, и пока ведёшь к ней курсор, пересекаешь её кадр — стрелка исчезает раньше, чем доедешь. Приоритет у ленты: она крупнее, лежит выше и решает более общую задачу. */ .cy-routes.cy-routes .lanewrap:has(.lnav:hover) .arr{opacity:0}.cy-routes.cy-routes .lnav:hover{box-shadow:0 3px 8px rgba(10,22,40,.18),0 16px 32px -10px rgba(10,22,40,.5)}.cy-routes.cy-routes .lnav:active{scale:.93} }/* на телефоне листают пальцем: стрелки не нужны, а фейд не совпал бы с лентой — она специально вылезает за края экрана отрицательными полями */ @container cyrt (max-width: 560px){.cy-routes.cy-routes .lnav{display:none} }/* ═══ ТЕЛЕФОН: вторая лента = НАШИ СТРОКИ горизонтально ═══ Структурное отличие необычных: дневные — высокие вертикальные карточки (кадр сверху), спец — короткие горизонтальные СТРОКИ (квадрат слева). Другой тип карточки, не другой цвет. */ @container cyrt (max-width: 560px){.cy-routes.cy-routes .desk-only{display:none!important}.cy-routes.cy-routes .lane.rlane{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 15px; gap:12px;margin:-6px -15px -34px;padding:10px 15px 52px;scrollbar-width:none; -webkit-overflow-scrolling:touch}.cy-routes.cy-routes .lane.rlane::-webkit-scrollbar{display:none}/* ОДНА КАРТОЧКА НА ВСЁ. Движок даёт сигнатуре внутри карусели свой размер (70% против 64%, кадр 4:3) — гасим: отличие несут заголовок группы и угловая лента SIGNATURE, а не габарит. Тёплая подложка и золотой волосок у сигнатуры остаются, они не меняют размеров. */ /* одиночный рейс на телефоне — во всю ширину, иначе справа пустая треть */ .cy-routes.cy-routes.dc .lane.carousel.one .row{flex:0 0 100%;max-width:100%}.cy-routes.cy-routes.dc .lane.carousel .row.sig{flex:0 0 64%;max-width:64%}.cy-routes.cy-routes.dc .lane.carousel .row.sig .med{aspect-ratio:3/2}.cy-routes.cy-routes.dc .lane.carousel .row.sig .nm{font-size:15.5px}.cy-routes.cy-routes.dc .lane.carousel .row.sig .foot{flex-direction:row;align-items:center;gap:14px}.cy-routes.cy-routes.dc .lane.carousel .row.sig .cta{width:auto;justify-content:center}/* кнопка развёртывания на телефоне пока не реализована — не показываем её, чтобы не врала: класс вешался, а раскладка не менялась */ /* СТАРАЯ строчная раскладка необычных остаётся для справки — она больше не используется: на телефоне у каждой группы своя лента с обычными карточками. Крупная вертикальная карточка отличалась от дневной только габаритом, а это не отличие, а громкость. Строка «фото слева» — структурное отличие: дневная карточка вертикальная, необычная горизонтальная. Пропорции внутри строки — отдельный разговор, они и были слабым местом. */ .cy-routes.cy-routes .rlane .row{flex:0 0 92%;max-width:92%;scroll-snap-align:start;grid-template-columns:112px 1fr}.cy-routes.cy-routes .rlane .med{min-height:112px}/* длинный CTA спец-рейса + цена в одной линии на 92% ширины — кегль плотнее */ .cy-routes.cy-routes .rlane .cta{font-size:11.5px;padding:8px 11px;gap:5px}/* корешок-разделитель остаётся скрытым: он был отдельной точкой привязки и лента на нём залипала, показывая обрезанную карточку */ .cy-routes.cy-routes .rlane .gdiv{display:none}/* РАЗВЁРТЫВАНИЕ НА ТЕЛЕФОНЕ. Правила .open жили только в десктопном медиазапросе — на телефоне класс вешался, а раскладка не менялась, и кнопка врала. Здесь список в одну колонку во всю ширину. Специфичность поднята намеренно: правила движка `body.dc .lane.carousel` (0,3,0) и `body.dc .carousel .row` (0,3,1) перебивали простое `.lane.open`, и класс вешался вхолостую. */ .cy-routes.cy-routes.dc .lane.carousel.open{display:flex;flex-direction:column;gap:14px;overflow:visible; scroll-snap-type:none;margin:0 -15px;padding:2px 15px 8px}.cy-routes.cy-routes.dc .lane.carousel.open .row{flex:0 0 auto;max-width:none;width:100%}.cy-routes.cy-routes.dc .lane.carousel.open .row.gsep{margin-left:0;margin-top:26px}.cy-routes.cy-routes.dc .lane.carousel.open .med{aspect-ratio:16/9}.cy-routes.cy-routes .gexp{display:inline-flex}/* ГРАНИЦА ГРУПП — ПРОМЕЖУТОК, а не элемент. Первая карточка новой группы отодвигается: глаз читает разрыв как «началось другое», а привязываться и залипать не на чем — это поле, а не отдельный блок. */ .cy-routes.cy-routes .lane.spec .row.gsep{margin-left:34px}.cy-routes.cy-routes .rlane .cta svg{width:10px;height:10px} /* подвал строки — КАК ВЕЗДЕ: цена слева, кнопка справа на одной линии. Разворот в столбик растягивал карточку по высоте, а за ней и медиа. */ } /* ── ПРИВЯЗКА К СТРАНИЦЕ ЯХТЫ ──────────────────────────────────────────────── Единственное место, где мы вообще упоминаем хозяйскую страницу (.cy-y). Всё остальное выше — про сам блок и переносится куда угодно как есть. */ .cy-y .cy-routes{margin-top:26px} .cy-y .cy-routes svg{display:revert} /* .cy-y svg{display:block} ломает иконки карточки */ .cy-y .cy-routes .col{max-width:none} /* ── СМЫСЛОВАЯ ВЕРСИЯ ОТ СЕРВЕРА ───────────────────────────────────────────── Её видит робот, человек без скриптов и любой, кто смотрит на страницу первые мгновения. Скрипт заменяет её лентой, поэтому живёт она недолго — но выглядеть обязана прилично: это ЕДИНСТВЕННОЕ, что видит ИИ-поисковик, и по ней он судит о лодке целиком. Раньше на её месте была пустота, и рейсов для него не существовало вовсе. Никакого display:none: спрятанный текст не индексируется и справедливо считается попыткой обмануть. Он честно виден, просто недолго. */ .cy-routes .cy-seo{display:flex;flex-direction:column;gap:14px} .cy-routes .cy-seo-h{font-family:'Outfit',sans-serif;font-weight:700;font-size:17px; letter-spacing:-.01em;margin:8px 0 2px;color:#0a1628} .cy-routes .cy-seo-h span{font-family:'DM Sans',sans-serif;font-weight:500;font-size:12px;color:#9aa3ad;margin-left:6px} .cy-routes .cy-seo-r{display:flex;gap:14px;align-items:flex-start; background:linear-gradient(180deg,#fff,#fdfcfa);border-radius:18px;padding:12px; box-shadow:0 1px 1px rgba(10,22,40,.04),0 8px 20px -14px rgba(10,22,40,.3)} .cy-routes .cy-seo-i{width:132px;height:88px;object-fit:cover;border-radius:12px;flex:0 0 auto;background:#eef2f6} .cy-routes .cy-seo-b{min-width:0} .cy-routes .cy-seo-b h3{font-family:'Outfit',sans-serif;font-weight:700;font-size:16px;margin:0 0 4px;color:#0a1628} .cy-routes .cy-seo-b h3 a{color:inherit;text-decoration:none} .cy-routes .cy-seo-b p{margin:0 0 5px;font-size:13px;line-height:1.5;color:#5c6470} .cy-routes .cy-seo-m{font-weight:600;color:#2a3340 !important} .cy-routes .cy-seo-t{font-size:12px;color:#9aa3ad !important} .cy-routes .cy-seo-p{font-family:'Outfit',sans-serif;font-weight:700;font-size:16px;color:#0a1628 !important;margin:6px 0 0 !important} .cy-routes .cy-seo-p span{font-family:'DM Sans',sans-serif;font-weight:400;font-size:12px;color:#9aa3ad} @container cyrt (max-width: 560px){ .cy-routes .cy-seo-i{width:96px;height:72px} } /* Готовая лента проявляется мягко — на месте смысловой версии, без пустоты между ними. Резерв высоты больше не нужен: высоту всё это время держало настоящее содержимое, а не подпорка. */ .cy-routes.ready > *{animation:cy-reveal-in .3s ease} @keyframes cy-reveal-in{from{opacity:.35}to{opacity:1}} @media (prefers-reduced-motion:reduce){.cy-routes.ready > *{animation:none}}