/* responsive-fix.css — мобильные оверрайды. Подключается ПОСЛЕДНИМ в (assemble.mjs, admin), чтобы каскад был на нашей стороне. !important — только против инлайновых style="" генераторов. Брейкпоинты те же, что в дизайн-системе: 768 (планшет и ниже), 600 (узкие), 480 (телефон). */ /* страховка на медиа: картинка не шире экрана и не «кишкой» */ img, video, iframe { max-width: 100%; height: auto; } svg { max-width: 100%; } @media (max-width: 768px) { /* iOS зумит страницу при фокусе на поле мельче 16px — и не отзумливает обратно */ input, select, textarea { font-size: 16px !important; } /* тач-таргеты: ссылки-действия и вкладки не ниже 40px */ .stk-row a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; margin: -8px 0; } .ex-tab, .stk-chip { min-height: 40px; } footer ul a { display: inline-block; padding: 6px 0; } .docs-toc a { padding-top: 10px !important; padding-bottom: 10px !important; } button[style*="height:26px"] { height: 34px !important; } /* таблица стоков: первая колонка (тикер + логотип) остаётся на месте, пока цифры скроллятся; колонка «Sector» на телефоне лишняя — та же информация есть в фильтре-чипах сверху */ .stk-name { position: sticky; left: 0; z-index: 1; background: var(--vox-gray-900, #0a0b0d); } .stk-name::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: rgba(var(--ink), .08); } .stk-sector { display: none; } } @media (max-width: 480px) { /* 9px mono-лейблы на телефоне слишком мелкие — поднимаем до 10.5 */ [style*="font-size:9px"], [style*="font-size:9.5px"] { font-size: 10.5px !important; } /* меньше вертикального воздуха между секциями документации и шапками страниц */ section[style*="padding:52px 0"] { padding: 36px 0 !important; } } /* залипающий hover на таче: подсветка карточек только там, где есть настоящий курсор */ @media (hover: none) { .coin-card:hover { border-color: rgba(var(--ink), .10) !important; } } @media (max-width: 600px) { /* Таблицы документации (статус / параметры / комиссии / константы) — три колонки на 375px не живут: превращаем строку в сетку «первая ячейка + вторая» и описание под ними на всю ширину */ .docs-grid table thead { display: none; } .docs-grid table, .docs-grid table tbody { display: block; width: 100%; } .docs-grid table tr { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: baseline; padding: 12px 14px; border-bottom: 1px solid rgba(var(--ink), .06); } .docs-grid table tr:last-child { border-bottom: 0; } .docs-grid table td { display: block; padding: 0 !important; border: 0 !important; width: auto !important; text-align: left !important; } .docs-grid table td:nth-child(3) { grid-column: 1 / -1; } /* таблица составляющих vault на странице монеты: пусть ужмётся вместо горизонтального скролла */ .coin-main table { min-width: 0 !important; } } @media (max-width: 768px) { /* остаточные мелкие таргеты: текстовые кнопки в карточках корзин, иконка X в подвале */ main button { min-height: 40px; } footer a[aria-label="Auren on X"] { padding: 11px; margin: -11px 0; } } @media (max-width: 480px) { [style*="font-size:8.5px"] { font-size: 10px !important; } } @media (max-width: 480px) { /* стоки: липкая колонка тикера не должна съедать весь экран — имя компании короче */ .stk-name [style*="max-width:220px"] { max-width: 120px !important; } .stk-name { padding-right: 8px !important; } /* vault на странице монеты: подстрока компании прячется (тикер остаётся), отступы плотнее — таблица влезает без скролла */ .coin-main table td, .coin-main table th { padding-left: 6px !important; padding-right: 6px !important; } .coin-main table td [style*="font-size:11px"] { display: none; } }