/* LMD Systems — тёмная технологичная тема (дочерняя от lmd21).
Идея «холодный коридор»: цвета и свет из дата-центра — глубокий тёмно-синий, голубой светодиод из логотипа, зелёный только как статус.
Панели — стекло с тонкой голубоватой линией; единственный эффектный момент — «герой» главной (фото коридора, летящие огни, терминал).
Подключается из includes/head.tpl после стилей родителя и формы заказа не перебивается: правила для неё идут через html #order-standard_cart. */
/* ---------- Палитра и шрифты ---------- */
:root {
--lmd-ink: #050a18; /* фон страницы */
--lmd-rack: #0a1230; /* поверхности */
--lmd-panel: #0f1a3d; /* приподнятые панели */
--lmd-panel-2: #16265a;
--lmd-line: rgba(96, 156, 255, .20); /* тонкая структура */
--lmd-line-strong: rgba(60, 200, 255, .42);
--lmd-text: #e4ebff;
--lmd-muted: #8da2cf;
--lmd-cyan: #29c7f7; /* светодиод логотипа */
--lmd-cyan-soft: rgba(41, 199, 247, .14);
--lmd-blue: #3a6bff;
--lmd-green: #35f0a0; /* только статусы: активно, оплачено */
--lmd-amber: #ffb224;
--lmd-red: #ff5c72;
--lmd-font-display: "Chakra Petch", "Open Sans", system-ui, sans-serif;
--lmd-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
/* переменные Nexus/формы заказа из custom.css родителя — тоже тёмные, чтобы всё, что их использует, не осталось светлым */
--bg: var(--lmd-ink);
--bg-muted: var(--lmd-rack);
--bg-lifted: var(--lmd-panel);
--bg-accented: var(--lmd-panel-2);
--text: var(--lmd-text);
--text-muted: var(--lmd-muted);
--border: var(--lmd-line);
--border-muted: var(--lmd-line);
}
html { color-scheme: dark; }
body, body.primary-bg-color {
background-color: var(--lmd-ink);
background-image:
radial-gradient(1100px 560px at 85% -8%, rgba(41, 199, 247, .11), transparent 62%),
radial-gradient(900px 520px at -8% 28%, rgba(70, 90, 255, .12), transparent 58%);
background-attachment: fixed;
color: var(--lmd-text);
}
a { color: var(--lmd-cyan); }
a:hover, a:focus { color: #8fe6ff; text-decoration: none; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #fff; font-family: var(--lmd-font-display); letter-spacing: .005em; }
.text-muted, .text-secondary, small, .small { color: var(--lmd-muted) !important; }
hr { border-top-color: var(--lmd-line); }
::selection { background: rgba(41, 199, 247, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--lmd-cyan); outline-offset: 2px; }
/* утилиты Bootstrap, которые родитель использует с белым фоном */
.bg-white, .bg-light { background-color: var(--lmd-rack) !important; color: var(--lmd-text); }
.border, .border-top, .border-bottom { border-color: var(--lmd-line) !important; }
/* ---------- Шапка ---------- */
/* шапка выше всего контента: у неё и у хлебных крошек стекло (backdrop-filter) — каждый такой блок отдельный «слой», и без этого выпадающие меню
оказывались под следующими блоками страницы. 1040 ниже окон (1050) и всплывающих подсказок (1070). */
#header, .header { background: transparent; position: relative; z-index: 1040; }
.header .topbar { background: rgba(5, 10, 24, .62); border-bottom: 1px solid var(--lmd-line); color: var(--lmd-muted); }
.header .topbar .btn, .header .topbar a { color: var(--lmd-muted); }
.header .topbar .btn:hover, .header .topbar a:hover { color: #fff; }
.header .navbar.navbar-light { background: rgba(5, 10, 24, .42); border-bottom: 0; backdrop-filter: blur(10px); }
.header .main-navbar-wrapper {
background: linear-gradient(180deg, rgba(14, 24, 58, .72), rgba(8, 15, 38, .72));
backdrop-filter: blur(10px);
border-top: 1px solid var(--lmd-line);
border-bottom: 1px solid var(--lmd-line);
box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
position: relative;
}
/* тонкая светящаяся линия под меню */
.header .main-navbar-wrapper::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
background: linear-gradient(90deg, transparent, var(--lmd-cyan), transparent); opacity: .55;
}
.navbar-brand .logo-img { filter: drop-shadow(0 0 14px rgba(41, 199, 247, .35)); max-height: 56px; }
.navbar-light .navbar-nav .nav-link, .main-navbar-wrapper .nav-link, .main-navbar-wrapper .navbar-nav > li > a {
color: #c4d2f5; font-family: var(--lmd-font-display); font-weight: 500; letter-spacing: .02em;
transition: color .2s ease, text-shadow .2s ease;
}
.navbar-light .navbar-nav .nav-link:hover, .main-navbar-wrapper .nav-link:hover, .main-navbar-wrapper .navbar-nav > li > a:hover,
.navbar-light .navbar-nav .active > .nav-link { color: #fff; text-shadow: 0 0 14px rgba(41, 199, 247, .8); }
.navbar-toggler, .navbar-light .navbar-toggler { border-color: var(--lmd-line); color: #fff; }
.search .form-control, .search .btn { background: rgba(6, 12, 32, .8); border-color: var(--lmd-line); color: var(--lmd-text); }
.cart-btn { color: #c4d2f5; }
.cart-btn:hover { color: #fff; }
#cartItemCount { background: var(--lmd-cyan); color: #04101f; font-family: var(--lmd-font-mono); }
.master-breadcrumb { background: rgba(5, 10, 24, .5); border-bottom: 1px solid var(--lmd-line); backdrop-filter: blur(8px); }
.breadcrumb { background: transparent; }
.breadcrumb-item, .breadcrumb-item a { color: var(--lmd-muted); }
.breadcrumb-item.active { color: #fff; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--lmd-line-strong); }
/* выпадающие меню, поповеры, подсказки */
.dropdown-menu, .popover, .multiselect-container {
background: var(--lmd-panel); border: 1px solid var(--lmd-line-strong); color: var(--lmd-text);
box-shadow: 0 18px 50px rgba(0, 0, 0, .55); border-radius: 10px;
}
.dropdown-item, .multiselect-container > li > a > label { color: var(--lmd-text); }
.dropdown-item:hover, .dropdown-item:focus, .multiselect-container > li > a:hover { background: var(--lmd-cyan-soft); color: #fff; }
/* у пунктов меню шапки в теме родителя свой тёмно-серый цвет (#444) — на тёмной панели не читается */
html .dropdown-menu .dropdown-item, html .dropdown-menu > li > a, html .navbar .dropdown-menu a { color: var(--lmd-text); }
html .dropdown-menu .dropdown-item:hover, html .dropdown-menu .dropdown-item:focus, html .dropdown-menu .dropdown-item.active, html .navbar .dropdown-menu a:hover { background: var(--lmd-cyan-soft); color: #fff; }
html .dropdown-menu .dropdown-header { color: var(--lmd-muted); }
.dropdown-divider { border-color: var(--lmd-line); }
.popover-header { background: rgba(255, 255, 255, .04); border-color: var(--lmd-line); color: #fff; }
.popover-body { color: var(--lmd-text); }
.tooltip-inner { background: var(--lmd-panel-2); border: 1px solid var(--lmd-line-strong); }
/* ---------- Панели, карточки ---------- */
.card, .panel, .list-group-item, .tile {
background: linear-gradient(180deg, rgba(22, 38, 90, .55), rgba(10, 18, 48, .7));
border: 1px solid var(--lmd-line); color: var(--lmd-text);
}
.card, .panel { border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04); }
.card-header, .card-footer, .panel-heading, .panel-footer { background: rgba(255, 255, 255, .03); border-color: var(--lmd-line); color: #fff; }
.card-title, .card-header .card-title { color: #fff; }
.card-body { color: var(--lmd-text); }
.list-group-item { border-color: var(--lmd-line); color: #c4d2f5; }
a.list-group-item:hover, .list-group-item-action:hover, .list-group-item.active, a.list-group-item.active {
background: var(--lmd-cyan-soft); color: #fff; border-color: var(--lmd-line-strong);
}
.sidebar .card-header { font-family: var(--lmd-font-display); }
.tiles .tile { background-color: transparent; border-right-color: var(--lmd-line); color: var(--lmd-text); }
.tiles .tile:hover { background: var(--lmd-cyan-soft); }
/* цветные «акценты» верхней грани карточек родителя — оставлены, но светятся */
[class*="card-accent-"] { box-shadow: 0 -1px 0 0 currentColor; }
/* ---------- Формы ---------- */
.form-control, .custom-select, select.form-control, textarea.form-control, .input-group-text, .bootstrap-select .dropdown-toggle {
background-color: rgba(6, 12, 32, .82); border: 1px solid var(--lmd-line); color: var(--lmd-text); border-radius: 8px;
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.input-group-text { color: var(--lmd-muted); background-color: rgba(255, 255, 255, .04); }
.form-control:focus, .custom-select:focus {
background-color: rgba(6, 12, 32, .96); border-color: var(--lmd-cyan); color: #fff;
box-shadow: 0 0 0 3px rgba(41, 199, 247, .22);
}
.form-control:disabled, .form-control[readonly] { background-color: rgba(255, 255, 255, .04); color: var(--lmd-muted); }
.form-control::placeholder { color: #5f74a0; }
label, .col-form-label, .form-check-label { color: #c4d2f5; }
input:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #0a1230 inset; -webkit-text-fill-color: #e4ebff; caret-color: #fff; }
.form-text, .help-block { color: var(--lmd-muted); }
.custom-control-label::before { background-color: rgba(6, 12, 32, .9); border-color: var(--lmd-line-strong); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--lmd-cyan); border-color: var(--lmd-cyan); }
.iradio_square-blue, .icheckbox_square-blue { filter: hue-rotate(0deg) brightness(.9) contrast(1.1); }
/* ---------- Кнопки ---------- */
.btn { border-radius: 8px; font-family: var(--lmd-font-display); font-weight: 600; letter-spacing: .02em; transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background-color .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active {
background: linear-gradient(135deg, #17b6ee 0%, var(--lmd-blue) 100%); border: 0; color: #fff;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset, 0 8px 24px rgba(41, 199, 247, .30);
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.12); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 10px 30px rgba(41, 199, 247, .5); color: #fff; }
.btn-success { background: linear-gradient(135deg, #14c98a, #0e9f6e); border: 0; color: #03150e; box-shadow: 0 8px 22px rgba(53, 240, 160, .22); }
.btn-success:hover { filter: brightness(1.1); color: #03150e; }
.btn-danger { background: linear-gradient(135deg, #ff5c72, #d6264a); border: 0; }
.btn-warning { background: linear-gradient(135deg, #ffc03a, #f08a00); border: 0; color: #1d1200; }
.btn-info { background: linear-gradient(135deg, #3fd0ff, #2796e8); border: 0; color: #031322; }
.btn-default, .btn-secondary, .btn-light {
background: rgba(255, 255, 255, .05); border: 1px solid var(--lmd-line); color: #dbe5ff;
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover { background: var(--lmd-cyan-soft); border-color: var(--lmd-line-strong); color: #fff; }
.btn-outline-primary { border: 1px solid var(--lmd-line-strong); color: var(--lmd-cyan); background: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--lmd-cyan-soft); border-color: var(--lmd-cyan); color: #fff; box-shadow: 0 0 22px rgba(41, 199, 247, .3); }
.btn-link { color: var(--lmd-cyan); }
.btn:disabled, .btn.disabled { opacity: .45; }
/* ---------- Таблицы ---------- */
.table { color: var(--lmd-text); }
.table th, .table td { border-color: var(--lmd-line); }
.table thead th { color: var(--lmd-muted); background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--lmd-line-strong); font-family: var(--lmd-font-display); font-weight: 600; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .02); }
.table-hover tbody tr:hover { background-color: rgba(41, 199, 247, .07); color: #fff; }
.table-list > tbody > tr > td, .table-list > thead > tr > th { border-color: var(--lmd-line); }
.dataTables_wrapper, .dataTables_info, .dataTables_length label, .dataTables_filter label { color: var(--lmd-muted); }
.page-link { background: rgba(255, 255, 255, .04); border-color: var(--lmd-line); color: var(--lmd-cyan); }
.page-item.active .page-link { background: var(--lmd-cyan); border-color: var(--lmd-cyan); color: #04101f; }
.page-item.disabled .page-link { background: rgba(255, 255, 255, .02); color: #5f74a0; }
/* ---------- Статусы, метки, уведомления ---------- */
.alert { background: rgba(255, 255, 255, .04); border: 1px solid var(--lmd-line); border-left-width: 3px; color: var(--lmd-text); border-radius: 8px; }
.alert-info { border-left-color: var(--lmd-cyan); background: rgba(41, 199, 247, .08); }
.alert-success { border-left-color: var(--lmd-green); background: rgba(53, 240, 160, .07); }
.alert-warning { border-left-color: var(--lmd-amber); background: rgba(255, 178, 36, .08); }
.alert-danger { border-left-color: var(--lmd-red); background: rgba(255, 92, 114, .09); }
.alert a { color: #8fe6ff; }
.badge-info { background: var(--lmd-cyan); color: #04101f; }
.label { font-family: var(--lmd-font-display); letter-spacing: .03em; border-radius: 6px; }
.label.status-active, .label-success, .label.paid, .label.status-paid, .label.status-completed { background: rgba(53, 240, 160, .16); color: var(--lmd-green); border: 1px solid rgba(53, 240, 160, .4); }
.label.status-refunded, .label.status-payment-pending { background: rgba(41, 199, 247, .14); color: var(--lmd-cyan); border: 1px solid rgba(41, 199, 247, .4); }
.label.status-collections { background: rgba(255, 178, 36, .14); color: var(--lmd-amber); border: 1px solid rgba(255, 178, 36, .4); }
.label.status-draft { background: rgba(255, 255, 255, .06); color: var(--lmd-muted); border: 1px solid var(--lmd-line); }
.label.status-pending, .label.status-unpaid, .label-warning { background: rgba(255, 178, 36, .14); color: var(--lmd-amber); border: 1px solid rgba(255, 178, 36, .4); }
.label.status-suspended, .label.status-cancelled, .label-danger, .label.status-terminated, .label.unpaid { background: rgba(255, 92, 114, .14); color: var(--lmd-red); border: 1px solid rgba(255, 92, 114, .4); }
.progress { background: rgba(255, 255, 255, .07); border-radius: 999px; }
.progress-bar { background: linear-gradient(90deg, var(--lmd-blue), var(--lmd-cyan)); }
/* ---------- Вкладки, модальные окна ---------- */
.nav-tabs { border-bottom-color: var(--lmd-line); }
.nav-tabs .nav-link { color: var(--lmd-muted); border-color: transparent; font-family: var(--lmd-font-display); }
.nav-tabs .nav-link:hover { color: #fff; border-color: transparent transparent var(--lmd-line-strong); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: rgba(41, 199, 247, .08); color: #fff; border-color: var(--lmd-line) var(--lmd-line) transparent; }
.nav-pills .nav-link.active { background: var(--lmd-cyan-soft); color: #fff; box-shadow: inset 0 0 0 1px var(--lmd-line-strong); }
.modal-content { background: var(--lmd-panel); border: 1px solid var(--lmd-line-strong); color: var(--lmd-text); border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .65); }
.modal-header, .modal-footer { border-color: var(--lmd-line); }
.modal-backdrop.show { opacity: .72; }
.close { color: #fff; text-shadow: none; opacity: .7; }
.close:hover { color: #fff; opacity: 1; }
/* ---------- Главная: плитки под «героем» ---------- */
#main-body { position: relative; }
.card-columns.home { column-count: 3; }
.card-columns.home .card { text-align: left; }
.card-columns.home .card-body { text-align: left !important; }
.card-columns.home .pricing-card-title { font-size: 1.25rem; margin-bottom: .6rem; }
.card-columns.home .card p { color: var(--lmd-muted); }
.action-icon-btns a {
background: linear-gradient(180deg, rgba(22, 38, 90, .5), rgba(10, 18, 48, .65));
border: 1px solid var(--lmd-line); color: #c4d2f5; border-radius: 12px; position: relative; overflow: hidden;
}
.action-icon-btns a:hover { color: #fff; border-color: var(--lmd-line-strong); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.action-icon-btns .ico-container i { color: var(--lmd-cyan); filter: drop-shadow(0 0 10px rgba(41, 199, 247, .5)); }
h2.text-center.m-4 { font-size: 1.5rem; position: relative; }
/* ---------- «Герой» главной ----------
Без собственного фона: заголовок, поиск домена и терминал лежат на общем фоне страницы (см. «Фон страниц» ниже), как контент остальных страниц. */
.lmd-hero { position: relative; }
.lmd-hero__inner { padding-top: 76px; padding-bottom: 84px; }
.lmd-hero__title {
font-family: var(--lmd-font-display); font-weight: 700; color: #fff; margin: 0 0 18px;
font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -.01em; max-width: 15em;
text-shadow: 0 0 40px rgba(41, 199, 247, .25);
}
.lmd-hero__lead { max-width: 34em; color: #b9c9ee; font-size: 1.1rem; line-height: 1.55; margin: 0 0 30px; }
.lmd-hero__label { font-size: 1rem !important; color: #dbe5ff; text-align: left !important; margin: 0 0 10px !important; font-weight: 600; }
.lmd-hero__search.home-domain-search { background: transparent !important; }
.lmd-hero__search .input-group-wrapper {
background: rgba(8, 15, 40, .72); border: 1px solid var(--lmd-line-strong); border-radius: 14px; padding: 8px; margin: 0 0 12px;
backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(41, 199, 247, .05), 0 22px 60px rgba(0, 0, 0, .5), 0 0 60px rgba(41, 199, 247, .10);
}
.lmd-hero__search .input-group-wrapper .form-control { background: transparent; border: 0; color: #fff; font-size: 1.05rem; }
.lmd-hero__search .input-group-wrapper .form-control:focus { box-shadow: none; }
.lmd-hero__search .tld-logos { color: var(--lmd-muted); }
.lmd-hero__search .tld-logos li { font-family: var(--lmd-font-mono); font-size: .8em; }
.lmd-hero__search .tld-logos img { width: 44px; filter: drop-shadow(0 0 8px rgba(41, 199, 247, .3)); }
/* терминал со списком групп продуктов */
.lmd-term {
background: rgba(5, 10, 26, .78); border: 1px solid var(--lmd-line-strong); border-radius: 12px; overflow: hidden;
backdrop-filter: blur(10px); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 80px rgba(41, 199, 247, .10);
font-family: var(--lmd-font-mono); font-size: .86rem;
}
.lmd-term__bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--lmd-line); color: var(--lmd-muted); font-size: .78rem; background: rgba(255, 255, 255, .03); }
.lmd-led { width: 8px; height: 8px; border-radius: 50%; background: var(--lmd-cyan); box-shadow: 0 0 10px var(--lmd-cyan); animation: lmd-pulse 2.4s ease-in-out infinite; }
@keyframes lmd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.lmd-term__body { padding: 16px 18px 20px; min-height: 250px; }
.lmd-term__body p { margin: 0 0 7px; color: #d4e0ff; line-height: 1.5; }
.lmd-term__body a { color: var(--lmd-cyan); }
.lmd-term__body a::before { content: "> "; color: #4d6aa8; }
.lmd-term__body a:hover { color: #fff; text-shadow: 0 0 12px rgba(41, 199, 247, .8); }
.lmd-ps { color: var(--lmd-green); }
.lmd-dim { color: #6f86b8; font-size: .8em; display: block; margin: 1px 0 0 18px; }
.lmd-ln { opacity: 0; animation: lmd-ln-in .01s linear forwards; animation-delay: calc(.35s + var(--i, 0) * .22s); }
@keyframes lmd-ln-in { to { opacity: 1; } }
.lmd-cmd { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; animation: lmd-type .7s steps(12) .35s forwards; }
@keyframes lmd-type { to { width: 12ch; } }
.lmd-caret { display: inline-block; width: .55em; height: 1.05em; background: var(--lmd-cyan); vertical-align: text-bottom; animation: lmd-blink 1s steps(2) infinite; }
@keyframes lmd-blink { 50% { opacity: 0; } }
/* ---------- Баннер проверки домена (заказ) и форма заказа ---------- */
html #order-standard_cart .domain-checker-container { background: linear-gradient(135deg, rgba(22, 38, 90, .7), rgba(10, 18, 48, .85)); border: 1px solid var(--lmd-line-strong); box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 60px rgba(41, 199, 247, .08); }
html #order-standard_cart .domain-checker-container .domain-checker-bg { background-image: none; }
html #order-standard_cart .domain-checker-container .input-group-box { background: rgba(6, 12, 32, .85); border: 1px solid var(--lmd-line); }
html #order-standard_cart, html #order-standard_cart .cart-body { color: var(--lmd-text); }
html #order-standard_cart .header-lined h1, html #order-standard_cart .header-lined p { color: #fff; }
html #order-standard_cart .header-lined { border-bottom-color: var(--lmd-line); }
html #order-standard_cart .products .product, html #order-standard_cart .view-cart-items, html #order-standard_cart .order-summary, html #order-standard_cart .view-cart-items-header,
html #order-standard_cart .panel, html #order-standard_cart .card, html #order-standard_cart .sub-heading span, html #order-standard_cart .domain-promo-box, html #order-standard_cart .domain-pricing .tld-row {
background: linear-gradient(180deg, rgba(22, 38, 90, .5), rgba(10, 18, 48, .7)); border: 1px solid var(--lmd-line); color: var(--lmd-text);
}
html #order-standard_cart .products .product { border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .35); }
html #order-standard_cart .products .product header { background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--lmd-line); color: #fff; font-family: var(--lmd-font-display); }
html #order-standard_cart .products .product div.product-desc { color: var(--lmd-text); }
html #order-standard_cart .products .product footer { background: rgba(255, 255, 255, .02); border-top: 1px solid var(--lmd-line); }
html #order-standard_cart .products .product div.product-pricing { color: #fff; font-family: var(--lmd-font-display); }
html #order-standard_cart .products .product div.product-pricing span.price { color: var(--lmd-cyan); font-family: var(--lmd-font-mono); }
html #order-standard_cart .view-cart-items .item, html #order-standard_cart .view-cart-items-header { border-color: var(--lmd-line); }
html #order-standard_cart .sub-heading { border-top-color: var(--lmd-line); }
html #order-standard_cart .sub-heading span { color: #fff; background: var(--lmd-ink); border-color: var(--lmd-line); }
html #order-standard_cart .cart-sidebar .card-title, html #order-standard_cart .cart-sidebar .panel-title { color: #fff; }
html #order-standard_cart .cart-sidebar .list-group-item { background: transparent; }
html #order-standard_cart .field, html #order-standard_cart .form-control { background-color: rgba(6, 12, 32, .82); color: var(--lmd-text); border-color: var(--lmd-line); }
html #order-standard_cart .btn-order-now, html #order-standard_cart .btn-checkout, html #order-standard_cart #btnCompleteProductConfig { color: #fff; }
html #order-standard_cart .domain-lookup-result, html #order-standard_cart .suggested-domains .domain-suggestion, html #order-standard_cart .spotlight-tlds .spotlight-tld {
background: rgba(255, 255, 255, .03); border: 1px solid var(--lmd-line); color: var(--lmd-text);
}
html #order-standard_cart .spotlight-tld-container .spotlight-tld, html #order-standard_cart .spotlight-tlds .spotlight-tld { border-radius: 12px; }
/* ---------- Подвал ---------- */
.footer, #footer { background: linear-gradient(180deg, rgba(5, 10, 24, 0), rgba(3, 6, 16, .96) 40%); border-top: 1px solid var(--lmd-line); color: var(--lmd-muted); position: relative; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--lmd-cyan), transparent); opacity: .5; }
.footer .nav-link, .footer a { color: #9db2e0; }
.footer .nav-link:hover, .footer a:hover { color: #fff; }
.footer .btn { background: rgba(255, 255, 255, .05); color: #c4d2f5; border: 1px solid var(--lmd-line); }
.copyright { color: #6f86b8; }
/* ---------- Подсветка карточек под курсором (класс ставит js/lmd-fx.js) ---------- */
[data-lmd-glow] { position: relative; }
[data-lmd-glow]::after {
content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .25s ease;
background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(41, 199, 247, .85), transparent 62%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
[data-lmd-glow]:hover::after { opacity: 1; }
[data-lmd-glow]::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease;
background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(41, 199, 247, .10), transparent 60%);
}
[data-lmd-glow]:hover::before { opacity: 1; }
/* ---------- Узкие экраны ---------- */
@media (max-width: 991.98px) {
.lmd-hero__inner { padding-top: 44px; padding-bottom: 52px; }
.card-columns.home { column-count: 2; }
}
@media (max-width: 575.98px) {
.card-columns.home { column-count: 1; }
.lmd-hero__lead { font-size: 1rem; }
}
/* ---------- Уменьшенное движение ---------- */
@media (prefers-reduced-motion: reduce) {
.lmd-led, .lmd-caret { animation: none; }
.lmd-ln { opacity: 1; animation: none; }
.lmd-cmd { width: auto; animation: none; }
.btn { transition: none; }
}
/* ================= Доработка 2 ================= */
/* логотипы доменных зон в «герое» — тёмные на тёмном, инвертируем (цветные остаются цветными по оттенку) */
.lmd-hero__search .tld-logos img { filter: invert(1) hue-rotate(180deg) brightness(1.15) drop-shadow(0 0 8px rgba(41, 199, 247, .25)); }
/* плитки доменных зон на странице регистрации: логотип на светлой подложке (ему нужен светлый фон), остальное — тёмное стекло */
html #order-standard_cart .featured-tld, .featured-tld {
background: var(--lmd-panel) !important; border: 1px solid var(--lmd-line); border-radius: 12px; overflow: hidden;
box-shadow: 0 14px 40px rgba(0, 0, 0, .35); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.featured-tld:hover { transform: translateY(-3px); border-color: var(--lmd-line-strong); box-shadow: 0 22px 50px rgba(0, 0, 0, .5), 0 0 40px rgba(41, 199, 247, .12); }
.featured-tld .img-container { background: #eef3ff; }
/* «угловые скобки» HUD на плитках главной: отличают панель от обычной карточки, на наведении раскрываются */
.card-columns.home .card, .action-icon-btns a, .card-sidebar, .lmd-block--card, .tld-filters a.badge {
--lmd-b: rgba(41, 199, 247, .8); --lmd-bs: 12px;
border-radius: 6px;
background:
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 0 / var(--lmd-bs) 1px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 0 / 1px var(--lmd-bs) no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 0 / var(--lmd-bs) 1px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 0 / 1px var(--lmd-bs) no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 100% / var(--lmd-bs) 1px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 100% / 1px var(--lmd-bs) no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 100% / var(--lmd-bs) 1px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 100% / 1px var(--lmd-bs) no-repeat,
linear-gradient(180deg, rgba(22, 38, 90, .55), rgba(10, 18, 48, .7));
transition: background-size .25s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-columns.home .card:hover, .action-icon-btns a:hover, .card-sidebar:hover, .lmd-block--card:hover { --lmd-bs: 22px; }
/* заголовки секций главной: слева, со светодиодом и тонкой линией вместо центрированной строки */
h2.text-center.m-4 {
display: flex; align-items: center; gap: 14px; text-align: left !important; margin: 44px 0 22px !important; font-size: 1.3rem; letter-spacing: .01em;
}
h2.text-center.m-4::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--lmd-cyan); box-shadow: 0 0 12px var(--lmd-cyan); }
h2.text-center.m-4::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--lmd-line-strong), transparent); }
/* название тарифа в шапке карточки каталога (у родителя тёмно-серое на светлом) */
html #order-standard_cart .products .product header span,
html #order-standard_cart .products .product header span[id$="-name"] { color: #fff; font-family: var(--lmd-font-display); font-weight: 600; letter-spacing: .01em; }
html #order-standard_cart .products .product ul, html #order-standard_cart .products .product li { color: var(--lmd-text); }
html #order-standard_cart .products .product .product-desc span.feature-value, html #order-standard_cart .product-desc .feature-value { color: #fff; }
/* баннер cookies */
#gdpr-cookie-message {
background: rgba(10, 18, 48, .94) !important; border: 1px solid var(--lmd-line-strong); border-radius: 12px; color: var(--lmd-text);
backdrop-filter: blur(12px); box-shadow: 0 22px 60px rgba(0, 0, 0, .6);
}
#gdpr-cookie-message h4, #gdpr-cookie-message h5 { color: #fff; font-family: var(--lmd-font-display); }
#gdpr-cookie-message a { color: var(--lmd-cyan); }
#gdpr-cookie-message button, #gdpr-cookie-accept {
background: linear-gradient(135deg, #17b6ee, var(--lmd-blue)) !important; border: 0 !important; border-radius: 8px !important; color: #fff !important; font-family: var(--lmd-font-display);
}
#gdpr-cookie-advanced { background: rgba(255, 255, 255, .06) !important; border: 1px solid var(--lmd-line) !important; }
/* ================= Доработка 4 ================= */
/* ---------- Фон страниц: серверная по бокам, за колонкой контента почти не видна ----------
Один фиксированный слой на весь экран: фото коридора и поверх него тёмная «заливка» с окном по ширине колонки контента (.container = 1140px):
по бокам фото видно, а под контентом оно еле различимо (95% тёмного), поэтому текст читается так же хорошо, как на сплошном фоне.
Ширина окна — переменная --lmd-col (половина ширины контейнера + поля); на узких экранах контент занимает всю ширину, и фото остаётся лишь лёгкой текстурой. */
:root { --lmd-col: 585px; --lmd-fade: 56px; --lmd-side-dim: .22; --lmd-center-dim: .95; }
/* слой создаёт footer.tpl: . Порядок (снизу вверх): фото, мигающие огоньки (canvas, свет складывается со снимком), тёмная заливка с окном под колонкой контента. */
.lmd-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0); background: #050a18 url("../img/aisle.jpg?v=2026101410") center 40% / cover no-repeat; }
.lmd-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lmd-bg::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg,
rgba(5, 10, 24, var(--lmd-side-dim)) 0,
rgba(5, 10, 24, var(--lmd-side-dim)) calc(50% - var(--lmd-col) - var(--lmd-fade)),
rgba(5, 10, 24, var(--lmd-center-dim)) calc(50% - var(--lmd-col)),
rgba(5, 10, 24, var(--lmd-center-dim)) calc(50% + var(--lmd-col)),
rgba(5, 10, 24, var(--lmd-side-dim)) calc(50% + var(--lmd-col) + var(--lmd-fade)),
rgba(5, 10, 24, var(--lmd-side-dim)) 100%);
}
/* ---------- Боковое меню — в стиле плиток главной ----------
Рамка с «угловыми скобками» и подсветкой под курсором (общие правила выше), заголовок с иконкой-светодиодом, пункты со светящейся полосой слева. */
.card-sidebar { margin-bottom: 18px !important; }
.card-sidebar .card-header { background: transparent; border-bottom: 1px solid var(--lmd-line); padding: 12px 16px 11px; }
.card-sidebar .card-title {
display: flex; align-items: center; gap: 9px; margin: 0; font-size: .95rem; font-weight: 600; letter-spacing: .02em; color: #fff;
}
.card-sidebar .card-title > i:first-child { color: var(--lmd-cyan); filter: drop-shadow(0 0 8px rgba(41, 199, 247, .6)); width: 1.15em; text-align: center; flex: none; }
.card-sidebar .card-title .badge { margin-left: auto; float: none !important; }
.card-sidebar .card-title .card-minimise { margin-left: auto; float: none !important; color: var(--lmd-muted); font-size: .8em; transition: color .2s ease, transform .2s ease; cursor: pointer; }
.card-sidebar .card-title .badge + .card-minimise { margin-left: 8px; }
.card-sidebar .card-title .card-minimise:hover { color: var(--lmd-cyan); }
.card-sidebar .card-body { color: var(--lmd-text); }
.card-sidebar .card-footer { background: rgba(255, 255, 255, .02); border-top: 1px solid var(--lmd-line); }
.card-sidebar .list-group { border-radius: 0; }
.card-sidebar .list-group-item {
position: relative; padding: 0; background: transparent; border: 0; border-top: 1px solid rgba(96, 156, 255, .10); border-radius: 0; color: #b9c9ee;
transition: background-color .2s ease, color .2s ease;
}
.card-sidebar .list-group-item:first-child { border-top: 0; }
.card-sidebar .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
.card-sidebar .sidebar-menu-item-icon-wrapper { width: 1.25em; flex: none; text-align: center; color: #6f86b8; transition: color .2s ease, filter .2s ease; }
.card-sidebar .sidebar-menu-item-label { flex: 1; min-width: 0; font-size: .92rem; line-height: 1.35; }
.card-sidebar .sidebar-menu-item-badge .badge, .card-sidebar .list-group-item .badge {
background: rgba(41, 199, 247, .14); color: var(--lmd-cyan); border: 1px solid var(--lmd-line-strong); border-radius: 4px;
font-family: var(--lmd-font-mono); font-weight: 500; font-size: .74rem;
}
/* светящаяся полоса слева — как индикатор на стойке */
.card-sidebar .list-group-item::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--lmd-cyan); box-shadow: 0 0 12px var(--lmd-cyan);
transform: scaleY(0); transition: transform .2s ease;
}
.card-sidebar .list-group-item:hover, .card-sidebar .list-group-item:focus { background: linear-gradient(90deg, rgba(41, 199, 247, .15), rgba(41, 199, 247, 0) 88%); color: #fff; }
.card-sidebar .list-group-item.active, .card-sidebar .list-group-item.active:hover {
background: linear-gradient(90deg, rgba(41, 199, 247, .24), rgba(41, 199, 247, .02) 92%); color: #fff; border-color: rgba(96, 156, 255, .10);
}
.card-sidebar .list-group-item:hover::before, .card-sidebar .list-group-item.active::before { transform: scaleY(1); }
.card-sidebar .list-group-item:hover .sidebar-menu-item-icon-wrapper,
.card-sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper { color: var(--lmd-cyan); filter: drop-shadow(0 0 8px rgba(41, 199, 247, .65)); }
.card-sidebar .list-group-item.disabled { opacity: .45; }
.card-sidebar .list-group-item .fa-spin { color: var(--lmd-cyan); }
@media (prefers-reduced-motion: reduce) {
.card-sidebar .list-group-item, .card-sidebar .list-group-item::before, .card-sidebar .card-minimise { transition: none; }
}
/* ================= Форма заказа (standard_cart) — в стиле темы =================
Штатный CSS формы (templates/orderforms/standard_cart, править нельзя) красит блоки светлым, а текст — тёмно-серым. Здесь каждое такое правило
перекрыто: стеклянные панели, тонкие линии, светлый текст. Селекторы с префиксом «html» перебивают штатные при равной специфичности. */
/* панели и карточки внутри формы: общий вид «стекло» */
html #order-standard_cart .product-info,
html #order-standard_cart .summary-container,
html #order-standard_cart .cc-input-container,
html #order-standard_cart .apply-credit-container,
html #order-standard_cart .view-cart-tabs .tab-content,
html #order-standard_cart .view-cart-gateway-checkout,
html #order-standard_cart .domain-selection-options .option,
html #order-standard_cart .account-select-container div.account,
html #order-standard_cart .mc-promo,
html #order-standard_cart .mc-promo .body,
html #order-standard_cart .default-captcha,
html .domain-promo-box,
html .spotlight-tld,
html .suggested-domains .domain-lookup-suggestions-loader,
html .suggested-domains .domain-lookup-suggestions-message,
html .addon-renewals .service-renewal,
html .domain-renewals,
html .service-renewals,
html .product-recommendations .product-recommendation,
html .product-recommendations .product-recommendation .body,
html div.domainresults div:not(.btn-group) {
background: linear-gradient(180deg, rgba(22, 38, 90, .5), rgba(10, 18, 48, .7));
border-color: var(--lmd-line);
color: var(--lmd-text);
}
html #order-standard_cart .product-info { border: 1px solid var(--lmd-line); border-radius: 10px; }
html #order-standard_cart .summary-container { border-radius: 0 0 10px 10px; }
html #order-standard_cart .product-info .product-title, html #order-standard_cart .product-info .product-title span { color: #fff; font-family: var(--lmd-font-display); }
html #order-standard_cart .product-info li, html #order-standard_cart .product-info p, html #order-standard_cart .product-info span { color: var(--lmd-text); }
html #order-standard_cart .product-info .feature-value { color: #fff; }
html #order-standard_cart .order-summary { background: transparent; border-color: var(--lmd-line); color: var(--lmd-text); }
html #order-standard_cart .order-summary h2 { background: linear-gradient(135deg, rgba(23, 182, 238, .85), rgba(58, 107, 255, .85)); color: #fff; font-family: var(--lmd-font-display); }
html #order-standard_cart .order-summary .summary-totals, html #order-standard_cart .order-summary .subtotal, html #order-standard_cart .order-summary .bordered-totals { border-color: var(--lmd-line); }
html #order-standard_cart .order-summary .total-due-today, html #order-standard_cart .order-summary .amt { color: #fff; font-family: var(--lmd-font-mono); }
html #order-standard_cart .order-summary .btn-continue-shopping { color: var(--lmd-muted); }
html #order-standard_cart .order-summary .btn-continue-shopping:hover { color: #fff; }
/* вкладки корзины, промокод, платёжные методы */
html #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"],
html #order-standard_cart .view-cart-tabs .nav-tabs li.active a { background: rgba(41, 199, 247, .1); border-color: var(--lmd-line) var(--lmd-line) transparent; color: #fff; }
html #order-standard_cart .view-cart-promotion-code { background: rgba(255, 255, 255, .03); border-color: var(--lmd-line-strong); color: var(--lmd-text); }
/* список товаров в корзине */
html #order-standard_cart .view-cart-items .item { background: transparent; border-color: var(--lmd-line); color: var(--lmd-text); }
html #order-standard_cart .view-cart-items .item:nth-child(even) { background: rgba(255, 255, 255, .03); }
html #order-standard_cart .view-cart-items .item-title, html #order-standard_cart .view-cart-items .item-title a { color: #fff; font-family: var(--lmd-font-display); }
html #order-standard_cart .view-cart-items .item-domain { color: var(--lmd-cyan); }
html #order-standard_cart .view-cart-items .item-price { color: #fff; font-family: var(--lmd-font-mono); }
html #order-standard_cart .btn-remove-from-cart { color: var(--lmd-muted); }
html #order-standard_cart .btn-remove-from-cart:hover { color: var(--lmd-red); }
/* выбор домена, зоны, результаты поиска */
html #order-standard_cart .domain-selection-options .option { border: 1px solid var(--lmd-line); }
html #order-standard_cart .domain-selection-options .option-selected { background: rgba(41, 199, 247, .1); border-color: var(--lmd-line-strong); box-shadow: 0 0 0 1px rgba(41, 199, 247, .15) inset; }
html #order-standard_cart .transfer-eligible { background: rgba(53, 240, 160, .08); border-color: rgba(53, 240, 160, .4); color: var(--lmd-green); }
html #order-standard_cart .transfer-not-eligible { background: rgba(255, 255, 255, .04); color: var(--lmd-muted); border-color: var(--lmd-line); }
html .spotlight-tlds { background: transparent; }
html .spotlight-tld { border: 1px solid var(--lmd-line); }
html .spotlight-tld .invalid, html .spotlight-tld .unavailable { background: rgba(255, 255, 255, .03); color: var(--lmd-muted); border-color: var(--lmd-line); }
html .domain-pricing .tld-row { border-bottom-color: var(--lmd-line); }
html .domain-pricing .tld-row.highlighted { background: rgba(41, 199, 247, .08); }
/* .col-4 — средняя ячейка шапки «Перенести»: штатный CSS красит чётные ячейки в #efefef, а текст у нас белый — подпись была не видна */
html .domain-pricing .tld-pricing-header .col-sm-2, html .domain-pricing .tld-pricing-header .col-sm-4, html .domain-pricing .tld-pricing-header .col-4, html .domain-pricing .tld-pricing-header div:nth-child(odd) {
background: rgba(255, 255, 255, .05); border-bottom: 2px solid var(--lmd-line-strong); color: #fff;
}
/* шесть крупных плиток зон над таблицей (.net, .com, .live…) убраны из макета по просьбе владельца — таблица цен и фильтры по категориям остаются */
html .domain-pricing .featured-tlds-container { display: none; }
html .domain-pricing .two-row-center { border-right-color: var(--lmd-line); }
html .domain-promo-box { border: 1px solid var(--lmd-line); }
html #order-standard_cart .domain-checker-available { color: var(--lmd-green); }
html #order-standard_cart .domain-checker-invalid, html #order-standard_cart .domain-checker-unavailable { color: var(--lmd-red); }
html #order-standard_cart .domain-checker-advanced label, html #order-standard_cart .panel-addon .panel-body label { color: var(--lmd-text); }
/* дополнения, продления, подсказки, выбор аккаунта */
html #order-standard_cart .panel-addon .panel-price { background: rgba(255, 255, 255, .07); color: #fff; }
html #order-standard_cart .panel-addon-selected { border-color: var(--lmd-cyan); box-shadow: 0 0 0 1px rgba(41, 199, 247, .25); }
html #order-standard_cart .addon-promo-container { border-color: var(--lmd-line); }
html .addon-renewals .service-renewal:nth-child(even), html .domain-renewals .domain-renewal:nth-child(even), html .service-renewals .service-renewal:nth-child(even) { background: rgba(255, 255, 255, .03); }
html .domain-renewals, html .service-renewals, html .domain-renewals .domain-renewal, html .service-renewals .service-renewal, html .addon-renewals > div { border-color: var(--lmd-line); }
html .service-renewals .div-renewal-ineligible, html #order-standard_cart p.domain-renewal-desc, html .service-renewals .div-renewal-period-label { color: var(--lmd-muted); }
html #order-standard_cart .account-select-container { border-right-color: var(--lmd-line); }
html #order-standard_cart .account-select-container div.account { border: 1px solid var(--lmd-line); }
html #order-standard_cart .account-select-container div.account.active { background: rgba(41, 199, 247, .1); border-color: var(--lmd-line-strong); }
html #order-standard_cart .mc-promo { border-color: var(--lmd-line); }
html #order-standard_cart .mc-promo .body { border-top-color: var(--lmd-line); }
html #order-standard_cart .mc-promo .expander, html #order-standard_cart .mc-promo .price { color: var(--lmd-cyan); }
html #order-standard_cart .default-captcha { color: var(--lmd-muted); border-color: var(--lmd-line); }
html #order-standard_cart .cc-input-container { border-color: var(--lmd-line); }
html #order-standard_cart .cc-input-container .existing-cc-grid { color: var(--lmd-muted); }
html .product-recommendations .product-recommendation { border-color: var(--lmd-line-strong); }
html .product-recommendations .product-recommendation .body { border-top-color: var(--lmd-line); }
/* поля ввода, подписи, подзаголовки, разделители */
html #order-standard_cart .field[disabled], html #order-standard_cart .field[readonly], html #order-standard_cart .form-control[disabled], html #order-standard_cart .form-control[readonly] { background-color: rgba(255, 255, 255, .04); color: var(--lmd-muted); }
html #order-standard_cart .field, html #order-standard_cart .form-control { border-color: var(--lmd-line); }
html #order-standard_cart .form-control:focus { border-color: var(--lmd-cyan); }
html #order-standard_cart label { color: #c4d2f5; }
html #order-standard_cart .sub-heading, html #order-standard_cart .sub-heading-borderless { border-top-color: var(--lmd-line); }
html #order-standard_cart .sub-heading span, html #order-standard_cart .sub-heading-borderless span { color: var(--lmd-cyan); font-family: var(--lmd-font-display); }
html #order-standard_cart .header-lined h1, html #order-standard_cart h1.font-size-36 { color: #fff; }
html #order-standard_cart a.alert-link, html #order-standard_cart .alert a { color: #8fe6ff; }
html #order-standard_cart .alert-warning, html #order-standard_cart .alert-warning * { color: var(--lmd-text); }
html #order-standard_cart .alert-warning a { color: var(--lmd-amber); }
/* боковое меню корзины на месте и на планшетах: штатный CSS ниже 992px его прячет и подменяет выпадающим списком — оставляем колонку (на телефонах
по-прежнему выпадающий список, колонка там заняла бы весь экран) */
@media (min-width: 768px) and (max-width: 991.98px) {
html #order-standard_cart .cart-sidebar { display: block; float: left; width: 30%; }
html #order-standard_cart .cart-body { float: right; width: 70%; }
html #order-standard_cart .sidebar-collapsed { display: none; }
}
/* ================= Доработка 7 ================= */
/* ---------- Ширина страницы: на широких экранах чуть шире (колонка контента и тёмное «окно» фона меняются вместе) ---------- */
@media (min-width: 1400px) { .container { max-width: 1240px; } :root { --lmd-col: 635px; } }
@media (min-width: 1650px) { .container { max-width: 1320px; } :root { --lmd-col: 675px; } }
/* ---------- Боковое меню: просторнее, всегда раскрыто, без кнопки «свернуть» (и в кабинете, и в форме заказа) ---------- */
html .card-sidebar .card-minimise, html .card-sidebar .panel-minimise { display: none !important; }
html .card-sidebar .collapsable-card-body { display: block !important; height: auto !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; }
html .card-sidebar .list-group.collapsable-card-body, html .card-sidebar .collapsable-card-body > .list-group { display: flex !important; flex-direction: column; }
html .card-sidebar .card-header { padding: 16px 20px 15px; }
html .card-sidebar .card-title, html .card-sidebar .panel-title {
display: flex; align-items: center; gap: 11px; margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; color: #fff;
}
html #order-standard_cart .cart-sidebar h3, html #order-standard_cart .cart-sidebar .panel-title { font-size: 1.05rem; margin: 0; }
html .card-sidebar .card-title > i:first-child, html .card-sidebar .panel-title > i:first-child { color: var(--lmd-cyan); filter: drop-shadow(0 0 8px rgba(41, 199, 247, .6)); width: 1.2em; text-align: center; flex: none; }
html .card-sidebar .sidebar-menu-item-wrapper { padding: 14px 20px; gap: 12px; }
html .card-sidebar .sidebar-menu-item-label { font-size: 1rem; }
html .card-sidebar .sidebar-menu-item-icon-wrapper { font-size: 1.05rem; width: 1.3em; }
/* меню формы заказа: разметка без обёрток (иконка + текст прямо в ссылке) — те же отступы, что в кабинете */
html #order-standard_cart .cart-sidebar .card-sidebar .list-group-item {
display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 20px; font-size: 1rem; line-height: 1.35;
border: 0; border-top: 1px solid rgba(96, 156, 255, .10); border-radius: 0; color: #b9c9ee;
}
html #order-standard_cart .cart-sidebar .card-sidebar .list-group-item:first-child { border-top: 0; }
html #order-standard_cart .cart-sidebar .card-sidebar .list-group-item > i { width: 1.25em; flex: none; text-align: center; color: #6f86b8; transition: color .2s ease, filter .2s ease; }
html #order-standard_cart .cart-sidebar .card-sidebar .list-group-item:hover > i,
html #order-standard_cart .cart-sidebar .card-sidebar .list-group-item.active > i { color: var(--lmd-cyan); filter: drop-shadow(0 0 8px rgba(41, 199, 247, .65)); }
html #order-standard_cart .cart-sidebar .card-sidebar .list-group-item:hover { color: #fff; }
html #order-standard_cart .cart-sidebar .card-sidebar .card-body { padding: 16px 20px; }
/* ---------- Товары: сетка по 4 в ряд (на узких — 3, 2, 1) или список в одну колонку (переключатель добавляет js/lmd-fx.js) ---------- */
/* шаблон корзины сам режет товары на строки по два () — строки делаем «прозрачными», сеткой становится весь контейнер */
html #order-standard_cart .products { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 16px; }
/* колонка меню чуть уже, чтобы на обычном настольном экране карточки вставали по четыре в ряд */
@media (min-width: 992px) {
html #order-standard_cart .cart-sidebar { width: 23%; }
html #order-standard_cart .cart-body { width: 77%; }
}
html #order-standard_cart .products > .row, html #order-standard_cart .products .row-eq-height { display: contents; }
html #order-standard_cart .products .row::before, html #order-standard_cart .products .row::after { display: none; }
html #order-standard_cart .products .row > [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0; float: none; }
html #order-standard_cart .products .product { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 0; overflow: hidden; border-radius: 8px; }
html #order-standard_cart .products .product header {
margin: 0; padding: 16px 18px; border-bottom: 1px solid var(--lmd-line);
background: linear-gradient(180deg, rgba(41, 199, 247, .10), rgba(255, 255, 255, .02));
}
html #order-standard_cart .products .product header span { font-size: 1.08rem; color: #fff; }
html #order-standard_cart .products .product div.product-desc { float: none; width: auto; margin: 0; padding: 14px 18px; flex: 1 1 auto; }
html #order-standard_cart .products .product div.product-desc p { color: var(--lmd-muted); }
html #order-standard_cart .products .product div.product-desc ul { list-style: none; margin: 0; padding: 0; }
html #order-standard_cart .products .product div.product-desc li {
display: flex; gap: .5em; padding: 5px 0; border-bottom: 1px dashed rgba(96, 156, 255, .16); color: var(--lmd-muted); font-size: .88rem; line-height: 1.35;
}
html #order-standard_cart .products .product div.product-desc li:last-child { border-bottom: 0; }
html #order-standard_cart .products .product .feature-value { color: #fff; font-weight: 600; }
/* Штатный шаблон выводит строку описания «Название: Значение» наоборот («Значение Название»: «Rclone: Supports» → «Supports Rclone») —
показываем в том порядке, как написано: название слева, значение справа. Строки без двоеточия (нет .feature-value) не затрагиваются. */
html #order-standard_cart .products .product div.product-desc li:has(> .feature-value) { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 14px; }
html #order-standard_cart .products .product div.product-desc li:has(> .feature-value) > .feature-value { text-align: right; }
html #order-standard_cart .products .product footer {
float: none; width: auto; margin: 0; padding: 16px 18px; border-top: 1px solid var(--lmd-line); background: rgba(255, 255, 255, .02);
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
html #order-standard_cart .products .product div.product-pricing { float: none; width: auto; margin: 0; padding: 0; text-align: left; font-size: .8rem; line-height: 1.25; color: var(--lmd-muted); }
html #order-standard_cart .products .product div.product-pricing br { display: none; }
html #order-standard_cart .products .product div.product-pricing span.price { display: block; font-size: 1.35rem; font-weight: 500; color: var(--lmd-cyan); font-family: var(--lmd-font-mono); }
html #order-standard_cart .products .product .btn-order-now { float: none; margin: 0; }
/* список: товар — строка, названия слева, характеристики в две колонки, цена и кнопка справа */
html #order-standard_cart .products.lmd-view-list { grid-template-columns: 1fr; gap: 14px; }
html #order-standard_cart .products.lmd-view-list .product { display: grid; grid-template-columns: minmax(170px, 230px) 1fr minmax(180px, 230px); }
html #order-standard_cart .products.lmd-view-list .product header { display: flex; align-items: center; border-bottom: 0; border-right: 1px solid var(--lmd-line); }
html #order-standard_cart .products.lmd-view-list .product div.product-desc ul { column-count: 2; column-gap: 32px; }
html #order-standard_cart .products.lmd-view-list .product div.product-desc li { break-inside: avoid; }
html #order-standard_cart .products.lmd-view-list .product footer { flex-direction: column; align-items: stretch; justify-content: center; border-top: 0; border-left: 1px solid var(--lmd-line); text-align: center; }
html #order-standard_cart .products.lmd-view-list .product div.product-pricing { text-align: center; }
@media (max-width: 991.98px) {
html #order-standard_cart .products.lmd-view-list .product { grid-template-columns: 1fr; }
html #order-standard_cart .products.lmd-view-list .product header { border-right: 0; border-bottom: 1px solid var(--lmd-line); }
html #order-standard_cart .products.lmd-view-list .product footer { border-left: 0; border-top: 1px solid var(--lmd-line); flex-direction: row; justify-content: space-between; }
html #order-standard_cart .products.lmd-view-list .product div.product-desc ul { column-count: 1; }
}
/* переключатель вида (вставляет js/lmd-fx.js над списком товаров) */
.lmd-view-toggle { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 16px; }
.lmd-view-toggle button {
width: 42px; height: 36px; border-radius: 8px; border: 1px solid var(--lmd-line); background: rgba(255, 255, 255, .04); color: var(--lmd-muted);
cursor: pointer; transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.lmd-view-toggle button:hover { color: #fff; border-color: var(--lmd-line-strong); }
.lmd-view-toggle button[aria-pressed="true"] { color: var(--lmd-cyan); border-color: var(--lmd-cyan); background: var(--lmd-cyan-soft); box-shadow: 0 0 14px rgba(41, 199, 247, .4); }
/* ---------- Кнопки: синий неон (зелёные — зелёный неон) ---------- */
html .btn { border-radius: 8px; letter-spacing: .03em; }
html .btn-primary, html .btn-primary:focus, html .btn-primary:not(:disabled):not(.disabled):active, html .btn-primary:not(:disabled):not(.disabled).active {
background: linear-gradient(135deg, #1cc3ff 0%, #3a6bff 100%); border: 1px solid rgba(150, 225, 255, .7); color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, .35);
box-shadow: 0 0 0 1px rgba(41, 199, 247, .30), 0 0 16px rgba(41, 199, 247, .55), 0 0 36px rgba(41, 199, 247, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
}
html .btn-primary:hover { filter: none; color: #fff; box-shadow: 0 0 0 1px rgba(41, 199, 247, .6), 0 0 24px rgba(41, 199, 247, .9), 0 0 56px rgba(41, 199, 247, .4), inset 0 1px 0 rgba(255, 255, 255, .3); }
html .btn-info, html .btn-info:focus, html .btn-info:not(:disabled):not(.disabled):active {
background: linear-gradient(135deg, #4fd8ff 0%, #2f9bff 100%); border: 1px solid rgba(170, 235, 255, .7); color: #04152a; font-weight: 700;
box-shadow: 0 0 0 1px rgba(41, 199, 247, .30), 0 0 16px rgba(41, 199, 247, .5), 0 0 34px rgba(41, 199, 247, .2), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html .btn-info:hover { filter: none; color: #04152a; box-shadow: 0 0 0 1px rgba(41, 199, 247, .6), 0 0 24px rgba(41, 199, 247, .85), 0 0 52px rgba(41, 199, 247, .4), inset 0 1px 0 rgba(255, 255, 255, .4); }
html .btn-success, html .btn-success:focus, html .btn-success:not(:disabled):not(.disabled):active, html .btn-success:not(:disabled):not(.disabled).active {
background: linear-gradient(135deg, #22f0a0 0%, #0fc27f 100%); border: 1px solid rgba(160, 255, 215, .7); color: #02170e; font-weight: 700;
box-shadow: 0 0 0 1px rgba(53, 240, 160, .30), 0 0 16px rgba(53, 240, 160, .55), 0 0 36px rgba(53, 240, 160, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html .btn-success:hover { filter: none; color: #02170e; box-shadow: 0 0 0 1px rgba(53, 240, 160, .6), 0 0 24px rgba(53, 240, 160, .9), 0 0 56px rgba(53, 240, 160, .4), inset 0 1px 0 rgba(255, 255, 255, .4); }
html .btn-warning, html .btn-warning:focus {
background: linear-gradient(135deg, #ffc03a, #f08a00); border: 1px solid rgba(255, 220, 140, .7); color: #1d1200; font-weight: 700;
box-shadow: 0 0 0 1px rgba(255, 178, 36, .30), 0 0 16px rgba(255, 178, 36, .5), 0 0 34px rgba(255, 178, 36, .2);
}
html .btn-warning:hover { color: #1d1200; box-shadow: 0 0 0 1px rgba(255, 178, 36, .6), 0 0 24px rgba(255, 178, 36, .85), 0 0 50px rgba(255, 178, 36, .35); }
html .btn-danger, html .btn-danger:focus {
background: linear-gradient(135deg, #ff6a80, #d6264a); border: 1px solid rgba(255, 170, 185, .7); color: #fff;
box-shadow: 0 0 0 1px rgba(255, 92, 114, .30), 0 0 16px rgba(255, 92, 114, .5), 0 0 34px rgba(255, 92, 114, .2);
}
html .btn-danger:hover { color: #fff; box-shadow: 0 0 0 1px rgba(255, 92, 114, .6), 0 0 24px rgba(255, 92, 114, .85), 0 0 50px rgba(255, 92, 114, .35); }
/* остальные (обычные, вторичные, светлые, контурные) — контур синего неона */
html .btn-default, html .btn-secondary, html .btn-light, html .btn-outline-primary, html .btn-outline-secondary, html .btn-outline-info, html .btn-outline-light,
html .btn-default:focus, html .btn-secondary:focus, html .btn-light:focus, html .btn-default.active, html .btn-default:active, html .open > .dropdown-toggle.btn-default,
html .btn-light:not(:disabled):not(.disabled).active, html .btn-light:not(:disabled):not(.disabled):active {
background: rgba(41, 199, 247, .07); border: 1px solid rgba(41, 199, 247, .6); color: #bfeeff;
box-shadow: 0 0 12px rgba(41, 199, 247, .25), inset 0 0 14px rgba(41, 199, 247, .08);
}
html .btn-default:hover, html .btn-secondary:hover, html .btn-light:hover, html .btn-outline-primary:hover, html .btn-outline-secondary:hover, html .btn-outline-info:hover, html .btn-outline-light:hover,
html .btn-default.active:hover, html .btn-default.active:focus, html .btn-default:active:hover, html .btn-default:active:focus {
background: rgba(41, 199, 247, .18); border-color: var(--lmd-cyan); color: #fff;
box-shadow: 0 0 22px rgba(41, 199, 247, .65), 0 0 46px rgba(41, 199, 247, .25), inset 0 0 16px rgba(41, 199, 247, .14);
}
html .btn-sm.btn-primary, html .btn-sm.btn-success, html .btn-sm.btn-info, html .btn-xs.btn-primary, html .btn-xs.btn-success { text-shadow: none; }
html .btn:disabled, html .btn.disabled, html .btn[disabled] { box-shadow: none; filter: saturate(.6); opacity: .5; }
html .btn-link, html .btn-link:hover { box-shadow: none; background: transparent; border: 0; }
/* ---------- База знаний, списки, таблицы: наведение и состояния в стиле темы ---------- */
html .kb-category a:hover, html .kb-article-item:hover {
background-color: rgba(41, 199, 247, .10); box-shadow: inset 2px 0 0 var(--lmd-cyan); color: #fff;
}
html .kb-category.card { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
html .kb-category.card:hover { border-color: var(--lmd-line-strong); box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 30px rgba(41, 199, 247, .12); transform: translateY(-2px); }
html .kb-category a, html .kb-article-item, html .kb-article-item a { color: var(--lmd-text); }
html .kb-category .h5, html .kb-article-item .h5, html .kb-article-item strong { color: #fff; }
html .kb-article-item:hover .text-muted, html .kb-category a:hover .text-muted { color: #b9c9ee !important; }
html .list-group-item-action:active, html a.list-group-item:active { background: rgba(41, 199, 247, .18); color: #fff; }
html .page-link, html .page-item.disabled .page-link { background: rgba(255, 255, 255, .04); border-color: var(--lmd-line); color: var(--lmd-cyan); }
html .page-link:hover { background: var(--lmd-cyan-soft); border-color: var(--lmd-line-strong); color: #fff; }
html header.header .dropdown-item.active, html header.header .dropdown-item:active { background: rgba(41, 199, 247, .18); color: #fff; }
html .table-list > tbody > tr:hover > td, html .table-hover tbody tr:hover > td { background-color: rgba(41, 199, 247, .08); color: #fff; }
html .table-hover .table-primary:hover, html .table-hover .table-primary:hover > td, html .table-hover .table-primary:hover > th { background-color: rgba(58, 107, 255, .20); }
html .table-hover .table-success:hover, html .table-hover .table-success:hover > td, html .table-hover .table-success:hover > th { background-color: rgba(53, 240, 160, .16); }
html .table-hover .table-info:hover, html .table-hover .table-info:hover > td, html .table-hover .table-info:hover > th { background-color: rgba(41, 199, 247, .16); }
html .table-hover .table-warning:hover, html .table-hover .table-warning:hover > td, html .table-hover .table-warning:hover > th { background-color: rgba(255, 178, 36, .16); }
html .table-hover .table-danger:hover, html .table-hover .table-danger:hover > td, html .table-hover .table-danger:hover > th { background-color: rgba(255, 92, 114, .16); }
html .select-account a:hover, html .popover-user-notifications ul li a:hover { background: var(--lmd-cyan-soft); color: #fff; }
html .modal-localisation .item-selector .item { color: #c4d2f5; }
html .modal-localisation .item-selector .item:hover, html .modal-localisation .item-selector .item.active { color: #fff; }
html .responsive-tabs-sm .nav-item a:hover { background: var(--lmd-cyan-soft); }
html .responsive-tabs-sm .nav-item a.active { background: rgba(41, 199, 247, .18) !important; color: #fff; }
html .input-group .btn-reveal-pw:active, html .input-group .btn-reveal-pw:hover { background: var(--lmd-cyan-soft); color: var(--lmd-cyan); }
html .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary, html .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:hover { background: rgba(255, 255, 255, .08); color: var(--lmd-text); }
/* плавающая вкладка «вернуться в админку» (видна только администратору) */
html .btn-return-to-admin, html .btn-return-to-admin:hover {
background: rgba(10, 18, 48, .92) !important; color: #c4d2f5 !important; border: 1px solid var(--lmd-line-strong); box-shadow: 0 0 18px rgba(41, 199, 247, .25);
}
html .btn-return-to-admin:hover { color: #fff !important; box-shadow: 0 0 26px rgba(41, 199, 247, .6); }
/* вкладка повёрнута штатным transform: rotate(90deg); общее правило .btn:hover { transform: translateY } подменяло его при наведении — вкладка прыгала из-под курсора, по ней нельзя было попасть */
html .btn-return-to-admin, html .btn-return-to-admin:hover, html .btn-return-to-admin:focus, html .btn-return-to-admin:active { transform: rotate(90deg); transition: none; }
/* ---------- Кабинет: светлые блоки родителя — в стекло ---------- */
html .table td, html .table th { background-color: transparent !important; }
html table.table-list thead th, html .table .thead-light th, html .markdown-content table > thead > tr > th, html .md-preview table > thead > tr > th {
background: rgba(255, 255, 255, .05); color: var(--lmd-muted); border-color: var(--lmd-line);
}
html .table-list > tbody > tr > td { background: transparent; color: var(--lmd-text); border-color: var(--lmd-line); }
html .dataTables_wrapper table.table-list thead th.sorting_asc, html .dataTables_wrapper table.table-list thead th.sorting_desc { background: rgba(41, 199, 247, .10); color: #fff; }
html .dataTables_wrapper .dataTables_filter label .form-control { background-color: rgba(6, 12, 32, .82); background-image: none; color: var(--lmd-text); }
html .mark, html mark { background: rgba(255, 178, 36, .25); color: #fff; }
html .img-thumbnail { background: rgba(255, 255, 255, .06); border-color: var(--lmd-line); }
html .jumbotron, html .continue-container, html .invite-box, html .verification-banner, html .promo-container, html .promo-banner, html .ticketfeedbackstaffcont,
html .twofa-setup .backup-code, html div.credit-card, html .upgrade .product-to-be-upgraded, html .upgrade .products .product, html div.product-details div.product-icon,
html div.product-details-tab-container, html .announcements .announcement article, html .view-ticket .posted-by, html .view-ticket .attachment-list li figure,
html .store-order-container .store-domain-tabs li a, html .client-home-cards .card-header, html .toast, html .toast-header {
background: linear-gradient(180deg, rgba(22, 38, 90, .5), rgba(10, 18, 48, .7)); border-color: var(--lmd-line); color: var(--lmd-text);
}
html .store-order-container .store-domain-tabs li.active a { background: rgba(41, 199, 247, .14); color: #fff; }
html .invoice-summary-table td.total-row, html tr.masspay-total td { background: rgba(255, 255, 255, .06) !important; color: #fff; }
html .modal .modal-header { background: rgba(255, 255, 255, .04); border-color: var(--lmd-line); }
html .md-editor > .md-preview, html .md-editor > textarea.markdown-editor { background: rgba(6, 12, 32, .82) !important; color: var(--lmd-text); }
html #registration .sub-heading span { background: var(--lmd-ink); color: var(--lmd-cyan); }
html #registration .field, html #registration .form-control { background: rgba(6, 12, 32, .82); color: var(--lmd-text); border-color: var(--lmd-line); }
/* ================= Блоки (аддон «LMD Страницы», вкладка «Блоки») =================
Контейнер .lmd-blocks на каждое из мест: сверху, снизу, слева и справа; внутри .lmd-block с оформлением card / plain / accent.
«Карточка» — как боковое меню (рамка с угловыми скобками, подсветка под курсором), «выделенный» — с голубой подсветкой. */
.lmd-blocks { margin: 0 0 8px; }
.lmd-blocks--top { margin: 22px 0 6px; }
.lmd-blocks--bottom { margin: 30px 0 0; }
.lmd-blocks-column { margin-bottom: 18px; }
.lmd-blocks-column--right { margin-top: 0; }
.lmd-block { position: relative; margin: 0 0 18px; padding: 20px 24px; color: var(--lmd-text); }
.lmd-block--card { border-radius: 6px; border: 1px solid var(--lmd-line); box-shadow: 0 14px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04); }
.lmd-block--plain { padding-left: 2px; padding-right: 2px; }
.lmd-block--accent {
border-radius: 10px; border: 1px solid var(--lmd-line-strong);
background: linear-gradient(135deg, rgba(41, 199, 247, .15), rgba(58, 107, 255, .10) 60%, rgba(10, 18, 48, .55));
box-shadow: 0 0 34px rgba(41, 199, 247, .16), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.lmd-block__title { margin: 0 0 12px; font-size: 1.12rem; font-weight: 600; letter-spacing: .02em; color: #fff; }
.lmd-block__body { color: var(--lmd-text); line-height: 1.55; }
.lmd-block__body > :last-child { margin-bottom: 0; }
.lmd-block__body h1, .lmd-block__body h2, .lmd-block__body h3, .lmd-block__body h4 { color: #fff; }
.lmd-block__body a { color: var(--lmd-cyan); }
.lmd-block__body img { max-width: 100%; height: auto; border-radius: 8px; }
.lmd-block__body ul { padding-left: 1.2em; }
/* меню-блок: список ссылок, как пункты бокового меню */
.lmd-block__menu { list-style: none; margin: 0 -24px -20px; padding: 0; }
.lmd-block--plain .lmd-block__menu { margin: 0; }
.lmd-block__menu a {
position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 24px; border-top: 1px solid rgba(96, 156, 255, .10);
color: #b9c9ee; transition: background-color .2s ease, color .2s ease;
}
.lmd-block__menu li:first-child a { border-top: 0; }
.lmd-block__menu a i { width: 1.25em; flex: none; text-align: center; color: #6f86b8; transition: color .2s ease, filter .2s ease; }
.lmd-block__menu a::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--lmd-cyan); box-shadow: 0 0 12px var(--lmd-cyan);
transform: scaleY(0); transition: transform .2s ease;
}
.lmd-block__menu a:hover, .lmd-block__menu a:focus { background: linear-gradient(90deg, rgba(41, 199, 247, .15), rgba(41, 199, 247, 0) 88%); color: #fff; }
.lmd-block__menu a:hover::before { transform: scaleY(1); }
.lmd-block__menu a:hover i { color: var(--lmd-cyan); filter: drop-shadow(0 0 8px rgba(41, 199, 247, .65)); }
@media (prefers-reduced-motion: reduce) { .lmd-block__menu a, .lmd-block__menu a::before { transition: none; } }
/* ================= Форма заказа premium_comparison (группы с тарифной таблицей, напр. «Virtual Hosting») =================
Боковое меню всегда на виду слева (кнопка «Show Menu» убрана), тарифные колонки — стеклянные панели с неоном. */
/* стиль шаблона ставит overflow-x: hidden на html и body — тогда body становится своим контейнером прокрутки и страница не скроллится как обычно; clip не создаёт контейнера */
html:root, html:root body { overflow-x: clip; overflow-y: visible; }
html #btnShowSidebar { display: none !important; }
html .row-product-selection { left: 0 !important; flex-wrap: nowrap; align-items: flex-start; }
html .row-product-selection > .product-selection-sidebar { position: static; display: block !important; flex: 0 0 280px; width: 280px; max-width: 280px; padding-right: 20px; }
html .row-product-selection > .col-md-12 { flex: 1 1 0; width: auto; min-width: 0; max-width: none; }
@media (max-width: 767.98px) {
html .row-product-selection { flex-wrap: wrap; }
html .row-product-selection > .product-selection-sidebar, html .row-product-selection > .col-md-12 { flex: 0 0 100%; width: 100%; max-width: 100%; padding-right: 15px; }
}
/* пункты бокового меню — те же отступы и подсветка, что в меню стандартной формы заказа */
html #premiumComparisonSidebar .card-sidebar .list-group-item {
display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 20px; font-size: 1rem; line-height: 1.35;
border: 0; border-top: 1px solid rgba(96, 156, 255, .10); border-radius: 0; background: transparent; color: #b9c9ee;
}
html #premiumComparisonSidebar .card-sidebar .list-group-item:first-child { border-top: 0; }
html #premiumComparisonSidebar .card-sidebar .list-group-item > i { width: 1.25em; flex: none; text-align: center; color: #6f86b8; transition: color .2s ease, filter .2s ease; }
html #premiumComparisonSidebar .card-sidebar .list-group-item:hover > i,
html #premiumComparisonSidebar .card-sidebar .list-group-item.active > i { color: var(--lmd-cyan); filter: drop-shadow(0 0 8px rgba(41, 199, 247, .65)); }
html #premiumComparisonSidebar .card-sidebar .list-group-item:hover { color: #fff; }
html #premiumComparisonSidebar .card-sidebar .card-body { padding: 16px 20px; }
html #premiumComparisonSidebar .card-sidebar .card-title, html #premiumComparisonSidebar .card-sidebar .panel-title { color: #fff; font-size: 1.05rem; margin: 0; }
html div#order-premium_comparison, html #order-premium_comparison h3, html #order-premium_comparison h4 { color: var(--lmd-text); }
html #order-premium_comparison h3, html #order-premium_comparison h4 { color: #fff; font-family: var(--lmd-font-display); }
html #order-premium_comparison h5 { color: var(--lmd-muted); }
html #order-premium_comparison .main-container { padding-bottom: 30px; }
html #order-premium_comparison .price-table-container ul li { background: none; }
/* колонки тарифов — гибкая сетка вместо фиксированных 270px: сколько влезает в ряд, столько и выводим */
html #order-premium_comparison .price-table-container > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 20px; align-items: start; }
html #order-premium_comparison .price-table-container > ul > li { display: block; padding: 10px 0 0; }
html #order-premium_comparison .price-table-container .price-table, html #order-premium_comparison .price-table-container .price-table.active { width: 100%; min-width: 0; margin: 0; }
html #order-premium_comparison .price-table-container .price-table {
background: linear-gradient(180deg, rgba(22, 38, 90, .55), rgba(10, 18, 48, .82)); border: 1px solid var(--lmd-line); border-radius: 8px;
box-shadow: 0 14px 40px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
html #order-premium_comparison .price-table-container .price-table:hover { border-color: var(--lmd-line-strong); box-shadow: 0 18px 46px rgba(0, 0, 0, .5), 0 0 30px rgba(41, 199, 247, .16); transform: translateY(-3px); }
html #order-premium_comparison .price-table-container .price-table.active { border-color: rgba(41, 199, 247, .7); box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 34px rgba(41, 199, 247, .28); }
html #order-premium_comparison .price-table-container .price-table .top-head { background: linear-gradient(180deg, rgba(41, 199, 247, .20), rgba(58, 107, 255, .08)); filter: none; border-radius: 7px 7px 0 0; }
html #order-premium_comparison .price-table-container .price-table .top-head .top-area { border-bottom: 1px solid var(--lmd-line); text-shadow: none; }
html #order-premium_comparison .price-table-container .price-table .top-head .top-area h4 { font-family: var(--lmd-font-display); font-weight: 600; color: #fff; }
html #order-premium_comparison .price-table-container .price-table .top-head .top-area p { color: var(--lmd-muted); }
html #order-premium_comparison .price-table-container .price-table .top-head .price-area { border-top: 0; color: var(--lmd-cyan); text-shadow: 0 0 14px rgba(41, 199, 247, .55); }
html #order-premium_comparison .price-table-container .price-table .top-head .price-area .price span { color: #fff; }
html #order-premium_comparison .price-table-container .price-table .popular-plan { background: rgba(53, 240, 160, .12); border-bottom: 1px solid var(--lmd-line); color: var(--lmd-green); }
html #order-premium_comparison .price-table-container .order-button, html #order-premium_comparison .price-table-container .order-button:hover {
background: linear-gradient(135deg, #1cc3ff 0%, #3a6bff 100%); filter: none; border: 1px solid rgba(150, 225, 255, .7); border-radius: 8px; color: #fff; font-weight: 600; letter-spacing: .03em;
text-shadow: 0 0 8px rgba(255, 255, 255, .35);
box-shadow: 0 0 0 1px rgba(41, 199, 247, .30), 0 0 16px rgba(41, 199, 247, .55), 0 0 36px rgba(41, 199, 247, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
}
html #order-premium_comparison .price-table-container .order-button:hover { box-shadow: 0 0 0 1px rgba(41, 199, 247, .6), 0 0 24px rgba(41, 199, 247, .9), 0 0 56px rgba(41, 199, 247, .4), inset 0 1px 0 rgba(255, 255, 255, .3); }
html #order-premium_comparison .price-table-container .order-button.unavailable, html #order-premium_comparison .price-table-container .order-button.unavailable:hover {
background: rgba(255, 255, 255, .06); border-color: var(--lmd-line); color: var(--lmd-muted); box-shadow: none; text-shadow: none;
}
html #order-premium_comparison .price-table-container .price-table ul li { border-bottom: 1px solid rgba(96, 156, 255, .14); color: var(--lmd-text); }
html #order-premium_comparison .price-table-container .price-table ul li a { color: var(--lmd-cyan); }
html #order-premium_comparison .includes-features .head-area { background: linear-gradient(var(--lmd-line), var(--lmd-line)) center / 100% 1px no-repeat; }
html #order-premium_comparison .main-container.price-01 .includes-features .head-area span { background: #08102a; color: var(--lmd-cyan); }
html #order-premium_comparison .includes-features ul.list-features li { color: var(--lmd-text); }
html #order-premium_comparison .includes-features .head-area span.primary-bg-color { background: #08102a; color: var(--lmd-cyan); }
html #order-premium_comparison .alert { margin-top: 20px; }
/* ---------- Каталог товаров: «Order Now» — синий неон (зелёный неон остаётся за корзиной и оформлением заказа) ---------- */
html #order-standard_cart .btn-order-now, html #order-standard_cart .btn-order-now:focus, html #order-standard_cart .btn-order-now:not(:disabled):not(.disabled):active {
background: linear-gradient(135deg, #1cc3ff 0%, #3a6bff 100%); border: 1px solid rgba(150, 225, 255, .7); color: #fff; font-weight: 600; text-shadow: 0 0 8px rgba(255, 255, 255, .35);
box-shadow: 0 0 0 1px rgba(41, 199, 247, .30), 0 0 16px rgba(41, 199, 247, .55), 0 0 36px rgba(41, 199, 247, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
}
html #order-standard_cart .btn-order-now:hover { color: #fff; box-shadow: 0 0 0 1px rgba(41, 199, 247, .6), 0 0 24px rgba(41, 199, 247, .9), 0 0 56px rgba(41, 199, 247, .4), inset 0 1px 0 rgba(255, 255, 255, .3); }
/* ---------- Боковое меню формы заказа не уезжает при прокрутке (на ≥768px); если колонка выше экрана, js/lmd-fx.js добавляет .lmd-sticky-scroll и она листается внутри ---------- */
@media (min-width: 768px) {
html #order-standard_cart .cart-sidebar, html #premiumComparisonSidebar { position: sticky; top: 16px; align-self: flex-start; }
html .lmd-sticky-scroll { max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(41, 199, 247, .45) transparent; }
}
/* ---------- Детали услуги (clientareaproductdetails.tpl): карточка статуса, смысловой значок, данные списком ---------- */
html .product-details .product-status {
--lmd-st: var(--lmd-green); --lmd-st-rgb: 53, 240, 160;
--lmd-b: rgba(41, 199, 247, .8); --lmd-bs: 14px;
border: 1px solid var(--lmd-line); border-radius: 6px; overflow: hidden;
background:
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 0 / var(--lmd-bs) 1px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 0 / 1px var(--lmd-bs) no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 0 / var(--lmd-bs) 1px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 0 / 1px var(--lmd-bs) no-repeat,
linear-gradient(180deg, rgba(22, 38, 90, .55), rgba(10, 18, 48, .7));
}
html .product-details .product-status.product-status-pending { --lmd-st: var(--lmd-amber); --lmd-st-rgb: 255, 178, 36; }
html .product-details .product-status.product-status-suspended, html .product-details .product-status.product-status-fraud { --lmd-st: var(--lmd-red); --lmd-st-rgb: 255, 92, 114; }
html .product-details .product-status.product-status-terminated, html .product-details .product-status.product-status-cancelled { --lmd-st: var(--lmd-muted); --lmd-st-rgb: 141, 162, 207; }
html .product-details .product-status .product-icon { background: radial-gradient(260px 160px at 50% 18%, rgba(41, 199, 247, .14), transparent 70%); border: 0; border-radius: 0; padding: 30px 24px 22px; font-size: 1rem; }
html .product-details .product-status .product-icon h3 { margin: 16px 0 4px; font-size: 1.5rem; font-weight: 700; color: #fff; }
html .product-details .product-status .product-icon h4 { margin: 0; font-size: 1rem; font-weight: 400; color: var(--lmd-muted); }
html .product-details .product-status .product-status-text {
padding: 10px; font-family: var(--lmd-font-display); font-weight: 600; letter-spacing: .14em; color: var(--lmd-st);
background: rgba(var(--lmd-st-rgb), .13); border-top: 1px solid rgba(var(--lmd-st-rgb), .4); text-shadow: 0 0 14px rgba(var(--lmd-st-rgb), .6);
}
/* значок услуги: свой цвет и картинка на каждый вид (cloud — Cloud Drive, vps, hosting, dns; остальное — other) */
.lmd-svc-icon {
--k: 141, 162, 207;
display: inline-flex; align-items: center; justify-content: center; width: 108px; height: 108px; border-radius: 50%; font-size: 46px; color: rgb(var(--k));
background: radial-gradient(circle at 50% 30%, rgba(var(--k), .24), rgba(var(--k), .05) 70%); border: 1px solid rgba(var(--k), .5);
box-shadow: 0 0 30px rgba(var(--k), .3), inset 0 0 24px rgba(var(--k), .14); text-shadow: 0 0 18px rgba(var(--k), .75);
}
.lmd-svc-icon--cloud { --k: 41, 199, 247; }
.lmd-svc-icon--vps { --k: 96, 140, 255; }
.lmd-svc-icon--hosting { --k: 24, 214, 196; }
.lmd-svc-icon--dns { --k: 176, 148, 255; }
/* данные услуги: название слева, значение справа */
html .product-details .lmd-svc-facts { margin: 0; padding: 4px 8px; }
html .product-details .lmd-svc-fact { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 6px; border-bottom: 1px dashed rgba(96, 156, 255, .18); }
html .product-details .lmd-svc-fact:last-child { border-bottom: 0; }
html .product-details .lmd-svc-fact dt { margin: 0; font-weight: 400; font-size: .92rem; color: var(--lmd-muted); }
html .product-details .lmd-svc-fact dd { margin: 0; text-align: right; color: #fff; font-family: var(--lmd-font-mono); font-size: .95rem; }
/* адрес сайта под названием в карточке хостинга */
html .product-details .lmd-svc-domain { display: block; margin-top: 8px; color: var(--lmd-cyan); font-family: var(--lmd-font-mono); font-size: .9rem; }
/* хостинг BrainyCP: общий верхний блок (карточка + данные) показывает сам шаблон, от вывода модуля остаются кнопки и вкладки */
/* (в разметке модуля лишний
— браузер закрывает обёртку .lmd-brainy раньше времени, поэтому правила идут по id панелей модуля, а не через обёртку) */
html .lmd-brainy { margin-top: 20px; }
html #brainyBillingOverviewPanel, html #brainyPackagePanel .panel-heading, html #brainyPackagePanel .brainy-package-details { display: none; }
html #brainyPackagePanel { background: none; border: 0; box-shadow: none; margin: 0 0 20px; }
html #brainyPackagePanel .panel-body { padding: 0; }
/* форма «Host Control Panel» в шаблоне модуля стоит внутри — браузер выносит её из абзаца; чтобы все четыре кнопки шли одним рядом справа, абзац «растворяем» */
html #tabOverview #brainyPackagePanel .panel-body { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
html #tabOverview #brainyPackagePanel .panel-body > p { display: contents; }
html #tabOverview #brainyPackagePanel .panel-body > form { display: inline-flex; margin: 0; }
html [class*="col-md-6"]:has(> #brainyPackagePanel) { flex: 0 0 100%; max-width: 100%; }
/* вкладки услуги («Информация о хостинге/сервере», настройки): строки «название — значение» в одном виде с данными услуги */
html .product-details-tab-container .tab-pane > .row {
display: grid; grid-template-columns: minmax(130px, 230px) minmax(0, 1fr); align-items: baseline; gap: 4px 18px; margin: 0; padding: 11px 6px;
border-bottom: 1px dashed rgba(96, 156, 255, .18); text-align: left;
}
html .product-details-tab-container .tab-pane > .row > [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0; text-align: left !important; }
html .product-details-tab-container .tab-pane > .row > [class*="col-"]:first-child, html .product-details-tab-container .tab-pane > .row > [class*="col-"]:first-child strong { color: var(--lmd-muted); font-weight: 400; font-size: .92rem; }
html .product-details-tab-container .tab-pane > .row > [class*="col-"]:last-child { color: #fff; font-family: var(--lmd-font-mono); font-size: .93rem; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { html .product-details-tab-container .tab-pane > .row { grid-template-columns: minmax(0, 1fr); } }
/* кнопки действий (отмена, продление, апгрейд) — справа под данными услуги, по ширине содержимого */
html .product-details .lmd-svc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin: 20px 0 0; padding-top: 20px; border-top: 1px dashed rgba(96, 156, 255, .18); }
html .product-details .lmd-svc-actions:not(:has(*)) { display: none; }
html .product-details .lmd-svc-actions .btn { min-width: 0; padding: 8px 13px; font-size: .82rem; white-space: nowrap; letter-spacing: .01em; }
html .product-details .lmd-svc-actions { gap: 8px; }
html .product-details .lmd-svc-actions form { display: inline-flex; margin: 0; }
/* кнопки модуля хостинга, которые js/lmd-fx.js переносит в этот ряд: контурные, главная («Host Control Panel») — синий неон */
html .lmd-svc-actions .lmd-mod-btn { background: rgba(41, 199, 247, .07); border: 1px solid rgba(41, 199, 247, .6); color: #bfeeff; font-weight: 600; box-shadow: 0 0 12px rgba(41, 199, 247, .25), inset 0 0 14px rgba(41, 199, 247, .08); }
html .lmd-svc-actions .lmd-mod-btn:hover { background: rgba(41, 199, 247, .18); border-color: var(--lmd-cyan); color: #fff; box-shadow: 0 0 22px rgba(41, 199, 247, .65), 0 0 46px rgba(41, 199, 247, .25), inset 0 0 16px rgba(41, 199, 247, .14); }
html .lmd-svc-actions .lmd-mod-btn.btnBrainy { background: linear-gradient(135deg, #1cc3ff 0%, #3a6bff 100%); border-color: rgba(150, 225, 255, .7); color: #fff; box-shadow: 0 0 0 1px rgba(41, 199, 247, .3), 0 0 16px rgba(41, 199, 247, .55), 0 0 36px rgba(41, 199, 247, .22), inset 0 1px 0 rgba(255, 255, 255, .25); }
/* Cloud Drive (страницы модуля): плашки способов подключения — тёмное стекло вместо белого, код команд читаем на тёмном */
html .lmdcd details.lmdcd-conn { background: rgba(255, 255, 255, .03); border-color: var(--lmd-line); transition: border-color .2s ease, box-shadow .2s ease; }
html .lmdcd details.lmdcd-conn:hover, html .lmdcd details.lmdcd-conn[open] { border-color: var(--lmd-line-strong); }
html .lmdcd details.lmdcd-conn[open] { box-shadow: 0 0 18px rgba(41, 199, 247, .12); }
html .lmdcd code { background: rgba(6, 12, 32, .85); color: #8fe6ff; border: 1px solid var(--lmd-line); border-radius: 4px; padding: 2px 6px; }
/* ================= Модули услуг, написанные под Bootstrap 3 (хостинг BrainyCP, VPS Hetzner): тема на Bootstrap 4 ================= */
/* BS3: вкладка открыта классами "fade in active" (в BS4 вместо in — show): без этого содержимое вкладки полностью прозрачно (пустой ящик) */
html .tab-content > .tab-pane.fade.in.active { opacity: 1; display: block; }
/* панели BS3: отступы внутри (в BS4 их нет — текст липнет к рамке); у карточек (.card-header/.card-body) свои */
html .panel-heading:not(.card-header) { padding: 12px 18px; }
html .panel-body:not(.card-body) { padding: 18px; }
html .panel-title { margin: 0; font-size: 1.1rem; color: #fff; }
html .panel-heading:has(> .panel-title:empty) { display: none; }
@media (max-width: 575.98px) { html .row > .col-xs-6 { flex: 0 0 50%; max-width: 50%; } html .row > .col-xs-12 { flex: 0 0 100%; max-width: 100%; } }
/* страницы действий модулей (VPS Hetzner и др.): у заголовков, абзацев, таблиц и форм в BS3 были внешние отступы, в BS4 нет — блоки склеивались */
html .panel-body > h4, html .panel-body > h5, html .module-client-area > h4, html .module-client-area > h5 { margin: 28px 0 12px; font-size: 1.15rem; color: #fff; }
html .panel-body > h4:first-child, html .panel-body > h5:first-child { margin-top: 0; }
html .panel-body > p, html .panel-body > .alert { margin: 0 0 14px; }
html .panel-body > table, html .panel-body > .table-responsive { margin: 16px 0 22px; }
html .panel-body > :last-child { margin-bottom: 0; }
html form.form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 22px; }
html td form.form-inline, html th form.form-inline { margin: 0; }
html form.form-inline .form-control { max-width: 100%; }
html form.form-inline .form-group { margin: 0; }
html .help-block { display: block; margin-top: 6px; font-size: .85rem; color: var(--lmd-muted); }
html .table-condensed td, html .table-condensed th { padding: .35rem .6rem; }
html .pull-right { float: right; }
html .pull-left { float: left; }
html .module-client-area { padding: 18px 8px 0; }
html code { background: rgba(6, 12, 32, .85); color: #8fe6ff; border: 1px solid var(--lmd-line); border-radius: 4px; padding: 2px 6px; font-size: .9em; }
html pre code { background: transparent; border: 0; padding: 0; }
/* обёртка вкладок модуля — .row с отрицательными полями без колонок с отступами (col-xs-12 в BS4 нет): вкладки выступали влево от блока под ними */
html .row:has(> .col-xs-12 > ul.nav-tabs-overflow) { margin-left: 0; margin-right: 0; }
/* вкладки BS3 (ul.nav-tabs > li.active > a) — как вкладки темы */
html ul.nav-tabs.nav-tabs-overflow { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--lmd-line); }
html ul.nav-tabs-overflow > li > a { display: block; margin-bottom: -1px; padding: 10px 18px; border: 1px solid transparent; border-radius: 6px 6px 0 0; color: var(--lmd-muted); text-decoration: none; }
html ul.nav-tabs-overflow > li > a:hover { color: #fff; background: var(--lmd-cyan-soft); }
html ul.nav-tabs-overflow > li.active > a { color: #fff; background: rgba(41, 199, 247, .12); border-color: var(--lmd-line) var(--lmd-line) rgba(10, 18, 48, .9); }
/* хостинг: карточка пакета — название, домен и ряд одинаковых кнопок */
html #brainyPackagePanel .panel-body { padding: 24px 22px; }
html #brainyPackagePanel .brainy-package-details { margin-bottom: 18px; }
html #brainyPackagePanel .brainy-package-details em { display: block; font-style: normal; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lmd-muted); }
html #brainyPackagePanel .brainy-package-details h4 { margin: 6px 0 4px !important; font-size: 1.7rem; font-weight: 700; color: #fff; }
html #brainyPackagePanel .panel-body > p { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
html #brainyPackagePanel .panel-body > p form { display: inline-flex; margin: 0; }
html #brainyPackagePanel .btn { min-width: 160px; padding: 9px 18px; font-size: .9rem; }
/* все кнопки ряда — контурные (синий неон), главная — «Host Control Panel» */
html #brainyPackagePanel .btn-default, html #brainyPackagePanel .btn-success, html #brainyPackagePanel .btn-info {
background: rgba(41, 199, 247, .07); border: 1px solid rgba(41, 199, 247, .6); color: #bfeeff; font-weight: 600;
box-shadow: 0 0 12px rgba(41, 199, 247, .25), inset 0 0 14px rgba(41, 199, 247, .08);
}
html #brainyPackagePanel .btn-default:hover, html #brainyPackagePanel .btn-success:hover, html #brainyPackagePanel .btn-info:hover {
background: rgba(41, 199, 247, .18); border-color: var(--lmd-cyan); color: #fff;
box-shadow: 0 0 22px rgba(41, 199, 247, .65), 0 0 46px rgba(41, 199, 247, .25), inset 0 0 16px rgba(41, 199, 247, .14);
}
html #brainyPackagePanel .btnBrainy { background: linear-gradient(135deg, #1cc3ff 0%, #3a6bff 100%); border: 1px solid rgba(150, 225, 255, .7); color: #fff;
box-shadow: 0 0 0 1px rgba(41, 199, 247, .3), 0 0 16px rgba(41, 199, 247, .55), 0 0 36px rgba(41, 199, 247, .22), inset 0 1px 0 rgba(255, 255, 255, .25); }
html #brainyPackagePanel .btnBrainy:hover { box-shadow: 0 0 0 1px rgba(41, 199, 247, .6), 0 0 24px rgba(41, 199, 247, .9), 0 0 56px rgba(41, 199, 247, .4), inset 0 1px 0 rgba(255, 255, 255, .3); }
html #brainyExtrasPurchasePanel .form-inline { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* хостинг: «Обзор оплаты» — две колонки «название — значение», вместо слипшихся строк */
html #brainyBillingOverviewPanel .panel-body > .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; margin: 0; }
html #brainyBillingOverviewPanel .panel-body > .row > [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0; }
html #brainyBillingOverviewPanel .panel-body > .row > [class*="col-"] > .row {
display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding: 13px 4px; border-bottom: 1px dashed rgba(96, 156, 255, .18);
}
html #brainyBillingOverviewPanel .panel-body > .row > [class*="col-"] > .row > div { flex: 0 1 auto; width: auto; max-width: none; padding: 0; text-align: left; }
html #brainyBillingOverviewPanel .panel-body > .row > [class*="col-"] > .row > div:first-child { color: var(--lmd-muted); font-size: .92rem; }
html #brainyBillingOverviewPanel .panel-body > .row > [class*="col-"] > .row > div:last-child { color: #fff; font-family: var(--lmd-font-mono); text-align: right; }
@media (max-width: 767px) { html #brainyBillingOverviewPanel .panel-body > .row { grid-template-columns: minmax(0, 1fr); } }
/* VPS (Hetzner): плитки «Действия с сервером» и «Управление сервером» — стекло с угловыми скобками, как плитки главной (в шаблоне модуля они белые) */
html .hetzner-tile-grid .hetzner-tile {
--lmd-b: rgba(41, 199, 247, .8); --lmd-bs: 12px;
border: 1px solid var(--lmd-line); border-radius: 6px; color: var(--lmd-text); font-family: inherit; padding: 28px 10px;
background:
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 0 / var(--lmd-bs) 1px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 0 / 1px var(--lmd-bs) no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 0 / var(--lmd-bs) 1px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 0 / 1px var(--lmd-bs) no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 100% / var(--lmd-bs) 1px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 100% / 1px var(--lmd-bs) no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 100% / var(--lmd-bs) 1px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 100% / 1px var(--lmd-bs) no-repeat,
linear-gradient(180deg, rgba(22, 38, 90, .55), rgba(10, 18, 48, .7));
transition: background-size .25s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
html .hetzner-tile-grid .hetzner-tile:hover, html .hetzner-tile-grid .hetzner-tile:focus {
--lmd-bs: 22px; border-color: var(--lmd-line-strong); color: #fff; transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 0, 0, .45), 0 0 24px rgba(41, 199, 247, .16);
}
html .hetzner-tile-grid .hetzner-tile i { color: var(--lmd-cyan); filter: drop-shadow(0 0 10px rgba(41, 199, 247, .55)); }
html .hetzner-tile-grid .hetzner-tile i.text-success { color: var(--lmd-green); filter: drop-shadow(0 0 10px rgba(53, 240, 160, .55)); }
html .hetzner-tile-grid .hetzner-tile i.text-danger { color: var(--lmd-red); filter: drop-shadow(0 0 10px rgba(255, 92, 114, .55)); }
html .hetzner-tile-grid .hetzner-tile i.text-warning { color: var(--lmd-amber); filter: drop-shadow(0 0 10px rgba(255, 178, 36, .55)); }
html .hetzner-tile-grid .hetzner-tile span { color: inherit; font-family: var(--lmd-font-display); font-weight: 500; letter-spacing: .02em; }
/* веб-консоль VPS: рамка с угловыми скобками и неоновой линией вокруг экрана (скролла нет — картинка масштабируется под контейнер, см. console.tpl модуля) */
html #hetznerConsoleRoot .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
html #hetznerConsoleRoot .panel-heading .pull-right { display: flex; gap: 8px; float: none; }
html #hetznerConsoleScreen {
position: relative; border: 1px solid var(--lmd-line-strong); border-radius: 6px; margin: 0 15px 15px; width: auto !important;
box-shadow: 0 0 26px rgba(41, 199, 247, .18), inset 0 0 40px rgba(0, 0, 0, .6);
}
html #hetznerConsoleScreen::after {
--c: var(--lmd-cyan); --s: 22px;
content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 2; border-radius: 6px;
background:
linear-gradient(var(--c), var(--c)) 0 0 / var(--s) 2px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 2px var(--s) no-repeat,
linear-gradient(var(--c), var(--c)) 100% 0 / var(--s) 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 2px var(--s) no-repeat,
linear-gradient(var(--c), var(--c)) 0 100% / var(--s) 2px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 2px var(--s) no-repeat,
linear-gradient(var(--c), var(--c)) 100% 100% / var(--s) 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 2px var(--s) no-repeat;
filter: drop-shadow(0 0 5px rgba(41, 199, 247, .7));
}
html #hetznerConsolePopupOverlay #hetznerConsoleScreen { margin: 0; border-radius: 0; }
/* строки таблиц с несколькими кнопками-формами рядом («Восстановить», «Удалить»): формы inline-block без зазора склеивали кнопки */
html td form.hetzner-async-form { display: inline-block; margin: 0 6px 4px 0; }
html td form.hetzner-async-form:last-child { margin-right: 0; }
/* заголовки групп плиток — слева, со светодиодом и линией, как заголовки секций главной */
html h4:has(+ .hetzner-tile-grid) { display: flex; align-items: center; gap: 12px; margin: 26px 0 16px; text-align: left; font-size: 1.1rem; color: #fff; }
html h4:has(+ .hetzner-tile-grid)::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--lmd-cyan); box-shadow: 0 0 10px var(--lmd-cyan); }
html h4:has(+ .hetzner-tile-grid)::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--lmd-line-strong), transparent); }
@media (prefers-reduced-motion: reduce) { html .hetzner-tile-grid .hetzner-tile { transition: none; } }
/* ---------- Окно «Просмотр письма» (viewemail.php) и другие всплывающие окна (body#popup-backdrop): карточка и письмо занимают всю высоту окна,
а не оставляют пустоту под собой (у письма в шаблоне фиксированные 380px, фон окна — серый от родителя) ---------- */
html body#popup-backdrop { min-height: 100vh; margin: 0; padding: 16px; box-sizing: border-box; display: flex; background-color: var(--lmd-ink); }
html body#popup-backdrop > .card { flex: 1 1 auto; display: flex; flex-direction: column; margin: 0; min-width: 0; }
html body#popup-backdrop > .card > .card-body { flex: 1 1 auto; display: flex; min-height: 0; padding: 20px; }
html body#popup-backdrop > .card > .card-body > iframe { flex: 1 1 auto; width: 100%; height: auto; min-height: 380px; border: 0; border-radius: 6px; background: #fff; }
/* ---------- Гул серверной в футере: кнопка-динамик и крошечный регулятор громкости (js/lmd-fx.js → initServerSound) ---------- */
.lmd-sound { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-right: 8px; }
.lmd-sound[hidden] { display: none; }
.lmd-sound__btn {
position: relative; width: 34px; height: 34px; padding: 0; border-radius: 8px; cursor: pointer; font-size: .95rem; line-height: 1;
background: rgba(255, 255, 255, .05); border: 1px solid var(--lmd-line); color: #c4d2f5; transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.lmd-sound__btn:hover { color: #fff; border-color: var(--lmd-line-strong); }
.lmd-sound__btn[aria-pressed="true"] { color: var(--lmd-cyan); border-color: var(--lmd-cyan); box-shadow: 0 0 14px rgba(41, 199, 247, .45); }
/* светодиод на кнопке: когда звук включён — мигает, как индикатор на стойке */
.lmd-sound__btn::after { content: ""; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--lmd-green); box-shadow: 0 0 6px var(--lmd-green); opacity: 0; }
.lmd-sound__btn[aria-pressed="true"]::after { opacity: 1; animation: lmd-sound-led 1.4s steps(2, end) infinite; }
.lmd-sound__btn[data-armed="1"]:not([aria-pressed="true"])::after { opacity: 1; background: var(--lmd-amber); box-shadow: 0 0 6px var(--lmd-amber); }
@keyframes lmd-sound-led { 50% { opacity: .25; } }
/* регулятор — вертикальный и мелкий: обёртка 12x30, внутри обычный ползунок, повёрнутый на -90° (вверх — громче) */
.lmd-sound__volwrap { position: relative; display: block; width: 12px; height: 30px; flex: none; }
.lmd-sound__vol {
-webkit-appearance: none; appearance: none; position: absolute; left: 50%; top: 50%; width: 30px; height: 12px; margin: 0; background: transparent; cursor: pointer;
transform: translate(-50%, -50%) rotate(-90deg);
}
.lmd-sound__vol::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgba(96, 156, 255, .3), var(--lmd-cyan)); }
.lmd-sound__vol::-moz-range-track { height: 2px; border-radius: 1px; background: linear-gradient(90deg, rgba(96, 156, 255, .3), var(--lmd-cyan)); }
.lmd-sound__vol::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 8px; margin-top: -3px; border-radius: 50%; background: #dff6ff; border: 0; box-shadow: 0 0 6px var(--lmd-cyan); }
.lmd-sound__vol::-moz-range-thumb { width: 8px; height: 8px; border-radius: 50%; background: #dff6ff; border: 0; box-shadow: 0 0 6px var(--lmd-cyan); }
.lmd-sound__vol:focus-visible { outline: 1px solid var(--lmd-cyan); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .lmd-sound__btn[aria-pressed="true"]::after { animation: none; } }
/* ---------- Редактор Markdown (тикеты, ответы, база знаний): панель кнопок была белой и светлые кнопки на ней не читались ---------- */
html .md-editor { border: 1px solid var(--lmd-line); border-radius: 8px; background: transparent; }
html .md-editor.active { border-color: var(--lmd-line-strong); box-shadow: 0 0 0 1px rgba(41, 199, 247, .25), 0 0 20px rgba(41, 199, 247, .12); }
/* у родителя на панель кнопок стоит background-color: #fff !important, на линии у поля ввода — #ddd !important, подвал — светло-серый: перебиваем тем же способом */
html .md-editor > .md-header, html .md-editor > .btn-toolbar { background-color: rgba(255, 255, 255, .04) !important; border-bottom: 1px solid var(--lmd-line); border-radius: 8px 8px 0 0; padding: 8px 8px 3px; color: var(--lmd-text); }
html .md-editor > .md-preview, html .md-editor > textarea.markdown-editor { border-top: 1px solid var(--lmd-line) !important; border-bottom: 1px solid var(--lmd-line) !important; }
html .md-editor .md-footer { background: rgba(255, 255, 255, .03); border-top: 0; border-radius: 0 0 8px 8px; color: var(--lmd-muted); }
html .md-editor .md-footer * { color: var(--lmd-muted); }
html .md-editor .md-controls .md-control { color: var(--lmd-muted); }
html .md-editor .md-controls .md-control:hover { color: var(--lmd-cyan); }
/* полноэкранный режим редактора (по умолчанию белый лист) */
html .md-editor.md-fullscreen-mode { background: var(--lmd-ink) !important; }
html .md-editor.md-fullscreen-mode .md-input, html .md-editor.md-fullscreen-mode .md-preview { background: transparent !important; color: var(--lmd-text) !important; }
html .md-editor.md-fullscreen-mode .md-header { background: transparent !important; }
html .md-editor.md-fullscreen-mode .btn { background: rgba(41, 199, 247, .08); border: 1px solid rgba(41, 199, 247, .45); color: #d8f3ff; }
html .md-editor.md-fullscreen-mode .md-fullscreen-controls a { color: var(--lmd-muted); }
html .md-editor.md-fullscreen-mode .md-fullscreen-controls a:hover { color: var(--lmd-cyan); }
html .md-editor > .md-header .btn-group { margin: 0 6px 5px 0; }
html .md-editor > .md-header .btn { background: rgba(41, 199, 247, .08); border: 1px solid rgba(41, 199, 247, .45); color: #d8f3ff; box-shadow: none; }
html .md-editor > .md-header .btn:hover, html .md-editor > .md-header .btn:focus { background: rgba(41, 199, 247, .22); border-color: var(--lmd-cyan); color: #fff; box-shadow: 0 0 14px rgba(41, 199, 247, .45); }
html .md-editor > .md-header .btn.active, html .md-editor > .md-header .btn:active { background: rgba(41, 199, 247, .30); color: #fff; }
html .md-editor > .md-header .btn-primary { background: linear-gradient(135deg, #1cc3ff 0%, #3a6bff 100%); border-color: rgba(150, 225, 255, .7); color: #fff; }
html .md-editor .md-control-fullscreen { color: var(--lmd-muted); }
html .md-editor .md-control-fullscreen:hover { color: var(--lmd-cyan); }
html .md-editor > textarea.markdown-editor { border: 0; border-radius: 0 0 8px 8px; }
html .md-editor.md-fullscreen-mode { background: var(--lmd-ink); }
/* ---------- Выбор файла (вложения к тикету и т. п.): Bootstrap custom-file был белым ---------- */
html .custom-file-label { background-color: rgba(6, 12, 32, .82); border: 1px solid var(--lmd-line); color: var(--lmd-muted); border-radius: 6px 0 0 6px; }
html .custom-file-label::after { background: rgba(41, 199, 247, .12); color: #d8f3ff; border-left: 1px solid var(--lmd-line); }
html .custom-file-input:focus ~ .custom-file-label { border-color: var(--lmd-cyan); box-shadow: 0 0 0 1px rgba(41, 199, 247, .35), 0 0 16px rgba(41, 199, 247, .25); }
/* ---------- Кнопка «Вход через Google»: Google Identity Services рисует её сам (белый прямоугольник с серой рамкой). Тёмное стекло с голубой неоновой рамкой;
цветной логотип «G» остаётся как есть. Классы nsm7Bb-… — внутренние классы Google, если они сменятся, кнопка просто станет прежней белой. ---------- */
html .g_id_signin.btn, html .g_id_signin.btn:hover, html .g_id_signin.btn:focus { background: transparent !important; border-color: transparent !important; box-shadow: none !important; filter: none; }
html .g_id_signin .nsm7Bb-HzV7m-LgbsSe {
background-color: rgba(6, 12, 32, .9); border: 1px solid rgba(41, 199, 247, .55); border-radius: 8px;
box-shadow: 0 0 16px rgba(41, 199, 247, .25); transition: border-color .2s ease, box-shadow .2s ease;
}
html .g_id_signin .nsm7Bb-HzV7m-LgbsSe:hover { border-color: var(--lmd-cyan); box-shadow: 0 0 24px rgba(41, 199, 247, .6); }
html .g_id_signin .nsm7Bb-HzV7m-LgbsSe [class*="nsm7Bb-HzV7m-LgbsSe-BPrW"] { color: #e4ebff; font-family: var(--lmd-font-display); font-weight: 500; }
/* на странице входа и оформлении заказа кнопка живёт в iframe (внутрь стили не пускают): тема Google «filled_black» задаётся из js/lmd-fx.js, а белая подложка
вокруг — это фон iframe из-за color-scheme: dark у страницы; чтобы он остался прозрачным, iframe объявлен «светлым» */
html .g_id_signin iframe { color-scheme: light; border-radius: 8px; filter: drop-shadow(0 0 8px rgba(41, 199, 247, .45)); }
/* ---------- Корзина: «Обновить» у количества — в шаблоне это просто .btn.btn-xs без варианта (тёмный текст на тёмном); оформляем как остальные контурные кнопки ---------- */
html #order-standard_cart .view-cart-items .btn.btn-xs:not(.btn-link):not(.btn-default):not(.btn-primary):not(.btn-success):not(.btn-danger) {
background: rgba(41, 199, 247, .07); border: 1px solid rgba(41, 199, 247, .6); color: #bfeeff;
box-shadow: 0 0 12px rgba(41, 199, 247, .25), inset 0 0 14px rgba(41, 199, 247, .08);
}
html #order-standard_cart .view-cart-items .btn.btn-xs:not(.btn-link):not(.btn-default):not(.btn-primary):not(.btn-success):not(.btn-danger):hover {
background: rgba(41, 199, 247, .18); border-color: var(--lmd-cyan); color: #fff;
box-shadow: 0 0 22px rgba(41, 199, 247, .65), 0 0 46px rgba(41, 199, 247, .25), inset 0 0 16px rgba(41, 199, 247, .14);
}
/* ---------- Поиск домена в форме заказа: кнопки «Add» у плиток зон и в «Suggested Domains» (штатный CSS красит их в серый) ---------- */
html #order-standard_cart .spotlight-tld .btn:not(.domain-contact-support):not(.unavailable):not(.invalid),
html #order-standard_cart .suggested-domains .btn:not(.domain-contact-support):not(.unavailable):not(.invalid) {
background: linear-gradient(135deg, #1cc3ff 0%, #3a6bff 100%); border: 1px solid rgba(150, 225, 255, .7); border-radius: 6px; color: #fff; font-weight: 600;
box-shadow: 0 0 0 1px rgba(41, 199, 247, .30), 0 0 12px rgba(41, 199, 247, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
transition: box-shadow .2s ease;
}
html #order-standard_cart .spotlight-tld .btn:not(.domain-contact-support):not(.unavailable):not(.invalid):hover,
html #order-standard_cart .suggested-domains .btn:not(.domain-contact-support):not(.unavailable):not(.invalid):hover {
box-shadow: 0 0 0 1px rgba(41, 199, 247, .6), 0 0 20px rgba(41, 199, 247, .9), 0 0 40px rgba(41, 199, 247, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
}
html #order-standard_cart .spotlight-tld .btn.checkout, html #order-standard_cart .suggested-domains .btn.checkout {
background: linear-gradient(135deg, #22f0a0 0%, #0fc27f 100%); border-color: rgba(160, 255, 215, .7); color: #02170e;
box-shadow: 0 0 0 1px rgba(53, 240, 160, .30), 0 0 12px rgba(53, 240, 160, .5), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html #order-standard_cart .spotlight-tld .btn.unavailable, html #order-standard_cart .spotlight-tld .btn.invalid { background: rgba(255, 255, 255, .04); border-color: var(--lmd-line); color: var(--lmd-muted); }
/* ---------- Настройка домена: панели-дополнения (DNS-управление, защита ID …) — стекло с зелёной неоновой полосой «Add to Cart» ---------- */
html #order-standard_cart .panel-addon { overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease; }
html #order-standard_cart .panel-addon:hover { border-color: var(--lmd-line-strong); box-shadow: 0 0 24px rgba(41, 199, 247, .18); }
html #order-standard_cart .panel-addon .panel-body { color: var(--lmd-muted); }
html #order-standard_cart .panel-addon .panel-body label { color: #fff; }
html #order-standard_cart .panel-addon .panel-price { border-top: 1px solid var(--lmd-line); color: var(--lmd-text); }
html #order-standard_cart .panel-addon .panel-add, html #order-standard_cart .panel-addon-selected .panel-add {
background: linear-gradient(135deg, #22f0a0 0%, #0fc27f 100%); color: #02170e; font-weight: 700; padding: 8px; border-radius: 0;
box-shadow: 0 0 16px rgba(53, 240, 160, .45), inset 0 1px 0 rgba(255, 255, 255, .35); transition: box-shadow .2s ease;
}
html #order-standard_cart .panel-addon:hover .panel-add { box-shadow: 0 0 26px rgba(53, 240, 160, .9), 0 0 50px rgba(53, 240, 160, .35), inset 0 1px 0 rgba(255, 255, 255, .4); }
/* ---------- Плитки главной: одинаковая высота в ряду независимо от длины описания ---------- */
/* у родителя это CSS-колонки (column-count): плитки получают высоту по своему тексту. Сетка тянет плитки ряда до одной высоты, кнопка прижата к низу */
/* grid-auto-rows: 1fr — все ряды одной высоты (по самой высокой плитке), а не только плитки внутри ряда */
.card-columns.home { display: grid; column-count: auto; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); grid-auto-rows: 1fr; gap: 1.25rem; }
.card-columns.home .card { display: flex; flex-direction: column; width: auto; margin: 0 !important; }
.card-columns.home .card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.card-columns.home .card-body > .btn { margin-top: auto; }
/* ---------- Каталог: карточки товаров, тарифные колонки и кнопки «сетка/список» — те же угловые скобки HUD и подсветка, что у плиток главной ---------- */
/* заливка карточки задана переменной --lmd-fill (последний слой фона), скобки рисуют восемь верхних слоёв; на наведении скобки раскрываются (--lmd-bs) */
html #order-standard_cart .products .product,
html #order-premium_comparison .price-table-container .price-table,
html .modal-localisation .modal-content, html .modal-localisation .item-selector .item,
html .lmd-view-toggle button, html .lmd-view-toggle button[aria-pressed="true"] {
--lmd-b: rgba(41, 199, 247, .8); --lmd-bs: 12px;
border-radius: 6px;
background:
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 0 / var(--lmd-bs) 1px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 0 / 1px var(--lmd-bs) no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 0 / var(--lmd-bs) 1px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 0 / 1px var(--lmd-bs) no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 100% / var(--lmd-bs) 1px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 100% / 1px var(--lmd-bs) no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 100% / var(--lmd-bs) 1px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 100% / 1px var(--lmd-bs) no-repeat,
var(--lmd-fill);
transition: background-size .25s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
html #order-standard_cart .products .product { --lmd-fill: linear-gradient(180deg, rgba(22, 38, 90, .5), rgba(10, 18, 48, .7)); }
html #order-premium_comparison .price-table-container .price-table { --lmd-fill: linear-gradient(180deg, rgba(22, 38, 90, .55), rgba(10, 18, 48, .82)); }
html .lmd-view-toggle button { --lmd-bs: 6px; --lmd-fill: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)); }
html .lmd-view-toggle button[aria-pressed="true"] { --lmd-fill: linear-gradient(var(--lmd-cyan-soft), var(--lmd-cyan-soft)); }
html #order-standard_cart .products .product:hover, html #order-premium_comparison .price-table-container .price-table:hover { --lmd-bs: 22px; }
html .lmd-view-toggle button:hover, html .lmd-view-toggle button:focus-visible { --lmd-bs: 11px; }
html #order-standard_cart .products .product:hover { transform: translateY(-3px); border-color: var(--lmd-line-strong); box-shadow: 0 22px 50px rgba(0, 0, 0, .5), 0 0 34px rgba(41, 199, 247, .14); }
html .lmd-view-toggle button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .4), 0 0 16px rgba(41, 199, 247, .22); }
html #order-premium_comparison .price-table-container .price-table .top-head { border-radius: 5px 5px 0 0; }
/* колонки тарифов одной высоты (как бы ни отличалось содержимое), популярный тариф выступает вверх на 26px, низ у всех общий.
Плашка «Most popular» лежит в этой выступающей полосе над шапкой (а не между названием и ценой, как в исходной разметке), поэтому название,
цена, кнопка и строки характеристик у всех колонок стоят на одном уровне — цены удобно сравнивать.
Популярный в разметке отмечен только блоком .popular-plan (класса .active у него нет), поэтому ищем через :has(). */
html #order-premium_comparison .price-table-container > ul { padding-top: 26px; row-gap: 40px; align-items: stretch; }
html #order-premium_comparison .price-table-container > ul > li { display: flex; }
html #order-premium_comparison .price-table-container .price-table { display: flex; flex-direction: column; height: 100%; position: relative; }
html #order-premium_comparison .price-table-container .price-table > ul { flex: 1 1 auto; }
html #order-premium_comparison .price-table-container .price-table:has(.popular-plan), html #order-premium_comparison .price-table-container .price-table.active { margin-top: -26px; border-color: rgba(41, 199, 247, .7); box-shadow: 0 14px 40px rgba(0, 0, 0, .45), 0 0 34px rgba(41, 199, 247, .28); }
html #order-premium_comparison .price-table-container .price-table:has(.popular-plan) .top-head, html #order-premium_comparison .price-table-container .price-table.active .top-head { padding-top: 26px; }
/* высота «100% + 26px» при сдвиге на -26px: верх выше на 26px, низ общий со всеми колонками */
html #order-premium_comparison .price-table-container .price-table:has(.popular-plan), html #order-premium_comparison .price-table-container .price-table.active { height: calc(100% + 26px); }
html #order-premium_comparison .price-table-container .price-table .popular-plan {
position: absolute; top: 0; left: 0; right: 0; height: 26px; margin: 0; padding: 0;
display: flex; align-items: center; justify-content: center; font-size: .72rem; line-height: 1; letter-spacing: .08em; border-radius: 5px 5px 0 0;
}
@media (prefers-reduced-motion: reduce) { html #order-standard_cart .products .product, html .lmd-view-toggle button { transition: none; } }
/* ================= Цены на домены (/domain/pricing) и плитки зон =================
Плитки сверху и категории зон — те же эффекты при наведении, что у плиток главной (скобки HUD, подсветка границы под курсором, подъём);
строка зоны и плитка — ссылка в форму регистрации домена (зону в поле подставляет js/lmd-fx.js). */
a.lmd-tld-link, a.lmd-tld-link:hover, a.lmd-tld-link:focus { color: inherit; text-decoration: none; }
a.lmd-tld-tile { display: block; border-radius: 12px; }
a.lmd-tld-tile:focus-visible { outline: 2px solid var(--lmd-cyan); outline-offset: 3px; }
/* логотип и цена приглушены синевой: светлая подложка плитки не слепит на тёмной теме, логотип «вплавлен» в неё, плашка цены темнее и спокойнее */
.featured-tld .img-container { background: #98a9d8; }
.featured-tld .img-container img { mix-blend-mode: multiply; }
.featured-tld .price { filter: saturate(.7) brightness(.68); transition: filter .25s ease; }
.featured-tld:hover .price { filter: saturate(.95) brightness(.92); }
.featured-tld .lmd-hud {
--lmd-b: rgba(41, 199, 247, .9); --lmd-bs: 14px;
position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
background:
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 0 / var(--lmd-bs) 2px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 0 / 2px var(--lmd-bs) no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 0 / var(--lmd-bs) 2px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 0 / 2px var(--lmd-bs) no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 100% / var(--lmd-bs) 2px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 0 100% / 2px var(--lmd-bs) no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 100% / var(--lmd-bs) 2px no-repeat,
linear-gradient(var(--lmd-b), var(--lmd-b)) 100% 100% / 2px var(--lmd-bs) no-repeat;
transition: background-size .25s ease;
}
.featured-tld:hover .lmd-hud, a.lmd-tld-tile:focus-visible .lmd-hud { --lmd-bs: 28px; }
/* категории зон: чипы с теми же скобками и подсветкой границы под курсором */
.tld-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.tld-filters a.badge {
--lmd-bs: 7px; padding: 8px 14px; margin: 0; font-size: .86rem; font-weight: 500; line-height: 1.2; color: var(--lmd-text);
border: 1px solid var(--lmd-line); text-decoration: none; transition: background-size .25s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.tld-filters a.badge:hover, .tld-filters a.badge:focus-visible {
--lmd-bs: 12px; color: #fff; border-color: var(--lmd-line-strong); transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, .4), 0 0 20px rgba(41, 199, 247, .18);
}
.tld-filters a.badge.badge-success { color: #fff; border-color: var(--lmd-cyan); box-shadow: 0 0 16px rgba(41, 199, 247, .5), inset 0 0 18px rgba(41, 199, 247, .22); }
/* поле поиска таблицы: с лупой и подписью (placeholder ставит шаблон) */
html .dataTables_wrapper .dataTables_filter input[type="search"] {
min-width: 280px; padding-left: 38px; background-color: rgba(6, 12, 32, .82); color: var(--lmd-text); border: 1px solid var(--lmd-line-strong); border-radius: 8px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2329c7f7' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M20 20l-4.8-4.8'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: 12px center;
}
html .dataTables_wrapper .dataTables_filter input[type="search"]::placeholder { color: var(--lmd-muted); opacity: 1; }
html .dataTables_wrapper .dataTables_filter input[type="search"]:focus { border-color: var(--lmd-cyan); box-shadow: 0 0 0 1px rgba(41, 199, 247, .4), 0 0 18px rgba(41, 199, 247, .3); }
/* строки таблицы — кликабельны (ведут в форму регистрации) */
#tableDomainPricing tbody tr { cursor: pointer; }
#tableDomainPricing tbody td:first-child a.lmd-tld-link { font-weight: 600; color: #fff; transition: color .2s ease, text-shadow .2s ease; }
#tableDomainPricing tbody tr:hover td:first-child a.lmd-tld-link, #tableDomainPricing tbody td:first-child a.lmd-tld-link:focus-visible { color: var(--lmd-cyan); text-shadow: 0 0 12px rgba(41, 199, 247, .55); }
@media (prefers-reduced-motion: reduce) { .featured-tld .price, .featured-tld .lmd-hud, .tld-filters a.badge { transition: none; } }
/* ================= Мобильная шапка и меню (ниже 1200px — там, где родитель сворачивает меню в «бургер») =================
Логотип слева, корзина и бургер справа одним рядом (кнопки 44px — по пальцу), меню раскрывается панелью с крупными строками;
подменю — вложенные блоки под своим пунктом, шеврон поворачивается; вместо бургера при открытии — крестик (по aria-expanded). */
@media (max-width: 1199.98px) {
html .header .navbar.navbar-light > .container { flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
html .header .navbar-brand { margin: 0 !important; padding: 0; flex: 0 1 auto; min-width: 0; }
html .header .navbar-brand .logo-img { max-height: 40px; width: auto; max-width: 100%; }
html .header .toolbar { flex: none; flex-direction: row; align-items: center; margin: 0 0 0 auto; }
html .header .toolbar .nav-item { margin-left: 8px !important; }
html .header .toolbar .cart-btn .fa-shopping-cart { margin: 0 !important; }
html .header .toolbar .btn.nav-link {
position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; font-size: .95rem;
border-radius: 10px; border: 1px solid var(--lmd-line-strong); background: rgba(41, 199, 247, .07); color: #d8f3ff; overflow: visible;
}
html .header .toolbar .btn.nav-link:hover, html .header .toolbar .btn.nav-link[aria-expanded="true"] {
border-color: var(--lmd-cyan); color: #fff; box-shadow: 0 0 14px rgba(41, 199, 247, .45);
}
/* счётчик корзины — внутри кнопки, в её верхнем углу (раньше вылезал за границу и обрезался), цифра крупная и читаемая */
html .header .toolbar #cartItemCount { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: .66rem; line-height: 16px; font-weight: 700; text-align: center; }
html .header .toolbar button[data-target="#mainNavbar"][aria-expanded="true"] .fa-bars::before { content: "\f00d"; }
/* панель меню */
html .header .main-navbar-wrapper { padding: 0; }
html .header .main-navbar-wrapper > .container { padding: 0; max-width: none; }
html .header #mainNavbar { padding: 12px 14px 18px; max-height: calc(100vh - 72px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: rgba(5, 10, 24, .97); }
html .header #mainNavbar .navbar-nav { width: 100%; margin: 0 !important; flex-direction: column; }
html .header #mainNavbar .navbar-nav + .navbar-nav { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--lmd-line); }
html .header #mainNavbar .navbar-nav > li > .nav-link, html .header #mainNavbar .navbar-nav > li > a {
display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: 2px 0; padding: 12px 14px; border: 1px solid transparent; border-radius: 10px;
font-size: 1.02rem; color: var(--lmd-text); min-height: 46px;
}
html .header #mainNavbar .navbar-nav > li > .nav-link:hover, html .header #mainNavbar .navbar-nav > li.show > .nav-link, html .header #mainNavbar .navbar-nav > li.active > .nav-link {
background: var(--lmd-cyan-soft); border-color: var(--lmd-line); color: #fff;
}
html .header #mainNavbar .dropdown-toggle::after { margin-left: auto; transition: transform .2s ease; }
html .header #mainNavbar .show > .dropdown-toggle::after { transform: rotate(180deg); }
html .header #mainNavbar .dropdown-menu {
position: static !important; float: none; width: 100%; margin: 2px 0 8px; padding: 4px 0 4px 12px; transform: none !important;
background: transparent; border: 0; border-left: 1px solid var(--lmd-line-strong); border-radius: 0; box-shadow: none;
}
/* пункт подменю в разметке —
: отступы и высоту несёт только ссылка, иначе они складываются */
html .header #mainNavbar li.dropdown-item { display: block; min-height: 0; padding: 0; background: transparent; }
html .header #mainNavbar a.dropdown-item { display: flex; align-items: center; min-height: 44px; padding: 9px 14px !important; border-radius: 8px; color: #c4d2f5; white-space: normal; }
html .header #mainNavbar a.dropdown-item:hover, html .header #mainNavbar a.dropdown-item:focus, html .header #mainNavbar li.dropdown-item:hover { background: var(--lmd-cyan-soft); color: #fff; }
html .header #mainNavbar .dropdown-divider { border-color: var(--lmd-line); margin: 6px 0; }
html .header #mainNavbar form.form-inline { width: 100%; margin: 0 0 12px; }
html .header #mainNavbar form.form-inline .input-group { width: 100%; }
}
/* ---------- Выбор домена при заказе услуги: одно общее поле «example.com» вместо «www. + имя + зона ▼» (js/lmd-fx.js → initDomainSingleInput) ---------- */
html #order-standard_cart .lmd-domain-single .input-group-prepend { display: none; }
html #order-standard_cart .lmd-domain-single .domains-row > [class*="col-"]:has(select), html #order-standard_cart .lmd-domain-single .domains-row > [class*="col-"]:has(#owndomaintld) { display: none; }
html #order-standard_cart .lmd-domain-single .domains-row > [class*="col-"]:has(.input-group) { flex: 0 0 100%; max-width: 100%; }
html #order-standard_cart .lmd-domain-single .input-group > .form-control { border-radius: 8px !important; }
html #order-standard_cart .lmd-domain-err { margin: 10px 0 0; padding: 8px 12px; border-left: 2px solid var(--lmd-red); border-radius: 6px; background: rgba(255, 92, 114, .10); color: #ffb3bf; font-size: .88rem; }
html #order-standard_cart .lmd-domain-err[hidden] { display: none; }
/* ---------- Окно выбора языка и валюты и кнопка-глобус, которая его открывает ----------
Окно — то же стекло с угловыми скобками HUD, что у карточек (карта мира родителя убрана); кнопки языков и валют — маленькие плитки со скобками,
на наведении скобки раскрываются, выбранная подсвечена; сетка из семи столбцов — языки укладываются в четыре ряда. */
html .modal-localisation .modal-content { --lmd-bs: 18px; --lmd-fill: linear-gradient(180deg, rgba(18, 32, 78, .97), rgba(8, 14, 40, .98)); border-radius: 8px; border-color: var(--lmd-line); }
html .modal-localisation .modal-dialog { max-width: 900px; }
html .modal-localisation .modal-body { background: none; padding: 24px 26px 6px; }
html .modal-localisation .modal-footer { border: 0; padding: 0 26px 22px; }
html .modal-localisation .modal-body > .close { position: absolute; top: 10px; right: 14px; z-index: 2; }
html .modal-localisation .lmd-loc__title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 0; font-family: var(--lmd-font-display); font-size: 1.05rem; font-weight: 600; color: #fff; }
html .modal-localisation .lmd-loc__title i { color: var(--lmd-cyan); filter: drop-shadow(0 0 7px rgba(41, 199, 247, .55)); }
html .modal-localisation .lmd-loc__title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--lmd-line-strong), transparent); }
html .modal-localisation .item-selector { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 0 0 24px; }
html .modal-localisation .item-selector > [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0; }
html .modal-localisation .item-selector .item {
--lmd-bs: 6px; --lmd-fill: linear-gradient(rgba(255, 255, 255, .045), rgba(255, 255, 255, .045));
display: flex; align-items: center; justify-content: center; min-height: 38px; margin: 0; padding: 6px 6px;
border: 1px solid var(--lmd-line); border-radius: 6px; font-size: .86rem; line-height: 1.15; text-align: center; text-decoration: none;
}
html .modal-localisation .item-selector .item:hover, html .modal-localisation .item-selector .item:focus-visible {
--lmd-bs: 12px; --lmd-fill: linear-gradient(var(--lmd-cyan-soft), var(--lmd-cyan-soft));
background-color: transparent; border-color: var(--lmd-line-strong); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .4), 0 0 14px rgba(41, 199, 247, .22);
}
html .modal-localisation .item-selector .item.active {
--lmd-b: #7fe6ff; --lmd-bs: 10px; --lmd-fill: linear-gradient(135deg, rgba(41, 199, 247, .30), rgba(58, 107, 255, .30));
background-color: transparent; border-color: var(--lmd-cyan); box-shadow: 0 0 16px rgba(41, 199, 247, .35), inset 0 0 12px rgba(41, 199, 247, .12);
}
@media (max-width: 991.98px) { html .modal-localisation .item-selector { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
html .modal-localisation .item-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
html .modal-localisation .modal-body { padding: 22px 16px 4px; }
html .modal-localisation .modal-footer { padding: 0 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { html .modal-localisation .item-selector .item:hover { transform: none; } }
html .lmd-lang-btn, html .lmd-lang-btn:focus {
display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 1rem; line-height: 1;
background: rgba(255, 255, 255, .05); border: 1px solid var(--lmd-line); color: var(--lmd-cyan); box-shadow: none; text-shadow: none;
}
html .lmd-lang-btn i { filter: drop-shadow(0 0 6px rgba(41, 199, 247, .55)); }
html .lmd-lang-btn:hover { background: rgba(41, 199, 247, .12); border-color: var(--lmd-cyan); color: #fff; box-shadow: 0 0 16px rgba(41, 199, 247, .45); transform: none; }
/* ---------- Шапка: поиск по базе знаний и кнопки корзины/меню — в стиле темы и одной высоты (родитель рисовал их светло-серыми рамками разной высоты) ---------- */
html .header .search {
width: 325px; height: 38px; flex-wrap: nowrap; align-items: stretch; overflow: hidden;
border: 1px solid var(--lmd-line-strong); border-radius: 10px; background: rgba(41, 199, 247, .07);
transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
html .header .search:focus-within { border-color: var(--lmd-cyan); background: rgba(41, 199, 247, .11); box-shadow: 0 0 16px rgba(41, 199, 247, .35); }
html .header .search .input-group-prepend { display: flex; }
html .header .search .btn, html .header .search .btn:hover, html .header .search .btn:focus, html .header .search .form-control, html .header .search .form-control:focus {
height: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; outline: 0;
}
html .header .search .btn { width: 40px; padding: 0; color: var(--lmd-cyan); }
html .header .search .btn:hover { color: #fff; }
html .header .search .form-control { padding: 0 12px 0 2px; color: #fff; font-size: .92rem; }
html .header .search .form-control::placeholder { color: #8ea2d6; opacity: 1; }
@media (min-width: 1200px) {
html .header .navbar.navbar-light > .container { align-items: center; }
html .header .toolbar { align-items: center; }
html .header form.form-inline { margin-top: 0; margin-bottom: 0; } /* у родителя 14px сверху и 22px снизу — форма поиска была на 4px выше центра, а корзина по центру */
html .header .toolbar .nav-item { display: flex; align-items: center; margin-left: 12px !important; }
html .header .toolbar .btn.nav-link {
position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; font-size: .95rem;
border-radius: 10px; border: 1px solid var(--lmd-line-strong); background: rgba(41, 199, 247, .07); color: #d8f3ff; overflow: visible;
}
html .header .toolbar .btn.nav-link:hover { border-color: var(--lmd-cyan); color: #fff; box-shadow: 0 0 14px rgba(41, 199, 247, .45); transform: none; }
html .header .toolbar .cart-btn .fa-shopping-cart { margin: 0 !important; }
html .header .toolbar #cartItemCount { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: .66rem; line-height: 16px; font-weight: 700; text-align: center; opacity: 1; }
}