@font-face {
font-family: Geometria;
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/geometria-narrow-300.woff2") format("woff2");
}
@font-face {
font-family: Geometria;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/geometria-narrow-400.woff2") format("woff2");
}
@font-face {
font-family: Geometria;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/geometria-narrow-700.woff2") format("woff2");
}
@font-face {
font-family: Geometria;
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/geometria-narrow-800.woff2") format("woff2");
}
@font-face {
font-family: Geometria;
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("../fonts/geometria-narrow-900.woff2") format("woff2");
}
@font-face {
font-family: Geometria;
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/geometria-narrow-znaki-300.woff2") format("woff2");
unicode-range: U+00B0, U+00B7;
}
@font-face {
font-family: Geometria;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/geometria-narrow-znaki-400.woff2") format("woff2");
unicode-range: U+00B0, U+00B7;
}
@font-face {
font-family: Geometria;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/geometria-narrow-znaki-700.woff2") format("woff2");
unicode-range: U+00B0, U+00B7;
}
@font-face {
font-family: Geometria;
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("../fonts/geometria-narrow-znaki-800.woff2") format("woff2");
unicode-range: U+00B0, U+00B7;
}
@font-face {
font-family: Geometria;
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("../fonts/geometria-narrow-znaki-900.woff2") format("woff2");
unicode-range: U+00B0, U+00B7;
}
:root {
--mst-fon:   #FFFFFF;
--mst-amber: #FCBE0C;
--mst-card:  #FED153;
--mst-field: #FFE497;
--mst-focus: #FC8E0C;
--mst-ink:   #000000;
--mst-grey:  #313131;
--mst-white: #FFFFFF;
--mst-muted: #858585;
--mst-krem: #FFF8EA;
--mst-ohra: #D99A00;
--mst-polya: clamp(30px, 5vw, 50px);
--mst-polosa: 1340px;
}
body {
margin: 0;
background: var(--mst-fon) url("../img/fon-pk.svg") center top / 100% auto repeat-y;
color: var(--mst-ink);
font-family: Geometria, sans-serif;
font-size: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem);
font-weight: 300;
letter-spacing: -.1px;
line-height: 1.4;
}
button,
input,
select,
textarea {
font-family: inherit;
}
@media (max-width: 1199px) {
body {
background-image: url("../img/fon-planshet.svg");
}
}
@media (max-width: 767px) {
body {
background-image: url("../img/fon-telefon.svg");
}
}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
letter-spacing: -.1px;
line-height: 1.125;
}
h1 {
font-size: clamp(2.15rem, 2.15rem + ((1vw - 0.2rem) * 1.333), 3rem);
}
h2 {
font-size: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.392), 2rem);
}
h3 {
font-size: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.392), 1.375rem);
}
a {
color: var(--mst-grey);
text-decoration-thickness: 1px;
text-underline-offset: .1em;
}
a:hover {
color: var(--mst-ink);
text-decoration: none;
}
:focus-visible {
outline: 2px solid var(--mst-grey);
outline-offset: 2px;
}
img {
max-width: 100%;
height: auto;
}
img:is([sizes="auto" i], [sizes^="auto," i]) {
contain-intrinsic-size: 3000px 1500px;
}
blockquote, caption, figcaption, h1, h2, h3, h4, h5, h6, p {
text-wrap: pretty;
}
.mst-main {
margin-top: var(--mst-polya);
padding-inline: var(--mst-polya);
}
:root :where(.mst-main) > * {
max-width: var(--mst-polosa);
margin-inline: auto;
}
:root :where(.mst-main) > * {
margin-block-start: 1.2rem;
margin-block-end: 0;
}
:root :where(.mst-main) > :first-child {
margin-block-start: 0;
}
:root :where(.mst-main) > :last-child {
margin-block-end: 0;
}
.mst-skip {
position: absolute;
left: -9999px;
z-index: 100;
padding: 12px 20px;
background: var(--mst-white);
border-radius: 0 0 12px 0;
font-size: .95rem;
}
.mst-skip:focus {
left: 0;
top: 0;
}