task 17081 | сделал "Выберите подходящий формат"
This commit is contained in:
web_103.2 committed
1 parent
42c29094c6
commit
7fad136ff1
5 files changed
+521
No files matched your search
@@ -8276,3 +8276,236 @@ h4 {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.work-formats {
|
||||
--formats-heading: #172d38;
|
||||
--formats-text: #595757;
|
||||
--formats-border: #ededed;
|
||||
--formats-accent: #ae001b;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
width: min(1280px, calc(100% - 80px));
|
||||
margin: var(--space-section) auto 0;
|
||||
flex-direction: column;
|
||||
gap: 60px;
|
||||
color: var(--formats-heading);
|
||||
font-family: "Onest", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.work-formats *,
|
||||
.work-formats *::before,
|
||||
.work-formats *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.work-formats__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.work-formats__title {
|
||||
width: 964px;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
font-size: 56px;
|
||||
font-weight: 700;
|
||||
line-height: 62px;
|
||||
letter-spacing: -0.56px;
|
||||
}
|
||||
|
||||
.work-formats__description {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: var(--formats-text);
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.work-formats__groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.work-formats__group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.work-formats__group-title {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
line-height: 29px;
|
||||
letter-spacing: -0.26px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.work-formats__links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.work-formats__links > li {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.work-formats__link {
|
||||
display: flex;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
min-height: 54px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 16px 16px 24px;
|
||||
border-radius: 100px;
|
||||
box-shadow: inset 0 0 0 1px var(--formats-border);
|
||||
color: inherit;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.18px;
|
||||
text-decoration: none;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.work-formats__link:is(:hover, :focus-visible) {
|
||||
background: #f5f5f9;
|
||||
color: var(--formats-accent);
|
||||
}
|
||||
|
||||
.work-formats__link:focus-visible {
|
||||
outline: 2px solid var(--formats-accent);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.work-formats__arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 22px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.work-formats__arrow svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.work-formats__link {
|
||||
transition: color 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.work-formats__link:is(:hover, :focus-visible) .work-formats__arrow {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.work-formats__link,
|
||||
.work-formats__arrow {
|
||||
transition: none;
|
||||
}
|
||||
.work-formats__link:is(:hover, :focus-visible) .work-formats__arrow {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.work-formats__title {
|
||||
font-size: 44px;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 899px) {
|
||||
.work-formats {
|
||||
width: calc(100% - 48px);
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.work-formats__header {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.work-formats__title {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.work-formats {
|
||||
width: calc(100% - 40px);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.work-formats__header {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.work-formats__title {
|
||||
font-size: 24px;
|
||||
line-height: 26px;
|
||||
letter-spacing: -0.24px;
|
||||
}
|
||||
|
||||
.work-formats__description {
|
||||
font-size: 14px;
|
||||
line-height: 15px;
|
||||
letter-spacing: -0.14px;
|
||||
}
|
||||
|
||||
.work-formats__groups {
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.work-formats__group {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.work-formats__group-title {
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
letter-spacing: -0.16px;
|
||||
}
|
||||
|
||||
.work-formats__links {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.work-formats__link {
|
||||
min-height: 36px;
|
||||
gap: 4px;
|
||||
padding: 11px 11px 11px 16px;
|
||||
font-size: 13px;
|
||||
line-height: 14px;
|
||||
letter-spacing: -0.13px;
|
||||
}
|
||||
|
||||
.work-formats__arrow {
|
||||
flex-basis: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,232 @@
|
||||
.work-formats {
|
||||
--formats-heading: #172d38;
|
||||
--formats-text: #595757;
|
||||
--formats-border: #ededed;
|
||||
--formats-accent: #ae001b;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
width: min(1280px, calc(100% - 80px));
|
||||
margin: var(--space-section) auto 0;
|
||||
flex-direction: column;
|
||||
gap: 60px;
|
||||
color: var(--formats-heading);
|
||||
font-family: "Onest", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.work-formats *,
|
||||
.work-formats *::before,
|
||||
.work-formats *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.work-formats__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.work-formats__title {
|
||||
width: 964px;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
font-size: 56px;
|
||||
font-weight: 700;
|
||||
line-height: 62px;
|
||||
letter-spacing: -0.56px;
|
||||
}
|
||||
|
||||
.work-formats__description {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: var(--formats-text);
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
|
||||
.work-formats__groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.work-formats__group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.work-formats__group-title {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
line-height: 29px;
|
||||
letter-spacing: -0.26px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.work-formats__links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.work-formats__links > li {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.work-formats__link {
|
||||
display: flex;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
min-height: 54px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 16px 16px 24px;
|
||||
border-radius: 100px;
|
||||
box-shadow: inset 0 0 0 1px var(--formats-border);
|
||||
color: inherit;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
letter-spacing: -0.18px;
|
||||
text-decoration: none;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.work-formats__link:is(:hover, :focus-visible) {
|
||||
background: #f5f5f9;
|
||||
color: var(--formats-accent);
|
||||
}
|
||||
|
||||
.work-formats__link:focus-visible {
|
||||
outline: 2px solid var(--formats-accent);
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
.work-formats__arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 22px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.work-formats__arrow svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.work-formats__link {
|
||||
transition: color 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.work-formats__link:is(:hover, :focus-visible) .work-formats__arrow {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.work-formats__link,
|
||||
.work-formats__arrow {
|
||||
transition: none;
|
||||
}
|
||||
.work-formats__link:is(:hover, :focus-visible) .work-formats__arrow {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.work-formats__title {
|
||||
font-size: 44px;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 899px) {
|
||||
.work-formats {
|
||||
width: calc(100% - 48px);
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.work-formats__header {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.work-formats__title {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.work-formats {
|
||||
width: calc(100% - 40px);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.work-formats__header {
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.work-formats__title {
|
||||
font-size: 24px;
|
||||
line-height: 26px;
|
||||
letter-spacing: -0.24px;
|
||||
}
|
||||
|
||||
.work-formats__description {
|
||||
font-size: 14px;
|
||||
line-height: 15px;
|
||||
letter-spacing: -0.14px;
|
||||
}
|
||||
|
||||
.work-formats__groups {
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.work-formats__group {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.work-formats__group-title {
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
letter-spacing: -0.16px;
|
||||
}
|
||||
|
||||
.work-formats__links {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.work-formats__link {
|
||||
min-height: 36px;
|
||||
gap: 4px;
|
||||
padding: 11px 11px 11px 16px;
|
||||
font-size: 13px;
|
||||
line-height: 14px;
|
||||
letter-spacing: -0.13px;
|
||||
}
|
||||
|
||||
.work-formats__arrow {
|
||||
flex-basis: 14px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
@use "config" as *;
|
||||
@use "courier-services";
|
||||
@use "delivery-orders";
|
||||
@use "formats";
|
||||
|
||||
*,
|
||||
*::before,
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
<?php
|
||||
$formats_title = get_field('formats_title');
|
||||
$formats_description = get_field('formats_description');
|
||||
$formats_groups = get_field('formats_arr') ?: [];
|
||||
if (!$formats_title && !$formats_description && !$formats_groups) {
|
||||
return;
|
||||
}
|
||||
$formats_id = wp_unique_id('work-formats-');
|
||||
?>
|
||||
<section class="work-formats"<?php if ($formats_title) : ?> aria-labelledby="<?php echo esc_attr($formats_id); ?>"<?php endif; ?>>
|
||||
<?php if ($formats_title || $formats_description) : ?>
|
||||
<header class="work-formats__header">
|
||||
<?php if ($formats_title) : ?>
|
||||
<h2 class="work-formats__title" id="<?php echo esc_attr($formats_id); ?>"><?php echo esc_html($formats_title); ?></h2>
|
||||
<?php endif; ?>
|
||||
<?php if ($formats_description) : ?>
|
||||
<p class="work-formats__description"><?php echo esc_html($formats_description); ?></p>
|
||||
<?php endif; ?>
|
||||
</header>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($formats_groups) : ?>
|
||||
<div class="work-formats__groups">
|
||||
<?php foreach ($formats_groups as $index => $group) : ?>
|
||||
<?php
|
||||
$links = array_filter(($group['links'] ?? []), static function ($link) {
|
||||
return !empty($link['name']) && !empty($link['url']);
|
||||
});
|
||||
if (!$links) continue;
|
||||
$group_id = $formats_id . '-group-' . $index;
|
||||
?>
|
||||
<nav class="work-formats__group"<?php if (!empty($group['title'])) : ?> aria-labelledby="<?php echo esc_attr($group_id); ?>"<?php else : ?> aria-label="Форматы работы"<?php endif; ?>>
|
||||
<?php if (!empty($group['title'])) : ?>
|
||||
<h3 class="work-formats__group-title" id="<?php echo esc_attr($group_id); ?>"><?php echo esc_html($group['title']); ?></h3>
|
||||
<?php endif; ?>
|
||||
<ul class="work-formats__links">
|
||||
<?php foreach ($links as $link) : ?>
|
||||
<li>
|
||||
<a class="work-formats__link" href="<?php echo esc_url($link['url']); ?>">
|
||||
<?php echo esc_html($link['name']); ?>
|
||||
<span class="work-formats__arrow" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none" focusable="false">
|
||||
<path d="M12.1289 5.75517C12.2399 5.66259 12.368 5.59279 12.506 5.54976C12.644 5.50673 12.7891 5.49131 12.933 5.50439C13.077 5.51747 13.2169 5.55878 13.3449 5.62597C13.4728 5.69316 13.5863 5.78491 13.6788 5.89597L17.3451 10.296C17.4417 10.4064 17.5152 10.535 17.5613 10.6742C17.6075 10.8134 17.6253 10.9605 17.6138 11.1067C17.6023 11.2529 17.5616 11.3954 17.4942 11.5256C17.4268 11.6559 17.3341 11.7714 17.2214 11.8653C17.1087 11.9592 16.9784 12.0296 16.8381 12.0724C16.6978 12.1152 16.5504 12.1295 16.4045 12.1145C16.2586 12.0994 16.1171 12.0554 15.9885 11.9849C15.8599 11.9144 15.7467 11.8189 15.6555 11.704L11.9881 7.30397C11.8015 7.07988 11.7114 6.79086 11.7379 6.50042C11.7643 6.20999 11.9049 5.94193 12.1289 5.75517Z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"/>
|
||||
<path d="M12.1289 16.2447C11.9049 16.058 11.7643 15.7899 11.7379 15.4995C11.7114 15.209 11.8015 14.92 11.9881 14.6959L15.6555 10.2959C15.7467 10.181 15.8599 10.0855 15.9885 10.015C16.1171 9.94452 16.2586 9.90046 16.4045 9.88543C16.5504 9.8704 16.6978 9.8847 16.8381 9.92749C16.9784 9.97028 17.1087 10.0407 17.2214 10.1346C17.3341 10.2285 17.4268 10.344 17.4942 10.4743C17.5616 10.6045 17.6023 10.747 17.6138 10.8932C17.6253 11.0394 17.6075 11.1865 17.5613 11.3257C17.5152 11.4649 17.4417 11.5935 17.3451 11.7039L13.6788 16.1039C13.5863 16.215 13.4728 16.3067 13.3449 16.3739C13.2169 16.4411 13.077 16.4824 12.933 16.4955C12.7891 16.5086 12.644 16.4932 12.506 16.4501C12.368 16.4071 12.2399 16.3373 12.1289 16.2447Z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"/>
|
||||
<path d="M15.3999 11C15.3999 11.2918 15.284 11.5716 15.0777 11.7778C14.8714 11.9841 14.5916 12.1 14.2999 12.1L5.4999 12.1C5.20817 12.1 4.92838 11.9841 4.72209 11.7778C4.5158 11.5716 4.3999 11.2918 4.3999 11C4.3999 10.7083 4.5158 10.4285 4.72209 10.2222C4.92838 10.0159 5.20817 9.90002 5.4999 9.90002L14.2999 9.90003C14.5916 9.90003 14.8714 10.0159 15.0777 10.2222C15.284 10.4285 15.3999 10.7083 15.3999 11Z" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"/>
|
||||
</svg></span>
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</nav>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</section>
|
||||
@@ -17,6 +17,7 @@ Template Name: Курьерам
|
||||
<?php get_template_part('template-parts/scheme'); ?>
|
||||
<?php get_template_part('template-parts/payments'); ?>
|
||||
<?php get_template_part('template-parts/requirements'); ?>
|
||||
<?php get_template_part('template-parts/formats'); ?>
|
||||
<?php get_template_part('template-parts/reviews'); ?>
|
||||
<?php get_template_part('template-parts/faq'); ?>
|
||||
<?php get_template_part('template-parts/getapp'); ?>
|
||||
|
||||
Reference in new issue
Block a user