@charset "UTF-8"; /* ========================================================================= doorshotel — main.css Концепция: «старый отель». Тёплая сепия вместо холодного угля, латунь вместо красного, свечной свет вместо неона, засечный текст вместо гротеска. Мрачно, но тепло и старомодно. Три правила, которые здесь нарушать нельзя: 1. Ни одного холодного тона и ни одного красного — вся палитра лежит в тёплой части спектра (hue 25–45). 2. Ни одного цветного box-shadow. Свечение — чужой приём; глубина здесь делается границей и осветлением фона. 3. Радиус 3px везде. Не 0, не 2, не 8. ========================================================================= */ :root { --bg-base: #17120E; /* тёплый сепия-чёрный — коридор */ --bg-card: #211A14; /* карточки — тёмное дерево */ --bg-code: #0F0B08; /* блоки кода */ --bg-raise: #2A2119; /* приподнятые плашки, hover карточки */ --brass: #B08D57; /* латунь — таблички, кнопки, акценты */ --brass-soft: #3A2E1C; /* тёмная латунь — подложки чипов и границы */ --candle: #E3B872; /* свечной свет — hover, активное состояние */ --ok: #7A9A5B; /* «рабочий» — приглушённый оливковый */ --warn: #C08A3E; /* «на проверке» — тусклый янтарь */ --text-primary: #EDE4D6; /* тёплый бумажный белый */ --text-muted: #B3A38D; /* выцветший бежевый: подписи и вторичный текст */ --text-faint: #9A8B78; /* совсем тихое — даты, служебное, крупный кегль */ --border: #35291E; /* тёплая граница */ --font-display: 'Yeseva One', 'Times New Roman', Georgia, serif; --font-body: 'Literata', Georgia, 'Times New Roman', serif; --font-mono: 'Courier Prime', ui-monospace, 'Cascadia Mono', Consolas, monospace; --radius: 3px; --hall: 1120px; } /* ── Сброс и база ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Якоря из «Содержания» не должны заезжать под верх окна. */ scroll-padding-top: 24px; } body { background: var(--bg-base); color: var(--text-primary); font-family: var(--font-body); font-size: 17px; line-height: 1.7; font-weight: 400; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Русские слова длинные, а экран бывает 320px: «конфиденциальности» в H1 или адрес почты в абзаце иначе вылезают за край. Перенос включается только тогда, когда слово действительно не помещается. */ overflow-wrap: break-word; } img { display: block; max-width: 100%; height: auto; } /* Атрибут hidden обязан выигрывать у любого display в теме. Правило браузера [hidden]{display:none} лежит в UA-стилях, а значит проигрывает каждому авторскому `display: flex/grid/inline-flex`. Тема переключает hidden из JS в пяти местах (карточки каталога, панель фильтра, счётчик выбранных, кнопка «Фильтр», баннер согласия), и без !important отфильтрованная карточка остаётся на экране. Один общий рубильник надёжнее, чем guard в каждом компоненте. */ [hidden] { display: none !important; } a { color: var(--brass); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--candle); } h1, h2, h3, h4 { margin: 0 0 .5em; font-family: var(--font-display); font-weight: 400; /* Yeseva One существует только в 400 */ line-height: 1.18; letter-spacing: .2px; color: var(--text-primary); /* lang="ru" стоит на , поэтому браузер переносит по слогам, а не рубит слово посередине. Если словарь переносов недоступен, сработает overflow-wrap с . */ hyphens: auto; } h1 { font-size: clamp(1.85rem, 5vw, 2.9rem); } h2 { font-size: clamp(1.4rem, 3.4vw, 2rem); margin-top: 1.6em; } h3 { font-size: 1.18rem; margin-top: 1.4em; } h4 { font-size: 1.02rem; letter-spacing: .4px; } p { margin: 0 0 1em; } ul, ol { margin: 0 0 1em; padding-left: 1.35em; } li { margin: .35em 0; } strong, b { font-weight: 600; } hr { height: 0; margin: 40px 0; border: 0; border-top: 1px solid var(--border); } table { border-collapse: collapse; } ::selection { background: var(--brass); color: var(--bg-base); } :focus-visible { outline: 2px solid var(--candle); outline-offset: 2px; border-radius: 2px; } .mono { font-family: var(--font-mono); } .accent { color: var(--brass); } /* Ссылка для клавиатуры: уводит сразу в контент, минуя меню. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; background: var(--brass); color: var(--bg-base); font-weight: 600; border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; color: var(--bg-base); } /* ── Лейаут ─────────────────────────────────────────────────────────────── */ /* Единственный ограничитель ширины. Никогда не вешается на header/footer — только внутрь них, иначе фон перестанет доходить до краёв экрана. */ .hall { width: 100%; max-width: var(--hall); margin: 0 auto; padding: 0 20px; } .head-bar { width: 100%; background: var(--bg-card); border-bottom: 1px solid var(--border); } .foot-bar { width: 100%; margin-top: 64px; padding: 36px 0 24px; background: var(--bg-card); border-top: 1px solid var(--border); } /* ── Шапка ──────────────────────────────────────────────────────────────── */ /* Отступы шапки — только паддингами контейнера: margin у .head-bar оставил бы полоску фона страницы над ней. */ .head-bar__nav { display: flex; align-items: center; gap: 22px; min-height: 62px; padding-top: 10px; padding-bottom: 10px; } .head-bar__logo { display: inline-flex; align-items: baseline; gap: 7px; font-family: var(--font-display); font-size: 1.12rem; letter-spacing: 1.6px; color: var(--text-primary); white-space: nowrap; } .head-bar__logo:hover { color: var(--text-primary); } .head-bar__logo:hover .head-bar__word { color: var(--candle); } /* «№» — латунью и чуть крупнее слова: это мотив сайта, а не украшение. */ .head-bar__sign { font-family: var(--font-display); font-size: 1.32em; color: var(--brass); line-height: 1; } .head-bar__word { transition: color .15s ease; } .head-bar__links { display: flex; gap: 22px; margin: 0 0 0 auto; padding: 0; list-style: none; } .head-bar__links li { margin: 0; } .head-bar__links a { font-size: .95rem; color: var(--text-muted); border-bottom: 1px solid transparent; padding-bottom: 2px; } .head-bar__links a:hover { color: var(--candle); border-bottom-color: var(--brass); } .head-bar__lang { display: flex; gap: 8px; } .head-bar__lang-i { padding: 2px 7px; font-size: .8rem; letter-spacing: .6px; color: var(--text-faint); border: 1px solid var(--brass-soft); border-radius: var(--radius); } .head-bar__lang-i.is-on { color: var(--bg-base); background: var(--brass); border-color: var(--brass); } .head-bar__burger { display: none; margin-left: auto; padding: 6px 10px; font-size: 1.25rem; line-height: 1; color: var(--brass); background: transparent; border: 1px solid var(--brass-soft); border-radius: var(--radius); cursor: pointer; } .head-bar__burger:hover { color: var(--candle); border-color: var(--brass); } /* ── Подвал ─────────────────────────────────────────────────────────────── */ .foot-bar__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 28px; align-items: start; } .foot-bar__logo { display: inline-flex; align-items: baseline; gap: 7px; font-family: var(--font-display); font-size: 1.02rem; letter-spacing: 1.4px; color: var(--text-primary); } .foot-bar__sign { color: var(--brass); font-size: 1.3em; line-height: 1; } .foot-bar__tag { margin: 10px 0 0; max-width: 38ch; font-size: .9rem; line-height: 1.6; color: var(--text-faint); } .foot-bar__h { margin: 0 0 10px; font-family: var(--font-display); font-size: .82rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--brass); } .foot-bar__col ul { margin: 0; padding: 0; list-style: none; } .foot-bar__col li { margin: 0 0 7px; } .foot-bar__col a { font-size: .92rem; color: var(--text-muted); } .foot-bar__col a:hover { color: var(--candle); } .foot-bar__legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); } .foot-bar__legal p { margin: 0; max-width: 96ch; font-size: .82rem; line-height: 1.65; color: var(--text-faint); } /* ── Hero: фойе ─────────────────────────────────────────────────────────── */ /* Секция с фоном: фон на всю ширину, контент внутри .hall (§2.5, п. 4). */ .foyer { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 54px 0 46px; } .foyer__hall { position: relative; } .foyer__over { margin: 0 0 12px; font-family: var(--font-mono); font-size: .8rem; letter-spacing: 2.2px; text-transform: uppercase; color: var(--brass); } .foyer h1 { margin-bottom: .35em; } .foyer__lead { max-width: 62ch; margin: 0 0 22px; font-size: 1.06rem; color: var(--text-muted); } .foyer__facts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .foyer__fact { padding: 6px 12px; font-size: .85rem; color: var(--candle); background: var(--brass-soft); border-radius: var(--radius); } .foyer__acts { display: flex; flex-wrap: wrap; gap: 12px; } .foyer__fresh { margin: 18px 0 0; font-size: .84rem; color: var(--text-faint); } /* ── Кнопки ─────────────────────────────────────────────────────────────── */ .btn-brass, .btn-hollow { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; font-family: var(--font-body); font-size: .97rem; font-weight: 600; letter-spacing: .3px; line-height: 1.25; border-radius: var(--radius); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .btn-brass { color: var(--bg-base); background: var(--brass); border: 1px solid var(--brass); } .btn-brass:hover { color: var(--bg-base); background: var(--candle); border-color: var(--candle); } .btn-hollow { color: var(--brass); background: transparent; border: 1px solid var(--brass-soft); } .btn-hollow:hover { color: var(--candle); border-color: var(--brass); } /* ── Секции и текст страниц ─────────────────────────────────────────────── */ main { display: block; } .folio { padding-top: 34px; } .folio > h1 { margin-bottom: .45em; } .folio__lead { max-width: 68ch; font-size: 1.06rem; color: var(--text-muted); } .folio__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } /* Видимая дата правки под лидом. Нужна и людям, и машинам: ИИ-системы взвешивают свежесть, а без явной даты страница для них «без возраста». */ .stamp-date { display: inline-block; margin: 0 0 4px; padding: 4px 10px; font-size: .82rem; color: var(--text-faint); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); } .stamp-date time { color: var(--candle); } .storey { margin-top: 44px; } .storey > h2:first-child { margin-top: 0; } .storey p, .storey li { max-width: 78ch; } /* Служебная подпись под заголовком секции. */ .storey__note { margin: -6px 0 18px; font-size: .92rem; color: var(--text-faint); } /* Пустое состояние: до первого пулла и после слишком узкого фильтра. */ .vacancy { margin: 0; padding: 26px 20px; text-align: center; color: var(--text-muted); background: var(--bg-card); border: 1px dashed var(--brass-soft); border-radius: var(--radius); } /* ── 404 ────────────────────────────────────────────────────────────────── */ .wrongdoor__num { margin: 0 0 6px; font-family: var(--font-mono); font-size: clamp(2.6rem, 9vw, 4.4rem); line-height: 1; color: var(--brass); } .wrongdoor__sign { font-family: var(--font-display); margin-right: .12em; } .wrongdoor__list { margin: 22px 0 0; padding-left: 1.2em; } /* ── Рекламные слоты ────────────────────────────────────────────────────── */ /* Пустой контейнер под сеть: пока кода нет, места не занимает. */ .billboard:empty { display: none; } .billboard { margin: 26px 0 0; text-align: center; } /* ── Адаптив ────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .foot-bar__grid { grid-template-columns: 1fr 1fr; } .foot-bar__brand { grid-column: 1 / -1; } } @media (max-width: 780px) { body { font-size: 16px; } .head-bar__burger { display: inline-block; } /* Меню на мобильных превращается в раскрывающийся список под шапкой. Открывает его nav.js — без класса .is-open список скрыт. */ .head-bar__nav { flex-wrap: wrap; gap: 12px; } .head-bar__links { display: none; flex-direction: column; gap: 0; width: 100%; margin: 0; padding: 6px 0 4px; border-top: 1px solid var(--border); } .head-bar__links.is-open { display: flex; } .head-bar__links li { border-bottom: 1px solid var(--border); } .head-bar__links li:last-child { border-bottom: 0; } .head-bar__links a { display: block; padding: 11px 2px; font-size: 1rem; border-bottom: 0; } .head-bar__links a:hover { border-bottom: 0; } .head-bar__lang { order: 3; } .foyer { padding: 38px 0 34px; } .foot-bar { margin-top: 44px; } } @media (max-width: 560px) { .foot-bar__grid { grid-template-columns: 1fr; gap: 22px; } .foyer__acts .btn-brass, .foyer__acts .btn-hollow { flex: 1 1 100%; } } /* Уважаем системную настройку: анимации здесь декоративные, без них ничего не ломается. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } .doorsad { margin: 26px 0; padding-top: 18px; text-align: left; } .doorsad__link { display: flex; justify-content: center; text-decoration: none; } .doorsad__img { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; transition: border-color .15s ease, box-shadow .15s ease; }