/* /ekskursii/ — «Точка сбора»: гравюра одной линией на тёплой бумаге, янтарь только у активного. Дизайн: agents/design/proposals/07_ekskursii.md. Движение — только transform/opacity; знаки внутри управляются наследуемыми переменными (--xk-live, --xk-on), потому что селекторы не проходят в теневое дерево. */ body.xk-page { background: #f5eedf; } /* Шапка сама раскрывает наверху большой баннер городов (кнопки для него нет, «Города» — ссылка) — на продающей странице он отвлекает (решение владельца 08.10). Здесь не показываем; excursions.js снимает и сам флаг раскрытия. */ body.xk-page .kedo-hdr .mega--cities { display: none; } body.xk-page #content, body.xk-page .site-content, body.xk-page .content-area, body.xk-page #primary, body.xk-page .site-main { max-width: 100%; width: 100%; padding: 0; margin: 0; float: none; } body.xk-page #page.site, body.xk-page .site.grid-container, body.xk-page .grid-container.container { max-width: 100%; width: 100%; margin: 0; padding: 0; } body.xk-page .site-main > * { margin-bottom: 0; } .xk { --xk-paper: #f5eedf; --xk-paper2: #ece2cb; --xk-card: #fbf7ee; --xk-ink: #213a2e; --xk-ink2: #56665a; --xk-line: rgba(33, 58, 46, .16); --xk-amber: #c26f22; --xk-amber2: #e7ad5f; --xk-sea: #e3e7df; --xk-sea-ink: #a8b8ad; --xk-serif: 'Cormorant Garamond', Georgia, serif; --xk-sans: Inter, system-ui, sans-serif; --xk-live: paused; --xk-on: 0; color: var(--xk-ink); font-family: var(--xk-sans); background: var(--xk-paper); background-image: radial-gradient(rgba(120, 96, 50, .05) 1px, transparent 1.2px); background-size: 5px 5px; } .xk *, .xk *::before, .xk *::after { box-sizing: border-box; } .xk-symbols { position: absolute; width: 0; height: 0; overflow: hidden; } .xk-wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 3.4vw, 40px); } .xk .entry-content.city-content { margin-top: 0; margin-bottom: 0; } .xk .xk-intro.entry-content { margin: 0; padding: 0; max-width: none; } .xk .xk-wrap.entry-content { max-width: 1240px; margin-left: auto; margin-right: auto; padding: 0 clamp(16px, 3.4vw, 40px); } .xk h1, .xk h2, .xk h3 { color: var(--xk-ink); } .xk a { color: var(--xk-ink); text-decoration-color: rgba(194, 111, 34, .6); text-underline-offset: 3px; } .xk a:hover, .xk a:focus-visible { color: var(--xk-amber); } .xk :focus-visible { outline: 2px solid var(--xk-amber); outline-offset: 2px; } .xk [id] { scroll-margin-top: 96px; } .xk-ico { width: 1.35em; height: 1.35em; flex: none; color: inherit; vertical-align: -.3em; } /* ---------- верх: вопрос + карта ---------- */ .xk-top { padding: clamp(18px, 3vw, 40px) 0 clamp(18px, 3vw, 34px); } .xk-top__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } @media (min-width: 1000px) { .xk-top__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: start; } } .xk-crumbs { margin: 0 0 14px; font-size: 13px; color: var(--xk-ink2); } .xk-eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--xk-amber); } .xk .xk-h1 { margin: 0; font: 600 clamp(2rem, 3.2vw, 2.8rem)/1.04 var(--xk-serif); letter-spacing: -.02em; max-width: 16ch; } .xk-lead { margin: 12px 0 6px; font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.55; color: var(--xk-ink); } .xk-src, .xk-ad { margin: 0; font-size: 13px; line-height: 1.5; color: var(--xk-ink2); } .xk-ad { margin-top: 4px; } .xk-ad--test { display: inline-block; margin-top: 8px; padding: 4px 10px; border: 1px dashed rgba(194, 111, 34, .55); border-radius: 8px; } .xk-form { margin-top: 18px; } .xk-q { margin: 0 0 12px; padding: 0; border: 0; min-width: 0; } .xk-q__legend { margin: 0 0 8px; padding: 0; font: 600 1.28rem/1.2 var(--xk-serif); color: var(--xk-ink); } .xk-q__chips { display: flex; flex-wrap: wrap; gap: 7px; } .xk-chip { position: relative; display: inline-flex; cursor: pointer; } .xk-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; } .xk-chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--xk-line); border-radius: 999px; background: var(--xk-card); font-size: 15px; line-height: 1.15; color: var(--xk-ink); transition: background-color .2s, border-color .2s, color .2s, transform .2s; } .xk-chip:hover span { border-color: var(--xk-amber); } .xk-chip input:checked + span { background: var(--xk-ink); border-color: var(--xk-ink); color: #fbf3e2; } .xk-chip input:checked + span .xk-ico { color: var(--xk-amber2); } .xk-chip input:focus-visible + span { outline: 2px solid var(--xk-amber); outline-offset: 2px; } .xk-more-f { margin: 6px 0 0; } .xk-more-f > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--xk-ink); text-decoration: underline; text-decoration-color: rgba(194, 111, 34, .6); text-underline-offset: 4px; } .xk-more-f[open] > summary { margin-bottom: 8px; } .xk-more-f .xk-q__legend { font-size: 1.08rem; } .xk-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 20px; border: 0; border-radius: 12px; background: var(--xk-amber); color: #fff; font: 600 15px/1.2 var(--xk-sans); text-decoration: none; cursor: pointer; } .xk-btn:hover { background: #a85c17; color: #fff; } .xk-btn[disabled] { background: #c9b796; color: #fffaf0; cursor: not-allowed; } .xk-btn--ghost { background: transparent; color: var(--xk-ink); border: 1px solid var(--xk-ink); } .xk-btn--ghost:hover { background: var(--xk-ink); color: #fbf3e2; } .xk-form__go { margin-top: 10px; } .xk[data-enhanced] .xk-form__go { display: none; } /* карта */ .xk-map { margin: 0; } .xk-map__stage { position: relative; border-radius: 18px; overflow: hidden; background: var(--xk-sea); box-shadow: inset 0 0 0 1px var(--xk-line), 0 18px 40px -26px rgba(33, 58, 46, .45); } .xk-map__svg { display: block; width: 100%; height: auto; } /* высота — из viewBox схемы (build_map.py) */ .xk-map__sea { fill: var(--xk-sea); } .xk-map__waves { animation: xk-drift 26s linear infinite; animation-play-state: var(--xk-live); } .xk-map__land { fill: #f3ead6; stroke: var(--xk-ink); stroke-width: 1.1; stroke-linejoin: round; } .xk-map__out { fill: url(#xk-hatch); stroke: none; } .xk-map__border { fill: none; stroke: var(--xk-ink); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 5 4; } .xk-map__names text { font: italic 600 15px var(--xk-serif); fill: #6f8279; letter-spacing: .04em; } .xk-map__names .xk-map__kosa { fill: var(--xk-ink2); } .xk-map__wind path { fill: none; stroke: #7d8f86; stroke-width: 1.2; stroke-linecap: round; opacity: .0; animation: xk-wind 5.5s ease-in-out infinite; animation-play-state: var(--xk-live); } .xk-map__wind path:nth-child(2) { animation-delay: 1.1s; } .xk-map__wind path:nth-child(3) { animation-delay: 2.3s; } .xk-map__wind path:nth-child(4) { animation-delay: 3.2s; } .xk-map__wind path:nth-child(5) { animation-delay: 4.1s; } .xk-map__toeast { fill: none; stroke: var(--xk-ink2); stroke-width: 1.2; stroke-linecap: round; } .xk-map__toeast text { fill: var(--xk-ink2); stroke: none; font: italic 600 12px var(--xk-serif); } .xk-pt { cursor: pointer; color: var(--xk-ink); } .xk-pt__dot { fill: var(--xk-ink); } .xk-pt__ring { fill: none; stroke: var(--xk-amber); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; } .xk-pt__name { font: 600 13px var(--xk-sans); fill: var(--xk-ink); paint-order: stroke; stroke: #f3ead6; stroke-width: 3.5px; stroke-linejoin: round; } .xk-pt:hover .xk-pt__name, .xk-pt:focus-visible .xk-pt__name, .xk-pt.is-on .xk-pt__name { fill: var(--xk-amber); } .xk-pt.is-on .xk-pt__ring { opacity: 1; animation: xk-ping 2.4s ease-out infinite; animation-play-state: var(--xk-live); } .xk-pt.is-on, .xk-dir.is-on { --xk-on: 1; color: var(--xk-ink); } .xk-pt.is-dim { opacity: .45; } .xk-dir { color: var(--xk-ink); } .xk-map__route { fill: none; stroke: var(--xk-amber); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; } .xk-map__route--ink { stroke: #fff8ea; stroke-width: 1; stroke-dasharray: .006 .012; stroke-dashoffset: 0; opacity: .9; } .xk-flag, .xk-car { opacity: 0; color: var(--xk-ink); pointer-events: none; } .xk-flag .xs-pennant, .xk-flag { --xk-on: 1; } .xk-map__osm { font: 500 9px var(--xk-sans); fill: var(--xk-ink2); opacity: .7; } /* Арни на карте — HTML-слой поверх SVG, позиция в долях сцены */ .xk-arni { position: absolute; left: 0; top: 0; width: 12%; aspect-ratio: 161 / 110; transform: translate(-50%, -100%); pointer-events: none; opacity: 0; transition: opacity .4s; } .xk[data-enhanced] .xk-arni { opacity: 1; } .xk-arni__spr { display: block; width: 100%; height: 100%; background: url(../img/excursions/arni-sit.webp) 0 0 / 300% 100% no-repeat; transform: scaleX(var(--xk-flip, 1)); } .xk-arni[data-pose="sit"] { aspect-ratio: 107 / 127; width: 8%; } .xk-arni[data-pose="sit"] .xk-arni__spr { background-position: 100% 0; } .xk-arni[data-pose="sitting"] { aspect-ratio: 107 / 127; width: 8%; } .xk-arni[data-pose="sitting"] .xk-arni__spr { animation: xk-sit .9s steps(2) forwards; } .xk-arni[data-pose="trot"] .xk-arni__spr { background-image: url(../img/excursions/arni-trot.webp); background-size: 400% 100%; animation: xk-frames4 .66s steps(4) infinite; } /* ---------- знаки (внутри : только классы и переменные) ---------- */ .xs-glow { fill: var(--xk-amber2); stroke: none; opacity: calc(var(--xk-on, 0) * .95); transition: opacity .8s; } .xs-birds { transform-box: fill-box; transform-origin: center; animation: xk-birds 9s ease-in-out infinite; animation-play-state: var(--xk-live, paused); } .xs-tail { transform-box: fill-box; transform-origin: 0% 100%; animation: xk-tail 2.8s ease-in-out infinite; animation-play-state: var(--xk-live, paused); } .xs-cathead { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(calc(var(--xk-on, 0) * -12deg)); transition: transform .7s cubic-bezier(.3, 1.6, .5, 1); } .xs-wave { animation: xk-wave 4.2s ease-in-out infinite; animation-play-state: var(--xk-live, paused); } .xs-stone { fill: var(--xk-amber2); stroke: var(--xk-amber); stroke-width: 1; transform-box: fill-box; transform-origin: center; transform: scale(calc(.8 + var(--xk-on, 0) * .35)); transition: transform .6s; } .xs-glint { stroke: var(--xk-amber); opacity: calc(var(--xk-on, 0)); transition: opacity .5s .3s; } .xs-beam { fill: var(--xk-amber2); stroke: none; opacity: calc(var(--xk-on, 0) * .45); transform-box: view-box; transform-origin: 24px 13.5px; animation: xk-beam 6s ease-in-out infinite alternate; animation-play-state: var(--xk-live, paused); transition: opacity .8s; } .xs-flagc { fill: var(--xk-amber2); transform-box: fill-box; transform-origin: 0% 50%; animation: xk-flag 1.8s ease-in-out infinite; animation-play-state: var(--xk-live, paused); } .xs-pine { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(calc(var(--xk-on, 0) * -9deg)); transition: transform 1.1s cubic-bezier(.3, 1.5, .5, 1); } .xs-sand { stroke: var(--xk-amber); stroke-width: 2.2; opacity: calc(var(--xk-on, 0)); transform: translateX(calc(var(--xk-on, 0) * 6px)); transition: opacity .6s, transform 1.2s; } .xs-gust { animation: xk-gust 4.8s ease-in-out infinite; animation-play-state: var(--xk-live, paused); } .xs-sunb { transform: translateY(calc(var(--xk-on, 0) * 5px)); transition: transform 1.4s ease-in-out; } .xs-disc { fill: var(--xk-amber2); fill-opacity: calc(.35 + var(--xk-on, 0) * .6); transition: fill-opacity 1s; } .xs-path { stroke: var(--xk-amber); stroke-width: 2; opacity: calc(var(--xk-on, 0)); transition: opacity 1.2s .4s; } .xs-hull { transform-box: fill-box; transform-origin: 50% 100%; animation: xk-bob 3.6s ease-in-out infinite; animation-play-state: var(--xk-live, paused); } .xs-pennant { fill: var(--xk-amber); stroke: var(--xk-ink); stroke-width: 1.2; } /* ---------- подборка ---------- */ .xk-res { padding: clamp(10px, 2vw, 22px) 0 clamp(40px, 6vw, 72px); } .xk-res__head { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 16px; margin-bottom: 18px; } .xk .xk-h2 { margin: 0; font: 600 clamp(1.75rem, 3.2vw, 2.5rem)/1.08 var(--xk-serif); } .xk-res__count { margin: 0; font-size: 15px; font-weight: 600; color: var(--xk-amber); } .xk-res__note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--xk-ink2); } .xk-res__self { grid-column: 1 / -1; margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--xk-ink); } .xk-res__self a { color: var(--xk-amber); text-underline-offset: 3px; } .xk-res__ad { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--xk-ink2); } .xk-cta__ad { flex-basis: 100%; font-size: 11.5px; color: var(--xk-ink2); } .xk-self__back { margin: 18px 0 0; } .xk-active { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; } .xk-active:empty { display: none; } .xk-tag { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: 999px; background: var(--xk-paper2); font-size: 14px; text-decoration: none; } .xk button.xk-tag { border: 0; cursor: pointer; font: 500 14px var(--xk-sans); color: var(--xk-ink); background: var(--xk-paper2); } .xk button.xk-tag:hover, .xk button.xk-tag:focus-visible { background: #e2d4b4; color: var(--xk-ink); } .xk-tag--all, .xk button.xk-tag--all { background: transparent; text-decoration: underline; text-decoration-color: rgba(194, 111, 34, .6); text-underline-offset: 3px; } .xk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } @media (min-width: 700px) { .xk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .xk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } } .xk-card { display: flex; flex-direction: column; min-width: 0; background: var(--xk-card); border: 1px solid var(--xk-line); border-radius: 18px; overflow: hidden; box-shadow: 0 14px 30px -24px rgba(33, 58, 46, .55); } .xk-card[hidden] { display: none; } .xk-card__media { aspect-ratio: 3 / 2; background: var(--xk-paper2); overflow: hidden; } .xk-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .xk-card__nophoto { display: grid; place-items: center; height: 100%; background: var(--xk-paper2); } .xk-card__nophoto img { width: 62%; height: auto; } .xk-card__body { display: flex; flex: 1; flex-direction: column; padding: 14px 18px 18px; } .xk-route { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--xk-ink); } .xk-route__from, .xk-route__to { display: inline-flex; align-items: center; gap: 5px; } .xk-route__from--unknown { font-weight: 500; color: var(--xk-ink2); } .xk-route__to { color: var(--xk-amber); } .xk-route__to--loop { font-weight: 500; color: var(--xk-ink2); } .xk-route__line { width: 42px; height: 8px; overflow: visible; } .xk-route__line path { fill: none; stroke: var(--xk-amber); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; } .xk .xk-card__t { margin: 0; font: 600 1.42rem/1.12 var(--xk-serif); overflow-wrap: break-word; hyphens: manual; } .xk-card__tag { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--xk-ink2); } .xk-card__meta { margin: 10px 0 0; font-size: 13.5px; color: var(--xk-ink2); } .xk-age { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--xk-line); border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--xk-ink); } .xk-card__rate { margin: 4px 0 0; font-size: 13.5px; color: var(--xk-ink); } .xk-card__about { margin-top: 10px; } .xk-card__about > summary { display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; font-size: 14.5px; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(194, 111, 34, .6); text-underline-offset: 4px; list-style: none; } .xk-card__about > summary::-webkit-details-marker { display: none; } .xk-facts { margin: 6px 0 0; font-size: 14px; } .xk-facts div { display: grid; grid-template-columns: 9.5em 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--xk-line); } .xk-facts dt { color: var(--xk-ink2); } .xk-facts dd { margin: 0; } .xk-about__more { margin: 8px 0 0; font-size: 13px; color: var(--xk-ink2); } .xk-about__page { margin: 10px 0 0; font-weight: 600; } .xk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; padding-top: 14px; } .xk-cta__where { font-size: 13px; color: var(--xk-ink2); } .xk-empty { display: grid; justify-items: center; gap: 6px; max-width: 560px; margin: 8px auto 0; padding: 26px 18px; text-align: center; border: 1px dashed var(--xk-line); border-radius: 18px; } .xk-empty[hidden] { display: none; } .xk-empty__lh { position: relative; width: 120px; aspect-ratio: 1; } .xk-empty__lh img { position: absolute; inset: 0; width: 100%; height: 100%; } .xk-empty__beam { transform-origin: 52% 17%; animation: xk-search 3.6s ease-in-out infinite alternate; } @keyframes xk-search { from { transform: rotate(-14deg); opacity: .55; } to { transform: rotate(12deg); opacity: 1; } } .xk-empty__t { margin: 0; font: 600 1.3rem/1.2 var(--xk-serif); } .xk-empty__s { margin: 0; font-size: 14px; line-height: 1.5; color: var(--xk-ink2); } .xk-more-wrap { margin: 22px 0 0; text-align: center; } .xk-more-wrap[hidden] { display: none; } /* ---------- окно подробностей ---------- */ .xk-dlg { width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 20px; background: var(--xk-card); color: var(--xk-ink); box-shadow: 0 40px 90px -30px rgba(15, 30, 22, .6); } .xk-dlg::backdrop { background: rgba(24, 36, 30, .55); } .xk-dlg__in { position: relative; } .xk-dlg__x { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 4px; width: 100%; min-height: 48px; padding: 10px 18px; border: 0; background: rgba(251, 247, 238, .94); color: var(--xk-ink); font: 600 15px var(--xk-sans); text-align: left; cursor: pointer; } .xk button.xk-dlg__x, .xk button.xk-dlg__x:hover, .xk button.xk-dlg__x:focus { background: rgba(251, 247, 238, .96); color: var(--xk-ink); box-shadow: 0 1px 0 var(--xk-line); } .xk button.xk-dlg__x:hover { color: var(--xk-amber); } .xk button.xk-anim, .xk button.xk-anim:hover, .xk button.xk-anim:focus { background: rgba(33, 58, 46, .9); color: #fbf3e2; } .xk button.xk-btn[disabled], .xk button.xk-btn[disabled]:hover { background: #cdbd9c; color: #fffaf0; } .xk-dlg__body .xk-card__media { aspect-ratio: 16 / 9; } .xk-dlg__body .xk-card__body { padding: 18px 22px 22px; } .xk-dlg__body .xk-card__t { font-size: clamp(1.6rem, 3.4vw, 2.2rem); } .xk-dlg__body .xk-card__about > summary { display: none; } @media (max-width: 699px) { .xk-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } } /* ---------- «Как оформить» ---------- */ .xk-how { padding: clamp(36px, 6vw, 70px) 0 clamp(20px, 3vw, 30px); background: var(--xk-paper2); } .xk-how__road { position: relative; margin: 14px 0 6px; aspect-ratio: 1200 / 200; } @media (max-width: 759px) { .xk-how__road { margin: 34px 0 0; } .xk-walker { width: 13%; } .xk-how__mark { width: 15%; } } .xk-how__road svg { display: block; width: 100%; height: 100%; overflow: visible; } .xk-how__ground { stroke: var(--xk-line); stroke-width: 1; } .xk-how__path { fill: none; stroke: var(--xk-amber); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--xk-p, 1)); vector-effect: non-scaling-stroke; } .xk-how__st { fill: var(--xk-card); stroke: var(--xk-ink); stroke-width: 1.6; vector-effect: non-scaling-stroke; } .xk-walker { position: absolute; left: 0; top: 0; width: 7.5%; aspect-ratio: 1; transform: translate(-50%, -80%); opacity: 0; pointer-events: none; } .xk[data-enhanced] .xk-walker { opacity: 1; } .xk-walker img, .xk-how__mark img { display: block; width: 100%; height: 100%; } .xk-how__mark { position: absolute; width: 9%; aspect-ratio: 1; transform: translate(-50%, -98%); } .xk-how { position: relative; } /* Арни сидит на верхнем краю блока в полный рост и гавкает (M12, 4 кадра; лапы на кромке) */ .xk-peek { position: absolute; right: 7%; top: 2px; width: clamp(74px, 7vw, 100px); aspect-ratio: 190 / 238; transform: translateY(-100%); pointer-events: none; } .xk-peek__in { position: relative; height: 100%; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .7s cubic-bezier(.3, 1.5, .5, 1); } .xk-peek.is-up .xk-peek__in, .xk:not([data-enhanced]) .xk-peek__in { opacity: 1; transform: none; } .xk-peek__arni { position: absolute; inset: 0; background: url(../img/excursions/arni-bark.webp) 0 0 / 400% 100% no-repeat; } .xk-peek.is-up .xk-peek__arni { animation: xk-bark 4.2s step-end infinite; animation-play-state: var(--xk-live); } .xk-peek__woof { position: absolute; left: -62%; top: 2%; padding: 3px 10px 4px; border: 1.5px solid var(--xk-ink); border-radius: 14px 14px 4px 14px; background: var(--xk-card); color: var(--xk-amber); font: italic 600 1.3rem/1 var(--xk-serif); opacity: 0; transform-origin: 100% 100%; } .xk-peek.is-up .xk-peek__woof { animation: xk-woof 4.2s ease-out infinite; animation-play-state: var(--xk-live); } @keyframes xk-bark { 0% { background-position-x: 0; } 52% { background-position-x: 33.333%; } 57% { background-position-x: 66.667%; } 62% { background-position-x: 33.333%; } 66% { background-position-x: 66.667%; } 71%, 100% { background-position-x: 100%; } } @keyframes xk-woof { 0%, 56% { opacity: 0; transform: scale(.6); } 58%, 70% { opacity: 1; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(.9); } } @keyframes xk-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } } .xk-how__steps { display: grid; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: xk; } @media (min-width: 760px) { .xk-how__steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } } .xk-how__steps li { position: relative; padding-left: 46px; font-size: 15px; line-height: 1.55; counter-increment: xk; } .xk-how__steps li::before { content: counter(xk); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; display: grid; place-items: center; border: 1.5px solid var(--xk-ink); border-radius: 50%; font: 600 1.15rem var(--xk-serif); } .xk-how__steps b { display: block; margin-bottom: 2px; font: 600 1.32rem/1.2 var(--xk-serif); color: var(--xk-ink); } /* ---------- финал: горизонт ---------- */ .xk-self { padding: clamp(40px, 6vw, 72px) 0 0; } .xk-self__text p { max-width: 60ch; margin: 10px 0 12px; font-size: 16px; line-height: 1.6; } .xk-self__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; font-size: 15.5px; font-weight: 600; } .xk-horizon { position: relative; margin-top: clamp(18px, 3vw, 30px); height: clamp(200px, 30vw, 440px); overflow: hidden; --xk-d: 0; } /* сцена всегда 3:1, прижата к низу и центру: слои и наложения совпадают на любой ширине */ .xk-hz { position: absolute; bottom: 0; left: 50%; height: 100%; aspect-ratio: 3 / 1; min-width: 100%; transform: translateX(-50%); background: linear-gradient(180deg, #ddd6c4 0%, #ecd9a8 55%, #b9b4a4 62.8%, #c9c2ad 74%, #e8ddc4 80%); } .xk-hz > * { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .xk-hz__l { display: block; object-fit: cover; } .xk-hz__l2 { transform: translateY(calc(var(--xk-d) * -8px)); } .xk-hz__l3 { transform: translateY(calc(var(--xk-d) * -16px)); } .xk-hz__l4 { transform: translateY(calc(var(--xk-d) * -30px)) scale(1.04); transform-origin: 50% 100%; } .xk-hz__dusk { background: linear-gradient(180deg, rgba(42, 52, 72, .6), rgba(214, 128, 82, .28) 52%, rgba(214, 128, 82, 0) 72%); opacity: calc(var(--xk-d) * .95); } .xk-hz__beam { opacity: var(--xk-d); } /* лодка идёт слева направо по мере прокрутки, носом по ходу */ /* горизонт слоя моря — 62,8 % высоты; ватерлиния лодки (≈87 % её картинки) ставится на воду ниже горизонта */ .xk-hz > .xk-hz__boat { left: 26%; top: 56.5%; width: 4.8%; height: auto; transform: translateX(calc(var(--xk-d) * 780%)); } /* чайки: шесть нарисованных фаз крыла, летят справа налево */ .xk-sky { position: relative; height: clamp(80px, 9vw, 130px); margin-bottom: -1px; overflow: hidden; } .xk-sky svg { display: block; width: 100%; height: 100%; } .xk-sky__sea { fill: var(--xk-paper2); } .xk-sky__dune { fill: #e2d6b8; } .xk-gulls { position: absolute; inset: 0; pointer-events: none; } .xk-gulls i { position: absolute; left: 0; top: 14%; width: clamp(34px, 3.4vw, 52px); aspect-ratio: 1; background: url(../img/excursions/art/r11_gull_strip.webp) 0 0 / 600% 100% no-repeat; animation: xk-gflap .84s steps(6) infinite, xk-gfly 26s linear infinite; animation-play-state: var(--xk-live); } .xk-gulls i:nth-child(2) { top: 38%; width: clamp(26px, 2.6vw, 40px); animation-duration: .9s, 33s; animation-delay: -.3s, -14s; } .xk-gulls i:nth-child(3) { top: 6%; width: clamp(22px, 2.2vw, 34px); animation-duration: .78s, 41s; animation-delay: -.5s, -27s; } .xk-gulls--hz i { top: 8%; } @keyframes xk-gflap { to { background-position-x: 120%; } } @keyframes xk-gfly { 0% { transform: translate(105vw, 0); } 50% { transform: translate(48vw, 14px); } 100% { transform: translate(-80px, -6px); } } /* ---------- FAQ ---------- */ .xk-faq { padding: clamp(36px, 5vw, 60px) 0 clamp(48px, 7vw, 80px); background: var(--xk-paper2); } .xk-faq details { max-width: 820px; border-top: 1px solid var(--xk-line); } .xk-faq details:last-child { border-bottom: 1px solid var(--xk-line); } .xk-faq summary { padding: 14px 0; min-height: 48px; cursor: pointer; font: 600 1.2rem/1.3 var(--xk-serif); } .xk-faq details p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; } /* ---------- телефон: старт выбирают на схеме, схема — побережье, вступление короче ---------- */ .xk-map__ask { display: none; } @media (min-width: 1000px) { .xk-top__grid { grid-template-areas: "text map" "form map"; grid-template-rows: auto 1fr; } .xk-intro { grid-area: text; } .xk-form { grid-area: form; } .xk-map { grid-area: map; position: sticky; top: 104px; align-self: start; } } @media (max-width: 599px) { .xk-top__grid { gap: 10px; } .xk-eyebrow { display: none; } .xk .xk-h1 { font-size: 1.6rem; max-width: none; } .xk-crumbs { margin-bottom: 6px; font-size: 12px; } .xk .xk-intro .xk-lead { margin: 6px 0 2px; font-size: 15px; line-height: 1.45; } .xk .xk-intro .xk-src, .xk .xk-intro .xk-ad { font-size: 12px; line-height: 1.4; } .xk .xk-intro .xk-ad--test { padding: 2px 8px; margin-top: 4px; } .xk-crumbs { display: none; } .xk-card__media { aspect-ratio: 16 / 9; } .xk-map { order: 1; } .xk-form { order: 2; position: relative; margin-top: 2px; } .xk-more-f[open] { padding-top: 2px; } .xk-map__ask { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 4px; font: 600 1.22rem/1.2 var(--xk-serif); } .xk-map__ask span { font: 500 12.5px var(--xk-sans); color: var(--xk-ink2); } .xk-map__found { font-weight: 700; color: var(--xk-amber); text-decoration: none; white-space: nowrap; } .xk-map__stage { border-radius: 14px; } .xk-top { padding-bottom: 8px; } .xk-res { padding-top: 4px; } .xk-arni { width: 14.5%; } .xk-arni[data-pose="sit"], .xk-arni[data-pose="sitting"] { width: 9.6%; } /* схема целиком (726 ед.) на 343 px: подписи крупнее в единицах схемы, чтобы на экране было ≈ 10–11 px */ .xk-map__names text { font-size: 20px; } .xk-pt__name { font-size: 22px; stroke-width: 5px; } .xk-map__osm { font-size: 14px; } .xk-q__chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; } .xk-q__chips::-webkit-scrollbar { display: none; } .xk-chip { flex: none; } .xk-res__head { grid-template-columns: 1fr auto; margin-bottom: 12px; } .xk-res__note { font-size: 12px; } /* горизонт обрезан по центру: мыс с маяком сдвигаем в кадр */ } /* ---------- кадры и движения ---------- */ @keyframes xk-drift { from { transform: translateX(0); } to { transform: translateX(-28px); } } @keyframes xk-wind { 0%, 100% { opacity: 0; transform: translateX(-10px); } 30%, 60% { opacity: .9; } 90% { opacity: 0; transform: translateX(26px); } } @keyframes xk-ping { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.1); opacity: 0; } } @keyframes xk-birds { 0%, 70%, 100% { transform: translate(0, 0); opacity: 1; } 80% { transform: translate(8px, -6px); opacity: .7; } 88% { transform: translate(14px, -10px); opacity: 0; } 94% { transform: translate(0, 0); opacity: 0; } } @keyframes xk-tail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } } @keyframes xk-wave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } } @keyframes xk-beam { from { transform: rotate(-12deg); } to { transform: rotate(10deg); } } @keyframes xk-flag { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.82); } } @keyframes xk-gust { 0%, 100% { opacity: .2; transform: translateX(-4px); } 50% { opacity: 1; transform: translateX(6px); } } @keyframes xk-bob { 0%, 100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(1px); } } @keyframes xk-frames4 { to { background-position-x: 133.333%; } } @keyframes xk-sit { from { background-position-x: 0; } to { background-position-x: 100%; } } /* бережный режим и рубильник «Анимация»: всё статично, текст и выбор целы */ @media (prefers-reduced-motion: reduce) { .xk * { animation: none !important; transition: none !important; } } body[data-motion="off"] .xk * { animation: none !important; transition: none !important; } /* One compact, discoverable full origin selector; unplotted starts remain available. */ .xk-starts { margin-bottom: 8px; } .xk-starts > summary { min-height: 44px; cursor: pointer; display: flex; align-items: center; gap: 4px; font-weight: 600; } .xk-starts > summary::after { content: ' ▾'; } .xk-starts[open] > summary::after { content: ' ▴'; } .xk-res [data-xk-loading]:empty { display: none; } @media (min-width: 600px) { .xk[data-enhanced] .xk-starts > summary { display: none; } } /* Owner 22.10: «места старта» and «что посмотреть» are the key spot of the page — a bright panel with two numbered steps, large serif questions, big chips; the chosen one is amber. */ .xk-form { counter-reset: xkstep; padding: clamp(18px, 2.2vw, 30px); border: 2px solid rgba(194, 111, 34, .55); border-radius: 22px; background: linear-gradient(180deg, #fffaf0, #fbf1de); box-shadow: 0 14px 34px rgba(90, 55, 20, .14); } .xk-form__title { margin: 0 0 16px; font: 700 clamp(1.7rem, 2.4vw, 2.3rem)/1.1 var(--xk-serif); color: var(--xk-ink); } .xk-form__title span { display: block; margin-top: 4px; font: 600 13px/1.2 var(--xk-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--xk-amber); } .xk-starts .xk-q__legend, .xk-form > .xk-q[data-q="place"] .xk-q__legend { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font: 700 clamp(1.45rem, 1.9vw, 1.85rem)/1.15 var(--xk-serif); } .xk-starts .xk-q__legend::before, .xk-form > .xk-q[data-q="place"] .xk-q__legend::before { counter-increment: xkstep; content: counter(xkstep); flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--xk-amber); color: #fff; font: 700 19px/1 var(--xk-sans); box-shadow: 0 3px 8px rgba(194, 111, 34, .35); } .xk-form > .xk-q[data-q="place"] { margin-top: 22px; } .xk-starts .xk-chip span, .xk-form > .xk-q[data-q="place"] .xk-chip span { min-height: 48px; padding: 10px 18px; border: 1.5px solid rgba(194, 111, 34, .38); background: #fff; font-size: 16px; font-weight: 600; box-shadow: 0 1px 2px rgba(60, 40, 15, .08); } .xk-starts .xk-chip:hover span, .xk-form > .xk-q[data-q="place"] .xk-chip:hover span { border-color: var(--xk-amber); background: #fff4e3; transform: translateY(-1px); } .xk-form .xk-chip input:checked + span, .xk-starts .xk-chip input:checked + span, .xk-form > .xk-q[data-q="place"] .xk-chip input:checked + span { background: var(--xk-amber); border-color: var(--xk-amber); color: #fff; box-shadow: 0 4px 12px rgba(194, 111, 34, .35); } .xk-form .xk-chip input:checked + span .xk-ico, .xk-form > .xk-q[data-q="place"] .xk-chip input:checked + span .xk-ico { color: #fff; } .xk-form .xk-q__chips { gap: 9px; } .xk-form__go { min-height: 52px; padding: 12px 28px; font-size: 17px; } .xk-starts > summary { min-height: 52px; padding: 0 18px; border: 2px solid var(--xk-amber); border-radius: 14px; background: #fff; font: 700 1.15rem/1.2 var(--xk-serif); } .xk-starts > summary [data-xk-start-label] { color: var(--xk-amber); } @media (max-width: 599px) { .xk-form { margin: 0 -6px; padding: 16px 14px; border-radius: 18px; } .xk-form__title { display: none; } /* root 22.10: the numbered steps are enough on phones; the first offer stays near 1.2 screens */ .xk-starts .xk-q__legend, .xk-form > .xk-q[data-q="place"] .xk-q__legend { font-size: 1.3rem; } .xk-starts .xk-q__legend::before, .xk-form > .xk-q[data-q="place"] .xk-q__legend::before { width: 32px; height: 32px; font-size: 16px; } .xk .xk-form .xk-q__chips { margin: 0 -14px; padding: 2px 14px 6px; } /* phones: step 1 is the start button (the list itself opens under it, its legend unnumbered) */ .xk-starts > summary { justify-content: flex-start; gap: 10px; padding: 0 14px; font-size: 1.12rem; white-space: nowrap; } .xk-starts > summary::before { counter-increment: xkstep; content: counter(xkstep); flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--xk-amber); color: #fff; font: 700 15px/1 var(--xk-sans); } .xk-starts > summary::after { margin-left: auto; } .xk-starts > summary [data-xk-start-label] { overflow: hidden; text-overflow: ellipsis; } .xk-starts .xk-q__legend::before { display: none; } } /* И5: own block on listings (guide link, how to get there) */ .xk-own { margin: 0 0 14px; padding: 12px 16px; border-left: 3px solid var(--xk-amber); background: var(--xk-card); border-radius: 0 10px 10px 0; font-size: 15px; } .xk-own p { margin: 0 0 6px; } /* В 22.10: quiet self-guided line after the results */ .xk-selfline { padding: 18px 0; border-top: 1px solid var(--xk-line); border-bottom: 1px solid var(--xk-line); background: var(--xk-card); font-size: 15px; } .xk-selfline p { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; } .xk-selfline__app { color: var(--xk-ink2); } /* В 22.10: branded first screen (scene like the home page). Desktop: text on the paper (left 1–41 %, top 14–62 % of the picture); phones: text first on cream, the postcard below (no text over the picture). */ .xk-hero { position: relative; padding: clamp(18px, 3vw, 36px) 0; } .xk-hero--scene { padding: 0; overflow: hidden; background: linear-gradient(90deg, #efe3c9 0 42%, #8a5a30 42% 100%); } .xk-hero__bg img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1067; object-fit: cover; } .xk .xk-hero__paper.entry-content { margin-top: 0; margin-bottom: 0; max-width: none; } .xk-hero--scene .xk-lead { color: #3a2e22; } .xk .xk-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; } .xk .xk-quick__a { margin: 0; } .xk-quick__a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 250, 240, .92); border: 1px solid rgba(33, 58, 46, .22); color: var(--xk-ink); font: 600 14px/1.2 var(--xk-sans); text-decoration: none; } .xk-quick__a:hover, .xk-quick__a:focus-visible { background: var(--xk-amber); border-color: var(--xk-amber); color: #fff; } .xk-hero + .xk-top { padding-top: clamp(16px, 2.4vw, 28px); } /* Owner 22.10: the scene box keeps the picture's 3:2 and fits the screen height; paper text, postcard links and Arni are placed in % of that box and the text is sized in cqw, so nothing can slide off the paper at any width/height. */ .xk-scene { position: relative; } .xk-scene__cards { display: none; } .xk-scene__arni { display: none; } @media (min-width: 900px) { .xk-hero--scene { position: relative; overflow: hidden; background: #5e3a1f; } .xk-hero--scene::before { content: ""; position: absolute; inset: -40px; background: var(--xk-scene-bg) center / cover no-repeat; filter: blur(28px) brightness(.72) saturate(1.1); } /* root 22.10: wider than 3:2 the scene continues left and right — two strips of the Codex outpaint around the untouched 3:2 centre (2.56:1), set flush to the scene box; the blur (a 160 px source) shows only beyond 2.56:1 */ .xk-hero--scene .xk-scene::before, .xk-hero--scene .xk-scene::after { content: ""; position: absolute; top: 0; height: 100%; aspect-ratio: 543 / 1024; background: var(--xk-sl) 0 0 / 100% 100% no-repeat; pointer-events: none; } /* 2 px under the scene picture (z-index −1 inside the box): a fractional box edge left a hairline gap */ .xk-hero--scene .xk-scene::before { right: calc(100% - 2px); z-index: -1; } .xk-hero--scene .xk-scene::after { left: calc(100% - 2px); z-index: -1; background-image: var(--xk-sr); } .xk-hero--scene .xk-scene { z-index: 1; } .xk-hero--scene .xk-scene { container-type: inline-size; width: min(100%, 1536px, max(860px, calc((100svh - 170px) * 1.5))); margin: 0 auto; aspect-ratio: 3 / 2; } .xk-hero--scene .xk-hero__bg img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; object-fit: cover; } .xk-hero--scene .xk-hero__in { position: absolute; inset: 0; max-width: none; padding: 0; pointer-events: none; } .xk-hero--scene .xk-hero__paper { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); padding: 0; pointer-events: auto; overflow: hidden; } .xk-hero--scene .xk-crumbs { margin-bottom: .9cqw; font-size: max(11px, .95cqw); } .xk-hero--scene .xk-eyebrow { margin-bottom: .5cqw; font-size: max(10px, .85cqw); } .xk-hero--scene .xk-h1 { font-size: 2.75cqw; max-width: none; } .xk-hero--scene .xk-lead { margin: .9cqw 0 0; font-size: max(12px, 1.12cqw); line-height: 1.45; } .xk-hero--scene .xk-quick { gap: .55cqw; margin-top: 1.2cqw; } .xk-hero--scene .xk-quick__a { min-height: 0; padding: .5cqw 1cqw; font-size: max(11px, .95cqw); } .xk-hero--scene .xk-scene__cards { display: block; } } @media (min-width: 900px) and (min-height: 940px) { .xk-hero--scene .xk-scene::before { background-image: var(--xk-sl2); } .xk-hero--scene .xk-scene::after { background-image: var(--xk-sr2); } } /* a small scene box (short screens): the lead's second sentence goes, so the text keeps to the paper */ @container (max-width: 1040px) { .xk-hero--scene .xk-lead__more { display: none; } .xk-hero--scene .xk-crumbs { display: none; } } @media (min-width: 900px) { .xk-hero--scene .xk-scene__arni { display: block; position: absolute; height: auto; z-index: 8; pointer-events: none; filter: drop-shadow(0 .4cqw .5cqw rgba(40, 20, 5, .45)); } } /* postcard links (desktop scene and the phone postcard): the whole card is the link, the place name on a label */ .xk-scene__pc { position: absolute; display: block; border-radius: .6cqw; outline-offset: -3px; } .xk-scene__pc span { position: absolute; left: 6%; bottom: 7%; padding: .35em .8em; border-radius: 999px; background: rgba(255, 250, 240, .93); color: var(--xk-ink); font: 600 max(11px, .95cqw)/1.2 var(--xk-sans); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: background .15s ease, color .15s ease; } .xk-scene__pc:hover span, .xk-scene__pc:focus-visible span { background: var(--xk-amber); color: #fff; } .xk-scene__pc:focus-visible { outline: 3px solid var(--xk-amber); } /* Owner 22.10: the compass (dial drawn into the picture) is a link to the start map. */ .xk-compass { position: absolute; z-index: 6; display: none; border-radius: 50%; } .xk-compass:focus-visible { outline: 3px solid var(--xk-amber); outline-offset: 2px; } @media (min-width: 900px) { .xk-hero--scene .xk-compass { display: block; } } @media (max-width: 899px) { .xk-postcard-m .xk-compass { display: block; } } /* Owner 22.10: the blank tickets are «сам» links. The plane (420×150) is mapped onto the ticket by matrix3d (excursions.js); until then the text is transparent and the link covers the ticket's bounding box (no JS: plain links in