/* polyana-now: один файл стилей, без сборки, без внешних шрифтов и без JS. Приоритет — читаемость, скорость на мобиле и «живой» вид (SPEC §5). Тёмная тема — автоматически по prefers-color-scheme; анимации — только CSS и только там, где они не мешают (prefers-reduced-motion уважается). */ :root { /* Тёмный «ночной» лейаут по умолчанию: так основной фон даёт максимальный контраст с белыми карточками, а светлый блок погоды читается как витрина. */ --bg: #070f1b; --bg-tint-1: #17253c; --bg-tint-2: #123049; --bg-tint-3: #04080e; --glow-warm: rgba(255, 178, 96, 0.14); --glow-cool: rgba(72, 146, 232, 0.20); --surface: #101d2e; --surface-2: #0d1826; --ink: #f2f7fe; --muted: #a9bed4; --line: #2b4058; --accent: #86c5ff; --accent-2: #4aa8ff; --accent-soft: #17293e; --warn-bg: #3a2c10; --warn-line: #8a6a2c; --warn-ink: #ffd489; --ok: #6ee0a6; --radius: 12px; --radius-lg: 18px; --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-2: 0 16px 38px rgba(0, 0, 0, 0.6); /* Погодный виджет — светлый: инверсия общего фона (решение владельца). */ --sky-1: #f2f8ff; --sky-2: #d5e8fb; --sky-3: #b6d5f2; --peak-far: #a9c8e6; --peak-mid: #7ba5cd; --peak-near: #527ea8; --hero-ink: #0a1a2b; --ridge-1: #050c16; --ridge-2: #08131f; --ridge-3: #0b1a29; --ridge-4: #102335; --glass: rgba(9, 18, 30, 0.78); --glass-line: rgba(134, 197, 255, 0.22); --button-ink: #04121f; } @media (prefers-color-scheme: light) { body.theme-night { /* Светлая тема системы: тот же инвертированный макет, но фон чуть мягче, чтобы не бить по глазам днём. */ --bg: #0b1524; --bg-tint-1: #1d2d45; --bg-tint-2: #17395a; --bg-tint-3: #070d16; --glow-warm: rgba(255, 186, 110, 0.18); --glow-cool: rgba(80, 156, 240, 0.22); --surface: #14222f; --line: #33495f; --sky-1: #ffffff; --sky-2: #e2f0fd; --sky-3: #c3dcf6; } } /* --------------------------------------------------------------------------- Тема по времени суток. Класс ставит сервер на : ночь 20:00–08:00, рассвет 08:00–10:00, день 10:00–18:00, закат 18:00–20:00. Ночь — базовая палитра (:root). Рассвет и закат тёмные, но с тёплым небом и низким солнцем. День светлый: текст тёмный, карточки белые и отделяются рамкой и тенью (контраст внутри карточек не меняется — он считается от цвета карточки, а не от фона страницы). --------------------------------------------------------------------------- */ body.theme-dawn { --bg: #3b2a4d; --bg-tint-1: #71445a; --bg-tint-2: #241b3c; --bg-tint-3: #b96a4e; --glow-warm: rgba(255, 172, 112, 0.34); --glow-cool: rgba(126, 132, 224, 0.20); --surface: #1c2a3c; --surface-2: #17233a; --ink: #f7f1ea; --muted: #d3c1b2; --line: #4b3d55; --accent: #ffd39f; --accent-2: #ffb069; --accent-soft: #2d2440; --glass: rgba(32, 22, 44, 0.66); --glass-line: rgba(255, 194, 138, 0.30); --ridge-1: #150f1f; --ridge-2: #221a30; --ridge-3: #312539; --ridge-4: #4a3549; --ridge-snow: rgba(255, 238, 219, 0.92); --button-ink: #2b1500; --shadow-1: 0 2px 10px rgba(18, 8, 24, 0.5); --shadow-2: 0 18px 40px rgba(18, 8, 24, 0.62); } body.theme-dusk { --bg: #2c2244; --bg-tint-1: #6b3f63; --bg-tint-2: #1d1836; --bg-tint-3: #a8556a; --glow-warm: rgba(255, 138, 108, 0.30); --glow-cool: rgba(120, 126, 226, 0.20); --surface: #1a2739; --surface-2: #15213a; --ink: #f6eef2; --muted: #cbb6c4; --line: #463a58; --accent: #ffc0b4; --accent-2: #ff8f6e; --accent-soft: #2a2342; --glass: rgba(28, 20, 44, 0.68); --glass-line: rgba(255, 160, 130, 0.28); --ridge-1: #120d1c; --ridge-2: #1e172c; --ridge-3: #2c2138; --ridge-4: #45304a; --ridge-snow: rgba(255, 228, 214, 0.88); --button-ink: #2b0f06; --shadow-1: 0 2px 10px rgba(14, 6, 22, 0.52); --shadow-2: 0 18px 40px rgba(14, 6, 22, 0.64); } body.theme-day { --bg: #cfe7f7; --bg-tint-1: #a7d2ef; --bg-tint-2: #7cbde6; --bg-tint-3: #e8f5fc; --glow-warm: rgba(255, 240, 176, 0.62); --glow-cool: rgba(255, 255, 255, 0.42); --surface: #ffffff; --surface-2: #f1f7fd; --ink: #0c2036; --muted: #37536e; --line: #8fb4d6; --accent: #0a4a86; --accent-2: #0d5fa8; --accent-soft: #dceaf9; --warn-bg: #fff4dc; --warn-line: #d3a648; --warn-ink: #6b3f04; --ok: #0b613c; --glass: rgba(255, 255, 255, 0.86); --glass-line: rgba(10, 74, 134, 0.22); --ridge-1: #2c5b45; --ridge-2: #468063; --ridge-3: #74a691; --ridge-4: #a3c6d6; --ridge-snow: #ffffff; --button-ink: #ffffff; --shadow-1: 0 2px 8px rgba(12, 40, 70, 0.18); --shadow-2: 0 16px 34px rgba(12, 40, 70, 0.22); } /* Небо: солнце, луна и облака. Каждой теме — своё положение светила. */ .sky-sun, .sky-moon { position: absolute; display: none; border-radius: 50%; } .theme-dawn .sky-sun, .theme-day .sky-sun, .theme-dusk .sky-sun { display: block; } .theme-dawn .sky-sun { left: 11%; bottom: 24vh; width: 150px; height: 150px; background: radial-gradient(circle, #fff6da 0%, #ffd07e 42%, rgba(255, 176, 92, 0) 72%); box-shadow: 0 0 140px 70px rgba(255, 170, 96, 0.32); } .theme-day .sky-sun { right: 16%; top: 6vh; width: 120px; height: 120px; background: radial-gradient(circle, #fffdf0 0%, #ffe9a3 45%, rgba(255, 226, 140, 0) 74%); box-shadow: 0 0 120px 60px rgba(255, 232, 160, 0.45); } .theme-dusk .sky-sun { right: 10%; bottom: 23vh; width: 160px; height: 160px; background: radial-gradient(circle, #fff0d2 0%, #ff9a5c 44%, rgba(255, 120, 80, 0) 74%); box-shadow: 0 0 150px 74px rgba(255, 130, 80, 0.30); } .theme-night .sky-moon { display: block; right: 13%; top: 7vh; width: 74px; height: 74px; background: #fbf4dd; box-shadow: inset -16px -6px 0 0 #0a1524, 0 0 46px 14px rgba(255, 255, 255, 0.22); } /* Облака: только в светлых темах, медленно плывут (движение уважает reduced-motion). */ .cloud { position: absolute; display: none; width: 190px; height: 52px; border-radius: 999px; background: rgba(255, 255, 255, 0.88); animation: cloud-drift 150s linear infinite; } .cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; } .cloud::before { width: 96px; height: 96px; top: -42px; left: 26px; } .cloud::after { width: 66px; height: 66px; top: -28px; right: 30px; } .cloud-1 { top: 12vh; left: -20%; animation-duration: 170s; } .cloud-2 { top: 30vh; left: -35%; width: 240px; animation-duration: 210s; animation-delay: 20s; opacity: 0.85; } .cloud-3 { top: 5vh; left: -60%; width: 150px; animation-duration: 240s; animation-delay: 45s; opacity: 0.7; } .theme-day .cloud, .theme-dawn .cloud, .theme-dusk .cloud { display: block; } .theme-dawn .cloud { background: rgba(255, 226, 214, 0.72); } .theme-dusk .cloud { background: rgba(255, 206, 196, 0.62); } /* Звёзды и кометы: ночью в полную силу, на рассвете и закате еле видны, днём нет. */ .theme-day .stars, .theme-day .comet, .theme-day .meteor { display: none; } .theme-dawn .stars, .theme-dusk .stars { animation: none; opacity: 0.28; } .theme-dawn .comet, .theme-dawn .meteor, .theme-dusk .comet, .theme-dusk .meteor { display: none; } /* Снежные шапки хребтов: видны, когда светло. */ .ridge-snow { fill: var(--ridge-snow, #ffffff); opacity: 0; } .theme-day .ridge-snow, .theme-dawn .ridge-snow, .theme-dusk .ridge-snow { opacity: 0.92; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; color: var(--ink); font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Тёмный «ночной» фон: тёплый отсвет рассвета слева, холодное свечение справа, глубокая тень внизу. Карточки и текст на нём дают максимальный контраст. */ background-color: var(--bg); background-image: radial-gradient(1100px 620px at 10% -14%, var(--glow-warm) 0%, rgba(0, 0, 0, 0) 62%), radial-gradient(900px 520px at 94% -8%, var(--glow-cool) 0%, rgba(0, 0, 0, 0) 58%), linear-gradient(180deg, var(--bg-tint-2) 0%, var(--bg-tint-1) 30%, var(--bg) 62%, var(--bg-tint-3) 100%); background-attachment: fixed; } /* Звёздное небо: три слоя точек разного размера и яркости (параллакс-эффект за счёт разной скорости мерцания), редкие кометы и короткий «звёздный дождь». Всё чистым CSS, без JS и внешних картинок; при prefers-reduced-motion движение выключается, звёзды остаются статичными. */ .bg-sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .stars { position: absolute; inset: -10% -10% 0 -10%; background-repeat: repeat; } .stars-1 { background-image: radial-gradient(1.6px 1.6px at 24px 36px, #ffffff 50%, rgba(255, 255, 255, 0) 51%), radial-gradient(1.4px 1.4px at 148px 96px, #eaf3ff 50%, rgba(255, 255, 255, 0) 51%), radial-gradient(1.2px 1.2px at 276px 44px, #ffffff 50%, rgba(255, 255, 255, 0) 51%), radial-gradient(1.5px 1.5px at 372px 168px, #d8e8ff 50%, rgba(255, 255, 255, 0) 51%), radial-gradient(1.3px 1.3px at 88px 214px, #ffffff 50%, rgba(255, 255, 255, 0) 51%); background-size: 420px 300px; animation: twinkle 7s ease-in-out infinite alternate; } .stars-2 { background-image: radial-gradient(1px 1px at 60px 120px, #cfe2fb 50%, rgba(255, 255, 255, 0) 51%), radial-gradient(1.1px 1.1px at 210px 260px, #ffffff 50%, rgba(255, 255, 255, 0) 51%), radial-gradient(1px 1px at 330px 80px, #bcd7f5 50%, rgba(255, 255, 255, 0) 51%), radial-gradient(1.2px 1.2px at 410px 210px, #ffffff 50%, rgba(255, 255, 255, 0) 51%), radial-gradient(1px 1px at 500px 40px, #dbeaff 50%, rgba(255, 255, 255, 0) 51%); background-size: 560px 340px; opacity: 0.8; animation: twinkle 11s ease-in-out infinite alternate; } .stars-3 { background-image: radial-gradient(0.9px 0.9px at 100px 60px, #9fc2e8 50%, rgba(255, 255, 255, 0) 51%), radial-gradient(0.9px 0.9px at 260px 150px, #b9d4f2 50%, rgba(255, 255, 255, 0) 51%), radial-gradient(1px 1px at 430px 300px, #cfe4fb 50%, rgba(255, 255, 255, 0) 51%), radial-gradient(0.9px 0.9px at 620px 120px, #a9c9ec 50%, rgba(255, 255, 255, 0) 51%); background-size: 680px 380px; opacity: 0.7; animation: twinkle 15s ease-in-out infinite alternate; } /* Комета: яркая головка и длинный хвост, пролетает раз в 14–23 секунды. */ .comet { position: absolute; top: 0; left: 0; width: 150px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(215, 235, 255, 0.75) 55%, #ffffff 100%); box-shadow: 0 0 8px rgba(190, 220, 255, 0.85); opacity: 0; transform-origin: right center; animation: comet-fly 17s linear infinite; } .comet-1 { animation-duration: 17s; animation-delay: 3s; } .comet-2 { animation-duration: 23s; animation-delay: 9s; width: 110px; } .comet-3 { animation-duration: 29s; animation-delay: 16s; width: 190px; height: 3px; } /* Звёздный дождь: четыре метеора подряд, затем длинная пауза (цикл 46 с). */ .meteor { position: absolute; top: 0; left: 0; width: 90px; height: 1.5px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(230, 242, 255, 0.9) 70%, #ffffff 100%); box-shadow: 0 0 6px rgba(200, 226, 255, 0.8); opacity: 0; animation: meteor-fall 46s linear infinite; } .meteor-1 { animation-delay: 0s; } .meteor-2 { animation-delay: 1.4s; width: 70px; } .meteor-3 { animation-delay: 2.9s; width: 120px; } .meteor-4 { animation-delay: 4.6s; width: 60px; } /* Горы: силуэт четырёх хребтов у нижнего края неба (inline SVG в разметке). Мягко проявляется снизу вверх маской, поэтому текст поверх остаётся контрастным. */ .bg-scenery { position: absolute; inset: auto 0 0 0; height: 46vh; min-height: 250px; pointer-events: none; opacity: 0.95; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 45%, #000 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 45%, #000 100%); animation: ridge-drift 70s ease-in-out infinite alternate; } .bg-scenery svg { width: 100%; height: 100%; display: block; } .ridge-4 { fill: var(--ridge-4); opacity: 0.85; } .ridge-3 { fill: var(--ridge-3); opacity: 0.9; } .ridge-2 { fill: var(--ridge-2); opacity: 0.95; } .ridge-1 { fill: var(--ridge-1); } .wrap { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 0 14px 40px; } a { color: var(--accent); } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; } /* --------------------------------------------------------------------------- Светлые карточки контента. Тот же приём, что у погодного виджета: светлая витрина на тёмном звёздном небе. Внутри карточек переопределяются цветовые переменные, поэтому весь их внутренний текст (заголовки, метрики, чипсы, таблица, графики) сам переключается на тёмный по светлому. --------------------------------------------------------------------------- */ .hero, .card, .digest-card, .chart, .forecast-chart, .forecast-table, .hours li, .soon-card, .event-card, .search-results .feed-item { --surface: #f4f9ff; --surface-2: #eaf3fd; --ink: #0b1c2e; --muted: #46607a; --line: #c4d9ee; --accent: #0b4f8f; --accent-2: #1667c9; --accent-soft: #dfeafb; --warn-bg: #fff3dc; --warn-line: #e3b96b; --warn-ink: #7a4a05; --ok: #0f6b40; --button-ink: #ffffff; background-color: var(--surface); color: var(--ink); } .card, .digest-card, .chart { background: var(--surface); } /* Днём небо светлое: карточкам нужна рамка и тень, иначе они «растворяются». */ body.theme-day .hero { border: 1px solid var(--line); } body.theme-day .card, body.theme-day .digest-card, body.theme-day .chart, body.theme-day .forecast-chart, body.theme-day .dash-week, body.theme-day .dash-cam, body.theme-day .notice { border-color: var(--line); } body.theme-day .badge-unofficial { background: rgba(255, 255, 255, 0.9); } /* График снега: линия наследует цвет карточки (SVG использует currentColor). */ .chart .spark { color: var(--accent-2); } .spark-max, .spark-min, .spark-empty { fill: var(--muted); } .spark-area { fill: currentColor; fill-opacity: 0.18; } /* --- шапка: заметная, широкая, с поиском и «нашими проектами» --- */ .site-header { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 0 0 16px; padding: 12px 16px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 1.22rem; letter-spacing: -0.01em; } .brand-mark { font-size: 1.5rem; line-height: 1; } .site-nav { display: flex; flex-wrap: wrap; gap: 2px; font-size: 0.95rem; flex: 1 1 auto; } .site-nav a { display: inline-block; padding: 7px 11px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 600; white-space: nowrap; border: 1px solid transparent; } .site-nav a:hover, .site-nav a:focus { color: var(--accent-2); background: var(--accent-soft); text-decoration: none; } .site-nav a.nav-current { color: var(--accent); background: var(--accent-soft); border-color: var(--glass-line); } .header-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; } .site-search { display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); } .site-search:focus-within { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--accent-soft); } .site-search input { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.92rem; padding: 6px 0; min-width: 190px; max-width: 240px; } .site-search input::placeholder { color: var(--muted); opacity: 0.85; } .site-search input:focus { outline: none; } .search-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer; background: var(--accent-2); color: var(--button-ink); } .search-button:hover, .search-button:focus { filter: brightness(1.08); } .search-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; } .nav-promo { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 13px; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 0.9rem; color: #2a1400; background: linear-gradient(120deg, #ffc46b 0%, #ff8a5b 55%, #ff6f91 100%); box-shadow: 0 6px 18px rgba(255, 130, 90, 0.38); } .nav-promo:hover, .nav-promo:focus { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255, 130, 90, 0.45); } /* --- первый экран главной: погода сейчас, камера и короткая неделя --- */ .dashboard { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 4px 0 22px; } .dash-now { margin: 0; } .dash-today { margin: 10px 0 4px; font-size: 1.02rem; } .dash-cam { margin: 0; display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; box-shadow: var(--shadow-2); } /* Кадр растягивается на высоту карточки: пустого места под кнопками не остаётся. */ .dash-cam .cam-frame { box-shadow: none; border-radius: var(--radius); flex: 1 1 auto; min-height: 220px; width: 100%; object-fit: cover; object-position: center; } .dash-cam-empty { flex: 1 1 auto; } .dash-cam-empty { display: grid; place-items: center; gap: 4px; text-align: center; min-height: 220px; border-radius: var(--radius); border: 1px dashed var(--line); background: var(--surface-2); color: var(--muted); padding: 18px; } .dash-cam-emoji { font-size: 2rem; margin: 0; } .dash-cam-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; } .button-live { display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 8px 20px rgba(185, 28, 60, 0.35); } /* Селектор с двумя классами нужен из-за порядка правил: общий `.button` объявлен ниже по файлу и с той же силой перебивал оформление «живой» кнопки — она выходила синей с тёмным текстом. Плюс градиент потемнее: белый текст на прежнем светлом оранжевом давал 2.9:1, а так у обоих краёв не меньше 5:1 (tools/browser_layout_check.mjs). */ .button.button-live { background: linear-gradient(120deg, #c2410c 0%, #b91c3c 100%); color: #ffffff; } .button.button-live:hover, .button.button-live:focus { background: linear-gradient(120deg, #a83a0a 0%, #9e1832 100%); color: #ffffff; } .live-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9); animation: live-pulse 2s ease-out infinite; } .button-ghost { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line); } .button-ghost:hover, .button-ghost:focus { background: var(--accent-soft); border-color: var(--accent-2); } .dash-week { margin: 0; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); } .week-strip { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .week-day { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 8px 4px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); } .week-name { font-size: 0.8rem; color: var(--muted); font-weight: 700; } .week-icon { font-size: 1.15rem; line-height: 1.1; } .week-max { font-weight: 800; font-variant-numeric: tabular-nums; } .week-min { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; } .week-precip { font-size: 0.75rem; color: var(--accent); } .week-precip-dry { color: var(--muted); opacity: 0.6; } .dash-week-cta { margin: 6px 0 0; font-size: 0.92rem; } /* --- «Наши проекты» на главной: заметно, но не перекрывает контент --- */ .promo-block { margin: 22px 0; padding: 18px; border-radius: var(--radius-lg); border: 1px solid rgba(255, 170, 110, 0.55); background: radial-gradient(600px 200px at 12% 0%, rgba(255, 196, 120, 0.22) 0%, rgba(0, 0, 0, 0) 70%), linear-gradient(135deg, rgba(255, 138, 91, 0.16) 0%, rgba(255, 111, 145, 0.14) 100%); box-shadow: var(--shadow-1); } .promo-block-head h2 { margin: 0 0 2px; } .promo-lead { margin: 0 0 12px; color: var(--muted); font-size: 0.95rem; } .promo-cards { display: grid; gap: 12px; grid-template-columns: 1fr; } .promo-card { display: grid; gap: 4px; padding: 16px; border-radius: var(--radius-lg); text-decoration: none; color: #2a1400; background: linear-gradient(140deg, #ffd9a0 0%, #ffb279 55%, #ff9aa8 100%); border: 1px solid rgba(120, 50, 10, 0.18); box-shadow: 0 12px 28px rgba(255, 140, 90, 0.28); transition: transform 0.16s ease, box-shadow 0.16s ease; } .promo-card:hover, .promo-card:focus { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(255, 140, 90, 0.38); } .promo-tag { justify-self: start; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; padding: 3px 9px; border-radius: 999px; background: rgba(42, 20, 0, 0.14); } .promo-card-title { font-size: 1.22rem; font-weight: 800; } /* Местная присказка: почему этот проект уместен именно на поляне. */ .promo-card-hook { margin-top: 4px; font-size: 0.98rem; font-style: italic; font-weight: 600; padding-left: 10px; border-left: 3px solid rgba(42, 20, 0, 0.35); } .promo-card-note { font-size: 0.9rem; opacity: 0.85; } .promo-card-cta { margin-top: 6px; font-weight: 800; } /* Витрина в подвале: крупнее и с рамкой, чтобы её было видно. */ .promo-footer { margin: 22px 0 14px; padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid rgba(255, 170, 110, 0.45); background: linear-gradient(135deg, rgba(255, 138, 91, 0.12) 0%, rgba(255, 111, 145, 0.10) 100%); } .promo-footer h2 { margin: 0 0 4px; } .promo-footer .promo-list { display: grid; gap: 10px; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 8px 0 0; } .promo-footer .promo-link { display: grid; gap: 3px; padding: 12px 14px; border-radius: var(--radius); text-decoration: none; color: #2a1400; background: linear-gradient(140deg, #ffe0b2 0%, #ffbe8f 100%); border: 1px solid rgba(120, 50, 10, 0.16); } .promo-footer .promo-link:hover, .promo-footer .promo-link:focus { box-shadow: 0 10px 22px rgba(255, 140, 90, 0.3); } .promo-footer .promo-title { font-weight: 800; font-size: 1.05rem; } .promo-footer .promo-note { font-size: 0.9rem; } .promo-footer .promo-cta { font-weight: 800; font-size: 0.9rem; } .badge-unofficial { margin: 0 0 14px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent-2); border-radius: var(--radius); font-size: 0.85rem; color: var(--accent); font-weight: 600; } /* --- заголовки и текст --- */ h1 { font-size: 1.55rem; line-height: 1.22; margin: 8px 0 10px; font-weight: 800; letter-spacing: -0.01em; } h2 { font-size: 1.2rem; margin: 18px 0 8px; } h3 { font-size: 1rem; margin: 14px 0 6px; color: var(--muted); } .lead { font-size: 1.02rem; } .muted { color: var(--muted); } .small { font-size: 0.85rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .updated { margin: 10px 0 6px; font-size: 0.95rem; } .attribution { margin: 8px 0 14px; font-size: 0.85rem; color: var(--muted); } .attribution a { text-decoration: underline; } .attribution .license { white-space: nowrap; } .notice { padding: 10px 12px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--line); } .notice-warn { background: var(--warn-bg); border-color: var(--warn-line); } .section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; } .section-head h2 { margin-bottom: 4px; padding-left: 10px; border-left: 4px solid var(--accent-2); border-radius: 2px; } .section-meta { color: var(--muted); font-size: 0.85rem; } .section-lead { margin: 0 0 12px; } /* --------------------------------------------------------------------------- Погодный виджет: светлая витрина на тёмном фоне (инверсия общего бэкграунда). Голубое небо, снежные хребты и тёмный текст — самый контрастный блок страницы. --------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; margin: 4px 0 22px; padding: 26px 18px 30px; border-radius: var(--radius-lg); background: linear-gradient(165deg, var(--sky-1) 0%, var(--sky-2) 46%, var(--sky-3) 100%); background-size: 170% 170%; color: var(--hero-ink); box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(255, 255, 255, 0.5); animation: sky-drift 34s ease-in-out infinite alternate, fade-up 0.5s ease-out both; } .hero h1 { color: inherit; } .hero .lead { max-width: 62ch; } .hero-sky { background: linear-gradient(165deg, var(--sky-1) 0%, var(--sky-2) 44%, var(--sky-3) 100%); } .hero-digest { background: linear-gradient(160deg, var(--sky-1) 0%, var(--sky-2) 55%, var(--sky-3) 100%); } .hero-content { position: relative; z-index: 2; } .hero-kicker { margin: 0 0 6px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; font-weight: 700; } .hero-mountains { position: absolute; inset: auto 0 -2px 0; width: 100%; height: 46%; min-height: 110px; z-index: 1; display: block; } .peak-far { fill: var(--peak-far); opacity: 0.55; } .peak-mid { fill: var(--peak-mid); opacity: 0.7; } .peak-near { fill: var(--peak-near); opacity: 0.9; } .hero-now { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; } .hero-elev { display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.66); border: 1px solid rgba(10, 40, 70, 0.16); backdrop-filter: blur(2px); } @media (prefers-color-scheme: dark) { .hero-elev { background: rgba(255, 255, 255, 0.5); } } .hero-elev-label { font-weight: 700; } .hero-elev-icon { font-size: 1rem; } .hero-elev-temp { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; } .hero-elev-note { font-size: 0.85rem; opacity: 0.8; } .hero .updated { opacity: 0.92; } .hero .updated a { color: inherit; } .hero .notice { text-shadow: none; } .hero .notice a { color: var(--accent); } /* --- карточки высот --- */ .elevations { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 16px 0; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-1); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; animation: fade-up 0.45s ease-out both; } .card:hover, .card:focus-within { transform: translateY(-2px); box-shadow: var(--shadow-2); } .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .card-head h2 { margin: 0; } .elev { font-weight: 600; color: var(--accent); font-size: 0.95rem; } .card-note { margin: 2px 0 8px; font-size: 0.82rem; color: var(--muted); } .temp-row { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 0; } .temp-icon { font-size: 1.6rem; line-height: 1; } .temp { font-size: 2.4rem; font-weight: 700; margin: 0; line-height: 1; } .descr { margin: 4px 0 10px; color: var(--muted); } /* Цвет по состоянию погоды: заметно, но спокойно. */ .state-clear { border-left: 4px solid #e8b33c; } .state-partly { border-left: 4px solid #86a8c9; } .state-cloudy { border-left: 4px solid #8d9aa8; } .state-fog { border-left: 4px solid #a9a294; } .state-drizzle { border-left: 4px solid #6f9fc4; } .state-rain { border-left: 4px solid #4a7fb5; } .state-snow { border-left: 4px solid #9fc8e6; } .state-showers { border-left: 4px solid #3f6fa3; } .state-snowfall { border-left: 4px solid #bcdcf2; } .state-thunder { border-left: 4px solid #7a6bb5; } .state-unknown { border-left: 4px solid var(--line); } .hero-elev.state-clear { box-shadow: inset 3px 0 0 #e8b33c; } .hero-elev.state-cloudy { box-shadow: inset 3px 0 0 #8d9aa8; } .hero-elev.state-snow, .hero-elev.state-snowfall { box-shadow: inset 3px 0 0 #9fc8e6; } .hero-elev.state-rain, .hero-elev.state-showers { box-shadow: inset 3px 0 0 #4a7fb5; } .hero-elev.state-fog { box-shadow: inset 3px 0 0 #a9a294; } .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 0; } .metrics div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--line); padding-bottom: 3px; } .metrics dt { color: var(--muted); font-size: 0.85rem; } .metrics dd { margin: 0; font-variant-numeric: tabular-nums; font-size: 0.9rem; } .metrics-compact { gap: 3px 10px; } .metrics-compact div { padding-bottom: 2px; } .metrics-compact dt, .metrics-compact dd { font-size: 0.85rem; } .today { margin: 10px 0 0; font-size: 0.9rem; } /* «Данные устарели»: заметно, но без крика. */ .stale-note { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); font-size: 0.88rem; } .cta { margin: 18px 0; } .button { display: inline-block; padding: 10px 14px; border-radius: var(--radius); background: var(--accent-2); color: var(--button-ink); text-decoration: none; font-weight: 700; transition: transform 0.15s ease, background 0.15s ease; } .button:hover, .button:focus { background: var(--accent); transform: translateY(-1px); } .cta-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .soon, .snow, .forecast { margin-top: 22px; } /* --- графики --- */ .charts { display: grid; gap: 14px; grid-template-columns: 1fr; } .chart { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; } .chart figcaption { font-size: 0.9rem; margin-bottom: 6px; } .spark { width: 100%; height: 110px; display: block; } .spark-max, .spark-min { font-size: 11px; fill: var(--muted); } .spark-empty { font-size: 12px; fill: var(--muted); } /* --- график прогноза на 7 дней (статический SVG, без JS) --- */ .forecast-chart { margin: 0 0 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; } .forecast-chart figcaption { font-size: 0.9rem; margin-bottom: 4px; } .fc { width: 100%; height: auto; display: block; } .fc-grid { stroke: var(--line); stroke-width: 1; opacity: 0.6; } .fc-grid-zero { stroke: var(--accent-2); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.7; } .fc-axis, .fc-date { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; } .fc-day { font-size: 13px; fill: var(--text); font-weight: 600; } .fc-icon { font-size: 22px; } .fc-value { font-size: 12px; fill: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } .fc-value-min { font-weight: 600; fill: var(--accent); } .fc-band { fill: var(--accent-2); fill-opacity: 0.12; stroke: none; } .fc-temp-max { fill: none; stroke: #d1511f; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; } .fc-temp-min { fill: none; stroke: var(--accent-2); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; } .fc-dot-max { fill: #d1511f; } .fc-dot-min { fill: var(--accent-2); } .fc-precip { fill: #3f7fb5; fill-opacity: 0.75; } .fc-precip-value, .fc-precip-zero { font-size: 11px; fill: #2f6a9b; font-variant-numeric: tabular-nums; } .fc-empty { font-size: 13px; fill: var(--muted); } /* Сутки: ночные полосы, мелкие точки между подписями, часы по оси. */ .fc-night { fill: var(--accent-2); fill-opacity: 0.09; stroke: none; } .fc-temp-line { fill: none; stroke: #d1511f; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .fc-dot-small { fill: #d1511f; fill-opacity: 0.55; } .fc-hour { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; } .hourly-chart { margin-top: 10px; } .forecast-details { margin: 0 0 10px; font-size: 0.9rem; } .forecast-details summary { cursor: pointer; color: var(--accent); margin-bottom: 6px; } /* --- таблицы --- */ .table-wrap { overflow-x: auto; } .forecast-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 0.9rem; } .forecast-table th, .forecast-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; } .forecast-table thead th { background: var(--accent-soft); color: var(--accent); position: sticky; top: 0; } .forecast-table tbody th { font-weight: 600; } .temp-inline { margin: 6px 0 10px; } .hours { list-style: none; display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; margin: 8px 0 0; } .hours li { display: flex; gap: 8px; align-items: baseline; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; } .hour { color: var(--muted); font-size: 0.85rem; } .hour-temp { font-weight: 600; font-variant-numeric: tabular-nums; } ul.plain, ol.plain { padding-left: 20px; } ul.plain li, ol.plain li { margin: 5px 0; } .tag { display: inline-block; font-size: 0.75rem; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .tag-ok { background: rgba(110, 224, 166, 0.16); color: var(--ok); border: 1px solid rgba(110, 224, 166, 0.4); } .tag-warn { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); } /* --- подвал --- */ .site-footer { margin-top: 30px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); } .site-footer p { margin: 4px 0; } .disclaimer { color: var(--ink); } /* --- наши проекты (подвал и «О сайте») --- */ .promo { margin: 0 0 14px; } .promo h2 { font-size: 0.95rem; margin: 0 0 8px; color: var(--ink); } .promo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: 1fr; } .promo-link { display: block; padding: 10px 12px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent-2); border-radius: var(--radius); box-shadow: var(--shadow-1); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .promo-link:hover, .promo-link:focus { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent-2); } .promo-title { display: block; font-weight: 700; color: var(--ink); } .promo-note { display: block; color: var(--muted); font-size: 0.83rem; } @media (min-width: 640px) { .promo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* --- M3a: лента обстановки (/sluhi) --- На главной странице сырой ленты больше нет: там только погода и обзор дня. */ .feed-list { list-style: none; padding: 0; margin: 10px 0 0; } .feed-item { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent-2); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; } .feed-kind { display: inline-block; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 1px 9px; font-size: 12px; margin-right: 6px; } .feed-text { display: block; margin: 6px 0 4px; } .feed-meta, .feed-head { color: var(--muted); font-size: 13px; } .feed-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .feed-source { font-weight: 600; color: var(--ink); } .badge-unconfirmed { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); border-radius: 999px; padding: 1px 8px; font-size: 12px; white-space: nowrap; } /* --------------------------------------------------------------------------- M3b+: обзор дня — карточки категорий, чипсы, архив --------------------------------------------------------------------------- */ .digest-teaser, .digest, .archive { margin: 22px 0; } /* Переход по ссылке «Читать целиком» не должен прятать карточку под краем экрана. */ .digest-card, .card, .archive-list li { scroll-margin-top: 18px; } .digest-permalink { margin-left: auto; color: var(--muted); text-decoration: none; font-weight: 700; } .digest-permalink:hover, .digest-permalink:focus { color: var(--accent); text-decoration: underline; } .digest-grid { display: grid; gap: 14px; grid-template-columns: 1fr; } .digest-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-1); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; animation: fade-up 0.5s ease-out both; } .digest-card:hover, .digest-card:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent-2); } .digest-head { display: flex; align-items: center; gap: 10px; } .digest-head h3 { margin: 0; color: var(--ink); font-size: 1.05rem; } .digest-head h3 a { color: inherit; text-decoration: none; } .digest-head h3 a:hover, .digest-head h3 a:focus { color: var(--accent); text-decoration: underline; } .digest-emoji { font-size: 1.4rem; line-height: 1; } .digest-summary { margin: 0; } .digest-more { margin: 0; font-size: 0.85rem; font-weight: 700; } .digest-meta, .digest-foot { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 0.83rem; } .digest-foot { margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--line); } .digest-count { font-weight: 600; color: var(--ink); } .digest-useful { color: var(--muted); } .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; } .chip { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 0.8rem; } .digest-nav { margin: 14px 0; } /* --- поиск по архиву (/poisk) --- */ .search-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; } .search-input { flex: 1 1 240px; min-width: 0; padding: 10px 12px; font: inherit; color: var(--hero-ink); background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(10, 40, 70, 0.22); border-radius: var(--radius); } .search-input:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; } .hero-search .button { flex: 0 0 auto; } .chip-link { text-decoration: none; } .chip-link:hover, .chip-link:focus { border-color: var(--accent); text-decoration: underline; } .search-results mark { background: #ffe08a; color: #3a2a00; padding: 0 2px; border-radius: 3px; } /* --- афиша событий (/sobytiya) и справочник цен (/tseny) --- */ .events-day, .prices-section { margin: 22px 0; } .weekday { color: var(--muted); font-weight: 500; font-size: 0.9rem; } .event-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 12px; grid-template-columns: 1fr; } .event-card { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent-2); border-radius: var(--radius-lg); padding: 12px 14px; box-shadow: var(--shadow-1); transition: transform 0.18s ease, box-shadow 0.18s ease; } .event-card:hover, .event-card:focus-within { transform: translateY(-2px); box-shadow: var(--shadow-2); } .event-card h3 { margin: 0 0 6px; color: var(--ink); font-size: 1.02rem; } .event-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; } .event-chip { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: 0.82rem; } /* Переход к сообщению-источнику: не мелкий текст внизу, а заметная кнопка-чип. */ .event-chip-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 700; background: var(--accent-2); color: var(--button-ink); border-color: var(--accent-2); } .event-chip-link:hover, .event-chip-link:focus { filter: brightness(1.08); text-decoration: underline; } .event-note { margin: 0 0 6px; } .event-foot { margin: 0; } .price-table { width: 100%; } .price-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .price-source { white-space: normal; min-width: 180px; } .price-source a { text-decoration: underline; } .price-source span { display: block; } /* --- рельефная карта (/karta): подложка + SVG поверх неё --- */ .karta { margin: 22px 0; } .karta-figure { margin: 0; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); } .karta-map-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .karta-scroll-hint { display: none; margin: 6px 0 0; } .karta-map { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .karta-base { display: block; width: 100%; height: auto; } .karta-overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .karta-figure figcaption { margin-top: 10px; font-size: 0.85rem; } .karta-river { fill: none; stroke: #2f7fb8; stroke-width: 5; opacity: 0.85; stroke-linecap: round; } .karta-road { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 3; stroke-dasharray: 9 7; } .karta-dot { stroke: #ffffff; stroke-width: 2.5; } .karta-place .karta-dot { fill: #1f4f7a; } .karta-resort .karta-dot { fill: #d1511f; } .karta-nature .karta-dot { fill: #1f7a4d; } .karta-leader { stroke: rgba(20, 30, 45, 0.55); stroke-width: 1.6; } .karta-plaque { fill: rgba(255, 255, 255, 0.94); stroke: rgba(20, 30, 45, 0.28); stroke-width: 1; } .karta-label { fill: #10243a; font-size: 15px; font-weight: 700; } .karta-sub { fill: #3b5670; font-size: 13px; font-variant-numeric: tabular-nums; } .karta-compass circle { fill: rgba(255, 255, 255, 0.86); stroke: rgba(20, 30, 45, 0.3); stroke-width: 1.5; } .karta-compass-arrow { fill: #b8420f; } .karta-compass-label { fill: #10243a; font-size: 15px; font-weight: 800; } .karta-scale-bar { fill: rgba(16, 36, 58, 0.85); } .karta-scale-bar:nth-child(2) { fill: rgba(255, 255, 255, 0.9); } .karta-scale-label { fill: #10243a; font-size: 14px; font-weight: 700; paint-order: stroke; stroke: rgba(255, 255, 255, 0.9); stroke-width: 3; } .karta-legend { margin-top: 16px; } .karta-legend ul, .karta-help ul { margin: 6px 0 0; } .karta-help { margin-top: 16px; } .karta-key { display: inline-block; width: 22px; height: 8px; border-radius: 4px; vertical-align: middle; margin-right: 4px; } .karta-key-river { background: #2f7fb8; } .karta-key-road { background: repeating-linear-gradient(90deg, #7a8794 0 5px, rgba(255, 255, 255, 0) 5px 9px); } .karta-key-resort { background: #d1511f; width: 12px; height: 12px; border-radius: 50%; } .karta-key-nature { background: #1f7a4d; width: 12px; height: 12px; border-radius: 50%; } .karta-key-place { background: #1f4f7a; width: 12px; height: 12px; border-radius: 50%; } /* --- карта курортов крупным планом: тот же рельеф, но со станциями и канатками --- */ .karta-title { margin: 0 0 4px; font-size: 1.35rem; } .karta-intro { margin: 0 0 12px; max-width: 70ch; } .karta-group { margin: 14px 0 2px; font-size: 1.02rem; } .karta-lifts-note { margin: 4px 0 0; } /* Канатка: белая подложка + линия, иначе на рельефе теряется. */ .karta-lift-halo { fill: none; stroke: rgba(255, 255, 255, 0.8); stroke-width: 7; stroke-linecap: round; } .karta-lift { fill: none; stroke: #b8420f; stroke-width: 3.4; stroke-linecap: round; } /* На карте курортов подписи мельче: станций много, а кадр подробный. */ .karta-rlabel { font-size: 13px; } .karta-rsub { font-size: 11px; } .karta-rresort .karta-rdot { fill: #d1511f; } .karta-rplace .karta-rdot { fill: #1f4f7a; } .karta-rnature .karta-rdot { fill: #1f7a4d; } /* Станция на линии — белая точка с оранжевым ободком: видно, что она на канатке. */ .karta-rstation .karta-rdot { fill: #ffffff; stroke: #b8420f; stroke-width: 3.5; } .karta-key-lift { background: #b8420f; } .karta-key-station { background: #ffffff; border: 2px solid #b8420f; width: 12px; height: 12px; border-radius: 50%; } /* --- каталог «Что посмотреть» --- */ .poi-section { margin: 22px 0; } .poi-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .poi-card { padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); } .poi-name { margin: 0 0 4px; font-size: 1.05rem; } .poi-meta { margin: 0 0 6px; } .poi-ele-source { opacity: 0.85; } .poi-note { margin: 0 0 8px; } .poi-coords { margin: 0; font-variant-numeric: tabular-nums; } /* --- страница «Где жить» (M4) --- */ .living-list { margin: 22px 0; display: grid; gap: 12px; } .living-card { margin: 0; } .living-head h2 { margin: 0 0 4px; } .living-meta { margin: 0 0 10px; } .living-good, .living-watch { margin: 6px 0 0; } .living-good strong { color: #1f7a4d; } .living-watch strong { color: #b8420f; } /* --- раздел «Инструкторы и гиды» и страница «Реклама» (M4) --- */ .notice { margin: 14px 0; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); font-weight: 600; } .notice-ok { border-left: 4px solid #1f7a4d; } .notice-warn { border-left: 4px solid #b8420f; } .guides-section { margin: 22px 0; } .guide-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .guide-card { padding: 12px 14px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); } .guide-name { margin: 0 0 4px; font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .guide-name a { text-decoration: none; } .guide-name a:hover, .guide-name a:focus { text-decoration: underline; } .guide-badge { font-size: 0.72rem; font-weight: 700; text-transform: none; letter-spacing: 0.01em; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line); } .guide-meta { margin: 0 0 6px; } .guide-about { margin: 0 0 8px; } .guide-foot { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; } .guide-price { font-weight: 700; } .guide-contact { font-weight: 700; } .guide-price-large { font-size: 1.1rem; font-weight: 700; margin: 0 0 10px; } .guide-rules { margin-top: 22px; } .ads-table td, .ads-table th { vertical-align: top; } /* Формы: заявка инструктора и заявка на рекламу. Без JS — обычный POST. */ .form { margin: 0; } .form-row { margin: 0 0 14px; } .form-row label { display: block; font-weight: 700; margin-bottom: 4px; } .form-row .req { color: #b8420f; } .form-row input[type="text"], .form-row select, .form-row textarea { width: 100%; padding: 9px 11px; font: inherit; color: var(--ink); background: var(--surface-2, #ffffff); border: 1px solid var(--line); border-radius: var(--radius); } .form-row textarea { resize: vertical; min-height: 90px; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .form-hint { margin: 4px 0 0; font-size: 0.85rem; color: var(--muted, #4a5b6d); } .form-check { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; font-size: 0.95rem; } .form-check input { margin-top: 3px; } .form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 8px; } /* Ловушка для ботов: поле есть в разметке, но человек его не видит. */ .form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --- своя веб-камера (/webcam) --- */ .cam { margin: 22px 0; } .cam-figure { margin: 0; } .cam-frame { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-2); } .cam-figure figcaption { margin-top: 8px; } .cam-live { margin-top: 18px; } .cam-video { width: 100%; max-width: 720px; border-radius: var(--radius); border: 1px solid var(--line); background: #000; } .cam-live-full .cam-video { max-width: 100%; } .cam-stream-url { word-break: break-all; } .cam-retry { margin-left: 8px; font: inherit; font-size: 0.92em; cursor: pointer; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); } .cam-retry:hover { border-color: var(--accent); color: var(--accent-strong, var(--accent)); } .archive-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; grid-template-columns: 1fr; } .archive-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; border-bottom: 1px dashed var(--line); padding-bottom: 5px; } /* --- анимации: только CSS, с уважением к prefers-reduced-motion --- */ @keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes sky-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } @keyframes ridge-drift { from { transform: translateX(0) scale(1.02); } to { transform: translateX(-1.6%) scale(1.04); } } /* Комета: короткая вспышка в начале цикла, дальше длинная пауза — «пролетает периодически», а не мельтешит постоянно. */ @keyframes comet-fly { 0% { opacity: 0; transform: translate3d(-15vw, 6vh, 0) rotate(14deg) scaleX(0.7); } 3% { opacity: 1; } 16% { opacity: 1; } 30% { opacity: 0; transform: translate3d(108vw, 62vh, 0) rotate(14deg) scaleX(1.35); } 100% { opacity: 0; transform: translate3d(108vw, 62vh, 0) rotate(14deg) scaleX(1.35); } } /* Звёздный дождь: четыре метеора подряд в начале цикла, затем тишина. */ @keyframes meteor-fall { 0% { opacity: 0; transform: translate3d(-10vw, 2vh, 0) rotate(32deg) scaleX(0.6); } 1.5% { opacity: 1; } 5% { opacity: 1; } 10% { opacity: 0; transform: translate3d(72vw, 58vh, 0) rotate(32deg) scaleX(1.2); } 100% { opacity: 0; transform: translate3d(72vw, 58vh, 0) rotate(32deg) scaleX(1.2); } } @keyframes twinkle { from { opacity: 0.55; } to { opacity: 1; } } /* Облака плывут справа налево очень медленно — фон живёт, но не мешает читать. */ @keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(190vw); } } /* Точка «в эфире»: мягкая пульсация, чтобы кнопка трансляции была заметна. */ @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.85); } 70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .hero { animation: none; } .bg-scenery, .stars { animation: none; } .comet, .meteor, .cloud { display: none; } .live-dot { animation: none; } .card, .digest-card { animation: none; transition: none; } .card:hover, .card:focus-within, .digest-card:hover, .digest-card:focus-within { transform: none; } .promo-card, .promo-card:hover, .promo-card:focus { transform: none; transition: none; } .button { transition: none; } .button:hover, .button:focus { transform: none; } } @media (min-width: 640px) { h1 { font-size: 1.9rem; } .hero { padding: 30px 26px 34px; } .hero-now { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hero-elev { grid-template-columns: 1fr; gap: 2px; text-align: left; } .hero-elev-temp { text-align: left; } .elevations { grid-template-columns: repeat(2, minmax(0, 1fr)); } .charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hours { grid-template-columns: repeat(4, minmax(0, 1fr)); } .digest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .archive-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .promo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .promo-footer .promo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .week-strip { gap: 8px; } } @media (min-width: 960px) { .wrap { max-width: 1200px; } .elevations { grid-template-columns: repeat(3, minmax(0, 1fr)); } .charts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .digest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .digest-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Первый экран: слева погода, справа крупный кадр с камеры, под ними — неделя во всю ширину (так у карточки камеры нет пустого места снизу). */ .dashboard { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: stretch; } .dash-now { grid-column: 1; grid-row: 1; } .dash-cam { grid-column: 2; grid-row: 1; } .dash-week { grid-column: 1 / -1; grid-row: 2; } } @media (max-width: 760px) { /* Карта на телефоне не сжимается в нечитаемую полоску: её можно двигать вбок. */ .karta-map { min-width: 760px; } /* Курортная карта подробнее: на телефоне ей нужен запас по ширине побольше. */ .karta-resort-map .karta-map { min-width: 900px; } .karta-scroll-hint { display: block; } } @media print { .site-nav, .cta, .badge-unofficial, .hero-mountains, .bg-sky, .digest-nav, .site-search, .nav-promo, .promo-block, .promo-footer, .dash-cam-actions { display: none; } body { background: none; color: #000; } .hero { background: none; color: #000; box-shadow: none; } .hero h1 { text-shadow: none; } .card, .digest-card, .chart, .forecast-table { background: none; color: #000; border-color: #999; } .muted, .section-meta, h3 { color: #444; } }