@font-face {
font-family: "Craftwork Grotesk";
src: url(../fonts/CraftworkGrotesk-Bold.woff2);
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "Craftwork Grotesk";
src: url(../fonts/CraftworkGrotesk-SemiBold.woff2);
font-weight: 600;
font-display: swap;
}
:root {
--font-family: "Roboto Mono", sans-serif;
--second-family: "Inter", sans-serif;
--third-family: "Craftwork Grotesk", sans-serif;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
font-family: var(--font-family);
font-weight: 400;
font-size: 16px;
color: #ffffff;
}
.body-lock {
overflow: hidden;
}
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
input,
textarea,
button {
outline: none;
border: none;
/* без этого браузер подставляет системный Arial вместо шрифта сайта */
font-family: inherit;
font-size: inherit;
}
img,
svg {
user-select: none;
-webkit-user-drag: none;
}
/* В разметке у картинок проставлены настоящие width/height — по ним браузер
заранее резервирует место и вёрстка не прыгает при загрузке (CLS).
Но там, где ширину задаёт CSS, атрибут height иначе стал бы фактической
высотой и картинка растянулась бы. height: auto возвращает пропорцию;
специфичность у правила минимальная, поэтому любое правило с классом,
задающее высоту явно, по-прежнему выигрывает. */
img {
height: auto;
}
a,
button {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* ----------------BUTTONS start------------------- */
/* базовый стиль */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #e6f355;
border-radius: 32px;
padding: 16px 32px;
font-family: var(--second-family);
font-weight: 600;
line-height: 150%;
letter-spacing: -0.04em;
color: #232332;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
white-space: nowrap;
}
/* только текст */
.btn--primary {
transition: opacity .3s ease-in 0s;
}
.btn--primary:hover {
opacity: 0.9;
}
/* только текст + инверсия цвета */
.btn--inver {
color: #fff;
background-color: #000;
border: 1px solid #e6f355;
padding-top: 15px;
padding-bottom: 15px;
transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.btn--inver:hover {
background-color: #e6f355;
color: #232332;
}
/* текст и стрелка в круге */
.btn--secondary {
height: 60px;
padding-right: 72px;
position: relative;
}
.btn--secondary::before {
content: '';
position: absolute;
right: 4px;
top: 3px;
z-index: 1;
width: 52px;
height: 52px;
border-radius: 50%;
border: 1px solid #232332;
background-color: #232332;
transition: background-color 0.3s ease-in;
}
.btn--secondary::after {
content: '';
position: absolute;
right: 4px;
top: 3px;
z-index: 2;
width: 52px;
height: 52px;
background-color: #fff;
transition: background-color .3s ease-in 0s;
mask: url('data:image/svg+xml;utf8, — выглядели
заголовками, но структуры документа не давали: поисковик не мог разбить
страницу на смысловые куски, а скринридер — построить оглавление.
Теги заменены на h2/h3, классы оставлены прежними.
Отступы не поехали: в начале файла есть общий сброс `* { margin: 0 }`.
А вот жирность браузер заголовкам ставит свою, и там, где класс её не
задаёт, текст стал бы жирнее прежнего. Возвращаем наследование. */
h2.section-permissions__title,
h2.section-freestyle__title,
h2.section-volume__title,
h3.text-content__title {
font-weight: inherit;
}
/* FAQ: заголовок аккордеона лежит внутри , а класть туда h2/h3
нельзя — кнопка принимает только phrasing content. Поэтому обёрнута сама
кнопка. Обёртка должна быть прозрачной по типографике: размер и жирность
задают классы внутренних span'ов. */
.faq-category__heading,
.faq-question__heading {
font: inherit;
}