/* ============ ОРГАНИЗМ · /vakansii ============ Тёмная страница со своим типографическим строем (макет pages/vakansii.html): плотный Oswald, жёлтое подчёркивание-маркер, квадратные кнопки с 2px рамкой, поля с плавающей подписью на прозрачном фоне. Все правила страницы намеренно ограничены областью .vacancy — шапка, подвал и cookie-баннер живут вне неё и остаются на атомах дизайн-системы (у макета .btn / .field / .consent конфликтуют с одноимёнными атомами). Цвета не вводят новых значений: --black = --surface-dark, --yellow = --accent из :root дизайн-системы. Шкала отступов и --gutter — тоже системные, поэтому контент страницы выровнен по логотипу шапки и колонкам подвала. */ /* Тёмная страница целиком: data-page на занят активным пунктом меню, поэтому тема задаётся отдельным классом. */ body.page-vacancy{background:var(--surface-dark);color:#FFFFFF;} body.page-vacancy a{color:#FFFFFF;} .vacancy{ --w-70:rgba(255,255,255,.70); --w-45:rgba(255,255,255,.45); --w-15:rgba(255,255,255,.15); --section-y:clamp(64px,9vw,128px); display:block; } .vacancy img{display:block;} /* — Общие элементы страницы — */ .vacancy .eyebrow{ display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap; font:500 12px/1 var(--font-text);letter-spacing:.14em;text-transform:uppercase; color:var(--w-45);margin:0 0 var(--sp-8); } .vacancy .eyebrow b{font-weight:600;color:#FFFFFF;} .vacancy .rule{border:0;border-top:2px solid #FFFFFF;margin:0;} .vacancy h1,.vacancy h2,.vacancy h3{margin:0;font-family:var(--font-display);text-transform:uppercase;font-weight:600;} /* — ① Hero / оффер — */ .vacancy .hero{padding:clamp(40px,6vw,88px) 0 var(--section-y);} .vacancy .hero h1{font-size:clamp(36px,6vw,84px);line-height:.95;letter-spacing:.02em;max-width:16ch;} .vacancy .mark{position:relative;white-space:nowrap;} .vacancy .mark::after{content:"";position:absolute;left:0;right:0;bottom:-.14em; height:clamp(6px,.9vw,12px);background:var(--accent);} .vacancy .hero-lead{max-width:620px;margin:clamp(28px,3.5vw,44px) 0 0; font-size:clamp(16px,1.4vw,20px);line-height:1.65;color:var(--w-70);} .vacancy .hero-accents{display:flex;flex-direction:column;gap:var(--sp-3); margin:clamp(28px,3.5vw,44px) 0 0;max-width:24ch;} .vacancy .hero-accents p{margin:0;font-family:var(--font-display);font-weight:500;text-transform:uppercase; font-size:clamp(20px,2.2vw,30px);line-height:1.15;letter-spacing:.03em;color:#FFFFFF;} .vacancy .hero-accents p + p{color:var(--accent);} .vacancy .hero-cta{margin-top:clamp(36px,4.5vw,56px);} /* — Кнопка страницы (модификатор макета: квадратная, рамка 2px, Oswald) — */ .vacancy .btn{ display:inline-flex;align-items:center;justify-content:center; min-width:240px;height:56px;padding:0 var(--sp-8); font:600 16px/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase; background:var(--accent);color:var(--accent-ink);border:2px solid var(--accent);border-radius:0; text-decoration:none;cursor:pointer;transition:background .15s,color .15s,border-color .15s; } .vacancy .btn:hover{background:transparent;color:var(--accent);} .vacancy .btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px;box-shadow:none;} .vacancy .btn[disabled],.vacancy .btn[aria-disabled="true"]{ background:transparent;border-color:var(--w-15);color:var(--w-45);cursor:not-allowed;pointer-events:none;} .vacancy .btn.is-loading{background:transparent;border-color:var(--accent);color:var(--accent);cursor:progress;} /* — ② Что предлагаем — */ .vacancy .offer{padding:var(--section-y) 0;} .vacancy .offer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-12) var(--sp-8);} .vacancy .offer-item{border-top:1px solid var(--w-15);padding-top:var(--sp-6);} .vacancy .offer-num{font:500 clamp(40px,4.4vw,64px)/1 var(--font-display);letter-spacing:.02em; color:var(--accent);display:block;} .vacancy .offer-item p{margin:var(--sp-4) 0 0;font-size:16px;line-height:1.55;color:var(--w-70);max-width:26ch;} /* — ③ Форма отклика — */ .vacancy .apply{padding:var(--section-y) 0 clamp(72px,9vw,128px);} .vacancy .apply-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between; gap:var(--sp-6);margin-bottom:clamp(40px,5vw,72px);} .vacancy .apply-head h2{font-size:clamp(28px,4vw,56px);line-height:1;letter-spacing:.03em;} .vacancy .apply-head .note{margin:0;font-size:15px;color:var(--w-45);} .vacancy .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,2.4vw,36px) clamp(32px,5vw,80px);} /* Поле с плавающей подписью */ .vacancy .field{position:relative;min-width:0;max-width:none;padding-bottom:22px;display:block;} .vacancy .field--wide{grid-column:1 / -1;} .vacancy .control{ display:block;width:100%;height:64px;margin:0; background:transparent;color:#FFFFFF; border:1px solid rgba(255,255,255,.25);border-radius:0; padding:22px 16px 8px; font:400 16px/24px var(--font-text); transition:border-color .16s cubic-bezier(.4,0,.2,1),background-color .16s cubic-bezier(.4,0,.2,1); } .vacancy .control::placeholder{color:transparent;} .vacancy .control:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.03);} /* Фокус через outline с отрицательным offset — рамка остаётся 1px, содержимое не сдвигается */ .vacancy .control:focus{outline:2px solid var(--accent);outline-offset:-2px; border-color:var(--accent);background:rgba(255,255,255,.04);box-shadow:none;} .vacancy .control:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;} .vacancy input.control:not(:placeholder-shown), .vacancy textarea.control:not(:placeholder-shown){border-color:rgba(255,255,255,.4);} .vacancy select.control:valid{border-color:rgba(255,255,255,.4);} .vacancy .control[disabled]{border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.3); cursor:not-allowed;background:transparent;} .vacancy .field__label{ position:absolute;left:16px;top:22px; font:400 16px/24px var(--font-text);color:var(--w-45); pointer-events:none;transform-origin:left top;will-change:transform; transition:transform .16s cubic-bezier(.4,0,.2,1),color .16s cubic-bezier(.4,0,.2,1); } .vacancy .field__label .req{color:var(--accent);} /* Поднятое состояние: 16px × .75 = 12px, .02em после масштабирования */ .vacancy .control:focus + .field__label, .vacancy .control:not(:placeholder-shown) + .field__label, .vacancy .field--select .field__label, .vacancy .field.has-error .field__label{ transform:translateY(-17px) scale(.75);letter-spacing:.02em;color:rgba(255,255,255,.5);} .vacancy .control:-webkit-autofill + .field__label, .vacancy .control:autofill + .field__label{ transform:translateY(-17px) scale(.75);letter-spacing:.02em;color:rgba(255,255,255,.5);} .vacancy .control:focus + .field__label{color:var(--accent);} /* Автозаполнение: свой фон и цвет текста */ .vacancy .control:-webkit-autofill, .vacancy .control:-webkit-autofill:hover, .vacancy .control:-webkit-autofill:focus{ -webkit-box-shadow:inset 0 0 0 1000px #141414;-webkit-text-fill-color:#fff;caret-color:#fff;} .vacancy select.control{appearance:none;-webkit-appearance:none;cursor:pointer;color:#FFFFFF;padding-right:44px;} .vacancy select.control option{background:var(--surface-dark);color:#FFFFFF;} .vacancy .field--select::after{ content:"";position:absolute;right:16px;top:29px;width:10px;height:6px;pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center/10px 6px;} .vacancy textarea.control{height:auto;min-height:140px;padding:26px 16px 12px;resize:vertical;max-width:none;} .vacancy .field--area .field__label{top:26px;} .vacancy .field--area .control:focus + .field__label, .vacancy .field--area .control:not(:placeholder-shown) + .field__label{transform:translateY(-21px) scale(.75);} /* Место под текст ошибки зарезервировано всегда — форма не «прыгает» */ .vacancy .error{position:absolute;left:0;bottom:0;margin:0; font:400 13px/18px var(--font-text);color:#FFFFFF;visibility:hidden;} .vacancy .field.has-error .error{visibility:visible;} .vacancy .field.has-error .control{outline:2px solid #FFFFFF;outline-offset:-2px;border-color:#FFFFFF;} .vacancy .field.has-error .control:focus{outline-color:var(--accent);border-color:var(--accent);} /* — ④ Согласие (152-ФЗ) — */ .vacancy .consent{display:flex;align-items:flex-start;gap:var(--sp-4); margin:clamp(40px,5vw,64px) 0 0;max-width:760px;} .vacancy .consent input{position:absolute;opacity:0;width:20px;height:20px;margin:0;} .vacancy .consent .box{flex:0 0 auto;width:20px;height:20px;margin-top:2px;border:1px solid var(--w-45); border-radius:0;position:relative;transition:border-color .15s;} .vacancy .consent .box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px; border-right:2px solid var(--accent);border-bottom:2px solid var(--accent); transform:rotate(45deg) scale(.6);opacity:0;transition:opacity .12s,transform .12s;} .vacancy .consent input:checked + .box{border-color:var(--accent);} .vacancy .consent input:checked + .box::after{opacity:1;transform:rotate(45deg) scale(1);} .vacancy .consent input:focus-visible + .box{outline:2px solid var(--accent);outline-offset:3px;} .vacancy .consent .text{font:400 14px/1.6 var(--font-text);color:var(--w-70);cursor:pointer;} .vacancy .consent a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px;transition:color .15s;} .vacancy .consent a:hover{color:var(--accent);} .vacancy .consent a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} .vacancy .submit-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-6);margin-top:clamp(32px,4vw,48px);} .vacancy .submit-note{margin:0;font-size:13px;color:var(--w-45);} /* — ⑤ Успех — */ .vacancy .success{display:none;padding:clamp(32px,5vw,64px) 0 0;border-top:2px solid #FFFFFF;} .vacancy .success.is-visible{display:block;} .vacancy .success h2{font-size:clamp(32px,5vw,64px);line-height:1;letter-spacing:.03em;} .vacancy .success p{margin:var(--sp-6) 0 0;font-size:clamp(16px,1.4vw,20px);color:var(--w-70);} .vacancy .success .tel{display:inline-block;margin-top:var(--sp-6); font:600 clamp(24px,3vw,40px)/1 var(--font-display);letter-spacing:.04em; color:var(--accent);text-decoration:none;border-bottom:2px solid transparent;} .vacancy .success .tel:hover{border-bottom-color:var(--accent);} .vacancy .success .tel:focus-visible{outline:2px solid var(--accent);outline-offset:4px;} .vacancy a:focus-visible,.vacancy button:focus-visible, .vacancy input:focus-visible,.vacancy select:focus-visible,.vacancy textarea:focus-visible{ outline:2px solid var(--accent);outline-offset:3px;} /* Прокрутка к форме с учётом фиксированной шапки (72px, на mobile 64px) */ .vacancy #form{scroll-margin-top:96px;} @media (max-width:1023px){ .vacancy .offer-grid{grid-template-columns:repeat(2,1fr);} } @media (max-width:767px){ .vacancy #form{scroll-margin-top:88px;} .vacancy .hero h1{max-width:100%;} .vacancy .hero-accents{max-width:100%;} .vacancy .form-grid{grid-template-columns:1fr;} .vacancy .btn{width:100%;} .vacancy .submit-row{align-items:flex-start;} } @media (max-width:479px){ .vacancy .offer-grid{grid-template-columns:1fr;gap:var(--sp-8);} } @media (prefers-reduced-motion:reduce){ .vacancy *,.vacancy *::before,.vacancy *::after{animation:none !important;transition:none !important;} }