/* ========================================================= РУСТОП · дизайн v4 - «аэропорт, день → вечер» Сверху светлое утреннее небо, к низу страница темнеет до вечерних сумерек. Указатели аэродрома, таблички выходов, табло вылетов с монитором у гейта, посадочный талон. ========================================================= */ :root { /* небо: день → вечер */ --sky-0: #f7f9fc; --sky-1: #eef2f8; --sky-2: #e2e8f2; --sky-3: #c8d1e3; --dusk-1: #7d8bb0; --dusk-2: #46547f; --dusk-3: #2b3562; --dusk-4: #222a52; --surface: #fff; --surface-2: #e9edf4; --ink: #10162f; --ink-2: #3c4459; --muted: #6f7790; --line: rgba(16, 22, 47, .1); --line-2: rgba(16, 22, 47, .18); --on-dark: #eef1f8; --on-dark-2: rgba(238, 241, 248, .7); --on-dark-3: rgba(238, 241, 248, .46); --dark-line: rgba(255, 255, 255, .14); /* фирменные и сигнальные */ --brand: #30408e; --sky: #6485c2; --sign: #ffd100; /* жёлтый аэродромных указателей */ --sign-ink: #111214; --panel: #0d1432; /* корпус табло и монитора */ --flap: #182046; --flap-ink: #f4f1e6; --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --wrap: 1320px; --gutter: clamp(18px, 3.4vw, 40px); --hh: 76px; --radius: 14px; --radius-lg: 20px; --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); --t-fast: .45s; --t: .8s; --t-slow: 1.25s; } /* ---------- База ---------- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } body.rs { font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--ink-2); background: var(--sky-0); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .rs ::selection { background: var(--brand); color: #fff; } .rs h1, .rs h2, .rs h3, .rs h4 { font-family: var(--font); color: var(--ink); } .rs a { transition: color var(--t-fast) var(--ease); } .rs-container { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding-inline: var(--gutter); } .rs-ico { width: 18px; height: 18px; flex: none; } .rs-label { font-family: var(--mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .rs .rs-h2 { margin: 0; font-weight: 500; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.05; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; } /* ---------- Кнопки, указатели, ссылки ---------- */ .rs .rs-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 48px; padding: 0 22px; border-radius: 6px; border: 1px solid transparent; font: 600 15px/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer; overflow: hidden; isolation: isolate; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .rs .rs-btn--lg { height: 58px; padding: 0 28px; font-size: 16px; } .rs .rs-btn .rs-ico { transition: transform var(--t-fast) var(--ease); } .rs .rs-btn:hover .rs-ico { transform: translateX(5px); } .rs .rs-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform var(--t-fast) var(--ease); } .rs .rs-btn:hover::before { transform: none; } .rs .rs-btn--sign { background: var(--ink); color: #fff; } .rs .rs-btn--sign::before { background: var(--brand); } .rs .rs-btn--sign:hover { color: #fff; } /* табличка выхода: тёмная ячейка с кодом + жёлтая с названием */ .rs-gate { display: inline-flex; align-items: stretch; height: 28px; border-radius: 5px; overflow: hidden; font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; justify-self: start; } .rs-gate b { display: grid; place-items: center; padding: 0 9px; background: var(--ink); color: #fff; font-weight: 600; } .rs-gate span { display: grid; place-items: center; padding: 0 11px; color: var(--ink); border: 1px solid var(--line-2); border-left: 0; border-radius: 0 5px 5px 0; background: rgba(255, 255, 255, .55); } .rs .rs-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; color: var(--ink); text-decoration: none; padding-bottom: 4px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; transition: background-size var(--t) var(--ease), color var(--t-fast) var(--ease); } .rs .rs-link:hover { background-size: 0 1px; background-position: right bottom; color: var(--brand); } .rs .rs-link .rs-ico { transition: transform var(--t-fast) var(--ease); } .rs .rs-link:hover .rs-ico { transform: translateX(4px); } /* ---------- Перекидные ячейки ---------- */ .rs-tiles { font-family: var(--mono); font-weight: 600; letter-spacing: 0; white-space: nowrap; } .rs-t { position: relative; display: inline-grid; place-items: center; min-width: .82em; height: 1.55em; margin-right: 2px; padding: 0 .08em; border-radius: 3px; background: var(--flap); color: var(--flap-ink); line-height: 1; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06); animation-duration: .16s; animation-timing-function: var(--ease-io); } .rs-t::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); } .rs-t--space { background: transparent; box-shadow: none; min-width: .45em; } .rs-t--space::after { display: none; } @keyframes rs-flip { 0% { transform: perspective(200px) rotateX(0); filter: brightness(1); } 50% { transform: perspective(200px) rotateX(-80deg); filter: brightness(.6); } 100% { transform: perspective(200px) rotateX(0); filter: brightness(1); } } @keyframes rs-flip2 { 0% { transform: perspective(200px) rotateX(0); filter: brightness(1); } 50% { transform: perspective(200px) rotateX(-80deg); filter: brightness(.6); } 100% { transform: perspective(200px) rotateX(0); filter: brightness(1); } } .rs-tiles--lg { font-size: 26px; } /* ---------- Прелоадер (светлое утро) ---------- */ .rs-preloader { display: none; } .rs-js.rs-pl-skip .rs-preloader { display: none; } .rs-js .rs-preloader { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: radial-gradient(900px 500px at 50% 30%, #fff 0%, var(--sky-0) 55%, var(--sky-1) 100%); color: var(--ink); transition: transform 1.1s cubic-bezier(.76, 0, .24, 1) .15s, visibility 0s linear 1.3s; } .rs-loaded .rs-preloader { transform: translateY(-100%); visibility: hidden; pointer-events: none; } .rs-preloader__scene { position: relative; width: 360px; height: 140px; flex: none; } @media (max-width: 420px) { .rs-preloader__scene { transform: scale(.82); } } .rs-preloader__route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .rs-preloader__path { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 7; } .rs-preloader__trail { stroke: var(--sky); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rs-trail 2.6s cubic-bezier(.5, 0, .4, 1) infinite; } .rs-preloader__lights { position: absolute; left: 10px; width: 140px; top: 125px; display: flex; justify-content: space-between; } .rs-preloader__lights i { width: 4px; height: 4px; border-radius: 50%; background: #e0a800; opacity: .2; animation: rs-lights 1.3s linear infinite; } .rs-preloader__lights i:nth-child(1) { animation-delay: 0s; } .rs-preloader__lights i:nth-child(2) { animation-delay: .1s; } .rs-preloader__lights i:nth-child(3) { animation-delay: .2s; } .rs-preloader__lights i:nth-child(4) { animation-delay: .3s; } .rs-preloader__lights i:nth-child(5) { animation-delay: .4s; } .rs-preloader__lights i:nth-child(6) { animation-delay: .5s; } .rs-preloader__lights i:nth-child(7) { animation-delay: .6s; } .rs-preloader__lights i:nth-child(8) { animation-delay: .7s; } .rs-preloader__lights i:nth-child(9) { animation-delay: .8s; } .rs-preloader__lights i:nth-child(10) { animation-delay: .9s; } .rs-preloader__lights i:nth-child(11) { animation-delay: 1s; } .rs-preloader__lights i:nth-child(12) { animation-delay: 1.1s; } .rs-preloader__plane { position: absolute; left: 0; top: 0; width: 30px; height: 30px; color: var(--brand); offset-path: path('M8 118H150C206 118 246 100 284 68S336 22 356 16'); offset-rotate: auto; animation: rs-takeoff 2.6s cubic-bezier(.5, 0, .4, 1) infinite; } .rs-preloader__plane svg { display: block; width: 30px; height: 30px; } .rs-preloader__caption { display: flex; gap: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .rs-preloader__status { color: var(--brand); } .rs-preloader__status::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #e0a800; vertical-align: middle; animation: rs-blink 1s steps(2, start) infinite; } .rs-loaded .rs-preloader__scene, .rs-loaded .rs-preloader__caption { opacity: 0; transform: translateY(-30px); transition: opacity .5s var(--ease), transform .9s var(--ease); } @keyframes rs-takeoff { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } @keyframes rs-trail { 0% { stroke-dashoffset: 1; opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes rs-lights { 0%, 100% { opacity: .2; } 12% { opacity: 1; box-shadow: 0 0 8px 2px rgba(224, 168, 0, .5); } 30% { opacity: .2; box-shadow: none; } } @keyframes rs-blink { to { visibility: hidden; } } /* ---------- Шапка (светлая) ---------- */ .rs-header { position: fixed; inset: 0 0 auto; z-index: 1000; height: var(--hh); color: var(--ink); background: rgba(247, 249, 252, .86); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid transparent; transition: transform .7s var(--ease), border-color .5s var(--ease), background-color .5s var(--ease); } .admin-bar .rs-header { top: 32px; } @media (max-width: 782px) { .admin-bar .rs-header { top: 46px; } } .rs-home .rs-header:not(.is-scrolled):not(.is-open) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .rs-header.is-scrolled { border-color: var(--line); } .rs-header.is-hidden { transform: translateY(-100%); } .rs-header.is-open { background: var(--sky-0); transform: none; } .rs-header__inner { height: 100%; display: flex; align-items: center; gap: 32px; } .rs .rs-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); flex: none; } .rs-brand__mark { display: block; width: 48px; height: auto; transition: transform var(--t) var(--ease); } .rs .rs-brand:hover .rs-brand__mark { transform: rotate(-4deg); } .rs-brand__text { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; } .rs-brand__name { font-weight: 600; font-size: 20px; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; } .rs-brand__sub { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .rs-nav { margin-inline: auto; } .rs .rs-nav__list { display: flex; gap: 34px; margin: 0; padding: 0; list-style: none; } .rs .rs-nav__list a { position: relative; display: block; padding: 8px 0; font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; } .rs .rs-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform var(--t) var(--ease); } .rs .rs-nav__list a:hover::after, .rs .rs-nav__list .current-menu-item > a::after, .rs .rs-nav__list .current-menu-ancestor > a::after { transform: scaleX(1); transform-origin: left; } .rs-header__actions { display: flex; align-items: center; gap: 18px; } .rs .rs-header__phone { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; } .rs .rs-header__phone:hover { color: var(--brand); } .rs .rs-header__cta { height: 42px; padding: 0 18px; font-size: 14px; } .rs .rs-cart { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--ink); transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .rs .rs-cart:hover { background: var(--surface); border-color: var(--surface); color: var(--ink); } .rs-cart .rs-ico { width: 20px; height: 20px; } .rs-cart__count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: #fff; font: 600 11px/18px var(--mono); text-align: center; } .rs-cart__count.is-empty { display: none; } .rs .rs-burger { display: none; position: relative; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line-2); border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; } .rs-burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform var(--t-fast) var(--ease); } .rs-burger span:nth-child(1) { top: 16px; } .rs-burger span:nth-child(2) { top: 24px; } .rs-header.is-open .rs-burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); } .rs-header.is-open .rs-burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); } .rs-drawer { position: fixed; left: 0; right: 0; top: var(--hh); bottom: 0; background: var(--sky-0); padding: 16px 0 32px; overflow-y: auto; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .8s var(--ease), visibility 0s linear .8s; } .rs-header.is-open .rs-drawer { clip-path: inset(0); visibility: visible; transition: clip-path .8s var(--ease), visibility 0s; } .rs .rs-drawer__list { list-style: none; margin: 0; padding: 0; } .rs .rs-drawer__list li { border-bottom: 1px solid var(--line); } .rs .rs-drawer__list a { display: block; padding: 18px 0; font-size: 30px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); text-decoration: none; } .rs-drawer__foot { display: grid; gap: 8px; margin-top: 28px; } .rs .rs-drawer__foot a { font-family: var(--mono); font-size: 15px; color: var(--brand); text-decoration: none; } body.rs:not(.rs-home) #page { padding-top: var(--hh); } /* ---------- Каркас главной: небо темнеет к низу ---------- */ .rs-home #content > .ast-container, .rs-home .site-content > .ast-container { max-width: none; padding: 0; display: block; } .rs-home #content { padding: 0; } .rs-main { overflow: clip; } .rs-section { padding: clamp(80px, 11vw, 150px) 0 0; } .rs-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 60px); } .rs-head--row { grid-template-columns: 1fr auto; align-items: end; gap: 24px; } .rs-head--row > div:first-child { display: grid; gap: 18px; } .rs-head--inline { grid-template-columns: minmax(160px, 1fr) 2fr; align-items: center; margin-bottom: 36px; } .rs-head__text { margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; color: var(--ink); letter-spacing: -.01em; max-width: 640px; } .rs-hero, .rs-partners { background: var(--sky-0); } .rs-directions { background: linear-gradient(180deg, var(--sky-0), var(--sky-1)); } .rs-departures { background: linear-gradient(180deg, var(--sky-1), var(--sky-2)); padding-bottom: clamp(40px, 5vw, 64px); } .rs-about { background: linear-gradient(180deg, var(--sky-2), var(--sky-3)); padding-bottom: clamp(40px, 5vw, 64px); } .rs-request { background: linear-gradient(180deg, var(--sky-3) 0%, var(--dusk-1) 48%, var(--dusk-2) 100%); padding-bottom: clamp(80px, 10vw, 140px); } /* ---------- Первый экран: утреннее небо ---------- */ .rs-hero { position: relative; isolation: isolate; padding-top: calc(var(--hh) + clamp(48px, 8vw, 120px)); overflow: hidden; } .rs-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(900px 520px at 85% 0%, #fff 0%, rgba(255, 255, 255, 0) 70%), radial-gradient(700px 500px at 0% 100%, rgba(100, 133, 194, .12), transparent 70%); } .rs-sky { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } .rs-sky__route { fill: none; stroke: rgba(48, 64, 142, .14); stroke-width: 1.4; stroke-dasharray: 2 9; } .rs-sky__trail { fill: none; stroke: var(--sky); stroke-width: 2; stroke-linecap: round; opacity: .55; } .rs-sky__plane { color: var(--brand); fill: currentColor; } .rs-hero__inner { display: grid; justify-items: start; gap: 30px; } .rs-hero__eyebrow { margin: 0; } .rs .rs-hero__title { margin: 0; max-width: 14em; font-weight: 500; font-size: clamp(38px, 6.4vw, 96px); line-height: .98; letter-spacing: -.045em; color: var(--ink); } .rs-hero__lead { margin: 0; max-width: 640px; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; color: var(--ink-2); } /* ряд аэропортовых указателей */ .rs-signs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; padding: 5px; border-radius: 12px; background: rgba(255, 255, 255, .72); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 24px 50px -34px rgba(16, 22, 47, .45); } .rs-signs__here, .rs .rs-signs__cell { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 18px; border-radius: 8px; font: 500 15px/1 var(--font); white-space: nowrap; } .rs-signs__here { background: var(--ink); color: #fff; font-family: var(--mono); font-weight: 600; letter-spacing: .1em; } .rs .rs-signs__cell { background: transparent; color: var(--ink); text-decoration: none; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .rs-signs__cell i { font-style: normal; font-size: 16px; color: var(--muted); transition: transform var(--t) var(--ease); } .rs-signs__cell b { margin-left: 4px; padding: 3px 7px; border-radius: 2px; background: var(--ink); color: #fff; font: 600 12px/1 var(--mono); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .rs .rs-signs__cell:hover { background: var(--ink); color: #fff; } .rs .rs-signs__cell:hover i { color: #fff; } .rs .rs-signs__cell:hover b { background: #fff; color: var(--ink); } .rs-signs__cell:hover i { transform: translateY(3px); } .rs-signs__cell--out:hover i { transform: translate(3px, -3px); } .rs-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(56px, 8vw, 110px) 0 0; padding: 0; list-style: none; } .rs-strip li { display: grid; gap: 4px; padding: 22px 20px 0 0; border-top: 1px solid var(--line-2); } .rs-strip li + li { padding-left: 20px; border-left: 1px solid var(--line); } .rs-strip b { font-weight: 500; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.05; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; } .rs-strip li > span { font-size: 14px; color: var(--muted); } /* ---------- Партнёры ---------- */ .rs-partners { padding-top: clamp(72px, 9vw, 120px); } .rs-marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .rs-marquee__track { display: flex; width: max-content; animation: rs-marquee 70s linear infinite; } .rs-marquee:hover .rs-marquee__track { animation-play-state: paused; } .rs-marquee__item { flex: none; width: clamp(180px, 17vw, 250px); height: clamp(96px, 9vw, 128px); display: grid; place-items: center; padding: 22px 34px; border-right: 1px solid var(--line); } .rs-marquee__item img { max-width: 100%; max-height: 54px; width: auto; height: auto; object-fit: contain; filter: grayscale(1) brightness(1.06) contrast(1.25); opacity: .6; mix-blend-mode: multiply; transition: filter var(--t) var(--ease), opacity var(--t) var(--ease); } .rs-marquee__item:hover img { filter: grayscale(0) brightness(1) contrast(1); opacity: 1; } @keyframes rs-marquee { to { transform: translateX(-50%); } } /* ---------- Направления: выходы ---------- */ .rs-directions__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 64px); align-items: start; } .rs-directions__media { position: sticky; top: calc(var(--hh) + 24px); aspect-ratio: 1 / 1.08; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); } .rs-directions__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1s var(--ease), transform 1.6s var(--ease); } .rs-directions__media img.is-active { opacity: 1; transform: none; } .rs-directions__gate { position: absolute; left: 16px; top: 16px; display: inline-flex; height: 46px; border-radius: 4px; overflow: hidden; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .5); } .rs-directions__gate span { display: grid; place-items: center; padding: 0 12px; background: rgba(255, 255, 255, .92); color: var(--ink); font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; } .rs-directions__gate b { display: grid; place-items: center; min-width: 46px; background: var(--ink); color: #fff; font: 600 22px/1 var(--mono); } .rs-directions__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); } .rs-directions__list li { border-bottom: 1px solid var(--line-2); } .rs .rs-direction { display: grid; grid-template-columns: 56px 1fr 44px; gap: 20px; align-items: start; padding: clamp(26px, 3vw, 40px) 0; color: var(--ink); text-decoration: none; } .rs-direction__num { display: grid; place-items: center; width: 40px; height: 40px; margin-top: 2px; border-radius: 3px; background: transparent; border: 1.5px solid var(--line-2); color: var(--muted); font: 600 18px/1 var(--mono); transition: background-color var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); } .rs-direction__body { display: grid; gap: 10px; } .rs-direction__title { font-weight: 500; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.03em; transition: color var(--t) var(--ease); } .rs-direction:not(.is-active) .rs-direction__title { color: rgba(16, 22, 47, .36); } .rs-direction__text { color: var(--muted); font-size: 16px; line-height: 1.5; max-width: 480px; } .rs-direction__thumb { display: none; } .rs-direction__go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink); transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t) var(--ease); } .rs .rs-direction:hover { color: var(--ink); } .rs-direction.is-active .rs-direction__num { background: var(--ink); border-color: var(--ink); color: #fff; } .rs-direction:hover .rs-direction__go { background: var(--ink); border-color: var(--ink); color: #fff; transform: rotate(45deg); } /* ---------- Табло и монитор у выхода ---------- */ .rs-clock { display: grid; justify-items: end; gap: 10px; } .rs-terminal { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; } .rs-board { border-radius: 16px; background: var(--panel); border: 1px solid rgba(255, 255, 255, .06); overflow: hidden; box-shadow: 0 30px 60px -36px rgba(16, 22, 47, .55); } .rs-board__head, .rs-board__row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 76px; align-items: center; gap: 18px; padding: 0 20px; } .rs-board__head { height: 42px; border-bottom: 1px solid var(--dark-line); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-3); } .rs-board__head span:last-child, .rs-board__count { text-align: right; } .rs .rs-board__row { position: relative; min-height: 58px; padding-block: 8px; border-bottom: 1px solid rgba(255, 255, 255, .06); color: var(--flap-ink); text-decoration: none; transition: background-color .35s var(--ease), color .35s var(--ease); } .rs .rs-board__row:last-child { border-bottom: 0; } .rs-board__row::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; background: var(--sign); transform: scaleY(0); transition: transform .4s var(--ease); } .rs-board__row.is-active::before { transform: none; } .rs-board__flight { display: flex; align-items: center; gap: 12px; } .rs-board__thumb { flex: none; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; background: var(--flap); } .rs-board__thumb img { width: 100%; height: 100%; object-fit: cover; } .rs-board__code { font-size: 15px; } .rs-board__name { font-family: var(--mono); font-size: 14.5px; font-weight: 500; letter-spacing: .03em; line-height: 1.35; } .rs-board__count { font-size: 15px; } .rs-board__count .rs-t { color: var(--sign); } .rs .rs-board__row:hover { background: var(--sign); color: var(--sign-ink); } .rs-board__row:hover .rs-t { background: var(--sign-ink); color: var(--sign); } .rs-board__row:hover::before { background: var(--sign-ink); } .rs-monitor { position: sticky; top: calc(var(--hh) + 24px); padding: 12px; border-radius: 22px; background: linear-gradient(180deg, #1b2244, #0b1029); box-shadow: 0 30px 60px -30px rgba(16, 22, 47, .6), inset 0 1px 0 rgba(255, 255, 255, .08); } .rs-monitor__screen { display: grid; gap: 16px; padding: 16px; border-radius: 12px; background: var(--panel); border: 1px solid rgba(255, 255, 255, .06); color: var(--on-dark); } .rs-monitor__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .rs-monitor__status { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #7ee2a8; } .rs-monitor__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: rs-pulse 1.6s var(--ease-io) infinite; } @keyframes rs-pulse { 50% { opacity: .35; } } .rs-monitor__bar .rs-tiles { font-size: 18px; } .rs-monitor__img { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--flap); } .rs-monitor__img img { width: 100%; height: 100%; object-fit: cover; transition: opacity .45s var(--ease), transform 1.2s var(--ease); } .rs-monitor.is-switching .rs-monitor__img img { opacity: 0; transform: scale(1.04); } .rs-monitor__info { display: grid; gap: 6px; min-height: 66px; } .rs-monitor__info b { font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; color: #fff; transition: opacity .3s var(--ease); } .rs-monitor__info .rs-label { color: var(--on-dark-3); } .rs-monitor.is-switching .rs-monitor__info b { opacity: 0; } .rs-monitor .rs-btn { width: 100%; } .rs-monitor .rs-btn--sign::before { background: #fff; } .rs-monitor .rs-btn--sign:hover { color: var(--sign-ink); } .rs-departures__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; flex-wrap: wrap; } /* ---------- О компании ---------- */ .rs-about__top { display: grid; grid-template-columns: minmax(160px, 1fr) 3fr; gap: 24px; align-items: start; } .rs .rs-about__statement { margin: 0; font-size: clamp(24px, 3vw, 44px); line-height: 1.18; letter-spacing: -.03em; font-weight: 400; color: var(--ink); text-wrap: pretty; } .rs-principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: clamp(48px, 6vw, 88px) 0 44px; padding: 0; list-style: none; } .rs-principles li { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line-2); } .rs-principles b { font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: var(--ink); } .rs-principles li > span:last-child { font-size: 15px; line-height: 1.55; } /* ---------- Посадочный талон (сумерки) ---------- */ .rs-pass { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px rgba(16, 22, 47, .06), 0 40px 80px -40px rgba(10, 14, 40, .7); } .rs-pass__main { padding: clamp(24px, 3.4vw, 44px); display: grid; gap: clamp(24px, 3vw, 36px); } .rs-pass__top { display: flex; align-items: center; gap: 14px; } .rs-pass__top img { width: 40px; height: auto; } .rs-pass__route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; } .rs-pass__route > div { display: grid; gap: 4px; } .rs-pass__route b { font-weight: 600; font-size: clamp(44px, 6vw, 84px); line-height: .95; letter-spacing: -.04em; color: var(--ink); } .rs-pass__route > div > span:last-child { font-size: 14px; color: var(--muted); } .rs-pass__to { text-align: right; justify-items: end; } .rs-pass__path { position: relative; height: 24px; } .rs-pass__path::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed var(--line-2); } .rs-pass__path svg { position: absolute; top: 0; left: 0; width: 24px; height: 24px; color: var(--brand); background: var(--surface); padding: 0 2px; transition: left 2.2s var(--ease-io) .4s; } .rs-pass.is-in .rs-pass__path svg { left: calc(100% - 24px); } .rs-pass__fields { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 22px; border-top: 1px solid var(--line); } .rs-pass__fields > div { display: grid; gap: 6px; } .rs-pass__fields dt { margin: 0; } .rs-pass__fields dd { margin: 0; font-weight: 500; color: var(--ink); font-size: 16px; } .rs .rs-pass__fields a { color: var(--ink); text-decoration: none; } .rs .rs-pass__fields a:hover { color: var(--brand); } .rs-pass__stub { position: relative; display: grid; align-content: space-between; gap: 22px; padding: clamp(24px, 3vw, 36px); border-left: 2px dashed var(--line-2); } .rs-pass__stub::before, .rs-pass__stub::after { content: ""; position: absolute; left: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--dusk-1); } .rs-pass__stub::before { top: -14px; } .rs-pass__stub::after { bottom: -14px; background: var(--dusk-2); } .rs-pass__stub > div { display: grid; gap: 4px; } .rs-pass__stub b { font-family: var(--mono); font-weight: 600; font-size: 28px; color: var(--ink); letter-spacing: .02em; } .rs-pass__stub .rs-btn { width: 100%; } .rs-pass__barcode { display: block; height: 54px; opacity: .85; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px, var(--ink) 9px 12px, transparent 12px 13px, var(--ink) 13px 14px, transparent 14px 17px); } /* ---------- Подвал: вечерний перрон ---------- */ .rs-footer { position: relative; background: linear-gradient(180deg, var(--dusk-2), var(--dusk-4)); color: var(--on-dark-2); font-size: 15px; padding-top: clamp(64px, 8vw, 110px); } .rs-runway { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-around; padding: 0 2vw; pointer-events: none; } .rs-runway i { width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--sign); opacity: .25; } .rs-runway.is-lit i { animation: rs-runway 3s linear infinite; animation-delay: calc(var(--n) * 90ms); } @keyframes rs-runway { 0%, 100% { opacity: .25; box-shadow: none; } 8% { opacity: 1; box-shadow: 0 0 12px 3px rgba(255, 209, 0, .55); } 20% { opacity: .25; box-shadow: none; } } .rs-footer .rs-label { color: var(--on-dark-3); display: block; margin-bottom: 18px; } .rs-footer__top { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding-bottom: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--dark-line); } .rs-footer__logo img { display: block; width: clamp(72px, 7vw, 96px); height: auto; transition: transform var(--t) var(--ease); } .rs-footer__logo:hover img { transform: rotate(-4deg); } .rs .rs-footer__claim { margin: 0; max-width: 820px; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.2; letter-spacing: -.03em; color: #fff; } .rs-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr 1fr; gap: 32px; padding: clamp(40px, 5vw, 64px) 0; } .rs .rs-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .rs .rs-footer a { color: var(--on-dark-2); text-decoration: none; } .rs .rs-footer a:hover { color: #fff; } .rs .rs-footer__big { font-family: var(--mono); color: #fff !important; font-size: 16px; } .rs-footer p { margin: 0; line-height: 1.6; } .rs-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 0; border-top: 1px solid var(--dark-line); font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--on-dark-3); } .rs .rs-footer__credits { padding: 0 0 26px; font-size: 12px; line-height: 1.5; color: var(--on-dark-3); } .rs .rs-footer__credits a { color: var(--on-dark-3); text-decoration: underline; text-underline-offset: 2px; } /* на внутренних страницах подвал без сумеречного перехода */ .rs a[href^="tel:"] { white-space: nowrap; } /* ========================================================= Анимации появления ========================================================= */ .rs-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } .rs-w > span { display: inline-block; will-change: transform; } .rs-js [data-rs-split] .rs-w > span { transform: translate3d(0, 105%, 0); transition: transform var(--t-slow) var(--ease); transition-delay: calc(var(--w, 0) * var(--ws, 45ms) + var(--d, 0ms)); } .rs-js [data-rs-split].is-in .rs-w > span { transform: none; } .rs-js .rs-reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); transition-delay: var(--d, 0ms); } .rs-js .rs-reveal.is-in { opacity: 1; transform: none; } .rs-js .rs-reveal-img { clip-path: inset(12% 0 0 0 round var(--radius-lg)); opacity: 0; transition: clip-path 1.4s var(--ease), opacity 1s var(--ease); } .rs-js .rs-reveal-img.is-in { clip-path: inset(0 0 0 0 round var(--radius-lg)); opacity: 1; } .rs-js .rs-intro { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 110ms + 250ms); } .rs-js.rs-loaded .rs-intro { opacity: 1; transform: none; } .rs-js .rs-reveal-img.is-settled { clip-path: none; transition: none; } .rs-js .rs-sky__trail { opacity: 0; transition: opacity 1s var(--ease) .6s; } .rs-js.rs-loaded .rs-sky__trail { opacity: .55; } @media (prefers-reduced-motion: reduce) { .rs *, .rs *::before, .rs *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } .rs-marquee__track { animation: none !important; } } /* ========================================================= Адаптив ========================================================= */ @media (max-width: 1180px) { .rs-header__phone { display: none; } .rs .rs-nav__list { gap: 24px; } .rs-terminal { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } .rs-board__head, .rs-board__row { grid-template-columns: 150px minmax(0, 1fr) 64px; } .rs-footer__grid { grid-template-columns: 1fr 1fr; } .rs-pass { grid-template-columns: minmax(0, 1fr) 280px; } .rs-pass__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { :root { --hh: 68px; } .rs-nav, .rs .rs-header__cta { display: none; } .rs .rs-burger { display: block; } .rs-header__actions { margin-left: auto; gap: 10px; } .rs-strip { grid-template-columns: repeat(2, 1fr); } .rs-strip li:nth-child(3) { padding-left: 0; border-left: 0; } .rs-strip li:nth-child(n+3) { margin-top: 24px; } .rs-head--inline, .rs-about__top { grid-template-columns: 1fr; gap: 16px; } .rs-directions__grid { grid-template-columns: 1fr; } .rs-directions__media { display: none; } .rs .rs-direction { grid-template-columns: 1fr 44px; gap: 16px 20px; } .rs-direction__num { display: none; } .rs-direction:not(.is-active) .rs-direction__title { color: var(--ink); } .rs-direction__thumb { position: relative; display: block; grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; } .rs-direction__thumb img { width: 100%; height: 100%; object-fit: cover; } .rs-terminal { grid-template-columns: 1fr; } .rs-monitor { display: none; } .rs-principles { grid-template-columns: repeat(2, 1fr); row-gap: 36px; } .rs-pass { grid-template-columns: 1fr; } .rs-pass__stub { border-left: 0; border-top: 2px dashed var(--line-2); grid-template-columns: auto 1fr; align-items: center; } .rs-pass__stub::before, .rs-pass__stub::after { top: -15px; left: auto; background: var(--dusk-2); } .rs-pass__stub::before { left: -14px; } .rs-pass__stub::after { right: -14px; bottom: auto; } .rs-pass__barcode { display: none; } } @media (max-width: 640px) { .rs-brand__mark { width: 42px; } .rs-brand__sub { display: none; } .rs-hero { padding-top: calc(var(--hh) + 40px); } .rs .rs-hero__title { font-size: clamp(34px, 10vw, 48px); letter-spacing: -.04em; } .rs-signs { display: grid; grid-template-columns: 1fr; width: 100%; } .rs-signs__here { justify-content: center; } .rs .rs-signs__cell { height: 48px; justify-content: flex-start; } .rs-signs__cell--out b { margin-left: auto; } .rs-strip li, .rs-strip li + li { padding: 18px 12px 0 0; } .rs-strip li:nth-child(even) { padding-left: 14px; } .rs-head--row { grid-template-columns: 1fr; } .rs-clock { justify-items: start; } .rs-board__head, .rs-board__row { grid-template-columns: minmax(0, 1fr) 46px; gap: 10px; padding-inline: 12px; } .rs-board__head span:first-child { display: none; } .rs-board__flight { grid-column: 1 / -1; } .rs-board__name { font-size: 12.5px; } .rs-board__count { grid-column: 2; grid-row: 2; } .rs-board__thumb { width: 34px; height: 34px; } .rs-board__code { font-size: 12px; } .rs-principles { grid-template-columns: 1fr; } .rs-pass__route { gap: 14px; } .rs-pass__fields { grid-template-columns: 1fr 1fr; } .rs-pass__fields dd { font-size: 15px; } .rs-pass__stub { grid-template-columns: 1fr; } .rs-departures__foot .rs-btn { width: 100%; } .rs-footer__top { grid-template-columns: 1fr; } .rs-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .rs-footer__grid > .rs-footer__col:first-child, .rs-footer__grid > .rs-footer__col:last-child { grid-column: 1 / -1; } } /* полоса цифр «стоит на земле»: след самолёта уходит за неё */ .rs-strip { position: relative; background: var(--sky-0); box-shadow: 0 0 0 100vmax var(--sky-0); clip-path: inset(0 -100vmax -100vmax); } /* картинки разделов на мониторе - чертежи, показываем целиком */ .rs-monitor__img { background: #233a74; } .rs-monitor__img img { object-fit: contain; } /* ========================================================= v5 · Каталог: мониторы у выходов, 4 в ряд ========================================================= */ .rs-gates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .rs .rs-gatecard { display: flex; flex-direction: column; gap: 10px; padding: 9px; border-radius: 18px; background: linear-gradient(180deg, #1c2346 0%, #0c112b 100%); box-shadow: 0 24px 48px -32px rgba(16, 22, 47, .6), inset 0 1px 0 rgba(255, 255, 255, .08); color: var(--on-dark); text-decoration: none; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); } .rs .rs-gatecard:hover { color: var(--on-dark); transform: translateY(-6px); box-shadow: 0 44px 70px -38px rgba(16, 22, 47, .75), inset 0 1px 0 rgba(255, 255, 255, .1); } .rs-gatecard__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 5px 0; } .rs-gatecard__status { display: inline-flex; align-items: center; gap: 7px; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-3); } .rs-gatecard__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7ee2a8; box-shadow: 0 0 8px rgba(126, 226, 168, .8); animation: rs-pulse 1.8s var(--ease-io) infinite; } @keyframes rs-pulse { 50% { opacity: .35; } } .rs-gatecard__bar .rs-tiles { font-size: 12.5px; } .rs-gatecard__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #233a74; } .rs-gatecard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .8s var(--ease); } .rs-gatecard:hover .rs-gatecard__img img { transform: scale(1.05); filter: brightness(.42) saturate(.8); } .rs-gatecard__count { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .9s var(--ease); pointer-events: none; } .rs-gatecard__count .rs-tiles { font-size: 40px; } .rs-gatecard__count > span:last-child { font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .86); } .rs-gatecard:hover .rs-gatecard__count { opacity: 1; transform: none; } .rs-gatecard__name { padding: 2px 6px 8px; min-height: 2.7em; font-weight: 500; font-size: 16.5px; line-height: 1.3; letter-spacing: -.01em; color: #fff; } /* на тач-устройствах наведения нет - показываем количество сразу */ @media (hover: none) { .rs-gatecard__count { inset: auto 8px 8px auto; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(12, 17, 43, .82); opacity: 1; transform: none; } .rs-gatecard__count .rs-tiles { font-size: 14px; } .rs-gatecard__count > span:last-child { font-size: 10px; } } @media (max-width: 1180px) { .rs-gates { gap: 14px; } .rs-gatecard__name { font-size: 15px; } } @media (max-width: 960px) { .rs-gates { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 420px) { .rs-gates { gap: 10px; } .rs .rs-gatecard { padding: 6px; border-radius: 14px; } .rs-gatecard__name { font-size: 13.5px; padding: 0 4px 6px; } .rs-gatecard__bar .rs-tiles { font-size: 10.5px; } .rs-gatecard__status { font-size: 0; gap: 0; } } @media (max-width: 640px) { .rs-brand__name { font-size: 17px; } } @media (max-width: 360px) { .rs-brand__name { font-size: 15px; } } /* ========================================================= v6 · Внутренние страницы: каталог, товар, контакты, о нас ========================================================= */ /* каркас: наши страницы без контейнеров и сайдбаров Astra */ .rs-full #content > .ast-container, .rs-full .site-content > .ast-container { max-width: none; padding: 0; display: block; } .rs-full #content { padding: 0; } .rs-full #primary, .rs-full #secondary { display: none; } body.rs.rs-full:not(.rs-home) #page { padding-top: 0; } .rs-home .rs-header:not(.is-scrolled):not(.is-open), .rs-full .rs-header:not(.is-scrolled):not(.is-open) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } /* день → вечер: страница светлеет сверху и темнеет к посадочному талону */ .rs-page { background: linear-gradient(180deg, var(--sky-0) 0, var(--sky-0) 600px, var(--sky-1) 55%, var(--sky-2) 100%); } .rs-page > .rs-request { background: linear-gradient(180deg, rgba(200, 209, 227, 0) 0%, var(--sky-3) 22%, var(--dusk-1) 58%, var(--dusk-2) 100%); } .rs-section--tight { padding-top: clamp(32px, 4vw, 56px); } .rs-section--flush > .rs-partners { padding-top: 0; background: transparent; } /* первый экран внутренних страниц */ .rs-phero { position: relative; padding-top: calc(var(--hh) + clamp(28px, 4vw, 56px)); } .rs-phero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(900px 480px at 88% 0%, #fff 0%, rgba(255, 255, 255, 0) 70%); } .rs-phero > * { position: relative; z-index: 1; } .rs-phero__head { display: grid; justify-items: start; gap: 22px; } .rs .rs-phero__title { margin: 0; max-width: 16em; font-weight: 500; font-size: clamp(36px, 5.4vw, 80px); line-height: 1; letter-spacing: -.045em; color: var(--ink); } .rs .rs-phero__title--md { font-size: clamp(32px, 4.4vw, 64px); } .rs-phero__lead { margin: 0; max-width: 680px; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--ink-2); } /* маршрут вместо хлебных крошек */ .rs-route { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-bottom: clamp(28px, 4vw, 48px); font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .rs .rs-route a { color: var(--ink-2); text-decoration: none; } .rs .rs-route a:hover { color: var(--brand); } .rs-route__home { padding: 5px 8px; border-radius: 4px; background: var(--ink); color: #fff !important; font-weight: 600; letter-spacing: .1em; } .rs-route__sep { position: relative; width: 34px; height: 12px; } .rs-route__sep::before { content: ""; position: absolute; left: 0; right: 6px; top: 50%; border-top: 1px dashed var(--line-2); } .rs-route__sep i { position: absolute; right: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-top: 1px solid var(--muted); border-right: 1px solid var(--muted); transform: rotate(45deg); } .rs-route [aria-current] { color: var(--ink); max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* шапка раздела каталога: текст + монитор раздела */ .rs-cathead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: end; } .rs-cathead--term { grid-template-columns: minmax(0, 1.5fr) minmax(260px, .7fr); } .rs-cathead__monitor { display: grid; gap: 10px; padding: 9px; border-radius: 18px; background: linear-gradient(180deg, #1c2346 0%, #0c112b 100%); box-shadow: 0 30px 60px -34px rgba(16, 22, 47, .6), inset 0 1px 0 rgba(255, 255, 255, .08); } .rs-cathead__monitor .rs-gatecard__img img { object-fit: cover; } /* поиск */ .rs-search { display: flex; align-items: center; gap: 10px; width: min(620px, 100%); margin-top: 6px; padding: 6px 6px 6px 18px; border-radius: 12px; background: rgba(255, 255, 255, .8); border: 1px solid var(--line); box-shadow: 0 20px 40px -34px rgba(16, 22, 47, .5); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .rs-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(48, 64, 142, .1); } .rs-search .rs-ico { color: var(--muted); } .rs .rs-search input[type="search"] { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; outline: 0; font: 400 16px var(--font); color: var(--ink); } .rs .rs-search .rs-btn { height: 44px; } /* фильтр-разделы */ .rs-chips-wrap { margin-top: clamp(28px, 3.5vw, 44px); } .rs-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px max(var(--gutter), calc((100vw - var(--wrap)) / 2)) 6px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%); } .rs-chips::-webkit-scrollbar { display: none; } .rs .rs-chip { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .6); color: var(--ink); font: 500 14px/1 var(--font); text-decoration: none; white-space: nowrap; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .rs-chip i { font: 500 11px/1 var(--mono); font-style: normal; color: var(--muted); } .rs .rs-chip:hover { border-color: var(--ink); color: var(--ink); } .rs .rs-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; } .rs-chip.is-active i { color: rgba(255, 255, 255, .6); } /* сетка товаров */ .rs-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .rs-pcard { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: 0 1px 2px rgba(16, 22, 47, .04); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); } .rs-pcard:hover { transform: translateY(-5px); box-shadow: 0 30px 56px -36px rgba(16, 22, 47, .45); } .rs .rs-pcard__img { display: block; aspect-ratio: 1; overflow: hidden; background: var(--surface-2); } .rs-pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .rs-pcard:hover .rs-pcard__img img { transform: scale(1.05); } .rs-pcard__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 18px 18px; } .rs-pcard__body .rs-label { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rs .rs-pcard__title { flex: 1; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16.5px; line-height: 1.35; letter-spacing: -.01em; } .rs .rs-pcard__title:hover { color: var(--brand); } .rs-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .rs-pcard__price { font-size: 14px; color: var(--ink-2); } .rs .rs-pcard__add { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--sky-1); color: var(--ink); transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t) var(--ease); } .rs .rs-pcard__add:hover { background: var(--ink); color: #fff; } .rs-pcard__add .rs-ico { width: 18px; height: 18px; } .rs-pcard__add .rs-ico--check { display: none; } .rs .rs-pcard__add.loading { opacity: .5; pointer-events: none; } .rs .rs-pcard__add.added { background: var(--brand); color: #fff; } .rs-pcard__add.added .rs-ico--plus { display: none; } .rs-pcard__add.added .rs-ico--check { display: block; } .rs-pcard .added_to_cart { display: none !important; } /* постраничная навигация */ .rs-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 40px; } .rs .rs-pager .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--ink); font: 500 14px/1 var(--mono); text-decoration: none; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .rs .rs-pager .page-numbers:hover { background: var(--surface); } .rs .rs-pager .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; } .rs .rs-pager .dots { border-color: transparent; } .rs-empty { display: grid; justify-items: center; gap: 22px; padding: clamp(40px, 6vw, 80px) 20px; text-align: center; border-radius: 22px; background: rgba(255, 255, 255, .6); border: 1px dashed var(--line-2); } .rs-empty p { margin: 0; max-width: 520px; font-size: 17px; } /* уведомления WooCommerce */ .rs .rs-notices:empty { display: none; } .rs .rs-notices .woocommerce-message, .rs .rs-notices .woocommerce-info, .rs .rs-notices .woocommerce-error { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 24px; padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 15px; list-style: none; } .rs .rs-notices .woocommerce-message::before, .rs .rs-notices .woocommerce-info::before, .rs .rs-notices .woocommerce-error::before { display: none; } .rs .rs-notices .woocommerce-message .button { order: 2; margin: 0; padding: 0 16px; height: 38px; line-height: 38px; border-radius: 6px; background: var(--ink); color: #fff; font: 600 14px/38px var(--font); } /* ---------- Карточка товара ---------- */ .rs-product-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: start; } .rs-gallery { position: sticky; top: calc(var(--hh) + 20px); display: grid; gap: 12px; } .rs-gallery__main { aspect-ratio: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); box-shadow: 0 30px 60px -44px rgba(16, 22, 47, .5); } .rs-gallery__main img { width: 100%; height: 100%; object-fit: cover; transition: opacity .45s var(--ease); } .rs-gallery__main img.is-fading { opacity: 0; } .rs-gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .rs .rs-gallery__thumb { flex: none; width: 76px; height: 76px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: var(--surface); cursor: pointer; opacity: .65; transition: opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .rs-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .rs .rs-gallery__thumb:hover, .rs .rs-gallery__thumb.is-active { opacity: 1; border-color: var(--ink); } /* посадочный талон позиции */ .rs-ticket { position: relative; display: grid; gap: 22px; padding: clamp(24px, 3vw, 40px); border-radius: 22px; background: var(--surface); box-shadow: 0 1px 2px rgba(16, 22, 47, .05), 0 40px 80px -50px rgba(16, 22, 47, .55); } .rs-ticket::before, .rs-ticket::after { content: ""; position: absolute; top: calc(100% - 118px); width: 26px; height: 26px; border-radius: 50%; background: var(--sky-0); } .rs-ticket::before { left: -13px; } .rs-ticket::after { right: -13px; } .rs-ticket__top { display: flex; align-items: center; gap: 12px; } .rs-ticket__top img { width: 36px; height: auto; } .rs .rs-ticket__term { display: inline-flex; align-items: center; gap: 12px; justify-self: start; color: var(--ink-2); text-decoration: none; font-size: 15px; } .rs-ticket__term .rs-tiles { font-size: 14px; } .rs .rs-ticket__term:hover { color: var(--brand); } .rs .rs-ticket__title { margin: 0; font-weight: 500; font-size: clamp(28px, 3vw, 44px); line-height: 1.08; letter-spacing: -.035em; color: var(--ink); } .rs-ticket__short { color: var(--ink-2); font-size: 16px; } .rs-ticket__short p { margin: 0 0 .6em; } .rs-ticket__fields { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; padding: 20px 0; border-block: 1px solid var(--line); } .rs-ticket__fields > div { display: grid; gap: 6px; } .rs-ticket__fields dt { margin: 0; } .rs-ticket__fields dd { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; font-size: 16px; } .rs-dot-status { width: 7px; height: 7px; border-radius: 50%; background: #3fbf7f; box-shadow: 0 0 0 4px rgba(63, 191, 127, .14); } .rs-ticket__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; } .rs-ticket__actions form.cart { display: flex; gap: 10px; margin: 0 !important; flex: 1 1 260px; } .rs-ticket__actions .quantity { flex: none; } .rs .rs-ticket__actions .quantity .qty { width: 72px; height: 58px; padding: 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); color: var(--ink); font: 500 16px var(--mono); text-align: center; } .rs .rs-ticket__actions .single_add_to_cart_button { flex: 1; height: 58px; padding: 0 24px !important; border: 0; border-radius: 12px; background: var(--ink) !important; color: #fff !important; font: 600 16px/1 var(--font) !important; letter-spacing: 0; text-transform: none; transition: background-color var(--t-fast) var(--ease); } .rs .rs-ticket__actions .single_add_to_cart_button:hover { background: var(--brand) !important; } .rs .rs-btn--line { background: transparent; color: var(--ink); border-color: var(--line-2); } .rs .rs-btn--line::before { background: var(--ink); } .rs .rs-btn--line:hover { color: #fff; border-color: var(--ink); } .rs-ticket__actions .rs-btn--line { flex: 1 1 200px; border-radius: 12px; } .rs-ticket__actions .added_to_cart, .rs-ticket__actions .wc-forward { display: none !important; } .rs-ticket__note { margin: 0; font-size: 14px; color: var(--muted); } .rs-ticket .rs-pass__barcode { margin-top: 6px; height: 44px; border-top: 2px dashed var(--line-2); padding-top: 22px; background-clip: content-box; } .rs-desc { display: grid; grid-template-columns: minmax(160px, 1fr) 3fr; gap: 24px; align-items: start; } .rs-desc__body { max-width: 760px; font-size: 17px; line-height: 1.7; color: var(--ink-2); } .rs-desc__body p { margin: 0 0 1em; } /* ---------- Контакты ---------- */ .rs-desk { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 14px; } .rs-desk__item { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 18px; background: rgba(255, 255, 255, .75); border: 1px solid var(--line); color: var(--ink); text-decoration: none; } .rs-desk__item p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); } .rs .rs-desk__item--main { justify-content: space-between; background: var(--ink); border-color: var(--ink); color: #fff; transition: background-color var(--t) var(--ease), transform var(--t) var(--ease); } .rs .rs-desk__item--main:hover { background: var(--brand); color: #fff; transform: translateY(-4px); } .rs-desk__item--main .rs-label { color: rgba(255, 255, 255, .6); } .rs-desk__phone { font: 500 clamp(22px, 2.2vw, 30px)/1.1 var(--mono); letter-spacing: -.01em; white-space: nowrap; } .rs-desk__hint { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, .75); } .rs .rs-desk__mail { color: var(--ink); font-size: 16px; text-decoration: none; } .rs .rs-desk__mail:hover { color: var(--brand); } .rs-desk__mono { font-family: var(--mono); font-size: 13.5px !important; letter-spacing: .02em; color: var(--ink-2) !important; } .rs-desk .rs-link { margin-top: auto; align-self: flex-start; font-size: 14px; } /* форма-посадочный талон */ .rs-pass--form .rs-pass__main { gap: 26px; } .rs-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; } .rs-field { display: grid; gap: 8px; } .rs-field--wide { grid-column: 1 / -1; } .rs .rs-field input, .rs .rs-field textarea { width: 100%; padding: 12px 0; border: 0; border-bottom: 1.5px solid var(--line-2); border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); font: 500 18px/1.4 var(--font); outline: 0; transition: border-color var(--t-fast) var(--ease); } .rs .rs-field textarea { resize: vertical; min-height: 84px; } .rs .rs-field input::placeholder, .rs .rs-field textarea::placeholder { color: rgba(16, 22, 47, .3); font-weight: 400; } .rs .rs-field input:focus, .rs .rs-field textarea:focus { border-bottom-color: var(--brand); } .rs-field--trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .rs-form__note { margin: 0; font-size: 13px; color: var(--muted); } .rs-form__error { margin: 0; padding: 12px 14px; border-radius: 10px; background: #fdecec; color: #8a1f1f; font-size: 15px; } .rs-form__done { display: grid; justify-items: start; gap: 12px; padding: 10px 0 6px; } .rs-form__done-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: #fff; } .rs-form__done-mark svg { width: 28px; height: 28px; } .rs-form__done b { font-weight: 500; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.03em; color: var(--ink); } .rs-form__done p { margin: 0; font-size: 17px; } .rs .rs-pass__stub button.rs-btn { width: 100%; } /* ---------- О нас ---------- */ .rs-page--about .rs-strip { background: transparent; box-shadow: none; clip-path: none; } .rs-story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; } .rs-story__photo { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); } .rs-story__photo img { position: absolute; left: 0; top: -5%; width: 100%; height: 110%; object-fit: cover; object-position: 50% 30%; } .rs-story__photo figcaption { position: absolute; left: 16px; bottom: 16px; display: grid; gap: 4px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .92); color: var(--ink); } .rs-story__photo figcaption b { font-weight: 500; font-size: 16px; } .rs-story__text { display: grid; justify-items: start; gap: 26px; } .rs-clients { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .rs-clients li { padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .6); font-size: 14.5px; color: var(--ink); } .rs-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } .rs-services li { display: grid; align-content: start; gap: 12px; padding: 24px; border-radius: 18px; background: rgba(255, 255, 255, .72); border: 1px solid var(--line); } .rs-services .rs-direction__num { margin: 0 0 6px; background: var(--ink); border-color: var(--ink); color: #fff; } .rs-services b { font-weight: 500; font-size: 22px; letter-spacing: -.02em; color: var(--ink); } .rs-services li > span:last-child { font-size: 15.5px; line-height: 1.55; } .rs-principles--flush { margin-top: 0; } /* ---------- Адаптив внутренних страниц ---------- */ @media (max-width: 1180px) { .rs-products { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rs-desk { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .rs-cathead--term { grid-template-columns: minmax(0, 1fr); } .rs-cathead__monitor { max-width: 420px; } .rs-product-layout { grid-template-columns: 1fr; } .rs-gallery { position: static; } .rs-desc, .rs-story__grid { grid-template-columns: 1fr; } .rs-services { grid-template-columns: 1fr; } .rs-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } @media (max-width: 640px) { .rs-route { gap: 4px 8px; font-size: 11px; } .rs-route__sep { width: 18px; } .rs-route [aria-current] { max-width: 100%; } .rs .rs-phero__title { font-size: clamp(32px, 9.4vw, 44px); } .rs-search { padding-left: 14px; } .rs-search .rs-btn span { font-size: 14px; } .rs-pcard__body { padding: 12px 12px 14px; gap: 8px; } .rs .rs-pcard__title { font-size: 14.5px; } .rs-pcard__price { font-size: 12.5px; } .rs .rs-pcard__add { width: 34px; height: 34px; } .rs-desk { grid-template-columns: 1fr; } .rs-form__grid { grid-template-columns: 1fr; } .rs-ticket__fields { grid-template-columns: 1fr 1fr; } .rs-ticket__actions form.cart { flex-basis: 100%; } .rs-ticket::before, .rs-ticket::after { display: none; } } /* появление крупной картинки первого экрана внутренних страниц */ .rs-js .rs-intro-media { clip-path: inset(8% 0 0 0 round var(--radius-lg)); opacity: 0; transition: clip-path 1.5s var(--ease) .45s, opacity 1s var(--ease) .45s; } .rs-js.rs-loaded .rs-intro-media { clip-path: inset(0 0 0 0 round var(--radius-lg)); opacity: 1; } .rs-js .rs-intro-media.is-settled { clip-path: none; transition: none; } /* кнопки-