html:has(body.vacancies-index-page) { scroll-behavior: smooth; }body.vacancies-index-page button { font-family: inherit; }body.vacancies-index-page .vacancies { max-width: 2200px; margin-inline: auto; padding: clamp(30px, 4.6vw, 88px) var(--gutter) 0; }body.vacancies-index-page .vacancies-heading { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding-inline: var(--content-inset); margin-bottom: clamp(36px, 4.2vw, 76px); }body.vacancies-index-page .vacancies-heading h1 { margin: 0; font-size: clamp(48px, 7vw, 116px); font-weight: 500; letter-spacing: -.065em; line-height: 1.04; }body.vacancies-index-page .vacancies-intro { display: flex; align-items: center; gap: clamp(32px, 5vw, 100px); }body.vacancies-index-page .vacancies-intro p { margin: 0; font-size: clamp(17px, 1.45vw, 25px); line-height: 1.4; letter-spacing: -.025em; }body.vacancies-index-page .heading-contact { display: flex; align-items: center; gap: 24px; padding: 18px 24px; min-height: 56px; border-radius: 16px; background: var(--paper); font-size: 14px; font-weight: 500; transition: background .2s; }body.vacancies-index-page .heading-contact:hover { background: #ededed; }body.vacancies-index-page .vacancies-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.15vw, 22px); align-items: stretch; }body.vacancies-index-page .job-card { min-width: 0; margin: 0; background: var(--paper); border-radius: 30px; overflow: clip; grid-column: span 4; }body.vacancies-index-page .job-card > summary { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; height: 100%; min-height: 290px; gap: 48px; padding: clamp(26px, 2.8vw, 52px); cursor: pointer; list-style: none; }body.vacancies-index-page .job-card > summary::-webkit-details-marker { display: none; }body.vacancies-index-page .job-heading { display: block; position: relative; z-index: 1; }body.vacancies-index-page .job-heading h2 { margin: 0; max-width: 19ch; font-size: clamp(23px, 2.05vw, 38px); font-weight: 500; letter-spacing: -.045em; line-height: 1.14; overflow-wrap: anywhere; text-wrap: balance; }body.vacancies-index-page .job-heading p { max-width: 30ch; margin: 20px 0 0; font-size: clamp(14px, 1.05vw, 18px); font-weight: 400; line-height: 1.55; color: #656565; }body.vacancies-index-page .job-action { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 14px; font-weight: 500; }body.vacancies-index-page .job-arrow { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; background: white; color: var(--ink); border-radius: 50%; transition: background .25s, color .25s, transform .3s; }body.vacancies-index-page .job-arrow svg { width: 21px; height: 21px; }body.vacancies-index-page .job-card--photo { grid-column: span 6; grid-row: span 2; background: var(--ink); color: white; }body.vacancies-index-page .job-card--photo > summary { min-height: 620px; justify-content: flex-end; gap: 28px; }body.vacancies-index-page .job-card--photo > summary::after { content: ''; position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, transparent 35%, #14141408 45%, #141414a8 75%, #141414e8 100%); }body.vacancies-index-page .job-photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 40% center; transition: transform .7s cubic-bezier(.22, 1, .36, 1); }body.vacancies-index-page .job-card--photo .job-heading h2 { font-size: clamp(40px, 3.9vw, 74px); }body.vacancies-index-page .job-card--photo .job-heading p { color: #f0f0f0; }body.vacancies-index-page .job-card--photo .job-arrow { background: white; }body.vacancies-index-page .job-card--light, body.vacancies-index-page .job-card--orange { grid-column: span 6; }body.vacancies-index-page .job-card--light > summary, body.vacancies-index-page .job-card--orange > summary { min-height: 300px; }body.vacancies-index-page .job-card--light .job-heading h2, body.vacancies-index-page .job-card--orange .job-heading h2 { font-size: clamp(32px, 3.2vw, 60px); }body.vacancies-index-page .job-card--orange { background: var(--orange); color: #fff; }body.vacancies-index-page .job-card--orange .job-heading p { color: #fff; }body.vacancies-index-page .job-card--writer { grid-column: span 5; }body.vacancies-index-page .job-card--service { grid-column: span 3; background: var(--ink); color: #fff; }body.vacancies-index-page .job-card--service .job-heading p { color: #c4c4c4; }body.vacancies-index-page .job-card--service .job-heading h2 { max-width: 12ch; }body.vacancies-index-page .job-card--assembler, body.vacancies-index-page .job-card--service { color: white; background: var(--ink); }body.vacancies-index-page .job-card--assembler .job-heading p, body.vacancies-index-page .job-card--service .job-heading p { color: #f0f0f0; }body.vacancies-index-page .job-card--assembler > summary::after, body.vacancies-index-page .job-card--service > summary::after { content: ''; position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, #141414d9 0%, #14141496 45%, #14141473 60%, #141414cc 100%); }body.vacancies-index-page .job-card--assembler .job-photo { object-position: 50% center; }body.vacancies-index-page .job-card--service .job-photo { object-position: 48% center; }body.vacancies-index-page .job-card--welder { grid-column: span 3; }body.vacancies-index-page .job-card--equipment { grid-column: span 4; }body.vacancies-index-page .job-card--sales { grid-column: span 5; }body.vacancies-index-page .job-card > summary:focus-visible { outline-offset: -6px; }body.vacancies-index-page .job-card[open] { grid-column: 1 / -1; }body.vacancies-index-page .job-card[open] > summary { min-height: 250px; height: auto; }body.vacancies-index-page .job-content { padding: 0 clamp(26px, 2.8vw, 52px) 40px; }body.vacancies-index-page .job-content section, body.vacancies-index-page .dialog-content section { margin: 32px 0; }body.vacancies-index-page .job-content h3, body.vacancies-index-page .dialog-content h3 { margin: 0 0 18px; font-size: 19px; font-weight: 500; letter-spacing: -.03em; }body.vacancies-index-page .job-content ul, body.vacancies-index-page .dialog-content ul { margin: 0; padding-left: 19px; font-size: 15px; line-height: 1.75; }body.vacancies-index-page .job-content li, body.vacancies-index-page .dialog-content li { padding-left: 3px; margin: 8px 0; }body.vacancies-index-page .job-content li::marker, body.vacancies-index-page .dialog-content li::marker { color: var(--orange); }body.vacancies-index-page .resume-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; min-height: 56px; margin: 20px 0 0; padding: 18px 24px; border-radius: 16px; color: #fff; background: var(--orange); font-size: 14px; font-weight: 600; transition: background .2s; }body.vacancies-index-page .resume-button:hover { background: #ff833e; }body.vacancies-index-page .job-email { display: block; width: max-content; max-width: 100%; margin-top: 24px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }body.vacancies-index-page .resume-contact { max-width: 2200px; margin: clamp(70px, 8vw, 150px) auto; padding-inline: calc(var(--gutter) + var(--content-inset)); display: flex; align-items: center; justify-content: space-between; gap: 48px; }body.vacancies-index-page .resume-contact h2 { margin: 0; font-size: clamp(30px, 3.2vw, 58px); letter-spacing: -.05em; font-weight: 500; line-height: 1.1; }body.vacancies-index-page .resume-contact p { margin: 24px 0 0; font-size: 15px; color: #656565; }body.vacancies-index-page .resume-contact > a { display: flex; align-items: center; gap: clamp(24px, 4vw, 70px); font-size: clamp(22px, 2.8vw, 52px); color: #a9430d; letter-spacing: -.04em; border-bottom: 1px solid #f66b2166; padding-bottom: 16px; transition: color .2s; }body.vacancies-index-page .resume-contact > a:hover { color: var(--ink); }body.vacancies-index-page .resume-contact > a svg { width: 36px; height: 36px; flex: 0 0 auto; }body.vacancies-index-page .vacancy-dialog { width: min(780px, calc(100% - 32px)); max-width: 100%; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 30px; color: var(--ink); background: #fff; overscroll-behavior: contain; }body.vacancies-index-page .vacancy-dialog::backdrop { background: #23232399; backdrop-filter: blur(6px); }body.vacancies-index-page .dialog-shell { padding: clamp(28px, 4vw, 58px); }body.vacancies-index-page .dialog-close { position: sticky; top: 16px; margin-left: auto; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }body.vacancies-index-page .dialog-close span::before, body.vacancies-index-page .dialog-close span::after { content: ''; position: absolute; width: 18px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }body.vacancies-index-page .dialog-close span::after { transform: translate(-50%, -50%) rotate(-45deg); }body.vacancies-index-page .dialog-close:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }body.vacancies-index-page .vacancy-dialog h2 { margin: 24px 0 32px; font-size: clamp(26px, 3vw, 44px); font-weight: 500; letter-spacing: -.045em; line-height: 1.15; overflow-wrap: anywhere; }body.vacancies-index-page .vacancy-dialog[open] { animation: vacancies-dialog-enter .3s cubic-bezier(.22, 1, .36, 1); }
@keyframes vacancies-dialog-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vacancies-heading-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }body.vacancies-index-page .vacancies-heading { animation: vacancies-heading-enter .6s cubic-bezier(.22, 1, .36, 1) both; }
@media (hover: hover) {body.vacancies-index-page .job-card > summary:hover .job-arrow { background: var(--ink); color: white; transform: rotate(45deg); }body.vacancies-index-page .job-card--service > summary:hover .job-arrow { background: var(--orange); color: #fff; }body.vacancies-index-page .job-card--photo > summary:hover .job-photo { transform: scale(1.035); }body.vacancies-index-page .job-card--assembler > summary:hover .job-photo, body.vacancies-index-page .job-card--service > summary:hover .job-photo { transform: scale(1.035); }
}
@media (min-width: 2000px) {body.vacancies-index-page .job-card > summary { min-height: 360px; }body.vacancies-index-page .job-card--photo > summary { min-height: 742px; } }
@media (max-width: 1100px) {body.vacancies-index-page .vacancies-intro { gap: 28px; }body.vacancies-index-page .vacancies-intro p { display: none; }body.vacancies-index-page .job-card > summary { min-height: 260px; padding: 28px; gap: 30px; }body.vacancies-index-page .job-card--photo > summary { min-height: 532px; }body.vacancies-index-page .job-heading h2 { font-size: 24px; }body.vacancies-index-page .job-card--writer { grid-column: span 4; }body.vacancies-index-page .job-card--service { grid-column: span 4; }body.vacancies-index-page .job-card--welder, body.vacancies-index-page .job-card--sales { grid-column: span 4; }body.vacancies-index-page .resume-contact { align-items: flex-start; }
}
@media (max-width: 720px) {body.vacancies-index-page .vacancies { padding-top: 32px; }body.vacancies-index-page .vacancies-heading { align-items: flex-start; gap: 24px; margin-bottom: 30px; flex-direction: column; }body.vacancies-index-page .vacancies-heading h1 { font-size: clamp(44px, 10.5vw, 72px); }body.vacancies-index-page .vacancies-intro { width: 100%; justify-content: space-between; }body.vacancies-index-page .vacancies-intro p { display: block; font-size: 15px; }body.vacancies-index-page .heading-contact { padding: 14px 16px; gap: 18px; font-size: 12px; min-height: 48px; }body.vacancies-index-page .heading-contact svg { width: 18px; height: 18px; }body.vacancies-index-page .vacancies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }body.vacancies-index-page .job-card { border-radius: 22px; grid-column: span 1; }body.vacancies-index-page .job-card--photo { grid-column: 1 / -1; grid-row: auto; }body.vacancies-index-page .job-card--photo > summary { min-height: clamp(360px, 75vw, 500px); }body.vacancies-index-page .job-card--light > summary, body.vacancies-index-page .job-card--orange > summary { min-height: 220px; padding: 24px; }body.vacancies-index-page .job-card--light .job-heading h2, body.vacancies-index-page .job-card--orange .job-heading h2 { font-size: clamp(24px, 4.4vw, 32px); }body.vacancies-index-page .job-card--photo .job-heading h2 { font-size: 44px; }body.vacancies-index-page .job-card--writer { grid-column: 1 / -1; }body.vacancies-index-page .job-card--writer .job-heading h2 { max-width: 28ch; }body.vacancies-index-page .job-card--sales { grid-column: 1 / -1; }body.vacancies-index-page .job-card--sales > summary { min-height: 230px; }body.vacancies-index-page .job-heading h2 { font-size: clamp(21px, 3.7vw, 27px); }body.vacancies-index-page .job-heading p { font-size: 14px; }body.vacancies-index-page .job-card > summary { padding: 24px; min-height: 290px; }body.vacancies-index-page .job-action { font-size: 12px; gap: 10px; }body.vacancies-index-page .job-arrow { width: 40px; height: 40px; }body.vacancies-index-page .resume-contact { margin-block: 64px; flex-direction: column; gap: 32px; }body.vacancies-index-page .resume-contact > a { width: 100%; justify-content: space-between; font-size: clamp(22px, 5.3vw, 36px); }body.vacancies-index-page .resume-contact > a svg { width: 28px; height: 28px; }
}
@media (max-width: 480px) {body.vacancies-index-page .vacancies-intro { align-items: flex-start; gap: 18px; flex-direction: column; }body.vacancies-index-page .vacancies-intro p br { display: none; }body.vacancies-index-page .vacancies-grid { grid-template-columns: minmax(0, 1fr); }body.vacancies-index-page .job-card { grid-column: 1; }body.vacancies-index-page .job-card > summary, body.vacancies-index-page .job-card--light > summary, body.vacancies-index-page .job-card--orange > summary { min-height: 230px; gap: 30px; }body.vacancies-index-page .job-card--photo > summary { min-height: 380px; }body.vacancies-index-page .job-card--photo .job-heading h2 { font-size: 42px; }body.vacancies-index-page .job-heading h2, body.vacancies-index-page .job-card--light .job-heading h2, body.vacancies-index-page .job-card--orange .job-heading h2 { font-size: 28px; }body.vacancies-index-page .job-card--writer .job-heading h2 { font-size: 25px; }body.vacancies-index-page .job-card--service .job-heading h2 { max-width: 20ch; }body.vacancies-index-page .vacancy-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 22px; }body.vacancies-index-page .dialog-shell { padding: 24px; }body.vacancies-index-page .vacancy-dialog h2 { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {html:has(body.vacancies-index-page) { scroll-behavior: auto; }body.vacancies-index-page .vacancies-heading, body.vacancies-index-page .vacancy-dialog[open] { animation: none; }body.vacancies-index-page .job-arrow, body.vacancies-index-page .job-photo, body.vacancies-index-page .resume-button { transition: none; }
}