/* Start:/local/templates/main/css/swiper-bundle.min.css?179077884814611*/ /** * Swiper 12.1.4 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2026 Vladimir Kharlampidi * * Released under the MIT License * * Released on: April 29, 2026 */ :root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode{.swiper-wrapper:after{content:"";left:0;pointer-events:none;position:absolute;top:0}}.swiper-virtual.swiper-css-mode.swiper-horizontal{.swiper-wrapper:after{height:1px;width:var(--swiper-virtual-size)}}.swiper-virtual.swiper-css-mode.swiper-vertical{.swiper-wrapper:after{height:var(--swiper-virtual-size);width:1px}}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;position:absolute;width:var(--swiper-navigation-size);z-index:10;&.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}&.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled &{display:none!important}::slotted(svg),svg{height:100%;object-fit:contain;transform-origin:center;width:100%;fill:currentColor;pointer-events:none}}.swiper-button-lock{display:none}.swiper-button-next,.swiper-button-prev{margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}.swiper-horizontal{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{margin-left:0;margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev,&~.swiper-button-next,.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(0deg)}}}.swiper-vertical{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{left:var(--swiper-navigation-top-offset,50%);margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0;right:auto}.swiper-button-prev,~.swiper-button-prev{bottom:auto;top:var(--swiper-navigation-sides-offset,4px);.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset,4px);top:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(90deg)}}}.swiper-pagination{position:absolute;text-align:center;transform:translateZ(0);transition:opacity .3s;z-index:10;&.swiper-pagination-hidden{opacity:0}&.swiper-pagination-disabled,.swiper-pagination-disabled>&{display:none!important}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);left:0;top:var(--swiper-pagination-top,auto);width:100%}.swiper-pagination-bullets-dynamic{font-size:0;overflow:hidden;.swiper-pagination-bullet{position:relative;transform:scale(.33)}.swiper-pagination-bullet-active,.swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullet-active-next-next{transform:scale(.33)}}.swiper-pagination-bullet{background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:var(--swiper-pagination-bullet-border-radius,50%);display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--swiper-pagination-bullet-inactive-opacity,.2);width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));button&{appearance:none;border:none;box-shadow:none;margin:0;padding:0}.swiper-pagination-clickable &{cursor:pointer}&:only-child{display:none!important}}.swiper-pagination-bullet-active{background:var(--swiper-pagination-color,var(--swiper-theme-color));opacity:var(--swiper-pagination-bullet-opacity,1)}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{left:var(--swiper-pagination-left,auto);right:var(--swiper-pagination-right,8px);top:50%;transform:translate3d(0,-50%,0);.swiper-pagination-bullet{display:block;margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0}&.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px;.swiper-pagination-bullet{display:inline-block;transition:transform .2s,top .2s}}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets{.swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}&.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap;.swiper-pagination-bullet{transition:transform .2s,left .2s}}}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:transform .2s,right .2s}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,#00000040);position:absolute;.swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));height:100%;left:0;position:absolute;top:0;transform:scale(0);transform-origin:left top;width:100%}.swiper-rtl & .swiper-pagination-progressbar-fill{transform-origin:right top}&.swiper-pagination-horizontal,&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-horizontal>&,.swiper-vertical>&.swiper-pagination-progressbar-opposite{height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0;width:100%}&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,&.swiper-pagination-vertical,.swiper-horizontal>&.swiper-pagination-progressbar-opposite,.swiper-vertical>&{height:100%;left:0;top:0;width:var(--swiper-pagination-progressbar-size,4px)}}.swiper-pagination-lock{display:none}.swiper-scrollbar{background:var(--swiper-scrollbar-bg-color,#0000001a);border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;&.swiper-scrollbar-disabled,.swiper-scrollbar-disabled>&{display:none!important}&.swiper-scrollbar-horizontal,.swiper-horizontal>&{bottom:var(--swiper-scrollbar-bottom,4px);height:var(--swiper-scrollbar-size,4px);left:var(--swiper-scrollbar-sides-offset,1%);position:absolute;top:var(--swiper-scrollbar-top,auto);width:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);z-index:50}&.swiper-scrollbar-vertical,.swiper-vertical>&{height:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);left:var(--swiper-scrollbar-left,auto);position:absolute;right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);width:var(--swiper-scrollbar-size,4px);z-index:50}}.swiper-scrollbar-drag{background:var(--swiper-scrollbar-drag-bg-color,#00000080);border-radius:var(--swiper-scrollbar-border-radius,10px);height:100%;left:0;position:relative;top:0;width:100%}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%;>canvas,>img,>svg{max-height:100%;max-width:100%;object-fit:contain}}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{left:0;opacity:0;pointer-events:none;position:absolute;top:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-direction:column;flex-wrap:wrap}.swiper-fade{&.swiper-free-mode{.swiper-slide{transition-timing-function:ease-out}}.swiper-slide{pointer-events:none;transition-property:opacity;.swiper-slide{pointer-events:none}}.swiper-slide-active{pointer-events:auto;& .swiper-slide-active{pointer-events:auto}}}.swiper.swiper-cube{overflow:visible}.swiper-cube{.swiper-slide{backface-visibility:hidden;height:100%;pointer-events:none;transform-origin:0 0;visibility:hidden;width:100%;z-index:1;.swiper-slide{pointer-events:none}}&.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}.swiper-slide-active,.swiper-slide-next,.swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube-shadow{bottom:0;height:100%;left:0;opacity:.6;position:absolute;width:100%;z-index:0;&:before{background:#000;bottom:0;content:"";filter:blur(50px);left:0;position:absolute;right:0;top:0}}}.swiper-cube{.swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}}.swiper-cube{.swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-slide-shadow-cube.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper.swiper-flip{overflow:visible}.swiper-flip{.swiper-slide{backface-visibility:hidden;pointer-events:none;z-index:1;.swiper-slide{pointer-events:none}}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}}.swiper-flip{.swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-slide-shadow-flip.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper-creative{.swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}}.swiper.swiper-cards{overflow:visible}.swiper-cards{.swiper-slide{backface-visibility:hidden;overflow:hidden;transform-origin:center bottom}} /* End */ /* Start:/local/templates/main/css/main.css?1790778848200125*/ @font-face { font-family: 'JetBrains_Mono'; src: url('/local/templates/main/css/../assets/fonts/JetBrains_Mono/JetBrainsMono-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains_Mono'; src: url('/local/templates/main/css/../assets/fonts/JetBrains_Mono/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Onest'; src: url('/local/templates/main/css/../assets/fonts/Onest/Onest-VariableFont_wght.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Tenor_Sans'; src: url('/local/templates/main/css/../assets/fonts/Tenor_Sans/TenorSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; hanging-punctuation: first last; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { min-height: 100dvh; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } p { text-wrap: pretty; } table { border-collapse: collapse; border-spacing: 0; } fieldset { border: none; } address { font-style: normal; } :focus-visible { outline: 2px solid #0b3d91; outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } ::selection { background: #0b3d91; color: #fff; } body { font-family: 'Onest'; font-size: 16px; font-weight: 400; color: #0e2233; background-color: #eff4f7; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; line-height: 1.2; color: #1a1a1a; } h1, .h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); line-height: 1.1; } h2, .h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem); } h3, .h3 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); } h4, .h4 { font-size: 1.5rem; } .text-lg { font-size: 1.25rem; } .text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; } .text-secondary { color: #5c5c5c; } .text-muted { color: #9a9a9a; } .text-center { text-align: center; } .link { color: #0b3d91; text-decoration: underline; text-underline-offset: 0.15em; transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); } .link:hover { color: #082e6e; } .page { display: flex; flex-direction: column; min-height: 100dvh; } .page__main { flex: 1 0 auto; } .container { width: 100%; max-width: 1920px; margin-inline: auto; padding-inline: 20px; } .container--fluid { max-width: none; } .page:has(.page__secondary) .footer { border-radius: 0; } .page:has(.page__secondary) .events__bg { display: none; } @media (min-width: 768px) { .container { padding-inline: 48px; } } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .hidden { display: none !important; } .no-scroll { overflow: hidden; } @media (max-width: 767.98px) { .hide-mobile { display: none !important; } } @media (min-width: 768px) { .hide-desktop { display: none !important; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.75rem 1.5rem; font-weight: 500; font-size: 1rem; line-height: 1; border-radius: 8px; border: 1px solid transparent; white-space: nowrap; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1); } .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.5; pointer-events: none; } .btn--primary { background-color: #0b3d91; color: #fff; } .btn--primary:hover { background-color: #082e6e; } .btn--accent { background-color: #e63946; color: #fff; } .btn--accent:hover { background-color: #c92f3b; } .btn--outline { border-color: #0b3d91; color: #0b3d91; } .btn--outline:hover { background-color: #0b3d91; color: #fff; } .btn--ghost { color: #1a1a1a; } .btn--ghost:hover { background-color: #f5f6f8; } .btn--block { width: 100%; } .btn__icon { width: 1.25em; height: 1.25em; flex-shrink: 0; } .header { position: absolute; top: 0; right: 0; left: 0; z-index: 100; padding: 10px 20px 0; } .page--fixed-header .header { position: fixed; } .page--fixed-header .header__inner { transition: background 0.3s ease; } .page--fixed-header .header.is-scrolled .header__inner { background: rgba(10, 22, 45, 0.55); } .header__container { position: relative; width: 100%; max-width: 1824px; margin-inline: auto; } .header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; color: #fff; border-radius: 18px; border: 1px solid rgba(155, 232, 216, 0.18); background: rgba(10, 22, 45, 0.16); backdrop-filter: blur(3.5px); } .header__logo { display: inline-flex; flex-shrink: 0; align-items: center; } .header__logo img { display: block; width: auto; height: 32px; filter: drop-shadow(0 0 6px rgba(255, 209, 26, 0.65)); } .header__nav { display: none; } .header__list { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px clamp(16px, 2vw, 26px); } .header__link { display: inline-block; color: #fff; font-size: 0.875rem; font-weight: 500; white-space: nowrap; transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); } .header__link:hover, .header__link:focus-visible, .header__link.is-active { color: #9be8d8; text-shadow: 0 0 14px rgba(155, 232, 216, 0.6); } .header__actions { display: flex; flex-shrink: 0; align-items: center; gap: 0.75rem; } .header__search-toggle { display: inline-flex; flex-shrink: 0; justify-content: center; align-items: center; width: 16px; height: 16px; color: #9be8d8; cursor: pointer; transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); } .header__search-toggle:hover, .header__search-toggle:focus-visible { color: #fff; } .header__search { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; visibility: hidden; transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), margin-top 300ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 300ms; } .header__search.is-open { grid-template-rows: 1fr; margin-top: 10px; opacity: 1; visibility: visible; transition-delay: 0s; } .header__search-form { position: relative; display: flex; align-items: center; gap: 8px; min-height: 0; padding: 8px 8px 8px 16px; border-radius: 999px; border: 0.779px solid rgba(155, 232, 216, 0.35); background: rgba(10, 22, 45, 0.16); backdrop-filter: blur(3.5px); } .header__search-icon { flex-shrink: 0; width: 15px; height: 15px; color: #9be8d8; } .header__search-input { flex: 1 1 auto; width: 100%; min-width: 0; border: none; background: none; color: #fff; font-size: 12px; } .header__search-input::placeholder { color: rgba(242, 247, 250, 0.62); } .header__search-input:focus { outline: none; } .header__search-input::-webkit-search-cancel-button { display: none; } .header__search-btn { flex-shrink: 0; padding: 8px 18px; border-radius: 9999px; background: rgba(155, 232, 216, 0.18); color: #9be8d8; font-size: 12.5px; font-weight: 600; line-height: 16px; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1); } .header__search-btn:hover, .header__search-btn:focus-visible { background: rgba(155, 232, 216, 0.3); } .lang { position: relative; } .lang__toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid rgba(155, 232, 216, 0.35); background: rgba(155, 232, 216, 0.14); border-radius: 9999px; color: #9be8d8; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.356px; cursor: pointer; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1); } .lang__toggle:hover, .lang__toggle:focus-visible { border-color: #9be8d8; background-color: rgb(255 255 255 / 0.16); } .lang__icon, .lang__arrow { flex-shrink: 0; color: #9be8d8; } .lang__arrow { transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); } .lang.is-open .lang__arrow { transform: rotate(180deg); } .lang__current { text-transform: uppercase; } .lang__list { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 200; display: flex; flex-direction: column; min-width: 150px; background: rgba(10, 22, 45, 0.92); backdrop-filter: blur(16px); border: 1px solid rgba(155, 232, 216, 0.25); border-radius: 14px; padding: 6px; box-shadow: rgba(0, 0, 0, 0.45) 0px 18px 40px; opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1), visibility 250ms cubic-bezier(0.4, 0, 0.2, 1); } .lang.is-open .lang__list { opacity: 1; transform: translateY(0); visibility: visible; } .lang__option { width: 100%; padding: 9px 12px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; text-align: left; cursor: pointer; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1); } .lang__option:hover, .lang__option:focus-visible { background-color: rgb(255 255 255 / 0.12); } .lang__option.is-active { color: #9be8d8; font-weight: 500; } .burger { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 20px; height: 14px; color: #fff; cursor: pointer; } .burger__box { position: relative; display: block; width: 100%; height: 100%; } .burger__line { position: absolute; left: 0; display: block; width: 100%; height: 1.5px; border-radius: 1px; background-color: currentColor; transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), top 250ms cubic-bezier(0.4, 0, 0.2, 1); } .burger__line:nth-child(1) { top: 0; } .burger__line:nth-child(2) { top: 7px; } .burger__line:nth-child(3) { top: 14px; } .burger.is-active .burger__line:nth-child(1) { top: 7px; transform: rotate(45deg); } .burger.is-active .burger__line:nth-child(2) { opacity: 0; } .burger.is-active .burger__line:nth-child(3) { top: 7px; transform: rotate(-45deg); } .header__dropdown { position: absolute; width: 100%; overflow: hidden; margin-top: 4px; opacity: 0; transform: translateY(-12px); visibility: hidden; transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), transform 250ms cubic-bezier(0.4, 0, 0.2, 1), visibility 250ms cubic-bezier(0.4, 0, 0.2, 1); } .header__dropdown.is-open { opacity: 1; transform: translateY(0); visibility: visible; } .header__dropdown-inner { max-height: calc(100dvh - 80px - 5rem); overflow-y: auto; padding: 9px 17px; border-radius: 22px; border: 1px solid rgba(155, 232, 216, 0.18); background: rgba(10, 22, 45, 0.5); backdrop-filter: blur(9px); } .header__dropdown-list { display: grid; grid-template-columns: 1fr; gap: 0 2rem; } .header__dropdown-item { border-bottom: 1px solid rgba(155, 232, 216, 0.12); } .header__dropdown-item:last-child { border-bottom: 0; } .header__dropdown-link { display: block; padding: 12px 4px; color: rgba(242, 247, 250, 0.9); font-size: 13px; font-weight: 400; line-height: normal; transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); } .header__dropdown-link:hover, .header__dropdown-link:focus-visible { color: #9be8d8; text-shadow: 0 0 14px rgba(155, 232, 216, 0.6); } @media (min-width: 768px) { .header { padding: 22px 26px 0; } .header__inner { padding: 13px 20px; border-radius: 26px; background: rgba(10, 22, 45, 0.22); backdrop-filter: blur(7px); } .header__logo img { height: 48px; } .header__dropdown { margin-top: 12px; } .header__search.is-open { margin-top: 12px; } .header__search-form { padding: 11px 25px; } .header__dropdown-inner { padding: 11px 25px; border-radius: 26px; } .header__dropdown-list { grid-template-columns: 1fr 1fr; } .header__dropdown-item:nth-last-child(2):nth-child(odd) { border-bottom: 0; } .header__dropdown-link { font-size: 14px; } .header__search-btn { padding: 13px 26px; font-size: 15px; font-weight: 600; } .header__search-input { font-size: 15px; } .header__search-toggle { width: 18px; height: 18px; } } @media (min-width: 1024px) { .header { padding: 24px 48px 0; } .header__inner { gap: 2rem; padding: 15px 29px; border-radius: 32px; background: rgba(10, 22, 45, 0.16); } .header__logo img { height: 52px; } .lang__toggle { gap: 8px; padding: 6px 12px; font-size: 12px; } .header__search-form { padding: 16px 25px; } .header__search-btn { font-size: 16px; } .header__search-input { font-size: 16px; } .header__search-toggle { width: 20px; height: 20px; } .header__actions { gap: 16px; } } @media (min-width: 1370px) { .burger { display: none; } .header__dropdown { display: none; } .header__nav { display: block; flex: 1 1 auto; } } .hero { position: relative; display: flex; align-items: flex-start; padding: 132px 0 110px; overflow: hidden; isolation: isolate; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient( 180deg, rgba(6, 13, 31, 0.6) 0%, rgba(6, 13, 31, 0) 30%, rgba(6, 13, 31, 0) 65%, rgba(6, 13, 31, 0.85) 100% ); } .hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__container { display: flex; flex-direction: column; gap: 16px; width: 100%; text-align: center; } .hero__tagline, .hero__title, .hero__subtitle, .hero__search { animation: 1.2s ease 0s 1 normal backwards running hero-fade-in; } @keyframes hero-fade-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .hero__tagline { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; font-family: 'JetBrains_Mono'; color: rgba(155, 232, 216, 0.9); font-size: 11px; font-weight: 400; line-height: 14px; letter-spacing: 2.64px; text-transform: uppercase; } .hero__tagline-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #7ef0b4; animation: blink 1.6s ease-in-out infinite; } @keyframes blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(120, 240, 180, 0.7); } 50% { opacity: 0.5; box-shadow: 0 0 0 6px rgba(120, 240, 180, 0); } } .hero__title { position: relative; color: #fff; font-family: 'Tenor_Sans'; font-size: 28px; font-weight: 400; line-height: 1.15; background: linear-gradient(180deg, #fff 0%, #e4f3ef 55%, #b7ece0 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero__title-shadow { position: absolute; inset: 0; z-index: -1; color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 1px 3px rgba(6, 13, 31, 0.54), 0 12px 34px rgba(6, 13, 31, 0.5), 0 2px 10px rgba(6, 13, 31, 0.44); } .hero__subtitle { margin-bottom: 6px; color: rgba(223, 233, 242, 0.85); font-size: 14px; font-weight: 300; line-height: 19px; text-wrap: balance; } .hero__search { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; max-width: 594px; margin-inline: auto; padding: 8px 8px 8px 16px; border-radius: 999px; border: 1px solid rgba(155, 232, 216, 0.35); background: rgba(10, 22, 45, 0.4); backdrop-filter: blur(3.5px); transition: box-shadow 0.3s ease-in-out; } .hero__search:hover { box-shadow: 0 0 46px 0 rgba(155, 232, 216, 0.38); } .hero__search-icon { flex-shrink: 0; width: 15px; height: 15px; color: rgba(223, 233, 242, 0.65); } .hero__search-input { flex: 1 1 auto; min-width: 0; border: none; background: none; color: #fff; font-size: 13px; } .hero__search-input::placeholder { color: #9aa7b4; } .hero__search-input:focus { outline: none; } .hero__search-input::-webkit-search-cancel-button { display: none; } .hero__search-btn { flex-shrink: 0; padding: 10px 18px; border-radius: 9999px; background: rgba(155, 232, 216, 0.18); color: #9be8d8; font-size: 12.5px; font-weight: 600; line-height: 16px; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1); } .hero__search-btn:hover, .hero__search-btn:focus-visible { background: rgba(155, 232, 216, 0.3); } .hero__arrow { display: none; } @media (min-width: 768px) { .hero { align-items: center; padding: 165px 0 128px; } .hero__img { object-position: top; } .hero__tagline { margin-bottom: 0; font-size: 14px; letter-spacing: 3.84px; } .hero__title { margin-bottom: 6px; font-size: 50px; } .hero__subtitle { margin-bottom: 9px; color: rgba(251, 251, 251, 0.92); font-size: 18px; line-height: 29.45px; } .hero__search { padding: 9px 9px 9px 25px; background: rgba(10, 22, 45, 0.16); backdrop-filter: blur(4.5px); } .hero__search-icon { width: 18px; height: 18px; color: #9be8d8; } .hero__search-input { font-size: 16px; } .hero__search-btn { padding: 12px 26px; font-size: 16px; line-height: normal; } } @media (min-width: 1024px) { .hero { position: relative; display: flex; align-items: center; justify-content: center; padding: 0; height: calc(100svh + 40px); } .hero__container { gap: 24px; } .hero__img { object-position: center; } .hero__tagline { font-size: 16px; letter-spacing: 7px; } .hero__title { margin-bottom: 2px; font-size: 84px; letter-spacing: 0.84px; } .hero__subtitle { margin-bottom: 10px; } .hero__arrow { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; color: rgba(246, 250, 252, 0.5); text-align: center; font-size: 24px; font-weight: 400; line-height: 1; letter-spacing: 0.959px; text-decoration: none; cursor: pointer; animation: hero-arrow-blink 1.6s ease-in-out infinite; transition: color 0.2s ease; } .hero__arrow:hover, .hero__arrow:focus-visible { color: rgba(246, 250, 252, 0.9); } .hero__arrow:focus-visible { outline: 2px solid rgba(246, 250, 252, 0.9); outline-offset: 6px; border-radius: 4px; } } @keyframes hero-arrow-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { .hero__container { animation: none; } .hero__arrow { animation: none; transition: none; } } .footer { padding-inline: 20px; background: #060d1f; } .footer__container { width: 100%; max-width: 1824px; margin-inline: auto; padding-block: 14px 24px; color: #fff; } .footer__inner { display: grid; grid-template-columns: 1fr; gap: 28px; } .footer__brand { display: flex; align-items: center; gap: 12px; } .footer__brand-logo { flex-shrink: 0; width: auto; height: 45px; } .footer__brand-text { max-width: 285px; color: rgba(242, 247, 250, 0.9); font-family: 'Tenor_Sans'; font-size: 12px; font-weight: 400; line-height: 17.308px; } .footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; } .footer__title { margin-bottom: 12px; white-space: nowrap; color: rgba(155, 232, 216, 0.7); font-family: 'JetBrains_Mono'; font-size: 12px; font-weight: 300; line-height: 14px; letter-spacing: 3px; text-transform: uppercase; } .footer__list { display: grid; gap: 10px; } .footer__link { display: inline-block; color: rgba(223, 233, 242, 0.75); font-size: 12px; font-weight: 300; line-height: 18px; transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); } .footer__link:hover, .footer__link:focus-visible { color: #9be8d8; text-shadow: 0 0 14px rgba(155, 232, 216, 0.6); } .footer__partners { display: grid; gap: 14px; justify-items: start; } .footer__partner { display: flex; align-items: center; gap: 12px; transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1); } .footer__partner-logo { flex-shrink: 0; width: 40px; height: 40px; object-fit: contain; } .footer__partner-text { color: rgba(223, 233, 242, 0.55); font-size: 11.5px; font-weight: 300; line-height: 16px; } .footer__partner:hover .footer__partner-text, .footer__partner:focus-visible .footer__partner-text { text-decoration: underline; } .footer__socials { display: flex; align-items: center; gap: 12px; } .footer__socials-list { display: flex; align-items: center; gap: 10px; } .footer__social { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(223, 233, 242, 0.14); background: rgba(255, 255, 255, 0.05); transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1); } .footer__social:hover, .footer__social:focus-visible { border-color: #fff; } .footer__social img { width: auto; max-width: 15px; height: 15px; } .footer__socials-text { text-wrap: balance; color: rgba(223, 233, 242, 0.7); font-size: 14px; line-height: normal; } .footer__bottom { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(223, 233, 242, 0.08); } .footer__copyright, .footer__legal { color: rgba(223, 233, 242, 0.4); font-size: 11px; font-weight: 300; line-height: 16px; } @media (min-width: 768px) { .footer { padding-inline: 48px; border-radius: 40px 40px 0 0; } .footer__container { padding-block: 44px 30px; } .footer__inner { gap: 26px; } .footer__brand-logo { height: 60px; } .footer__brand-text { font-size: 16px; line-height: 1.4; } .footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 36px; } .footer__list { gap: 8px; } .footer__title { margin-bottom: 10px; font-size: 14px; font-weight: 400; } .footer__link { font-size: 14px; } .footer__partners { gap: 12px; } .footer__partner-logo { width: 46px; height: 46px; } .footer__partner-text { max-width: 410px; font-size: 14px; line-height: 1.24; } .footer__socials-text { font-size: 14px; } .footer__bottom { margin-top: 22px; padding-top: 16px; } .footer__copyright, .footer__legal { font-size: 13px; line-height: 20.8px; } } @media (min-width: 1370px) { .footer { border-radius: 0; } .footer__container { padding-block: 40px 36px; } .footer__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(24px, 2.5vw, 40px); align-items: start; } .footer__brand { gap: 14px; } .footer__brand-text { font-size: 15px; line-height: 1.35; } .footer__nav { grid-template-columns: repeat(3, max-content); gap: 0 clamp(24px, 3vw, 40px); } .footer__title { margin-bottom: 16px; } .footer__list { gap: 10px; } .footer__partners { gap: 16px; } .footer__partner-logo { width: 52px; height: 52px; } .footer__partner-text { max-width: unset; } .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; margin-top: 44px; padding-top: 20px; } .footer__copyright, .footer__legal { font-size: 12px; } } @media (min-width: 1400px) { .footer__inner { grid-template-columns: 1.5fr 3fr 1.5fr; gap: 40px; } .footer__nav { grid-template-columns: repeat(3, 1fr); gap: 0 40px; } } #after-hero { position: relative; z-index: 1; margin-top: -30px; overflow: hidden; border-radius: 28px 28px 0 0; background: #eff4f7; } .seasons { position: relative; padding: 28px 0; } .seasons__bg { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 0; pointer-events: none; } .seasons__decor { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 200px; z-index: 0; pointer-events: none; background: linear-gradient(rgba(239, 244, 247, 0) 0%, rgb(239, 244, 247) 100%); } .seasons .section__header { position: relative; z-index: 1; } @media (min-width: 768px) { #after-hero { margin-top: -40px; border-radius: 44px 44px 0 0; } .seasons { padding: 58px 0 40px; } } @media (min-width: 1024px) { .seasons { padding: 110px 0 42px; } } .section__header { display: flex; flex-direction: column; gap: 6px; } .section__title { color: #0e2233; font-family: 'Tenor_Sans'; font-size: 24px; font-weight: 400; line-height: 30px; } .section__subtitle { color: #6e86a6; font-family: 'JetBrains_Mono'; font-size: 11px; font-weight: 400; line-height: 14px; letter-spacing: 2.86px; text-transform: uppercase; } .section__link { display: flex; align-items: center; gap: 6px; color: #1e6e68; font-size: 14px; font-weight: 600; line-height: normal; transition: color 0.3s ease-in-out; } .section__link:hover { color: #0e2233; } @media (min-width: 768px) { .section__header { gap: 4px; } .section__title { font-size: 34px; line-height: normal; } .section__subtitle { font-size: 10px; line-height: normal; letter-spacing: 2.2px; } } @media (min-width: 1024px) { .section__header { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; } .section__title { font-size: 38px; } .section__subtitle { font-size: 14px; line-height: normal; letter-spacing: 3.08px; } .section__link { font-size: 16px; } } .seasons__items { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; } .seasons__item { --season: #2e86c7; --season-rgb: 168, 209, 240; --season-soft: rgba(46, 134, 199, 0.5); --season-bg: linear-gradient(90deg, transparent, rgba(155, 232, 216, 0.5), transparent); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 2fr 1fr; gap: 18px 10px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 12px; box-shadow: 0 6px 18px 0 rgba(46, 111, 180, 0.05); backdrop-filter: blur(3px); animation: season-glow 4.5s ease-in-out infinite var(--season-glow-delay, 0s); } @keyframes season-glow { 0%, 100% { border-color: rgba(var(--season-rgb), 0.25); box-shadow: 0 6px 18px 0 rgba(46, 111, 180, 0.05), 0 0 16px rgba(var(--season-rgb), 0.07); } 50% { border-color: rgba(var(--season-rgb), 0.5); box-shadow: 0 6px 18px 0 rgba(46, 111, 180, 0.05), 0 0 22px rgba(var(--season-rgb), 0.18); } } .seasons__item-bg { display: none; background: var(--season-bg); position: absolute; top: 0px; bottom: 0px; left: 0px; width: 30%; animation: 5s ease-in-out 0s infinite normal none running season-sheen; pointer-events: none; z-index: 0; } @keyframes season-sheen { 0% { transform: translateX(-140%) skewX(-18deg); } 60%, 100% { transform: translateX(260%) skewX(-18deg); } } .seasons__item.current .seasons__item-bg { display: block; } @media (prefers-reduced-motion: reduce) { .seasons__item, .seasons__item.current, .seasons__item.current .seasons__item-bg, .seasons__item-line__progress, .events__bg { animation: none; } .seasons__item.current .seasons__item-bg { display: none; } } .seasons__item-title { display: flex; flex-direction: column; gap: 4px; } .seasons__item-title > img { width: 52px; height: 55px; object-fit: contain; } .seasons__item-title > h3 { color: currentColor; font-size: 14px; font-weight: 700; letter-spacing: 0.942px; text-transform: uppercase; } .seasons__item-title > div { display: flex; align-items: center; gap: 8px; color: currentColor; font-family: 'JetBrains_Mono'; font-size: 12px; font-weight: 500; line-height: normal; letter-spacing: 0.324px; text-transform: uppercase; } .seasons__item-status { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; color: currentColor; text-align: right; } .seasons__item-status > span { font-family: 'JetBrains_Mono'; font-size: 12px; line-height: normal; letter-spacing: 1.13px; text-transform: uppercase; } .seasons__item-status-text { font-family: 'Tenor_Sans'; font-size: 46px; font-weight: 400; line-height: 1; letter-spacing: 0.459px; } .seasons__item-status-text + p { font-size: 14px; line-height: normal; letter-spacing: 0.848px; } .seasons__item.current .seasons__item-status > span { width: 6px; height: 6px; margin-bottom: 5px; border-radius: 50%; background-color: currentColor; animation: season-dot 1.4s ease-in-out infinite; } @keyframes season-dot { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--season-rgb), 0.7); } 50% { opacity: 0.5; box-shadow: 0 0 0 6px rgba(var(--season-rgb), 0); } } .seasons__item.current .seasons__item-status > p { font-size: 22px; letter-spacing: 0.218px; } .seasons__item.siyanie { --season: #1e9e8a; --season-rgb: 56, 199, 171; --season-soft: rgba(155, 232, 216, 0.5); --season-glow-delay: 0s; color: var(--season); } .seasons__item.nochi { --season: #ed9474; --season-rgb: 237, 148, 116; --season-soft: rgba(247, 199, 181, 0.5); --season-glow-delay: 1.2s; color: var(--season); } .seasons__item.ledoxod { --season: #2e86c7; --season-rgb: 79, 166, 224; --season-soft: rgba(168, 209, 240, 0.5); --season-glow-delay: 2.4s; color: var(--season); } .seasons__item-line { --days: 0; --scale: 365; --progress: clamp(0, (var(--scale) - var(--days)) / var(--scale), 1); position: relative; display: flex; align-items: center; grid-column: 1 / -1; width: 100%; height: 8px; color: inherit; } .seasons__item-line::before { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 0; transform: translateY(-50%); border-top: 1px dashed currentColor; opacity: 0.35; } .seasons__item-line__progress { position: absolute; top: 50%; left: 0; height: 2px; width: calc(var(--progress) * 100%); transform: translateY(-50%); border-radius: 999px; background: linear-gradient( 90deg, currentColor 0%, currentColor 26%, rgba(255, 255, 255, 0.22) 50%, currentColor 74%, currentColor 100% ); background-size: 220% 100%; animation: line-shimmer 5.5s linear infinite, line-blink 1.8s ease-in-out infinite; } @keyframes line-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } } @keyframes line-blink { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.55) saturate(1.35); } } .seasons__item-line__progress::after { content: ''; position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); width: 0; height: 0; border-style: solid; border-width: 3px 0px 3px 6px; border-color: transparent transparent transparent currentColor; } .seasons__item-line__end { position: absolute; top: 50%; right: 0; width: 6px; height: 6px; transform: translate(50%, -50%); border-radius: 50%; background-color: currentColor; } .seasons__item.current .seasons__item-line { --progress: 1; } .seasons__item.current .seasons__item-line::before { content: none; } .seasons__item.current .seasons__item-line__progress::after { content: none; } @media (min-width: 768px) { .seasons__items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .seasons__item.current { grid-column: 1 / -1; } .seasons__item { padding: 25px 27px 21px 27px; border-radius: 20px; background: linear-gradient( 104deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.32) 100% ); box-shadow: 0 10px 30px 0 rgba(46, 111, 180, 0.06); backdrop-filter: blur(4px); } .seasons__item-title { gap: 6px; } .seasons__item-title > img { width: 58px; height: 62px; margin-bottom: 6px; } .seasons__item-title > h3 { letter-spacing: 1.17px; } .seasons__item-title > div { letter-spacing: 0.4px; } .seasons__item-status { gap: 6px; } .seasons__item-status > span { font-size: 10px; letter-spacing: 1.4px; } .seasons__item.current .seasons__item-status > span { width: 9px; height: 9px; margin-bottom: 3px; } .seasons__item.current .seasons__item-status > p { font-size: 26px; } .seasons__item-line__end { width: 9px; height: 9px; } .seasons__item-line__progress::after { border-width: 5px 0px 5px 11px; } } @media (min-width: 1024px) { .seasons__item { padding: 27px 31px; border-radius: 22px; background: linear-gradient( 104deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.32) 100% ); box-shadow: 0 10px 30px 0 rgba(46, 111, 180, 0.06); backdrop-filter: blur(4px); } .seasons__item-title > img { width: 88px; height: 94px; } .seasons__item-title > h3 { font-size: 18px; letter-spacing: 1.6px; } .seasons__item-title > div { font-size: 14px; line-height: normal; letter-spacing: 0.55px; } .seasons__item-status { gap: 6px; } .seasons__item-status > span { font-size: 14px; letter-spacing: 1.44px; } .seasons__item.current .seasons__item-status > span { width: 10px; height: 10px; margin-bottom: 3px; } .seasons__item.current .seasons__item-status > p { font-size: 37px; } .seasons__item-status-text { font-size: 78px; letter-spacing: 0.78px; } .seasons__item-status-text + p { font-size: 18px; letter-spacing: 1.44px; } } @media (min-width: 1200px) { .seasons__items { grid-template-columns: repeat(3, 1fr); } .seasons__item.current { grid-column: 1 / 2; } } .events { position: relative; isolation: isolate; } .events .section__link { margin-left: auto; } .events__bg { display: none; } .events__items { --events-gap: 12px; --events-edge: 20px; display: flex; align-items: stretch; gap: var(--events-gap); margin-inline: calc(-1 * var(--events-edge)); padding-inline: var(--events-edge); padding-block: 24px 76px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--events-edge); scrollbar-width: none; } .events__items::-webkit-scrollbar { display: none; } .events__item { --tilt: -1deg; flex: 0 0 252px; width: 252px; scroll-snap-align: start; display: flex; flex-direction: column; padding: 9px; border-radius: 5px; background: #f6fafc; box-shadow: 0 13.23px 29.401px 0 rgba(14, 34, 51, 0.22); rotate: var(--tilt); overflow: hidden; transition: box-shadow 0.3s ease-in-out, background 0.3s ease-in-out; } .events__item:nth-child(even) { --tilt: 1deg; } .events__image { overflow: hidden; border-radius: 3px; } .events__image img { width: 100%; aspect-ratio: 320 / 274; object-fit: cover; filter: saturate(0.85); transition: filter 0.4s ease-in-out; } .events__content { flex: 1; display: flex; flex-direction: column; gap: 4px; padding-top: 10px; } .events-date { color: #1e6e68; font-family: 'Jetbrains_Mono'; font-size: 11px; font-weight: 400; line-height: normal; letter-spacing: 1.323px; text-transform: uppercase; } .events-title { color: #0e2233; font-family: 'Tenor_Sans'; font-size: 14px; font-weight: 400; line-height: 118.129%; hyphens: auto; overflow-wrap: break-word; } .events-link { display: flex; align-items: center; gap: 6px; margin-top: auto; color: #1e6e68; font-size: 11px; font-weight: 600; line-height: normal; transition: all 0.3s ease; } .events-link:hover { color: #0e2233; } .events-link svg { transition: transform 0.5s ease; } .events__item:hover { box-shadow: 0 26px 54px 0 rgba(30, 110, 104, 0.3); animation: events-sway 2.4s cubic-bezier(0.37, 0, 0.63, 1) infinite; } .events__item:hover .events__image img { filter: saturate(1.45); } @keyframes events-sway { 0% { rotate: var(--tilt); } 15% { rotate: calc(var(--tilt) - 0.8deg); } 40% { rotate: calc(var(--tilt) + 1.6deg); } 65% { rotate: calc(var(--tilt) - 1.6deg); } 90% { rotate: calc(var(--tilt) + 1deg); } 100% { rotate: var(--tilt); } } @media (prefers-reduced-motion: reduce) { .events__item:hover { animation: none; } } .events__item:hover .events-link { font-weight: 700; } .events__item:hover .events-link svg { transform: translateX(50%); } @media (min-width: 768px) { .events__items { --events-gap: 20px; --events-edge: 48px; } .events .section__header { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; } .events__item { display: flex; flex-direction: column; padding: 12px 12px 18px; border-radius: 6px; box-shadow: 0 18px 40px 0 rgba(14, 34, 51, 0.22); } .events__content { gap: 8px; } .events-date { font-size: 10px; letter-spacing: 1.52px; } .events-title { font-size: 19px; line-height: 1.28; } .events-link { font-size: 12px; } } @media (min-width: 1024px) { .events { padding: 70px 0 0; } .events__bg { display: block; position: absolute; z-index: -1; top: 30px; left: 70%; width: 302px; height: 285px; background-image: url('/local/templates/main/css/../assets/img/events-bg.png'); background-repeat: no-repeat; background-size: contain; pointer-events: none; animation: events-bg-blink 4s ease-in-out infinite; } @keyframes events-bg-blink { 0%, 100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.94); } } .events__items { --events-gap: 24px; } .events .section__header { align-items: flex-end; } .events-date { font-size: 14px; letter-spacing: 1.8px; } .events-title { font-size: 18px; line-height: 1.25; } .events-link { font-size: 14px; } } @media (min-width: 1200px) { .events__item { flex: 1; width: auto; } } .vizits { padding-block: 0 40px; } .vizits__slider { position: relative; margin-top: 20px; overflow: hidden; border-radius: 20px; } .vizits__glass { position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.22) ); box-shadow: inset 0 0 90px rgba(255, 255, 255, 0.35); opacity: 0; pointer-events: none; } .vizits__glass.is-active { animation: vizits-glass-clear 2.2s cubic-bezier(0.33, 0, 0.15, 1) forwards; } .vizits .section__subtitle { color: #5a7484; font-family: 'Onest'; font-size: 16px; font-weight: 400; line-height: 1.25; letter-spacing: normal; text-transform: none; } @keyframes vizits-glass-clear { 0% { opacity: 1; backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2); } 100% { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } } @media (prefers-reduced-motion: reduce) { .vizits__glass.is-active { animation: none; } } .vizits__item { position: relative; isolation: isolate; display: flex; min-height: 420px; border-radius: 12px; overflow: hidden; background: #0e2233; transition: box-shadow 0.4s ease-in-out; } .vizits-image { position: absolute; inset: 0; z-index: -2; } .vizits-image img { width: 100%; height: 100%; object-fit: cover; } .vizits__item::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 180deg, rgba(14, 34, 51, 0.35) 0%, rgba(14, 34, 51, 0) 35%, rgba(14, 34, 51, 0.55) 72%, rgba(14, 34, 51, 0.88) 100% ); pointer-events: none; } .vizits-content { display: flex; flex-direction: column; gap: 10px; align-self: flex-end; width: 100%; padding: 0 20px 20px; } .vizits-content h4 { color: #f6fafc; font-family: 'Tenor_Sans'; font-size: 24px; font-weight: 400; line-height: 1.25; } .vizits-content p { max-width: 640px; color: rgba(223, 233, 242, 0.8); font-size: 12px; font-weight: 400; line-height: 1.33; } .vizits-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: #9be8d8; font-size: 12.5px; font-weight: 600; line-height: 1.28; cursor: pointer; transition: color 0.3s ease-in-out; } .vizits-link svg { width: 14px; height: 10px; } .vizits-link:hover { color: #fff; } .vizits__slider .vizits__pagination { position: absolute; z-index: 4; top: 20px; bottom: auto; left: 20px; right: auto; display: flex; gap: 7px; width: auto; } .vizits__pagination .swiper-pagination-bullet { width: 12px; height: 4px; margin: 0 !important; border-radius: 2px; background: rgba(255, 255, 255, 0.45); opacity: 1; transition: background 0.3s ease-in-out, width 0.3s ease-in-out; } .vizits__pagination .swiper-pagination-bullet-active { width: 34px; background: #9be8d8; } .vizits__nav { display: none; position: absolute; z-index: 4; top: 50%; translate: 0 -50%; width: 46px; height: 46px; padding: 0; border: none; border-radius: 50%; border: 1px solid rgba(155, 232, 216, 0.5); background: rgba(6, 13, 31, 0.18); backdrop-filter: blur(5px); color: #9be8d8; cursor: pointer; transition: all 0.3s ease-in-out; } .vizits__nav svg { margin-inline: auto; } .vizits__nav:hover { scale: 1.12; box-shadow: 0 0 50px 0 rgba(155, 232, 216, 0.5); backdrop-filter: blur(5px); } .vizits__nav.swiper-button-disabled { opacity: 0.4; cursor: default; } .vizits__nav--prev { left: 16px; } .vizits__nav--next { right: 16px; } @media (min-width: 768px) { .vizits__slider { margin-top: 24px; border-radius: 22px; } .vizits__item { min-height: 620px; } .vizits__slider .vizits__pagination { top: 32px; left: auto; right: 14px; } .vizits-content { gap: 8px; padding: 0 10px 20px 28px; } .vizits-content h4 { font-size: 22px; } .vizits-content p { font-size: 16px; } .vizits-link { margin-top: 6px; font-size: 13px; } } @media (min-width: 1024px) { .vizits { position: relative; padding-block: 0 70px; } .vizits::before, .vizits::after { content: ''; position: absolute; z-index: -1; top: 0; width: 50%; height: 100%; pointer-events: none; } .vizits::before { left: 0; background: radial-gradient( 58% 58% at 38% 42%, rgba(124, 232, 176, 0.62) 0%, rgba(143, 224, 234, 0.48) 44%, rgba(169, 198, 255, 0.34) 66%, rgba(169, 198, 255, 0) 82% ); filter: blur(45px); transform: translateY(-25%); } .vizits::after { right: 0; background: radial-gradient( 62% 62% at 66% 34%, rgba(206, 150, 240, 0.6) 0%, rgba(169, 198, 255, 0.5) 42%, rgba(143, 224, 234, 0.34) 66%, rgba(143, 224, 234, 0) 82% ); filter: blur(42.5px); transform: translateY(-5%); } .vizits .section__header { flex-direction: column; align-items: flex-start; gap: 6px; } .vizits .section__subtitle { font-size: 18px; line-height: normal; } .vizits__item { min-height: 880px; } .vizits__slider { border-radius: 26px; } .vizits__slider .vizits__pagination { top: 45px; right: 30px; } .vizits__nav { display: flex; align-items: center; justify-content: center; } .vizits-content { padding: 0 32px 58px; } .vizits-content h4 { font-size: 28px; } .vizits-content p { font-size: 18px; } .vizits-link { font-size: 16px; border-bottom: 1px solid currentColor; align-self: flex-start; } } .video-section { padding-block: 20px 40px; } .video-section__player { position: relative; margin-top: 20px; aspect-ratio: 350 / 260; border-radius: 20px; overflow: hidden; background: #0e2233; } .video-section__poster { width: 100%; height: 100%; object-fit: cover; } .video-section__play { position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border: 1px solid rgba(155, 232, 216, 0.5); background: rgba(155, 232, 216, 0.12); backdrop-filter: blur(3px); border-radius: 50%; color: #9be8d8; cursor: pointer; transition: all 0.3s ease-in-out; } .video-section__play:hover { box-shadow: 0 0 50px 0 rgba(155, 232, 216, 0.5); backdrop-filter: blur(5px); transform: scale(1.05); } .video-section__play svg { width: 8px; height: 10px; } .video-section__player iframe, .video-section__player video { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .video-section__player video { object-fit: cover; } .video-section__player.is-playing .video-section__poster, .video-section__player.is-playing .video-section__play { display: none; } @media (min-width: 768px) { .video-section__player { margin-top: 24px; border-radius: 22px; aspect-ratio: 16 / 9; } .video-section__play { width: 74px; height: 74px; } .video-section__play svg { width: 12px; height: 14px; } } @media (min-width: 1024px) { .video-section { padding-block: 40px 70px; } .video-section__player { border-radius: 32px; width: 100%; height: 880px; } .video-section__play { width: 94px; height: 94px; } .video-section__play svg { width: 14px; height: 16px; } } .page__secondary .hero { height: auto; padding: 167px 0 80px; } .page__secondary .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(6, 13, 31, 0.62) 0%, rgba(6, 13, 31, 0.2) 35%, rgba(6, 13, 31, 0.38) 72%, #060d1f 100% ); } .page__secondary #after-hero > .container { padding-block: 28px 18px; } .page__secondary #after-hero > .container:has(.contacts) { padding-block: 32px 40px; } .page__secondary #after-hero:has(.contacts) { border-radius: 0; } @media (min-width: 768px) { .page__secondary .hero { padding: 167px 0 80px; } .page__secondary #after-hero > .container { padding-block: 28px 50px; } } @media (min-width: 1024px) { .page__secondary .hero { padding: 180px 0 82px; } .page__secondary #after-hero > .container { padding-block: 38px 100px; } .page__secondary #after-hero > .container:has(.sights) { padding-top: 56px; } .page__secondary #after-hero > .container:has(.contacts) { padding-block: 56px 96px; } .page__secondary #after-hero:has(.contacts) { border-radius: 44px 44px 0 0; } } .breadcrumb__list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 30px; } .breadcrumb__item { color: rgba(223, 233, 242, 0.6); text-align: center; font-family: 'JetBrains_Mono'; font-size: 9.5px; font-style: normal; font-weight: 400; line-height: 136.842%; letter-spacing: 2.64px; text-transform: uppercase; transition: color 0.3s ease; } .breadcrumb__item:hover { color: #9be8d8; } .breadcrumb__item a { color: currentColor; } .breadcrumb__item:not(:last-child) { position: relative; } .breadcrumb__item:not(:last-child)::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: -20px; background: currentColor; width: 6px; height: 1px; } @media (min-width: 768px) { .breadcrumb__item { font-size: 12px; line-height: 108.333%; letter-spacing: 2.88px; } .breadcrumb__item:not(:last-child)::after { width: 7px; } } @media (min-width: 1024px) { .breadcrumb__item { font-size: 14px; line-height: 1.14; letter-spacing: 4.48px; } .breadcrumb__item:not(:last-child)::after { right: -16px; width: 8px; } } .map__text { color: #5a7484; font-size: 14px; line-height: 157.143%; } .map { display: flex; flex-direction: column; gap: 24px; } .map__layout { display: flex; flex-direction: column; gap: 25px; } .map__details { display: flex; flex-direction: column; gap: 21px; } .map-routes { position: relative; z-index: 0; overflow: hidden; border-radius: 20px; border: 0.778px solid rgba(255, 255, 255, 0.85); background: linear-gradient( 139deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 42%, rgba(255, 255, 255, 0.6) 100% ); box-shadow: inset 0 0.778px 0 0.778px rgba(255, 255, 255, 0.92), 0 15.556px 38.889px 0 rgba(46, 120, 140, 0.14); backdrop-filter: blur(8.5px); } .map-routes::before, .map-routes::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; } .map-routes::before { top: -46.67px; left: -23.33px; width: 171px; height: 171px; background: radial-gradient( circle closest-side, rgba(56, 222, 184, 0.4) 0%, rgba(56, 222, 184, 0) 100% ); filter: blur(10px); } .map-routes::after { right: -38.89px; bottom: -62.23px; width: 187px; height: 187px; background: radial-gradient( circle closest-side, rgba(120, 150, 255, 0.34) 0%, rgba(120, 150, 255, 0) 100% ); filter: blur(11.7px); } .map-routes__head { display: flex; flex-direction: column; gap: 7.78px; padding: 20.22px 18.67px 14.78px; } .map-routes__subtitle { color: #5f8a84; font-family: 'JetBrains_Mono'; font-size: 10.889px; line-height: normal; letter-spacing: 2.396px; text-transform: uppercase; } .map-routes__title { color: #12332f; font-family: 'Tenor_Sans'; font-size: 24.889px; font-weight: 400; line-height: 1; } .map-routes__list { display: flex; flex-direction: column; gap: 7.78px; padding: 0 9.33px 17.11px; } .map-route { display: flex; align-items: center; gap: 12.44px; width: 100%; padding: 9.33px 12.44px; border-radius: 14px; text-align: left; transition: background-color 0.25s ease, box-shadow 0.25s ease; } .map-route:hover { background-color: rgba(255, 255, 255, 0.5); } .map-route:focus-visible { outline: 2px solid #1e9e8a; outline-offset: 2px; } .map-route.is-active { background-color: rgba(255, 255, 255, 0.86); box-shadow: 0 7.778px 18.667px 0 rgba(30, 110, 104, 0.14); } .map-route__num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 34.22px; height: 34.22px; border-radius: 10.11px; border: 0.778px solid #ceeee6; background: #e5f2ef; color: #3c566b; font-size: 12.444px; font-weight: 500; line-height: 1; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .map-route.is-active .map-route__num { border-color: rgba(255, 255, 255, 0.9); background: linear-gradient(150deg, #45d6b4 0%, #1e9e8a 100%); color: #fff; } .map-route__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .map-route__meta { color: #7c93a2; font-family: 'JetBrains_Mono'; font-size: 10.889px; line-height: normal; letter-spacing: 1.307px; text-transform: uppercase; } .map-route__name { color: #0e2233; font-size: 14px; line-height: 1.3; } .map-view { position: relative; order: -1; display: flex; flex-direction: column; gap: 10px; min-width: 0; container-type: inline-size; } .map-view__viewport { position: relative; overflow: hidden; aspect-ratio: 350 / 637; border-radius: 32px; background: #0b1b2b; box-shadow: 0 24px 60px 0 rgba(14, 34, 51, 0.22); container-type: size; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; } .map-view__viewport.is-dragging { cursor: grabbing; } .map-view__stage { --u: max(calc(100cqw / 507.3), calc(100cqh / 923.3)); --tx: calc(50cqw - 1173.35 * var(--u)); --ty: calc(50cqh - 915.05 * var(--u)); position: absolute; inset: 0; } .map-view__canvas { position: absolute; top: 0; left: 0; width: calc(1838.73 * var(--u)); height: calc(1377.25 * var(--u)); transform: translate3d(var(--tx), var(--ty), 0); } .map-view__viewport.is-animated .map-view__canvas { transition: transform 0.35s ease, width 0.35s ease, height 0.35s ease; } .map-view__base { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; pointer-events: none; } .map-view__item { position: absolute; top: calc(var(--y) * var(--u)); left: calc(var(--x) * var(--u)); width: calc(var(--w) * var(--u)); max-width: none; height: calc(var(--h) * var(--u)); pointer-events: none; } .map-view__layer { display: none; } .map-view__layer.is-active { display: block; } .map-view__objects { position: absolute; inset: 0; } .map-view__routes { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; overflow: visible; pointer-events: none; } .map-view__route { display: none; fill: none; stroke-width: 8.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; } .map-view__route.is-active { display: inline; } .map-view__glow { border-radius: 50%; background: #4fd0b6; filter: blur(calc(6.8 * var(--u))); } .map-view__building { filter: drop-shadow(0 calc(4 * var(--u)) calc(6 * var(--u)) #4fd0b6) drop-shadow(0 calc(4 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.25)); } .map-marker { --pin: max(25px, calc(36 * var(--u))); position: absolute; top: calc(var(--y) * var(--u)); left: calc(var(--x) * var(--u)); display: flex; align-items: center; justify-content: center; width: calc(var(--pin) * 1.4142); height: calc(var(--pin) * 1.4142); transform: translate(-50%, -100%); } .map-marker::before { content: ''; position: absolute; top: 50%; left: 50%; width: var(--pin); height: var(--pin); border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50% 50% 50% 0; background: linear-gradient(135deg, #2bc79e 0%, #1e9e8a 100%); transform: translate(-50%, -50%) rotate(-45deg); transition: filter 0.25s ease, box-shadow 0.25s ease; } .map-marker:hover::before { filter: brightness(1.08); } .map-marker:focus-visible { outline: none; } .map-marker:focus-visible::before { outline: 2px solid #fff; outline-offset: 2px; } .map-marker.is-active::before { background: #1e9e8a; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4), 0 8px 40px 0 rgba(6, 13, 31, 0.4), 0 0 60px 0 rgba(155, 232, 216, 0.18); } .map-marker__pin { position: relative; color: #f2f7fa; font-family: 'JetBrains_Mono'; font-size: 13px; font-weight: 500; line-height: 1; } .map-marker.is-active .map-marker__pin { font-weight: 700; } .map-popup { --p: max(0.504px, calc(100cqw / 1326)); --pw: min(calc(623 * var(--p)), calc(100cqw - 24px)); --tip-x: calc(var(--tx) + var(--mx) * var(--u)); --tip-y: calc(var(--ty) + var(--my) * var(--u) - max(25px, calc(36 * var(--u))) * 1.4142); --tail-h: calc(15 * var(--p)); --pl: clamp(12px, calc(var(--tip-x) - var(--pw) * 0.5), calc(100cqw - var(--pw) - 12px)); position: absolute; top: calc(var(--tip-y) - var(--tail-h)); left: var(--pl); z-index: 2; display: flex; gap: calc(18 * var(--p)); width: var(--pw); padding: calc(19 * var(--p)) calc(21 * var(--p)); border-radius: calc(22 * var(--p)); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.9), 0 calc(26 * var(--p)) calc(60 * var(--p)) 0 rgba(9, 26, 40, 0.22); transform: translateY(-100%); isolation: isolate; cursor: default; } .map-popup[hidden] { display: none; } .map-popup::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(12px); } .map-popup::after { content: ''; position: absolute; top: 100%; left: clamp(calc(24 * var(--p)), calc(var(--tip-x) - var(--pl)), calc(var(--pw) - 24 * var(--p))); width: calc(32 * var(--p)); height: var(--tail-h); background: rgba(255, 255, 255, 0.8); clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateX(-50%); } .map-popup__img { flex-shrink: 0; align-self: stretch; width: calc(277 * var(--p)); min-height: calc(205 * var(--p)); height: auto; border-radius: calc(10 * var(--p)); object-fit: cover; } .map-popup__body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; min-width: 0; } .map-popup__address { margin-bottom: calc(14 * var(--p)); color: #1e6e68; font-family: 'JetBrains_Mono'; font-size: max(10px, calc(9.5 * var(--p))); line-height: normal; } .map-popup__title { margin-bottom: calc(16 * var(--p)); color: #0e2233; font-family: 'Tenor_Sans'; font-size: calc(30 * var(--p)); font-weight: 400; line-height: 1.15; } .map-popup__text { margin-bottom: calc(26 * var(--p)); color: rgba(14, 34, 51, 0.88); font-size: max(9px, calc(15 * var(--p))); font-weight: 300; line-height: max(12.47px, calc(24.75 * var(--p))); } .map-popup__link { display: inline-flex; align-items: center; padding: calc(10 * var(--p)) calc(21 * var(--p)); border-radius: 999px; border: max(0.5px, var(--p)) solid rgba(30, 110, 104, 0.45); background: rgba(30, 110, 104, 0.08); color: #1e6e68; font-size: max(7px, calc(14 * var(--p))); font-weight: 500; line-height: normal; transition: background-color 0.25s ease; } .map-popup__link:hover, .map-popup__link:focus-visible { background: rgba(30, 110, 104, 0.16); } .map-view__controls { position: absolute; right: 49px; bottom: 119px; z-index: 3; display: flex; flex-direction: column; gap: 8px; } .map-view__control { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: #fff; box-shadow: 0 8px 10px 0 rgba(9, 26, 40, 0.18); color: #0e2233; font-size: 22px; font-weight: 500; line-height: 1; transition: background-color 0.25s ease; } .map-view__control:hover { background: #f2f7fa; } .map-view__control:focus-visible { outline: 2px solid #1e9e8a; outline-offset: 2px; } .map-view__note { color: #7c93a2; font-size: 12.5px; line-height: normal; } .map-info { --i: max(0.837px, calc(100cqw / 1326)); display: flex; flex-direction: column; gap: calc(7 * var(--i)); margin-top: 15px; padding: calc(21.78 * var(--i)) calc(22.78 * var(--i)); border-radius: calc(31.835 * var(--i)); border: calc(1.224 * var(--i)) solid rgba(255, 255, 255, 0.85); background: linear-gradient( 131deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 36%, rgba(255, 255, 255, 0.6) 100% ); box-shadow: inset 0 calc(1.224 * var(--i)) 0 0 rgba(255, 255, 255, 0.92), 0 calc(24.49 * var(--i)) calc(30.61 * var(--i)) 0 rgba(46, 120, 140, 0.36); backdrop-filter: blur(6.7px); } .map-info__item { display: grid; grid-template-columns: calc(41.86 * var(--i)) 1fr auto; align-items: center; min-height: calc(32 * var(--i)); color: #123049; } .map-info__icon { justify-self: center; width: auto; height: calc(15.4 * var(--i)); } .map-info__name { font-family: 'Tenor_Sans'; font-size: calc(16.587 * var(--i)); line-height: calc(21.466 * var(--i)); } .map-info__dist { font-family: 'JetBrains_Mono'; font-size: calc(13.66 * var(--i)); line-height: calc(17.563 * var(--i)); text-align: right; white-space: nowrap; } .map-card { display: flex; flex-direction: column; gap: 15.2px; padding: 26px 20px; border-radius: 22px; background: #fff; box-shadow: 0 20px 25px 0 rgba(9, 26, 40, 0.06); } .map-card__title { color: #0e2233; font-family: 'Tenor_Sans'; font-size: 24px; font-weight: 400; line-height: normal; } .map-desc__text { display: flex; flex-direction: column; gap: 17px; color: #46586a; font-size: 14.5px; line-height: 1.75; } .map-desc__sources { color: #8195a4; font-size: 12.5px; line-height: 1.7; } .map-desc__sources strong { color: #5a6c7b; font-weight: 600; } .map-desc__print { align-self: flex-start; margin-top: 8px; padding: 14px 31px; border-radius: 999px; border: 1px solid #1e6e68; background: rgba(155, 232, 216, 0.18); backdrop-filter: blur(5px); color: #1e6e68; font-size: 13px; font-weight: 600; line-height: normal; letter-spacing: 0.52px; transition: background-color 0.25s ease; } .map-desc__print:hover, .map-desc__print:focus-visible { background: rgba(155, 232, 216, 0.4); } .map-objects { gap: 15.35px; padding: 24.38px 28px; border-radius: 19.87px; border: 0.9px solid rgba(255, 255, 255, 0.7); background: linear-gradient(98deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%); box-shadow: 0 16.25px 39.73px 0 rgba(46, 111, 180, 0.16); backdrop-filter: blur(8px); } .map-objects__list { display: flex; flex-direction: column; gap: 15.35px; } .map-object { display: flex; align-items: center; gap: 12.64px; padding: 10.84px; border-radius: 9px; background: #f6fafc; box-shadow: 0 12.64px 18.06px 0 rgba(14, 34, 51, 0.04); } .map-object__num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 23.48px; height: 23.48px; border-radius: 50%; background: rgba(30, 110, 104, 0.1); color: #0e2233; font-family: 'JetBrains_Mono'; font-size: 10.84px; line-height: 1; } .map-object__img { flex-shrink: 0; width: 36.12px; height: 36.12px; border-radius: 4px; object-fit: cover; } .map-object__body { display: flex; flex-direction: column; align-items: flex-start; gap: 9.03px; min-width: 0; } .map-object__name { color: #0e2233; font-family: 'Tenor_Sans'; font-size: 14.45px; line-height: 20.32px; } .map-object__link { color: #1e6e68; font-size: 11.29px; font-weight: 600; line-height: normal; transition: opacity 0.25s ease; } .map-object__link:hover, .map-object__link:focus-visible { opacity: 0.7; } @media (min-width: 768px) { .map__layout { flex-direction: row; align-items: stretch; gap: 16px; } .map__details { gap: 22px; } .map-routes { flex-shrink: 0; width: 346px; border-radius: 26px; border-width: 1px; box-shadow: inset 0 1px 0 1px rgba(255, 255, 255, 0.92), 0 20px 50px 0 rgba(46, 120, 140, 0.14); } .map-routes::before { top: -59px; left: -29px; width: 220px; height: 220px; filter: blur(13px); } .map-routes::after { right: -51px; bottom: -79px; width: 240px; height: 240px; filter: blur(15px); } .map-routes__head { gap: 10px; padding: 26px 24px 19px; } .map-routes__subtitle { font-size: 14px; letter-spacing: 2.5px; } .map-routes__title { font-size: 32px; } .map-routes__list { gap: 7px; padding: 0 12px 22px; } .map-route { gap: 16px; padding: 12px 16px; border-radius: 18px; } .map-route.is-active { box-shadow: 0 10px 24px 0 rgba(30, 110, 104, 0.14); } .map-route__num { width: 44px; height: 44px; border-radius: 13px; border-width: 1px; font-size: 16px; } .map-route__body { gap: 3.9px; } .map-route__meta { letter-spacing: 1.68px; } .map-route__name { font-size: 15px; line-height: 20px; } .map-view { order: 0; flex: 1 1 0; gap: 0; } .map-view__viewport { flex: 1 1 auto; min-height: 600px; aspect-ratio: auto; } .map-view__stage { --u: max(calc(100cqw / 432), calc(100cqh / 976)); --tx: calc(50cqw - 1191.8 * var(--u)); --ty: calc(50cqh - 889.3 * var(--u)); } .map-view__controls, .map-view__note { display: none; } .map-info { position: absolute; top: calc(20 * var(--i)); right: calc(20 * var(--i)); z-index: 3; width: min(calc(418 * var(--i)), calc(100% - 40 * var(--i))); margin-top: 0; } .map-card { gap: 17px; padding: 27px 31px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.7); background: linear-gradient( 110deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100% ); box-shadow: 0 18px 44px 0 rgba(46, 111, 180, 0.16); backdrop-filter: blur(9px); } .map-card__title { font-size: 38px; } .map-desc__text { gap: 23.2px; color: #0e2233; font-size: 16px; font-weight: 300; line-height: 1.45; } .map-desc__sources { color: inherit; font-size: inherit; line-height: inherit; } .map-desc__sources strong { color: inherit; } .map-desc__print { margin-top: auto; } .map-objects__list { gap: 17px; } .map-object { gap: 14px; padding: 12px; border-radius: 10px; box-shadow: 0 14px 20px 0 rgba(14, 34, 51, 0.04); } .map-object__num { width: 26px; height: 26px; font-size: 12px; } .map-object__img { width: 40px; height: 40px; } .map-object__body { gap: 10px; } .map-object__name { font-size: 16px; line-height: 22.5px; } .map-object__link { font-size: 12.5px; } } @media (min-width: 1024px) { .map__layout { gap: 24px; } .map-view__stage { --u: max(calc(100cqw / 1326), calc(100cqh / 976)); --tx: calc(50cqw - 1176 * var(--u)); --ty: calc(50cqh - 798.1 * var(--u)); } .map-popup { --pl: clamp(12px, calc(var(--tip-x) - var(--pw) * 0.27), calc(100cqw - var(--pw) - 12px)); } } @media (min-width: 1440px) { .map { gap: 30px; } .map__layout, .map__details { gap: 48px; } .map__details { display: grid; grid-template-columns: 806fr 969fr; align-items: stretch; } .map-routes { width: 450px; } .map-routes__subtitle { letter-spacing: 3.08px; } .map-routes__list { gap: 10px; } .map-route__meta { font-size: 14px; } .map-route__name { font-size: 18px; line-height: 23.4px; } } @media (min-width: 1024px) { .map__text { font-size: 16px; } } .dosug { display: flex; flex-direction: column; gap: 24px; } .dosug__items { display: grid; grid-template-columns: 1fr; gap: 12px; } .dosug__item { --dosug-accent: 30, 158, 138; --dosug-border: rgba(var(--dosug-accent), 0.16); --dosug-link: rgba(var(--dosug-accent), 0.5); --dosug-icon-bg: linear-gradient( 150deg, rgba(255, 255, 255, 0.14) 0%, rgba(var(--dosug-accent), 0.12) 100% ); --dosug-bg: linear-gradient(130deg, #fff 0%, #f4fbf8 100%); --dosug-shadow: 0 1.131px 1.508px 0.754px rgba(255, 255, 255, 0.6) inset, 0 -7.542px 15.085px 0.754px rgba(30, 158, 138, 0.1) inset, 0 0 0 1.131px rgba(30, 158, 138, 0.28), 0 7.542px 16.593px 0 rgba(46, 80, 140, 0.12); position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 27px 25px; border-radius: 22px; border: 1px solid var(--dosug-border); background: var(--dosug-bg); box-shadow: 0 14px 34px 0 rgba(46, 80, 140, 0.08); color: #62788c; font-size: 18px; font-weight: 300; line-height: 1.33; transform: translateY(0); transition: all 0.25s ease; } .dosug__item:hover { --dosug-border: rgba(var(--dosug-accent), 0.45); --dosug-link: rgba(var(--dosug-accent), 1); transform: translateY(-4px); } .dosug__item--2 { --dosug-accent: 74, 123, 209; --dosug-bg: linear-gradient(130deg, #fff 0%, #f4f7fd 100%); --dosug-shadow: 0 1.132px 1.509px 0.755px rgba(255, 255, 255, 0.6) inset, 0 -7.547px 15.094px 0.755px rgba(74, 123, 209, 0.1) inset, 0 0 0 1.132px rgba(74, 123, 209, 0.28), 0 7.547px 16.604px 0 rgba(46, 80, 140, 0.12); } .dosug__item--3 { --dosug-accent: 138, 107, 209; --dosug-bg: linear-gradient(130deg, #fff 0%, #f7f4fd 100%); --dosug-shadow: 0 1.132px 1.509px 0.755px rgba(255, 255, 255, 0.6) inset, 0 -7.547px 15.094px 0.755px rgba(138, 107, 209, 0.1) inset, 0 0 0 1.132px rgba(138, 107, 209, 0.28), 0 7.547px 16.604px 0 rgba(46, 80, 140, 0.12); } .dosug__item--4 { --dosug-accent: 216, 94, 72; --dosug-bg: linear-gradient(130deg, #fff 0%, #fdf5f3 100%); --dosug-shadow: 0 1.132px 1.509px 0.755px rgba(255, 255, 255, 0.6) inset, 0 -7.547px 15.094px 0.755px rgba(216, 94, 72, 0.1) inset, 0 0 0 1.132px rgba(216, 94, 72, 0.28), 0 7.547px 16.604px 0 rgba(46, 80, 140, 0.12); } .dosug__icon { display: flex; justify-content: center; align-items: center; width: 68px; height: 68px; margin-bottom: 22px; border-radius: 50%; border: 0.66px solid var(--dosug-shadow); box-shadow: var(--dosug-shadow); background: var(--dosug-icon-bg); backdrop-filter: blur(4px); transition: border-color 0.25s ease; } .dosug__title { margin-bottom: 4px; color: #1b3a5c; font-family: 'Tenor_Sans'; font-size: 22px; font-weight: 400; line-height: 1.125; } .dosug__text { color: #62788c; font-size: 18px; font-weight: 300; line-height: 1.33; } .dosug__link { align-self: flex-end; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--dosug-link); background: #fff; color: var(--dosug-link); transition: border-color 0.25s ease, color 0.25s ease; } .dosug__link a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .dosug__item-link { position: absolute; inset: 0; } @media (min-width: 768px) { .dosug__items { grid-template-columns: 1fr 1fr; gap: 20px; } .dosug__item { padding: 15px 14px; } .dosug__icon { width: 44px; height: 44px; margin-bottom: 12px; } .dosug__icon img, .dosug__icon svg { max-height: 22px; } .dosug__title { font-size: 17px; } .dosug__text { max-width: 50%; font-size: 11px; } .dosug__link { width: 36px; height: 36px; margin-top: -18px; } } @media (min-width: 1200px) { .dosug { gap: 48px; } .dosug__items { grid-template-columns: repeat(4, 1fr); } .dosug__item { padding: 27px 25px 48px; } .dosug__icon { width: 80px; height: 80px; margin-bottom: 22px; } .dosug__icon img, .dosug__icon svg { max-height: unset; } .dosug__title { margin-bottom: 11px; font-size: 28px; } .dosug__text { max-width: 77%; font-size: 20px; } .dosug__link { position: absolute; bottom: 22px; right: 22px; width: 40px; height: 40px; margin: 0; } #after-hero:has(section.dosug) { position: relative; z-index: 1; } #after-hero:has(section.dosug)::before { content: ''; position: absolute; top: 50%; left: 0; width: 50%; height: 200%; background: radial-gradient( 58% 58% at 38% 42%, rgba(124, 232, 176, 0.32) 0%, rgba(143, 224, 234, 0.25) 44%, rgba(169, 198, 255, 0.18) 66%, rgba(169, 198, 255, 0) 82% ); filter: blur(45px); transform: translate(-20%, -50%); z-index: -1; } #after-hero:has(section.dosug)::after { content: ''; position: absolute; top: 50%; right: 0; width: 50%; height: 200%; background: radial-gradient( 62% 62% at 66% 34%, rgba(206, 150, 240, 0.43) 0%, rgba(169, 198, 255, 0.36) 42%, rgba(143, 224, 234, 0.24) 66%, rgba(143, 224, 234, 0) 82% ); filter: blur(42.5px); transform: translate(20%, -40%); z-index: -1; } } .events__list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; } .event-card { --stub-width: 56px; --notch: 18px; position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px 0 rgba(14, 34, 51, 0.1); } .event-card__media { aspect-ratio: 360 / 176; overflow: hidden; } .event-card__media img { width: 100%; height: 100%; object-fit: cover; } .event-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 20px 22px; } .event-card__tag { font-family: 'JetBrains_Mono'; color: #1e6e68; font-size: 12px; font-weight: 400; line-height: 13px; letter-spacing: 2.88px; text-transform: uppercase; } .event-card__title { font-family: 'Tenor_Sans'; color: #0e2233; font-size: 20px; font-weight: 400; line-height: 25.455px; transition: color 0.3s ease-in-out; } .event-card__text { max-width: 44ch; color: #5a7484; font-size: 13px; font-weight: 400; line-height: 20px; } .event-card__meta { display: flex; flex-direction: column; gap: 6px; } .event-card__meta-item { display: flex; align-items: center; gap: 8px; color: #5a7484; font-size: 13px; font-weight: 400; line-height: 20px; } .event-card__meta-item img { flex: none; width: 12px; } .event-card__link { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 14px; color: #1e6e68; font-size: 13px; font-weight: 600; line-height: 18px; text-transform: uppercase; transition: all 0.3s ease; } .event-card__link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: currentColor; transition: width 0.3s ease; } .event-card__link svg { transition: transform 0.5s ease; } .event-card:hover .event-card__link::after { width: 100%; } .event-card:hover .event-card__title { color: #1e6e68; } .event-card__stub { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 20px; border-top: 1px dashed #b9cfc9; color: #3f6b63; font-family: 'JetBrains_Mono'; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 2.64px; text-transform: uppercase; } .event-card__btn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } @media (min-width: 768px) { .event-card { --media-width: 268px; --stub-width: 74px; --notch: 26px; --notch-r: calc(var(--notch) / 2); --seam-a: var(--media-width); --seam-b: calc(100% - var(--stub-width)); grid-template-columns: var(--media-width) minmax(0, 1fr) var(--stub-width); align-items: stretch; overflow: visible; border-radius: 16px; box-shadow: none; -webkit-mask-image: radial-gradient(circle var(--notch-r) at var(--seam-a) 0, transparent 99%, #000 100%), radial-gradient(circle var(--notch-r) at var(--seam-a) 100%, transparent 99%, #000 100%), radial-gradient(circle var(--notch-r) at var(--seam-b) 0, transparent 99%, #000 100%), radial-gradient(circle var(--notch-r) at var(--seam-b) 100%, transparent 99%, #000 100%); mask-image: radial-gradient(circle var(--notch-r) at var(--seam-a) 0, transparent 99%, #000 100%), radial-gradient(circle var(--notch-r) at var(--seam-a) 100%, transparent 99%, #000 100%), radial-gradient(circle var(--notch-r) at var(--seam-b) 0, transparent 99%, #000 100%), radial-gradient(circle var(--notch-r) at var(--seam-b) 100%, transparent 99%, #000 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } .event-card::after { content: ''; position: absolute; top: 0; left: 304px; z-index: -1; width: 0; height: 0; background: radial-gradient( 60.78% 35.86% at 2.26% 5.41%, rgba(30, 158, 138, 0.2) 0%, rgba(30, 158, 138, 0) 100% ), #fff; transition: width 0.3s ease, height 0.3s ease; } .event-card:hover::after { width: 100%; height: 100%; } .event-card__media { position: relative; aspect-ratio: unset; min-height: 0; border-radius: 0; } .event-card__media img { position: absolute; inset: 0; } .event-card__body { position: relative; padding: 38px 38px 50px 30px; gap: 10px; } .event-card__title { font-size: 22px; line-height: 1.18; } .event-card__tag { font-size: 12.273px; line-height: 1.14; letter-spacing: 3.436px; } .event-card__text { font-size: 14px; line-height: 1.37; } .event-card__meta { gap: 9px; } .event-card__meta-item { font-size: 14px; line-height: 1.25; } .event-card__meta-item img { width: 14px; } .event-card__link { font-size: 14px; line-height: 1; letter-spacing: 0.84px; } .event-card__stub { flex-direction: column; align-items: center; justify-content: space-between; padding: 26px 20px 26px 26px; border-radius: 0 16px 16px 0; border-top: none; border-left: 1px dashed rgba(90, 116, 132, 0.45); font-size: 14px; line-height: 1.12; letter-spacing: 3.086px; } .event-card__body::before, .event-card__body::after, .event-card__stub::before, .event-card__stub::after { content: none; } .event-card__period { writing-mode: vertical-rl; rotate: 180deg; margin-left: 14px; } } @media (min-width: 1200px) { .events__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 32px; margin-top: 24px; } .event-card { --media-width: 306px; --stub-width: 92px; grid-template-columns: var(--media-width) minmax(0, 1fr) var(--stub-width); } .event-card__body { gap: 12px; padding: 42px 30px; } .event-card__title { margin-bottom: 5px; font-size: 28px; } .event-card__tag { font-size: 14px; letter-spacing: 3.92px; } .event-card__text { margin-bottom: 5px; } .event-card__text, .event-card__meta-item { font-size: 16px; line-height: 22px; } .event-card__meta-item img { width: 17px; } .event-card__link { font-size: 16px; letter-spacing: 0.96px; } .event-card__period { font-size: 16px; letter-spacing: 3.52px; } } .afisha { padding: 40px 0 0; } .afisha__tabs { display: flex; flex-wrap: wrap; gap: 4px; width: max-content; margin-top: 16px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px 0 rgba(46, 111, 180, 0.1); } .afisha__tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px; border-radius: 999px; background: #fff; color: #0e2233; font-family: Onest; font-size: 14px; font-weight: 500; line-height: 1.14; cursor: pointer; transition: all 0.3s ease; } .afisha__tab-count { color: #6e86a6; font-size: 12px; line-height: 1.16; transition: color 0.3s ease; } .afisha__tab:hover { color: #1e6e68; } .afisha__tab:focus-visible { outline: 1px solid #1e6e68; outline-offset: 1px; } .afisha__tab.is-active { background: #1e6e68; color: #fff; } .afisha__tab.is-active .afisha__tab-count { color: rgba(255, 255, 255, 0.75); } .afisha .events__items { padding-block: 24px 40px; } .afisha__empty { padding: 24px 0 40px; color: #3f6b63; font-family: 'JetBrains_Mono'; font-size: 13px; } .afisha__more { display: none; } @media (min-width: 385px) { .afisha__tab { padding: 9px 14px; } } @media (min-width: 768px) { .afisha__tabs { gap: 6px; padding: 8px; } .afisha__tab { gap: 9px; padding: 12px 24px; font-size: 18px; line-height: 1.1; } .afisha__tab-count { font-size: 18px; line-height: 1; } .afisha .events__items { padding-top: 40px; padding-bottom: 54px; } } @media (min-width: 1200px) { .afisha { padding: 70px 0 0; } .afisha .events__items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 34px var(--events-gap); overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: 0; } .afisha .events__item { flex: none; width: auto; } .afisha__more { display: flex; justify-content: center; } .afisha__more-btn { padding: 17px 30px; border: none; border-radius: 999px; background: linear-gradient(134deg, #1e6e68 -1.42%, #2a8f79 69.5%); box-shadow: 0 10px 26px 0 rgba(30, 110, 104, 0.3); font-size: 15px; font-weight: 600; line-height: 1.33; color: #fff; cursor: pointer; transition: background 0.3s ease; } .afisha__more-btn:hover { background: linear-gradient(134deg, #278079 -1.42%, #33a68b 69.5%); } .afisha__more-btn:focus-visible { outline: 2px solid #1e6e68; outline-offset: 3px; } } .search .container { display: flex; flex-direction: column; gap: 20px; padding-block: 32px 40px; } .search__title { color: #5a7484; font-size: 14px; line-height: 1.5; } .search__items { display: flex; flex-direction: column; gap: 16px; } .search__item { position: relative; isolation: isolate; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(56, 199, 171, 0), 0 8px 20px 0 rgba(30, 110, 104, 0.16); transition: box-shadow 0.3s ease; } .search__item::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(134deg, rgba(155, 232, 216, 0.35) 0%, rgba(255, 255, 255, 0) 70%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .search__item[hidden] { display: none; } .search__item:hover, .search__item:has(.search__link:focus-visible) { box-shadow: inset 0 0 0 1px rgba(56, 199, 171, 0.7), 0 14px 34px 0 rgba(30, 110, 104, 0.28); } .search__item:hover::before, .search__item:has(.search__link:focus-visible)::before { opacity: 1; } .search__link:focus-visible { outline: none; } .search__arrow { flex: none; display: flex; transition: transform 0.3s ease; } .search__arrow path { fill: #1e6e68; transition: fill 0.3s ease; } .search__item:hover .search__arrow, .search__item:has(.search__link:focus-visible) .search__arrow { transform: translateX(3px); } .search__item:hover .search__arrow path, .search__item:has(.search__link:focus-visible) .search__arrow path { fill: #38c7ab; } .search__more { display: flex; justify-content: center; } .search__more[hidden] { display: none; } .search__more-btn { padding: 15px 28px; border: none; border-radius: 999px; background: linear-gradient(134deg, #1e6e68 -1.42%, #2a8f79 69.5%); box-shadow: 0 10px 26px 0 rgba(30, 110, 104, 0.3); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.33; cursor: pointer; transition: background 0.3s ease, box-shadow 0.3s ease; } .search__more-btn:hover { background: linear-gradient(134deg, #278079 -1.42%, #33a68b 69.5%); box-shadow: 0 12px 32px 0 rgba(56, 199, 171, 0.5); } .search__more-btn:focus-visible { outline: 2px solid #1e6e68; outline-offset: 3px; } .search__link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .search__item::selection { background: #9be8d880; } .search__mark { padding: 0 2px; border-radius: 3px; background: #9be8d880; color: inherit; } .search__content { flex: 1; display: flex; flex-direction: column; gap: 6px; } .search__content-category { margin-bottom: 2px; color: #1e6e68; font-family: 'JetBrains_Mono'; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 3.36px; text-transform: uppercase; } .search__content-title { color: #0e2233; font-family: 'Tenor_Sans'; font-size: 20px; font-weight: 400; line-height: 1.3; } .search__content-text { color: #5a7484; font-size: 14px; font-weight: 400; line-height: 1.42; } @media (min-width: 768px) { .search .container { gap: 24px; padding-block: 32px 48px; } .search__title { font-size: 15px; line-height: 1.46; } .search__items { gap: 20px; } .search__item { gap: 24px; padding: 20px 24px; } .search__content-category { font-size: 14px; letter-spacing: 3.92px; } .search__content-title { font-size: 24px; line-height: 1.25; } .search__content-text { font-size: 15px; line-height: 1.46; } .search__arrow svg { width: 20px; height: 24px; } } @media (min-width: 1024px) { .search .container { gap: 32px; padding-block: 56px 96px; } .search__title { font-size: 16px; line-height: 1.62; } .search__items { gap: 24px; } .search__item { gap: 28px; padding: 24px 28px; } .search__content { gap: 8px; } .search__content-category { font-size: 16px; letter-spacing: 4.48px; } .search__content-title { font-size: 28px; line-height: 1.28; } .search__content-text { font-size: 16px; line-height: 1.62; } .search__more-btn { padding: 17px 30px; } } .event-detail { --season: #1e9e8a; --season-rgb: 56, 199, 171; --season-soft: rgba(155, 232, 216, 0.5); } .event-detail > .container { padding-block: 18px 42px; } .event-detail__back { display: flex; align-items: center; gap: 6px; color: #1e6e68; font-size: 14px; font-weight: 600; line-height: normal; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.3s ease-in-out; } .event-detail__back:hover, .event-detail__back:focus-visible { text-decoration-color: currentColor; } .event-detail__inner { display: flex; flex-direction: column; gap: 25px; margin-top: 20px; } .event-detail__gallery { --gallery-ratio: 68.75%; --thumbs-width: 70px; --thumbs-gap: 8px; position: relative; height: 0; padding-bottom: calc( (100% - var(--thumbs-width) - var(--thumbs-gap)) * var(--gallery-ratio) / 100% ); } .event-detail__slider { position: absolute; top: 0; left: 0; width: calc(100% - var(--thumbs-width) - var(--thumbs-gap)); height: 100%; overflow: hidden; border-radius: 16px; } .event-detail__slide { height: 100%; } .event-detail__slide-link { display: block; height: 100%; cursor: zoom-in; } .event-detail__slide img { width: 100%; height: 100%; object-fit: cover; } .event-detail__nav { position: absolute; z-index: 4; top: 50%; translate: 0 -50%; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(155, 232, 216, 0.5); background: rgba(6, 13, 31, 0.18); color: #fff; cursor: pointer; transition: all 0.3s ease-in-out; } .event-detail__nav svg { margin-inline: auto; } .event-detail__nav:hover { scale: 1.12; box-shadow: 0 0 50px 0 rgba(155, 232, 216, 0.5); } .event-detail__nav.swiper-button-disabled { opacity: 0.4; cursor: default; } .event-detail__nav--prev { left: 10px; } .event-detail__nav--next { right: 10px; } .event-detail__counter { position: absolute; z-index: 4; right: 5px; bottom: 13px; padding: 5px 10px; border-radius: 999px; background: rgba(6, 13, 31, 0.45); color: #fff; font-size: 11px; font-weight: 400; line-height: 1.27; } .event-detail__thumbs { position: absolute; top: 0; right: 0; width: var(--thumbs-width); height: 100%; overflow: hidden; } .event-detail__thumb { flex: none; width: var(--thumbs-width); height: var(--thumbs-width); overflow: hidden; border-radius: 8px; border: 1px solid transparent; cursor: pointer; opacity: 0.75; transition: opacity 0.3s ease-in-out, border-color 0.3s ease-in-out; } .event-detail__thumb-link { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; } .event-detail__thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75); transition: scale 0.4s ease-in-out, filter 0.4s ease-in-out; } .event-detail__thumb:hover, .event-detail__thumb.swiper-slide-thumb-active { opacity: 1; border-color: var(--season); } .event-detail__thumb:hover img { scale: 1.2; filter: saturate(1.35); } .event-detail__content { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .event-detail__tag { font-family: 'JetBrains_Mono'; color: #1e6e68; font-size: 14px; font-weight: 400; line-height: 1; letter-spacing: 3.36px; text-transform: uppercase; } .event-detail__title { color: #0e2233; font-family: 'Tenor_Sans'; font-size: 24px; font-weight: 400; line-height: 1.25; } .event-detail__meta { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 10px; } .event-detail__meta-item { display: flex; align-items: center; gap: 8px; color: #5a7484; font-size: 14px; line-height: 1.42; } .event-detail__meta-item img { flex: none; width: 12px; } .event-detail__text { display: flex; flex-direction: column; gap: 14px; color: #5a7484; font-size: 14px; line-height: 1.57; } .event-detail__text.is-truncated { position: relative; mask-image: linear-gradient( to bottom, #000 calc(100% - 1lh), rgba(0, 0, 0, 0.55) calc(100% - 0.5lh), transparent ); -webkit-mask-image: linear-gradient( to bottom, #000 calc(100% - 1lh), rgba(0, 0, 0, 0.55) calc(100% - 0.5lh), transparent ); } .event-detail__text.is-truncated::before, .event-detail__text.is-truncated::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 1lh; pointer-events: none; } .event-detail__text.is-truncated::before { background-color: rgba(239, 244, 247, 0.35); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); mask-image: linear-gradient(to bottom, transparent, #000 45%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); } .event-detail__text.is-truncated::after { background-color: rgba(239, 244, 247, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); mask-image: linear-gradient(to bottom, transparent 30%, #000 85%); -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 85%); } .event-detail__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0; color: #1e6e68; font-size: 13px; font-weight: 500; line-height: 1.53; background: linear-gradient(134deg, #1e6e68 -1.42%, #2a8f79 69.5%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: color 0.3s ease-in-out; } .event-detail__more:hover { color: var(--season); } .event-detail__map-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 18px; padding: 14px 26px; border-radius: 999px; background: linear-gradient(134deg, #1e6e68 -1.42%, #2a8f79 69.5%); box-shadow: 0 10px 26px 0 rgba(30, 110, 104, 0.3); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.33; transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .event-detail__map-btn img { flex: none; } .event-detail__map-btn:hover { background: linear-gradient(134deg, #278079 -1.42%, #33a68b 69.5%); } .event-modal { position: fixed; z-index: 100; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; } .event-modal[hidden] { display: none; } .event-modal__overlay { position: absolute; inset: 0; background: rgba(6, 13, 31, 0.62); backdrop-filter: blur(3px); } .event-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 880px; max-height: 85dvh; padding: 68px 20px 20px; overflow: hidden auto; border-radius: 20px; background: #fff; box-shadow: 0 18px 48px 0 rgba(10, 23, 36, 0.28); } .event-modal__close { position: absolute; z-index: 2; top: 20px; right: 20px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #1e6e68; color: #fff; transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .event-modal__close:hover { background: #2a8c83; box-shadow: 0 0 24px 0 rgba(var(--season-rgb, 56, 199, 171), 0.5); } .event-modal__body { display: flex; flex-direction: column; gap: 25px; color: #46586a; font-size: 15px; font-weight: 300; line-height: 1.36; } .page.is-modal-open { overflow: hidden; } @media (min-width: 768px) { .event-detail > .container { padding-block: 38px 70px; } .event-detail__inner { gap: 20px; margin-top: 10px; } .event-detail__slider { border-radius: 20px; } .event-detail__gallery { --gallery-ratio: 62.5%; --thumbs-width: 96px; --thumbs-gap: 12px; } .event-detail__nav { width: 38px; height: 38px; } .event-detail__nav--prev { left: 20px; } .event-detail__nav--next { right: 20px; } .event-detail__thumbs { width: var(--thumbs-width); } .event-detail__counter { right: 12px; bottom: 10px; font-size: 12px; line-height: 1; } .event-detail__content { padding-inline: 12px; gap: 12px; } .event-detail__tag { font-size: 16px; letter-spacing: 4.48px; } .event-detail__title { font-size: 30px; line-height: 1.66; } .event-detail__text, .event-modal__body { font-size: 16px; line-height: 1.37; } .event-detail__meta { margin: 0; } .event-detail__meta-item { font-size: 16px; } .event-detail__meta-item img { width: 14px; } .event-detail__more { margin-top: 6px; font-size: 15px; line-height: 1.33; } .event-detail__map-btn { width: auto; margin-top: 16px; padding: 17px 30px; font-size: 15px; } .event-modal__dialog { padding: 68px 34px 34px; border-radius: 20px; } .event-modal__close { width: 36px; height: 36px; } } @media (min-width: 1200px) { .event-detail > .container { padding-block: 48px 10px; } .event-detail__back { font-size: 16px; } .event-detail__back svg { width: 10px; height: 12px; } .event-detail__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 50px; align-items: start; margin-top: 24px; } .event-detail__gallery { --gallery-ratio: 68.75%; } .event-detail__content { gap: 16px; padding: 0; } .event-detail__title { font-size: 38px; line-height: 1.3; } .event-detail__text, .event-modal__body { line-height: 1.6; } .event-detail__meta { margin: 4px 0 8px; } .event-detail__map-btn { margin-top: 4px; } .event-modal__dialog { padding: 72px 34px 72px 50px; border-radius: 22px; box-shadow: 0 40px 90px 0 rgba(6, 13, 31, 0.42); } .event-modal__close { top: 26px; right: 37px; width: 44px; height: 44px; } } .event-detail__gallery:has(.event-detail__slide:only-child) { --thumbs-width: 0px; --thumbs-gap: 0px; } .event-detail__gallery:has(.event-detail__slide:only-child) .event-detail__thumbs, .event-detail__gallery:has(.event-detail__slide:only-child) .event-detail__nav, .event-detail__gallery:has(.event-detail__slide:only-child) .event-detail__counter { display: none; } .event-detail--vertical .event-detail__gallery { --gallery-ratio: 182%; } @media (min-width: 768px) { .event-detail--vertical .event-detail__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 28px; align-items: start; } .event-detail--vertical .event-detail__gallery { --gallery-ratio: 170%; --thumbs-width: 76px; } } @media (min-width: 1024px) { .event-detail--vertical .event-detail__inner { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr); } .event-detail--vertical .event-detail__gallery { --gallery-ratio: 175%; --thumbs-width: 96px; } } .sights { --season: #1e6e68; --season-rgb: 56, 199, 171; display: flex; flex-direction: column; padding-top: 24px; } .sights .section__link { margin-left: auto; } .sights__tabs { display: flex; flex-wrap: wrap; gap: 8px; } .sights__back { display: flex; align-items: center; gap: 6px; width: max-content; color: #1e6e68; font-size: 13px; font-weight: 600; line-height: normal; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color 0.3s ease-in-out; } .sights__back:hover, .sights__back:focus-visible { text-decoration-color: currentColor; } .sights__title { margin: 16px 0 20px; } .sights__tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.7); background: linear-gradient( 134deg, rgba(255, 255, 255, 0.85) -1.42%, rgba(221, 240, 235, 0.55) 69.5% ); box-shadow: 0 4px 12px 0 rgba(46, 111, 180, 0.1); color: #0e2233; font-size: 14px; font-weight: 500; line-height: 1.14; transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; } .sights__tab-count { padding: 2px 6px; border-radius: 999px; background: rgba(201, 227, 220, 0.75); color: #3f6b63; font-size: 11px; line-height: 1.09; transition: color 0.3s ease, background 0.3s ease; } .sights__tab:hover { color: #1e6e68; } .sights__tab:focus-visible { outline: 1px solid #1e6e68; outline-offset: 2px; } .sights__tab.is-active { background: linear-gradient(134deg, #1e6e68 -1.42%, #2a8f79 69.5%); box-shadow: 0 4px 12px 0 rgba(46, 111, 180, 0.1); color: #fff; font-weight: 600; } .sights__tab.is-active .sights__tab-count { background: rgba(255, 255, 255, 0.22); color: #fff; font-weight: 400; } .sights__header { margin-top: 32px; } .sights__total { margin-left: auto; color: #6e86a6; font-size: 12px; line-height: 1.66; } .sights__list { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; } .sights__empty { padding: 24px 0; color: #3f6b63; font-size: 13px; } .sights-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 8px 20px 0 rgba(46, 111, 180, 0.1); transition: box-shadow 0.4s ease; } .sights-card[hidden] { display: none; } .sights-card__media { position: relative; aspect-ratio: 350 / 180; overflow: hidden; } .sights-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .sights-card__tag { position: absolute; top: 10px; left: 10px; max-width: calc(100% - 20px); padding: 5px 9px; border-radius: 5px; background: rgba(11, 27, 43, 0.72); color: rgba(255, 255, 255, 0.9); font-size: 8.5px; font-style: normal; font-weight: 400; line-height: 1.41; letter-spacing: 1.19px; text-transform: uppercase; font-family: 'JetBrains_Mono'; transition: background 0.3s ease; } .sights-card__body { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 22px; padding: 10px 16px; } .sights-card__title { color: #0e2233; font-size: 14px; font-weight: 400; line-height: 1.21; } .sights-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; } .sights-card__link:focus-visible { outline: none; } .sights-card:has(.sights-card__link:focus-visible) { outline: 2px solid #1e6e68; outline-offset: 2px; } .sights-card__arrow { flex: none; width: 12px; height: 10px; color: #0e2233; transition: color 0.3s ease, transform 0.3s ease; } .sights-card:hover { box-shadow: 0 4px 29.7px 0 rgba(0, 0, 0, 0.31), 0 10px 26px 0 rgba(46, 111, 180, 0.1); } .sights-card:hover .sights-card__media img { transform: scale(1.08); } .sights-card:hover .sights-card__tag { background: var(--season); } .sights-card:hover .sights-card__arrow { color: var(--season); transform: translateX(3px); } .sights--section { padding: 0; } .sights--section .sights__title { margin: 12px 0 16px; } .sights--section .sights__list { margin-top: 26px; } @media (min-width: 576px) { .sights__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .sights { padding-top: 40px; } .sights__tabs { gap: 16px; } .sights__tab { gap: 10px; padding: 13px 24px; font-size: 18px; line-height: 1.11; } .sights__tab-count { font-size: 16px; } .sights__header { flex-direction: row; align-items: center; gap: 16px; margin-top: 56px; } .sights__total { font-size: 16px; } .sights__list { gap: 24px; } .sights-card { border-radius: 16px; } .sights-card__media { aspect-ratio: 438 / 260; } .sights-card__tag { top: 16px; left: 16px; padding: 6px 11px; font-size: 9.5px; line-height: 1.36; letter-spacing: 1.33px; text-transform: uppercase; } .sights-card__body { padding: 20px; } .sights-card__title { font-size: 16px; } } @media (min-width: 1024px) { .sights__list { margin-top: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .sights--section .sights__title { margin: 32px 0 40px; } .sights--section .sights__list { margin-top: 42px; } } @media (min-width: 1200px) { .sights { padding-top: 40px; } .sights--section { padding-top: 0; } .sights__back { font-size: 14px; } .sights__title { margin: 20px 0 28px; } .sights__tab { padding: 13px 24px; font-size: 18px; } .sights__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sights-card__tag { font-size: 13px; line-height: 1; letter-spacing: 1.82px; } .sights-card__title { font-size: 16px; } } .event-detail__actions { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 18px; } .event-detail__actions .event-detail__map-btn { margin-top: 0; } .event-detail__hours-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 13px 26px; border: 1px solid #1e6e68; border-radius: 999px; background: rgba(255, 255, 255, 0.6); color: #1e6e68; font-size: 15px; font-weight: 600; line-height: 1.33; transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .event-detail__hours-btn:hover { background: #fff; box-shadow: 0 10px 26px 0 rgba(30, 110, 104, 0.18); } .hours-modal { position: relative; z-index: 1; width: 100%; max-width: 420px; max-height: 85dvh; padding: 20px; overflow: hidden auto; border-radius: 20px; background: #fff; box-shadow: 0 18px 48px 0 rgba(10, 23, 36, 0.28); } .hours-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .hours-modal__title { color: #0e2233; font-family: 'Tenor_Sans'; font-size: 22px; font-weight: 400; line-height: 1.25; } .hours-modal__close { display: flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #eef3f5; color: #0e2233; transition: background 0.3s ease-in-out, color 0.3s ease-in-out; } .hours-modal__close:hover { background: #1e6e68; color: #fff; } .hours-modal__subtitle { margin-top: 16px; color: rgba(25, 37, 50, 0.55); font-family: 'JetBrains_Mono'; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 1.96px; text-transform: uppercase; } .hours-modal__list { display: flex; flex-direction: column; margin-top: 16px; } .hours-modal__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid #e5eaef; font-size: 14px; line-height: 1.4; } .hours-modal__row:last-child { border-bottom: 0; } .hours-modal__day { color: #0e2233; } .hours-modal__time { color: rgba(25, 37, 50, 0.45); white-space: nowrap; } .sights--nearby { padding-bottom: 28px; } @media (min-width: 768px) { .hours-modal { max-width: 480px; } .event-detail__actions { flex-direction: row; flex-wrap: wrap; width: auto; margin-top: 16px; } .event-detail__hours-btn { width: auto; padding: 16px 30px; } .hours-modal { padding: 32px; } .hours-modal__title { font-size: 26px; } .hours-modal__close { width: 36px; height: 36px; } .hours-modal__subtitle { margin-top: 20px; font-size: 18px; letter-spacing: 2.52px; } .hours-modal__list { margin-top: 20px; } .hours-modal__row { font-size: 15px; } .sights--nearby { padding-bottom: 38px; } } @media (min-width: 1024px) { .hours-modal { max-width: 560px; } .event-detail__actions { margin-top: 4px; } .hours-modal { padding: 40px; } .hours-modal__title { font-size: 32px; } .hours-modal__close { width: 40px; height: 40px; } .hours-modal__subtitle { margin-top: 24px; } .hours-modal__list { margin-top: 24px; } .hours-modal__row { font-size: 16px; } .sights--nearby { padding: 0; } } .audio__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(358px, 1fr)); gap: 16px; } .audio__card { position: relative; display: grid; border-radius: 20px; overflow: hidden; } .audio__card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 180deg, rgba(6, 13, 31, 0.15) 0%, rgba(6, 13, 31, 0.45) 45%, rgba(6, 13, 31, 0.9) 100% ); z-index: 1; } .audio__card-image { grid-area: 1 / 1; aspect-ratio: 358/232; } .audio__card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease, filter 0.6s ease; } .audio__card-content { grid-area: 1 / 1; align-self: end; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 16px 20px; } .audio__card-description { color: #9be8d8; text-shadow: 0 1.209px 2.298px rgba(0, 0, 0, 0.52); font-family: 'JetBrains_Mono'; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 3.08px; text-transform: uppercase; } .audio__card-title { width: 75%; color: #f6fafc; font-family: 'Tenor_Sans'; font-size: 20px; font-weight: 400; line-height: 1; } .audio__card-link { display: flex; align-items: center; gap: 5px; padding: 11px 14px; border-radius: 604.125px; background: rgba(155, 232, 216, 0.18); color: #9be8d8; font-size: 14px; font-weight: 600; line-height: 1.1; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1); } .audio__card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; } .audio__card-link:focus-visible { outline: none; } .audio__card:has(.audio__card-link:focus-visible) { outline: 2px solid #9be8d8; outline-offset: 2px; } .audio__card:hover .audio__card-image img { transform: scale(1.08); filter: saturate(1.45); } .audio__card:hover .audio__card-link, .audio__card-link:focus-visible { background: rgba(155, 232, 216, 0.3); color: #f6fafc; } @media (min-width: 768px) { .audio__items { gap: 20px; } .audio__card-image { aspect-ratio: 382/222; } .audio__card-content { gap: 6px; padding: 0 18px 22px; } .audio__card-title { margin-bottom: 2px; } } @media (min-width: 1024px) { .audio__items { gap: 24px; } .audio__card-image { aspect-ratio: 592/382; } .audio__card-content { gap: 10px; padding: 0 28px 32px; } .audio__card-description { font-size: 16px; letter-spacing: 3.52px; } .audio__card-title { font-size: 28px; line-height: 1.14; } .audio__card-link { gap: 8px; padding: 9px 16px; font-size: 13px; line-height: 1.38; } } @media (min-width: 1200px) { .audio__items { grid-template-columns: repeat(3, 1fr); } } .audio-detail__media, .event-detail__media { display: flex; flex-direction: column; gap: 8px; } .audio-detail { display: flex; flex-direction: column; gap: 8px; } .audio-detail__label { color: #1e6e68; font-family: 'JetBrains_Mono'; font-size: 14px; font-weight: 400; line-height: 1.07; letter-spacing: 3.92px; text-transform: uppercase; } .audio-player { --range-fill: 0%; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 9.028px; border: 1px solid #9fd6c4; background: linear-gradient( 158deg, var(--color-white-62, rgba(255, 255, 255, 0.62)) 0%, var(--color-white-34, rgba(255, 255, 255, 0.34)) 42%, var(--color-white-60, rgba(255, 255, 255, 0.6)) 100% ), rgba(232, 246, 240, 0.24); } .audio-player__head { display: flex; align-items: center; gap: 16px; } .audio-player__num, .audio-tracks__play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 37px; height: 37px; border-radius: 8px; border: 0.564px solid rgba(255, 255, 255, 0.9); background: linear-gradient(150deg, #45d6b4 0%, #1e9e8a 100%); color: #fff; font-size: 14px; font-weight: 500; line-height: normal; } .audio-player__title { color: #0e2233; font-size: 18px; font-weight: 500; line-height: 1; } .audio-player__progress { display: flex; flex-direction: column; gap: 6px; } .audio-player__times { display: flex; justify-content: space-between; font-family: 'JetBrains_Mono'; color: #6e86a6; font-size: 14px; font-weight: 700; line-height: 1; } .audio-player__range { --fill: var(--range-fill); --range-gradient: linear-gradient(134deg, #1e6e68 -1.42%, #2a8f79 69.5%); --range-track: #d5e1e8; --range-thumb: #1e6e68; width: 100%; height: 16px; margin: 0; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none; } .audio-player__range:hover { --range-gradient: linear-gradient(134deg, #14524d -1.42%, #1e6e68 69.5%); --range-track: #c3d2db; --range-thumb: #14524d; } .audio-player__range:focus-visible { outline: 2px solid #1e6e68; outline-offset: 4px; border-radius: 999px; } .audio-player__range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: var(--range-gradient) 0 0 / var(--fill) 100% no-repeat, var(--range-track); } .audio-player__range::-moz-range-track { height: 4px; border-radius: 999px; background: var(--range-track); } .audio-player__range::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--range-gradient); } .audio-player__range::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: radial-gradient(circle, #fff 0 3px, var(--range-thumb) 3.5px); appearance: none; -webkit-appearance: none; } .audio-player__range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: radial-gradient(circle, #fff 0 3px, var(--range-thumb) 3.5px); } .audio-player__controls { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; } .audio-player__main { display: flex; align-items: center; gap: 10px; } .audio-player__btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #1e6e68; transition: color 0.25s ease, background-color 0.25s ease; } .audio-player__btn:hover, .audio-player__btn:focus-visible { color: #0e2233; outline: none; } .audio-player__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(134deg, #1e6e68 -1.42%, #2a8f79 69.5%); color: #fff; transition: filter 0.25s ease, transform 0.25s ease; } .audio-player__toggle:hover, .audio-player__toggle:focus-visible { filter: brightness(0.75); outline: none; } .audio-player__toggle:active { transform: scale(0.94); } .audio-player__icon--play { margin-left: 2px; } .audio-player__icon--pause, .audio-player.is-playing .audio-player__icon--play { display: none; } .audio-player.is-playing .audio-player__icon--pause { display: block; } .audio-player__volume { --range-fill: 80%; display: flex; align-items: center; gap: 4px; justify-self: end; width: 100%; padding: 4px 8px; max-width: 120px; border-radius: 642.311px; background: #fff; } .audio-player__mute { width: 15px; height: 12px; color: #5a7484; } .audio-player__mute[aria-pressed='true'] .audio-player__wave { opacity: 0.3; } .audio-player__range--volume { min-width: 0; } .audio-tracks { display: flex; flex-direction: column; gap: 8px; } .audio-tracks__item.is-active { display: none; } .audio-tracks__btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 13px; border-radius: 11.922px; border: 0.852px solid #e4eaf0; background: #fff; color: #0e2233; text-align: left; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .audio-tracks__btn:hover, .audio-tracks__btn:focus-visible { border-color: #1e6e68; box-shadow: 0 4px 18px rgba(14, 34, 51, 0.08); outline: none; } .audio-tracks__btn:hover .audio-tracks__play, .audio-tracks__btn:focus-visible .audio-tracks__play { filter: brightness(0.75); } .audio-tracks__btn:hover .audio-tracks__title, .audio-tracks__btn:focus-visible .audio-tracks__title { color: var(--season, #1e6e68); } .audio-tracks__play { width: 28px; height: 28px; background: linear-gradient(134deg, #1e6e68 -1.42%, #2a8f79 69.5%); border-radius: 50%; transition: filter 0.25s ease; } .audio-tracks__play svg { margin-left: 2px; } .audio-tracks__num { flex: none; display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 9.09px; border: 0.699px solid #ceeee6; background: #e5f2ef; color: #3c566b; font-size: 12px; font-weight: 500; line-height: normal; } .audio-tracks__title { flex: 1 1 auto; min-width: 0; color: #0e2233; font-size: 14px; font-weight: 400; line-height: 1.07; transition: color 0.25s ease; } .audio-tracks__time { flex: none; font-family: 'JetBrains_Mono'; color: #6e86a6; font-size: 13.625px; font-weight: 700; line-height: 1; } .event-detail__text { color: #6e86a6; font-size: 14px; line-height: 22px; } .audio-detail__media .event-detail__text { color: #5a7484; } @media (min-width: 768px) { .audio-detail__media { gap: 16px; } .event-detail__text { font-size: 16px; line-height: 26px; } .audio-detail__label { letter-spacing: 3.92px; } .audio-player { gap: 14px; padding: 18px 24px; border-radius: 16px; } .audio-player__head { gap: 30px; } .audio-player__num, .audio-tracks__play { width: 44px; height: 44px; border-radius: 13px; font-size: 16px; } .audio-player__title { font-size: 22px; } .audio-player__progress { gap: 8px; } .audio-player__times { font-size: 16px; } .audio-player__btn { width: 44px; height: 44px; } .audio-player__toggle { width: 44px; height: 44px; } .audio-player__volume { gap: 10px; padding: 6px 12px; max-width: 200px; } .audio-player__mute { width: 15px; height: 12px; } .audio-tracks { gap: 8px; } .audio-tracks__btn { padding: 13px; } .audio-tracks__play { width: 34px; height: 34px; } .audio-tracks__num { width: 38px; height: 38px; border-radius: 11.07px; font-size: 14px; } .audio-tracks__title { font-size: 15px; } } @media (min-width: 1024px) { .event-detail:has(.audio-detail) .event-detail__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; } .audio-detail__media { gap: 28px; } .audio-detail__media .event-detail__text { font-size: 16px; } .audio-detail__label { margin-bottom: 24px; font-size: 16px; letter-spacing: 4.48px; } .audio-tracks { gap: 10px; } .audio-tracks__btn { padding: 16px; } .audio-tracks__play { width: 40px; height: 40px; } .audio-tracks__num { width: 44px; height: 44px; border-radius: 13px; font-size: 16px; } .audio-tracks__title { font-size: 18px; } .audio-tracks__time { font-size: 16px; } } @media (min-width: 1200px) { .event-detail:has(.audio-detail) .event-detail__inner { gap: 56px; } } @property --ubedites-angle { syntax: ''; inherits: false; initial-value: 0deg; } .ubedites { --ubedites-gutter: 20px; --ubedites-radius: 20px; --ubedites-blur: 5px; position: relative; z-index: 5; background: #060d1f; } .ubedites__track { --ubedites-count: 1; position: relative; height: 100vh; height: 100dvh; } .ubedites.is-ready .ubedites__track { height: calc(100vh + (var(--ubedites-count) - 1) * 60vh); height: calc(100dvh + (var(--ubedites-count) - 1) * 60dvh); } .ubedites__frame { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: #0b1b2b; isolation: isolate; border-radius: var(--ubedites-radius) var(--ubedites-radius); } .ubedites__frame.is-pinned { position: fixed; top: 0; bottom: auto; } .ubedites__frame.is-done { top: auto; bottom: calc(-1 * var(--ubedites-radius)); height: calc(100vh + var(--ubedites-radius)); height: calc(100dvh + var(--ubedites-radius)); } .ubedites__track:last-child .ubedites__frame.is-done { bottom: 0; height: 100vh; height: 100dvh; } .ubedites__slides { position: absolute; inset: 0; } .ubedites__slides::after { content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(6, 13, 31, 0) 53%, rgba(6, 13, 31, 0.52) 100%); pointer-events: none; } .ubedites__slide { position: absolute; inset: 0; display: none; } .ubedites__slide.is-prev { display: block; z-index: 1; } .ubedites__slide.is-active { display: block; z-index: 2; } .ubedites__slide.is-enter { animation: ubedites-overlay 1.6s cubic-bezier(0.16, 1, 0.3, 1) both; } .ubedites__slide.is-instant.is-enter { animation: none; } .ubedites__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .ubedites__card { position: absolute; left: var(--ubedites-gutter); bottom: 104px; z-index: 3; width: 264px; max-width: calc(100% - var(--ubedites-gutter) * 2); padding: 18px 17px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(6, 13, 31, 0.42); backdrop-filter: blur(var(--ubedites-blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--ubedites-blur)) saturate(1.4); box-shadow: 0 8px 40px rgba(6, 13, 31, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 60px rgba(155, 232, 216, 0.18); } .ubedites__card.is-enter { animation: ubedites-card-rise 1.8s cubic-bezier(0.16, 1, 0.3, 1) both, ubedites-glass-in 1s ease 1s both; } .ubedites__card::before { content: ''; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; background: conic-gradient( from var(--ubedites-angle), transparent 0%, rgba(43, 199, 158, 0.15) 20%, #2bc79e 42%, #9be8d8 50%, #2bc79e 58%, rgba(43, 199, 158, 0.15) 80%, transparent 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; pointer-events: none; } .ubedites__card.is-enter::before { animation: ubedites-spin-border 4s linear 2s infinite, ubedites-border-in 0.8s ease 1.8s both; } .ubedites__card-inner.is-enter { animation: ubedites-content-in 1s ease 1s both; } .ubedites__card.is-instant.is-enter, .ubedites__card-inner.is-instant.is-enter { animation: none; } .ubedites__card.is-instant.is-enter::before { opacity: 1; animation: ubedites-spin-border 4s linear infinite; } .ubedites__title { margin-bottom: 10px; color: #f6fafc; font-family: 'Tenor_Sans'; font-size: 18px; font-weight: 400; line-height: 1.3; } .ubedites__text { color: rgba(234, 242, 245, 0.88); font-size: 12px; font-weight: 300; line-height: 1.3; } .ubedites__meta { position: absolute; right: 26px; bottom: 60px; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 20px; } .ubedites__author { color: #f6fafc; font-size: 12px; letter-spacing: 0.04em; text-shadow: 0 1px 8px rgba(6, 13, 31, 0.6); } .ubedites__next { display: none; align-items: center; padding: 0; color: rgba(246, 250, 252, 0.5); font-size: 12px; letter-spacing: 0.04em; line-height: 1; cursor: pointer; transition: color 0.4s; animation: ubedites-blink 2.4s ease-in-out infinite; } .ubedites__next:hover, .ubedites__next:focus-visible { color: #f6fafc; animation-play-state: paused; } .ubedites__next-arrow { font-size: 16px; } .ubedites__dots { position: absolute; right: 14px; top: 50%; z-index: 4; display: flex; flex-direction: column; gap: 10px; transform: translateY(-50%); } .ubedites__dot { width: 4px; height: 12px; padding: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: height 0.4s, background 0.4s; } .ubedites__dot:not(.is-active):hover { background: rgba(6, 13, 31, 0.6); } .ubedites__dot.is-active { height: 34px; background: #9be8d8; } @keyframes ubedites-overlay { from { transform: translateY(100vh); } to { transform: translateY(0); } } @keyframes ubedites-card-rise { from { opacity: 0; transform: translateY(100vh); } to { opacity: 1; transform: translateY(0); } } @keyframes ubedites-glass-in { from { background: rgba(6, 13, 31, 0); border-color: rgba(255, 255, 255, 0); backdrop-filter: blur(0) saturate(1); -webkit-backdrop-filter: blur(0) saturate(1); box-shadow: 0 8px 40px rgba(6, 13, 31, 0), inset 0 1px 0 rgba(255, 255, 255, 0), 0 0 0 rgba(155, 232, 216, 0); } to { background: rgba(6, 13, 31, 0.42); border-color: rgba(255, 255, 255, 0.35); backdrop-filter: blur(var(--ubedites-blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--ubedites-blur)) saturate(1.4); box-shadow: 0 8px 40px rgba(6, 13, 31, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 60px rgba(155, 232, 216, 0.18); } } @keyframes ubedites-content-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ubedites-border-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ubedites-spin-border { to { --ubedites-angle: 360deg; } } @keyframes ubedites-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .ubedites__slide.is-enter, .ubedites__card.is-enter, .ubedites__card.is-enter::before, .ubedites__card-inner.is-enter, .ubedites__next { animation: none; } .ubedites__card::before { opacity: 1; } } @media (min-width: 768px) { .ubedites { --ubedites-gutter: 26px; --ubedites-radius: 14px; --ubedites-blur: 5px; } .ubedites__slides::after { display: none; } .ubedites__card { bottom: 62px; width: 380px; padding: 19px 18px; border-radius: 10px; } .ubedites__title { margin-bottom: 8px; font-size: 20px; line-height: 1.2; } .ubedites__text { line-height: 1.25; } .ubedites__meta { right: 42px; bottom: 74px; } .ubedites__next { display: inline-flex; } .ubedites__author, .ubedites__next { font-size: 14px; } .ubedites__dots { right: 20px; } } @media (min-width: 1024px) { .ubedites { --ubedites-gutter: 48px; --ubedites-radius: 34px; --ubedites-blur: 22px; } .ubedites__card { left: 59px; bottom: 128px; width: 524px; padding: 43px 41px; border-radius: 22px; } .ubedites__title { margin-bottom: 17px; font-size: 30px; } .ubedites__text { font-size: 16px; line-height: 1.6; } .ubedites__meta { right: 46px; bottom: 128px; gap: 25px; } .ubedites__author, .ubedites__next { font-size: 16px; } .ubedites__next-arrow { font-size: 18px; } .ubedites__dots { right: 46px; } } .about { display: flex; flex-direction: column; gap: 18px; } .about__intro { color: #0e2233; font-family: 'Tenor_Sans'; font-size: 16px; font-weight: 400; line-height: 1.57; } .about__section { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .about__section:not(:last-child) { margin-bottom: 14px; } .about__header { display: flex; flex-direction: column; gap: 12px; } .about__lead { color: #5a7484; font-size: 14px; font-weight: 400; line-height: 1.57; } .about__facts, .about__history, .about__today { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } .about-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 24px 28px; border: 1px solid rgba(138, 107, 209, 0.35); border-radius: 18px; background: #fff; box-shadow: 0 8px 20px 0 rgba(46, 111, 180, 0.16); isolation: isolate; transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .about-card::before, .about-stat::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient( 170deg, rgba(155, 232, 216, 0.44) 0%, rgba(255, 255, 255, 0.34) 42%, rgba(255, 255, 255, 0.6) 100% ); opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; } @media (hover: hover) { .about-card:hover, .about-stat:hover { border-color: #1e6e68; } .about-card:hover::before, .about-stat:hover::before { opacity: 1; } .about-card:hover { box-shadow: 0 16px 32px 0 rgba(30, 110, 104, 0.2); } .about-stat:hover { box-shadow: 0 24px 36px 0 rgba(30, 110, 104, 0.2); } } .about-card__head { display: flex; flex-direction: column; align-items: flex-start; } .about-card__label, .about-dist__label { color: #1e6e68; font-family: 'JetBrains_Mono'; font-size: 14px; font-weight: 400; line-height: 1.07; letter-spacing: 3.92px; text-transform: uppercase; } .about-card__value { margin-top: 8px; color: #0e2233; font-family: 'Tenor_Sans'; font-size: 38px; font-weight: 400; line-height: 1.1; } .about-card__text { margin-top: 16px; color: #5a7484; font-size: 15px; line-height: 1.53; } .about-card__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 13px; width: 100%; margin-top: 12px; } .about-card__item { position: relative; padding-left: 19px; color: #5a7484; font-size: 19px; line-height: 1.31; } .about-card__item::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #1e9e8a; box-shadow: 0 0 4px 0 #1e9e8a; filter: blur(0.10000000149011612px); } .about__history .about-card__value { font-size: 21px; } .about__history .about-card { padding: 24px 15px; } .about-stat { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 24px; border: 1px solid rgba(138, 107, 209, 0.35); border-radius: 22px; background: #fff; box-shadow: 0 18px 22px 0 rgba(46, 111, 180, 0.16); isolation: isolate; transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .about-stat--wide { background: linear-gradient(105deg, rgba(43, 199, 158, 0.045) 53.19%, rgba(255, 255, 255, 0.32) 92.92%), #fff; box-shadow: 0 18px 22px 0 rgba(30, 158, 138, 0.12); } .about-stat__label { color: #1e9e8a; font-family: 'JetBrains_Mono'; font-size: 14px; font-weight: 400; line-height: 1.3; letter-spacing: 1.65px; text-transform: uppercase; } .about-stat__title { color: #10294a; font-family: 'Tenor_Sans'; font-size: 21px; font-weight: 400; line-height: normal; } .about-stat__text { color: #5a7484; font-size: 14px; font-weight: 300; line-height: 1.4; } .about__geo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } .about__map { --u: calc(100cqw * 0.4534 / 358); --city-name: 20; position: relative; overflow: hidden; border-radius: 20px; background: #f8f9f9; aspect-ratio: 358 / 315; container-type: inline-size; } .about__map img { width: 100%; height: 100%; object-fit: cover; object-position: 42% center; } .about__map .how-city { padding: calc(var(--u) * 2) calc(var(--u) * 30) calc(var(--u) * 10); } .about__map .how-city__name { line-height: 2; } .about__map .how-city__time { gap: calc(var(--u) * 3); font-size: calc(var(--u) * 16); } @media (hover: hover) { .about__map .how-city:hover .how-city__time { font-size: calc(var(--u) * 16 + 2px); } } .about__map .how-city--spb { --x: 21.34%; --y: 46.82%; } .about__map .how-city--moscow { --x: 17.04%; --y: 78.41%; } .about__distances { display: flex; flex-direction: column; gap: 12px; } .about-dist { position: relative; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; padding: 34px 15px 20px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 18px; background: linear-gradient( 165deg, rgba(255, 255, 255, 0.9) 1.42%, rgba(221, 240, 233, 0.6) 69.5% ); box-shadow: 0 8px 22px 0 rgba(46, 111, 180, 0.1); cursor: pointer; transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .about-dist.is-active { cursor: default; border-color: #1e6e68; box-shadow: 0 20px 30px 0 rgba(30, 110, 104, 0.16); } @media (hover: hover) { .about-dist:hover { border-color: #1e6e68; box-shadow: 0 20px 30px 0 rgba(30, 110, 104, 0.16); } } .about-dist--spb { background: linear-gradient( 164deg, rgba(255, 255, 255, 0.9) 1.42%, rgba(226, 231, 248, 0.6) 69.5% ); } .about-dist::before { content: ''; position: absolute; z-index: 0; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(56, 222, 184, 0.4) 0%, rgba(56, 222, 184, 0) 70%); filter: blur(13px); opacity: 0.82; top: -61px; left: -28px; pointer-events: none; } .about-dist--spb::before { width: 240px; height: 240px; background: radial-gradient(circle, rgba(120, 150, 255, 0.34) 0%, rgba(120, 150, 255, 0) 70%); filter: blur(15px); top: auto; left: auto; right: -48px; bottom: -88px; } .about-dist > * { position: relative; z-index: 1; } .about-dist__number { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; } .about-dist__value { color: #0e2233; font-family: 'Tenor_Sans'; font-size: 29px; font-weight: 400; line-height: 2; } .about-dist__unit { color: #6e86a6; font-size: 18px; line-height: 1.33; } .about-dist__text { margin-top: 6px; color: #5a7484; font-size: 15px; line-height: 1.46; } .about-sea { display: flex; flex-direction: column; gap: 6px; padding: 16px 24px; border-radius: 16px; background: #fff; box-shadow: 0 6px 16px 0 rgba(46, 111, 180, 0.08); } .about-sea__title { display: flex; align-items: center; gap: 10px; color: #0e2233; font-size: 15px; font-weight: 600; line-height: 1.33; } .about-sea__dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: #1e9e8a; } .about-sea__text { color: #5a7484; font-size: 15px; line-height: 1.2; } .about__tabs { display: flex; flex-wrap: wrap; gap: 8px; } .about__tab { display: inline-flex; align-items: center; padding: 14px 24px; border: 1px solid #d8e2ea; border-radius: 999px; background: #fff; color: #0e2233; font-size: 18px; font-weight: 500; line-height: 1; text-align: left; transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; } .about__tab:hover { color: #1e6e68; border-color: rgba(30, 110, 104, 0.4); } .about__tab:focus-visible { outline: 1px solid #1e6e68; outline-offset: 2px; } .about__tab.is-active { border-color: transparent; border-radius: 999px; background: linear-gradient(134deg, #1e6e68 -1.42%, #2a8f79 69.5%); color: #fff; font-weight: 600; } .about__panel { min-width: 0; } .about__panel[hidden] { display: none; } .about-slider { position: relative; width: 100%; min-width: 0; margin-top: 6px; overflow: hidden; border-radius: 20px; } .about-slider__glass { position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.22) ); box-shadow: inset 0 0 90px rgba(255, 255, 255, 0.35); opacity: 0; pointer-events: none; } .about-slider__glass.is-active { animation: vizits-glass-clear 2.2s cubic-bezier(0.33, 0, 0.15, 1) forwards; } @media (prefers-reduced-motion: reduce) { .about-slider__glass.is-active { animation: none; } } .about-slider__item { position: relative; isolation: isolate; display: flex; min-height: 435px; overflow: hidden; border-radius: 20px; background: #0b1b2b; } .about-slider__image { position: absolute; inset: 0; z-index: -2; } .about-slider__image img { width: 100%; height: 100%; object-fit: cover; } .about-slider__item::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 0deg, rgba(6, 13, 31, 0.78) 0%, rgba(6, 13, 31, 0.16) 45%, rgba(6, 13, 31, 0) 70% ); pointer-events: none; } .about-slider__content { display: flex; flex-direction: column; gap: 8px; align-self: flex-end; width: 100%; padding: 0 16px 16px; } .about-slider__title { color: #f6fafc; font-family: 'Tenor_Sans'; font-size: 18px; font-weight: 400; line-height: 1.25; text-wrap: pretty; } .about-slider__text { max-width: 640px; color: rgba(234, 242, 245, 0.85); font-size: 12px; font-weight: 300; line-height: 1.33; } .about-slider .about-slider__pagination { position: absolute; z-index: 4; top: 22px; right: 16px; bottom: auto; left: auto; display: flex; gap: 7px; width: auto; } .about-slider__pagination .swiper-pagination-bullet { width: 12px; height: 4px; margin: 0 !important; border-radius: 2px; background: rgba(255, 255, 255, 0.45); opacity: 1; transition: background 0.3s ease-in-out, width 0.3s ease-in-out; } .about-slider__pagination .swiper-pagination-bullet-active { width: 34px; background: #9be8d8; } .about-slider__nav { position: absolute; z-index: 4; top: 50%; translate: 0 -50%; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(155, 232, 216, 0.5); border-radius: 50%; background: rgba(6, 13, 31, 0.18); backdrop-filter: blur(5px); color: #9be8d8; cursor: pointer; transition: all 0.3s ease-in-out; } .about-slider__nav:hover { scale: 1.12; box-shadow: 0 0 50px 0 rgba(155, 232, 216, 0.5); } .about-slider__nav--prev { left: 16px; } .about-slider__nav--next { right: 16px; } @media (min-width: 768px) { .about { padding-top: 28px; gap: 30px; } .about__intro { font-size: 20px; line-height: 1.2; } .about__section { gap: 8px; } .about__section:not(:last-child) { margin-bottom: 15px; } .about__facts, .about__history, .about__today { gap: 10px; } .about__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-card--list { grid-column: 1 / -1; } .about-card { padding: 24px 28px; } .about__history .about-card { padding: 24px 28px; } .about-card__label, .about-dist__label { font-size: 16px; line-height: 1; letter-spacing: 4.48px; } .about-card__value { font-size: 28px; } .about__history .about-card__value { font-size: 28px; } .about-card__text { margin-top: 8px; font-size: 20px; line-height: 1.3; } .about-stat { padding: 24px 30px; } .about-stat__label { font-size: 16px; font-style: normal; letter-spacing: 2.2px; } .about-stat__title { font-size: 28px; line-height: normal; } .about-stat__text { margin-top: 2px; font-size: 20px; line-height: 1.3; } .about__lead { font-size: 16px; } .about__geo { margin-top: 10px; gap: 24px; } .about__map { --u: calc(100cqw * 0.651 / 738); aspect-ratio: 1057 / 502; } .about__map .how-city--spb { --x: 18.5%; --y: 33%; } .about__map .how-city--moscow { --x: 14.08%; --y: 73.74%; } .about__distances { gap: 16px; } .about-dist { padding: 34px 28px 20px; } .about-dist__value { font-size: 52px; line-height: 1; } .about-dist__unit { font-size: 28px; } .about-dist__text { font-size: 20px; line-height: 1.1; } .about-sea { padding: 16px 24px; } .about-sea__title { font-size: 20px; line-height: 1; } .about-sea__text { font-size: 20px; line-height: 1; } .about__tabs { gap: 10px; margin-top: 16px; } .about-slider__item { min-height: 620px; } .about-slider__content { gap: 8px; padding: 0 34px 34px; } .about-slider__title { font-size: 24px; } .about-slider__text { font-size: 16px; } .about-slider .about-slider__pagination { top: 32px; right: 22px; } .about-slider__nav { width: 46px; height: 46px; } } @media (min-width: 1200px) { .about { padding-top: 18px; } .about__intro { font-size: 28px; line-height: 1.28; } .about__section { gap: 24px; } .about__section--today { gap: 26px; } .about__header { gap: 10px; } .about__facts, .about__history, .about__today { gap: 24px; } .about__facts { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 3.5fr); } .about-card--list { grid-column: auto; } .about__history { grid-template-columns: repeat(3, minmax(0, 1fr)); } .about-card--wide { grid-column: span 2; flex-direction: row; align-items: flex-start; gap: 13px; } .about-card--wide .about-card__head { flex: 0 0 47%; } .about-card--wide .about-card__text { margin-top: 0; padding: 16px 27px 0; line-height: 28px; } .about-card__value { margin-top: 10px; } .about__history .about-card__value { font-size: 38px; line-height: 42px; } .about__history .about-card__value--sm { font-size: 33px; } .about-card__text { font-size: 20px; line-height: 26px; } .about-card__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 13px; margin-top: 14px; } .about-card__item { font-size: 19px; line-height: 32px; } .about-card__item::before { top: 13px; } .about__today { grid-template-columns: repeat(3, minmax(0, 1fr)); } .about-stat { gap: 10px; } .about-stat--wide { grid-column: span 2; gap: 16px; padding: 24px 32px; } .about-stat__label { font-size: 16px; letter-spacing: 2.2px; } .about-stat__title { padding-top: 6px; font-size: 28px; } .about-stat--wide .about-stat__title { padding-top: 0; } .about-stat__text { font-size: 20px; line-height: 26px; } .about__lead { line-height: 22px; } .about__geo { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; } .about__map { --u: calc(100cqw * 0.797 / 1057); } .about__map .how-city--spb { --x: 16.6%; --y: 34.92%; } .about__map .how-city--moscow { --x: 12.82%; --y: 69.78%; } .about__distances { gap: 24px; } .about-dist__number { gap: 8px; margin-top: 10px; } .about-dist__text { margin-top: 10px; } .about__tabs { margin-top: 0; } .about__tab { font-size: 20px; line-height: 18px; } .about-slider { margin-top: -10px; border-radius: 24px; } .about-slider__item { min-height: 861px; border-radius: 24px; } .about-slider__content { gap: 9px; } .about-slider__title { max-width: 1088px; font-size: 32px; line-height: normal; } .about-slider__text { max-width: 1088px; font-size: 18px; line-height: 24px; } .about-slider .about-slider__pagination { top: 46px; right: 22px; } .about-slider__nav--prev { left: 20px; } .about-slider__nav--next { right: 20px; } } @media (min-width: 1440px) { .about__geo { gap: 62px; } } .btn--teal { min-height: 48px; padding: 0 36px; border: 0; border-radius: 999px; background: linear-gradient(165deg, #1e6e68 1.42%, #2a8f79 69.5%); color: #fff; font-size: 15px; font-weight: 600; line-height: 22px; transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out, opacity 0.3s ease-in-out; } .btn--teal:hover { background: linear-gradient(134deg, #278079 -1.42%, #33a68b 69.5%); box-shadow: 0 10px 26px 0 rgba(30, 110, 104, 0.25); } .contacts { display: flex; flex-direction: column; gap: 20px; } .contacts__block { display: flex; flex-direction: column; gap: 20px; } .contacts__block--faq { padding-top: 14px; } .contacts__header { display: flex; flex-direction: column; } .contacts__title { color: #0e2233; font-family: 'Tenor_Sans'; font-size: 28px; font-weight: 400; line-height: 46px; } .contacts__note { color: #5a7484; font-size: 14px; font-weight: 400; line-height: 20px; } .feedback { display: flex; flex-direction: column; gap: 18px; padding: 36px 40px; border-radius: 20px; background: #fff; box-shadow: 0 10px 26px 0 rgba(46, 111, 180, 0.08); } .feedback__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } .feedback__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .feedback__label-row { display: flex; flex-direction: column; gap: 4px; } .feedback__label { display: inline-flex; align-items: center; gap: 4px; color: #0e2233; font-size: 14px; font-weight: 500; line-height: 18px; } .feedback__required { color: #d4574b; font-size: 14px; } .feedback__error { display: none; color: #d4574b; font-size: 13px; font-weight: 500; line-height: 18px; } .feedback__field.is-error .feedback__error { display: block; } .feedback__hint { margin: 0; color: #5a7484; font-size: 13px; line-height: 18px; } .feedback__input { width: 100%; height: 48px; padding: 0 16px; border: 2px solid #d8e2ea; border-radius: 12px; background: #fff; color: #0e2233; font-size: 14px; font-weight: 400; line-height: 22px; appearance: none; outline: none; transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .feedback__input::placeholder { color: #9aa7b4; opacity: 1; } .feedback__input:hover { border-color: #c3d1db; } .feedback__input:focus-visible { border-color: #1e6e68; outline: none; } .feedback__textarea { height: 132px; padding: 11px 16px; resize: vertical; } .feedback__field.is-error .feedback__input { border-color: #ff9c9c; box-shadow: 0 4px 3.8px 0 rgba(255, 99, 99, 0.25); } .feedback__captcha { display: flex; flex-direction: column; gap: 16px; } .feedback__captcha-img { display: flex; align-items: center; width: 148px; height: 48px; padding: 0 13px; border-radius: 10px; background: linear-gradient(156deg, #e8eef2 1.42%, #dce6ec 69.5%); color: #5a7484; font-family: 'JetBrains_Mono'; font-size: 20px; font-weight: 400; line-height: 26px; letter-spacing: 1.6px; white-space: nowrap; user-select: none; } .feedback__field--consent { gap: 6px; } .feedback__consent { display: flex; align-items: flex-start; gap: 10px; color: #5a7484; font-size: 14px; font-weight: 400; line-height: 18px; cursor: pointer; } .feedback__checkbox { flex: none; width: 20px; height: 20px; margin: -1px 0 0; border: 2px solid #b8c7d2; border-radius: 5px; background: #fff center / 12px 12px no-repeat; appearance: none; cursor: pointer; transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .feedback__checkbox:hover { border-color: #1e6e68; } .feedback__checkbox:checked { border-color: #1e6e68; background-color: #1e6e68; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6.2 4.8 9 10 3.4' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .feedback__field.is-error .feedback__checkbox { border-color: #ff9c9c; box-shadow: 0 4px 3.8px 0 rgba(255, 99, 99, 0.25); } .feedback__consent-link { text-decoration: underline; text-underline-position: from-font; transition: color 0.3s ease-in-out; } .feedback__consent-link:hover { color: #1e6e68; } .feedback__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .feedback__submit { width: 100%; } .feedback__submit.is-loading { opacity: 0.7; pointer-events: none; } .feedback__status { display: none; color: #d4574b; font-size: 14px; font-weight: 500; line-height: 18px; } .feedback__status.is-visible { display: block; } .requisites { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; border-radius: 20px; background: #fff; box-shadow: 0 10px 26px 0 rgba(46, 111, 180, 0.08); color: #0e2233; font-size: 16px; font-weight: 400; line-height: 24px; } .requisites__row { display: flex; flex-direction: column; gap: 3px; } .requisites__label { flex: none; color: #6e86a6; font-family: 'JetBrains_Mono'; font-size: 15px; line-height: 22px; letter-spacing: 2.25px; text-transform: uppercase; } .requisites__value { line-height: 20px; } .faq { --season: #1e9e8a; --season-rgb: 56, 199, 171; display: flex; flex-direction: column; gap: 10px; } .faq__item { position: relative; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px 0 rgba(46, 111, 180, 0.06); transition: background-color 0.4s ease-in-out, box-shadow 0.3s ease-in-out; } .faq__item.is-open { background: #eff4f7; } .faq__item::before, .faq__item::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } .faq__item::before { background: linear-gradient( 178deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 42%, rgba(255, 255, 255, 0.6) 100% ), rgba(255, 255, 255, 0.65); } .faq__item::after { background: linear-gradient( 100deg, rgba(var(--season-rgb), 0.16) 0%, rgba(var(--season-rgb), 0.06) 50%, rgba(var(--season-rgb), 0) 100% ); box-shadow: inset 0 0 0 1px rgba(var(--season-rgb), 0.55); opacity: 0; transition: opacity 0.3s ease-in-out; } @media (hover: hover) { .faq__item:hover { box-shadow: 0 12px 28px 0 rgba(46, 111, 180, 0.14), 0 0 18px 0 rgba(var(--season-rgb), 0.16); } .faq__item:hover::after { opacity: 1; } .faq__item:hover .faq__icon::before, .faq__item:hover .faq__icon::after { background: var(--season); } } .faq__heading { position: relative; z-index: 1; margin: 0; color: inherit; font-family: inherit; font-size: inherit; font-weight: 400; line-height: inherit; } .faq__trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px 20px; color: #0e2233; font-family: 'Tenor_Sans'; font-size: 18px; font-weight: 400; line-height: 20px; text-align: left; } .faq__question { flex: 1 1 auto; min-width: 0; } .faq__icon { position: relative; flex: none; width: 18px; height: 18px; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .faq__icon::before, .faq__icon::after { content: ''; position: absolute; border-radius: 1px; background: #1e6e68; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease-in-out; } .faq__icon::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; } .faq__icon::after { top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1px; } .faq__trigger[aria-expanded='true'] .faq__icon { transform: rotate(180deg); } .faq__trigger[aria-expanded='true'] .faq__icon::before { transform: scaleX(1.2); } .faq__trigger[aria-expanded='true'] .faq__icon::after { transform: scaleY(0); } .faq__panel { position: relative; z-index: 1; display: grid; grid-template-rows: 0fr; margin-top: 0; visibility: hidden; transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.45s; } .faq__item.is-open .faq__panel { grid-template-rows: 1fr; margin-top: -6px; visibility: visible; transition-delay: 0s, 0s, 0s; } .faq__panel-inner { min-height: 0; overflow: hidden; } .faq__answer { padding: 0 20px 16px; color: #5a7484; font-size: 13px; font-weight: 400; line-height: 18px; opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; } .faq__item.is-open .faq__answer { opacity: 1; transform: none; transition-delay: 0.12s; } .feedback-modal { opacity: 0; transition: opacity 0.3s ease-in-out; } .feedback-modal.is-visible { opacity: 1; } .feedback-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 420px; max-height: 85dvh; padding: 36px 20px 24px; overflow: hidden auto; border-radius: 20px; background: #fff; box-shadow: 0 18px 48px 0 rgba(10, 23, 36, 0.28); text-align: center; transform: translateY(16px) scale(0.96); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .feedback-modal.is-visible .feedback-modal__dialog { transform: none; } .feedback-modal__close { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #eef3f5; color: #0e2233; transition: background 0.3s ease-in-out, color 0.3s ease-in-out; } .feedback-modal__close:hover { background: #1e6e68; color: #fff; } .feedback-modal__icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: linear-gradient(165deg, #1e6e68 1.42%, #2a8f79 69.5%); color: #fff; box-shadow: 0 10px 26px 0 rgba(30, 110, 104, 0.25); } .feedback-modal__title { color: #0e2233; font-family: 'Tenor_Sans'; font-size: 22px; font-weight: 400; line-height: 1.25; } .feedback-modal__text { max-width: 400px; margin: 12px auto 0; color: #5a7484; font-size: 14px; font-weight: 400; line-height: 1.5; } .feedback-modal__btn { width: 100%; margin-top: 24px; } @media (min-width: 768px) { .contacts { gap: 28px; } .contacts__block { gap: 28px; } .contacts__note { font-size: 15px; } .feedback { padding: 36px 40px; } .feedback__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .feedback__label-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: 18px; } .feedback__error { font-size: 14px; } .feedback__hint { font-size: 14px; } .feedback__input { height: 52px; } .feedback__textarea { height: 132px; padding: 13px 16px; } .feedback__captcha-img { height: 62px; } .feedback__submit { width: 220px; } .requisites { padding: 28px 36px; } .requisites__label { font-size: 18px; letter-spacing: 2.7px; } .requisites__value { line-height: 24px; } .faq { gap: 12px; } .faq__item { border-radius: 16px; } .faq__trigger { gap: 16px; padding: 22px 28px; font-size: 22px; line-height: 24px; } .faq__icon { width: 18px; height: 18px; } .faq__item.is-open .faq__panel { margin-top: -10px; } .faq__answer { padding: 0 28px 22px; font-size: 14px; line-height: 22px; } .feedback-modal__dialog { max-width: 480px; padding: 44px 32px 32px; } .feedback-modal__close { top: 20px; right: 20px; width: 36px; height: 36px; } .feedback-modal__title { font-size: 26px; } .feedback-modal__text { font-size: 16px; } .feedback-modal__btn { width: auto; margin-top: 28px; } } @media (min-width: 1024px) { .page__secondary #after-hero > .container:has(.contacts) { padding-top: 56px; } .contacts { gap: 56px; } .contacts__block { gap: 24px; } .contacts__block--faq { margin-top: -8px; padding-top: 0; } .contacts__header { gap: 10px; } .contacts__title { font-size: 38px; } .contacts__note { font-size: 16px; } .feedback__label { font-size: 16px; } .feedback__input { font-size: 16px; } .feedback__captcha .feedback__input { max-width: 696px; } .feedback__consent { font-size: 16px; } .btn--teal { min-height: 56px; font-size: 16px; } .requisites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 48px; font-size: 20px; } .requisites__row { flex-direction: row; align-items: baseline; gap: 24px; } .faq__trigger { font-size: 28px; } .faq__icon { width: 22px; height: 22px; } .faq__answer { max-width: 1768px; font-size: 16px; } .feedback-modal__dialog { max-width: 560px; padding: 52px 40px 40px; } .feedback-modal__close { width: 40px; height: 40px; } .feedback-modal__title { font-size: 32px; } } .page__secondary #after-hero > .container:has(.how) { padding-block: 20px 32px; } .how { display: flex; flex-direction: column; gap: 28px; } .how__map { border-radius: 14px; box-shadow: 0 12px 28px 0 rgba(14, 34, 51, 0.18); } .how-map { --k: calc(100cqw / 358); --u: calc(var(--k) * 0.4135); --city-name: 26.6; --dest-pad-y: 6; --dest-pad-x: 9; --dest-gap: 1.7; --dest-label: 6.7; --dest-track: 1.584; --dest-name: 11.17; --dest-line: 16.46; --dest-radius: 13.37; --dest-border: 0.514; position: relative; overflow: hidden; aspect-ratio: 358 / 457; background: #060d1f; container-type: inline-size; } .how-map__media, .how-map__img { position: absolute; inset: 0; width: 100%; height: 100%; } .how-map__img { object-fit: cover; } .how-map__layer { position: absolute; inset: 0; display: none; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .how-map__layer--mobile { display: block; } .how-map__road, .how-map__route { fill: none; stroke-width: var(--route-width); stroke-linecap: round; stroke-linejoin: round; } .how-map__road { stroke: #d48d45; } .how-map__route { stroke: #1e6e68; transition: stroke 0.3s ease-in-out; } .how-map__route.is-active { stroke: #38c7ab; } .how-map__plane { transition: filter 0.3s ease-in-out; } .how-map__plane.is-active { filter: brightness(1.6) saturate(1.2); } .how-map__m8 rect { fill: #d48d45; stroke: #fff; } .how-map__m8 text { fill: #fff; font-family: 'Onest', sans-serif; text-anchor: middle; dominant-baseline: central; } .how-map__marker { cursor: pointer; pointer-events: auto; transition: transform 0.3s ease-in-out; } .how-map__marker.is-active { transform: scale(1.1); } .how-map__dest { position: absolute; top: var(--y); left: var(--x); display: flex; flex-direction: column; align-items: center; gap: calc(var(--k) * var(--dest-gap)); padding: calc(var(--k) * var(--dest-pad-y)) calc(var(--k) * var(--dest-pad-x)); border: calc(var(--k) * var(--dest-border)) solid rgba(255, 255, 255, 0.85); border-radius: calc(var(--k) * var(--dest-radius)); background: linear-gradient( 171deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 42%, rgba(255, 255, 255, 0.6) 100% ); box-shadow: 0 calc(var(--u) * 25.1) calc(var(--u) * 62.75) rgba(46, 120, 140, 0.36), inset 0 calc(var(--u) * 1.255) 0 calc(var(--u) * 1.255) rgba(255, 255, 255, 0.92); backdrop-filter: blur(calc(var(--u) * 13.8)); text-align: center; white-space: nowrap; translate: -50% -50%; } .how-map__dest-label { color: #5f8a84; font-family: 'JetBrains_Mono'; font-size: calc(var(--k) * var(--dest-label)); line-height: normal; letter-spacing: calc(var(--k) * var(--dest-track)); text-transform: uppercase; } .how-map__dest-name { color: #1e6e68; font-family: 'Tenor_Sans'; font-size: calc(var(--k) * var(--dest-name)); line-height: calc(var(--k) * var(--dest-line)); } .how-city { position: absolute; z-index: 1; top: var(--y); left: var(--x); display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 10) calc(var(--u) * 30) calc(var(--u) * 12); border: calc(var(--u) * 1.255) solid rgba(255, 255, 255, 0.85); border-radius: calc(var(--u) * 32.6); background: linear-gradient( 172deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 42%, rgba(255, 255, 255, 0.6) 100% ); box-shadow: 0 calc(var(--u) * 25.1) calc(var(--u) * 62.75) rgba(46, 120, 140, 0.36), inset 0 calc(var(--u) * 1.255) 0 calc(var(--u) * 1.255) rgba(255, 255, 255, 0.92); backdrop-filter: blur(calc(var(--u) * 13.8)); color: #1e6e68; white-space: nowrap; cursor: pointer; isolation: isolate; translate: -50% -50%; transition: scale 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out; } .how-city::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12)), linear-gradient(159deg, #1e9e8a 0%, #38c7ab 50%, #9be8d8 100%); opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; } .how-city__name { font-family: 'Tenor_Sans'; font-size: calc(var(--u) * var(--city-name)); line-height: 1.6; transition: font-size 0.3s ease-in-out; } .how-city__time { display: flex; align-items: center; gap: calc(var(--u) * 4); color: #123049; font-family: 'JetBrains_Mono'; font-size: calc(var(--u) * 19); line-height: normal; transition: font-size 0.3s ease-in-out, color 0.3s ease-in-out; } .how-city__icon { flex: none; width: calc(var(--u) * 38.3); height: calc(var(--u) * 36.7); color: #07736e; transition: color 0.3s ease-in-out; } .how-city.is-active { z-index: 2; border-color: #9be8d8; color: #fff; } .how-city.is-active::before { opacity: 1; } .how-city.is-active .how-city__time, .how-city.is-active .how-city__icon { color: #fff; } .how-city:focus-visible { outline: 2px solid #1e6e68; outline-offset: 3px; } @media (hover: hover) { .how-city:hover { z-index: 3; border-color: #9be8d8; color: #fff; scale: 1.1; } .how-city:hover::before { opacity: 1; } .how-city:hover .how-city__name { font-size: calc(var(--u) * var(--city-name) + 2px); } .how-city:hover .how-city__time { color: #fff; font-size: calc(var(--u) * 19 + 2px); } .how-city:hover .how-city__icon { color: #fff; } } .how-map__dest { --x: 83.38%; --y: 5.69%; } .how-city--spb { --x: 26.4%; --y: 23.2%; } .how-city--yaroslavl { --x: 24.86%; --y: 33.7%; } .how-city--moscow { --x: 21.65%; --y: 44.2%; } .how-city--sochi { --x: 14.53%; --y: 81.84%; } .how__routes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } .route { position: relative; display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: 36px 20px 32px; border: 1px solid transparent; border-radius: 24px; background: #fff; box-shadow: 0 16px 19px 0 rgba(14, 34, 51, 0.09); isolation: isolate; transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .route::before { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient( 170deg, rgba(155, 232, 216, 0.44) 0%, rgba(255, 255, 255, 0.34) 42%, rgba(255, 255, 255, 0.6) 100% ), #fff; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; } .route[data-how-card] { cursor: pointer; } .route.is-active { cursor: default; border-color: #1e6e68; box-shadow: 0 20px 30px 0 rgba(30, 110, 104, 0.16); } .route.is-active::before { opacity: 1; } .route__header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; } .route__from { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; } .route__label { color: #1e6e68; font-family: 'JetBrains_Mono'; font-size: 14px; font-weight: 400; line-height: normal; letter-spacing: 2.2px; text-transform: uppercase; } .route__city { color: #0e2233; font-family: 'Tenor_Sans'; font-size: 28px; font-weight: 400; line-height: 1.1; } .route__distance { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin-left: auto; text-align: right; } .route__km { color: #1e6e68; font-family: 'Tenor_Sans'; font-size: 28px; line-height: 1; white-space: nowrap; } .route__via { color: #7c90a0; font-family: 'JetBrains_Mono'; font-size: 12px; line-height: normal; letter-spacing: 1.89px; text-transform: uppercase; } .route__list { display: flex; flex-direction: column; gap: 2px; } .route__row { display: flex; align-items: flex-start; gap: 16px; padding: 17px 0 16px; border-top: 1px solid rgba(14, 34, 51, 0.08); } .route__icon { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(30, 110, 104, 0.09); } .route__info { display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; min-width: 0; } .route__name { color: #0e2233; font-size: 14px; font-weight: 500; line-height: normal; } .route__desc { color: #6b7f8f; font-size: 14px; font-weight: 300; line-height: normal; } .route__time { flex: none; padding-top: 2px; color: #123049; font-family: 'JetBrains_Mono'; font-size: 16px; line-height: normal; white-space: nowrap; } .how-cta { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 25px 20px; overflow: hidden; border-radius: 26px; background: linear-gradient(94deg, #0b1b2b 0%, #123049 100%); box-shadow: 0 22px 50px 0 rgba(14, 34, 51, 0.2); color: #f6fafc; } .how-cta::before { content: ''; position: absolute; top: -40%; right: 8%; width: 320px; height: 318px; border-radius: 50%; background: radial-gradient(circle, rgba(46, 158, 144, 0.4) 0%, rgba(46, 158, 144, 0) 68%); filter: blur(22px); pointer-events: none; } .how-cta__text { position: relative; display: flex; flex-direction: column; gap: 11px; max-width: 640px; } .how-cta__title { color: #f6fafc; font-family: 'Tenor_Sans'; font-size: 24px; font-weight: 400; line-height: normal; } .how-cta__desc { color: rgba(223, 233, 242, 0.82); font-size: 14px; font-weight: 300; line-height: 1.66; } .how-cta__actions { position: relative; display: flex; flex-wrap: wrap; gap: 12px 14px; } .how-cta__btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 50px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: normal; white-space: nowrap; transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out, color 0.3s ease-in-out; } .how-cta__btn--primary { background: linear-gradient(120deg, #1e6e68 0%, #2e9e90 100%); color: #fff; box-shadow: 0 14px 16px 0 rgba(30, 110, 104, 0.36); } .how-cta__btn--primary:hover { background: linear-gradient(134deg, #278079 -1.42%, #33a68b 69.5%); box-shadow: 0 14px 24px 0 rgba(30, 110, 104, 0.5); } .how-cta__btn--ghost { border: 1px solid rgba(155, 232, 216, 0.4); background: rgba(255, 255, 255, 0.08); color: #9be8d8; } .how-cta__btn--ghost:hover { background: rgba(155, 232, 216, 0.16); color: #fff; } @media (min-width: 768px) { .page__secondary #after-hero > .container:has(.how) { padding-block: 28px 40px; } .how__map { border-radius: 28px; box-shadow: 0 15px 33px 0 rgba(14, 34, 51, 0.18); } .how-map { --k: calc(100cqw / 786); --u: calc(var(--k) * 0.7335); --city-name: 19.1; --dest-pad-y: 10; --dest-pad-x: 22; --dest-gap: 3; --dest-label: 12; --dest-track: 2.835; --dest-name: 20; --dest-line: 29.46; --dest-radius: 23.93; --dest-border: 0.921; aspect-ratio: 786 / 758; } .how-map__layer--mobile { display: none; } .how-map__layer--tablet { display: block; } .how-map__dest { --x: 83.65%; --y: 17.94%; } .how-city--spb { --x: 22.39%; --y: 16.49%; } .how-city--yaroslavl { --x: 26.08%; --y: 27.04%; } .how-city--moscow { --x: 18.13%; --y: 37.86%; } .how-city--sochi { --x: 11.07%; --y: 79.42%; } .route { padding: 36px 38px 32px; } .route__city { font-size: 32px; line-height: 35px; } .route__km { font-size: 38px; line-height: 38px; } .route__via { font-size: 14px; } .route__row { align-items: center; } .route__name, .route__desc { font-size: 16px; } .route__time { padding-top: 0; } .how-cta { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 44px 48px; background: linear-gradient(101deg, #0b1b2b 0%, #123049 100%); } .how-cta__actions { gap: 14px; } .how-cta__btn { width: auto; padding: 0 20px; } } @media (min-width: 1024px) { .page__secondary #after-hero > .container:has(.how) { padding-block: 48px 104px; } .how__map { border-radius: 35px; box-shadow: 0 28px 63px 0 rgba(14, 34, 51, 0.18); } .how-map { --k: calc(100cqw / 1824); --u: var(--k); --city-name: 20; --dest-pad-y: 25; --dest-pad-x: 30; --dest-gap: 12.5; --dest-label: 17.57; --dest-track: 3.865; --dest-name: 40.16; --dest-line: 40.16; --dest-radius: 32.63; --dest-border: 1.255; aspect-ratio: 1824 / 1216; } .how-map__layer--tablet { display: none; } .how-map__layer--desktop { display: block; } .how-map__dest { --x: 62.31%; --y: 11.15%; } .how-city--spb { --x: 25.77%; --y: 10.9%; } .how-city--yaroslavl { --x: 28.29%; --y: 25.29%; } .how-city--moscow { --x: 22.09%; --y: 36.92%; } .how-city--sochi { --x: 18.7%; --y: 70.19%; } .how__routes { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -10vw; } .how-cta { gap: 20px 40px; background: linear-gradient(120deg, #0b1b2b 0%, #123049 100%); } .how-cta__title { font-size: 30px; } .how-cta__desc { font-size: 15px; } .how-cta__btn { padding: 0 28px; } } .page__secondary #after-hero > .container:has(.biz) { padding-block: 32px 40px; } .biz { display: flex; flex-direction: column; gap: 40px; } .biz__section { display: flex; flex-direction: column; gap: 20px; } .biz__head { display: flex; flex-direction: column; gap: 20px; } .biz__title { color: #0e2233; font-family: 'Tenor_Sans'; font-size: 22px; font-weight: 400; line-height: 27px; } .year-filter { display: flex; align-items: center; gap: 8px; min-width: 0; } .year-filter__label { flex: none; padding-right: 4px; color: #7c90a0; font-family: 'JetBrains_Mono'; font-size: 16px; line-height: normal; letter-spacing: 2px; text-transform: uppercase; } .year-filter__arrow, .year-filter__scroll { display: none; } .year-filter__select-wrap { position: relative; display: inline-flex; align-items: center; } .year-filter__select { padding: 7px 40px 7px 18px; border: 1px solid rgba(14, 34, 51, 0.14); border-radius: 999px; background: #fff; color: #46586a; font-size: 16px; line-height: normal; letter-spacing: 0.48px; appearance: none; cursor: pointer; transition: border-color 0.3s ease-in-out; } .year-filter__select:hover, .year-filter__select:focus-visible { border-color: #1e6e68; outline: none; } .year-filter__chevron { position: absolute; right: 14px; color: #46586a; pointer-events: none; transition: transform 0.3s ease-in-out; } .year-filter__select-wrap.is-open .year-filter__select { border-color: #1e6e68; } .year-filter__select-wrap.is-open .year-filter__chevron { transform: rotate(180deg); } .year-filter__options { --option-height: 40px; position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 100%; max-height: calc(var(--option-height) * 8 + 14px); margin: 0; padding: 6px; border: 1px solid rgba(14, 34, 51, 0.14); border-radius: 18px; background: #fff; box-shadow: 0 12px 32px rgba(14, 34, 51, 0.12); list-style: none; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s ease-in-out; } .year-filter__options:focus { outline: none; } .year-filter__select-wrap.is-open .year-filter__options { opacity: 1; visibility: visible; transform: none; } .year-filter__option { display: flex; align-items: center; height: var(--option-height); padding: 0 12px; border-radius: 12px; color: #46586a; font-size: 16px; letter-spacing: 0.48px; cursor: pointer; } .year-filter__option.is-focused { background: rgba(30, 110, 104, 0.08); } .year-filter__option[aria-selected='true'] { color: #1e6e68; font-weight: 500; } .biz__stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .stat-card { display: flex; flex-direction: column; gap: 9px; padding: 24px 24px 22px; border-radius: 18px; background: #fff; box-shadow: 0 13px 16px 0 rgba(14, 34, 51, 0.08); } .stat-card__label { color: #7c90a0; font-family: 'JetBrains_Mono'; font-size: 14px; line-height: normal; letter-spacing: 1.95px; text-transform: uppercase; } .stat-card__value { color: #0e2233; font-family: 'Tenor_Sans'; font-size: 28px; line-height: 1.3; } .stat-card__note { color: #1e6e68; font-size: 14px; font-weight: 300; line-height: normal; } .biz-table { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .biz-table__card { overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 16px 38px 0 rgba(14, 34, 51, 0.09); } .biz-table__scroll { overflow-x: auto; scrollbar-width: none; } .biz-table__scroll::-webkit-scrollbar { display: none; } .biz-table__scroll:focus-visible { outline: 2px solid #1e6e68; outline-offset: -2px; } .biz-table__table { width: 100%; border-collapse: collapse; font-family: 'JetBrains_Mono'; font-size: 14px; font-weight: 400; line-height: normal; text-align: center; } .biz-table__table th { padding: 12px 10px; border: 1px solid rgba(238, 240, 241, 0.2); background: #0e2233; color: rgba(242, 247, 250, 0.92); font-weight: 400; letter-spacing: 0.5px; } .biz-table__table td { padding: 12px 10px; border: 1px solid rgba(14, 34, 51, 0.07); color: #46586a; white-space: nowrap; } .biz-table__table td:first-child, .biz-table__strong { color: #0e2233; } .biz-table__table tfoot tr { background: rgba(30, 110, 104, 0.07); } .biz-table__table tfoot td { color: #0e2233; font-family: 'Onest'; font-weight: 600; } .biz-table__bar { position: relative; display: none; height: 10px; border-radius: 999px; background: #d5e1e8; cursor: pointer; touch-action: none; } .biz-table.is-scrollable .biz-table__bar { display: block; } .biz-table__thumb { position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; background: linear-gradient(178deg, #1e6e68 1.42%, #2a8f79 69.5%); will-change: transform; } .biz-table.is-dragging { user-select: none; } .biz-table[hidden] { display: none; } .biz__empty { padding: 24px; border-radius: 24px; background: #fff; box-shadow: 0 16px 38px 0 rgba(14, 34, 51, 0.09); color: #46586a; font-size: 16px; font-weight: 300; line-height: normal; text-align: center; } .biz__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } .biz-item { height: 100%; } .biz-cta { position: relative; overflow: hidden; padding: 48px 20px; border-radius: 26px; background: linear-gradient(93deg, #0b1b2b 0%, #123049 100%); box-shadow: 0 22px 50px 0 rgba(14, 34, 51, 0.2); color: #f6fafc; } .biz-cta::before { content: ''; position: absolute; inset: -10% -30% -62% 50%; border-radius: 160px; background: radial-gradient( ellipse at center, rgba(46, 158, 144, 0.4) 0%, rgba(46, 158, 144, 0) 68% ); filter: blur(22px); pointer-events: none; } .biz-cta__inner { position: relative; display: flex; flex-wrap: wrap; gap: 41px 40px; height: 100%; } .biz-cta__text { display: flex; flex: 1 1 460px; flex-direction: column; gap: 18px; max-width: 660px; min-width: 0; } .biz-cta__title { color: #f6fafc; font-family: 'Tenor_Sans'; font-size: 22px; font-weight: 400; line-height: normal; } .biz-cta__desc { color: rgba(223, 233, 242, 0.82); font-size: 16px; font-weight: 300; line-height: 1.5; } .biz-cta__btn { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 100%; height: 50px; margin-top: auto; padding: 0 28px; border-radius: 999px; background: linear-gradient(115deg, #1e6e68 0%, #2e9e90 100%); color: #fff; font-size: 16px; font-weight: 600; line-height: normal; white-space: nowrap; box-shadow: 0 14px 16px 0 rgba(30, 110, 104, 0.36); transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .biz-cta__btn:hover { background: linear-gradient(134deg, #278079 -1.42%, #33a68b 69.5%); box-shadow: 0 14px 24px 0 rgba(30, 110, 104, 0.5); } .biz-events { position: relative; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; padding: 38px 20px 30px; border-radius: 26px; background: linear-gradient( 172deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.34) 42%, rgba(255, 255, 255, 0.6) 100% ); box-shadow: 0 22px 50px 0 rgba(14, 34, 51, 0.2); } .biz-events::before { content: ''; position: absolute; top: -120px; right: -20px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(120, 150, 255, 0.34) 0%, rgba(120, 150, 255, 0) 70%); filter: blur(15px); pointer-events: none; } .biz-events > * { position: relative; } .biz-events__label { margin-bottom: 16px; color: #7c90a0; font-family: 'JetBrains_Mono'; font-size: 16px; line-height: 1; letter-spacing: 2px; text-transform: uppercase; } .biz-events__title { color: #0e2233; font-family: 'Tenor_Sans'; font-size: 22px; font-weight: 400; line-height: normal; } .biz-events__list { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 660px; margin-top: 14px; } .biz-events__item { padding-bottom: 10px; border-bottom: 1px solid rgba(14, 34, 51, 0.14); font-size: 16px; font-weight: 300; line-height: 20px; } .biz-events__event { display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid transparent; transition: border-color 0.3s ease-in-out; } .biz-events__event:hover, .biz-events__event:focus-visible { border-color: #1e6e68; } .biz-events__date { flex: none; background: linear-gradient(163deg, #1e6e68 1.42%, #2a8f79 69.5%); background-clip: text; -webkit-background-clip: text; color: transparent; } .biz-events__name { flex: 1 1 auto; min-width: 0; color: #46586a; } .biz-events__link { display: inline-flex; align-items: center; margin-top: 14px; padding: 15px 0 0; background: linear-gradient(170deg, #1e6e68 1.42%, #2a8f79 69.5%); background-clip: text; -webkit-background-clip: text; color: transparent; font-size: 16px; font-weight: 600; line-height: normal; transition: opacity 0.3s ease-in-out; } .biz-events__link:hover { opacity: 0.7; } @media (min-width: 768px) { .page__secondary #after-hero > .container:has(.biz) { padding-block: 32px 48px; } .biz { gap: 28px; } .biz__section, .biz__head { gap: 28px; } .biz__title { font-size: 28px; line-height: 30px; } .year-filter__label { font-size: 18px; letter-spacing: 2.1px; } .year-filter__select { padding: 8px 46px 8px 20px; font-size: 18px; } .year-filter__options { --option-height: 44px; } .year-filter__option { font-size: 18px; } .biz__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stat-card { gap: 10px; padding: 26px 26px 24px; border-radius: 20px; box-shadow: 0 14px 17px 0 rgba(14, 34, 51, 0.08); } .stat-card__label { font-size: 16px; letter-spacing: 2px; } .stat-card__value { font-size: 38px; line-height: 1.05; } .stat-card__note { font-size: 16px; } .biz-table { gap: 22px; } .biz-table__bar { height: 7px; } .biz-table__table { min-width: 1200px; font-size: 16px; } .biz-table__table th { padding: 16px 18px; letter-spacing: 1.47px; white-space: nowrap; } .biz-table__table td { padding: 16px 18px 15px; } .biz__cards { gap: 28px; } .biz-cta { padding: 48px; background: linear-gradient(101deg, #0b1b2b 0%, #123049 100%); } .biz-cta__title { font-size: 28px; } .biz-cta__desc { line-height: 20px; } .biz-events { padding: 30px 48px 44px; } .biz-events__title { font-size: 28px; } .biz-events__event { width: max-content; } .biz-cta__btn { width: auto; } } @media (min-width: 1024px) { .page__secondary #after-hero > .container:has(.biz) { padding-block: 64px 80px; } .biz { gap: 57px; } .biz__section, .biz__head { gap: 14px; } .biz__section--info { gap: 24px; } .biz__title { font-size: 38px; line-height: 38.4px; } .year-filter { gap: 10px; padding: 8px 0; } .year-filter__select-wrap { display: none; } .year-filter__arrow { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(14, 34, 51, 0.14); border-radius: 50%; background: #fff; color: #1e6e68; transition: border-color 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease-in-out; } .year-filter__arrow--prev svg { transform: rotate(180deg); } .year-filter__arrow:hover:not(:disabled) { border-color: #1e6e68; background: #1e6e68; color: #fff; } .year-filter__arrow:disabled { cursor: default; } .year-filter.is-overflow .year-filter__arrow:disabled { opacity: 0.4; } .year-filter__scroll { display: block; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .year-filter__scroll::-webkit-scrollbar { display: none; } .year-filter__list { display: flex; gap: 10px; width: max-content; } .year-filter__btn { flex: none; padding: 8px 20px; border: 1px solid rgba(14, 34, 51, 0.14); border-radius: 999px; background: #fff; color: #46586a; font-size: 20px; line-height: normal; letter-spacing: 0.48px; scroll-snap-align: start; transition: border-color 0.3s ease-in-out, background 0.3s ease-in-out, color 0.3s ease-in-out; } .year-filter__btn:hover { border-color: #1e6e68; color: #1e6e68; } .year-filter__btn.is-active { border-color: #1e6e68; background: #1e6e68; color: #fff; } .biz__stats { gap: 20px; padding-bottom: 14px; } .biz-table__table { min-width: 0; } .biz-cta__text { flex-basis: 660px; } } @media (min-width: 1200px) { .biz__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; } } .form-modal { opacity: 0; transition: opacity 0.3s ease-in-out; } .form-modal.is-visible { opacity: 1; } .form-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: 840px; max-height: calc(100dvh - 40px); padding: 24px 20px; overflow: hidden auto; border-radius: 24px; background: #fff; box-shadow: 0 18px 24px 0 rgba(10, 23, 36, 0.28); transform: translateY(16px) scale(0.96); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .form-modal.is-visible .form-modal__dialog { transform: none; } .form-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .form-modal__title { color: #0e2233; font-family: 'Tenor_Sans'; font-size: 22px; font-weight: 400; line-height: 32px; } .form-modal__close { position: static; flex: none; width: 32px; height: 32px; } .form-modal__note { margin-top: 8px; color: #5a7484; font-size: 14px; line-height: 20px; } .form-modal .feedback { margin-top: 20px; padding: 0; border-radius: 0; box-shadow: none; } @media (min-width: 768px) { .form-modal__dialog { padding: 40px; } .form-modal__title { font-size: 28px; line-height: 40px; } .form-modal__close { width: 40px; height: 40px; } .form-modal__note { margin-top: 16px; font-size: 16px; } .form-modal .feedback { margin-top: 24px; padding: 36px 40px 22px; border-radius: 20px; } } @media (min-width: 1024px) { .form-modal__title { font-size: 32px; line-height: 46px; } } .souvenirs { --souvenir-radius: 20px; } .souvenir { position: relative; } .souvenir + .souvenir, .souvenir + .gastro { padding-top: var(--souvenir-radius); } .souvenir--light { background: #fff url('/local/templates/main/css/../assets/img/souvenirs-bg.jpg') left top / max(100%, 1100px) auto no-repeat; } .souvenir--forest { background-position: left bottom; } .souvenir--mint { background: #dce8e6; } .souvenir__body { display: flex; flex-direction: column; gap: 10px; max-width: 890px; margin-inline: auto; padding: 50px 25px 40px; text-align: center; } .souvenir__title { color: #7c90a0; font-family: 'JetBrains_Mono'; font-size: 14px; font-weight: 400; line-height: normal; letter-spacing: 1.34px; text-transform: uppercase; text-wrap: balance; } .souvenir__text { color: #33475a; font-size: 16px; font-weight: 400; line-height: 25px; } .souvenir__media { position: relative; z-index: 1; margin-bottom: calc(var(--souvenir-radius) * -1); aspect-ratio: 390 / 290; overflow: hidden; border-radius: var(--souvenir-radius); } .souvenir__img { display: block; width: 100%; height: 100%; object-fit: cover; } .photo-credit { position: absolute; z-index: 2; right: 16px; bottom: 12px; max-width: calc(100% - 32px); color: #f6fafc; font-size: 12px; letter-spacing: 0.04em; text-align: right; text-shadow: 0 1px 8px rgba(6, 13, 31, 0.6); pointer-events: none; } .gastro { background: radial-gradient(50% 50% at 50% 50%, rgba(155, 232, 216, 0.2) 0%, rgba(155, 232, 216, 0) 100%), linear-gradient(101deg, #0b1b2b 0%, #14304a 100%); color: #fff; } .gastro__inner { display: flex; flex-direction: column; align-items: center; padding: 50px 20px 10px; } .gastro__title { margin-bottom: 50px; color: #fff; font-family: 'Tenor_Sans'; font-size: 25px; font-weight: 400; line-height: 35px; letter-spacing: 1.8px; text-align: center; text-wrap: balance; } .gastro__gallery { --gastro-media-ratio: 350 / 200; --gastro-media-radius: 16px; position: relative; width: 100%; max-width: 1040px; } .gastro__media { position: relative; aspect-ratio: var(--gastro-media-ratio); overflow: hidden; border-radius: var(--gastro-media-radius); } .gastro__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .gastro__media .photo-credit { right: auto; bottom: 17px; left: 12px; max-width: calc(100% - 100px); text-align: left; } .gastro__controls { position: absolute; z-index: 4; top: 0; right: 0; left: 0; aspect-ratio: var(--gastro-media-ratio); pointer-events: none; } .gastro__nav { position: absolute; z-index: 4; top: 50%; translate: 0 -50%; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(155, 232, 216, 0.5); background: rgba(6, 13, 31, 0.4); color: #fff; cursor: pointer; pointer-events: auto; transition: all 0.3s ease-in-out; } .gastro__nav svg { width: 16px; height: 16px; } .gastro__nav:hover { scale: 1.12; box-shadow: 0 0 50px 0 rgba(155, 232, 216, 0.5); } .gastro__nav.swiper-button-disabled { opacity: 0.4; cursor: default; } .gastro__nav--prev { left: 12px; } .gastro__nav--next { right: 12px; } .gastro__counter { position: absolute; z-index: 4; right: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(6, 13, 31, 0.45); color: #fff; font-size: 11px; font-weight: 400; line-height: 14px; } .gastro.is-single .gastro__nav, .gastro.is-single .gastro__counter { display: none; } .gastro .gastro__body { width: 100%; padding-inline: 0; } .gastro__label { color: rgba(155, 232, 216, 0.8); } .gastro__text { color: #fff; } @media (min-width: 768px) { .souvenirs { --souvenir-radius: 34px; } .souvenir__body { gap: 20px; max-width: 936px; padding: 50px 48px; } .souvenir__title { font-size: 16px; letter-spacing: 2.86px; } .souvenir__text { font-size: 19px; line-height: 34.96px; } .souvenir__media { aspect-ratio: 835 / 380; } .photo-credit { right: 24px; bottom: 16px; max-width: calc(100% - 48px); font-size: 14px; } .gastro__media .photo-credit { bottom: 15px; left: 19px; } .gastro__inner { padding: 50px 48px 20px; } .gastro__title { font-size: 30px; line-height: 37.2px; } .gastro__gallery { --gastro-media-ratio: 1040 / 586; --gastro-media-radius: 19px; max-width: 701px; } .gastro__nav { width: 38px; height: 38px; } .gastro__nav--prev { left: 19px; } .gastro__nav--next { right: 19px; } .gastro__counter { right: 19px; bottom: 10px; } .gastro__body { max-width: 701px; } } @media (min-width: 1024px) { .souvenir__body { gap: 18px; } .souvenir__media { aspect-ratio: 1920 / 778; } .photo-credit { right: 46px; bottom: 20px; max-width: calc(100% - 92px); font-size: 16px; } .gastro__media .photo-credit { bottom: 21px; left: 28px; } .gastro__inner { padding: 72px 48px 40px; } .gastro__gallery { --gastro-media-radius: 28px; max-width: 1040px; } .gastro__nav { width: 56px; height: 56px; } .gastro__nav svg { width: 20px; height: 20px; } .gastro__nav--prev { left: 28px; } .gastro__nav--next { right: 28px; } .gastro__counter { right: 28px; bottom: 14px; padding: 7px 14px; font-size: 14px; line-height: 18.75px; } .gastro__body { max-width: 840px; } } .page__secondary .hero--kitchen { padding: 285px 0 74px; } .hero--kitchen .hero__container { gap: 0; } .hero__kicker { margin-top: 15px; color: #9be8d8; font-family: 'JetBrains_Mono'; font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: 4.2px; text-transform: uppercase; text-wrap: balance; animation: 1.2s ease 0s 1 normal backwards running hero-fade-in; } .hero--kitchen .hero__title { margin: 19px 0 0; font-size: 28px; line-height: 36px; } .kitchen__intro, .kitchen--ice { background: #fff url('/local/templates/main/css/../assets/img/kitchen-ice-bg.jpg') center / cover no-repeat; } .kitchen__intro + .souvenir { padding-top: 0; } .kitchen .souvenir__body { padding: 34px 20px 30px; } .kitchen__intro .souvenir__body { gap: 0; padding: 32px 20px 24px; } .kitchen__lead { max-width: 774px; margin: 0 auto 16px; color: #33475a; font-size: 16px; font-weight: 400; line-height: 25px; } .kitchen__divider { display: block; width: 62px; height: 1px; margin: 0 auto 16px; background: #1e6e68; } .kitchen__intro .souvenir__title { margin-bottom: 8px; } .kitchen__accent { color: #1e6e68; font-family: 'Tenor_Sans'; font-style: normal; font-weight: 400; } .kitchen__quote { background: radial-gradient(50% 78% at 50% 50%, #fff 0%, rgba(255, 255, 255, 0) 80.14%), #dce8e6; } .kitchen__blockquote { display: flex; flex-direction: column; gap: 10px; max-width: 372px; margin-inline: auto; padding: 34px 20px; text-align: center; } .kitchen__quote-text { color: #1e6e68; font-family: 'Tenor_Sans'; font-size: 16px; font-weight: 400; line-height: 25px; } .kitchen__quote-cite { color: #46586a; font-family: 'JetBrains_Mono'; font-size: 14px; font-weight: 400; line-height: 17px; letter-spacing: 0.9px; text-transform: uppercase; text-wrap: balance; } .kitchen__quote-cite cite { font-style: normal; } .kitchen--dark { background: radial-gradient(43% 43% at 50% 50%, rgba(155, 232, 216, 0.2) 0%, rgba(155, 232, 216, 0) 100%), linear-gradient(159deg, #0b1b2b 0%, #14304a 100%); } .kitchen--dark .souvenir__body { padding: 57px 20px 40px; } .kitchen--dark .souvenir__title { color: rgba(155, 232, 216, 0.8); } .kitchen--dark .souvenir__text { color: rgba(232, 241, 248, 0.9); font-weight: 300; } .kitchen--dark .kitchen__accent { color: #9be8d8; } .kitchen__outro .souvenir__body { gap: 24px; padding: 34px 20px 40px; } .kitchen__final { color: #f6fafc; font-family: 'Tenor_Sans'; font-size: 18px; font-weight: 400; line-height: 25px; text-wrap: balance; } .kitchen-gifts { display: grid; grid-template-columns: 1fr; background: #eff4f7; } .kitchen-gifts__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 22px; padding: 55px 20px 56px; background: radial-gradient( 70% 45% at 100% 100%, rgba(206, 150, 240, 0.41) 0%, rgba(206, 150, 240, 0) 100% ), #eff4f7; } .kitchen-gifts__title { max-width: 312px; color: #0e2233; font-family: 'Tenor_Sans'; font-size: 22px; font-weight: 400; line-height: 30px; letter-spacing: 1.8px; text-transform: uppercase; } .kitchen-gifts__list { display: flex; flex-direction: column; gap: 8px; } .kitchen-gifts__item { position: relative; padding-left: 17px; color: #3c566b; font-size: 16px; font-weight: 300; line-height: 24.18px; } .kitchen-gifts__item::before { content: ''; position: absolute; top: 9px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #1e9e8a; box-shadow: 0 0 4px 0 #1e9e8a; } .kitchen-gifts__btn { display: inline-flex; align-items: center; margin-top: 8px; padding: 15px 29px; border-radius: 999px; background: linear-gradient(168deg, #1e6e68 1.42%, #2a8f79 69.5%); color: #fff; font-size: 15px; font-weight: 700; line-height: normal; text-transform: uppercase; transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out; } .kitchen-gifts__btn:hover { background: linear-gradient(134deg, #278079 -1.42%, #33a68b 69.5%); box-shadow: 0 10px 26px 0 rgba(30, 110, 104, 0.25); } .kitchen-gifts__btn:focus-visible { outline: 2px solid #1e6e68; outline-offset: 3px; } .kitchen-gifts__media { position: relative; aspect-ratio: 390 / 380; overflow: hidden; } .kitchen-gifts__media img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (min-width: 768px) { .page__secondary .hero--kitchen { padding: 340px 0 164px; } .hero__kicker { margin-top: 35px; font-size: 20px; letter-spacing: 6px; } .hero--kitchen .hero__title { margin-top: 4px; font-size: 84px; line-height: 92px; } .kitchen .souvenir__body { padding: 50px 48px 44px; } .kitchen__intro .souvenir__body { padding: 69px 48px 60px; } .kitchen__lead { margin-bottom: 25px; font-size: 20px; line-height: 32px; } .kitchen__divider { margin-bottom: 25px; } .kitchen__intro .souvenir__title { margin-bottom: 18px; } .kitchen__accent { font-size: 21px; } .kitchen__blockquote { gap: 22px; max-width: 780px; padding: 51px 48px; } .kitchen__quote-text { font-size: 20px; line-height: 31px; } .kitchen__quote-cite { font-size: 16px; line-height: normal; letter-spacing: 1.92px; } .kitchen--dark .souvenir__body { padding: 52px 48px 60px; } .kitchen--dark .souvenir__text { font-size: 20px; line-height: 30px; } .kitchen__outro .souvenir__body { gap: 48px; padding: 56px 48px 61px; } .kitchen__final { font-size: 26px; line-height: 37.44px; } .kitchen-gifts { grid-template-columns: 1fr 1fr; } .kitchen-gifts__body { grid-column: 1 / -1; padding: 76px 60px; } .kitchen-gifts__title { max-width: none; font-size: 30px; text-wrap: wrap; line-height: 37.2px; } .kitchen-gifts__item { font-size: 15.5px; } .kitchen-gifts__media { aspect-ratio: 417 / 380; } .kitchen-gifts__media--herring { grid-column: 1 / -1; aspect-ratio: 834 / 381; } } @media (min-width: 1200px) { .page__secondary .hero--kitchen { padding: 512px 0 90px; } .hero--kitchen .hero__title { margin-top: 16px; } .kitchen .souvenir__body { padding: 54px 48px; } .kitchen__intro .souvenir__body { padding: 69px 48px 68px; } .kitchen__lead { margin-bottom: 44px; } .kitchen__divider { margin-bottom: 47px; } .kitchen__blockquote { max-width: 1014px; padding: 72px 48px; } .kitchen__quote-text { font-size: 28px; line-height: 40px; } .kitchen--dark .souvenir__body { padding: 100px 48px 84px; } .kitchen__outro .souvenir__body { gap: 75px; padding: 70px 48px 88px; } .kitchen-gifts__body { grid-column: auto; padding: 55px 60px 56px; } .kitchen-gifts__media--berries { aspect-ratio: 960 / 691; } .kitchen-gifts__media--house, .kitchen-gifts__media--herring { grid-column: auto; aspect-ratio: 960 / 620; } } .has-reveal [data-reveal] { opacity: 0; translate: 0 40px; transition: opacity 0.9s ease, translate 0.9s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0s); } .has-reveal [data-reveal].is-revealed { opacity: 1; translate: 0 0; } .kitchen-gifts__media--berries, .kitchen-gifts__media--herring { --reveal-delay: 0.15s; } /* End */ /* Start:/local/templates/main/components/bitrix/menu/top_mobile/style.min.css?1790917800490*/ ul.left-menu{list-style:none;margin:0;padding:0;margin-bottom:8px;position:relative}ul.left-menu li{padding:10px 16px;background:#f5f5f5 url(/local/templates/main/components/bitrix/menu/top_mobile/images/left_menu_bg.gif) top repeat-x}ul.left-menu li a{font-size:100%;color:#bc262c;font-weight:bold;text-decoration:none}ul.left-menu li a:visited{color:#bc262c}ul.left-menu li a:hover{color:#bc262c}ul.left-menu li a.selected:link,ul.left-menu li a.selected:visited,ul.left-menu li a.selected:active,ul.left-menu li a.selected:hover{color:#fc8d3d} /* End */ /* Start:/local/templates/main/components/bitrix/menu/footer/style.min.css?1790918331490*/ ul.left-menu{list-style:none;margin:0;padding:0;margin-bottom:8px;position:relative}ul.left-menu li{padding:10px 16px;background:#f5f5f5 url(/local/templates/main/components/bitrix/menu/footer/images/left_menu_bg.gif) top repeat-x}ul.left-menu li a{font-size:100%;color:#bc262c;font-weight:bold;text-decoration:none}ul.left-menu li a:visited{color:#bc262c}ul.left-menu li a:hover{color:#bc262c}ul.left-menu li a.selected:link,ul.left-menu li a.selected:visited,ul.left-menu li a.selected:active,ul.left-menu li a.selected:hover{color:#fc8d3d} /* End */ /* /local/templates/main/css/swiper-bundle.min.css?179077884814611 */ /* /local/templates/main/css/main.css?1790778848200125 */ /* /local/templates/main/components/bitrix/menu/top_mobile/style.min.css?1790917800490 */ /* /local/templates/main/components/bitrix/menu/footer/style.min.css?1790918331490 */