/* Molim — лендинг. Брендбук — закон: бумага/карточка/чернила, одна главная кнопка цвета action на экран, скругления 13/18/24, единственная тень, пропорция бумага 60 / белый 25 / бренд 10 / акценты 5. Из конспектов скиллов: движение 150–250мс ease-out и только transform/opacity (Motion), мера текста 45–75ch и фокус-кольца (Impeccable), никакого градиентного слопа (Taste). */ /* Шрифты сабсетнуты в woff2 (pyftsubset): латиница + сербская латиница + кириллица + типографика — 1,7 МБ TTF превратились в 159 КБ. Диапазон зашит в scratchpad-скрипт сборки; при добавлении экзотических символов (иврит, греческий, эмодзи-подобные знаки) шрифты надо пересобрать. */ @font-face { font-family: 'Unbounded'; src: url('assets/Unbounded-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Unbounded'; src: url('assets/Unbounded-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Inter'; src: url('assets/Inter-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Inter'; src: url('assets/Inter-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Inter'; src: url('assets/Inter-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } :root { --paper: #FAF8F4; --card: #FFFFFF; --ink: #1E1B2E; --muted: #6E6880; --line: #E6E3EE; --brand: #CABBFE; --brand-100: #E7E1FE; --surface: #F4F1FF; --action: #6645DE; --action-pressed: #4A25D0; --amber: #E0932B; --terracotta: #D2543C; --terracotta-100: #FBEAE6; --teal: #2E8B7A; --teal-100: #EAF4F1; --shadow: 0 14px 40px -18px rgba(30, 27, 46, 0.22); --r-btn: 13px; --r-card: 18px; --r-block: 24px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--paper); color: var(--ink); font-family: Inter, system-ui, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: Unbounded, Inter, sans-serif; font-weight: 600; } a { color: var(--action); } a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; } /* ── Шапка ── */ .top { display: flex; align-items: center; justify-content: space-between; /* padding-block, а не shorthand: элемент делит классы с .wrap, и полный padding затирал его боковые 20px — текст вставал впритык к краю. */ padding-block: 20px; } /* Логотип — фирменный знак со знаком вопроса (03_Бренд/фирстиль), а не набранное шрифтом слово: у знака своя пропорция и своя точка над «i». */ .logo { display: inline-flex; text-decoration: none; } .logo img { display: block; height: 36px; width: auto; } /* Тег-лайн у знака: отбит вертикальной чертой, набран мелко и приглушённо, чтобы читался подписью к логотипу, а не вторым заголовком. На узком экране прячется: в шапке телефона он теснит логотип и кнопку. */ .top { gap: 14px; } .tagline { align-self: center; padding-left: 14px; border-left: 1px solid var(--line); font-size: 13px; line-height: 1.35; color: var(--muted); font-weight: 500; margin-right: auto; } @media (max-width: 700px) { .tagline { display: none; } } /* ── Hero ── */ .hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding-block: 48px 72px; } .hero .kicker { color: var(--muted); font-weight: 500; margin-bottom: 12px; } .hero h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.14; font-weight: 700; } .hero h1 .q { color: var(--action); } .hero .sub { margin-top: 20px; font-size: 18px; line-height: 1.6; max-width: 34em; } .phone { /* Пропорции iPhone 17 Pro (402×874 пойнта): экран ~0.46, безель узкий. */ width: min(280px, 74vw); margin: 0 auto; border-radius: 52px; padding: 9px; background: var(--ink); box-shadow: var(--shadow); position: relative; } .phone::after { /* Dynamic Island. */ content: ''; position: absolute; top: 21px; left: 50%; transform: translateX(-50%); width: 27%; height: 24px; border-radius: 999px; background: var(--ink); } /* Сменяющиеся экраны: первый кадр держит высоту, остальные лежат поверх. Движение — только opacity (Motion): кроссфейд, ничего не ездит. */ .screen { position: relative; border-radius: 44px; overflow: hidden; background: var(--paper); } .screen img { display: block; width: 100%; height: auto; } .screen .shot { opacity: 0; transition: opacity 600ms ease-out; } .screen .shot.on { opacity: 1; } .screen .shot:not(:first-child) { position: absolute; inset: 0; } @media (prefers-reduced-motion: reduce) { .screen .shot { transition: none; } } /* Прогресс кадра — одна короткая полоска под телефоном: заполняется фирменным фиолетовым за время кадра и сбрасывается на следующем. Создаёт её script.js — вместе с ротацией, без неё полоски нет. */ .shot-progress { width: 120px; height: 4px; margin: 16px auto 0; border-radius: 999px; background: var(--line); overflow: hidden; } .shot-progress span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--action); } /* ── Форма прелаунча ── */ .signup { margin-top: 28px; display: flex; gap: 10px; max-width: 460px; } .signup input { flex: 1; min-width: 0; font: inherit; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card); color: var(--ink); } .signup input::placeholder { color: var(--muted); } .signup button { font: inherit; font-weight: 600; color: #fff; background: var(--action); border: 0; border-radius: var(--r-btn); padding: 14px 22px; cursor: pointer; transition: background 150ms ease-out, transform 120ms ease-out; } .signup button:hover { background: var(--action-pressed); } .signup button:active { transform: scale(0.98); } .signup-note { margin-top: 10px; font-size: 13px; color: var(--muted); } .signup-done { margin-top: 28px; padding: 14px 18px; background: #E1F5EE; color: #085041; border-radius: var(--r-card); font-weight: 500; max-width: 460px; } /* ── Секции ── */ section { padding-block: 72px; } section.alt { background: var(--card); } .sec-kicker { color: var(--action); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; margin-bottom: 10px; } h2 { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.2; max-width: 22em; /* Длинные слова («сталкиваешься») на узком экране не влезают в строку и раздвигают страницу горизонтально: разрешаем перенос внутри слова. */ overflow-wrap: break-word; } .sec-sub { margin-top: 14px; color: var(--muted); max-width: 44em; font-size: 17px; } /* ── Боли: три карточки ситуаций ── */ .pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .pain { background: var(--paper); border-radius: var(--r-block); padding: 28px; } /* width: auto обязателен: в разметке у картинок есть атрибуты width/height (они резервируют место и убирают CLS), а атрибут width — это презентационная подсказка CSS. Без явного auto она растянула бы иллюстрацию на все 1152px её собственной ширины. */ .pain img { height: 120px; width: auto; display: block; margin: 0 auto 18px; } .pain h3 { font-size: 18px; line-height: 1.3; } .pain p { margin-top: 8px; color: var(--muted); font-size: 15px; } /* ── Красная колода: карточки как в продукте ── */ .reds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; } .red { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-block); padding: 26px 24px; text-align: center; box-shadow: var(--shadow); } .red .badge { display: inline-block; background: var(--terracotta-100); color: var(--terracotta); font-weight: 600; font-size: 12px; border-radius: 999px; padding: 5px 12px; } .red .sr { font-family: Unbounded; font-weight: 600; font-size: 24px; margin-top: 14px; } .red .lat { font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 4px; } .red img { height: 120px; width: auto; display: block; margin: 16px auto 10px; } .red .is { font-weight: 600; font-size: 17px; } .red .assoc { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); text-align: left; } .red .example { margin-top: 14px; background: var(--surface); border-radius: var(--r-btn); padding: 12px 14px; text-align: left; } .red .ex-sr { font-weight: 600; font-size: 15px; } .red .ex-ru { font-size: 13px; color: var(--muted); margin-top: 2px; } /* ── Как работает: шаги ── */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; counter-reset: step; } .step { background: var(--surface); border-radius: var(--r-block); padding: 26px; } .step::before { counter-increment: step; content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--action); color: #fff; font-weight: 600; font-family: Unbounded; margin-bottom: 14px; font-size: 15px; } .step h3 { font-size: 17px; } .step p { margin-top: 8px; font-size: 15px; color: var(--muted); } /* ── Вук: представление с печатающимся диалогом ── */ .vuk-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 48px; align-items: center; } .vuk-left { display: flex; align-items: center; gap: 14px; } .vuk-avatar { /* «По грудь»: крупный Вук выглядывает из круглой подложки. */ width: 220px; height: 220px; flex: none; border-radius: 999px; background: var(--brand-100); position: relative; overflow: hidden; } .vuk-avatar img { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 290px; height: auto; max-width: none; } .vuk-bubble { position: relative; max-width: 320px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); border-bottom-left-radius: 6px; padding: 14px 18px; font-weight: 500; font-size: 16px; line-height: 1.5; box-shadow: var(--shadow); } .vuk-bubble::before { /* Хвостик к Вуку. */ content: ''; position: absolute; left: -7px; bottom: 16px; width: 13px; height: 13px; background: var(--card); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); border-bottom-left-radius: 4px; transform: rotate(45deg); } /* Невидимая самая длинная реплика держит размер облачка, печать идёт слоем поверх: макет не прыгает ни на строке, ни на смене реплик. */ .vuk-bubble .ghost { visibility: hidden; } .vuk-bubble .ghost, .vuk-bubble .vuk-text { white-space: pre-line; } .vuk-bubble .type-layer { position: absolute; inset: 14px 18px; } .caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--action); animation: caret-blink 1s steps(1) infinite; } .vuk-bubble.done .caret { display: none; } @keyframes caret-blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .caret { animation: none; } } @media (max-width: 900px) { .vuk-grid { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 560px) { .vuk-avatar { width: 132px; height: 132px; } .vuk-avatar img { width: 176px; top: 9px; } .vuk-bubble { font-size: 15px; } } /* ── Почему Molim ── */ .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { background: var(--brand-100); color: #26215C; border-radius: 999px; padding: 10px 16px; font-weight: 500; font-size: 15px; } .why-p { margin-top: 18px; max-width: 46em; font-size: 17px; line-height: 1.65; } /* ── Цена ── */ .price-card { max-width: 560px; margin-top: 32px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-block); box-shadow: var(--shadow); } .price-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; } .price-row + .price-row { border-top: 1px solid var(--line); } .price-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .price-name { font-weight: 600; font-size: 16px; } .price-badge { background: #FAEEDC; color: #9A6414; border-radius: 999px; font-weight: 600; font-size: 12px; padding: 4px 10px; } .price-side { text-align: right; } .price-value { font-family: Unbounded; font-weight: 600; font-size: 21px; display: block; } .price-note { font-size: 13px; color: var(--muted); } .price-fine { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 44em; } /* ── Вопросы ── */ .faq { max-width: 720px; margin-top: 24px; } .faq details { border-bottom: 1px solid var(--line); } .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 17px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; flex: none; font-size: 22px; font-weight: 400; color: var(--muted); transition: transform 150ms ease-out; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { padding-bottom: 18px; max-width: 60ch; } /* ── Финал ── */ .final { text-align: center; padding-block: 88px; } .final img { width: 120px; height: auto; margin-bottom: 18px; } .final .signup { margin: 28px auto 0; } .final .signup-done { margin: 28px auto 0; } .stores { margin-top: 14px; font-size: 13px; color: var(--muted); } /* ── Кнопка «наверх»: появляется после первого экрана. Не action-цвет — главная кнопка страницы одна, и это форма беты. ── */ .to-top { position: fixed; right: 20px; bottom: 20px; z-index: 10; width: 48px; height: 48px; border-radius: 999px; background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 200ms ease-out, transform 200ms ease-out, background 150ms ease-out; } .to-top.show { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { background: var(--surface); } @media (prefers-reduced-motion: reduce) { .to-top { transition: none; transform: none; } } /* Футер */ footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--muted); font-size: 14px; } footer .cols { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } footer a { color: var(--muted); } /* ── Появление при скролле: только transform/opacity, 200мс, ease-out. При «уменьшить движение» блоки просто видимы. ── */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 200ms ease-out, transform 200ms ease-out; } .reveal.on { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ── Адаптив ── */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 36px; padding-block: 24px 56px; } .phone-col { order: -1; } .pains, .steps { grid-template-columns: 1fr 1fr; } .reds { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } section { padding-block: 56px; } } @media (max-width: 560px) { .pains, .steps { grid-template-columns: 1fr; } .signup { flex-direction: column; } .signup button { width: 100%; } .hero h1 { font-size: clamp(30px, 8.6vw, 38px); } .price-row { flex-direction: column; align-items: flex-start; } .price-side { text-align: left; } } /* ═══════════════════════════════════════════════════════════════════════ Страница /obmanki/ — 78 обманок. Отдельный блок в конце: существующие классы не трогаем, чтобы правка списка не могла сломать лендинг. Терракота здесь работает как служебная метка обманки (заголовок слова и плашка темы) — фиолетовая action остаётся у единственной кнопки, формы беты внизу. ═══════════════════════════════════════════════════════════════════════ */ /* Ссылка домой в шапке: рядом с логотипом, голосом ниже логотипа */ .top-back { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 15px; } .top-back:hover { color: var(--ink); } /* ── Хиро страницы ── */ .ob-hero { padding-block: 8px 44px; } .ob-hero h1 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.16; font-weight: 700; max-width: 19em; } .ob-lead { margin-top: 18px; font-size: 18px; line-height: 1.6; max-width: 44em; } .ob-lead b { font-weight: 600; color: var(--terracotta); } .ob-hint { margin-top: 16px; font-size: 14px; color: var(--muted); } .ob-pron { font-weight: 600; color: var(--ink); } /* ── Витрина: восемь плиток-ссылок в список. Картинок на странице ровно столько: 78 SVG весили бы больше всей остальной страницы. ── */ .ob-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; } .ob-tile { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-block); padding: 18px 14px 20px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; /* transition перечислен целиком: .reveal объявляет свой, и без opacity здесь появление плиток стало бы рывком */ transition: transform 150ms ease-out, opacity 200ms ease-out; } .ob-tile:hover { transform: translateY(-3px); } .ob-tile .badge { background: var(--terracotta-100); color: var(--terracotta); font-weight: 600; font-size: 12px; border-radius: 999px; padding: 5px 12px; } .ob-tile img { height: 104px; width: auto; display: block; margin: 14px 0 10px; } .ob-tile-sr { font-family: Unbounded; font-weight: 600; font-size: 19px; color: var(--terracotta); } .ob-tile-ru { font-size: 14px; color: var(--muted); margin-top: 4px; } @media (prefers-reduced-motion: reduce) { .ob-tile { transition: none; } .ob-tile:hover { transform: none; } } /* ── Поиск (его создаёт obmanki.js) и указатель по буквам ── */ .ob-search { margin-top: 24px; max-width: 460px; } .ob-search input { width: 100%; font: inherit; padding: 12px 16px; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--card); } .ob-search input::placeholder { color: var(--muted); } .ob-count { margin-top: 8px; font-size: 13px; color: var(--muted); } .ob-az { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .ob-az a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 9px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--ink); text-decoration: none; font-family: Unbounded; font-weight: 600; font-size: 15px; transition: background 150ms ease-out; } .ob-az a:hover { background: var(--surface); } .ob-az a.off { opacity: 0.3; pointer-events: none; } /* ── Список слов ── */ /* Каждая буква — своя section, а у section в проекте вертикальный padding 72px: между группами набегало под 150px пустоты. Здесь буквы идут одна за другой внутри общего блока, поэтому свой отступ им нужен маленький. */ .ob-group { margin-top: 36px; padding-block: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .ob-letter { grid-column: 1 / -1; scroll-margin-top: 16px; font-size: 26px; line-height: 1; color: var(--terracotta); padding-bottom: 10px; border-bottom: 1px solid var(--line); } .ob { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px 22px; scroll-margin-top: 16px; } /* Прицел якоря: слово, на которое пришли по ссылке, подсвечено рамкой — иначе в списке из 78 карточек непонятно, куда тебя привели. */ .ob:target { border-color: var(--terracotta); box-shadow: var(--shadow); } /* h4, а не h3: буква-разделитель выше по уровню — заголовок группы. Unbounded поэтому назначаем явно, глобальное правило ловит только h1–h3. */ .ob-w { font-family: Unbounded, Inter, sans-serif; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--terracotta); } .ob-w .ob-is { color: var(--ink); font-family: Inter, sans-serif; font-weight: 600; font-size: 17px; } .ob-meta { margin-top: 4px; font-size: 13px; color: var(--muted); font-weight: 500; } /* Решётка-якорь: постоянно висящая на всех 78 карточках, она бы рябила, поэтому проявляется по наведению и всегда видна с клавиатуры. */ .ob-hash { margin-left: 8px; color: var(--muted); text-decoration: none; opacity: 0; transition: opacity 150ms ease-out; } .ob:hover .ob-hash, .ob-hash:focus-visible { opacity: 1; } .ob-assoc { margin-top: 12px; font-size: 15px; line-height: 1.55; } /* Сербское слово внутри объяснения: в исходниках оно в обратных кавычках. box-decoration-break: перенос по строкам не должен рвать подложку на половинки без скруглений — «hitna pomoć» переносится часто. */ .ob-t { background: var(--surface); border-radius: 5px; padding: 1px 4px; font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .ob-ex { margin-top: 14px; background: var(--surface); border-radius: var(--r-btn); padding: 12px 14px; } .kviz-exp .ob-t { background: var(--card); } .ob-ex .ex-sr { display: block; font-weight: 600; font-size: 15px; } .ob-ex .ex-ru { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; } .ob-theme { margin-top: 14px; display: inline-block; background: var(--terracotta-100); color: var(--terracotta); font-weight: 600; font-size: 12px; border-radius: 999px; padding: 4px 11px; } .ob-empty { margin-top: 28px; color: var(--muted); } /* ── Квиз (собирает obmanki.js) ── */ .kviz-card { max-width: 620px; margin-top: 28px; padding: 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-block); box-shadow: var(--shadow); } .kviz-step { font-size: 13px; font-weight: 500; color: var(--muted); } .kviz-q { font-family: Unbounded, sans-serif; font-weight: 600; font-size: clamp(19px, 3vw, 23px); line-height: 1.3; margin-top: 10px; } .kviz-q span { color: var(--terracotta); } .kviz-opts { display: grid; gap: 10px; margin-top: 20px; } .kviz-opt { font: inherit; text-align: left; cursor: pointer; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-btn); padding: 13px 16px; transition: background 150ms ease-out, transform 120ms ease-out; } .kviz-opt:hover:not(:disabled) { background: var(--surface); } .kviz-opt:active:not(:disabled) { transform: scale(0.99); } .kviz-opt:disabled { cursor: default; } .kviz-opt.right { background: var(--teal-100); border-color: var(--teal); font-weight: 600; } .kviz-opt.wrong { background: var(--terracotta-100); border-color: var(--terracotta); } .kviz-exp { margin-top: 18px; padding: 14px 16px; background: var(--surface); border-radius: var(--r-card); font-size: 15px; line-height: 1.55; } .kviz-exp b { color: var(--terracotta); } .kviz-foot { margin-top: 18px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* Не action-цветом: единственная фиолетовая кнопка страницы — «Хочу в бету» */ .kviz-next { font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); background: var(--card); border: 1px solid var(--ink); border-radius: var(--r-btn); padding: 12px 20px; transition: background 150ms ease-out; } .kviz-next:hover { background: var(--paper); } .kviz-score { font-family: Unbounded, sans-serif; font-weight: 600; font-size: 22px; } .kviz-res-note { margin-top: 10px; color: var(--muted); } @media (prefers-reduced-motion: reduce) { .kviz-opt { transition: none; } .kviz-opt:active:not(:disabled) { transform: none; } } /* ── Ссылка на список с лендинга ── */ .reds-more { margin-top: 24px; font-size: 16px; } .reds-more a { font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--brand); } .reds-more a:hover { border-bottom-color: var(--action); } /* ── Адаптив страницы обманок ── */ @media (max-width: 900px) { .ob-tiles { grid-template-columns: repeat(3, 1fr); } .ob-group { grid-template-columns: 1fr; } } @media (max-width: 560px) { .ob-tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; } .ob-tile img { height: 84px; } .ob { padding: 18px; } .kviz-card { padding: 22px 18px; } .ob-az a { min-width: 34px; height: 34px; font-size: 14px; } } /* ═══════════════════════════════════════════════════════════════════════ Страница /duolingo/ — «Сербского нет в Duolingo. Чем учить в 2026». Отдельный блок в конце, префикс dl-: существующие классы не трогаем. Шапка страницы пользуется .top-back из блока /obmanki/ выше. Терракота — только служебная метка «нет» в таблице; единственная фиолетовая кнопка на странице — «Хочу в бету» внизу. ═══════════════════════════════════════════════════════════════════════ */ /* ── Хиро страницы ── */ .dl-hero { padding-block: 8px 44px; } .dl-hero h1 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.16; font-weight: 700; max-width: 17em; } .dl-hero h1 .q { color: var(--action); } .dl-lead { margin-top: 18px; font-size: 18px; line-height: 1.6; max-width: 44em; } .dl-hint { margin-top: 16px; font-size: 14px; color: var(--muted); } /* ── «Коротко»: прямые проверяемые факты. Их же цитируют AI-ответы, поэтому каждый пункт — законченное предложение, а не обрывок списка. ── */ .dl-facts { margin-top: 28px; max-width: 46em; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-block); padding: 22px 26px; box-shadow: var(--shadow); list-style: none; } .dl-facts li { padding-left: 22px; position: relative; font-size: 16px; line-height: 1.6; } .dl-facts li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .dl-facts li::before { content: '·'; position: absolute; left: 4px; top: 0; color: var(--action); font-weight: 700; font-size: 22px; line-height: 1.25; } .dl-facts li + li::before { top: 12px; } .dl-facts b { font-weight: 600; } /* ── Сравнительная таблица ──────────────────────────────────────────────── На широком экране это обычная таблица в своей карточке. Контейнер скроллится сам (overflow-x), чтобы на планшете страница целиком никуда не уезжала. На узком экране таблица разбирается в карточки: строка — карточка, ячейка — строчка «критерий / ответ», подпись берётся из data-l. Раскладку меняет CSS, поэтому ролям таблицы нужна страховка — в разметке проставлены role="table/row/cell": display:block иначе стирает их для скринридеров. ── */ .dl-tablewrap { margin-top: 32px; overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-block); box-shadow: var(--shadow); } .dl-tablewrap:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } .dl-cmp { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 14px; } .dl-cmp caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .dl-cmp th, .dl-cmp td { padding: 13px 14px; text-align: left; vertical-align: top; line-height: 1.45; } .dl-cmp tbody tr { border-top: 1px solid var(--line); } .dl-cmp thead th { background: var(--surface); font-family: Inter, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.01em; } .dl-cmp tbody th { font-weight: 600; font-size: 15px; white-space: nowrap; } .dl-cmp tbody th small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); white-space: normal; } /* Служебные метки ответа: «нет» приглушено, «есть» — тем же чернильным цветом, без светофора из зелёного и красного. */ .dl-cmp .no { color: var(--muted); } .dl-cmp .yes { font-weight: 600; } /* Своя строка — подсвечена, но без хвастовства: тот же светлый фиолетовый, что у шагов на лендинге. Минусы Molim написаны в ней же. */ .dl-cmp .dl-me { background: var(--surface); } .dl-cmp .dl-me th { color: var(--action); } .dl-note { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 46em; } @media (max-width: 860px) { .dl-tablewrap { background: none; border: 0; border-radius: 0; box-shadow: none; overflow-x: visible; } .dl-cmp { min-width: 0; display: block; font-size: 15px; } .dl-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .dl-cmp tbody, .dl-cmp tr, .dl-cmp th, .dl-cmp td { display: block; } .dl-cmp tbody tr { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 20px; margin-bottom: 14px; } .dl-cmp tbody tr.dl-me { border-color: var(--brand); } .dl-cmp tbody th { font-family: Unbounded, Inter, sans-serif; font-size: 18px; line-height: 1.25; padding: 0 0 12px; white-space: normal; } /* Подзаголовок карточки — Inter: Unbounded достался ему от заголовка th и в мелком кегле выглядел тяжело. */ .dl-cmp tbody th small { font-family: Inter, sans-serif; margin-top: 4px; font-size: 13px; } .dl-cmp td { padding: 10px 0 0; border-top: 1px solid var(--line); margin-top: 10px; } /* Подпись критерия отдельной строкой, а не колонкой: на 375px две колонки внутри карточки схлопываются в лесенку из переносов. */ .dl-cmp td::before { content: attr(data-l); display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; } } /* ── Разбор инструментов по одному ── */ /* align-items не start: карточки в паре разной длины, и под короткой зияла дыра в пол-экрана. Растянутые по строке выглядят сеткой, а не обломками. */ .dl-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; align-items: stretch; } .dl-tool { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-block); padding: 24px 26px; } .dl-tool h3 { font-size: 19px; line-height: 1.3; } .dl-tool .dl-tag { font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 4px; } .dl-tool p { margin-top: 12px; font-size: 15px; line-height: 1.6; } /* Плюс и минус словами, а не иконками: строка «Сильная сторона» честнее зелёной галочки, потому что её нельзя поставить не глядя. */ .dl-tool .dl-plus, .dl-tool .dl-minus { margin-top: 10px; font-size: 15px; line-height: 1.55; } .dl-tool .dl-plus b { color: var(--teal); font-weight: 600; } .dl-tool .dl-minus b { color: var(--terracotta); font-weight: 600; } /* ── «Что выбрать под задачу» ── */ .dl-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; } .dl-pick { background: var(--surface); border-radius: var(--r-block); padding: 24px; } .dl-pick h3 { font-size: 17px; line-height: 1.3; } .dl-pick p { margin-top: 10px; font-size: 15px; color: var(--muted); line-height: 1.6; } /* ── Ссылка на главную в тексте ── */ .dl-home { margin-top: 22px; font-size: 16px; } .dl-home a { font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--brand); } .dl-home a:hover { border-bottom-color: var(--action); } /* ── Адаптив страницы про Duolingo ── */ @media (max-width: 900px) { .dl-tools { grid-template-columns: 1fr; } .dl-picks { grid-template-columns: 1fr; } } @media (max-width: 560px) { .dl-facts { padding: 20px 18px; } .dl-tool { padding: 20px 18px; } .dl-cmp tbody tr { padding: 16px 18px; } } /* Разделитель между словом и переводом. Отдельным элементом, а не внутри текста перевода: квиз читает перевод из DOM, и разделитель в тексте ломал ему отбор вариантов. */ .ob-sep { color: var(--muted); font-weight: 400; } /* ═══════════════════════════════════════════════════════════════════════ /duolingo/: ссылки внутри текста и карточка фактов на белой секции. Списка источников внизу больше нет — ссылки на сайты сервисов переехали внутрь предложений, где они и подтверждают конкретный факт. Фиолетовым на странице светится одна кнопка, поэтому в тексте ссылка идёт цветом абзаца и подчёркивается брендовой линией, как .dl-home выше; цвет загорается только под курсором. ═══════════════════════════════════════════════════════════════════════ */ .dl-facts a, .dl-tool a, .dl-cmp a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--brand); } .dl-facts a:hover, .dl-tool a:hover, .dl-cmp a:hover { color: var(--action); border-bottom-color: var(--action); } /* Карточка фактов белая, и на белой секции .alt она сливалась бы с фоном: там она бумажная, как карточки «болей» на главной. */ section.alt .dl-facts { background: var(--paper); } /* ═══════════════════════════════════════════════════════════════════════ Страница /s-nulya/ — «Сербский язык для начинающих с нуля: план первого месяца». Отдельный блок в конце, префикс sn-: существующие классы не трогаем. Шапка пользуется .top-back из блока /obmanki/ выше. На странице много сербских слов, и каждое просится выделить цветом — этого не делаем: терракота остаётся служебной меткой (номер недели, пометка «осторожно»), фиолетовая action светится у одной кнопки, формы беты внизу. Слова держит шрифт, а не краска. ═══════════════════════════════════════════════════════════════════════ */ /* ── Хиро ── */ .sn-hero { padding-block: 8px 44px; } .sn-hero h1 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.16; font-weight: 700; max-width: 18em; } .sn-hero h1 .q { color: var(--action); } .sn-lead { margin-top: 18px; font-size: 18px; line-height: 1.6; max-width: 44em; } /* Оглавление: четыре якоря строкой, чтобы с телефона было видно объём страницы и можно было прыгнуть в нужную часть. */ .sn-toc { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .sn-toc a { display: inline-block; padding: 8px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; transition: background 150ms ease-out; } .sn-toc a:hover { background: var(--surface); } /* Транскрипция: заглавная буква внутри слова показывает ударение, поэтому текст не должен уезжать в капитель или курсив. */ .sn-pron { font-weight: 600; font-variant: none; white-space: nowrap; } /* ── Четыре карточки «что знать до старта» ── */ .sn-basics { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; align-items: stretch; } .sn-basic { background: var(--paper); border-radius: var(--r-block); padding: 26px 28px; } .sn-basic h3 { font-size: 19px; line-height: 1.3; } .sn-basic p { margin-top: 12px; font-size: 15px; line-height: 1.6; } /* ── Недели ── */ .sn-weeks { display: grid; gap: 20px; margin-top: 40px; } .sn-week { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-block); padding: 30px 32px; box-shadow: var(--shadow); } /* Номер недели — служебная метка, поэтому терракота, как плашка темы на странице обманок. */ .sn-num { display: inline-block; background: var(--terracotta-100); color: var(--terracotta); font-weight: 600; font-size: 12px; border-radius: 999px; padding: 5px 12px; margin-bottom: 14px; } .sn-week h3 { font-size: clamp(20px, 2.6vw, 24px); line-height: 1.25; } .sn-week > p { margin-top: 12px; font-size: 16px; line-height: 1.6; max-width: 46em; } /* Список слов: три колонки на десктопе, одна на телефоне. Сербское слово Unbounded, латиница с ударением и перевод — Inter поменьше. */ .sn-words { list-style: none; margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 20px; } .sn-words li { padding: 10px 0; border-top: 1px solid var(--line); /* «Изнајмљивање» и «Ургентни центар» шире колонки на узком экране */ overflow-wrap: break-word; } .sn-words b { display: block; font-family: Unbounded, Inter, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.3; } .sn-lat { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; } .sn-ru { display: block; font-size: 14px; margin-top: 2px; } /* Фраза целиком: та же подложка, что у примеров в карточках обманок */ .sn-phrase { margin-top: 14px; background: var(--surface); border-radius: var(--r-btn); padding: 12px 14px; } .sn-p-sr { display: block; font-weight: 600; font-size: 15px; } .sn-p-ru { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; } .sn-tip { margin-top: 16px; font-size: 15px; line-height: 1.6; max-width: 48em; } .sn-tip b { font-weight: 600; } /* ── Итог месяца ── */ .sn-after { margin-top: 36px; max-width: 46em; } .sn-after h3 { font-size: 20px; line-height: 1.3; } .sn-after p { margin-top: 12px; font-size: 16px; line-height: 1.6; } /* ── Вопросы: каждый со своим h2, поэтому разделены линией, а не карточками ── */ .sn-qa { max-width: 46em; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); } .sn-qa:first-of-type { margin-top: 24px; padding-top: 0; border-top: 0; } .sn-qa h2 { font-size: clamp(22px, 3vw, 28px); line-height: 1.25; } .sn-qa p { margin-top: 14px; font-size: 16px; line-height: 1.65; } .sn-steps { margin-top: 14px; padding-left: 22px; } .sn-steps li { font-size: 16px; line-height: 1.6; margin-top: 8px; } /* ── Чем учить ── */ .sn-tools { list-style: none; margin-top: 32px; max-width: 46em; } .sn-tools li { padding-left: 22px; position: relative; font-size: 16px; line-height: 1.6; } .sn-tools li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .sn-tools li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 999px; background: var(--brand); } .sn-tools li + li::before { top: 22px; } .sn-tools b { font-weight: 600; } /* Блок «Где во всём этом Molim» — единственное место страницы, где мы говорим о себе. Выделен брендовой подложкой и линией слева: читателю сразу видно, где кончается совет и начинается реклама. */ .sn-mecard { margin-top: 40px; padding: 26px 28px; background: var(--surface); border-left: 3px solid var(--action); border-radius: var(--r-block); } .sn-mecard .sn-me-h { margin-top: 0; } .sn-mecard .sn-me:first-of-type { margin-top: 12px; } .sn-mecard .sn-home { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .sn-me-h { margin-top: 40px; font-size: 20px; line-height: 1.3; } .sn-me { margin-top: 14px; font-size: 16px; line-height: 1.65; max-width: 46em; } /* Ссылки в тексте: цветом абзаца с брендовой линией, как .dl-home на соседней странице. Фиолетовым светится одна кнопка. */ .sn-home { margin-top: 26px; font-size: 16px; line-height: 1.7; max-width: 46em; } .sn-home a, .sn-basic a, .sn-qa a, .sn-tools a, .sn-steps a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--brand); font-weight: 600; } .sn-home a:hover, .sn-basic a:hover, .sn-qa a:hover, .sn-tools a:hover, .sn-steps a:hover { color: var(--action); border-bottom-color: var(--action); } /* ── Адаптив страницы «с нуля» ── */ @media (max-width: 900px) { .sn-basics { grid-template-columns: 1fr; } .sn-words { grid-template-columns: 1fr 1fr; } .sn-week { padding: 26px 22px; } } @media (max-width: 560px) { .sn-words { grid-template-columns: 1fr; } .sn-week { padding: 22px 18px; } .sn-basic { padding: 22px 18px; } .sn-toc a { font-size: 14px; padding: 7px 12px; } } @media (prefers-reduced-motion: reduce) { .sn-toc a { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════ /obmanki/: кнопка озвучки у слова и у примера. Префикс ob-, потому что живёт она внутри блока обманок. Не фиолетовая и не терракотовая: action на странице занят формой беты, терракота — служебная метка обманки. Кнопка ведёт себя как второстепенный элемент управления, пока не играет; играющая заливается чернилами и потому одна заметна. ═══════════════════════════════════════════════════════════════════════ */ /* Спрайт с иконкой динамика лежит сразу за шапкой и ничего не занимает */ .ob-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ob-say { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; margin-left: 8px; vertical-align: middle; background: var(--card); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: background 150ms ease-out, color 150ms ease-out; } /* display у кнопки задан явно, поэтому hidden надо вернуть руками: до включения скриптом её на странице быть не должно. */ .ob-say[hidden] { display: none; } .ob-say svg { display: block; width: 15px; height: 15px; } .ob-say:hover { background: var(--surface); color: var(--ink); } .ob-say.on { background: var(--ink); border-color: var(--ink); color: var(--paper); } /* Кнопка примера сидит в углу плашки: внутри фразы она разрывала бы строку, а перенос ставил бы её под текст отдельной сиротой. */ .ob-ex { position: relative; padding-right: 48px; } .ob-say-ex { position: absolute; top: 10px; right: 10px; margin-left: 0; background: var(--paper); } .ob-say-ex:hover { background: var(--card); } @media (prefers-reduced-motion: reduce) { .ob-say { transition: none; } } /* ═══════════════════════════════════════════════════════════════════════ Страница /crnogorski/ — «Черногорский и сербский: один язык или разные». Отдельный блок в конце, префикс cg-. Терракоты здесь нет: страница не про обманки, а служебная метка чужого раздела сбивала бы. Фиолетовым на странице светится одна кнопка, форма беты внизу. ═══════════════════════════════════════════════════════════════════════ */ .cg-hero { padding-block: 8px 44px; } .cg-hero h1 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1.16; font-weight: 700; max-width: 17em; } /* Прямой ответ. Отдельной карточкой, потому что его и цитируют: и человек, который пришёл из поиска, и машина, которая собирает ответ за него. */ .cg-answer { margin-top: 24px; max-width: 44em; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--r-block); box-shadow: var(--shadow); padding: 24px 28px; font-size: 18px; line-height: 1.6; } .cg-lead { margin-top: 22px; font-size: 17px; line-height: 1.65; max-width: 44em; color: var(--muted); } /* ── Четыре отличия ── */ .cg-diffs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; align-items: stretch; } .cg-diff { background: var(--paper); border-radius: var(--r-block); padding: 24px 26px; } .cg-diff h3 { font-size: 19px; line-height: 1.3; } .cg-diff p { margin-top: 12px; font-size: 15px; line-height: 1.6; } .cg-diff p + p { color: var(--muted); } /* Сербское слово в тексте отбито только насыщенностью. Подложка, как у токенов в обманках, здесь не годится: в этих абзацах сербских слов по десятку на штуку, и страница покрывается рябью из плашек. */ .cg-diff [lang="sr"], .cg-words [lang="sr"], .cg-w [lang="sr"], .cg-home [lang="sr"] { font-weight: 600; color: var(--ink); } /* ── Таблица слов ── */ .cg-pairs-h { margin-top: 44px; font-size: 19px; } .cg-tablewrap { margin-top: 16px; max-width: 620px; overflow-x: auto; background: var(--paper); border-radius: var(--r-block); } .cg-pairs { width: 100%; border-collapse: collapse; font-size: 15px; } .cg-pairs caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .cg-pairs th, .cg-pairs td { padding: 11px 18px; text-align: left; } .cg-pairs thead th { font-family: Inter, sans-serif; font-weight: 600; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); } .cg-pairs tbody tr + tr td { border-top: 1px solid var(--line); } .cg-pairs td[lang] { font-weight: 600; } .cg-pairs td:last-child { color: var(--muted); font-weight: 400; } .cg-note { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 44em; } /* ── Документы про статус языка ── */ .cg-facts { margin-top: 28px; max-width: 46em; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-block); padding: 22px 26px; box-shadow: var(--shadow); } .cg-facts li { padding-left: 22px; position: relative; font-size: 16px; line-height: 1.6; } .cg-facts li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .cg-facts li::before { content: '·'; position: absolute; left: 4px; top: 0; color: var(--action); font-weight: 700; font-size: 22px; line-height: 1.25; } .cg-facts li + li::before { top: 12px; } .cg-facts b { font-weight: 600; } /* ── Почему всё-таки сербский ── */ .cg-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; } .cg-w { background: var(--surface); border-radius: var(--r-block); padding: 24px; } .cg-w h3 { font-size: 17px; line-height: 1.3; } .cg-w p { margin-top: 10px; font-size: 15px; color: var(--muted); line-height: 1.6; } /* ── Слова релоканта: одинаковы по обе стороны границы ── */ .cg-words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 32px; list-style: none; } .cg-words li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; font-size: 15px; color: var(--muted); } .cg-words [lang="sr"] { color: var(--ink); margin-right: 6px; } /* ── Ссылки внутри текста: цветом абзаца с брендовой линией, как на соседних страницах. Фиолетовым светится одна кнопка. ── */ .cg-home { margin-top: 22px; font-size: 16px; line-height: 1.7; max-width: 46em; } .cg-home a, .cg-facts a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--brand); font-weight: 600; } .cg-home a:hover, .cg-facts a:hover { color: var(--action); border-bottom-color: var(--action); } /* ── Адаптив черногорской страницы ── */ @media (max-width: 900px) { .cg-diffs { grid-template-columns: 1fr; } .cg-why { grid-template-columns: 1fr; } .cg-words { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .cg-answer { padding: 20px 18px; font-size: 17px; } .cg-diff { padding: 20px 18px; } .cg-facts { padding: 20px 18px; } .cg-words { grid-template-columns: 1fr; } .cg-pairs th, .cg-pairs td { padding: 10px 12px; } } /* ═══════════════════════════════════════════════════════════════════════ Раздел /slovar/ — сто страниц отдельных слов и указатель. Префикс sl-, отдельный блок в конце: существующие классы не трогаем. Терракота тут не работает: она служебная метка обманки, а словарь про обычные слова. Цвет держит бумага и белая карточка, фиолетовая action светится у единственной кнопки, формы беты внизу. Кнопка прослушивания поэтому чернильная, как «дальше» в квизе обманок. ═══════════════════════════════════════════════════════════════════════ */ /* ── Кнопка прослушивания ── Без скрипта она мертва, поэтому лежит скрытой, а рядом в