/* /assets/mobile.css — единые мобильные правила для всех страниц Redinova. Цель: читабельность, ничего не вылезает за карточки, калькулятор в один экран. Подключать в конце ПОСЛЕ основных стилей страницы. Правим здесь — чинится везде. */ @media (max-width: 640px) { /* ── ЧИТАБЕЛЬНОСТЬ ── приглушённый текст слишком тёмный на чёрном */ :root { --muted: #a8a090 !important; --muted2: #b5ad9e !important; } /* базовый размер текста не мельче 15px — комфортно читать с телефона */ body { font-size: 15px; -webkit-text-size-adjust: 100%; } p, li, td, .card p, .res-sub { line-height: 1.55; } /* ── ЗАЩИТА ОТ ВЫЛЕЗАНИЯ ── ничего не торчит за края (как НОВИКОМБАНК) ── */ * { min-width: 0; } .card, .section, .inner, .cta-block, .calc-wrap, .rdf-wrap, .modal-ov > div, .rdf-formbody { max-width: 100% !important; box-sizing: border-box; overflow-wrap: break-word; word-break: break-word; } /* длинные названия/суммы переносятся, а не растягивают контейнер */ .rate, .v, .l, .calc-sum-item, .rdf-brow, .rdf-bname, .rdf-brate, .rdf-bpay { overflow-wrap: break-word; white-space: normal !important; } /* ── ОТСТУПЫ ── дышащая, но не рыхлая вёрстка ── */ .inner { padding-left: 16px !important; padding-right: 16px !important; } .section { padding: 24px 0 !important; } .card { padding: 16px !important; } .cta-block { padding: 28px 18px !important; margin: 32px 0 !important; } /* ── КАЛЬКУЛЯТОР ── строки банков не ломаются, влезают в ширину ── */ .rdf-brow { display: grid !important; grid-template-columns: 24px 1fr auto; grid-template-areas: "num name rate" "num name pay"; gap: 2px 8px; align-items: center; padding: 10px 0; } .rdf-brank { grid-area: num; } .rdf-bname { grid-area: name; font-size: 14px; line-height: 1.2; } .rdf-brate { grid-area: rate; text-align: right; } .rdf-bpay { grid-area: pay; text-align: right; font-size: 13px; } /* слайдеры калькулятора на всю ширину */ input[type="range"] { width: 100% !important; } /* ── КНОПКИ ── крупные, во всю ширину, легко попасть пальцем ── */ .btn-gold { width: 100% !important; padding: 14px 18px !important; font-size: 15px !important; box-sizing: border-box; } /* ── БЕЙДЖИ ── переносятся, не растягивают строку ── */ .badge-row { flex-wrap: wrap !important; gap: 8px !important; } .badge { font-size: 12px !important; } /* ── ЗАГОЛОВКИ ── не гигантские, влезают ── */ h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.1; } h2 { font-size: clamp(22px, 6vw, 32px) !important; } /* ── ТАБЛИЦЫ ── горизонтальный скролл, не ломают страницу ── */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }