/* * Правила страниц поверх дизайн-системы Nocturne. * * Токены системы не трогаем — здесь только то, что задал макет: * графитовый акцент вместо блёрпла, светлая тема, сетки и анимации. * Всё, что можно взять переменной, берём переменной. */ :root { --color-bg: #23253a; --color-accent: #9397ab; --color-accent-100: #f3f5fe; --color-accent-200: #e4e7f5; --color-accent-300: #cfd3e5; --color-accent-400: #b2b6ca; --color-accent-500: #9397ab; --color-accent-600: #75798c; --color-accent-700: #595d6c; --color-accent-800: #3f424d; --color-accent-900: #292b31; --color-accent-2: #9397ab; --color-accent-2-100: #f3f5fe; --color-accent-2-200: #e4e7f5; --color-accent-2-300: #cfd3e5; --color-accent-2-400: #b2b6ca; --color-accent-2-500: #9397ab; --color-accent-2-600: #75798c; --color-accent-2-700: #595d6c; --color-accent-2-800: #3f424d; --color-accent-2-900: #292b31; --color-section: #24262f; --color-section-glow: #33363f; --color-section-ghost: #4a4d58; } /* Светлая тема. Переключатель ставит класс на , а не меняет токены поштучно: иначе половина страницы осталась бы тёмной. */ html.v4-light { --color-bg: #d5d8e4; --color-surface: #eceef5; --color-text: #24262f; --color-divider: color-mix(in srgb, #24262f 14%, transparent); --color-neutral-100: #292b31; --color-neutral-200: #3f424d; --color-neutral-300: #595d6c; --color-neutral-400: #75798c; --color-neutral-500: #6b6f80; --color-neutral-600: #75798c; --color-neutral-700: #cfd3e5; --color-neutral-800: #dfe2ee; --color-neutral-900: #eceef6; --color-accent: #595d6c; --color-accent-100: #24262f; --color-accent-200: #292b31; --color-accent-300: #3f424d; --color-accent-400: #4a4d59; --color-accent-500: #595d6c; --color-accent-600: #75798c; --color-accent-700: #c9cddd; --color-accent-800: #dfe2ee; --color-accent-900: #eceef6; --color-accent-2: #595d6c; --color-accent-2-300: #3f424d; --color-accent-2-500: #595d6c; --color-accent-2-700: #c9cddd; --color-accent-2-800: #dfe2ee; --color-accent-2-900: #eceef6; --color-section: #e4e7f2; --color-section-glow: #eef0f8; --color-section-ghost: #cfd3e5; --shadow-sm: 0 0 0 1px #dfe2ee; --shadow-md: 0 0 0 1px #dfe2ee, 0 6px 18px rgba(36,38,47,0.08); --shadow-lg: 0 0 0 1px #cfd3e5, 0 16px 40px rgba(36,38,47,0.12); } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); text-wrap: pretty; } a { color: var(--color-accent); text-decoration: none; } a:hover { color: var(--color-accent-400); } .v4-page { min-height: 100%; background: radial-gradient(1100px 640px at 88% -160px, rgba(233,233,237,0.16), transparent 62%), radial-gradient(900px 620px at 10% 8%, rgba(233,233,237,0.08), transparent 60%), radial-gradient(1100px 800px at -10% 100%, color-mix(in srgb, black 30%, transparent), transparent 55%), var(--color-bg); background-attachment: fixed, fixed, fixed, fixed; font-family: var(--font-body); color: var(--color-text); } html.v4-light .v4-page { background: radial-gradient(1100px 640px at 88% -160px, rgba(36,38,47,0.34), transparent 64%), radial-gradient(900px 620px at 8% 6%, rgba(36,38,47,0.16), transparent 62%), var(--color-bg); background-attachment: fixed, fixed, fixed; } /* ------------------------------------------------------------------ шапка */ .v4-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: color-mix(in srgb, var(--color-accent) 16%, var(--color-bg)); border-bottom: 1px solid var(--color-divider); padding-inline: clamp(20px, 5vw, 72px); padding-block: 8px; gap: 14px; } .v4-brand { letter-spacing: -0.02em; font-size: 34px; color: var(--color-text); } .v4-switch { position: relative; width: 64px; height: 32px; flex: none; padding: 0; border-radius: 999px; border: 1px solid var(--color-neutral-700); background: var(--color-neutral-800); cursor: pointer; transition: background .2s ease; } .v4-switch:hover { background: var(--color-neutral-700); } .v4-switch svg { position: absolute; top: 9px; } .v4-switch .v4-sun { left: 8px; } .v4-switch .v4-moon { right: 8px; } .v4-knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 999px; background: var(--color-text); box-shadow: 0 1px 3px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; transition: transform .24s cubic-bezier(.4,0,.2,1); } html.v4-light .v4-knob { transform: translateX(32px); } html.v4-light .v4-switch .v4-sun { opacity: .25; } .v4-switch .v4-moon { opacity: .25; } html.v4-light .v4-switch .v4-moon { opacity: 1; } html.v4-light .v4-knob .v4-moon-in { display: none; } .v4-knob .v4-sun-in { display: none; } html.v4-light .v4-knob .v4-sun-in { display: block; } .v4-lang { display: flex; align-items: stretch; flex: none; padding: 3px; border-radius: 10px; border: 1px solid var(--color-neutral-700); background: var(--color-neutral-800); } .v4-lang button { padding: 5px 14px; border: 0; border-radius: 7px; font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: .02em; cursor: pointer; background: transparent; color: var(--color-text); transition: background .18s ease, color .18s ease; } .v4-lang button[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); } /* ------------------------------------------------------------- поверхности */ .v4-tile, .v4-panel { background: color-mix(in srgb, var(--color-surface) 55%, transparent); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); } .v4-kicker { font-size: 12.5px; letter-spacing: 0.22em; text-transform: uppercase; text-align: center; color: var(--color-accent); margin: 0 0 18px; } .v4-h2 { font-family: var(--font-heading); font-weight: 600; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.08; letter-spacing: -0.025em; text-align: center; margin: 0 0 clamp(20px, 2.2vw, 28px); } .v4-lead { font-size: 16px; line-height: 1.65; color: var(--color-text); opacity: .85; text-align: center; max-width: 56ch; margin: 0 auto clamp(36px, 4vw, 52px); } .v4-wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 72px); } .v4-band { background: radial-gradient(900px 420px at 85% -40%, color-mix(in srgb, var(--color-section-glow) 70%, transparent), transparent 64%), var(--color-section); padding-block: clamp(52px, 6.5vw, 92px); } .v4-grid { display: grid; gap: 16px; } .v4-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .v4-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Сетки кабинета живут здесь, а не в разметке: инлайновый стиль перебивает медиазапрос, и на телефоне колонки остаются двумя с обрезанным текстом. */ #v4a-head, #v4a-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } #v4a-grid { align-items: start; } /* --------------------------------------------------------- документы */ /* Оферта и политика: длинный текст в одну колонку, читаемая строка. */ .v4-doc { font-size: 15px; line-height: 1.75; } .v4-doc p { margin: 0 0 14px; opacity: .88; } .v4-doc h2 { font-family: var(--font-heading); font-weight: 500; font-size: 22px; letter-spacing: -0.015em; margin: 36px 0 14px; } .v4-doc a { text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------- анимации */ @keyframes v4-pulse { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: .9; transform: scale(1.35); } } @keyframes v4-sweep { from { transform: translateX(-100%); } to { transform: translateX(300%); } } /* Содержимое видно по умолчанию; прятать начинаем, только когда скрипт действительно запустился, — иначе без JS страница осталась бы пустой. */ .v4-armed [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } .v4-armed [data-reveal].v4-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .v4-armed [data-reveal] { opacity: 1; transform: none; transition: none; } } details > summary { list-style: none; cursor: pointer; } details > summary::-webkit-details-marker { display: none; } details[open] .v4-plus { transform: rotate(45deg); } /* --------------------------------------------------------------- узкие окна */ @media (max-width: 1120px) { #v4-hero { grid-template-columns: minmax(0, 1fr) !important; } #v4-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1000px) { #v4-inside, #v4-priv, #v4-tech { grid-template-columns: repeat(2, minmax(0, 1fr)); } #v4a-head, #v4a-grid { grid-template-columns: minmax(0, 1fr); } #v4a-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { #v4-steps, #v4-inside, #v4-priv { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { #v4-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } #v4-plans, #v4-tech, #v4a-plans { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .v4-nav { flex-wrap: wrap !important; row-gap: 10px !important; padding-block: 10px !important; } .v4-brand { font-size: 26px !important; } #v4-tiles { gap: 10px !important; } .table th, .table td { font-size: 12.5px !important; padding-inline: 8px !important; } }