fix
This commit is contained in:
@@ -76,11 +76,34 @@
|
||||
}
|
||||
|
||||
.home-categories,
|
||||
.home-steps {
|
||||
.home-showcase,
|
||||
.home-steps,
|
||||
.home-delivery,
|
||||
.home-portfolio,
|
||||
.home-reviews,
|
||||
.home-faq,
|
||||
.home-final {
|
||||
padding: 70px 0;
|
||||
}
|
||||
|
||||
.home-categories__head {
|
||||
.home-categories__inner,
|
||||
.home-showcase__inner,
|
||||
.home-steps__inner,
|
||||
.home-delivery__inner,
|
||||
.home-portfolio__inner,
|
||||
.home-reviews__inner,
|
||||
.home-faq__inner,
|
||||
.home-final__inner {
|
||||
width: min(100% - 40px, var(--container));
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.home-categories__head,
|
||||
.home-showcase__head,
|
||||
.home-delivery__head,
|
||||
.home-portfolio__head,
|
||||
.home-reviews__head,
|
||||
.home-faq__head {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
@@ -123,6 +146,44 @@
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.home-showcase__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 22px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.home-product-card {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.home-product-card__image {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.home-product-card__content {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.home-product-card__title {
|
||||
font-size: var(--fz-md);
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.home-product-card__price {
|
||||
color: var(--color-accent-dark);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.home-steps {
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
@@ -169,3 +230,127 @@
|
||||
color: #ffffff;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.home-delivery__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 22px;
|
||||
margin: 30px 0 10px;
|
||||
}
|
||||
|
||||
.home-portfolio {
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.home-portfolio__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr 0.9fr;
|
||||
grid-auto-rows: 260px;
|
||||
gap: 18px;
|
||||
margin: 30px 0 10px;
|
||||
}
|
||||
|
||||
.home-portfolio__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--radius-md);
|
||||
object-fit: cover;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.home-portfolio__image:first-child {
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.home-reviews__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 22px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.home-review-card {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
min-height: 220px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
padding: 26px;
|
||||
box-shadow: var(--shadow-soft);
|
||||
}
|
||||
|
||||
.home-review-card__text {
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.home-review-card__author {
|
||||
align-self: end;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.home-faq {
|
||||
background: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.home-faq__list {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
max-width: 860px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.home-faq__item {
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
padding: 20px 24px;
|
||||
}
|
||||
|
||||
.home-faq__question {
|
||||
cursor: pointer;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.home-faq__answer {
|
||||
margin-top: 12px;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.home-final__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--color-text);
|
||||
color: #ffffff;
|
||||
padding: 42px;
|
||||
}
|
||||
|
||||
.home-final__content {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.home-final__title {
|
||||
font-size: var(--fz-xl);
|
||||
font-weight: 800;
|
||||
line-height: var(--lh-tight);
|
||||
}
|
||||
|
||||
.home-final__text {
|
||||
color: rgba(255, 255, 255, 0.76);
|
||||
}
|
||||
|
||||
.home-final__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.home-final .button-link {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@@ -84,6 +84,69 @@
|
||||
color: var(--color-accent-dark);
|
||||
}
|
||||
|
||||
.site-header__menu-item--catalog {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.site-header__menu-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.site-header__menu-button::after {
|
||||
content: "";
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-right: 2px solid currentColor;
|
||||
border-bottom: 2px solid currentColor;
|
||||
transform: rotate(45deg) translateY(-2px);
|
||||
}
|
||||
|
||||
.site-header__catalog {
|
||||
position: absolute;
|
||||
top: calc(100% + 14px);
|
||||
left: 50%;
|
||||
z-index: 70;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(180px, 1fr));
|
||||
gap: 6px;
|
||||
width: 420px;
|
||||
border: 1px solid var(--color-line);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-surface);
|
||||
padding: 14px;
|
||||
box-shadow: var(--shadow-soft);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, 8px);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.site-header__menu-item--catalog:hover .site-header__catalog,
|
||||
.site-header__menu-item--catalog.is-open .site-header__catalog {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.site-header__catalog-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 42px;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-muted);
|
||||
font-size: var(--fz-sm);
|
||||
font-weight: 700;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.site-header__catalog-link:hover {
|
||||
background: var(--color-surface-soft);
|
||||
color: var(--color-accent-dark);
|
||||
}
|
||||
|
||||
.site-header__cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -58,10 +58,27 @@
|
||||
|
||||
.service-details__grid,
|
||||
.home-categories__grid,
|
||||
.home-delivery__grid,
|
||||
.home-reviews__grid,
|
||||
.site-footer__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.home-showcase__grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.home-portfolio__grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-auto-rows: auto;
|
||||
}
|
||||
|
||||
.home-portfolio__image,
|
||||
.home-portfolio__image:first-child {
|
||||
aspect-ratio: 1;
|
||||
grid-row: auto;
|
||||
}
|
||||
|
||||
.service-hero__inner,
|
||||
.service-details__inner,
|
||||
.service-process__inner,
|
||||
@@ -86,6 +103,12 @@
|
||||
aspect-ratio: 1;
|
||||
}
|
||||
|
||||
.home-final__inner {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
@@ -123,6 +146,10 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.home-showcase__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.lead-form,
|
||||
.policy-content__block {
|
||||
padding: 20px;
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
var menu = document.querySelector('[data-mobile-menu]');
|
||||
var toggle = document.querySelector('[data-menu-toggle]');
|
||||
var closeNodes = document.querySelectorAll('[data-menu-close]');
|
||||
var catalogItem = document.querySelector('.site-header__menu-item--catalog');
|
||||
var catalogButton = document.querySelector('.site-header__menu-button');
|
||||
var cookieNote = document.querySelector('[data-cookie-note]');
|
||||
var cookieButton = document.querySelector('[data-cookie-accept]');
|
||||
|
||||
@@ -29,6 +31,21 @@
|
||||
});
|
||||
}
|
||||
|
||||
if (catalogItem && catalogButton) {
|
||||
catalogButton.addEventListener('click', function (event) {
|
||||
event.stopPropagation();
|
||||
var isOpen = catalogItem.classList.toggle('is-open');
|
||||
catalogButton.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
if (!catalogItem.contains(event.target)) {
|
||||
catalogItem.classList.remove('is-open');
|
||||
catalogButton.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (cookieNote && cookieButton && window.localStorage) {
|
||||
if (localStorage.getItem('sevTortCookieAccepted') !== 'yes') {
|
||||
cookieNote.hidden = false;
|
||||
|
||||
Reference in New Issue
Block a user