/* ========================= Шрифты и дизайн-токены ========================= */ @font-face { font-family: "Golos Text"; src: url("../../fonts/Golos/GolosText-VariableFont_wght.ttf") format("truetype"); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: "Unbounded"; src: url("../../fonts/Unbounded/Unbounded-VariableFont_wght.ttf") format("truetype"); font-weight: 300 900; font-style: normal; font-display: swap; } :root { color-scheme: light dark; --font-heading: "Unbounded", system-ui, sans-serif; --font-body: "Golos Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --radius-xl: 32px; --radius-lg: 24px; --radius-md: 18px; --radius-sm: 12px; --radius-pill: 999px; --container-width: 1720px; --page-padding-x: clamp(10px, 2vw, 32px); --section-padding-xl: clamp(30px, 3vw, 30px); --section-padding-lg: clamp(28px, 2.5vw, 28px); --section-padding-md: clamp(22px, 2vw, 22px); --transition-fast: 160ms ease; --transition-base: 220ms ease; --z-page: 1; --z-page-transition: 10000; --z-header: 30000; --z-header-dropdown: 30020; --z-lightbox: 60000; --z-lightbox-controls: 60010; /* CSS-переменные темы используются всеми страницами, чтобы JS менял только data-theme на , а не отдельные цвета в каждом компоненте. */ /* Светлая тема по умолчанию */ --color-bg: #f3fafa; --color-page: #ffffff; --color-section: #e6f3f2; --color-card: #ffffff; --color-card-hover: #f0f8f8; --color-text: #111111; --color-text-muted: #536464; --color-text-soft: #748282; --color-brand: #47c2c0; --color-accent: #098883; --color-accent-hover: #007772; --color-accent-active: #005f5b; --color-brand-soft: #d7f0ef; --color-brand-subtle: #eef8f8; --color-border: #c7dedd; --color-border-strong: #98c3c1; --gradient-top: #ffffff; --gradient-middle: #dff4f3; --gradient-bottom: #9fd4d2; --shadow-soft: 0 18px 50px rgba(0, 95, 91, 0.08); --page-background: linear-gradient( 180deg, var(--gradient-top) 0%, var(--gradient-middle) 42%, var(--gradient-bottom) 100% ); } /* Если пользователь не выбирал тему вручную, уважаем системную настройку. */ @media (prefers-color-scheme: light) { :root { color-scheme: light; --color-bg: #f3fafa; --color-page: #ffffff; --color-section: #e6f3f2; --color-card: #ffffff; --color-card-hover: #f0f8f8; --color-text: #111111; --color-text-muted: #536464; --color-text-soft: #748282; --color-brand: #47c2c0; --color-accent: #098883; --color-accent-hover: #007772; --color-accent-active: #005f5b; --color-brand-soft: #d7f0ef; --color-brand-subtle: #eef8f8; --color-border: #c7dedd; --color-border-strong: #98c3c1; --gradient-top: #ffffff; --gradient-middle: #dff4f3; --gradient-bottom: #9fd4d2; --shadow-soft: 0 18px 50px rgba(0, 95, 91, 0.08); --page-background: linear-gradient( 180deg, var(--gradient-top) 0%, var(--gradient-middle) 42%, var(--gradient-bottom) 100% ); } } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --color-bg: #071111; --color-page: #0b1717; --color-section: #0f2020; --color-card: #122525; --color-card-hover: #173030; --color-text: #f0f7f7; --color-text-muted: #a7baba; --color-text-soft: #789191; --color-brand: #55d6d3; --color-accent: #48d2ce; --color-accent-hover: #66e0dd; --color-accent-active: #2fbdb9; --color-brand-soft: #173f3e; --color-brand-subtle: #102b2a; --color-border: #294242; --color-border-strong: #3f6665; --gradient-top: #164341; --gradient-middle: #0b1717; --gradient-bottom: #020606; --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.28); --page-background: linear-gradient( 180deg, var(--gradient-top) 0%, var(--gradient-middle) 46%, var(--gradient-bottom) 100% ); } } /* Явный выбор из localStorage сильнее системной темы браузера. */ html[data-theme="light"] { color-scheme: light; --color-bg: #f3fafa; --color-page: #ffffff; --color-section: #e6f3f2; --color-card: #ffffff; --color-card-hover: #f0f8f8; --color-text: #111111; --color-text-muted: #536464; --color-text-soft: #748282; --color-brand: #47c2c0; --color-accent: #098883; --color-accent-hover: #007772; --color-accent-active: #005f5b; --color-brand-soft: #d7f0ef; --color-brand-subtle: #eef8f8; --color-border: #c7dedd; --color-border-strong: #98c3c1; --gradient-top: #ffffff; --gradient-middle: #dff4f3; --gradient-bottom: #9fd4d2; --shadow-soft: 0 18px 50px rgba(0, 95, 91, 0.08); --page-background: linear-gradient( 180deg, var(--gradient-top) 0%, var(--gradient-middle) 42%, var(--gradient-bottom) 100% ); } html[data-theme="dark"] { color-scheme: dark; --color-bg: #071111; --color-page: #0b1717; --color-section: #0f2020; --color-card: #122525; --color-card-hover: #173030; --color-text: #f0f7f7; --color-text-muted: #a7baba; --color-text-soft: #789191; --color-brand: #55d6d3; --color-accent: #48d2ce; --color-accent-hover: #66e0dd; --color-accent-active: #2fbdb9; --color-brand-soft: #173f3e; --color-brand-subtle: #102b2a; --color-border: #294242; --color-border-strong: #3f6665; --gradient-top: #164341; --gradient-middle: #0b1717; --gradient-bottom: #020606; --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.28); --page-background: linear-gradient( 180deg, var(--gradient-top) 0%, var(--gradient-middle) 46%, var(--gradient-bottom) 100% ); } /* ========================= Базовая раскладка ========================= */ *, *::before, *::after { box-sizing: border-box; } html { min-height: 100%; scroll-behavior: smooth; hyphens: auto; background: var(--page-background); } body { margin: 0; min-height: 100vh; font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--color-text); overflow-x: hidden; overflow-wrap: anywhere; word-break: normal; hyphens: auto; hyphenate-character: "-"; background: var(--page-background); } /* Длинные русские слова получают словарные переносы с дефисом, а совсем непробельные строки всё равно не вылезают за экран. */ :where(h1, h2, h3, h4, h5, h6, p, li, a, button, label, strong, small, span) { overflow-wrap: break-word; word-wrap: break-word; word-break: normal; hyphens: auto; hyphenate-character: "-"; } img, picture, svg { display: block; max-width: 100%; } a { color: inherit; } button, input, textarea, select { font: inherit; } .container { width: min(var(--container-width), calc(100% - var(--page-padding-x) * 2)); margin-inline: auto; } .page { position: relative; z-index: var(--z-page); padding-block: 56px 80px; } /* ========================= Волна смены темы ========================= */ .theme-background-wave { position: fixed; top: var(--theme-offset-y, 0); right: 0; left: 0; z-index: 0; height: var(--theme-document-height, 100vh); min-height: 100vh; pointer-events: none; clip-path: circle(0px at var(--theme-circle-x) var(--theme-circle-y)); background-repeat: no-repeat; background-size: 100% var(--theme-document-height, 100vh); will-change: clip-path; transform: translateZ(0); contain: paint; } .theme-background-wave--light { background: linear-gradient(180deg, #ffffff 0%, #dff4f3 42%, #9fd4d2 100%); } .theme-background-wave--dark { background: linear-gradient(180deg, #164341 0%, #0b1717 46%, #020606 100%); } html.theme-transitioning body { isolation: isolate; } /* Во время анимации фон лежит отдельным fixed-слоем, поэтому контенту задаём явный z-index и не даём шапке потеряться под волной. */ html.theme-transitioning body > :not(.theme-background-wave):not(.site-header) { position: relative; z-index: var(--z-page); } html.theme-transitioning body > .site-header { position: sticky; top: 14px; z-index: var(--z-header); } html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: color 360ms ease, background-color 360ms ease, border-color 360ms ease, box-shadow 360ms ease, outline-color 360ms ease, fill 360ms ease, stroke 360ms ease !important; } html.theme-transitioning .theme-toggle, html.theme-transitioning .theme-toggle *, html.theme-transitioning .theme-toggle::before, html.theme-transitioning .theme-toggle::after { transition: none !important; } @media (prefers-reduced-motion: reduce) { .theme-background-wave { display: none; } html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: none !important; } } @media (max-width: 760px) { html.theme-transitioning body > .site-header { top: 8px; } }