f1den
29d10ce4cf
Каталог, карточка товара, корзина, оформление заказа и блог на WooCommerce. Стили разложены по слоям: токены из Figma, база, компоненты, страницы, брейкпоинты. Цвета, типографика, радиусы и отступы взяты из Variables и текстовых стилей макета, ниже по слоям хардкода нет. Иконки — Phosphor, вставляются инлайном как SVG, символами ничего не рисуется. Стили WooCommerce отключены, вёрстка своя, !important не используется.
241 lines
4.1 KiB
CSS
241 lines
4.1 KiB
CSS
/*
|
|
* Header, shared page furniture and the footer
|
|
*/
|
|
|
|
/* Header */
|
|
.site-header {
|
|
position: relative;
|
|
z-index: 30;
|
|
background: var(--bg-main);
|
|
}
|
|
|
|
.header-inner {
|
|
display: flex;
|
|
height: 88px;
|
|
align-items: center;
|
|
gap: 37px;
|
|
border-bottom: 1px solid var(--border-main);
|
|
}
|
|
|
|
.brand {
|
|
display: grid;
|
|
width: 105px;
|
|
height: 42px;
|
|
flex: 0 0 105px;
|
|
align-items: center;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.brand-mark,
|
|
.brand img {
|
|
width: 105px;
|
|
height: auto;
|
|
}
|
|
|
|
.main-nav {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.main-nav ul {
|
|
display: flex;
|
|
margin: 0;
|
|
padding: 0;
|
|
align-items: center;
|
|
gap: 24px;
|
|
list-style: none;
|
|
}
|
|
|
|
.main-nav a {
|
|
display: block;
|
|
padding: 8px 0;
|
|
font: var(--control-m);
|
|
}
|
|
|
|
/* Square icon controls all share the .icon-button component. */
|
|
.cart-link,
|
|
.slider-controls button,
|
|
.gallery-arrow,
|
|
.gallery-favorite {
|
|
display: inline-grid;
|
|
width: 56px;
|
|
height: 56px;
|
|
padding: 0;
|
|
place-items: center;
|
|
border: 1px solid var(--border-control);
|
|
border-radius: var(--br-btn-m);
|
|
color: var(--text-main);
|
|
background: var(--bg-main);
|
|
cursor: pointer;
|
|
transition:
|
|
border-color var(--motion-fast),
|
|
background-color var(--motion-fast),
|
|
color var(--motion-fast);
|
|
}
|
|
|
|
.cart-link:hover,
|
|
.slider-controls button:hover,
|
|
.gallery-arrow:hover,
|
|
.gallery-favorite:hover {
|
|
border-color: var(--border-control-hover);
|
|
background: var(--bg-button-light-hover);
|
|
}
|
|
|
|
.cart-link:active,
|
|
.slider-controls button:active,
|
|
.gallery-arrow:active,
|
|
.gallery-favorite:active {
|
|
border-color: var(--border-control-pressed);
|
|
background: var(--bg-button-light-pressed);
|
|
}
|
|
|
|
.cart-link:focus-visible,
|
|
.slider-controls button:focus-visible,
|
|
.gallery-arrow:focus-visible,
|
|
.gallery-favorite:focus-visible {
|
|
outline: 2px solid var(--border-input-focus);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.menu-toggle {
|
|
display: none;
|
|
width: 48px;
|
|
height: 48px;
|
|
padding: 0;
|
|
place-items: center;
|
|
border: 1px solid var(--border-control);
|
|
border-radius: var(--br-btn-m);
|
|
color: var(--text-main);
|
|
background: var(--bg-main);
|
|
transition:
|
|
border-color var(--motion-fast),
|
|
background-color var(--motion-fast);
|
|
}
|
|
|
|
.menu-toggle:hover {
|
|
border-color: var(--border-control-hover);
|
|
background: var(--bg-button-light-hover);
|
|
}
|
|
|
|
/* Shared typography and controls */
|
|
.breadcrumbs {
|
|
display: flex;
|
|
margin: 32px 0 16px;
|
|
padding: 0;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
color: var(--text-caption);
|
|
list-style: none;
|
|
font: var(--control-s);
|
|
}
|
|
|
|
.breadcrumbs li:not(:last-child)::after {
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
margin-left: 8px;
|
|
border-radius: 50%;
|
|
background: var(--text-disable);
|
|
content: "";
|
|
vertical-align: 2px;
|
|
}
|
|
|
|
.breadcrumbs li:last-child {
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.page-heading,
|
|
.section-title {
|
|
margin: 0;
|
|
font: var(--h2);
|
|
letter-spacing: var(--ls-tight);
|
|
}
|
|
|
|
.page-heading {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.section {
|
|
padding: 64px 0;
|
|
}
|
|
|
|
.section-head {
|
|
display: flex;
|
|
margin-bottom: 28px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
}
|
|
|
|
.slider-controls {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.slider-controls .icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.slider-controls button:disabled {
|
|
cursor: default;
|
|
opacity: 0.35;
|
|
}
|
|
|
|
.gallery-arrow .icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
/* Footer */
|
|
.site-footer {
|
|
height: 176px;
|
|
padding: 30px 0 22px;
|
|
flex: 0 0 auto;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.page-template-page-catalog .site-main {
|
|
padding-bottom: 24px;
|
|
}
|
|
|
|
.catalog-grid-section {
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.products-section {
|
|
padding-bottom: 48px;
|
|
}
|
|
|
|
.categories-section {
|
|
padding-top: 16px;
|
|
padding-bottom: 48px;
|
|
}
|
|
|
|
.footer-top {
|
|
height: 70px;
|
|
border-bottom: 1px dashed var(--border-secondary);
|
|
}
|
|
|
|
.footer-bottom {
|
|
display: grid;
|
|
padding-top: 20px;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center;
|
|
gap: 24px;
|
|
font: var(--control-s);
|
|
}
|
|
|
|
.footer-bottom > span:nth-child(2) {
|
|
display: flex;
|
|
gap: 28px;
|
|
}
|
|
|
|
.footer-bottom a,
|
|
.footer-bottom > span:last-child {
|
|
color: var(--text-caption);
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--border-secondary);
|
|
text-decoration-style: dashed;
|
|
text-underline-offset: 4px;
|
|
}
|