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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
Reference in new issue
Block a user