f1den
29d10ce4cf
Каталог, карточка товара, корзина, оформление заказа и блог на WooCommerce. Стили разложены по слоям: токены из Figma, база, компоненты, страницы, брейкпоинты. Цвета, типографика, радиусы и отступы взяты из Variables и текстовых стилей макета, ниже по слоям хардкода нет. Иконки — Phosphor, вставляются инлайном как SVG, символами ничего не рисуется. Стили WooCommerce отключены, вёрстка своя, !important не используется.
187 lines
2.5 KiB
CSS
187 lines
2.5 KiB
CSS
/*
|
|
* Base layer: font faces, reset, document defaults and the type scale.
|
|
* Only element selectors and utility classes live here.
|
|
*/
|
|
|
|
@font-face {
|
|
font-family: Inter;
|
|
src: url("../fonts/Inter.ttf") format("truetype");
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
html::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
margin: 0;
|
|
flex-direction: column;
|
|
color: var(--text-main);
|
|
background: var(--bg-main);
|
|
font: var(--body-m);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
body.menu-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
img,
|
|
svg {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
img {
|
|
height: auto;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ------------------------------------------------------------ type scale --- */
|
|
|
|
h1,
|
|
.h1 {
|
|
margin: 0;
|
|
font: var(--h1);
|
|
letter-spacing: var(--ls-tight);
|
|
}
|
|
|
|
h2,
|
|
.h2 {
|
|
margin: 0;
|
|
font: var(--h2);
|
|
letter-spacing: var(--ls-tight);
|
|
}
|
|
|
|
h3,
|
|
.h3 {
|
|
margin: 0;
|
|
font: var(--h3);
|
|
letter-spacing: var(--ls-tight);
|
|
}
|
|
|
|
h4,
|
|
.h4 {
|
|
margin: 0;
|
|
font: var(--h4);
|
|
letter-spacing: var(--ls-tight);
|
|
}
|
|
|
|
h5,
|
|
.h5 {
|
|
margin: 0;
|
|
font: var(--h5);
|
|
letter-spacing: var(--ls-tight-s);
|
|
}
|
|
|
|
.lead {
|
|
font: var(--lead);
|
|
}
|
|
|
|
.control-m {
|
|
font: var(--control-m);
|
|
}
|
|
|
|
.control-s {
|
|
font: var(--control-s);
|
|
}
|
|
|
|
.caption {
|
|
font: var(--caption);
|
|
}
|
|
|
|
.upper-l,
|
|
.upper-m,
|
|
.upper-s {
|
|
letter-spacing: var(--ls-upper);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.upper-l {
|
|
font: var(--upper-l);
|
|
}
|
|
|
|
.upper-m {
|
|
font: var(--upper-m);
|
|
}
|
|
|
|
.upper-s {
|
|
font: var(--upper-s);
|
|
}
|
|
|
|
.accent-m {
|
|
font: var(--accent-m);
|
|
}
|
|
|
|
/* --------------------------------------------------------------- layout --- */
|
|
|
|
.container {
|
|
width: min(calc(100% - var(--container-gutter) * 2), var(--container));
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.site-main {
|
|
display: block;
|
|
min-height: 0;
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
.screen-reader-text {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
transition-duration: 1ms !important;
|
|
animation-duration: 1ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|