/* ============================================================================ * style.css — Все стили сайта vsevakansiivrossii.ru * ============================================================================ * Подключается в на всех страницах: * * * Структура: * 1. CSS-переменные (дизайн-система) * 2. Базовые стили / типографика * 3. Шапка (site-header) * 4. Подвал (site-footer) * 5. Главная (hero + cards) * 6. Страница вакансии (page-head, card, merged sections) * 7. Карточки деталей (kv-table, kv-inline) * 8. Списки / теги / кнопки * 9. Яндекс.Карты * 10. Сообщения (empty/dim/archive-notice/error) * 11. Страница ошибки * 12. Медиа-запросы (адаптивность) * ============================================================================ */ /* ===== 1. CSS-переменные (дизайн-система) ===== */ :root{ --bg:#f4f5f7; --surface:#ffffff; --ink:#2c3340; --muted:#7c8493; --line:#e7e9ee; --accent:#3f5b78; --accent-soft:#eef2f6; --radius:10px; } /* ===== 2. Базовые стили / типографика ===== */ *{box-sizing:border-box;} html, body{margin:0; padding:0;} body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--ink); line-height:1.55; font-size:15px; } a{color:var(--accent);} p{margin:0 0 8px;} /* ===== 3. Шапка (site-header) ===== */ .site-header{ background:var(--surface); border-bottom:1px solid var(--line); padding:14px 0; margin-bottom:24px; } .site-header__inner{ max-width:1100px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } .site-header__logo{ font-size:18px; font-weight:700; color:var(--ink); text-decoration:none; letter-spacing:-0.01em; } .site-header__logo:hover{color:var(--accent);} .site-header__logo .dot{ display:inline-block; width:8px; height:8px; background:var(--accent); border-radius:50%; margin-right:8px; vertical-align:middle; } .site-nav{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; } .site-nav a{ color:var(--ink); text-decoration:none; font-size:14px; padding:8px 14px; border-radius:var(--radius); transition:background 0.15s ease, color 0.15s ease; } .site-nav a:hover{ background:var(--accent-soft); color:var(--accent); } /* ===== 4. Подвал (site-footer) ===== */ .site-footer{ margin-top:48px; padding:32px 0 24px; border-top:1px solid var(--line); background:var(--surface); } .site-footer__inner{ max-width:1100px; margin:0 auto; padding:0 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:32px; flex-wrap:wrap; } .site-footer__col h4{ font-size:13px; font-weight:600; color:var(--ink); margin:0 0 12px; text-transform:uppercase; letter-spacing:0.04em; } .site-footer__col ul{ list-style:none; margin:0; padding:0; } .site-footer__col li{margin-bottom:6px;} .site-footer__col a{ color:var(--muted); text-decoration:none; font-size:14px; } .site-footer__col a:hover{ color:var(--accent); } .site-footer__brand{ max-width:340px; } .site-footer__brand p{ font-size:14px; color:var(--muted); margin:8px 0 0; line-height:1.5; } .site-footer__bottom{ max-width:1100px; margin:24px auto 0; padding:16px 20px 0; border-top:1px solid var(--line); font-size:13px; color:var(--muted); text-align:center; } /* ===== 5. Главная (hero + cards) ===== */ .hero{ max-width:1100px; margin:0 auto 32px; padding:0 20px; } .hero h1{ font-size:28px; font-weight:700; margin:0 0 8px; letter-spacing:-0.01em; } .hero p{ font-size:15px; color:var(--muted); margin:0; } .cards{ max-width:1100px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; } .v-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; transition:border-color 0.15s ease, box-shadow 0.15s ease; } .v-card:hover{ border-color:var(--accent); box-shadow:0 2px 8px rgba(63,91,120,0.06); } .v-card__title{ display:block; font-size:15px; font-weight:600; color:var(--ink); text-decoration:none; line-height:1.35; margin-bottom:8px; } .v-card__title:hover{color:var(--accent);} .v-card__meta{ display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--muted); } .v-card__salary{ color:var(--ink); font-weight:500; } .v-card__empty{ color:var(--muted); font-style:italic; } /* ===== 6. Страница вакансии (page-head, card, merged sections) ===== */ body{padding:28px 16px;} /* только на странице вакансии — отступы */ .wrap{max-width:1080px; margin:0 auto;} .page-head{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px; margin-bottom:22px; } .page-head h1{margin:0 0 6px; font-size:22px; font-weight:600;} .page-head .meta{color:var(--muted); font-size:13px; display:flex; gap:18px; flex-wrap:wrap;} .page-head .meta b{color:var(--ink); font-weight:500;} .page-head .meta .orig{color:var(--muted); font-size:11px;} .grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;} .grid .full{grid-column:1 / -1;} .grid--top{grid-template-columns: 2fr 1fr; align-items: start;} /* Правая колонка: Вакансии предприятия + Предприятие (sticky-обёртка) */ .right-column{ grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 18px; align-self: start; position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow-y: auto; } .right-column .card__body{padding:14px 16px;} /* Сайдбар внутри right-column (Вакансии предприятия) */ .sidebar__list{list-style:none; margin:0; padding:0;} .sidebar__item{ padding:10px 0; border-bottom:1px solid var(--line); } .sidebar__item:last-child{border-bottom:none; padding-bottom:4px;} .sidebar__item:first-child{padding-top:4px;} .sidebar__title{ display:block; font-size:14px; font-weight:500; color:var(--accent); text-decoration:none; line-height:1.35; margin-bottom:4px; } .sidebar__title:hover{text-decoration:underline;} .sidebar__salary, .sidebar__region{ font-size:12px; color:var(--muted); margin-top:2px; } /* Карточка (общий компонент) */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .card__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--accent-soft); } .card__head h2{margin:0; font-size:15px; font-weight:600; color:var(--accent);} .src{font-size:11px; color:var(--muted); white-space:nowrap;} .card__body{padding:16px 18px;} /* Заголовок секции над группой карточек */ .section-title{ margin:22px 0 12px; font-size:18px; font-weight:600; color:var(--accent); grid-column:1 / -1; } .section-title:not(:first-child){margin-top:26px;} /* Объединённая карточка: секции внутри одной .card */ .card__body--merged{padding:6px 22px 14px;} .merged-section{padding:14px 0 6px;} .merged-section:first-of-type{padding-top:6px;} .merged-section__head{ margin:0 0 10px; font-size:14px; font-weight:600; color:var(--accent); } /* Горизонтальная полоска-разделитель цвета RGB(0,80,170) */ .section-divider{ border:0; border-top:2px solid rgb(0, 80, 170); margin:0; } /* ===== 7. Карточки деталей (kv-table, kv-inline) ===== */ table.kv{width:100%; border-collapse:collapse; font-size:14px;} table.kv th, table.kv td{ padding:8px 10px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); } table.kv tr:last-child th, table.kv tr:last-child td{border-bottom:none;} table.kv th{width:42%; font-weight:500; color:var(--ink); word-break:break-word;} table.kv td{word-break:break-word;} .orig{ color:var(--muted); font-size:11px; font-weight:400; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } .th-orig{ display:block; font-size:11px; color:var(--muted); font-weight:400; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; margin-top:2px; } .kv-group__head{ margin:0 0 8px; font-size:13px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.04em; border-bottom:1px dashed var(--line); padding-bottom:6px; } /* Список «метка (orig): значение» для inline-рендера (регион, контакты, языки) */ .kv-inline{margin:0; padding:0; list-style:none;} .kv-inline li{ display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px; } .kv-inline li:last-child{border-bottom:none;} .kv-inline .k{ width:42%; flex:0 0 42%; color:var(--ink); font-weight:500; } .kv-inline .k .orig{ display:block; font-size:11px; color:var(--muted); font-weight:400; font-family:ui-monospace,monospace; margin-top:2px; } .kv-inline .v{flex:1; word-break:break-word;} /* Модификатор: деление ровно пополам (для блока «Регион») */ .kv-inline--split li{ display:grid; grid-template-columns:1fr 1fr; } .kv-inline--split .k{width:auto; flex:none;} .kv-inline--split .v{flex:none;} /* ===== 8. Списки / теги / кнопки ===== */ .sub{margin:0 0 8px; font-size:13px; font-weight:600; color:var(--ink);} .sub:not(:first-child){margin-top:16px;} .tags{display:flex; flex-wrap:wrap; gap:7px;} .tag{ background:var(--accent-soft); color:var(--accent); border:1px solid #dde5ec; border-radius:999px; padding:4px 11px; font-size:13px; } ul.clean{list-style:none; margin:0; padding:0;} ul.clean li{padding:6px 0; border-bottom:1px solid var(--line); font-size:14px;} ul.clean li:last-child{border-bottom:none;} .actions{margin-top:24px;} .btn{ display:inline-block; padding:9px 18px; border-radius:8px; background:var(--accent); color:#fff; text-decoration:none; font-size:14px; } .btn:hover{background:#33495f;} /* ===== 9. Яндекс.Карты ===== */ .yandex-map{ width:100%; height:380px; margin:8px 0 6px; border:1px solid var(--line); border-radius:8px; background:var(--accent-soft); } .yandex-map__link{margin:0 0 4px; font-size:13px;} .yandex-map__link a{color:#1a73e8; text-decoration:none;} .yandex-map__link a:hover{text-decoration:underline;} /* ===== 10. Сообщения (empty/dim/archive-notice/error) ===== */ .dim{color:var(--muted); font-size:13px;} .empty{color:var(--muted); font-size:13px;} .archive-notice{ display:inline-block; margin-left:10px; padding:2px 10px; font-size:14px; font-weight:500; color:#000; background:#fff7c2; border-radius:6px; vertical-align:middle; } .error-note{ max-width:1100px; margin:0 auto 24px; padding:14px 20px; background:#fde7e7; border:1px solid #f3b6b6; border-radius:var(--radius); color:#8a2a2a; font-size:14px; } pre{ background:#f7f8fa; border:1px solid var(--line); padding:10px; border-radius:6px; margin:0; white-space:pre-wrap; max-height:340px; overflow:auto; font-size:12px; } /* Скрыто визуально, но доступно скринридерам и поисковым роботам */ .visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ===== 11. Страница ошибки ===== */ .vac-error { max-width:480px; margin:60px auto; background:#fff; border:1px solid #e7e9ee; border-radius:14px; padding:36px; text-align:center; box-shadow:0 4px 20px rgba(0,0,0,0.04); } .vac-error__code { font-size:64px; font-weight:700; color:#c8d0db; line-height:1; } .vac-error__title { font-size:20px; font-weight:600; margin:12px 0 8px; } .vac-error__msg { color:#7c8493; margin-bottom:22px; } /* ===== 12. Медиа-запросы (адаптивность) ===== */ @media (max-width: 760px) { .grid, .grid--top{grid-template-columns:1fr;} .sidebar{position: static;} } @media (max-width: 900px) { .cards{grid-template-columns:repeat(2, 1fr);} } @media (max-width: 640px) { .site-header__inner{ gap:12px; } .site-header__logo{ font-size:16px; } .site-nav{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .site-nav a{ white-space:nowrap; padding:6px 10px; font-size:13px; } .site-footer__inner{ gap:20px; } } @media (max-width: 560px) { .cards{grid-template-columns:1fr;} }