/* ============================================================ ГосДвижок — публичная дизайн-система. Стиль: тёмная «бенто»-эстетика, коралловый акцент, скруглённые плитки (вдохновлено travelbag.rustravelforum.com). Переменные темы задаются на и через --acc (акцент сайта, задаётся в админке). ============================================================ */ :root { --acc: #ed6a17; --acc-ink: #fff; --radius: 18px; --font-display: 'Unbounded', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --maxw: 1200px; --ease: cubic-bezier(.4, 0, .2, 1); } html[data-mode="dark"] { --bg: #0b0b0e; --surf: #16161b; --surf2: #1d1d24; --surf3: #23232b; --ink: #f5f5f7; --mute: #9a9aa3; --line: #27272f; --line2: #34343d; --glass: rgba(11, 11, 14, .72); --shadow: 0 12px 32px rgba(0, 0, 0, .45); } html[data-mode="light"] { --bg: #f1f1f4; --surf: #ffffff; --surf2: #f7f7fa; --surf3: #ececf0; --ink: #161616; --mute: #636363; --line: #dedede; --line2: #d4d4d9; --glass: rgba(241, 241, 244, .78); --shadow: 0 12px 32px rgba(15, 15, 20, .10); } html[data-font="system"] { --font-display: system-ui, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background .3s var(--ease), color .3s var(--ease); } img { max-width: 100%; display: block; } a { color: var(--acc); text-decoration: none; } a:hover { opacity: .85; } .page { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; min-height: 60vh; } /* ---------- шапка ---------- */ .hdr { position: sticky; top: 0; z-index: 50; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .hdr-in { max-width: var(--maxw); margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; color: var(--ink); } .brand-t { display: flex; flex-direction: column; line-height: 1.25; } .brand-t b { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: .02em; } .brand-t i { font-style: normal; font-size: 12px; color: var(--mute); } .logo-mono { width: 42px; height: 42px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--acc-ink, #fff); background: linear-gradient(135deg, var(--lg-accent, var(--acc)), color-mix(in srgb, var(--lg-accent, var(--acc)) 55%, #000)); box-shadow: 0 4px 14px color-mix(in srgb, var(--lg-accent, var(--acc)) 35%, transparent); } .logo-img { width: 42px; height: 42px; object-fit: contain; border-radius: 12px; } .nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav-a { padding: 8px 14px; border-radius: 999px; color: var(--mute); font-size: 14px; font-weight: 500; white-space: nowrap; transition: all .2s var(--ease); } .nav-a:hover { color: var(--ink); background: var(--surf2); opacity: 1; } .nav-on { color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, transparent); } .hdr-tools { display: flex; gap: 8px; } .icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surf); color: var(--ink); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all .2s var(--ease); } .icon-btn:hover { border-color: var(--acc); } html[data-mode="dark"] .tt-sun { display: block; } html[data-mode="dark"] .tt-moon { display: none; } html[data-mode="light"] .tt-sun { display: none; } html[data-mode="light"] .tt-moon { display: block; } .burger { display: none; } .mobile-nav { display: none; } /* ---------- блоки: обёртки ---------- */ .blk { position: relative; } .blk-surf { background: var(--surf); } .blk-card { background: var(--surf); border: 1px solid var(--line); box-shadow: var(--shadow); } .blk-grad { background: radial-gradient(900px 420px at 85% -10%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 60%), radial-gradient(700px 380px at -10% 110%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 55%), var(--surf); border: 1px solid var(--line); } .blk-pad-sm { padding: 24px 20px; } .blk-pad-md { padding: 48px 20px; } .blk-pad-lg { padding: 84px 20px; } .blk-center { text-align: center; } .blk-center .hero-btns, .blk-center .seeall { justify-content: center; } .blk-max-narrow { max-width: 720px; margin-left: auto; margin-right: auto; } .blk-max-mid { max-width: 980px; margin-left: auto; margin-right: auto; } .blk-r-md { border-radius: 14px; } .blk-r-lg { border-radius: 22px; } .blk-r-xl { border-radius: 28px; } .blk-heading { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -.01em; margin: 0 0 24px; } .seeall { float: right; font-size: 14px; font-weight: 600; margin-top: 10px; } /* ---------- hero ---------- */ .hero { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; } .hero-tall { min-height: calc(100vh - 120px); } .hero-in { max-width: 900px; padding: 30px 0; position: relative; z-index: 2; } .hero-left { justify-content: flex-start; text-align: left; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); font-size: 13px; font-weight: 600; letter-spacing: .03em; border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); } .hero-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 5.4vw, 56px); line-height: 1.12; letter-spacing: -.02em; margin: 22px 0 18px; text-wrap: balance; } .hero-title em { font-style: normal; color: var(--acc); } .hero-sub { font-size: clamp(15px, 1.8vw, 19px); color: var(--mute); max-width: 640px; margin: 0 auto 28px; } .hero-left .hero-sub { margin-left: 0; } .hero-btns { display: flex; gap: 12px; flex-wrap: wrap; } .hero-left .hero-btns { justify-content: flex-start; } /* ---------- кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 14px; border: none; cursor: pointer; font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.2; transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s; text-decoration: none; } .btn:hover { opacity: 1; transform: translateY(-1px); } .btn-accent { background: var(--acc); color: var(--acc-ink, #fff); box-shadow: 0 6px 20px color-mix(in srgb, var(--acc) 38%, transparent); } .btn-ghost { background: var(--surf2); color: var(--ink); border: 1px solid var(--line2); } .btn-lg { padding: 16px 30px; font-size: 16px; } .btn-sm { padding: 9px 16px; font-size: 13px; border-radius: 12px; } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* ---------- чипы ---------- */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--surf2); border: 1px solid var(--line); color: var(--mute); font-size: 12px; font-weight: 600; white-space: nowrap; } .chip-hot { background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); border-color: color-mix(in srgb, var(--acc) 35%, transparent); } .chip-now { background: color-mix(in srgb, #2aa834 16%, transparent); color: #2aa834; border-color: color-mix(in srgb, #2aa834 35%, transparent); } .chip-past { background: color-mix(in srgb, #bf0c21 12%, transparent); color: color-mix(in srgb, #ff6b7d 80%, #fff); border-color: color-mix(in srgb, #bf0c21 30%, transparent); } .chip-cat { color: var(--ink); } .chip-on { background: var(--acc); color: var(--acc-ink, #fff); border-color: var(--acc); } .cat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 26px; } .chips-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } /* ---------- карточки мероприятий ---------- */ .ecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .ecards-list { grid-template-columns: 1fr; } .ecard { background: var(--surf); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; color: var(--ink); display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; } .ecard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--acc) 40%, var(--line)); opacity: 1; } .ecard-cover { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--surf3); } .ecard-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .ecard:hover .ecard-cover img { transform: scale(1.04); } .ecard-ph { width: 100%; height: 100%; background: linear-gradient(135deg, var(--surf3), color-mix(in srgb, var(--acc) 12%, var(--surf3))); } .ecard-chips { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; } .ecard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .ecard-when { font-size: 13px; color: var(--acc); font-weight: 600; } .ecard-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.35; } .ecard-place { font-size: 13.5px; color: var(--mute); } .ecard-past { opacity: .62; } .ecards-list .ecard { flex-direction: row; } .ecards-list .ecard-cover { width: 260px; aspect-ratio: auto; flex: none; min-height: 150px; } /* ---------- карточки новостей ---------- */ .ncards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .ncard { background: var(--surf); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; color: var(--ink); display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; } .ncard:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--acc) 40%, var(--line)); opacity: 1; } .ncard-cover { aspect-ratio: 16/8.5; overflow: hidden; background: var(--surf3); } .ncard-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .ncard:hover .ncard-cover img { transform: scale(1.04); } .ncard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .ncard-date { font-size: 12.5px; color: var(--mute); font-weight: 600; } .ncard-title { font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.4; } .ncard-ex { font-size: 13.5px; color: var(--mute); } /* ---------- текст, rich ---------- */ .rich { max-width: 780px; } .blk-center .rich { margin-left: auto; margin-right: auto; } .rich p { margin: 0 0 16px; } .rich h2, .rich h3 { font-family: var(--font-display); letter-spacing: -.01em; margin: 32px 0 14px; } .rich h2 { font-size: 24px; } .rich h3 { font-size: 19px; } .rich ul, .rich ol { padding-left: 22px; margin: 0 0 16px; } .rich li { margin-bottom: 6px; } .rich code { background: var(--surf2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; font-size: .9em; } .rich a { text-decoration: underline; text-underline-offset: 3px; } .rich blockquote { margin: 20px 0; padding: 16px 22px; border-left: 3px solid var(--acc); background: var(--surf2); border-radius: 0 14px 14px 0; color: var(--ink); } /* ---------- изображение, галерея ---------- */ .img-fig { margin: 0; } .img-w-narrow { max-width: 620px; } .img-w-mid { max-width: 820px; } .img-w-wide { max-width: 100%; } .img-fig img { width: 100%; } .img-r-none { border-radius: 0; } .img-r-md { border-radius: 14px; } .img-r-lg { border-radius: 22px; } .img-r-xl { border-radius: 28px; } .img-shadow { box-shadow: var(--shadow); } .img-fig figcaption { margin-top: 10px; font-size: 13.5px; color: var(--mute); text-align: center; } .img-empty { border: 2px dashed var(--line2); border-radius: 16px; padding: 40px; text-align: center; color: var(--mute); font-size: 14px; background: var(--surf); } .gal { display: grid; } .gal-i { overflow: hidden; aspect-ratio: 1; background: var(--surf3); } .gal-i img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .gal-i:hover img { transform: scale(1.05); } .gal-r-none { border-radius: 0; } .gal-r-md { border-radius: 12px; } .gal-r-lg { border-radius: 18px; } .gal-r-xl { border-radius: 24px; } /* ---------- колонки ---------- */ .cols { display: grid; gap: 16px; } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } .col-card { background: var(--surf); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; } .col-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--acc) 35%, var(--line)); } .col-ic { font-size: 30px; line-height: 1; } .col-t { font-family: var(--font-display); font-size: 15px; font-weight: 600; } .col-x { font-size: 14px; color: var(--mute); flex: 1; } .col-a { font-size: 14px; font-weight: 600; } /* ---------- аккордеон ---------- */ .accs { display: flex; flex-direction: column; gap: 10px; } .acc { background: var(--surf); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .acc summary { cursor: pointer; padding: 16px 20px; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .acc summary::-webkit-details-marker { display: none; } .acc summary::after { content: '+'; font-size: 22px; color: var(--acc); transition: transform .2s var(--ease); line-height: 1; } .acc[open] summary::after { transform: rotate(45deg); } .acc-b { padding: 0 20px 16px; color: var(--mute); font-size: 14.5px; } /* ---------- видео ---------- */ .vid { margin: 0; } .vid-frame { aspect-ratio: 16/9; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #000; } .vid-frame iframe { width: 100%; height: 100%; border: 0; } .vid figcaption { margin-top: 10px; font-size: 13.5px; color: var(--mute); text-align: center; } /* ---------- статистика ---------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; } .stat { background: var(--surf); border: 1px solid var(--line); border-radius: 20px; padding: 22px 18px; text-align: center; } .stat-v { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3vw, 32px); color: var(--acc); line-height: 1.15; } .stat-l { font-size: 13.5px; color: var(--mute); margin-top: 6px; } /* ---------- баннеры ---------- */ .banner { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: 18px; border: 1px solid transparent; } .banner-accent { background: color-mix(in srgb, var(--acc) 14%, var(--surf)); border-color: color-mix(in srgb, var(--acc) 35%, transparent); } .banner-mint { background: #0e2e14; border-color: #2aa83455; color: #c8ecca; } .banner-rose { background: #3a1014; border-color: #bf0c2155; color: #f7ccd1; } .banner-sky { background: #0e2e30; border-color: #1bb4bb55; color: #d2eff0; } .banner-plum { background: #241f3a; border-color: #9991c655; color: #e7e4f3; } .banner-amber { background: #3a3210; border-color: #fed10155; color: #fff0a8; } html[data-mode="light"] .banner-mint { background: #eaf9ec; color: #0e2e14; } html[data-mode="light"] .banner-rose { background: #fbeaec; color: #6d0a17; } html[data-mode="light"] .banner-sky { background: #e6f6f6; color: #0e2e30; } html[data-mode="light"] .banner-plum { background: #f0eefa; color: #241f3a; } html[data-mode="light"] .banner-amber { background: #fff8da; color: #3a3210; } .bn-t { font-family: var(--font-display); font-size: 15px; font-weight: 600; } .bn-x { font-size: 14px; opacity: .85; margin-top: 4px; } .bn-a { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; } .banner-mint .bn-a, .banner-mint a { color: #7bf1a8; } .banner-rose .bn-a, .banner-rose a { color: #ffa3a3; } .banner-sky .bn-a, .banner-sky a { color: #7fe3e8; } .banner-plum .bn-a, .banner-plum a { color: #c9c2e8; } .banner-amber .bn-a, .banner-amber a { color: #fed101; } /* ---------- CTA ---------- */ .cta { background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #000)); border-radius: 24px; padding: clamp(30px, 5vw, 56px); text-align: center; color: var(--acc-ink, #fff); position: relative; overflow: hidden; } .cta::before { content: ''; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 22px 22px; } .cta-t { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 3.2vw, 32px); position: relative; } .cta-x { font-size: 15.5px; opacity: .92; margin: 12px auto 22px; max-width: 560px; position: relative; } .cta .btn-accent { background: var(--acc-ink, #fff); color: var(--acc); box-shadow: none; position: relative; } html[data-mode="dark"] .cta .btn-accent { color: #161616; } /* ---------- цитата ---------- */ .quote { margin: 0; padding: 8px 0; } .quote-t { font-family: var(--font-display); font-size: clamp(17px, 2.4vw, 23px); font-weight: 500; line-height: 1.45; text-wrap: balance; } .quote-a { margin-top: 14px; color: var(--mute); font-size: 14.5px; } /* ---------- контакты ---------- */ .c-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; } .c-card { background: var(--surf); border: 1px solid var(--line); border-radius: 18px; padding: 20px; } .c-ic { font-size: 24px; line-height: 1; margin-bottom: 10px; } .c-l { font-size: 12.5px; color: var(--mute); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; } .c-v { font-size: 15px; word-break: break-word; } .c-line { display: block; color: var(--ink); } .c-line:hover { color: var(--acc); opacity: 1; } /* ---------- формы ---------- */ .form-card { background: var(--surf); border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 3.5vw, 36px); max-width: 760px; } .form-card-reg { max-width: 760px; } .form-x { color: var(--mute); margin: -10px 0 20px; } .gform { display: flex; flex-direction: column; gap: 14px; } .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .gform label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; } .gform input, .gform textarea { background: var(--surf2); border: 1px solid var(--line2); border-radius: 12px; color: var(--ink); padding: 12px 14px; font-family: var(--font-body); font-size: 15px; outline: none; transition: border-color .2s; } .gform input:focus, .gform textarea:focus { border-color: var(--acc); } .gform textarea { resize: vertical; } .gform .btn { align-self: flex-start; } .f-msg { padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; } .f-msg.ok { background: color-mix(in srgb, #2aa834 14%, transparent); color: #2aa834; } .f-msg.err { background: color-mix(in srgb, #bf0c21 14%, transparent); color: #ff6b7d; } /* ---------- карта ---------- */ .map-card { display: flex; align-items: center; gap: 18px; padding: 22px 26px; background: var(--surf); border: 1px solid var(--line); border-radius: 20px; flex-wrap: wrap; } .map-ic { width: 52px; height: 52px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--acc) 16%, transparent); color: var(--acc); font-size: 26px; font-weight: 700; } .map-t { font-family: var(--font-display); font-weight: 600; font-size: 15px; flex: 1; min-width: 200px; } /* ---------- разделители ---------- */ .hr { border: 0; height: 1px; background: var(--line); margin: 0; } .dots { display: flex; justify-content: center; gap: 8px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); opacity: .5; } /* ---------- страницы модулей ---------- */ .page-head { padding: 40px 0 26px; } .page-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 4vw, 40px); line-height: 1.2; margin: 0 0 8px; letter-spacing: -.01em; } .page-sub { color: var(--mute); margin: 0; font-size: 16px; } .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 6px 0 30px; } .meta-card { background: var(--surf); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; } .event-cover { margin: 0 0 26px; overflow: hidden; } .event-cover img { width: 100%; max-height: 420px; object-fit: cover; } .event-desc { max-width: 820px; margin: 10px 0 30px; } .back-btn { margin-top: 30px; } .nf { text-align: center; padding: 90px 0; } .nf-code { font-family: var(--font-display); font-weight: 700; font-size: clamp(60px, 10vw, 110px); color: var(--acc); line-height: 1; opacity: .9; } .nf-t { font-family: var(--font-display); font-size: 24px; margin: 16px 0 8px; } .nf-x { color: var(--mute); margin: 0 0 24px; } .empty-note { color: var(--mute); padding: 30px; text-align: center; border: 1px dashed var(--line2); border-radius: 18px; } /* ---------- подвал ---------- */ .ftr { margin-top: 70px; border-top: 1px solid var(--line); background: var(--surf); } .ftr-in { max-width: var(--maxw); margin: 0 auto; padding: 44px 20px 20px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; } .ftr-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .ftr-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; } .ftr-x { color: var(--mute); font-size: 13.5px; max-width: 340px; } .ftr-h { font-family: var(--font-display); font-size: 13px; font-weight: 600; margin-bottom: 12px; letter-spacing: .02em; } .ftr-line { display: block; color: var(--mute); font-size: 14px; margin-bottom: 9px; } .ftr-line:hover { color: var(--ink); opacity: 1; } .ftr-bottom { max-width: var(--maxw); margin: 0 auto; padding: 18px 20px 26px; border-top: 1px solid var(--line); color: var(--mute); font-size: 13px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ftr-gov { color: var(--mute); border-bottom: 1px dashed var(--line2); } .ftr-gov:hover { color: var(--acc); } /* ---------- cookie ---------- */ .cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 560px; margin: 0 auto; background: var(--surf2); border: 1px solid var(--line2); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; } .cookie-t { font-family: var(--font-display); font-size: 14px; font-weight: 600; } .cookie-x { font-size: 13px; color: var(--mute); } .cookie .btn { align-self: flex-start; } /* ---------- анимации ---------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .blk { animation: fadeUp .5s var(--ease) both; } .blk:nth-child(2) { animation-delay: .05s; } .blk:nth-child(3) { animation-delay: .1s; } .blk:nth-child(4) { animation-delay: .15s; } .blk:nth-child(5) { animation-delay: .2s; } /* ---------- адаптив ---------- */ @media (max-width: 900px) { .ftr-in { grid-template-columns: 1fr 1fr; } .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .nav { display: none; } .burger { display: flex; } .mobile-nav { position: fixed; inset: 0; z-index: 60; background: var(--glass); backdrop-filter: blur(18px); padding: 90px 24px 24px; overflow-y: auto; } .mobile-nav.open { display: block; } .mnav { display: flex; flex-direction: column; gap: 8px; } .mnav .nav-a { font-size: 17px; padding: 12px 14px; border-radius: 14px; background: var(--surf2); color: var(--ink); } .mnav .nav-on { color: var(--acc); } .ecards-list .ecard { flex-direction: column; } .ecards-list .ecard-cover { width: 100%; aspect-ratio: 16/9; min-height: 0; } .f-row { grid-template-columns: 1fr; } .blk-pad-lg { padding: 56px 16px; } .ftr-in { grid-template-columns: 1fr; } .hero-tall { min-height: calc(100vh - 110px); } }