/* ============================================================================ drmazin.ru - база: шрифты, палитры, типографика, сетка. Код свой, тильдовского ничего нет. Три палитры переключаются атрибутом на : data-palette="clinic" - светлая «Клиника» (по умолчанию) data-palette="warm" - кремовая «Кабинет» data-palette="night" - тёмная «Ночь» Заголовочный шрифт - атрибутом data-type="sans" | "serif". ========================================================================== */ /* ── Шрифты лежат у нас, внешних CDN нет: страница открывается одинаково из любой сети (для РФ это не красота, а работоспособность). ────────── */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../fonts/Inter-300-900-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../fonts/Inter-300-900-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../fonts/Inter-300-900-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(../fonts/Inter-300-900-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ── Сброс ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } /* Атрибут hidden у браузера прописан как display:none с нулевой специфичностью - любой наш класс с display его перебивает. Возвращаем ему власть, иначе скрытые шаги и уточняющие поля остаются на виду. */ [hidden] { display: none !important; } img, svg { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } /* ── Палитра 1: «Клиника» - светлая, холодновато-тёплая, акцент петроль ── */ :root, [data-palette="clinic"] { --bg: #FBFBF9; --bg-soft: #F3F4F0; /* полосы-подложки секций */ --card: #FFFFFF; --line: #E4E6E0; --line-soft: #EFF0EC; --text: #14191C; --text-2: #566068; --text-3: #8C959B; --accent: #0E6E63; /* глубокий teal - «чисто, спокойно» */ --accent-deep: #0A544B; --accent-soft: #E4F0EE; --warm: #C0653E; /* тёплый второй акцент - человечность */ --warm-soft: #FBEDE6; --shadow-sm: 0 1px 2px rgba(20, 25, 28, .05), 0 2px 8px rgba(20, 25, 28, .04); --shadow-md: 0 2px 6px rgba(20, 25, 28, .06), 0 14px 40px rgba(20, 25, 28, .07); --shadow-lg: 0 4px 12px rgba(20, 25, 28, .08), 0 28px 70px rgba(20, 25, 28, .10); } /* ── Палитра 2: «Кабинет» - кремовая бумага, чернила, охра ─────────────── */ [data-palette="warm"] { --bg: #F6F2EA; --bg-soft: #EFE9DE; --card: #FDFBF7; --line: #E0D8C9; --line-soft: #EBE4D8; --text: #1C1A16; --text-2: #5B554A; --text-3: #8E8778; --accent: #1F4C5C; --accent-deep: #163947; --accent-soft: #E2ECEF; --warm: #B0762A; --warm-soft: #F5E9D4; --shadow-sm: 0 1px 2px rgba(60, 45, 20, .06), 0 2px 8px rgba(60, 45, 20, .05); --shadow-md: 0 2px 6px rgba(60, 45, 20, .07), 0 14px 40px rgba(60, 45, 20, .08); --shadow-lg: 0 4px 12px rgba(60, 45, 20, .09), 0 28px 70px rgba(60, 45, 20, .12); } /* ── Палитра 3: «Ночь» - тёмная, мятная. Родня AI-сайту по настроению, но без красного: в медицине красный читается как тревога. ─────────── */ [data-palette="night"] { --bg: #0C1116; --bg-soft: #10171E; --card: #131C24; --line: #22303B; --line-soft: #1A252E; --text: #ECF1F4; --text-2: #9BAAB5; --text-3: #6B7B87; --accent: #43BFAC; --accent-deep: #64D6C4; --accent-soft: #14312E; --warm: #E0A264; --warm-soft: #2C2118; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 40px rgba(0, 0, 0, .35); --shadow-lg: 0 4px 12px rgba(0, 0, 0, .5), 0 28px 70px rgba(0, 0, 0, .45); } /* ── Общие токены ─────────────────────────────────────────────────────── */ :root { --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-head: var(--font-sans); --w-page: 1200px; --w-text: 68ch; --pad-x: clamp(20px, 5vw, 48px); --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --sect-y: clamp(64px, 9vw, 128px); --ease: cubic-bezier(.2, .7, .2, 1); } /* Серифные заголовки - опция. Полноценный кириллический сериф (PT Serif / Literata) надо будет положить в fonts/; пока системный стек. */ [data-type="serif"] { --font-head: 'Georgia', 'PT Serif', 'Times New Roman', serif; } /* ── Основа страницы ──────────────────────────────────────────────────── */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 17px; line-height: 1.6; font-feature-settings: 'ss01', 'cv05'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } ::selection { background: var(--accent); color: #fff; } /* ── Типографика ──────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: clamp(34px, 5.4vw, 62px); letter-spacing: -0.035em; } h2 { font-size: clamp(26px, 3.4vw, 42px); letter-spacing: -0.028em; } h3 { font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -0.018em; } h4 { font-size: 17px; letter-spacing: -0.01em; } [data-type="serif"] h1, [data-type="serif"] h2 { font-weight: 600; letter-spacing: -0.015em; } p { text-wrap: pretty; } strong, b { font-weight: 600; color: var(--text); } .lead { font-size: clamp(18px, 1.9vw, 22px); line-height: 1.5; color: var(--text-2); } .muted { color: var(--text-2); } .small { font-size: 14px; line-height: 1.55; } .tiny { font-size: 12.5px; line-height: 1.5; color: var(--text-3); } /* ── Сетка ────────────────────────────────────────────────────────────── */ .page { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--pad-x); } .narrow { max-width: 860px; margin: 0 auto; } /* Ритм разделов: тонкая линия сверху + метка. Приём взят с ai.drmazin.ru, но метка не «// mono», а номер с разрядкой - спокойнее для медицины. */ .section { padding: var(--sect-y) 0; border-top: 1px solid var(--line); } .section--plain { border-top: 0; } .section--soft { background: var(--bg-soft); } .section__head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; margin-bottom: clamp(32px, 4vw, 56px); } .section__body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); } .section__body > .section__aside { grid-column: 1; } .section--full .section__head { grid-template-columns: 1fr; } .label { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .label::before { content: ''; width: 22px; height: 1px; background: var(--accent); opacity: .6; } .label--warm { color: var(--warm); } .label--warm::before { background: var(--warm); } @media (max-width: 860px) { .section__head, .section__body { grid-template-columns: 1fr; gap: 20px; } } /* ── Кнопки ───────────────────────────────────────────────────────────── */ .btn { --btn-bg: var(--accent); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 28px; border: 1px solid transparent; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); will-change: transform; } .btn:hover { background: var(--accent-deep); box-shadow: var(--shadow-md); } .btn:active { transform: scale(.985); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .btn--lg { padding: 19px 40px; font-size: 16px; } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); border-color: var(--line); } .btn--ghost:hover { background: var(--card); border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-sm); } .btn--warm { --btn-bg: var(--warm); } .btn--warm:hover { background: var(--warm); filter: brightness(.94); } .btn__arrow { transition: transform .18s var(--ease); } .btn:hover .btn__arrow { transform: translateX(3px); } /* Ссылка-подчёркивание, которое дорисовывается при наведении. */ .link { color: var(--accent); background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s var(--ease); } .link:hover { background-size: 100% 1px; } /* ── Карточки ─────────────────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 30px); } /* ── Появление при скролле. Логика та же, что на ai.drmazin.ru: IntersectionObserver вешает .is-in, всё остальное делает CSS. Прятать блок можно ТОЛЬКО когда JS точно жив: класс .js вешает сам скрипт первой строкой. Иначе при любой ошибке в JS или у робота поисковика пол-страницы осталось бы невидимым. ────────────────────── */ .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } .reveal--d1 { transition-delay: .07s; } .reveal--d2 { transition-delay: .14s; } .reveal--d3 { transition-delay: .21s; } .reveal--d4 { transition-delay: .28s; } /* Строки заголовка выезжают снизу по очереди. Разметку строк делает JS, поэтому без него заголовок просто стоит на месте - это и нужно. */ .fx-line { display: block; overflow: hidden; } .fx-line > span { display: block; transform: translateY(105%); transition: transform .85s var(--ease); } .fx-ready .fx-line > span { transform: none; } /* «Меньше движения» - выключаем всё разом. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .fx-line > span { transform: none; transition: none; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ── Служебное ────────────────────────────────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 12px 20px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; transition: top .2s var(--ease); } .skip-link:focus { top: 16px; }