task 17081 | сделал "Какие заказы доступны"
This commit is contained in:
web_103.2 committed
1 parent
5026edff9b
commit
42c29094c6
6 files changed
+932
No files matched your search
@@ -7847,3 +7847,432 @@ h4 {
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.delivery-orders {
|
||||
--orders-heading: #172d38;
|
||||
--orders-text: #595757;
|
||||
--orders-accent: #ae001b;
|
||||
box-sizing: border-box;
|
||||
width: min(1280px, calc(100% - 40px));
|
||||
margin: var(--space-section) auto 0;
|
||||
color: var(--orders-heading);
|
||||
font-family: "Onest", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.delivery-orders *,
|
||||
.delivery-orders *::before,
|
||||
.delivery-orders *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.delivery-orders__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.delivery-orders__title {
|
||||
margin: 0;
|
||||
font-size: 56px;
|
||||
font-weight: 700;
|
||||
line-height: 62px;
|
||||
letter-spacing: -0.56px;
|
||||
}
|
||||
|
||||
.delivery-orders__description {
|
||||
margin: 0;
|
||||
color: var(--orders-text);
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.delivery-orders__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-template-rows: 396px 285px;
|
||||
grid-auto-rows: 396px;
|
||||
gap: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.delivery-orders__wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.delivery-orders__card {
|
||||
--blur-start: 229px;
|
||||
--blur-end: 462px;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 40px;
|
||||
background: linear-gradient(#f5f5f9, #f9f9f9);
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.delivery-orders__card::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset: 0;
|
||||
background: rgb(174 0 27 / 50%);
|
||||
content: "";
|
||||
opacity: 0;
|
||||
transition: opacity 180ms ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__image {
|
||||
position: absolute;
|
||||
display: block;
|
||||
max-width: none;
|
||||
object-fit: cover;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__image--cover {
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.delivery-orders__card:not(a) {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.delivery-orders__image--food {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 537px;
|
||||
height: 732px;
|
||||
}
|
||||
|
||||
.delivery-orders__image--groceries-backdrop {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 414px;
|
||||
height: 421px;
|
||||
}
|
||||
|
||||
.delivery-orders__image--groceries {
|
||||
top: 0;
|
||||
left: -118px;
|
||||
width: 710px;
|
||||
height: 396px;
|
||||
}
|
||||
|
||||
.delivery-orders__image--parcels {
|
||||
bottom: 0;
|
||||
left: -403px;
|
||||
width: 1409px;
|
||||
height: 786px;
|
||||
}
|
||||
|
||||
.delivery-orders__image--documents {
|
||||
bottom: -229px;
|
||||
left: -11px;
|
||||
width: 1296px;
|
||||
height: 723px;
|
||||
}
|
||||
|
||||
.delivery-orders__blur,
|
||||
.delivery-orders__blur > span {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__blur > span {
|
||||
--blur-step: calc((var(--blur-end) - var(--blur-start)) / 4);
|
||||
-webkit-backdrop-filter: blur(var(--blur-radius));
|
||||
backdrop-filter: blur(var(--blur-radius));
|
||||
mask-image: linear-gradient(
|
||||
transparent calc(var(--blur-start) + var(--blur-step) * var(--blur-index)),
|
||||
#000 calc(var(--blur-start) + var(--blur-step) * (var(--blur-index) + 1))
|
||||
);
|
||||
}
|
||||
|
||||
.delivery-orders__blur > span:nth-child(1) {
|
||||
--blur-index: 0;
|
||||
--blur-radius: 1.8px;
|
||||
}
|
||||
|
||||
.delivery-orders__blur > span:nth-child(2) {
|
||||
--blur-index: 1;
|
||||
--blur-radius: 3.6px;
|
||||
}
|
||||
|
||||
.delivery-orders__blur > span:nth-child(3) {
|
||||
--blur-index: 2;
|
||||
--blur-radius: 5.4px;
|
||||
}
|
||||
|
||||
.delivery-orders__blur > span:nth-child(4) {
|
||||
--blur-index: 3;
|
||||
--blur-radius: 7.2px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--groceries {
|
||||
--blur-start: 233px;
|
||||
--blur-end: 423px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--parcels {
|
||||
--blur-start: 236px;
|
||||
--blur-end: 428px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--documents {
|
||||
--blur-start: 151px;
|
||||
--blur-end: 364px;
|
||||
}
|
||||
|
||||
.delivery-orders__shade {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 163px;
|
||||
background: linear-gradient(transparent, #000);
|
||||
opacity: 0.9;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__card--groceries .delivery-orders__shade {
|
||||
height: 187px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.delivery-orders__card--documents .delivery-orders__shade {
|
||||
height: 138px;
|
||||
}
|
||||
|
||||
.delivery-orders__copy {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: 95px;
|
||||
bottom: 32px;
|
||||
left: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__card-title {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
line-height: 29px;
|
||||
letter-spacing: -0.26px;
|
||||
}
|
||||
|
||||
.delivery-orders__card-description {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--groceries .delivery-orders__copy {
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--groceries .delivery-orders__card-description {
|
||||
width: 213px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--parcels .delivery-orders__copy {
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--documents .delivery-orders__copy {
|
||||
right: 103px;
|
||||
}
|
||||
|
||||
.delivery-orders__arrow {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 32px;
|
||||
right: 32px;
|
||||
width: 51px;
|
||||
height: 51px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__card--documents .delivery-orders__arrow {
|
||||
right: 33px;
|
||||
}
|
||||
|
||||
.delivery-orders__arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: var(--orders-accent);
|
||||
transition: color 180ms ease, background-color 180ms ease;
|
||||
}
|
||||
|
||||
.delivery-orders__arrow svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.delivery-orders__card:is(:hover, :focus-visible, :active)::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.delivery-orders__card:is(:hover, :focus-visible, :active) .delivery-orders__arrow {
|
||||
background: var(--orders-accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.delivery-orders__card:focus-visible {
|
||||
outline: 3px solid var(--orders-accent);
|
||||
outline-offset: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 1023.98px) {
|
||||
.delivery-orders__title {
|
||||
font-size: 40px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.delivery-orders__slider {
|
||||
overflow: visible;
|
||||
}
|
||||
.delivery-orders__grid {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
grid-template-rows: none;
|
||||
}
|
||||
.delivery-orders__grid > li {
|
||||
flex-shrink: 0;
|
||||
width: 340px;
|
||||
height: 300px;
|
||||
}
|
||||
.delivery-orders__card {
|
||||
--blur-start: 120px;
|
||||
--blur-end: 300px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
.delivery-orders__card-title {
|
||||
font-size: 22px;
|
||||
line-height: 1.15;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.delivery-orders__card-description {
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.delivery-orders__grid.is-grid {
|
||||
gap: 20px;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
.delivery-orders__grid.is-grid > li {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
.delivery-orders__wide {
|
||||
grid-column: auto;
|
||||
}
|
||||
.delivery-orders__copy,
|
||||
.delivery-orders__card--groceries .delivery-orders__copy,
|
||||
.delivery-orders__card--parcels .delivery-orders__copy,
|
||||
.delivery-orders__card--documents .delivery-orders__copy {
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.delivery-orders {
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
.delivery-orders__header {
|
||||
gap: 14px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.delivery-orders__title {
|
||||
font-size: 24px;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.24px;
|
||||
}
|
||||
.delivery-orders__description {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.14px;
|
||||
}
|
||||
.delivery-orders__slider {
|
||||
overflow: visible;
|
||||
}
|
||||
.delivery-orders__grid {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
}
|
||||
.delivery-orders__grid > li {
|
||||
flex-shrink: 0;
|
||||
width: 278px;
|
||||
height: 218px;
|
||||
}
|
||||
.delivery-orders__card {
|
||||
--blur-start: 90px;
|
||||
--blur-end: 218px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.delivery-orders__grid.is-grid {
|
||||
gap: 10px;
|
||||
}
|
||||
.delivery-orders__copy {
|
||||
gap: 8px;
|
||||
}
|
||||
.delivery-orders__card-title {
|
||||
font-size: 16px;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.16px;
|
||||
}
|
||||
.delivery-orders__card-description {
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.14px;
|
||||
}
|
||||
.delivery-orders__shade {
|
||||
height: 126px;
|
||||
}
|
||||
.delivery-orders__arrow,
|
||||
.delivery-orders__card--documents .delivery-orders__arrow {
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--orders-accent);
|
||||
color: #fff;
|
||||
}
|
||||
.delivery-orders__arrow svg {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.delivery-orders__card::after,
|
||||
.delivery-orders__arrow {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -544,6 +544,20 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}, sizeLG);
|
||||
|
||||
|
||||
// Форматы доставки: слайдер на телефонах и планшетах.
|
||||
document.querySelectorAll('.delivery-orders__slider').forEach(slider => {
|
||||
new ResponsiveSwiper(slider, {
|
||||
slidesPerView: 'auto',
|
||||
spaceBetween: 10,
|
||||
watchOverflow: true,
|
||||
grabCursor: true,
|
||||
breakpoints: {
|
||||
576: { spaceBetween: 20 }
|
||||
}
|
||||
}, sizeLG);
|
||||
});
|
||||
|
||||
|
||||
// Похожие статьи: слайдер на всех экранах
|
||||
document.querySelectorAll('.related-slider').forEach(slider => {
|
||||
new ResponsiveSwiper(slider.querySelector('.related-slider__container'), {
|
||||
|
||||
@@ -0,0 +1,428 @@
|
||||
.delivery-orders {
|
||||
--orders-heading: #172d38;
|
||||
--orders-text: #595757;
|
||||
--orders-accent: #ae001b;
|
||||
box-sizing: border-box;
|
||||
width: min(1280px, calc(100% - 40px));
|
||||
margin: var(--space-section) auto 0;
|
||||
color: var(--orders-heading);
|
||||
font-family: "Onest", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.delivery-orders *,
|
||||
.delivery-orders *::before,
|
||||
.delivery-orders *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.delivery-orders__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
margin-bottom: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.delivery-orders__title {
|
||||
margin: 0;
|
||||
font-size: 56px;
|
||||
font-weight: 700;
|
||||
line-height: 62px;
|
||||
letter-spacing: -0.56px;
|
||||
}
|
||||
|
||||
.delivery-orders__description {
|
||||
margin: 0;
|
||||
color: var(--orders-text);
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.delivery-orders__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
grid-template-rows: 396px 285px;
|
||||
grid-auto-rows: 396px;
|
||||
gap: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.delivery-orders__wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.delivery-orders__card {
|
||||
--blur-start: 229px;
|
||||
--blur-end: 462px;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 40px;
|
||||
background: linear-gradient(#f5f5f9, #f9f9f9);
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.delivery-orders__card::after {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset: 0;
|
||||
background: rgb(174 0 27 / 50%);
|
||||
content: "";
|
||||
opacity: 0;
|
||||
transition: opacity 180ms ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__image {
|
||||
position: absolute;
|
||||
display: block;
|
||||
max-width: none;
|
||||
object-fit: cover;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__image--cover {
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.delivery-orders__card:not(a) {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.delivery-orders__image--food {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 537px;
|
||||
height: 732px;
|
||||
}
|
||||
|
||||
.delivery-orders__image--groceries-backdrop {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 414px;
|
||||
height: 421px;
|
||||
}
|
||||
|
||||
.delivery-orders__image--groceries {
|
||||
top: 0;
|
||||
left: -118px;
|
||||
width: 710px;
|
||||
height: 396px;
|
||||
}
|
||||
|
||||
.delivery-orders__image--parcels {
|
||||
bottom: 0;
|
||||
left: -403px;
|
||||
width: 1409px;
|
||||
height: 786px;
|
||||
}
|
||||
|
||||
.delivery-orders__image--documents {
|
||||
bottom: -229px;
|
||||
left: -11px;
|
||||
width: 1296px;
|
||||
height: 723px;
|
||||
}
|
||||
|
||||
.delivery-orders__blur,
|
||||
.delivery-orders__blur > span {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__blur > span {
|
||||
--blur-step: calc((var(--blur-end) - var(--blur-start)) / 4);
|
||||
-webkit-backdrop-filter: blur(var(--blur-radius));
|
||||
backdrop-filter: blur(var(--blur-radius));
|
||||
mask-image: linear-gradient(
|
||||
transparent calc(var(--blur-start) + var(--blur-step) * var(--blur-index)),
|
||||
#000 calc(var(--blur-start) + var(--blur-step) * (var(--blur-index) + 1))
|
||||
);
|
||||
}
|
||||
|
||||
.delivery-orders__blur > span:nth-child(1) {
|
||||
--blur-index: 0;
|
||||
--blur-radius: 1.8px;
|
||||
}
|
||||
|
||||
.delivery-orders__blur > span:nth-child(2) {
|
||||
--blur-index: 1;
|
||||
--blur-radius: 3.6px;
|
||||
}
|
||||
|
||||
.delivery-orders__blur > span:nth-child(3) {
|
||||
--blur-index: 2;
|
||||
--blur-radius: 5.4px;
|
||||
}
|
||||
|
||||
.delivery-orders__blur > span:nth-child(4) {
|
||||
--blur-index: 3;
|
||||
--blur-radius: 7.2px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--groceries {
|
||||
--blur-start: 233px;
|
||||
--blur-end: 423px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--parcels {
|
||||
--blur-start: 236px;
|
||||
--blur-end: 428px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--documents {
|
||||
--blur-start: 151px;
|
||||
--blur-end: 364px;
|
||||
}
|
||||
|
||||
.delivery-orders__shade {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 163px;
|
||||
background: linear-gradient(transparent, #000);
|
||||
opacity: 0.9;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__card--groceries .delivery-orders__shade {
|
||||
height: 187px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.delivery-orders__card--documents .delivery-orders__shade {
|
||||
height: 138px;
|
||||
}
|
||||
|
||||
.delivery-orders__copy {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: 95px;
|
||||
bottom: 32px;
|
||||
left: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__card-title {
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
line-height: 29px;
|
||||
letter-spacing: -0.26px;
|
||||
}
|
||||
|
||||
.delivery-orders__card-description {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 28px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--groceries .delivery-orders__copy {
|
||||
right: 40px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--groceries .delivery-orders__card-description {
|
||||
width: 213px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--parcels .delivery-orders__copy {
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
.delivery-orders__card--documents .delivery-orders__copy {
|
||||
right: 103px;
|
||||
}
|
||||
|
||||
.delivery-orders__arrow {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 32px;
|
||||
right: 32px;
|
||||
width: 51px;
|
||||
height: 51px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delivery-orders__card--documents .delivery-orders__arrow {
|
||||
right: 33px;
|
||||
}
|
||||
|
||||
.delivery-orders__arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
color: var(--orders-accent);
|
||||
transition: color 180ms ease, background-color 180ms ease;
|
||||
}
|
||||
|
||||
.delivery-orders__arrow svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.delivery-orders__card:is(:hover, :focus-visible, :active)::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.delivery-orders__card:is(:hover, :focus-visible, :active) .delivery-orders__arrow {
|
||||
background: var(--orders-accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.delivery-orders__card:focus-visible {
|
||||
outline: 3px solid var(--orders-accent);
|
||||
outline-offset: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 1023.98px) {
|
||||
.delivery-orders__title {
|
||||
font-size: 40px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.delivery-orders__slider {
|
||||
overflow: visible;
|
||||
}
|
||||
.delivery-orders__grid {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
grid-template-rows: none;
|
||||
}
|
||||
.delivery-orders__grid > li {
|
||||
flex-shrink: 0;
|
||||
width: 340px;
|
||||
height: 300px;
|
||||
}
|
||||
.delivery-orders__card {
|
||||
--blur-start: 120px;
|
||||
--blur-end: 300px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
.delivery-orders__card-title {
|
||||
font-size: 22px;
|
||||
line-height: 1.15;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.delivery-orders__card-description {
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.delivery-orders__grid.is-grid {
|
||||
gap: 20px;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
.delivery-orders__grid.is-grid > li {
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
.delivery-orders__wide {
|
||||
grid-column: auto;
|
||||
}
|
||||
.delivery-orders__copy,
|
||||
.delivery-orders__card--groceries .delivery-orders__copy,
|
||||
.delivery-orders__card--parcels .delivery-orders__copy,
|
||||
.delivery-orders__card--documents .delivery-orders__copy {
|
||||
left: 24px;
|
||||
right: 24px;
|
||||
bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.delivery-orders {
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
.delivery-orders__header {
|
||||
gap: 14px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
.delivery-orders__title {
|
||||
font-size: 24px;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.24px;
|
||||
}
|
||||
.delivery-orders__description {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.14px;
|
||||
}
|
||||
.delivery-orders__slider {
|
||||
overflow: visible;
|
||||
}
|
||||
.delivery-orders__grid {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
}
|
||||
.delivery-orders__grid > li {
|
||||
flex-shrink: 0;
|
||||
width: 278px;
|
||||
height: 218px;
|
||||
}
|
||||
.delivery-orders__card {
|
||||
--blur-start: 90px;
|
||||
--blur-end: 218px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.delivery-orders__grid.is-grid {
|
||||
gap: 10px;
|
||||
}
|
||||
.delivery-orders__copy {
|
||||
gap: 8px;
|
||||
}
|
||||
.delivery-orders__card-title {
|
||||
font-size: 16px;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.16px;
|
||||
}
|
||||
.delivery-orders__card-description {
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.14px;
|
||||
}
|
||||
.delivery-orders__shade {
|
||||
height: 126px;
|
||||
}
|
||||
.delivery-orders__arrow,
|
||||
.delivery-orders__card--documents .delivery-orders__arrow {
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: var(--orders-accent);
|
||||
color: #fff;
|
||||
}
|
||||
.delivery-orders__arrow svg {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.delivery-orders__card::after,
|
||||
.delivery-orders__arrow {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
@use "mixins" as *;
|
||||
@use "config" as *;
|
||||
@use "courier-services";
|
||||
@use "delivery-orders";
|
||||
|
||||
*,
|
||||
*::before,
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
<?php
|
||||
$available_title = get_field('available_title');
|
||||
$available_description = get_field('available_description');
|
||||
$available_items = get_field('available_arr') ?: [];
|
||||
$available_items = array_values(array_filter($available_items, static function ($item) {
|
||||
return !empty($item['title']);
|
||||
}));
|
||||
if (!$available_title && !$available_items) {
|
||||
return;
|
||||
}
|
||||
?>
|
||||
<section class="delivery-orders articles--slider"<?php if ($available_title) : ?> aria-labelledby="delivery-orders-title"<?php endif; ?>>
|
||||
<?php if ($available_title || $available_description) : ?>
|
||||
<header class="delivery-orders__header">
|
||||
<?php if ($available_title) : ?>
|
||||
<h2 class="delivery-orders__title" id="delivery-orders-title"><?php echo esc_html($available_title); ?></h2>
|
||||
<?php endif; ?>
|
||||
<?php if ($available_description) : ?>
|
||||
<p class="delivery-orders__description"><?php echo nl2br(esc_html($available_description)); ?></p>
|
||||
<?php endif; ?>
|
||||
</header>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($available_items) : ?>
|
||||
<div class="delivery-orders__slider swiper swiper-full">
|
||||
<ul class="delivery-orders__grid swiper-wrapper is-grid" aria-label="Форматы доставки">
|
||||
<?php foreach ($available_items as $index => $item) : ?>
|
||||
<?php
|
||||
$is_wide = ($index + 1) % 4 === 0;
|
||||
$image = $item['img'] ?? [];
|
||||
$url = $item['url'] ?? '';
|
||||
?>
|
||||
<li class="swiper-slide<?php if ($is_wide) echo ' delivery-orders__wide'; ?>">
|
||||
<?php if ($url) : ?>
|
||||
<a class="delivery-orders__card<?php if ($is_wide) echo ' delivery-orders__card--documents'; ?>" href="<?php echo esc_url($url); ?>">
|
||||
<?php else : ?>
|
||||
<div class="delivery-orders__card<?php if ($is_wide) echo ' delivery-orders__card--documents'; ?>">
|
||||
<?php endif; ?>
|
||||
<?php if (!empty($image['url'])) : ?>
|
||||
<img class="delivery-orders__image delivery-orders__image--cover" src="<?php echo esc_url($image['url']); ?>" alt="" loading="lazy" decoding="async">
|
||||
<?php endif; ?>
|
||||
<span class="delivery-orders__blur" aria-hidden="true"><span></span><span></span><span></span><span></span></span>
|
||||
<span class="delivery-orders__shade" aria-hidden="true"></span>
|
||||
<?php if ($url) : ?>
|
||||
<span class="delivery-orders__arrow" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none" focusable="false"><path d="M12.5537 7.72367L10.6267 7.71891L10.6369 3.27442L1.36107 12.5326L0.00014086 11.1689L9.25079 1.93597L4.8608 1.92575L4.86557 0.000152722L12.5721 0.0178628L12.5537 7.72367Z" fill="currentColor"/></svg></span>
|
||||
<?php endif; ?>
|
||||
<span class="delivery-orders__copy">
|
||||
<span class="delivery-orders__card-title"><?php echo esc_html($item['title']); ?></span>
|
||||
<?php if (!empty($item['description'])) : ?>
|
||||
<span class="delivery-orders__card-description"><?php echo esc_html($item['description']); ?></span>
|
||||
<?php endif; ?>
|
||||
</span>
|
||||
<?php if ($url) : ?></a><?php else : ?></div><?php endif; ?>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</section>
|
||||
@@ -13,6 +13,7 @@ Template Name: Курьерам
|
||||
<?php get_template_part('template-parts/courier-services'); ?>
|
||||
<?php get_template_part('template-parts/income'); ?>
|
||||
<?php get_template_part('template-parts/advantages'); ?>
|
||||
<?php get_template_part('template-parts/delivery-orders'); ?>
|
||||
<?php get_template_part('template-parts/scheme'); ?>
|
||||
<?php get_template_part('template-parts/payments'); ?>
|
||||
<?php get_template_part('template-parts/requirements'); ?>
|
||||
|
||||
Reference in new issue
Block a user