/* ============================================================================ LEXPREMISE — Дизайн-система · style.css Юристы по аренде коммерческой недвижимости ---------------------------------------------------------------------------- • Только статика: HTML/CSS/JS. Без форм сбора ПДн, без трекинга. • Шрифты — self-hosted / bunny.net (приватный аналог Google Fonts). • Палитры переключаются через [data-palette] на . • Шрифт заголовков — через [data-headings="serif|sans"] на . ============================================================================ */ /* --- Шрифты ---------------------------------------------------------------- В проде self-host (fontsource / bunny). Здесь — bunny.net (без трекинга), font-display: swap зашит в их css. Подключается в . --------------------------------------------------------------------------- */ /* =========================== ТОКЕНЫ ======================================= */ :root { /* — Палитра 1 «Корпоративный синий» (по умолчанию) — */ --c-primary: #0E2A47; --c-primary-700: #163861; --c-primary-900: #091C30; --c-bg: #F5F7FA; --c-surface: #FFFFFF; --c-surface-alt: #EEF2F7; --c-accent: #B89759; --c-accent-600: #A07F44; --c-accent-100: #F1E9D8; --c-text: #1A1A1A; --c-text-soft: #475569; --c-text-on-dark: #F5F7FA; --c-on-dark-soft: #AEBDD0; --c-line: #D6DCE5; --c-line-on-dark: rgba(245,247,250,.16); --c-success: #2E7D5B; --c-danger: #B23B3B; --c-focus: #3D7BD9; /* — Типографика — */ --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-head-serif: "EB Garamond", "PT Serif", Georgia, "Times New Roman", serif; --font-head-sans: "Inter", system-ui, sans-serif; --font-head: var(--font-head-serif); --fs-display: clamp(2.75rem, 1.6rem + 4.4vw, 4rem); /* 44 → 64 */ --fs-h1: clamp(2rem, 1.35rem + 2.6vw, 3.5rem); /* 32 → 56 */ --fs-h2: clamp(1.5rem, 1.15rem + 1.4vw, 2.5rem); /* 24 → 40 */ --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem); /* 20 → 28 */ --fs-h4: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* 17 → 20 */ --fs-lead: clamp(1.125rem, 1.04rem + 0.4vw, 1.375rem);/* 18 → 22 */ --fs-body: clamp(1rem, 0.97rem + 0.18vw, 1.125rem); /* 16 → 18 */ --fs-sm: 0.9375rem; /* 15 */ --fs-xs: 0.8125rem; /* 13 */ --fs-eyebrow: 0.78rem; --lh-tight: 1.16; --lh-head: 1.22; --lh-body: 1.62; --ls-tight: -0.015em; --ls-wide: 0.14em; --measure: 68ch; /* комфортная длина строки 60–80 символов */ /* — Сетка и контейнер — */ --container: 1240px; --container-narrow: 760px; --gutter: 28px; --pad-x: clamp(20px, 5vw, 80px); /* — Spacing scale (8pt) — */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --section-y: clamp(56px, 8vw, 112px); /* — Радиусы — */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* — Тени (мягкие, премиальные) — */ --sh-1: 0 1px 2px rgba(14,42,71,.06), 0 1px 3px rgba(14,42,71,.04); --sh-2: 0 4px 14px rgba(14,42,71,.07), 0 2px 6px rgba(14,42,71,.05); --sh-3: 0 14px 38px rgba(14,42,71,.12), 0 6px 14px rgba(14,42,71,.07); --sh-accent: 0 8px 22px rgba(184,151,89,.30); /* — Motion — */ --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur-1: .18s; --dur-2: .32s; --dur-3: .6s; /* — Z — */ --z-header: 100; --z-dropdown: 120; --z-mobilebar: 90; --header-h: 84px; --header-h-scrolled: 62px; } /* — Палитра 2 «Юридический угольный» — */ :root[data-palette="charcoal"] { --c-primary: #1F1F23; --c-primary-700: #313138; --c-primary-900: #141417; --c-bg: #FAFAF7; --c-surface: #FFFFFF; --c-surface-alt: #F1F0EA; --c-accent: #C73E1D; --c-accent-600: #A8330F; --c-accent-100: #F6E0D8; --c-text: #1F1F23; --c-text-soft: #555; --c-text-on-dark: #FAFAF7; --c-on-dark-soft: #B7B7B2; --c-line: #E3E1D9; --c-line-on-dark: rgba(250,250,247,.16); --c-success: #2E7D5B; --c-danger: #C73E1D; --c-focus: #C73E1D; --sh-accent: 0 8px 22px rgba(199,62,29,.28); } /* — Палитра 3 «Северный графит» — */ :root[data-palette="graphite"] { --c-primary: #2D3A45; --c-primary-700: #3C4D5A; --c-primary-900: #1F2932; --c-bg: #ECEFF1; --c-surface: #FFFFFF; --c-surface-alt: #E1E7EA; --c-accent: #1E88E5; --c-accent-600: #1769B5; --c-accent-100: #D6E9FB; --c-text: #2D3A45; --c-text-soft: #5A6B78; --c-text-on-dark: #ECEFF1; --c-on-dark-soft: #A7B6C0; --c-line: #D4DBDF; --c-line-on-dark: rgba(236,239,241,.16); --c-success: #2E7D5B; --c-danger: #C0392B; --c-focus: #1E88E5; --sh-accent: 0 8px 22px rgba(30,136,229,.28); } /* — Переключатель шрифта заголовков — */ :root[data-headings="sans"] { --font-head: var(--font-head-sans); } :root[data-headings="serif"] { --font-head: var(--font-head-serif); } /* =========================== RESET / BASE ================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "tnum" 0; } h1, h2, h3, h4 { font-family: var(--font-head); line-height: var(--lh-head); letter-spacing: var(--ls-tight); color: var(--c-primary); font-weight: 600; text-wrap: balance; } :root[data-headings="sans"] h1, :root[data-headings="sans"] h2, :root[data-headings="sans"] h3, :root[data-headings="sans"] h4 { font-weight: 700; letter-spacing: -0.02em; } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } p { text-wrap: pretty; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } ul, ol { padding-left: 1.2em; } strong { font-weight: 600; } ::selection { background: var(--c-accent); color: #fff; } /* Универсальный фокус-стиль (доступность) */ :where(a, button, [tabindex], summary, .btn, .tab):focus-visible { outline: 2.5px solid var(--c-focus); outline-offset: 3px; border-radius: 3px; } /* =========================== LAYOUT ======================================= */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--section-y); } .section--dark { background: var(--c-primary); color: var(--c-text-on-dark); } .section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; } .section--alt { background: var(--c-surface-alt); } .grid { display: grid; gap: var(--gutter); } .measure { max-width: var(--measure); } .eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-accent-600); display: inline-flex; align-items: center; gap: .6em; } .eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--c-accent); } .section--dark .eyebrow { color: var(--c-accent); } .text-soft { color: var(--c-text-soft); } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--c-text-soft); } /* =========================== REVEAL (motion.js) ========================== */ [data-reveal] { opacity: 0; } [data-reveal].is-revealed { animation: lex-reveal var(--dur-3) var(--ease-out) both; animation-delay: var(--reveal-delay, 0ms); } [data-reveal="fade"].is-revealed { animation-name: lex-fade; } [data-reveal="scale"].is-revealed { animation-name: lex-scale; } @keyframes lex-reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes lex-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes lex-scale { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; } } /* Печать / экспорт — всегда показываем содержимое */ @media print { [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; } }