/*!***********************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css ***!
\***********************************************************************************************************************/
.marker-icon{background-color:#fff;border:1px solid #3388ff;border-radius:50%;margin:-8px 0 0 -8px!important;width:14px!important;height:14px!important;outline:0;transition:opacity ease .3s}.marker-icon-middle{opacity:.7;margin:-6px 0 0 -6px!important;width:10px!important;height:10px!important}.leaflet-pm-draggable{cursor:move!important}.cursor-marker{cursor:crosshair;pointer-events:none;opacity:0}.cursor-marker.visible{opacity:1!important}.geoman-draw-cursor,.geoman-draw-cursor .leaflet-interactive{cursor:crosshair}.rect-style-marker,.rect-start-marker{opacity:0}.rect-style-marker.visible,.rect-start-marker.visible{opacity:1!important}.vertexmarker-disabled{opacity:.7}.pm-text-marker{width:0;height:0}.pm-textarea{box-sizing:content-box;background-color:#fff;color:#000;resize:none;border:none;outline:0;cursor:pointer;border-radius:3px;padding-left:7px;padding-bottom:0;padding-top:4px}.leaflet-pm-draggable .pm-textarea{cursor:move}.pm-textarea:focus,.pm-textarea:focus-within,.pm-textarea:focus-visible,.pm-textarea:active{border:2px solid #000;outline:0}.pm-textarea.pm-disabled{border:none;user-select:none}.pm-textarea.pm-hasfocus{cursor:auto}.leaflet-pm-toolbar .leaflet-buttons-control-button{padding:5px;box-sizing:border-box;position:relative;z-index:3}.leaflet-pm-toolbar .leaflet-pm-actions-container a.leaflet-pm-action:first-child:not(.pos-right),.leaflet-pm-toolbar .leaflet-pm-actions-container a.leaflet-pm-action:last-child.pos-right{border-radius:0}.leaflet-pm-toolbar .button-container a.leaflet-buttons-control-button{border-radius:0}.leaflet-pm-toolbar .button-container:last-child a.leaflet-buttons-control-button{border-radius:0 0 2px 2px}.leaflet-pm-toolbar .button-container:first-child a.leaflet-buttons-control-button{border-radius:2px 2px 0 0}.leaflet-pm-toolbar .button-container:last-child a.leaflet-buttons-control-button{border-bottom:none}.leaflet-pm-toolbar .control-fa-icon{font-size:19px;line-height:24px}.leaflet-pm-toolbar .control-icon{width:100%;height:100%;box-sizing:border-box;background-size:contain;background-repeat:no-repeat;background-position:center center}.leaflet-pm-toolbar .leaflet-pm-icon-marker{background-image:url("data:image/svg+xml,%0A %0A %0A %0A %0A %0A %0A %0A%0A")}.leaflet-pm-toolbar .leaflet-pm-icon-polyline{background-image:url("data:image/svg+xml,%0A")}.leaflet-pm-toolbar .leaflet-pm-icon-circle{background-image:url("data:image/svg+xml,%0A %0A %0A %0A %0A %0A %0A %0A%0A")}.leaflet-pm-toolbar .leaflet-pm-icon-delete{background-image:url("data:image/svg+xml,%0A %0A %0A %0A %0A %0A %0A %0A%0A")}.leaflet-pm-toolbar .leaflet-pm-icon-drag{background-image:url("data:image/svg+xml,%0A")}.leaflet-pm-toolbar .leaflet-pm-icon-cut{background-image:url("data:image/svg+xml,%0A %0A %0A %0A %0A %0A %0A %0A%0A")}.leaflet-pm-toolbar .leaflet-pm-icon-text{background-image:url("data:image/svg+xml,")}.leaflet-buttons-control-button:hover,.leaflet-buttons-control-button:focus{cursor:pointer;background-color:#f4f4f4}.active>.leaflet-buttons-control-button{box-shadow:inset 0 -1px 5px 2px #514d4d4f}.leaflet-buttons-control-text-hide{display:none}.button-container{position:relative}.button-container .leaflet-pm-actions-container{z-index:2;position:absolute;top:0;left:100%;display:none;white-space:nowrap;direction:ltr}.leaflet-right .leaflet-pm-toolbar .button-container .leaflet-pm-actions-container{right:100%;left:auto}.button-container.active .leaflet-pm-actions-container{display:block}.button-container .leaflet-pm-actions-container:not(.pos-right) a.leaflet-pm-action:last-child{border-radius:0 3px 3px 0;border-right:0}.button-container .leaflet-pm-actions-container.pos-right a.leaflet-pm-action:first-child{border-radius:3px 0 0 3px}.button-container .leaflet-pm-actions-container.pos-right a.leaflet-pm-action:last-child{border-right:0}.button-container .leaflet-pm-actions-container .leaflet-pm-action{padding:0 10px;background-color:#666;color:#fff;display:inline-block;width:auto;border-right:1px solid #eee;user-select:none;border-bottom:none;height:29px;line-height:29px;vertical-align:middle}.leaflet-pm-toolbar .button-container:first-child.pos-right.active a.leaflet-buttons-control-button{border-top-left-radius:0}.leaflet-pm-toolbar .button-container:first-child.active:not(.pos-right) a.leaflet-buttons-control-button{border-top-right-radius:0}.button-container .leaflet-pm-actions-container .leaflet-pm-action:hover,.button-container .leaflet-pm-actions-container .leaflet-pm-action:focus{cursor:pointer;background-color:#777}.button-container .leaflet-pm-actions-container .leaflet-pm-action.active-action{background-color:#8e8e8e}.leaflet-pm-toolbar.activeChild{z-index:801}.leaflet-buttons-control-button.pm-disabled{background-color:#f4f4f4}.leaflet-buttons-control-button.pm-disabled>.control-icon{filter:opacity(.6)}.button-container .leaflet-pm-actions-container .pm-action-button-mode.control-icon{filter:brightness(0) invert(1);width:18px}
/*!***********************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/page-map.scss ***!
\***********************************************************************************************************************************************************/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
position: relative;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
-moz-osx-font-smoothing: grayscale; /*(For Firefox)*/
-webkit-font-smoothing: antialiased; /*(For Chrome and Safari)*/
overflow-x: hidden;
}
body {
overflow-x: hidden;
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
blockquote {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
font-size: 1em;
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
text-decoration: none;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
display: block;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0;
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
/*
Custom Fonts
*/
@font-face {
font-family: "Manrope";
src: url(../fonts/Manrope-ExtraLight.woff2) format("woff2");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url(../fonts/Manrope-Light.woff2) format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url(../fonts/Manrope-Regular.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url(../fonts/Manrope-Medium.woff2) format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url(../fonts/Manrope-SemiBold.woff2) format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url(../fonts/Manrope-Bold.woff2) format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url(../fonts/Manrope-ExtraBold.woff2) format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
/*
Fonts Variables
*/
/*
Colors Variables
*/
.btn {
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 12px;
transition: all 500ms ease;
padding: 8px 14px;
}
.btn svg {
transition: all 500ms ease;
width: 16px;
height: 16px;
}
.btn svg path {
transition: all 500ms ease;
}
.btn__blue {
background: #2B82F6;
color: #FFFFFF;
border: 2px solid #2B82F6;
}
.btn__blue:hover {
background: #FFFFFF;
color: #2B82F6;
}
.btn__blue:hover svg path {
stroke: #2B82F6;
}
.btn__white {
color: #1A252C;
background-color: #FFFFFF;
}
.btn__white:hover {
background-color: #1A252C;
color: #FFFFFF;
}
@media only screen and (min-width: 991px) {
.btn {
padding: 16px 28px;
}
}
.container {
max-width: 1320px;
margin: 0 auto;
padding: 0 20px;
width: 100%;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
p,
li,
a {
font-family: "Manrope", sans-serif;
}
.header {
border-bottom: 1px solid #e8eef4;
background: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
padding: 16px 0;
}
.header__holder {
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
}
.header__language {
font-size: 14px;
font-weight: 400;
color: rgba(26, 37, 44, 0.3);
display: flex;
flex-flow: row;
align-items: center;
justify-content: flex-start;
gap: 4px;
}
.header__language .active {
color: #1A252C;
}
.header .header-menu {
list-style-type: none;
padding: 0;
display: none;
flex-flow: column;
gap: 20px;
}
.header .header-menu .menu-item a {
color: #1A252C;
font-size: 14px;
font-weight: 600;
line-height: 1;
transition: all 500ms ease;
}
.header .header-menu .menu-item a:hover {
color: #2B82F6;
}
.header .header-menu .menu-item.current-menu-item a {
color: #2B82F6;
font-weight: 700;
}
.header__right {
display: flex;
flex-flow: row;
align-items: center;
justify-content: flex-end;
gap: 16px;
}
.header__actions {
display: flex;
flex-flow: row;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.header__hamburger-button {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
gap: 2px;
background-color: transparent;
border: 0;
height: 24px;
width: 24px;
padding: 0;
}
.header__hamburger-button:focus {
outline: none;
}
.header__hamburger-button .line {
display: block;
background-color: #1A252C;
height: 2px;
width: 24px;
border-radius: 4px;
}
.header__hamburger {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #FFFFFF;
transform: translateX(200%);
transition: all 500ms ease;
padding-top: 40px;
z-index: 9999999;
}
.header__hamburger.active {
transform: unset;
}
.header__hamburger .header-menu {
display: flex;
flex-flow: column;
list-style-type: none;
padding: 0;
gap: 16px;
}
.header__hamburger .header-menu .menu-item a {
color: #1A252C;
font-size: 18px;
font-weight: 600;
line-height: 1;
transition: all 500ms ease;
}
.header__hamburger .header-menu .menu-item a:hover {
color: #2B82F6;
}
.header__hamburger .header-menu .menu-item.current-menu-item a {
color: #2B82F6;
font-weight: 700;
}
.header__hamburger-button-close {
position: absolute;
top: 30px;
right: 20px;
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
width: 24px;
height: 24px;
padding: 0;
}
.header__hamburger-button-close:focus {
outline: none;
}
.header__hamburger-button-close .line {
display: block;
background-color: #1A252C;
height: 2px;
width: 24px;
border-radius: 4px;
position: absolute;
}
.header__hamburger-button-close .line:first-of-type {
transform: rotate(45deg);
}
.header__hamburger-button-close .line:last-child {
transform: rotate(-45deg);
}
@media only screen and (max-width: 991px) {
.header__btn {
display: none;
}
}
@media only screen and (min-width: 991px) {
.header {
padding: 20px 0;
}
.header .header-menu {
display: flex;
flex-flow: row;
align-items: center;
}
.header__right, .header__actions {
gap: 16px;
}
.header__hamburger-button {
display: none;
}
}
.footer {
padding: 80px 0 40px;
}
.footer__holder {
background-color: #FFFFFF;
padding: 40px 20px;
}
.footer__top {
display: flex;
flex-direction: column;
gap: 48px;
}
.footer__logo img {
display: block;
width: auto;
max-width: 140px;
height: auto;
margin-bottom: 24px;
}
.footer__description {
max-width: 340px;
}
.footer__description p {
margin: 0;
color: #6E7C87;
font-size: 13px;
font-weight: 400;
line-height: 1.45;
}
.footer__menu {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
.footer__menu h3 {
margin: 0 0 20px;
color: #1A252C;
font-size: 14px;
font-weight: 800;
line-height: 1.4;
}
.footer__menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.footer__menu ul li {
margin: 0 0 16px;
}
.footer__menu ul li:last-child {
margin-bottom: 0;
}
.footer__menu ul li a {
color: #6E7C87;
font-size: 13px;
font-weight: 400;
line-height: 1.4;
text-decoration: none;
transition: color 0.2s ease;
}
.footer__menu ul li a:hover {
color: #1A252C;
}
.footer__bottom {
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid rgba(110, 124, 135, 0.2);
}
.footer__bottom p {
margin: 0;
color: #6E7C87;
font-size: 13px;
font-weight: 400;
line-height: 1.4;
}
.footer__socials {
display: flex;
align-items: center;
gap: 16px;
}
.footer__socials a {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.footer__socials a svg {
display: block;
width: 20px;
height: 20px;
}
.footer__socials a svg path {
transition: stroke 0.2s ease;
}
.footer__socials a:hover svg path {
stroke: #1A252C;
}
@media (min-width: 768px) {
.footer__holder {
padding: 56px 48px 40px;
}
.footer__menu {
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.footer__bottom {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
@media (min-width: 992px) {
.footer__holder {
padding: 80px 60px 48px;
}
.footer__top {
display: grid;
grid-template-columns: minmax(300px, 1fr) minmax(550px, 1.5fr);
gap: 60px;
}
.footer__menu {
grid-template-columns: 1fr 1.3fr 0.8fr;
gap: 50px;
}
.footer__bottom {
margin-top: 72px;
padding-top: 64px;
}
}
@media (min-width: 1200px) {
.footer__holder {
padding: 92px 92px 48px;
}
.footer__top {
grid-template-columns: minmax(400px, 1fr) minmax(650px, 1.15fr);
gap: 100px;
}
.footer__menu {
gap: 60px;
}
}
@media (min-width: 1440px) {
.footer__top {
gap: 120px;
}
.footer__menu {
gap: 80px;
}
}
.interactive-map {
border-bottom: 1px solid #e8eef4;
}
.interactive-map__header {
padding: 64px 0 32px;
}
.interactive-map__eyebrow {
display: block;
margin-bottom: 8px;
color: #2B82F6;
font-size: 11px;
font-weight: 800;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.interactive-map__title {
margin: 0;
color: #1A252C;
font-size: 28px;
font-weight: 800;
line-height: 1.15;
}
.interactive-map__description {
max-width: 760px;
margin: 12px 0 0;
color: #6E7C87;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
}
.interactive-map__main {
padding-bottom: 64px;
}
.interactive-map__sidebar {
display: flex;
flex-direction: column;
width: 100%;
padding: 20px;
border-bottom: 1px solid rgba(110, 124, 135, 0.15);
background-color: #FFFFFF;
}
.interactive-map__filters {
display: flex;
flex-direction: column;
gap: 20px;
}
.interactive-map__filter {
display: flex;
flex-direction: column;
gap: 8px;
}
.interactive-map__filter-label {
color: #6E7C87;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
}
.interactive-map__search {
position: relative;
}
.interactive-map__search svg {
position: absolute;
top: 50%;
right: 14px;
color: #6E7C87;
pointer-events: none;
transform: translateY(-50%);
}
.interactive-map__search-input, .interactive-map__select {
width: 100%;
height: 46px;
border-radius: 8px;
border: 1px solid #e8eef4;
background: #fff;
outline: none;
font-weight: 500;
color: #1A252C;
font-family: "Manrope", sans-serif;
font-size: 14px;
transition: border-color 300ms ease;
}
.interactive-map__search-input:focus, .interactive-map__select:focus {
border-color: #2B82F6;
}
.interactive-map__search-input {
padding: 0 44px 0 14px;
}
.interactive-map__search-input::-moz-placeholder {
color: #6E7C87;
}
.interactive-map__search-input::placeholder {
color: #6E7C87;
}
.interactive-map__select {
padding: 0 36px 0 14px;
cursor: pointer;
}
.interactive-map__reset {
align-self: flex-start;
padding: 0;
border: 0;
background: transparent;
color: #6E7C87;
font-size: 14px;
font-weight: 700;
border-radius: 8px;
border: 1px solid #6e7c87;
cursor: pointer;
transition: opacity 300ms ease;
width: 100%;
padding: 12px 0;
}
.interactive-map__reset:hover {
opacity: 0.7;
}
.interactive-map__legend {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid rgba(110, 124, 135, 0.15);
}
.interactive-map__legend-title {
display: block;
margin-bottom: 14px;
color: #6E7C87;
font-size: 12px;
font-weight: 700;
}
.interactive-map__legend-items {
display: flex;
flex-direction: column;
gap: 12px;
}
.interactive-map__legend-item {
display: flex;
align-items: center;
gap: 10px;
color: #1A252C;
font-size: 13px;
font-weight: 600;
line-height: 1;
}
.interactive-map__legend-line {
flex: 0 0 32px;
width: 32px;
height: 6px;
border-radius: 3px;
}
.interactive-map__legend-line--blue {
background-color: #2B82F6;
}
.interactive-map__legend-line--green {
background-color: #34A853;
}
.interactive-map__legend-line--orange {
background-color: #F36211;
}
.interactive-map__layout {
display: flex;
flex-direction: column;
border: 1px solid rgba(110, 124, 135, 0.15);
border-radius: 12px;
background-color: #FFFFFF;
overflow: hidden;
}
.interactive-map__sidebar {
width: 100%;
padding: 20px;
border-bottom: 1px solid rgba(110, 124, 135, 0.15);
}
.interactive-map__map-wrapper {
position: relative;
width: 100%;
}
.interactive-map__map {
width: 100%;
height: 500px;
background-color: #eef3f5;
}
@media only screen and (min-width: 768px) {
.interactive-map__header {
padding: 80px 0 40px;
}
.interactive-map__main {
padding-bottom: 80px;
}
.interactive-map__map {
height: 620px;
}
}
@media only screen and (min-width: 991px) {
.interactive-map__header {
padding: 100px 0 48px;
}
.interactive-map__main {
padding-bottom: 100px;
}
.interactive-map__sidebar {
padding: 24px;
border-right: 1px solid rgba(110, 124, 135, 0.15);
border-bottom: 0;
}
.interactive-map__legend {
margin-top: auto;
padding-top: 32px;
}
.interactive-map__layout {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
min-height: 680px;
}
.interactive-map__sidebar {
padding: 24px;
border-right: 1px solid rgba(110, 124, 135, 0.15);
border-bottom: 0;
}
.interactive-map__map {
height: 680px;
}
}
@media only screen and (min-width: 1200px) {
.interactive-map__layout {
grid-template-columns: 320px minmax(0, 1fr);
}
.interactive-map__map {
height: 720px;
}
}
.project-map-popup .leaflet-popup-content-wrapper {
padding: 0;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(26, 37, 44, 0.12);
}
.project-map-popup .leaflet-popup-content {
width: 260px !important;
margin: 0;
}
.project-map-popup .leaflet-popup-tip {
box-shadow: none;
}
.project-map-card {
padding: 20px;
}
.project-map-card__status {
display: inline-flex;
align-items: center;
margin-bottom: 12px;
font-size: 10px;
font-weight: 600;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.project-map-card__status--planned {
color: #34A853;
}
.project-map-card__status--preparation {
color: #F36211;
}
.project-map-card__status--active {
color: #2B82F6;
}
.project-map-card__title {
margin: 0;
color: #1A252C;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
}
.project-map-card__category {
display: block;
margin-top: 6px;
color: #6E7C87;
font-size: 11px;
line-height: 1.4;
}
.project-map-card__meta {
display: flex;
gap: 32px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid rgba(110, 124, 135, 0.15);
}
.project-map-card__meta div {
display: flex;
flex-direction: column;
gap: 4px;
}
.project-map-card__meta span {
color: #6E7C87;
font-size: 9px;
font-weight: 500;
text-transform: uppercase;
}
.project-map-card__meta strong {
color: #1A252C;
font-size: 12px;
font-weight: 600;
}
.project-map-card__link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: #2B82F6;
font-size: 12px;
font-weight: 600;
text-decoration: none;
}
.route-editor {
width: 260px;
padding: 16px;
background: #FFFFFF;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
font-family: "Manrope", sans-serif;
}
.route-editor__title {
font-size: 16px;
font-weight: 700;
color: #1A252C;
margin-bottom: 12px;
}
.route-editor__select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 12px;
background: #FFFFFF;
}
.route-editor button {
display: block;
width: 100%;
padding: 10px 12px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
margin-bottom: 8px;
transition: all 200ms ease;
}
.route-editor button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.route-editor__edit {
background: #2B82F6;
color: #FFFFFF;
}
.route-editor__copy {
background: #34A853;
color: #FFFFFF;
}
.route-editor__message {
margin-top: 10px;
font-size: 12px;
line-height: 1.5;
color: #6E7C87;
}
.route-editor__fallback {
margin-top: 10px;
}
/*!*******************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/scss/main.scss ***!
\*******************************************************************************************************************************************************/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
position: relative;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
-moz-osx-font-smoothing: grayscale; /*(For Firefox)*/
-webkit-font-smoothing: antialiased; /*(For Chrome and Safari)*/
overflow-x: hidden;
}
body {
overflow-x: hidden;
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
blockquote {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
font-size: 1em;
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
text-decoration: none;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
display: block;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox],
[type=radio] {
box-sizing: border-box;
padding: 0;
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
/*
Custom Fonts
*/
@font-face {
font-family: "Manrope";
src: url(../fonts/Manrope-ExtraLight.woff2) format("woff2");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url(../fonts/Manrope-Light.woff2) format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url(../fonts/Manrope-Regular.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url(../fonts/Manrope-Medium.woff2) format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url(../fonts/Manrope-SemiBold.woff2) format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url(../fonts/Manrope-Bold.woff2) format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Manrope";
src: url(../fonts/Manrope-ExtraBold.woff2) format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
/*
Fonts Variables
*/
/*
Colors Variables
*/
.btn {
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 12px;
transition: all 500ms ease;
padding: 8px 14px;
}
.btn svg {
transition: all 500ms ease;
width: 16px;
height: 16px;
}
.btn svg path {
transition: all 500ms ease;
}
.btn__blue {
background: #2B82F6;
color: #FFFFFF;
border: 2px solid #2B82F6;
}
.btn__blue:hover {
background: #FFFFFF;
color: #2B82F6;
}
.btn__blue:hover svg path {
stroke: #2B82F6;
}
.btn__white {
color: #1A252C;
background-color: #FFFFFF;
}
.btn__white:hover {
background-color: #1A252C;
color: #FFFFFF;
}
@media only screen and (min-width: 991px) {
.btn {
padding: 16px 28px;
}
}
.container {
max-width: 1320px;
margin: 0 auto;
padding: 0 20px;
width: 100%;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
p,
li,
a {
font-family: "Manrope", sans-serif;
}
.header {
border-bottom: 1px solid #e8eef4;
background: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
padding: 16px 0;
}
.header__holder {
display: flex;
flex-flow: row;
align-items: center;
justify-content: space-between;
}
.header__language {
font-size: 14px;
font-weight: 400;
color: rgba(26, 37, 44, 0.3);
display: flex;
flex-flow: row;
align-items: center;
justify-content: flex-start;
gap: 4px;
}
.header__language .active {
color: #1A252C;
}
.header .header-menu {
list-style-type: none;
padding: 0;
display: none;
flex-flow: column;
gap: 20px;
}
.header .header-menu .menu-item a {
color: #1A252C;
font-size: 14px;
font-weight: 600;
line-height: 1;
transition: all 500ms ease;
}
.header .header-menu .menu-item a:hover {
color: #2B82F6;
}
.header .header-menu .menu-item.current-menu-item a {
color: #2B82F6;
font-weight: 700;
}
.header__right {
display: flex;
flex-flow: row;
align-items: center;
justify-content: flex-end;
gap: 16px;
}
.header__actions {
display: flex;
flex-flow: row;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.header__hamburger-button {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
gap: 2px;
background-color: transparent;
border: 0;
height: 24px;
width: 24px;
padding: 0;
}
.header__hamburger-button:focus {
outline: none;
}
.header__hamburger-button .line {
display: block;
background-color: #1A252C;
height: 2px;
width: 24px;
border-radius: 4px;
}
.header__hamburger {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #FFFFFF;
transform: translateX(200%);
transition: all 500ms ease;
padding-top: 40px;
z-index: 9999999;
}
.header__hamburger.active {
transform: unset;
}
.header__hamburger .header-menu {
display: flex;
flex-flow: column;
list-style-type: none;
padding: 0;
gap: 16px;
}
.header__hamburger .header-menu .menu-item a {
color: #1A252C;
font-size: 18px;
font-weight: 600;
line-height: 1;
transition: all 500ms ease;
}
.header__hamburger .header-menu .menu-item a:hover {
color: #2B82F6;
}
.header__hamburger .header-menu .menu-item.current-menu-item a {
color: #2B82F6;
font-weight: 700;
}
.header__hamburger-button-close {
position: absolute;
top: 30px;
right: 20px;
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
width: 24px;
height: 24px;
padding: 0;
}
.header__hamburger-button-close:focus {
outline: none;
}
.header__hamburger-button-close .line {
display: block;
background-color: #1A252C;
height: 2px;
width: 24px;
border-radius: 4px;
position: absolute;
}
.header__hamburger-button-close .line:first-of-type {
transform: rotate(45deg);
}
.header__hamburger-button-close .line:last-child {
transform: rotate(-45deg);
}
@media only screen and (max-width: 991px) {
.header__btn {
display: none;
}
}
@media only screen and (min-width: 991px) {
.header {
padding: 20px 0;
}
.header .header-menu {
display: flex;
flex-flow: row;
align-items: center;
}
.header__right, .header__actions {
gap: 16px;
}
.header__hamburger-button {
display: none;
}
}
.footer {
padding: 80px 0 40px;
}
.footer__holder {
background-color: #FFFFFF;
padding: 40px 20px;
}
.footer__top {
display: flex;
flex-direction: column;
gap: 48px;
}
.footer__logo img {
display: block;
width: auto;
max-width: 140px;
height: auto;
margin-bottom: 24px;
}
.footer__description {
max-width: 340px;
}
.footer__description p {
margin: 0;
color: #6E7C87;
font-size: 13px;
font-weight: 400;
line-height: 1.45;
}
.footer__menu {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
.footer__menu h3 {
margin: 0 0 20px;
color: #1A252C;
font-size: 14px;
font-weight: 800;
line-height: 1.4;
}
.footer__menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.footer__menu ul li {
margin: 0 0 16px;
}
.footer__menu ul li:last-child {
margin-bottom: 0;
}
.footer__menu ul li a {
color: #6E7C87;
font-size: 13px;
font-weight: 400;
line-height: 1.4;
text-decoration: none;
transition: color 0.2s ease;
}
.footer__menu ul li a:hover {
color: #1A252C;
}
.footer__bottom {
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid rgba(110, 124, 135, 0.2);
}
.footer__bottom p {
margin: 0;
color: #6E7C87;
font-size: 13px;
font-weight: 400;
line-height: 1.4;
}
.footer__socials {
display: flex;
align-items: center;
gap: 16px;
}
.footer__socials a {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
}
.footer__socials a svg {
display: block;
width: 20px;
height: 20px;
}
.footer__socials a svg path {
transition: stroke 0.2s ease;
}
.footer__socials a:hover svg path {
stroke: #1A252C;
}
@media (min-width: 768px) {
.footer__holder {
padding: 56px 48px 40px;
}
.footer__menu {
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.footer__bottom {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
@media (min-width: 992px) {
.footer__holder {
padding: 80px 60px 48px;
}
.footer__top {
display: grid;
grid-template-columns: minmax(300px, 1fr) minmax(550px, 1.5fr);
gap: 60px;
}
.footer__menu {
grid-template-columns: 1fr 1.3fr 0.8fr;
gap: 50px;
}
.footer__bottom {
margin-top: 72px;
padding-top: 64px;
}
}
@media (min-width: 1200px) {
.footer__holder {
padding: 92px 92px 48px;
}
.footer__top {
grid-template-columns: minmax(400px, 1fr) minmax(650px, 1.15fr);
gap: 100px;
}
.footer__menu {
gap: 60px;
}
}
@media (min-width: 1440px) {
.footer__top {
gap: 120px;
}
.footer__menu {
gap: 80px;
}
}