/* ==========================================================================
INTRO SMS — тёмная тема публичного лендинга («Network Operations»)
Область действия — только шаблон default (лендинг и страницы About /
Terms / Privacy). Кабинет использует шаблон dashboard и сюда не попадает:
класс rentos-site стоит на в templates/default/header.tpl.
Акцент кабинета (#802BE3) живёт в настройках темы и компилируется в
style.min.css обоих шаблонов. Менять его нельзя — перекрасился бы и
кабинет, поэтому палитра лендинга задана здесь и перекрывает
скомпилированную. По этой же причине почти все правила ниже привязаны к
body.rentos-site: без этого они утекли бы в кабинет через общий .
Движение живёт в rentos-landing.js. Без него страница остаётся полностью
рабочей и статичной — это же состояние отдаётся при
prefers-reduced-motion: reduce.
========================================================================== */
body.rentos-site {
--ins-bg: #0A0E1A;
--ins-bg-2: #0D1220;
--ins-elevated: rgba(255, 255, 255, 0.04);
--ins-elevated-2: rgba(255, 255, 255, 0.06);
--ins-border: rgba(255, 255, 255, 0.08);
--ins-border-strong: rgba(255, 255, 255, 0.14);
--ins-accent: #22D3EE;
--ins-accent-2: #8B5CF6;
--ins-success: #34D399;
--ins-text: #E6EDF7;
--ins-dim: #8A97AD;
--ins-faint: #5B6880;
--ins-display: "Unbounded", "Inter", sans-serif;
--ins-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--ins-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--ins-radius: 18px;
--ins-radius-sm: 12px;
--bs-font-sans-serif: var(--ins-sans);
--bs-body-color: var(--ins-dim);
--bs-body-bg: var(--ins-bg);
background: var(--ins-bg);
color: var(--ins-text);
font-family: var(--ins-sans);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* Шум поверх фона — убирает «пластиковость» плоской заливки. SVG в data-URI,
отдельного запроса не создаёт. */
body.rentos-site::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0.025;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.rentos-site .content-wrapper,
body.rentos-site footer {
position: relative;
z-index: 1;
}
/* Шапка обязана быть выше содержимого. Навбар внутри неё — position:absolute,
поэтому сам нулевой высоты и в потоке стоит ПЕРЕД .content-wrapper.
При одинаковом z-index секция hero, идущая в разметке позже, закрывала бы
навбар целиком: шапка казалась бы исчезнувшей и проявлялась только при
прокрутке, когда скрипт делает её fixed. Вместе с ней пропадал и
переключатель языка. */
/* Уровень наложения выше клона липкой шапки, который Sandbox вешает прямо
на body с z-index 1008. Значение 20 было ошибкой: шапка получала свой
контекст наложения, и выезжающая шторка внутри неё (z-index 1041 по
шаблону) оказывалась прижата к этому же уровню — клон накрывал её сверху
и срезал логотип в шторке. */
body.rentos-site header {
position: relative;
z-index: 1040;
}
body.rentos-site ::selection {
background: rgba(34, 211, 238, 0.28);
color: #fff;
}
/* --------------------------------------------------------------------------
Типографика
-------------------------------------------------------------------------- */
body.rentos-site h1, body.rentos-site .h1,
body.rentos-site h2, body.rentos-site .h2,
body.rentos-site h3, body.rentos-site .h3,
body.rentos-site .display-1,
body.rentos-site .display-2,
body.rentos-site .display-3,
body.rentos-site .display-5 {
font-family: var(--ins-display);
color: var(--ins-text);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.15;
}
body.rentos-site h4, body.rentos-site .h4,
body.rentos-site h5, body.rentos-site .h5,
body.rentos-site h6 {
font-family: var(--ins-sans);
color: var(--ins-text);
font-weight: 600;
}
body.rentos-site p,
body.rentos-site .lead {
color: var(--ins-dim);
}
body.rentos-site .text-muted {
color: var(--ins-faint) !important;
}
body.rentos-site a {
color: var(--ins-accent);
}
body.rentos-site a:hover {
color: #67E8F9;
}
/* Секционный лейбл в духе HUD: // GATEWAY_STATUS: ONLINE */
body.rentos-site .ins-hud {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-family: var(--ins-mono);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ins-accent);
margin-bottom: 1rem;
}
body.rentos-site .ins-hud::before {
content: "//";
color: var(--ins-faint);
}
body.rentos-site .ins-mono {
font-family: var(--ins-mono);
font-variant-numeric: tabular-nums;
}
/* --------------------------------------------------------------------------
Стеклянные поверхности
backdrop-filter на десятке карточек — заметная нагрузка на мобильные GPU,
поэтому ниже 768px блюр выключается (см. блок медиазапросов). Внешне
разница почти незаметна: фон и рамка остаются.
-------------------------------------------------------------------------- */
body.rentos-site .ins-glass {
position: relative;
background: var(--ins-elevated);
border: 1px solid var(--ins-border);
border-radius: var(--ins-radius);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
body.rentos-site .ins-glass:hover {
border-color: rgba(34, 211, 238, 0.45);
box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.12), 0 18px 50px -24px rgba(34, 211, 238, 0.55);
}
/* Угловые метки-crosshair на ключевых карточках */
body.rentos-site .ins-crosshair::before,
body.rentos-site .ins-crosshair::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-color: rgba(34, 211, 238, 0.5);
border-style: solid;
pointer-events: none;
}
body.rentos-site .ins-crosshair::before {
top: 10px;
left: 10px;
border-width: 1px 0 0 1px;
}
body.rentos-site .ins-crosshair::after {
right: 10px;
bottom: 10px;
border-width: 0 1px 1px 0;
}
body.rentos-site .ins-icon {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: var(--ins-radius-sm);
background: rgba(34, 211, 238, 0.10);
border: 1px solid rgba(34, 211, 238, 0.20);
color: var(--ins-accent);
margin-bottom: 1rem;
}
body.rentos-site .ins-icon svg {
width: 20px;
height: 20px;
}
/* --------------------------------------------------------------------------
Разделитель секций — линия с бегущим бликом
-------------------------------------------------------------------------- */
body.rentos-site .ins-divider {
height: 1px;
border: 0;
margin: 0;
background: linear-gradient(90deg, transparent, var(--ins-border-strong), transparent);
position: relative;
overflow: hidden;
}
body.rentos-site .ins-divider::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, var(--ins-accent), transparent);
transform: translateX(-100%);
animation: ins-sweep 6s ease-in-out infinite;
}
@keyframes ins-sweep {
0% { transform: translateX(-100%); opacity: 0; }
35% { opacity: 0.9; }
70% { transform: translateX(100%); opacity: 0; }
100% { transform: translateX(100%); opacity: 0; }
}
/* --------------------------------------------------------------------------
Появление секций при скролле
Класс ins-reveal ставит JS. Без JS элементы остаются видимыми — это же
поведение нужно при prefers-reduced-motion.
-------------------------------------------------------------------------- */
body.rentos-site .ins-reveal {
opacity: 0;
transform: translateY(24px);
filter: blur(6px);
transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
}
body.rentos-site .ins-reveal.ins-in {
opacity: 1;
transform: none;
filter: none;
}
/* --------------------------------------------------------------------------
Шапка
-------------------------------------------------------------------------- */
body.rentos-site .navbar-dark .logo-light {
display: inline-block;
}
body.rentos-site .navbar-dark .logo-dark {
display: none;
}
body.rentos-site .navbar-dark .navbar-nav .nav-link {
color: var(--ins-dim);
font-size: 0.72rem;
letter-spacing: 0.02em;
}
body.rentos-site .navbar-dark .navbar-nav .nav-link:hover,
body.rentos-site .navbar-dark .navbar-nav .nav-link:focus {
color: var(--ins-accent);
}
/* Липкая шапка. Sandbox не двигает исходный навбар, а КЛОНИРУЕТ его в
.banner--clone и при прокрутке показывает клон с классом .banner--stick.
Этот класс рассчитан на светлый сайт: задаёт белый фон rgba(255,255,255,.97)
и тёмные ссылки. На тёмной странице получалась белая полоса — её и было
видно. Правила ниже перекрывают оба состояния, и .fixed, и .banner--stick. */
body.rentos-site .navbar.fixed,
body.rentos-site .banner--stick,
body.rentos-site .banner--stick.transparent,
body.rentos-site .banner--stick:not(.navbar-dark) {
/* Фон почти непрозрачный вместо размытия. backdrop-filter здесь стоять
НЕ должен: он, как и transform, делает элемент точкой отсчёта для
вложенных position: fixed — выезжающая шторка внутри навбара
переставала цепляться к окну, ехала вместе со страницей, а её
bottom: 0 считался от высоты шапки, оставляя пустую полосу внизу. */
background: var(--ins-bg) !important;
border-bottom: 1px solid var(--ins-border);
box-shadow: none !important;
}
/* Липкую шапку делает библиотека Headhesive: она КЛОНИРУЕТ навбар целиком
и вешает копию на body. От этого шли все беды — в документе оказывались
две выезжающие шторки (открывались обе, отсюда два крестика), два слота
для кодов языков, а сама копия позиционируется через transform, внутри
которого position: fixed перестаёт цепляться к окну.
Клон отключён совсем. Липкое состояние вешает наш собственный скрипт
классом ins-stuck на оригинальный — один навбар, одна шторка,
никаких transform и фильтров на предках. */
body.rentos-site .banner--clone {
display: none !important;
}
/* Липкое состояние по прокрутке. Закрепление «пока открыто меню» убрано:
владельцу не нужна шапка, выскакивающая в момент открытия. Полоса над
меню больше не просвечивает, потому что шторка теперь во всю высоту. */
body.rentos-site header.ins-stuck .navbar {
position: fixed !important;
top: 0;
left: 0;
right: 0;
/* Полностью непрозрачный. При 96% сквозь шапку просвечивал текст первого
экрана — над логотипом читалась строка лейбла. */
background: var(--ins-bg);
border-bottom: 1px solid var(--ins-border);
padding-top: 0.35rem;
padding-bottom: 0.35rem;
/* Выезжает сверху, а не возникает рывком. Анимация запускается самим
появлением класса, отдельного состояния не требуется. Transform здесь
безопасен: выезжающее меню больше не потомок навбара — скрипт
переносит его в корень документа. */
animation: ins-header-in 280ms ease both;
}
@keyframes ins-header-in {
from { transform: translateY(-100%); opacity: 0; }
to { transform: none; opacity: 1; }
}
body.rentos-site .banner--stick .nav-link,
body.rentos-site .banner--stick.transparent.navbar-dark .nav-link,
body.rentos-site .banner--stick:not(.navbar-dark).navbar-dark .nav-link {
color: var(--ins-dim) !important;
}
body.rentos-site .banner--stick .nav-link:hover,
body.rentos-site .banner--stick .nav-link:focus {
color: var(--ins-accent) !important;
}
/* Логотип отдаётся 251×53 и вставлялся в натуральную величину — на любой
ширине это слишком крупно, а на мобильном он выдавливал кнопку входа и
коды языков за край. */
body.rentos-site .navbar-brand img {
max-height: 28px;
width: auto;
}
/* Прокрученная шапка у Sandbox светлая и подставляет тёмный логотип —
на тёмном фоне он невидим, оставляем светлый в обоих состояниях. */
body.rentos-site .navbar-dark.fixed .logo-light {
display: inline-block;
}
body.rentos-site .navbar-dark.fixed .logo-dark {
display: none;
}
body.rentos-site .navbar-dark.fixed .navbar-nav .nav-link {
color: var(--ins-dim);
}
/* Полоски гамбургера — это :before, span и :after САМОЙ КНОПКИ, а не span.
По умолчанию они тёмные (#343f52), белыми их делает правило Sandbox с
условием :not(.fixed) — в липкой шапке оно отваливается, и крайние
полоски пропадали на тёмном фоне. */
body.rentos-site button.hamburger:before,
body.rentos-site button.hamburger span,
body.rentos-site button.hamburger:after {
background: var(--ins-text);
}
/* Плавающая кнопка с флагами, которую system.translate() дорисовывает в
правом нижнем углу. Выбор языка живёт в шапке, второй переключатель не
нужен — а на тёмном фоне он ещё и выглядел белым пятном. */
body.rentos-site .mfb-component--br {
display: none !important;
}
/* Коды языков в шапке. Наполняет rentos-landing.js: штатное модальное окно
со списком было нечитаемым — белая панель поверх тёмной страницы с одним
флагом и без подписей. */
body.rentos-site .ins-langs {
display: flex;
align-items: center;
gap: 2px;
margin-left: 0.4rem;
}
body.rentos-site .ins-langs a {
display: inline-block;
padding: 0.25rem 0.45rem;
border-radius: 8px;
font-family: var(--ins-mono);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--ins-faint);
text-decoration: none;
transition: color 0.2s ease, background 0.2s ease;
}
body.rentos-site .ins-langs a:hover {
color: var(--ins-accent);
background: rgba(34, 211, 238, 0.10);
}
body.rentos-site .ins-langs a.ins-lang-active {
color: var(--ins-text);
background: var(--ins-elevated-2);
}
/* --------------------------------------------------------------------------
Кнопки
-------------------------------------------------------------------------- */
body.rentos-site .ins-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.62rem 1.35rem;
border-radius: var(--ins-radius-sm);
font-family: var(--ins-sans);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.01em;
border: 1px solid transparent;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
body.rentos-site .ins-btn--primary {
background: linear-gradient(120deg, var(--ins-accent), var(--ins-accent-2));
color: #06121A;
box-shadow: 0 10px 30px -12px rgba(34, 211, 238, 0.7);
}
body.rentos-site .ins-btn--primary:hover {
color: #06121A;
transform: translateY(-1px);
box-shadow: 0 16px 40px -14px rgba(34, 211, 238, 0.9);
}
body.rentos-site .ins-btn--ghost {
background: transparent;
border-color: var(--ins-border-strong);
color: var(--ins-text);
}
body.rentos-site .ins-btn--ghost:hover {
border-color: var(--ins-accent);
color: var(--ins-accent);
}
/* --------------------------------------------------------------------------
Hero
-------------------------------------------------------------------------- */
body.rentos-site .ins-hero {
position: relative;
overflow: hidden;
background:
radial-gradient(ellipse at 20% 30%, rgba(34, 211, 238, 0.10), transparent 55%),
radial-gradient(ellipse at 85% 20%, rgba(139, 92, 246, 0.12), transparent 50%),
var(--ins-bg);
}
body.rentos-site .ins-hero__canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
body.rentos-site .ins-hero__inner {
position: relative;
z-index: 1;
}
body.rentos-site .ins-hero h1 {
font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
margin-bottom: 0.8rem;
}
body.rentos-site .ins-hero__lead {
font-size: 0.86rem;
max-width: 30em;
margin-bottom: 1.6rem;
}
body.rentos-site .ins-counter {
margin-top: 1.6rem;
font-family: var(--ins-mono);
font-size: 0.72rem;
color: var(--ins-dim);
font-variant-numeric: tabular-nums;
}
body.rentos-site .ins-counter b {
color: var(--ins-success);
font-weight: 600;
}
/* Терминал-лог */
body.rentos-site .ins-terminal {
padding: 0;
overflow: hidden;
}
body.rentos-site .ins-terminal__bar {
display: flex;
align-items: center;
gap: 0.5em;
padding: 0.6rem 0.9rem;
border-bottom: 1px solid var(--ins-border);
font-family: var(--ins-mono);
font-size: 0.58rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ins-faint);
}
body.rentos-site .ins-terminal__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ins-success);
box-shadow: 0 0 8px var(--ins-success);
}
body.rentos-site .ins-terminal__body {
padding: 0.8rem 0.9rem;
min-height: 230px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 0.35rem;
font-family: var(--ins-mono);
font-size: 0.6rem;
line-height: 1.6;
}
body.rentos-site .ins-terminal__line {
color: var(--ins-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.rentos-site .ins-terminal__line .t { color: var(--ins-faint); }
body.rentos-site .ins-terminal__line .ch { color: var(--ins-accent); }
body.rentos-site .ins-terminal__line .ok { color: var(--ins-success); }
/* --------------------------------------------------------------------------
Схема «как это работает»
-------------------------------------------------------------------------- */
/* Три колонки, в средней две ветки: SMS и WhatsApp — независимые каналы,
а не звенья одной цепочки. Зазор нужен не для воздуха, а под провода:
JS рисует их от правого края одного узла к левому краю следующего. */
body.rentos-site .ins-flow {
display: grid;
grid-template-columns: 1fr 1.15fr 1fr;
gap: 2.6rem;
align-items: center;
position: relative;
}
body.rentos-site .ins-flow__col {
display: grid;
gap: 1rem;
}
body.rentos-site .ins-flow__node--sms .ins-icon {
background: rgba(34, 211, 238, 0.10);
border-color: rgba(34, 211, 238, 0.22);
color: var(--ins-accent);
}
body.rentos-site .ins-flow__node--wa .ins-icon {
background: rgba(52, 211, 153, 0.10);
border-color: rgba(52, 211, 153, 0.22);
color: var(--ins-success);
}
body.rentos-site .ins-flow__node {
padding: 1.4rem 1rem;
text-align: center;
}
body.rentos-site .ins-flow__node h4 {
font-size: 0.78rem;
margin: 0 0 0.35rem;
}
body.rentos-site .ins-flow__node p {
font-size: 0.66rem;
margin: 0;
}
body.rentos-site .ins-flow__node .ins-icon {
margin: 0 auto 0.8rem;
}
body.rentos-site .ins-flow__link {
align-self: center;
height: 2px;
position: relative;
}
body.rentos-site .ins-flow__wires {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
body.rentos-site .ins-flow__wires path {
stroke: var(--ins-border-strong);
stroke-width: 1;
fill: none;
}
/* Импульс — второй экземпляр того же пути с коротким штрихом, который
гоняется по нему через stroke-dashoffset. Анимация чисто CSS: её глушит
prefers-reduced-motion и не нужен ещё один цикл requestAnimationFrame. */
body.rentos-site .ins-flow__wires .ins-wire-pulse {
stroke: var(--ins-accent);
stroke-width: 2;
stroke-linecap: round;
/* Штрих и длина сдвига проставляются из JS под длину каждой кривой;
значения здесь — запасные, если скрипт не отработал. */
stroke-dasharray: 14 400;
filter: drop-shadow(0 0 4px var(--ins-accent));
animation: ins-wire 2.4s linear infinite;
}
@keyframes ins-wire {
from { stroke-dashoffset: var(--ins-wire-len, 414px); }
to { stroke-dashoffset: 0; }
}
/* --------------------------------------------------------------------------
Bento-сетка инструментов
-------------------------------------------------------------------------- */
body.rentos-site .ins-bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.8rem;
}
body.rentos-site .ins-tile {
padding: 1.1rem;
min-height: 150px;
display: flex;
flex-direction: column;
}
body.rentos-site .ins-tile:hover {
transform: translateY(-3px);
}
body.rentos-site .ins-tile--wide {
grid-column: span 2;
}
body.rentos-site .ins-tile h4 {
font-size: 0.76rem;
margin: 0 0 0.3rem;
}
body.rentos-site .ins-tile p {
font-size: 0.64rem;
margin: 0;
}
body.rentos-site .ins-tile__demo {
margin-top: auto;
padding-top: 0.8rem;
}
/* Подсветка JSON в плитке Webhooks */
body.rentos-site .ins-code {
font-family: var(--ins-mono);
font-size: 0.58rem;
line-height: 1.65;
color: var(--ins-dim);
background: rgba(0, 0, 0, 0.30);
border: 1px solid var(--ins-border);
border-radius: var(--ins-radius-sm);
padding: 0.6rem 0.7rem;
margin: 0;
overflow-x: auto;
white-space: pre;
}
body.rentos-site .ins-code .k { color: var(--ins-accent); }
body.rentos-site .ins-code .s { color: var(--ins-success); }
body.rentos-site .ins-code .p { color: var(--ins-faint); }
/* Мини-календарь в плитке Schedule */
body.rentos-site .ins-cal {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 3px;
font-family: var(--ins-mono);
font-size: 0.5rem;
text-align: center;
color: var(--ins-faint);
}
body.rentos-site .ins-cal span {
padding: 3px 0;
border-radius: 4px;
}
body.rentos-site .ins-cal .on {
background: rgba(34, 211, 238, 0.18);
color: var(--ins-accent);
border: 1px solid rgba(34, 211, 238, 0.4);
}
/* Мини-диалог в плитке Actions */
body.rentos-site .ins-chat {
display: flex;
flex-direction: column;
gap: 5px;
font-size: 0.58rem;
}
body.rentos-site .ins-chat span {
padding: 5px 9px;
border-radius: 10px;
max-width: 85%;
}
body.rentos-site .ins-chat .in {
align-self: flex-start;
background: var(--ins-elevated-2);
color: var(--ins-dim);
border-bottom-left-radius: 3px;
}
body.rentos-site .ins-chat .out {
align-self: flex-end;
background: rgba(34, 211, 238, 0.16);
color: var(--ins-accent);
border-bottom-right-radius: 3px;
}
/* Строка USSD с курсором */
body.rentos-site .ins-ussd {
font-family: var(--ins-mono);
font-size: 0.72rem;
color: var(--ins-accent);
background: rgba(0, 0, 0, 0.30);
border: 1px solid var(--ins-border);
border-radius: var(--ins-radius-sm);
padding: 0.5rem 0.7rem;
}
body.rentos-site .ins-caret {
display: inline-block;
width: 0.5em;
height: 1em;
vertical-align: -0.15em;
background: var(--ins-accent);
animation: ins-blink 1.1s step-end infinite;
}
@keyframes ins-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* --------------------------------------------------------------------------
Цифры и преимущества
-------------------------------------------------------------------------- */
body.rentos-site .ins-check {
list-style: none;
padding: 0;
margin: 0;
}
body.rentos-site .ins-check li {
display: flex;
gap: 0.7rem;
align-items: flex-start;
padding: 0.55rem 0;
font-size: 0.76rem;
color: var(--ins-dim);
border-bottom: 1px solid var(--ins-border);
}
body.rentos-site .ins-check li svg {
flex: 0 0 auto;
width: 16px;
height: 16px;
margin-top: 0.2em;
color: var(--ins-success);
}
body.rentos-site .ins-stat {
padding: 1.2rem 1.3rem;
margin-bottom: 0.8rem;
}
body.rentos-site .ins-stat__value {
font-family: var(--ins-mono);
font-size: 1.5rem;
font-weight: 600;
color: var(--ins-text);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
body.rentos-site .ins-stat__label {
font-family: var(--ins-mono);
font-size: 0.58rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ins-faint);
margin-top: 0.35rem;
}
/* --------------------------------------------------------------------------
Финальный CTA с вращающейся градиентной рамкой
-------------------------------------------------------------------------- */
body.rentos-site .ins-cta {
position: relative;
text-align: center;
overflow: hidden;
background:
radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.16), transparent 60%),
radial-gradient(ellipse at 50% 100%, rgba(34, 211, 238, 0.12), transparent 60%);
}
@property --ins-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
body.rentos-site .ins-btn--conic {
position: relative;
background: var(--ins-bg-2);
color: var(--ins-text);
padding: 0.75rem 1.7rem;
font-size: 0.8rem;
z-index: 0;
}
body.rentos-site .ins-btn--conic::before {
content: "";
position: absolute;
inset: -1.5px;
z-index: -1;
border-radius: inherit;
background: conic-gradient(from var(--ins-angle), var(--ins-accent), var(--ins-accent-2), var(--ins-accent));
animation: ins-rotate 4s linear infinite;
}
@keyframes ins-rotate {
to { --ins-angle: 360deg; }
}
/* Запасной вариант там, где @property не поддержан: рамка не вращается,
но остаётся градиентной, а не пропадает. */
@supports not (background: conic-gradient(from var(--ins-angle), red, blue)) {
body.rentos-site .ins-btn--conic::before {
background: linear-gradient(120deg, var(--ins-accent), var(--ins-accent-2));
animation: none;
}
}
/* --------------------------------------------------------------------------
Подвал
-------------------------------------------------------------------------- */
body.rentos-site footer {
background: var(--ins-bg-2) !important;
border-top: 1px solid var(--ins-border);
}
body.rentos-site footer .widget-title {
font-family: var(--ins-mono);
font-size: 0.6rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ins-faint);
}
body.rentos-site footer address {
font-style: normal;
line-height: 1.7;
color: var(--ins-dim);
}
body.rentos-site footer a {
color: var(--ins-dim);
}
body.rentos-site footer a:hover {
color: var(--ins-accent);
}
body.rentos-site footer hr {
border-color: var(--ins-border);
opacity: 1;
}
/* Почта — обычная ссылка, не кнопка. Пока не отработал скрипт, видна
запись через (at); подсказка набрана моноширинным, чтобы не читалась
как опечатка. */
body.rentos-site .ins-mail {
font-family: var(--ins-mono);
font-size: 0.72rem;
}
body.rentos-site .ins-mail a {
color: var(--ins-accent);
text-decoration: none;
}
body.rentos-site .ins-mail a:hover {
text-decoration: underline;
}
body.rentos-site .ins-at {
color: var(--ins-faint);
}
/* --------------------------------------------------------------------------
Страницы About / Terms / Privacy — тот же шаблон default, открываются
через pjax. Без этих правил из тёмного лендинга проваливаешься в белое.
-------------------------------------------------------------------------- */
body.rentos-site .wrapper.bg-light,
body.rentos-site .wrapper.bg-gray,
body.rentos-site .wrapper.bg-soft-primary,
body.rentos-site header.bg-soft-primary {
background: transparent !important;
}
body.rentos-site .accent-header,
body.rentos-site .accent-overlay {
background: linear-gradient(180deg, rgba(139, 92, 246, 0.16), transparent) !important;
}
body.rentos-site .wrapper.angled:after,
body.rentos-site .wrapper.angled:before {
display: none;
}
body.rentos-site .card {
background: var(--ins-elevated);
border: 1px solid var(--ins-border);
color: var(--ins-dim);
}
/* Текст страниц приходит из базы готовым HTML — оформляем его целиком,
а не по классам, которых в нём нет. */
body.rentos-site .ins-prose {
font-size: 0.8rem;
line-height: 1.8;
color: var(--ins-dim);
}
body.rentos-site .ins-prose h1,
body.rentos-site .ins-prose h2,
body.rentos-site .ins-prose h3,
body.rentos-site .ins-prose h4 {
margin: 2rem 0 0.8rem;
font-size: 1rem;
}
body.rentos-site .ins-prose p,
body.rentos-site .ins-prose li {
color: var(--ins-dim);
}
body.rentos-site .ins-prose strong {
color: var(--ins-text);
}
body.rentos-site .ins-prose hr {
border-color: var(--ins-border);
opacity: 1;
}
/* --------------------------------------------------------------------------
Мобильные
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
/* Верхняя полоса на телефоне: логотип, коды языков и гамбургер. Кнопки
входа переехали в шторку (см. modules/header.block.tpl), иначе всё
вчетвером не помещалось и выдавливалось за край. */
body.rentos-site .navbar-brand img {
max-height: 24px;
}
body.rentos-site .navbar .container {
padding-left: 0.9rem;
padding-right: 0.9rem;
}
body.rentos-site .navbar-other .navbar-nav > .nav-item + .nav-item {
margin-left: 0.25rem;
}
body.rentos-site .ins-langs {
margin-left: 0.15rem;
gap: 0;
}
body.rentos-site .ins-langs a {
padding: 0.2rem 0.3rem;
font-size: 0.58rem;
}
/* Выезжающая шторка. В bootstrap.css у неё padding-left: 1.5rem и
padding-right: 0 — содержимое упиралось в правый край, и кнопки во
всю ширину выглядели обрезанными. Фон приводим к нашей палитре:
у шаблона он #1e2228, не из нашей темы. */
body.rentos-site .offcanvas-nav {
/* Корневой кегль в шаблоне 20px, поэтому rem крупнее привычного:
14rem это 280px. Было 17rem — шторка занимала почти весь экран.
Растянута на всю высоту экрана, а пункты начинаются ниже шапки
за счёт padding-top: сама шапка рисуется поверх (z-index выше),
поэтому верх шторки аккуратно уходит под неё. */
top: 0;
bottom: 0;
padding-top: 97px;
padding-right: 1.25rem;
padding-left: 1.25rem;
width: 14rem;
left: -14rem;
background: var(--ins-bg-2);
border-right: 1px solid var(--ins-border);
}
body.rentos-site .offcanvas-nav.open {
left: 0;
}
/* Sandbox прячет открытую шторку, как только шапка переходит в липкое
состояние: .navbar.fixed .offcanvas-nav.open получает display:none.
Из-за этого меню исчезало при прокрутке. */
body.rentos-site .navbar.fixed .offcanvas-nav.open,
body.rentos-site .banner--stick .offcanvas-nav.open {
display: block !important;
}
/* Липкая шапка — это КОПИЯ навбара целиком, вместе со своей шторкой.
Переключатель открывает обе разом: на экране появлялись два крестика,
а копия вдобавок лежит внутри position: fixed клона, из-за чего
ехала вместе со страницей. Копию убираем — остаётся один оригинал в
, у которого предков с transform и фильтрами нет, поэтому
его position: fixed считается от окна, как и задумано. */
body.rentos-site .banner--clone .offcanvas-nav {
display: none !important;
}
/* Шторку скрипт переносит из навбара в корень документа, поэтому
селектор без header. Уровень НИЖЕ шапки (1040): теперь это соседние
элементы, и шапка честно рисуется поверх. */
body.rentos-site .offcanvas-nav {
position: fixed !important;
z-index: 1030;
}
/* Навбар обязан рисоваться ПОВЕРХ шторки. У .navbar в шаблоне
z-index: 1020, у шторки 1041 — меню наезжало на шапку сверху.
Теперь шапка выше, и шторка уходит под неё: небольшая неточность в
оценке её высоты перестаёт быть заметной. */
body.rentos-site header .navbar {
z-index: 1070;
}
body.rentos-site .offcanvas-header img {
max-height: 26px;
width: auto;
}
body.rentos-site .offcanvas-nav .navbar-nav .nav-link {
padding-top: 0.55rem;
padding-bottom: 0.55rem;
color: var(--ins-dim);
}
/* После переноса шторки из навбара правила .navbar-dark на неё больше
не действуют, и пункты подхватывали общий цвет ссылок — акцентный
циан. Возвращаем спокойный. */
body.rentos-site .offcanvas-nav .navbar-nav .nav-link:hover,
body.rentos-site .offcanvas-nav .navbar-nav .nav-link:focus {
color: var(--ins-accent);
}
/* Кнопки внутри шторки — во всю её ширину. */
body.rentos-site .offcanvas-nav .ins-btn {
width: 100%;
justify-content: center;
}
body.rentos-site .ins-flow {
grid-template-columns: 1fr;
}
body.rentos-site .ins-flow__wires {
display: none;
}
body.rentos-site .ins-bento {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767.98px) {
/* Блюр на мобильных GPU дорог; фон и рамка остаются, вид почти тот же. */
body.rentos-site .ins-glass {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: rgba(255, 255, 255, 0.05);
}
body.rentos-site .navbar.fixed,
body.rentos-site .banner--stick {
background: var(--ins-bg) !important;
}
body.rentos-site .ins-terminal {
display: none;
}
body.rentos-site .ins-bento {
grid-template-columns: 1fr;
}
body.rentos-site .ins-tile--wide {
grid-column: span 1;
}
}
/* --------------------------------------------------------------------------
Уважение к prefers-reduced-motion
Движение выключается целиком: бегущий блик, вращение рамки, курсор,
появление секций. Статика остаётся полностью читаемой.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
body.rentos-site header.ins-stuck .navbar,
body.rentos-site .ins-divider::after,
body.rentos-site .ins-btn--conic::before,
body.rentos-site .ins-flow__wires .ins-wire-pulse,
body.rentos-site .ins-caret {
animation: none;
}
body.rentos-site .ins-flow__wires .ins-wire-pulse {
display: none;
}
body.rentos-site .ins-caret {
opacity: 1;
}
body.rentos-site .ins-reveal {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
body.rentos-site .ins-glass,
body.rentos-site .ins-tile,
body.rentos-site .ins-btn {
transition: none;
}
}
/* --------------------------------------------------------------------------
Тарифы
Карточка построена на .ins-glass, поэтому стекло и блюр берутся оттуда же,
что и у остальных плиток — отдельного «стеклянного» рецепта здесь нет
намеренно, иначе секция начала бы жить своей жизнью.
Выделенная карточка добавляет к стеклу три вещи: подкрашенную подложку из
двух акцентов, кольцо по контуру и размытое пятно за спиной. Пятно
нарисовано ::after с radial-gradient и filter: blur — это единственное
место на лендинге, где размытие идёт по элементу, а не по фону, поэтому
оно выключено на телефонах вместе с остальным блюром.
На мобильном карточки не складываются в столбик, а листаются вбок: три
тарифа в столбик — это полтора экрана вертикальной прокрутки, на которых
их невозможно сравнить. Ряд с scroll-snap показывает соседнюю карточку
краем, и сразу видно, что листать есть куда.
-------------------------------------------------------------------------- */
body.rentos-site .ins-plans {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
align-items: stretch;
}
body.rentos-site .ins-plan {
position: relative;
display: flex;
flex-direction: column;
padding: 1.5rem 1.4rem 1.4rem;
}
body.rentos-site .ins-plan__name {
font-family: var(--ins-mono);
font-size: 0.8rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ins-dim);
margin: 0 0 0.7rem;
}
/* Высота блока цены зафиксирована, чтобы разделители во всех карточках шли
по одной линии: «Бесплатно» набрано мельче числа, и без этого список у
Free начинался выше, чем у соседей. */
body.rentos-site .ins-plan__price {
display: flex;
align-items: baseline;
gap: 0.3rem;
min-height: 2.25rem;
line-height: 1;
color: var(--ins-text);
}
body.rentos-site .ins-plan__cur {
font-family: var(--ins-mono);
font-size: 0.95rem;
color: var(--ins-dim);
}
body.rentos-site .ins-plan__num {
font-family: var(--ins-display);
font-size: 2.25rem;
font-variant-numeric: tabular-nums;
}
body.rentos-site .ins-plan__free {
font-family: var(--ins-display);
font-size: 1.6rem;
}
body.rentos-site .ins-plan__per {
font-size: 0.85rem;
color: var(--ins-faint);
margin-top: 0.4rem;
min-height: 1.2em;
}
body.rentos-site .ins-plan__list {
list-style: none;
margin: 1rem 0 1.2rem;
padding: 0.9rem 0 0;
border-top: 1px solid var(--ins-border);
}
body.rentos-site .ins-plan__list li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: 0.3rem 0;
font-size: 0.82rem;
color: var(--ins-dim);
}
body.rentos-site .ins-plan__list b {
font-weight: 500;
color: var(--ins-text);
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
/* Знак бесконечности вместо надписи «Без ограничений».
Надпись занимала полстроки, подписи слева переносились на вторую, и
карточка Max вырастала на добрую сотню пикселей. Соседние карточки
тянулись за ней по высоте — отсюда пустое поле под списком у Free.
Полный текст остался в атрибуте title, его видно при наведении. */
body.rentos-site .ins-plan__inf {
font-size: 1.2em;
line-height: 1;
color: var(--ins-accent);
}
body.rentos-site .ins-plan__cta {
margin-top: auto;
justify-content: center;
width: 100%;
}
/* Выделенный тариф */
/* Свечение сделано тенями, а не размытым пятном под карточкой.
Пятно здесь работать не может в принципе: .ins-glass задаёт
backdrop-filter, а он создаёт контекст наложения. Потомок с z-index: -1
внутри такого контекста уходит за фон САМОЙ карточки, а не за её
пределы — блик существовал, был посчитан и размыт, но его не было
видно ни одного пикселя. Со стороны это читалось как «свечение
обрезано по нижней границе».
Тень рисуется за границами блока и контекстом наложения не
ограничена, поэтому две мягкие тени — циановая ближе, фиолетовая
дальше — дают тот же эффект без подводных камней. */
body.rentos-site .ins-plan--featured {
background:
linear-gradient(180deg, rgba(34, 211, 238, 0.10), rgba(139, 92, 246, 0.05)),
var(--ins-elevated);
border-color: rgba(34, 211, 238, 0.40);
box-shadow:
0 0 0 1px rgba(34, 211, 238, 0.16),
0 18px 50px -18px rgba(34, 211, 238, 0.42),
0 40px 110px -40px rgba(139, 92, 246, 0.55);
}
/* .ins-glass:hover перебивает тень выделенной карточки — у него на один
класс больше. Без этой строки при наведении фиолетовый ореол пропадал. */
body.rentos-site .ins-plan--featured:hover {
border-color: rgba(34, 211, 238, 0.55);
box-shadow:
0 0 0 1px rgba(34, 211, 238, 0.22),
0 18px 50px -18px rgba(34, 211, 238, 0.55),
0 44px 120px -40px rgba(139, 92, 246, 0.65);
}
body.rentos-site .ins-plan__badge {
position: absolute;
top: -0.75rem;
left: 50%;
transform: translateX(-50%);
padding: 0.3rem 0.85rem;
border-radius: 999px;
font-family: var(--ins-mono);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
white-space: nowrap;
color: #04121A;
background: linear-gradient(90deg, var(--ins-accent), var(--ins-accent-2));
box-shadow: 0 8px 24px -10px rgba(34, 211, 238, 0.9);
}
body.rentos-site .ins-plans__note {
margin: 2rem auto 0;
max-width: 40em;
text-align: center;
font-size: 0.85rem;
color: var(--ins-faint);
}
@media (max-width: 991.98px) {
body.rentos-site .ins-plans {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
/* Ряд с прокруткой. Отрицательные поля выводят его на всю ширину экрана,
а padding возвращает воздух по краям — иначе первая и последняя
карточки липнут к границам. scroll-padding держит тот же отступ при
доводке скролла. */
body.rentos-site .ins-plans {
display: flex;
grid-template-columns: none;
margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
padding-block: 1.5rem 4rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
scrollbar-width: none;
}
/* -webkit-overflow-scrolling: touch отсюда убран сознательно.
Это устаревшее свойство включало инерционную прокрутку на старых
iOS, но оно же конфликтует с CSS scroll-snap: в Safari прокрутка
переставала «залипать» на карточках и вела себя как обычная. На
нынешних iOS инерция и так включена по умолчанию, так что свойство
не нужно, а вредит. Если оно когда-нибудь вернётся в этот файл —
залипание снова пропадёт. */
body.rentos-site .ins-plans::-webkit-scrollbar {
display: none;
}
/* 82% ширины — чтобы край соседней карточки всегда торчал и было видно,
что ряд листается. */
/* scroll-snap-stop: always — то самое «липкое» поведение: один смах
перелистывает ровно одну карточку, а не пролетает мимо двух. */
body.rentos-site .ins-plan {
flex: 0 0 82%;
scroll-snap-align: center;
scroll-snap-stop: always;
}
/* На узкой карточке подписи упирались в значение и переносились на
вторую строку — строки становились разной высоты, а карточка росла.
Значение подобрано в браузере при экране 390px, а не выведено
формулой: посчитать нужную ширину мешает сам flex — он ужимает
подпись, и любое измерение возвращает ширину, равную доступной.
Поэтому кегль перебирался вниз с проверкой, сколько строк из
восемнадцати переносится: 0.82 и 0.8 — две, 0.78 — одна, 0.76 —
ни одной. Берём 0.76: следующие два шага вниз тоже чистые, значит
запас есть и на случай других формулировок. */
body.rentos-site .ins-plan {
padding: 1.1rem 1.1rem 1rem;
}
/* Межстрочный интервал строк списка ужат до 1.35 — при обычных 1.6
каждая строка несла около десяти пикселей воздуха, которого на
телефоне не видно, а высоту он давал заметную. Кегль не трогаем:
0.76rem подобран так, чтобы ни одна подпись не переносилась, и
уменьшать его дальше значит терять читаемость ради тех же пикселей,
которые дешевле снять с интервалов. */
body.rentos-site .ins-plan__list li {
gap: 0.5rem;
font-size: 0.76rem;
line-height: 1.35;
padding: 0.22rem 0;
}
body.rentos-site .ins-plan__name {
margin-bottom: 0.45rem;
}
body.rentos-site .ins-plan__num {
font-size: 1.9rem;
}
body.rentos-site .ins-plan__free {
font-size: 1.35rem;
}
body.rentos-site .ins-plan__price {
min-height: 1.9rem;
}
body.rentos-site .ins-plan__per {
margin-top: 0.25rem;
font-size: 0.78rem;
}
body.rentos-site .ins-plan__list {
margin: 0.75rem 0 0.9rem;
padding-top: 0.7rem;
}
/* Ряд с прокруткой обрезает тени по своим границам: overflow-x: auto
делает вычисленный overflow-y тоже auto, а не visible — обойти это
нельзя, так устроено само свойство. Поэтому свечение на телефоне
делаем короче и даём ряду поле снизу больше, чем его размах: 26+60−30
≈ 56px тени против 80px поля. Иначе ореол срезало ровно по карточке. */
body.rentos-site .ins-plan--featured,
body.rentos-site .ins-plan--featured:hover {
box-shadow:
0 0 0 1px rgba(34, 211, 238, 0.16),
0 12px 30px -12px rgba(34, 211, 238, 0.40),
0 26px 60px -30px rgba(139, 92, 246, 0.55);
}
/* Поле снизу уже держит воздух под карточками, поэтому отступ подписи
здесь почти убран — иначе между рядом и текстом зияла бы дыра. */
body.rentos-site .ins-plans__note {
margin-top: 0.25rem;
}
}
@media (prefers-reduced-motion: reduce) {
body.rentos-site .ins-plans {
scroll-behavior: auto;
}
}