/* ========================================================================== Adman — дизайн-система сайта Две полноценные темы (тёмная по умолчанию, светлая по выбору), характер: «приборная панель дата-центра» — приборные цифры, LED-акценты, тонкая сетка, стеклянные панели. Тема задаётся атрибутом data-theme на ; переменные — единственный источник цвета, ни одного хардкода цвета в компонентах. ========================================================================== */ /* ---------- тёмная тема (по умолчанию) ---------- */ :root { --bg: #070E16; --bg-soft: #0B1521; --panel: #101D2B; --panel-2: #16273A; --panel-3: #1C3346; --line: #1E3346; --line-soft: #16263A; --fg: #E7EFF7; --fg-muted: #93A9BE; --fg-dim: #6C8299; --accent: #37A6F0; --accent-2: #0B7FD4; --accent-ink: #041019; --accent-soft: rgba(55,166,240,.12); --led: #13D2A5; --led-soft: rgba(19,210,165,.14); --warn: #F5A623; --danger: #F2545F; --glass: rgba(16,29,43,.72); --glass-2: rgba(22,39,58,.55); --grid: rgba(255,255,255,.035); --glow-1: rgba(11,127,212,.30); --glow-2: rgba(19,210,165,.14); --hero-a: #070E16; --hero-b: #0A1826; /* фон hero: затемнение под текст → фотография ЦОДа → базовый градиент темы */ --hero-photo: url('/assets/hero-dc.jpg'); --hero-veil: linear-gradient(90deg, rgba(7,14,22,.98) 0%, rgba(7,14,22,.9) 42%, rgba(7,14,22,.46) 100%); --hero-veil-flat: rgba(7,14,22,.86); --stick: #060C13; --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35); --shadow-2: 0 2px 8px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.45); --shadow-lift: 0 18px 50px rgba(0,0,0,.5); color-scheme: dark; } /* ---------- светлая тема ---------- */ :root[data-theme="light"] { --bg: #F5F8FB; --bg-soft: #EBF0F6; --panel: #FFFFFF; --panel-2: #F2F6FA; --panel-3: #E8EFF6; --line: #DCE5EE; --line-soft: #E9EFF5; --fg: #0C1926; --fg-muted: #55697C; --fg-dim: #7C90A3; --accent: #0B7FD4; --accent-2: #0766AD; --accent-ink: #FFFFFF; --accent-soft: rgba(11,127,212,.09); --led: #0BAF86; --led-soft: rgba(11,175,134,.12); --warn: #B8760A; --danger: #C42B3C; --glass: rgba(255,255,255,.82); --glass-2: rgba(255,255,255,.6); --grid: rgba(12,25,38,.045); --glow-1: rgba(11,127,212,.14); --glow-2: rgba(11,175,134,.10); --hero-a: #FFFFFF; --hero-b: #EAF2FA; --hero-veil: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 42%, rgba(255,255,255,.62) 100%); --hero-veil-flat: rgba(255,255,255,.9); --stick: #0B1620; --shadow-1: 0 1px 2px rgba(12,25,38,.06), 0 10px 26px rgba(12,25,38,.07); --shadow-2: 0 2px 6px rgba(12,25,38,.07), 0 22px 54px rgba(12,25,38,.10); --shadow-lift: 0 18px 44px rgba(12,25,38,.14); color-scheme: light; } /* ---------- базовое ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/28px 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif; overflow-x: hidden; transition: background .28s ease, color .28s ease; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(1100px 620px at 82% -8%, var(--glow-1), transparent 62%), radial-gradient(820px 520px at 4% 108%, var(--glow-2), transparent 66%); transition: opacity .28s ease; } body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(1200px 700px at 50% 0%, #000 20%, transparent 78%); mask-image: radial-gradient(1200px 700px at 50% 0%, #000 20%, transparent 78%); } .wrap { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 24px; } main { position: relative; z-index: 1; display: block; } h1, h2, h3, h4 { font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif; font-weight: 600; margin: 0; letter-spacing: -.015em; } h1 { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.08; } h2 { font-size: clamp(26px, 3.1vw, 40px); line-height: 1.14; } h3 { font-size: 21px; line-height: 1.32; } h4 { font-size: 17px; line-height: 1.4; } p { margin: 0; } img, svg, video { max-width: 100%; } a { color: var(--accent); text-decoration: none; transition: color .16s ease; } a:hover { color: var(--accent-2); } :root[data-theme="dark"] a:hover { color: #7CC6F7; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; } ::selection { background: var(--accent); color: var(--accent-ink); } .mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace; } /* атрибут hidden должен побеждать display:grid/flex в компонентах (иначе фильтр не работает) */ [hidden] { display: none !important; } .num { font-family: 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .muted { color: var(--fg-muted); } .small { font-size: 15px; line-height: 24px; } .tiny { font-size: 13px; line-height: 20px; } .lead { font-size: 19px; line-height: 30px; color: var(--fg-muted); } .eyebrow { font: 500 12px/16px 'Roboto', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); display: block; } .section { padding: 92px 0; position: relative; } .section--tight { padding: 56px 0; } .section--soft { background: var(--bg-soft); } .band { position: relative; background: var(--bg-soft); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); } .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 38px; } .section__head > div { max-width: 68ch; } .section__head .lead { margin-top: 14px; } /* ---------- статусная полоса ---------- */ .strip { background: var(--stick); color: #93A9BE; font-size: 13px; line-height: 20px; border-bottom: 1px solid rgba(255,255,255,.06); position: relative; z-index: 30; } .strip__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 9px 0; flex-wrap: wrap; } .strip__list { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .strip b { color: #EAF2F9; font-weight: 500; } .strip a { color: #EAF2F9; } .led { width: 8px; height: 8px; border-radius: 50%; background: var(--led); display: inline-block; margin-right: 9px; box-shadow: 0 0 0 0 var(--led-soft); animation: led 2.6s ease-out infinite; } @keyframes led { 0% { box-shadow: 0 0 0 0 rgba(19,210,165,.5); } 70% { box-shadow: 0 0 0 9px rgba(19,210,165,0); } 100% { box-shadow: 0 0 0 0 rgba(19,210,165,0); } } /* ---------- шапка ---------- */ .header { position: sticky; top: 0; z-index: 40; background: var(--glass); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line-soft); transition: background .28s ease, border-color .28s ease; } .header__in { display: flex; align-items: center; gap: 20px; height: 76px; } .brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .brand svg { height: 44px; width: auto; display: block; } .nav { display: flex; align-items: center; gap: 20px; flex: 1 1 auto; } .nav > li { position: relative; } .nav a { color: var(--fg); font-size: 15px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; padding: 8px 0; white-space: nowrap; } .nav a:hover, .nav a[aria-current="page"] { color: var(--accent); } .nav__more { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; } .dropdown { position: absolute; top: calc(100% + 10px); left: -14px; min-width: 268px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-2); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .nav > li:hover > .dropdown, .nav > li:focus-within > .dropdown { opacity: 1; visibility: visible; transform: none; } .dropdown a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; font-weight: 400; } .dropdown a:hover { background: var(--accent-soft); } .dropdown a b { font-weight: 500; font-size: 15px; color: var(--fg); } .dropdown a span { font-size: 13px; color: var(--fg-muted); } .header__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .header__phone { font-weight: 500; font-size: 15px; color: var(--fg); white-space: nowrap; } .burger { display: none; } /* ---------- кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 11px; border: 1px solid transparent; cursor: pointer; font: 500 15px/1 'Roboto', sans-serif; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn svg { width: 18px; height: 18px; } .btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px -12px var(--accent); } .btn--primary:hover { background: var(--accent-2); color: var(--accent-ink); box-shadow: 0 12px 28px -12px var(--accent-2); } .btn--ghost { border-color: var(--line); color: var(--fg); background: transparent; } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .btn--soft { background: var(--accent-soft); color: var(--accent); } .btn--soft:hover { background: var(--accent); color: var(--accent-ink); } .btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 9px; } .btn--lg { min-height: 54px; padding: 0 28px; font-size: 16px; } .btn--block { width: 100%; } /* переключатель темы */ .theme-switch { display: inline-flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; } .theme-switch button { border: 0; background: transparent; color: var(--fg-dim); cursor: pointer; width: 34px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; transition: background .18s ease, color .18s ease; } .theme-switch button svg { width: 16px; height: 16px; } .theme-switch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } .theme-switch button:hover { color: var(--fg); } .theme-switch button[aria-pressed="true"]:hover { color: var(--accent-ink); } /* компактный выбор темы: одна кнопка с текущей темой + выпадающий список */ .theme-pick { position: relative; } .theme-pick__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; cursor: pointer; background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; color: var(--fg); transition: border-color .16s ease, color .16s ease; } .theme-pick__btn:hover, .theme-pick.is-open .theme-pick__btn { border-color: var(--accent); color: var(--accent); } .theme-pick__btn svg { width: 17px; height: 17px; } .theme-pick__ic { display: inline-flex; } .theme-pick__ic svg { display: none; } :root[data-theme="dark"] .theme-pick__ic .ic-moon { display: inline; } :root[data-theme="light"] .theme-pick__ic .ic-sun { display: inline; } .theme-pick__label { display: none; } /* подпись темы показываем только в самом списке */ .theme-pick__btn .nav__more { transition: transform .18s ease; } .theme-pick.is-open .theme-pick__btn .nav__more { transform: rotate(225deg) translateY(-1px); } .theme-pick__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 208px; z-index: 50; padding: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .theme-pick.is-open .theme-pick__menu { opacity: 1; visibility: visible; transform: none; } .theme-pick__menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--fg-muted); cursor: pointer; text-align: left; font: 500 14px/1 'Roboto', sans-serif; transition: background .16s ease, color .16s ease; } .theme-pick__menu button:hover { background: var(--accent-soft); color: var(--fg); } .theme-pick__menu button[aria-checked="true"] { color: var(--accent); background: var(--accent-soft); } .theme-pick__menu button svg { width: 16px; height: 16px; } /* соцсети */ .socials { display: flex; gap: 6px; } .social { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; color: var(--fg-muted); transition: color .16s ease, border-color .16s ease, background .16s ease; } .social:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .social svg { width: 18px; height: 18px; } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; padding: 74px 0 84px; border-bottom: 1px solid var(--line-soft); /* слои сверху вниз: затемнение под текст → фотография ЦОДа → базовый градиент темы. Фотография — с действующего сайта (cod_new_files/cod_adman-49.jpg), лежит в assets/hero-dc.jpg */ background-image: var(--hero-veil), var(--hero-photo), linear-gradient(160deg, var(--hero-a), var(--hero-b)); background-size: cover, cover, cover; background-position: center center, center right, center center; background-repeat: no-repeat; } .dropdown a { align-items: flex-start; } /* подписи в меню услуг — по левому краю, а не по центру */ .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 460px at 88% 4%, var(--glow-1), transparent 64%), radial-gradient(560px 380px at 6% 96%, var(--glow-2), transparent 70%); } .hero__in { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 54px; align-items: center; } .hero h1 { max-width: 17ch; } .hero__lead { margin-top: 20px; max-width: 54ch; color: var(--fg-muted); font-size: 19px; line-height: 31px; } .hero__cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; } .hero__note { margin-top: 22px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg-dim); flex-wrap: wrap; } .chiprow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; } .chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 13px; color: var(--fg-muted); background: var(--panel-2); } .chip svg { width: 14px; height: 14px; color: var(--led); } .chip--btn { cursor: pointer; transition: border-color .16s ease, color .16s ease, background .16s ease; } .chip--btn:hover { border-color: var(--accent); color: var(--fg); } .chip--btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .chip--btn[aria-pressed="true"] svg { color: currentColor; } /* «живая» панель мониторинга в hero */ .console { background: var(--glass); border: 1px solid var(--line); border-radius: 20px; padding: 10px; box-shadow: var(--shadow-2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .console__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 12px; border-bottom: 1px solid var(--line-soft); } .console__bar .mono { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); } .console__state { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--led); } .console__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); border-radius: 12px; overflow: hidden; margin-top: 10px; } .console__cell { background: var(--panel); padding: 18px 16px; } .console__cell b { display: block; font: 600 27px/30px 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; color: var(--fg); } .console__cell span { display: block; margin-top: 6px; font-size: 13px; line-height: 19px; color: var(--fg-dim); } .console__cell--accent b { color: var(--accent); } .console__cell--led b { color: var(--led); } .console__foot { padding: 12px; font-size: 13px; color: var(--fg-dim); display: flex; align-items: center; gap: 8px; } .bars { display: flex; gap: 4px; align-items: flex-end; height: 22px; } .bars i { width: 5px; background: var(--accent); opacity: .5; border-radius: 2px; animation: bar 1.8s ease-in-out infinite; } .bars i:nth-child(2) { animation-delay: .18s } .bars i:nth-child(3) { animation-delay: .36s } .bars i:nth-child(4) { animation-delay: .54s } .bars i:nth-child(5) { animation-delay: .72s } @keyframes bar { 0%, 100% { height: 30% } 50% { height: 100% } } /* ---------- метрики/статистика ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; } .stats__cell { background: var(--panel); padding: 26px 24px; min-width: 0; } .stats__cell b { display: block; font: 600 40px/1 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; } .stats__cell span { display: block; margin-top: 10px; font-size: 14px; line-height: 22px; color: var(--fg-muted); } .stats__cell--led b { color: var(--led); } /* ---------- плитки услуг ---------- */ .grid { display: grid; gap: 22px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .tile { position: relative; display: flex; flex-direction: column; gap: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 26px; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; overflow: hidden; } .tile::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); opacity: 0; transition: opacity .2s ease; } .tile:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-lift); } .tile:hover::after { opacity: 1; } .tile__icon { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; } .tile__icon svg { width: 24px; height: 24px; } .tile h3 { font-size: 19px; } .tile p { color: var(--fg-muted); font-size: 15px; line-height: 24px; } .tile ul { display: flex; flex-direction: column; gap: 9px; } .tile li { display: flex; gap: 10px; font-size: 14px; line-height: 21px; color: var(--fg-muted); } .tile li svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; color: var(--led); } .tile__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .tile__price { font: 700 21px/26px 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; } .tile__price small { display: block; font: 400 13px/18px 'Roboto', sans-serif; color: var(--fg-dim); } /* ---------- прайс ---------- */ .pricetoolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 20px 0; } .tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); } .tabs button, .tabs a { border: 0; background: transparent; cursor: pointer; padding: 13px 16px; color: var(--fg-muted); font: 500 15px/20px 'Roboto', sans-serif; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .16s ease, border-color .16s ease; } .tabs button:hover, .tabs a:hover { color: var(--fg); } .tabs button[aria-selected="true"], .tabs a[aria-current="true"] { color: var(--accent); border-bottom-color: var(--accent); } .segment { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 2px; } .segment button { border: 0; background: transparent; cursor: pointer; border-radius: 999px; padding: 9px 16px; color: var(--fg-muted); font: 500 14px/1.1 'Roboto', sans-serif; display: flex; flex-direction: column; gap: 3px; align-items: center; } .segment button small { font-size: 11px; color: var(--led); } .segment button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } .segment button[aria-pressed="true"] small { color: var(--accent-ink); opacity: .8; } .priceboard { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-1); } .priceboard__note { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 20px; background: var(--panel-2); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--fg-muted); } .src { display: inline-flex; align-items: center; gap: 9px; } .src i { width: 7px; height: 7px; border-radius: 50%; background: var(--led); display: block; } .src--snapshot i { background: var(--warn); } .prow { display: grid; grid-template-columns: 220px 1fr 210px 152px; gap: 18px; align-items: center; padding: 17px 20px; border-bottom: 1px solid var(--line-soft); transition: background .16s ease; } .prow:last-child { border-bottom: 0; } .prow:hover { background: var(--panel-2); } .prow--head { padding: 11px 20px; font: 500 11px/16px 'Roboto', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); background: transparent; } .prow--head:hover { background: transparent; } .prow__name { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .prow__name b { font: 600 17px/22px 'Montserrat', sans-serif; } .badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font: 500 12px/16px 'Roboto', sans-serif; color: var(--fg-muted); background: var(--panel-2); } .badge--accent { border-color: transparent; background: var(--accent-soft); color: var(--accent); } .badge--led { border-color: transparent; background: var(--led-soft); color: var(--led); } .prow__specs { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; } .spec { display: inline-flex; align-items: center; gap: 7px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 9px; padding: 6px 11px; font: 500 13.5px/18px 'Roboto', sans-serif; color: var(--fg-muted); white-space: nowrap; } .spec svg { width: 15px; height: 15px; color: var(--fg-dim); } .spec b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; } .prow__price { text-align: right; font: 700 25px/29px 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; } .prow__price small { display: block; font: 400 13px/18px 'Roboto', sans-serif; color: var(--fg-dim); } .prow__price .was { color: var(--fg-dim); } .prow__price .save { color: var(--led); } .prow__ctrl { display: flex; justify-content: flex-end; } .footnotes { margin-top: 22px; font-size: 13.5px; line-height: 22px; color: var(--fg-dim); max-width: 105ch; } .footnotes li { padding-left: 16px; position: relative; margin-bottom: 5px; } .footnotes li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--fg-dim); opacity: .6; } /* ---------- чипы-фильтры и таблица инфраструктуры ---------- */ .specs-table { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--panel); } .specs-table__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: 20px; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); font-size: 15px; } /* в узких карточках подпись и значение ставим друг под друга: иначе колонка подписи сжимается в ноль и текст встаёт вертикально по одной букве в строке */ .specs-table--stack .specs-table__row { grid-template-columns: minmax(0, 1fr); gap: 3px; } .specs-table--stack .specs-table__row span:last-child { text-align: left; } .specs-table--stack .specs-table__row span:first-child { font-size: 13px; color: var(--fg-dim); } .specs-table__row:last-child { border-bottom: 0; } .specs-table__row span { min-width: 0; overflow-wrap: anywhere; } .specs-table__row span:first-child { color: var(--fg-muted); } .specs-table__row span:last-child { text-align: right; font-weight: 500; } .specs-table__row:hover { background: var(--panel-2); } /* ---------- шаги, преимущества ---------- */ .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: s; } .step { position: relative; padding-top: 26px; border-top: 2px solid var(--line); } .step::before { content: counter(s, decimal-leading-zero); counter-increment: s; position: absolute; top: -16px; left: 0; font: 600 13px/22px 'JetBrains Mono', ui-monospace, monospace; color: var(--accent); background: var(--bg); padding-right: 10px; } .step h4 { margin-bottom: 8px; } .step p { font-size: 14px; line-height: 22px; color: var(--fg-muted); } .feature { display: flex; gap: 14px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; } .feature svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--accent); margin-top: 2px; } .feature h4 { margin-bottom: 6px; } .feature p { font-size: 14px; line-height: 22px; color: var(--fg-muted); } /* ---------- FAQ ---------- */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; font: 600 17px/26px 'Montserrat', sans-serif; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--accent); font: 400 24px/1 'Roboto', sans-serif; transition: transform .2s ease; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details > div { padding: 0 0 20px; color: var(--fg-muted); max-width: 88ch; font-size: 15px; line-height: 25px; } /* ---------- формы ---------- */ .form { display: grid; gap: 14px; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: 13px; color: var(--fg-muted); } .field input, .field select, .field textarea { background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px; color: var(--fg); transition: border-color .16s ease, box-shadow .16s ease; width: 100%; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; } .field textarea { min-height: 108px; resize: vertical; } .field--check { flex-direction: row; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--fg-muted); line-height: 21px; } .field--check input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 18px; } .form__hint { font-size: 12.5px; color: var(--fg-dim); } .form__msg { border-radius: 12px; padding: 13px 16px; font-size: 14px; display: none; } .form__msg--ok { display: block; background: var(--led-soft); color: var(--led); border: 1px solid transparent; } .form__msg--err { display: block; background: rgba(242,84,95,.12); color: var(--danger); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 26px; } .card--soft { background: var(--panel-2); } .card h3 { margin-bottom: 10px; } .cards { display: grid; gap: 18px; } .cta-band { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; padding: 40px; background: linear-gradient(135deg, var(--accent-soft), transparent 60%), var(--panel); display: grid; grid-template-columns: 1.2fr .8fr; gap: 34px; align-items: center; } .cta-band h2 { font-size: clamp(24px, 2.4vw, 32px); } .cta-band p { margin-top: 12px; color: var(--fg-muted); max-width: 52ch; } .cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } /* ---------- галерея ---------- */ .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .gallery figure { margin: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--panel); } .gallery .ph { height: 220px; display: flex; align-items: center; justify-content: center; color: var(--fg-dim); background: linear-gradient(135deg, var(--accent-soft), transparent 55%), repeating-linear-gradient(45deg, var(--line-soft) 0 12px, transparent 12px 24px); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; } .gallery figcaption { padding: 12px 16px; font-size: 13.5px; color: var(--fg-muted); border-top: 1px solid var(--line-soft); } /* ---------- подвал ---------- */ .footer { background: var(--stick); color: #8FA6BC; padding: 60px 0 28px; font-size: 15px; line-height: 24px; position: relative; z-index: 1; } .footer h4 { color: #E7EFF7; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; } .footer a { color: #8FA6BC; display: block; padding: 5px 0; font-size: 14.5px; } .footer a:hover { color: #fff; } .footer__grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 30px; } .footer__brand svg { height: 42px; width: auto; } .footer__bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; gap: 22px; flex-wrap: wrap; font-size: 13px; color: #6C8299; } .footer__req { font-size: 13px; line-height: 21px; color: #6C8299; margin-top: 16px; } .footer__contacts { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; } .footer__contacts a { display: inline-flex; align-items: center; gap: 9px; color: #E7EFF7; font-weight: 500; padding: 0; } .footer__contacts a:hover { color: #fff; } .footer__contacts svg { width: 16px; height: 16px; color: #8FA6BC; } .footer__socials { display: flex; gap: 8px; margin-top: 18px; } .footer__socials .social { border-color: rgba(255,255,255,.14); color: #8FA6BC; } .footer__socials .social:hover { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); } /* ---------- хлебные крошки, страницы ---------- */ .crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--fg-dim); padding: 22px 0 0; flex-wrap: wrap; } .crumbs a { color: var(--fg-dim); } .crumbs a:hover { color: var(--accent); } .pagehead { padding: 30px 0 44px; } .pagehead h1 { max-width: 24ch; } .pagehead .lead { margin-top: 18px; max-width: 78ch; } .notice { border: 1px solid var(--line); background: var(--panel-2); border-radius: 14px; padding: 15px 18px; font-size: 14px; line-height: 22px; color: var(--fg-muted); display: flex; gap: 11px; align-items: flex-start; } .notice svg { flex: 0 0 18px; width: 18px; height: 18px; color: var(--accent); margin-top: 3px; } .codes { background: var(--panel); border: 1px solid var(--line); border-radius: 15px; padding: 18px; overflow: auto; } .codes pre { margin: 0; font: 400 13.5px/22px 'JetBrains Mono', ui-monospace, monospace; color: var(--fg-muted); } /* ---------- тост ---------- */ .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: var(--panel); border: 1px solid var(--accent); color: var(--fg); border-radius: 14px; padding: 14px 20px; box-shadow: var(--shadow-2); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 90; font-size: 14px; } .toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* ---------- мобильное меню ---------- */ .mobile-nav { display: none; } /* в меню переключатель темы — с подписями и на всю ширину */ .mobile-nav .theme-switch { width: 100%; } .mobile-nav .theme-switch button { width: auto; flex: 1 1 auto; height: 38px; padding: 0 12px; gap: 7px; font-size: 13.5px; white-space: nowrap; } .mobile-nav__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; } .mobile-nav__row .btn { margin-top: 0; } /* .mobile-nav a делает ссылки блочными и перебивает .btn — возвращаем кнопкам flex, иначе иконка и текст в кнопках меню разъезжаются */ .mobile-nav .btn { display: inline-flex; } .mobile-nav__socials { display: flex; flex-direction: column; margin-top: 16px; } .mobile-nav .mobile-nav__socials a { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); color: var(--fg); font-size: 15px; font-weight: 500; } .mobile-nav .mobile-nav__socials a svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 18px; } /* в меню соцсети — строки списка, а не квадратные иконки шапки */ .mobile-nav .mobile-nav__socials a.social { display: flex; width: 100%; height: auto; border: 0; border-radius: 0; border-bottom: 1px solid var(--line-soft); justify-content: flex-start; padding: 13px 0; } /* ---------- страница заказа услуги ---------- */ .order { display: grid; grid-template-columns: 1.35fr .65fr; gap: 26px; align-items: start; } .order__steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; } .ostep { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--fg-muted); font-size: 13px; } .ostep b { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font: 600 12px/1 'Roboto', sans-serif; } .ostep--on { border-color: var(--accent); color: var(--fg); } .ostep--on b { background: var(--accent); color: var(--accent-ink); } .ocard { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 24px; } .ocard + .ocard { margin-top: 18px; } .ocard h3 { margin-bottom: 6px; } .ocard__note { font-size: 13.5px; line-height: 21px; color: var(--fg-muted); margin-bottom: 18px; } .ogroup { display: grid; gap: 12px; } .oopt { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel-2); } .oopt input[type="checkbox"], .oopt input[type="radio"] { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 3px; accent-color: var(--accent); } .oopt__body { flex: 1 1 auto; min-width: 0; } .oopt__title { font-size: 15px; font-weight: 500; } .oopt__note { font-size: 13px; line-height: 20px; color: var(--fg-muted); margin-top: 3px; } .oopt__price { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .oopt--fixed { opacity: .85; } .summary { position: sticky; top: 98px; } .summary__head { padding: 16px 20px; border-radius: 16px 16px 0 0; color: #fff; background: linear-gradient(120deg, var(--accent), var(--accent-2)); } .summary__head b { display: block; font: 600 17px/24px 'Montserrat', sans-serif; } .summary__head span { display: block; margin-top: 3px; font-size: 12.5px; opacity: .9; } .summary__body { background: var(--panel); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 16px 16px; padding: 18px 20px 22px; } .summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 14px; padding: 6px 0; } .summary__row > span:first-child { color: var(--fg-muted); } .summary__row b { font-variant-numeric: tabular-nums; } .summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 14px; } .summary__total > span { font-size: 13px; color: var(--fg-muted); } .summary__total b { font: 700 30px/34px 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; } .summary__actions { display: grid; gap: 10px; margin-top: 18px; } .summary__note { font-size: 12.5px; line-height: 19px; color: var(--fg-dim); margin-top: 14px; } .o-done { text-align: center; padding: 34px 20px; } .o-done .tile__icon { margin: 0 auto 16px; } .o-done__num { font: 700 24px/30px 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .04em; } .pick { display: grid; gap: 14px; } .pick__item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); flex-wrap: wrap; } .pick__item b { font: 600 16px/22px 'Montserrat', sans-serif; } .pick__price { font: 700 20px/24px 'Montserrat', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---------- адаптив ---------- */ @media (max-width: 1320px) { /* соцсети и кнопки «Поддержка»/«Документация» в шапке не помещаются — они остаются в меню */ .on-wide { display: none; } } @media (max-width: 1100px) { .hero__in { grid-template-columns: 1fr; gap: 36px; } .order { grid-template-columns: 1fr; } .summary { position: static; } .hero h1 { max-width: 20ch; } .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } .stats { grid-template-columns: repeat(2, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); } .footer__grid { grid-template-columns: repeat(3, 1fr); } .prow { grid-template-columns: 1fr 1fr; gap: 12px; } .prow__price { text-align: left; } .prow__ctrl { justify-content: flex-start; } .cta-band { grid-template-columns: 1fr; } .cta-band__actions { justify-content: flex-start; } } @media (max-width: 860px) { .nav, .header__phone { display: none; } /* на узком экране фото под текстом читается хуже — кладём ровный слой поверх */ .hero::after { content: ""; position: absolute; inset: 0; background: var(--hero-veil-flat); } .hero { background-position: center center, center 30%, center center; } .burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 11px; cursor: pointer; } .burger svg { width: 20px; height: 20px; } .mobile-nav { position: fixed; inset: 0; z-index: 60; background: var(--bg); padding: 18px 20px 40px; overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s; } .mobile-nav.is-open { display: block; opacity: 1; visibility: visible; transform: none; } .mobile-nav__top { display: flex; align-items: center; justify-content: space-between; height: 60px; } .mobile-nav a { display: block; padding: 15px 0; border-bottom: 1px solid var(--line-soft); color: var(--fg); font-size: 17px; font-weight: 500; } .mobile-nav .btn { margin-top: 20px; } .section { padding: 62px 0; } .gallery { grid-template-columns: 1fr; } .form__row { grid-template-columns: 1fr; } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } .strip__in { font-size: 12px; } .cta-band { padding: 26px; } } @media (max-width: 560px) { body { font-size: 16px; line-height: 26px; } .brand svg { height: 28px; } .header__in { height: 62px; gap: 8px; } .header__actions { gap: 6px; } .header__actions .btn--primary { padding: 0 12px; } /* В шапке на узком экране остаются только «Заказать» и бургер: переключатель темы переезжает в мобильное меню, иначе шапка шире экрана. */ .header__actions .theme-switch { display: none; } .burger { width: 38px; height: 38px; } .burger svg { width: 18px; height: 18px; } .stats { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .segment { width: 100%; } .segment button { flex: 1 1 auto; padding: 9px 10px; font-size: 13px; } .specs-table__row { grid-template-columns: 1fr; gap: 6px; } .specs-table__row span:last-child { text-align: left; } .prow { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; } .on-desk { display: none; } } @media (max-width: 400px) { /* на самых узких экранах выбор темы уходит в мобильное меню, где он есть отдельной строкой */ .header__actions .theme-pick { display: none; } .brand svg { height: 26px; } } @media (max-width: 380px) { /* 320–380 px: кнопку «Заказать» из шапки убираем — она есть в мобильном меню, иначе шапка с иконкой входа шире экрана */ .header__actions .btn--primary { display: none; } .brand svg { height: 24px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } } @media print { .header, .strip, .footer, .theme-switch, .cta-band { display: none; } body { background: #fff; color: #000; } }