.
Из-за этого на него не попадали отступы, заданные для li > a, и пункт
вставал выше или ниже соседних — казалось, что раздел «подпрыгивает». */
.site-header .top-menu ul li > .removed-link{
position:relative;
display:inline-block;
padding:6px 10px 8px;
color:#fff;
font-size:inherit;
font-weight:inherit;
line-height:inherit;
vertical-align:baseline;
cursor:default;
}
.site-header .top-menu ul li > .removed-link:after{
content:"";
position:absolute;
left:10px;
right:10px;
bottom:2px;
height:2px;
border-radius:2px;
background:rgba(255,255,255,.55);
}
#site-navigation .menu > li > .removed-link{
position:relative;
display:inline-block;
padding:16px 12px;
color:var(--al-primary);
font-size:inherit;
font-weight:inherit;
line-height:inherit;
vertical-align:baseline;
cursor:default;
}
#site-navigation .menu > li > .removed-link:after{
content:"";
position:absolute;
left:12px;
right:12px;
bottom:8px;
height:2px;
border-radius:2px;
background:var(--al-primary);
}
/* ---------- 19. Кабинет: вход и регистрация ---------- */
.aliviy-auth{
max-width:520px;
margin:0 auto;
}
.aliviy-auth__gift{
display:flex;
align-items:flex-start;
gap:12px;
margin:0 0 20px;
padding:14px 18px;
background:var(--al-tint-100);
border:1px solid var(--al-line);
border-left:3px solid var(--al-primary);
border-radius:var(--al-radius-md);
line-height:1.5;
font-size:.95em;
}
.aliviy-auth__gift strong{color:var(--al-primary)}
.aliviy-auth__gift-icon{
flex:0 0 22px;
width:22px;
height:22px;
margin-top:1px;
background:var(--al-grad);
-webkit-mask:var(--al-spark-shape) center/contain no-repeat;
mask:var(--al-spark-shape) center/contain no-repeat;
}
/* Переключатель форм: сегментированная кнопка, а не две вкладки-ссылки —
так видно, что это два состояния одной карточки. */
.aliviy-auth__tabs{
display:flex;
gap:4px;
padding:4px;
margin:0 0 22px;
background:var(--al-tint-100);
border:1px solid var(--al-line-soft);
border-radius:999px;
}
.aliviy-auth__tab{
flex:1 1 50%;
padding:10px 16px;
border:0;
border-radius:999px;
background:none;
color:var(--al-ink-soft);
font:inherit;
font-weight:600;
line-height:1.2;
cursor:pointer;
transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.aliviy-auth__tab:hover{color:var(--al-primary)}
.aliviy-auth__tab.is-active{
background:var(--al-grad-btn);
color:#fff;
box-shadow:0 6px 16px rgba(76,53,222,.24);
}
/* Карточка формы. Селекторы удвоены: тема печатает свои правила инлайном
в , и при равной специфичности выигрывает она. */
.aliviy-auth .woocommerce-form.woocommerce-form,
.aliviy-auth form.login.login,
.aliviy-auth form.register.register{
margin:0;
padding:26px 28px 22px;
background:#fff;
border:1px solid var(--al-line);
border-radius:var(--al-radius-lg);
box-shadow:0 10px 30px rgba(76,53,222,.09);
color:var(--al-ink);
}
.aliviy-auth .form-row{
margin:0 0 16px;
padding:0;
display:block;
}
.aliviy-auth label{
display:block;
margin:0 0 6px;
color:var(--al-ink);
font-weight:600;
font-size:.92em;
}
.aliviy-auth .required{color:var(--al-accent);text-decoration:none}
.aliviy-auth input[type="text"],
.aliviy-auth input[type="email"],
.aliviy-auth input[type="password"]{
width:100%;
padding:12px 14px;
background:#fff;
border:1px solid var(--al-line);
border-radius:var(--al-radius-sm);
color:var(--al-ink);
font:inherit;
line-height:1.3;
transition:border-color .16s ease,box-shadow .16s ease;
}
.aliviy-auth input[type="text"]:focus,
.aliviy-auth input[type="email"]:focus,
.aliviy-auth input[type="password"]:focus{
outline:none;
border-color:var(--al-primary);
box-shadow:0 0 0 3px var(--al-tint-200);
}
.aliviy-auth__hint{
display:block;
margin:7px 0 0;
color:var(--al-ink-muted);
font-size:.85em;
line-height:1.4;
font-weight:400;
}
/* Кнопка отправки — та же, что и везде на сайте */
.aliviy-auth button[type="submit"].button{
width:100%;
margin:2px 0 0;
padding:13px 22px;
background:var(--al-grad-btn);
border:0;
border-radius:999px;
color:#fff;
font:inherit;
font-weight:600;
line-height:1.2;
text-decoration:none;
cursor:pointer;
box-shadow:0 8px 20px rgba(76,53,222,.26);
transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.aliviy-auth button[type="submit"].button:hover{
filter:brightness(1.06);
box-shadow:0 10px 26px rgba(76,53,222,.32);
}
.aliviy-auth button[type="submit"].button:active{transform:translateY(1px)}
/* Кнопки генератора пароля: вторичные, не спорят с основной */
.aliviy-pass-tools{
display:flex;
gap:8px;
margin:9px 0 0;
}
.aliviy-pass-btn{
padding:7px 13px;
background:var(--al-tint-100);
border:1px solid var(--al-line);
border-radius:999px;
color:var(--al-primary);
font:inherit;
font-size:.84em;
font-weight:600;
line-height:1.2;
cursor:pointer;
transition:background .16s ease,border-color .16s ease;
}
.aliviy-pass-btn:hover{background:var(--al-tint-200);border-color:var(--al-primary)}
/* «Запомнить меня» и кнопка входа в одной строке не помещаются на телефоне */
.aliviy-auth .woocommerce-form-login__rememberme{
display:flex;
align-items:center;
gap:8px;
margin:0 0 14px;
font-weight:400;
}
.aliviy-auth .woocommerce-form-login__rememberme input{margin:0}
.aliviy-auth .lost_password{margin:16px 0 0;text-align:center}
.aliviy-auth .lost_password a{color:var(--al-primary);font-size:.92em}
/* Ловушка для ботов: убираем с глаз, но не через display:none —
скрытые поля автоматы как раз пропускают */
.aliviy-auth__trap{
position:absolute;
left:-9999px;
width:1px;
height:1px;
overflow:hidden;
}
.aliviy-auth .aliviy-turnstile{margin:0 0 16px}
/* Сообщения WooCommerce над формой */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info{
max-width:520px;
margin:0 auto 18px;
padding:14px 18px 14px 20px;
border-radius:var(--al-radius-md);
border:1px solid var(--al-line);
border-left:3px solid var(--al-primary);
background:var(--al-tint-100);
color:var(--al-ink);
list-style:none;
line-height:1.5;
}
.woocommerce-error{
border-color:var(--al-danger-line);
border-left-color:var(--al-danger);
background:var(--al-danger-bg);
}
.woocommerce-error li{margin:0 0 4px}
.woocommerce-error li:last-child{margin:0}
@media (max-width:520px){
.aliviy-auth .woocommerce-form.woocommerce-form{padding:20px 18px 18px}
.aliviy-auth__tab{padding:9px 10px;font-size:.95em}
.aliviy-pass-tools{flex-wrap:wrap}
}
/* Переключатель показа пароля. WooCommerce вставляет его внутрь поля, а
старый myaacount.css растягивает в форме любую кнопку на всю ширину —
под полем появлялась синяя полоса. Возвращаем его в поле значком. */
.aliviy-auth .password-input{
position:relative;
display:block;
}
.aliviy-auth .password-input input{padding-right:44px}
.aliviy-auth .show-password-input,
.aliviy-auth .password-input button,
.aliviy-auth form button:not([type="submit"]):not(.aliviy-pass-btn){
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
width:22px;
height:22px;
min-height:0;
padding:0;
background:none;
border:0;
border-radius:0;
box-shadow:none;
opacity:.5;
cursor:pointer;
transition:opacity .16s ease;
}
.aliviy-auth .show-password-input:hover,
.aliviy-auth .password-input button:hover{opacity:.9}
/* Текст про политику конфиденциальности — это сноска, а не абзац текста */
.aliviy-auth .woocommerce-privacy-policy-text{
margin:0 0 16px;
color:var(--al-ink-muted);
font-size:.85em;
line-height:1.45;
}
.aliviy-auth .woocommerce-privacy-policy-text p{margin:0}
.aliviy-auth .woocommerce-privacy-policy-text a{color:var(--al-primary)}
/* ---------- 20. Подтверждение почты ---------- */
.aliviy-verify{
margin:0 0 18px;
padding:14px 18px;
border:1px solid var(--al-line);
border-left:3px solid var(--al-primary);
border-radius:var(--al-radius-md);
background:var(--al-tint-100);
color:var(--al-ink);
font-size:.95em;
line-height:1.55;
}
.aliviy-verify a{color:var(--al-primary);font-weight:600}
.aliviy-verify--ok{
border-color:var(--al-ok-line);
border-left-color:var(--al-ok);
background:var(--al-ok-bg);
}
.aliviy-verify--wait{
border-color:var(--al-warn-line);
border-left-color:var(--al-warn);
background:var(--al-warn-bg);
}
.aliviy-verify--bad{
border-color:var(--al-danger-line);
border-left-color:var(--al-danger);
background:var(--al-danger-bg);
}
/* ---------- 21. Восстановление пароля ---------- */
/* Форма жила отдельной жизнью: поле шириной 233px посреди страницы в 1100px,
и капча рядом выглядела вчетверо шире поля. Приводим к той же карточке,
что вход и регистрация. */
.woocommerce-ResetPassword.lost_reset_password,
.woocommerce-ResetPassword.woocommerce-ResetPassword{
max-width:520px;
margin:0 auto;
padding:26px 28px 22px;
background:#fff;
border:1px solid var(--al-line);
border-radius:var(--al-radius-lg);
box-shadow:0 10px 30px rgba(76,53,222,.09);
color:var(--al-ink);
}
.woocommerce-ResetPassword .form-row{
margin:0 0 16px;
padding:0;
display:block;
}
.woocommerce-ResetPassword label{
display:block;
margin:0 0 6px;
color:var(--al-ink);
font-weight:600;
font-size:.92em;
}
.woocommerce-ResetPassword .required{color:var(--al-accent);text-decoration:none}
.woocommerce-ResetPassword input[type="text"],
.woocommerce-ResetPassword input[type="email"],
.woocommerce-ResetPassword input[type="password"]{
width:100%;
padding:12px 14px;
background:#fff;
border:1px solid var(--al-line);
border-radius:var(--al-radius-sm);
color:var(--al-ink);
font:inherit;
line-height:1.3;
transition:border-color .16s ease,box-shadow .16s ease;
}
.woocommerce-ResetPassword input:focus{
outline:none;
border-color:var(--al-primary);
box-shadow:0 0 0 3px var(--al-tint-200);
}
.woocommerce-ResetPassword button[type="submit"].button{
width:100%;
margin:2px 0 0;
padding:13px 22px;
background:var(--al-grad-btn);
border:0;
border-radius:999px;
color:#fff;
font:inherit;
font-weight:600;
line-height:1.2;
cursor:pointer;
box-shadow:0 8px 20px rgba(76,53,222,.26);
transition:box-shadow .16s ease,filter .16s ease,transform .16s ease;
}
.woocommerce-ResetPassword button[type="submit"].button:hover{
filter:brightness(1.06);
box-shadow:0 10px 26px rgba(76,53,222,.32);
}
.woocommerce-ResetPassword button[type="submit"].button:active{transform:translateY(1px)}
.woocommerce-ResetPassword .aliviy-turnstile{margin:0 0 16px}
/* Пояснение над формой — той же ширины, что и карточка */
.woocommerce-account .entry-content > p:has(+ .woocommerce-ResetPassword){
max-width:520px;
margin:0 auto 18px;
}
@media (max-width:520px){
.woocommerce-ResetPassword.lost_reset_password{padding:20px 18px 18px}
}
/* Значок подарка: эмодзи вместо фирменной искры — просили именно его.
Маску сбрасываем, иначе символ был бы закрашен градиентом. */
.aliviy-auth__gift-icon{
-webkit-mask:none;
mask:none;
background:none;
width:auto;
flex:0 0 auto;
margin-top:0;
font-size:1.15em;
line-height:1.35;
}
/* ---------- 22. Кабинет: доводка формы ---------- */
/* Тема вешает на абзацы в контенте пустой ::before. В обычном абзаце он не
виден, а в нашей флексовой плашке становится полноценным элементом и
отъедает 75px слева — подарок оказывался посреди строки. */
.aliviy-auth__gift:before,
.aliviy-auth__gift:after{
content:none !important;
display:none !important;
}
/* Обе формы одинаковой ширины: старый myaacount.css сжимал вход до 400px,
и карточка входа была уже плашки и переключателя. */
.aliviy-auth .woocommerce-form.woocommerce-form,
.aliviy-auth form.login.login,
.aliviy-auth form.register.register{
width:100%;
max-width:none;
box-sizing:border-box;
}
/* Автозаполнение браузера красит поле в свой голубой. Убираем его, не
ломая доступность: цвет текста и фон задаём через тень внутрь поля —
background у автозаполненного поля браузер игнорирует. */
.aliviy-auth input:-webkit-autofill,
.aliviy-auth input:-webkit-autofill:hover,
.aliviy-auth input:-webkit-autofill:focus,
.woocommerce-ResetPassword input:-webkit-autofill{
-webkit-text-fill-color:var(--al-ink);
-webkit-box-shadow:0 0 0 1000px #fff inset;
box-shadow:0 0 0 1000px #fff inset;
caret-color:var(--al-ink);
transition:background-color 5000s ease-in-out 0s;
}
/* Сноска про политику — одной строкой */
.aliviy-auth .woocommerce-privacy-policy-text{
font-size:.78em;
line-height:1.5;
}
/* Заголовок кабинета центрируем под карточку. Раньше это делал старый
myaacount.css, который мы на экране входа больше не подключаем. */
.woocommerce-account .entry-title.entry-title,
.woocommerce-account .page-title.page-title{
text-align:center;
}
.woocommerce-account .breadcrumb,
.woocommerce-account .breadcrumbs{
text-align:center;
}
/* ---------- 23. Тарифы ---------- */
.aliviy-tariffs{margin:0 0 34px}
/* Переключатель срока — тот же сегментированный элемент, что в кабинете */
.aliviy-tariffs__switch{
display:inline-flex;
gap:4px;
padding:4px;
margin:0 auto 26px;
background:var(--al-tint-100);
border:1px solid var(--al-line-soft);
border-radius:999px;
}
.aliviy-tariffs__switch{display:flex;width:fit-content}
.aliviy-tariffs__opt{
display:inline-flex;
align-items:center;
gap:7px;
padding:10px 20px;
border:0;
border-radius:999px;
background:none;
color:var(--al-ink-soft);
font:inherit;
font-weight:600;
line-height:1.2;
cursor:pointer;
transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.aliviy-tariffs__opt:hover{color:var(--al-primary)}
.aliviy-tariffs__opt.is-active{
background:var(--al-grad-btn);
color:#fff;
box-shadow:0 6px 16px rgba(76,53,222,.24);
}
.aliviy-tariffs__opt span{
padding:2px 7px;
border-radius:999px;
background:var(--al-accent);
color:#fff;
font-size:.78em;
font-weight:700;
letter-spacing:.01em;
}
.aliviy-tariffs__opt.is-active span{background:rgba(255,255,255,.22)}
.aliviy-tariffs__grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
align-items:stretch;
}
.aliviy-plan{
position:relative;
display:flex;
flex-direction:column;
gap:12px;
padding:24px 22px 22px;
background:#fff;
border:1px solid var(--al-line);
border-left:3px solid var(--al-line);
border-radius:var(--al-radius-lg);
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.aliviy-plan:hover{
transform:translateY(-2px);
border-left-color:var(--al-primary-soft);
box-shadow:0 12px 30px rgba(76,53,222,.10);
}
.aliviy-plan.is-free{
background:var(--al-tint-50);
border-left-color:var(--al-line);
}
/* Целевой тариф выделен рамкой и свечением, а не размером: одинаковая
высота карточек читается спокойнее, чем «выпрыгивающая» средняя. */
.aliviy-plan.is-popular{
border-color:var(--al-primary);
border-left-color:var(--al-primary);
box-shadow:0 14px 36px rgba(76,53,222,.16);
}
.aliviy-plan__badge{
position:absolute;
top:-11px;
left:22px;
padding:4px 12px;
border-radius:999px;
background:var(--al-grad-btn);
color:#fff;
font-size:.74em;
font-weight:700;
letter-spacing:.02em;
text-transform:uppercase;
box-shadow:0 6px 14px rgba(76,53,222,.28);
}
.aliviy-plan__name{
margin:0;
font-size:1.22em;
font-weight:700;
line-height:1.2;
color:var(--al-ink);
}
.aliviy-plan__tagline{
margin:0;
min-height:2.8em;
color:var(--al-ink-soft);
font-size:.88em;
line-height:1.45;
}
.aliviy-plan__price{
display:flex;
flex-direction:column;
gap:2px;
padding:14px 0 2px;
border-top:1px solid var(--al-line-soft);
}
.aliviy-plan__sum{
font-size:1.9em;
font-weight:700;
line-height:1.05;
letter-spacing:-.02em;
color:var(--al-ink);
font-variant-numeric:tabular-nums;
}
.aliviy-plan__unit{color:var(--al-ink-muted);font-size:.84em}
.aliviy-plan__year{
margin-top:5px;
color:var(--al-primary);
font-size:.82em;
font-weight:600;
line-height:1.4;
}
.aliviy-plan__volume{
display:flex;
flex-direction:column;
gap:3px;
margin:0;
padding:12px 14px;
background:var(--al-tint-100);
border-radius:var(--al-radius-sm);
font-size:.92em;
line-height:1.35;
}
.aliviy-plan.is-popular .aliviy-plan__volume{background:var(--al-tint-200)}
.aliviy-plan__volume strong{color:var(--al-ink);font-weight:700}
.aliviy-plan__per{color:var(--al-ink-muted);font-size:.85em}
.aliviy-plan__list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:8px;
font-size:.9em;
line-height:1.45;
color:var(--al-ink-soft);
flex:1 1 auto;
}
.aliviy-plan__list li{
position:relative;
padding-left:22px;
}
/* Галочка нарисована рамкой, а не символом: символ ✓ в разных системных
шрифтах прыгает по базовой линии и разъезжается с текстом. */
.aliviy-plan__list li:before{
content:"";
position:absolute;
left:2px;
top:.42em;
width:9px;
height:5px;
border-left:2px solid var(--al-primary);
border-bottom:2px solid var(--al-primary);
transform:rotate(-45deg);
}
.aliviy-plan.is-free .aliviy-plan__list li:before{
border-color:var(--al-ink-muted);
}
.aliviy-plan__btn{
display:block;
margin-top:4px;
padding:13px 18px;
border-radius:999px;
background:var(--al-grad-btn);
color:#fff !important;
font-weight:600;
font-size:.98em;
line-height:1.2;
text-align:center;
text-decoration:none !important;
box-shadow:0 8px 20px rgba(76,53,222,.26);
transition:filter .16s ease,box-shadow .16s ease,transform .16s ease;
}
.aliviy-plan__btn:hover{
filter:brightness(1.06);
box-shadow:0 10px 26px rgba(76,53,222,.32);
}
.aliviy-plan__btn:active{transform:translateY(1px)}
.aliviy-plan__btn.is-ghost{
background:none;
color:var(--al-primary) !important;
border:1px solid var(--al-line);
box-shadow:none;
}
.aliviy-plan__btn.is-ghost:hover{
background:var(--al-tint-100);
border-color:var(--al-primary);
filter:none;
}
.aliviy-plan__note{
margin:0;
color:var(--al-ink-muted);
font-size:.8em;
text-align:center;
}
.aliviy-tariffs__foot{
margin:22px 0 0;
color:var(--al-ink-muted);
font-size:.88em;
line-height:1.55;
}
@media (max-width:1000px){
.aliviy-tariffs__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
.aliviy-tariffs__grid{grid-template-columns:1fr}
.aliviy-plan__tagline{min-height:0}
.aliviy-tariffs__switch{width:100%}
.aliviy-tariffs__opt{flex:1 1 50%;justify-content:center;padding:10px 12px}
}
/* ---------- 24. Кабинет ---------- */
/* Меню вкладок. Старый стиль рисовал их розовыми прямоугольниками
в три колонки — заменяем на спокойный ряд вкладок. */
.woocommerce-MyAccount-navigation{
margin:0 0 26px;
padding:0;
}
.woocommerce-MyAccount-navigation ul{
display:flex;
flex-wrap:wrap;
gap:6px;
list-style:none;
margin:0;
padding:5px;
background:var(--al-tint-100);
border:1px solid var(--al-line-soft);
border-radius:999px;
}
.woocommerce-MyAccount-navigation li{margin:0}
.woocommerce-MyAccount-navigation li a{
display:block;
padding:9px 17px;
border-radius:999px;
background:none !important;
color:var(--al-ink-soft) !important;
font-size:.94em;
font-weight:600;
line-height:1.2;
text-decoration:none !important;
transition:background .16s ease,color .16s ease;
}
.woocommerce-MyAccount-navigation li a:hover{
background:#fff !important;
color:var(--al-primary) !important;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a{
background:var(--al-grad-btn) !important;
color:#fff !important;
box-shadow:0 6px 16px rgba(76,53,222,.24);
}
.woocommerce-MyAccount-content{
color:var(--al-ink);
}
.woocommerce-MyAccount-content > p:first-child{margin-top:0}
/* Сводка на первой странице */
.aliviy-dash__hi{margin:0 0 18px;font-size:1.05em}
.aliviy-dash__tiles{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin:0 0 16px;
}
.aliviy-dash__tile{
display:flex;
flex-direction:column;
gap:4px;
padding:16px 18px;
background:#fff;
border:1px solid var(--al-line);
border-left:3px solid var(--al-primary);
border-radius:var(--al-radius-md);
}
.aliviy-dash__v{
font-size:1.5em;
font-weight:700;
line-height:1.15;
letter-spacing:-.02em;
color:var(--al-ink);
font-variant-numeric:tabular-nums;
}
.aliviy-dash__k{color:var(--al-ink-muted);font-size:.86em}
.aliviy-dash__links{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:20px 0 0;
}
.aliviy-dash__links .aliviy-plan__btn{display:inline-block;width:auto;margin:0}
/* ---------- 25. Подписка ---------- */
.aliviy-sub__card{
padding:22px 24px;
margin:0 0 18px;
background:#fff;
border:1px solid var(--al-line);
border-left:3px solid var(--al-primary);
border-radius:var(--al-radius-lg);
box-shadow:0 10px 30px rgba(76,53,222,.08);
}
.aliviy-sub__head{
display:flex;
flex-wrap:wrap;
gap:12px 18px;
align-items:flex-start;
justify-content:space-between;
}
.aliviy-sub__plan{
margin:0 0 4px;
font-size:1.3em;
font-weight:700;
line-height:1.2;
}
.aliviy-sub__sub{margin:0;color:var(--al-ink-soft);font-size:.92em}
.aliviy-sub__status{
padding:7px 14px;
border-radius:999px;
font-size:.85em;
font-weight:600;
white-space:nowrap;
}
.aliviy-sub__status.is-ok{background:var(--al-ok-bg);color:var(--al-ok);border:1px solid var(--al-ok-line)}
.aliviy-sub__status.is-off{background:var(--al-tint-100);color:var(--al-ink-muted);border:1px solid var(--al-line)}
.aliviy-sub__bar{
height:8px;
margin:16px 0 0;
background:var(--al-tint-200);
border-radius:999px;
overflow:hidden;
}
.aliviy-sub__bar span{
display:block;
height:100%;
background:var(--al-grad-btn);
border-radius:999px;
transition:width .4s ease;
}
.aliviy-sub__actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:18px 0 0;
}
.aliviy-sub__actions .aliviy-plan__btn{display:inline-block;width:auto;margin:0}
.aliviy-sub__cancel{
padding:13px 20px;
background:none;
border:1px solid var(--al-line);
border-radius:999px;
color:var(--al-ink-soft);
font:inherit;
font-weight:600;
cursor:pointer;
transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.aliviy-sub__cancel:hover{
border-color:var(--al-danger);
color:var(--al-danger);
background:var(--al-danger-bg);
}
.aliviy-sub__grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}
.aliviy-sub__box{
padding:20px 22px;
background:#fff;
border:1px solid var(--al-line);
border-radius:var(--al-radius-lg);
}
.aliviy-sub__box h3{margin:0 0 14px;font-size:1.05em;font-weight:700}
.aliviy-sub__facts{margin:0;display:flex;flex-direction:column;gap:2px}
.aliviy-sub__facts > div{
display:flex;
justify-content:space-between;
gap:14px;
padding:10px 12px;
background:var(--al-tint-50);
border-radius:var(--al-radius-sm);
}
.aliviy-sub__facts dt{color:var(--al-ink-soft);font-size:.9em;margin:0}
.aliviy-sub__facts dd{margin:0;font-weight:600;text-align:right}
.aliviy-sub__hint{margin:14px 0 0;color:var(--al-ink-muted);font-size:.86em;line-height:1.5}
.aliviy-sub__table{width:100%;border-collapse:collapse;font-size:.92em}
.aliviy-sub__table th{
padding:0 10px 8px;
text-align:left;
color:var(--al-ink-muted);
font-size:.85em;
font-weight:600;
border-bottom:1px solid var(--al-line-soft);
}
.aliviy-sub__table td{padding:10px;border-bottom:1px solid var(--al-line-soft)}
.aliviy-sub__table tr:last-child td{border-bottom:0}
.aliviy-sub__badge{
display:inline-block;
padding:3px 10px;
border-radius:999px;
background:var(--al-ok-bg);
color:var(--al-ok);
font-size:.85em;
font-weight:600;
}
.aliviy-sub__more{margin:12px 0 0;font-size:.9em}
.aliviy-sub__more a{color:var(--al-primary);font-weight:600}
@media (max-width:760px){
.aliviy-sub__grid{grid-template-columns:1fr}
.aliviy-dash__tiles{grid-template-columns:1fr}
}
/* ---------- 26. Модальное окно отмены ---------- */
.aliviy-modal{
position:fixed;
inset:0;
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
}
.aliviy-modal[hidden]{display:none !important}
.aliviy-modal__back{
position:absolute;
inset:0;
background:rgba(36,32,47,.55);
backdrop-filter:blur(2px);
}
.aliviy-modal__win{
position:relative;
width:100%;
max-width:420px;
padding:28px 28px 24px;
background:#fff;
border-radius:var(--al-radius-lg);
box-shadow:0 30px 70px rgba(36,32,47,.32);
text-align:center;
}
.aliviy-modal__x{
position:absolute;
top:12px;
right:12px;
width:30px;
height:30px;
padding:0;
border:0;
border-radius:50%;
background:var(--al-tint-100);
color:var(--al-ink-soft);
font-size:20px;
line-height:1;
cursor:pointer;
}
.aliviy-modal__x:hover{background:var(--al-tint-200)}
.aliviy-modal__icon{
display:flex;
align-items:center;
justify-content:center;
width:56px;
height:56px;
margin:0 auto 16px;
border-radius:50%;
background:var(--al-danger-bg);
color:var(--al-danger);
font-size:26px;
font-weight:700;
}
.aliviy-modal__title{margin:0 0 8px;font-size:1.25em;font-weight:700}
.aliviy-modal__lead{margin:0 0 18px;color:var(--al-ink-soft);font-size:.94em}
.aliviy-modal__row{
display:flex;
justify-content:space-between;
gap:12px;
padding:12px 14px;
margin:0 0 12px;
background:var(--al-tint-50);
border-radius:var(--al-radius-sm);
font-size:.92em;
text-align:left;
}
.aliviy-modal__row span{color:var(--al-ink-soft)}
.aliviy-modal__warn{
margin:0 0 20px;
padding:12px 14px;
background:var(--al-danger-bg);
border:1px solid var(--al-danger-line);
border-radius:var(--al-radius-sm);
color:var(--al-ink);
font-size:.88em;
line-height:1.5;
text-align:left;
}
.aliviy-modal__actions{display:flex;gap:10px}
.aliviy-modal__btn{
flex:1 1 50%;
padding:13px 16px;
border:0;
border-radius:999px;
font:inherit;
font-weight:600;
line-height:1.2;
text-align:center;
text-decoration:none !important;
cursor:pointer;
}
.aliviy-modal__btn.is-danger{
background:var(--al-danger);
color:#fff !important;
box-shadow:0 8px 20px rgba(192,52,75,.26);
}
.aliviy-modal__btn.is-danger:hover{filter:brightness(1.06)}
.aliviy-modal__btn.is-ghost{
background:#fff;
border:1px solid var(--al-line);
color:var(--al-ink) !important;
}
.aliviy-modal__btn.is-ghost:hover{background:var(--al-tint-100)}
@media (max-width:480px){
.aliviy-modal__actions{flex-direction:column}
}
/* ---------- 27. Тарифы: компактная карточка ---------- */
/* Прежняя карточка занимала 691px — четыре штуки не помещались на экран,
и сравнивать их приходилось прокруткой. Ужимаем вдвое. */
.aliviy-plan{
gap:10px;
padding:20px 18px 18px;
}
.aliviy-plan__top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
}
.aliviy-plan__name{
margin:0;
font-size:1.12em;
font-weight:700;
line-height:1.2;
}
.aliviy-plan__price{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:0;
padding:0;
border-top:0;
text-align:right;
}
.aliviy-plan__sum{font-size:1.45em;line-height:1.1}
.aliviy-plan__unit{font-size:.76em;white-space:nowrap}
.aliviy-plan__tagline{
min-height:2.6em;
margin:0;
font-size:.84em;
line-height:1.4;
}
.aliviy-plan__year{
margin:0;
padding:7px 10px;
background:var(--al-tint-100);
border-radius:var(--al-radius-sm);
color:var(--al-primary);
font-size:.78em;
font-weight:600;
line-height:1.35;
}
.aliviy-plan__volume{
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:8px;
margin:0;
padding:10px 0 0;
border-top:1px solid var(--al-line-soft);
background:none;
border-radius:0;
font-size:.92em;
line-height:1.3;
}
.aliviy-plan.is-popular .aliviy-plan__volume{background:none}
.aliviy-plan__volume strong{font-size:1.02em}
.aliviy-plan__per{color:var(--al-ink-muted);font-size:.82em}
.aliviy-plan__list{gap:6px;font-size:.85em;line-height:1.4}
.aliviy-plan__list li{padding-left:20px}
.aliviy-plan__list li:before{top:.4em;width:8px;height:4px}
.aliviy-plan__btn{
margin-top:2px;
padding:11px 16px;
font-size:.92em;
}
.aliviy-plan__badge{top:-10px;left:18px;padding:3px 11px;font-size:.68em}
/* ---------- 28. Преимущества ---------- */
.aliviy-perks{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
margin:20px 0 0;
}
.aliviy-perk{
display:flex;
flex-direction:column;
gap:3px;
padding:14px 16px;
background:var(--al-tint-50);
border:1px solid var(--al-line-soft);
border-radius:var(--al-radius-md);
}
.aliviy-perk__icon{
width:18px;
height:18px;
margin-bottom:3px;
background:var(--al-grad);
-webkit-mask:var(--al-spark-shape) center/contain no-repeat;
mask:var(--al-spark-shape) center/contain no-repeat;
}
.aliviy-perk__title{font-weight:700;font-size:.92em;line-height:1.25;color:var(--al-ink)}
.aliviy-perk__text{color:var(--al-ink-soft);font-size:.84em;line-height:1.4}
/* ---------- 29. Таблица объёмов ---------- */
.aliviy-volume__table td:first-child strong{color:var(--al-ink)}
.aliviy-volume__cta{text-align:right;white-space:nowrap}
.aliviy-volume__go{
display:inline-block;
padding:7px 15px;
border-radius:999px;
background:var(--al-grad-btn);
color:#fff !important;
font-size:.85em;
font-weight:600;
line-height:1.2;
text-decoration:none !important;
transition:filter .16s ease;
}
.aliviy-volume__go:hover{filter:brightness(1.06)}
.aliviy-volume__go.is-ghost{
background:none;
border:1px solid var(--al-line);
color:var(--al-primary) !important;
}
.aliviy-volume__go.is-ghost:hover{background:var(--al-tint-100)}
@media (max-width:1000px){
.aliviy-perks{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
.aliviy-perks{grid-template-columns:1fr}
.aliviy-plan__tagline{min-height:0}
.aliviy-plan__top{align-items:center}
}
/* ---------- 30. Кабинет: меню вверху ---------- */
/* Семь пунктов ссылками в столбик выглядели как список, а не как навигация.
Ряд чипсов наверху: активный выделен заливкой, на телефоне ряд не
переносится, а прокручивается — так пункты не прыгают по строкам. */
.woocommerce-MyAccount-navigation{
margin:0 0 26px;
padding:0;
background:none;
border:0;
}
.woocommerce-MyAccount-navigation ul{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:0;
padding:0;
background:none;
border:0;
border-radius:0;
list-style:none;
}
.woocommerce-MyAccount-navigation li{margin:0}
.woocommerce-MyAccount-navigation li a.woocommerce-MyAccount-navigation-link,
.woocommerce-MyAccount-navigation li a{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 17px;
background:#fff !important;
border:1px solid var(--al-line);
border-radius:999px;
color:var(--al-ink-soft) !important;
font-size:.93em;
font-weight:600;
line-height:1.2;
white-space:nowrap;
text-decoration:none !important;
transition:border-color .16s ease,color .16s ease,box-shadow .16s ease,background .16s ease;
}
.woocommerce-MyAccount-navigation li a:hover{
border-color:var(--al-primary);
color:var(--al-primary) !important;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a{
background:var(--al-grad-btn) !important;
border-color:transparent;
color:#fff !important;
box-shadow:0 8px 20px rgba(76,53,222,.26);
}
/* Значок у каждого пункта: с ним ряд читается как навигация,
а не как набор кнопок */
.woocommerce-MyAccount-navigation li a:before{
content:"•";
font-size:1em;
line-height:1;
}
.woocommerce-MyAccount-navigation-link--dashboard a:before{content:"🏠"}
.woocommerce-MyAccount-navigation-link--podpiska a:before{content:"🔄"}
.woocommerce-MyAccount-navigation-link--orders a:before{content:"🧾"}
.woocommerce-MyAccount-navigation-link--payment-methods a:before{content:"💳"}
.woocommerce-MyAccount-navigation-link--edit-account a:before{content:"👤"}
.woocommerce-MyAccount-navigation-link--statistika a:before{content:"📊"}
.woocommerce-MyAccount-navigation-link--customer-logout a:before{content:"🚪"}
@media (max-width:820px){
.woocommerce-MyAccount-navigation{
margin-left:-16px;
margin-right:-16px;
padding:0 16px;
}
.woocommerce-MyAccount-navigation ul{
flex-wrap:nowrap;
overflow-x:auto;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
padding-bottom:4px;
}
.woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none}
.woocommerce-MyAccount-navigation li{flex:0 0 auto}
}
/* ---------- 31. Способы оплаты ---------- */
.aliviy-pay{
padding:20px 22px;
margin:0 0 22px;
background:#fff;
border:1px solid var(--al-line);
border-left:3px solid var(--al-primary);
border-radius:var(--al-radius-lg);
}
.aliviy-pay__title{margin:0 0 14px;font-size:1.08em;font-weight:700}
.aliviy-pay__card{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px 14px;
padding:14px 16px;
background:var(--al-tint-50);
border-radius:var(--al-radius-sm);
}
.aliviy-pay__num{font-weight:700;font-size:1.05em;letter-spacing:.02em}
.aliviy-pay__state{
padding:4px 11px;
border-radius:999px;
background:var(--al-tint-200);
color:var(--al-ink-muted);
font-size:.82em;
font-weight:600;
}
.aliviy-pay__state.is-on{background:var(--al-ok-bg);color:var(--al-ok)}
.aliviy-pay__hint{margin:12px 0 0;color:var(--al-ink-soft);font-size:.88em;line-height:1.5}
.aliviy-pay__toggle{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin:18px 0 0;
padding:16px 0 0;
border-top:1px solid var(--al-line-soft);
}
.aliviy-pay__toggle strong{display:block;font-size:.98em}
.aliviy-pay__toggle span{
display:block;
margin-top:3px;
color:var(--al-ink-muted);
font-size:.86em;
line-height:1.45;
}
/* Переключатель. Ссылка, а не чекбокс: состояние меняется на сервере,
и без JS он тоже работает. */
.aliviy-switch{
position:relative;
flex:0 0 auto;
display:block;
width:52px;
height:30px;
border-radius:999px;
background:var(--al-line);
transition:background .2s ease;
}
.aliviy-switch.is-on{background:var(--al-grad-btn)}
.aliviy-switch__knob{
position:absolute;
top:3px;
left:3px;
width:24px;
height:24px;
border-radius:50%;
background:#fff;
box-shadow:0 2px 6px rgba(36,32,47,.28);
transition:transform .2s ease;
}
.aliviy-switch.is-on .aliviy-switch__knob{transform:translateX(22px)}
/* Штатная таблица сохранённых карт */
.woocommerce-MyAccount-paymentMethods{
width:100%;
border-collapse:collapse;
font-size:.94em;
}
.woocommerce-MyAccount-paymentMethods th,
.woocommerce-MyAccount-paymentMethods td{
padding:12px 14px;
text-align:left;
border-bottom:1px solid var(--al-line-soft);
}
.woocommerce-MyAccount-paymentMethods th{
color:var(--al-ink-muted);
font-size:.88em;
font-weight:600;
}
.woocommerce-MyAccount-paymentMethods .button{
display:inline-block;
padding:8px 16px;
border-radius:999px;
background:none;
border:1px solid var(--al-line);
color:var(--al-ink-soft) !important;
font-size:.88em;
font-weight:600;
text-decoration:none !important;
}
.woocommerce-MyAccount-paymentMethods .button.delete{
border-color:var(--al-danger-line);
color:var(--al-danger) !important;
}
.woocommerce-MyAccount-paymentMethods .button.delete:hover{
background:var(--al-danger-bg);
border-color:var(--al-danger);
}
@media (max-width:560px){
.aliviy-pay__toggle{flex-direction:column;align-items:flex-start;gap:12px}
}
/* ---------- 32. Оформление заказа ---------- */
.woocommerce-checkout .entry-content > .woocommerce{
max-width:620px;
margin:0 auto;
}
.woocommerce-checkout .entry-title{text-align:center}
/* Что покупаем — первым экраном, до формы */
.aliviy-order{
padding:18px 22px;
margin:0 0 18px;
background:var(--al-tint-100);
border:1px solid var(--al-line);
border-left:3px solid var(--al-primary);
border-radius:var(--al-radius-lg);
}
.aliviy-order__head{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.aliviy-order__label{color:var(--al-ink-muted);font-size:.82em}
.aliviy-order__plan{font-size:1.18em;font-weight:700;line-height:1.2}
.aliviy-order__list{
list-style:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:5px;
font-size:.9em;
color:var(--al-ink-soft);
}
.aliviy-order__list li{position:relative;padding-left:20px}
.aliviy-order__list li:before{
content:"";
position:absolute;
left:2px;
top:.4em;
width:8px;
height:4px;
border-left:2px solid var(--al-primary);
border-bottom:2px solid var(--al-primary);
transform:rotate(-45deg);
}
/* Промокод — за ссылкой, а не полем во весь экран */
.aliviy-coupon{margin:0 0 14px;text-align:right}
.aliviy-coupon__link{
padding:0;
background:none;
border:0;
color:var(--al-primary);
font:inherit;
font-size:.88em;
font-weight:600;
text-decoration:underline;
text-underline-offset:3px;
cursor:pointer;
}
.woocommerce-checkout .checkout_coupon{
margin:0 0 16px;
padding:16px 18px;
background:#fff;
border:1px solid var(--al-line);
border-radius:var(--al-radius-md);
}
.woocommerce-checkout .checkout_coupon[hidden]{display:none !important}
/* Форма и заказ — две карточки одинаковой ширины */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout #order_review{
padding:22px 24px;
margin:0 0 16px;
background:#fff;
border:1px solid var(--al-line);
border-radius:var(--al-radius-lg);
box-shadow:0 10px 30px rgba(76,53,222,.07);
}
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading{
margin:0 0 16px !important;
font-size:1.08em !important;
font-weight:700;
}
.woocommerce-checkout .form-row{margin:0 0 14px;padding:0}
.woocommerce-checkout .form-row label{
display:block;
margin:0 0 6px;
color:var(--al-ink);
font-size:.92em;
font-weight:600;
}
.woocommerce-checkout .form-row .required{color:var(--al-accent);text-decoration:none}
.woocommerce-checkout .input-text{
width:100%;
padding:12px 14px;
background:#fff;
border:1px solid var(--al-line);
border-radius:var(--al-radius-sm);
color:var(--al-ink);
font:inherit;
transition:border-color .16s ease,box-shadow .16s ease;
}
.woocommerce-checkout .input-text:focus{
outline:none;
border-color:var(--al-primary);
box-shadow:0 0 0 3px var(--al-tint-200);
}
.woocommerce-checkout .form-row .description{
margin-top:5px;
color:var(--al-ink-muted);
font-size:.82em;
}
/* Таблица заказа */
.woocommerce-checkout .shop_table{
width:100%;
border-collapse:collapse;
margin:0 0 16px;
font-size:.95em;
}
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td{
padding:12px 0;
text-align:left;
border:0;
border-bottom:1px solid var(--al-line-soft);
background:none;
}
.woocommerce-checkout .shop_table thead th{
color:var(--al-ink-muted);
font-size:.86em;
font-weight:600;
}
.woocommerce-checkout .shop_table td:last-child,
.woocommerce-checkout .shop_table th:last-child{text-align:right;white-space:nowrap}
.woocommerce-checkout .shop_table .order-total th,
.woocommerce-checkout .shop_table .order-total td{
padding-top:16px;
border-bottom:0;
font-size:1.15em;
font-weight:700;
color:var(--al-ink);
}
.woocommerce-checkout .shop_table .order-total .amount{color:var(--al-primary)}
/* Способ оплаты */
.woocommerce-checkout #payment{
background:none;
border-radius:0;
}
.woocommerce-checkout #payment ul.payment_methods{
padding:0;
margin:0 0 16px;
border:0;
list-style:none;
}
.woocommerce-checkout #payment ul.payment_methods li{
padding:14px 16px;
margin:0 0 8px;
background:var(--al-tint-50);
border:1px solid var(--al-line);
border-radius:var(--al-radius-md);
list-style:none;
}
.woocommerce-checkout #payment ul.payment_methods li label{
font-weight:600;
color:var(--al-ink);
}
.woocommerce-checkout #payment .payment_box{
margin:10px 0 0;
padding:12px 14px;
background:#fff;
border:1px solid var(--al-line-soft);
border-radius:var(--al-radius-sm);
color:var(--al-ink-soft);
font-size:.88em;
line-height:1.5;
}
.woocommerce-checkout #payment .payment_box:before{display:none}
/* Кнопка оплаты */
.woocommerce-checkout #place_order,
.woocommerce-checkout .button.alt{
display:block;
width:100%;
padding:15px 24px;
background:var(--al-grad-btn) !important;
border:0;
border-radius:999px;
color:#fff !important;
font:inherit;
font-size:1.05em;
font-weight:700;
line-height:1.2;
cursor:pointer;
box-shadow:0 10px 26px rgba(76,53,222,.28);
transition:filter .16s ease,box-shadow .16s ease,transform .16s ease;
}
.woocommerce-checkout #place_order:hover{filter:brightness(1.06)}
.woocommerce-checkout #place_order:active{transform:translateY(1px)}
/* Строки доверия под кнопкой */
.aliviy-trust{
list-style:none;
margin:16px 0 0;
padding:0;
display:flex;
flex-direction:column;
gap:7px;
color:var(--al-ink-muted);
font-size:.84em;
line-height:1.45;
}
.aliviy-trust li{position:relative;padding-left:20px}
.aliviy-trust li:before{
content:"";
position:absolute;
left:2px;
top:.4em;
width:8px;
height:4px;
border-left:2px solid var(--al-ok);
border-bottom:2px solid var(--al-ok);
transform:rotate(-45deg);
}
/* Согласие с условиями */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{
margin:14px 0 0;
color:var(--al-ink-muted);
font-size:.84em;
line-height:1.5;
}
.woocommerce-checkout .woocommerce-privacy-policy-text p{margin:0}
@media (max-width:560px){
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout #order_review{padding:18px 16px}
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last{width:100%;float:none}
}
/* ---------- 33. График расхода ---------- */
.aliviy-acc__card{
padding:20px 22px;
margin:18px 0 0;
background:#fff;
border:1px solid var(--al-line);
border-radius:var(--al-radius-lg);
}
.aliviy-acc__head{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:12px 16px;
margin:0 0 16px;
}
.aliviy-acc__label{
color:var(--al-ink-muted);
font-size:.8em;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
}
.aliviy-acc__empty{
padding:16px 0 4px;
color:var(--al-ink-muted);
font-size:.9em;
}
.aliviy-chart-controls{display:flex;flex-wrap:wrap;gap:8px}
.aliviy-chart-switch{
display:flex;
gap:2px;
padding:3px;
background:var(--al-tint-100);
border:1px solid var(--al-line-soft);
border-radius:999px;
}
.aliviy-chart-switch button{
padding:6px 12px;
border:0;
border-radius:999px;
background:none;
color:var(--al-ink-soft);
font:inherit;
font-size:.82em;
font-weight:600;
line-height:1.2;
cursor:pointer;
transition:background .16s ease,color .16s ease;
}
.aliviy-chart-switch button:hover{color:var(--al-primary)}
.aliviy-chart-switch button.is-active{
background:var(--al-grad-btn);
color:#fff;
box-shadow:0 4px 12px rgba(76,53,222,.22);
}
.aliviy-chart-box{
position:relative;
height:260px;
}
.aliviy-chart-box canvas{width:100% !important;height:100% !important}
.aliviy-chart-empty{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
color:var(--al-ink-muted);
font-size:.9em;
}
.aliviy-chart-empty.is-off{display:none}
.aliviy-chart__summary{
display:flex;
flex-wrap:wrap;
gap:8px 22px;
margin:14px 0 0;
padding:14px 0 0;
border-top:1px solid var(--al-line-soft);
color:var(--al-ink-muted);
font-size:.86em;
}
.aliviy-chart__summary b{
color:var(--al-ink);
font-variant-numeric:tabular-nums;
}
@media (max-width:620px){
.aliviy-chart-box{height:220px}
.aliviy-chart-switch button{padding:6px 10px;font-size:.78em}
}
/* ---------- 34. Калькулятор объёма ---------- */
.aliviy-calc{
margin:26px 0 0;
padding:22px 24px;
background:#fff;
border:1px solid var(--al-line);
border-radius:var(--al-radius-lg);
box-shadow:0 12px 32px rgba(76,53,222,.08);
}
.aliviy-calc__head{margin:0 0 18px}
.aliviy-calc__title{margin:0 0 4px;font-size:1.2em;font-weight:700}
.aliviy-calc__lead{margin:0;color:var(--al-ink-soft);font-size:.9em;line-height:1.45}
.aliviy-calc__body{
display:grid;
grid-template-columns:minmax(0,1fr) 262px;
gap:20px;
align-items:start;
}
.aliviy-calc__groups{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px 22px;
}
.aliviy-calc__group h4{
margin:0 0 8px;
color:var(--al-ink-muted);
font-size:.76em;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
}
.aliviy-calc__row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:7px 0;
border-bottom:1px solid var(--al-line-soft);
}
.aliviy-calc__group .aliviy-calc__row:last-child{border-bottom:0}
.aliviy-calc__name{
display:flex;
flex-direction:column;
gap:1px;
font-size:.9em;
font-weight:600;
line-height:1.25;
cursor:default;
}
.aliviy-calc__name span{
color:var(--al-ink-muted);
font-size:.82em;
font-weight:400;
}
.aliviy-calc__stepper{
display:flex;
align-items:center;
gap:2px;
flex:0 0 auto;
padding:2px;
background:var(--al-tint-100);
border-radius:999px;
}
.aliviy-calc__stepper button{
width:26px;
height:26px;
padding:0;
border:0;
border-radius:50%;
background:#fff;
color:var(--al-primary);
font-size:15px;
font-weight:700;
line-height:1;
cursor:pointer;
transition:background .16s ease,color .16s ease;
}
.aliviy-calc__stepper button:hover{background:var(--al-primary);color:#fff}
.aliviy-calc__input{
width:42px;
padding:0;
border:0;
background:none;
color:var(--al-ink);
font:inherit;
font-size:.92em;
font-weight:700;
text-align:center;
font-variant-numeric:tabular-nums;
-moz-appearance:textfield;
}
.aliviy-calc__input::-webkit-outer-spin-button,
.aliviy-calc__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.aliviy-calc__input:focus{outline:none}
/* Итог держим на виду при прокрутке списка задач */
.aliviy-calc__result{
position:sticky;
top:16px;
display:flex;
flex-direction:column;
gap:14px;
padding:18px 20px;
background:var(--al-tint-100);
border:1px solid var(--al-line);
border-radius:var(--al-radius-md);
}
.aliviy-calc__label{
display:block;
color:var(--al-ink-muted);
font-size:.74em;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
}
.aliviy-calc__chars{
display:block;
margin:4px 0 2px;
font-size:1.7em;
font-weight:700;
line-height:1.05;
letter-spacing:-.02em;
font-variant-numeric:tabular-nums;
}
.aliviy-calc__pages{color:var(--al-ink-soft);font-size:.82em}
.aliviy-calc__pick{
padding-top:14px;
border-top:1px solid var(--al-line);
}
.aliviy-calc__plan{
display:block;
margin:4px 0 2px;
color:var(--al-primary);
font-size:1.25em;
font-weight:700;
line-height:1.15;
}
.aliviy-calc__note{
display:block;
color:var(--al-ink-soft);
font-size:.82em;
line-height:1.4;
}
.aliviy-calc__result .aliviy-plan__btn{margin:0}
.aliviy-calc__foot{
margin:0;
color:var(--al-ink-muted);
font-size:.76em;
line-height:1.4;
}
@media (max-width:960px){
.aliviy-calc__body{grid-template-columns:minmax(0,1fr)}
.aliviy-calc__result{position:static}
}
@media (max-width:620px){
.aliviy-calc{padding:18px 16px}
.aliviy-calc__groups{grid-template-columns:minmax(0,1fr);gap:14px}
}
/* ---------- 35. Меню кабинета: одна строка ---------- */
/* Семь пунктов переносились на вторую строку, а у темы на li свои маркеры —
между чипсами висели точки. Держим ряд в одну строку с прокруткой и
гасим чужие маркеры. */
.woocommerce-MyAccount-navigation ul{
flex-wrap:nowrap;
overflow-x:auto;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
padding-bottom:2px;
gap:6px;
}
.woocommerce-MyAccount-navigation ul::-webkit-scrollbar{display:none}
.woocommerce-MyAccount-navigation li{
flex:0 0 auto;
list-style:none;
padding-left:0;
}
.woocommerce-MyAccount-navigation li:before,
.woocommerce-MyAccount-navigation li:after{
content:none !important;
display:none !important;
}
.woocommerce-MyAccount-navigation li a{
padding:9px 14px;
font-size:.88em;
gap:6px;
}
/* Значки. Селекторы удвоены: общее правило со значком по умолчанию
оказывалось специфичнее и перебивало все частные. */
.woocommerce-MyAccount-navigation li a:before{content:""}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard a:before{content:"🏠"}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--podpiska a:before{content:"🔄"}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--orders a:before{content:"🧾"}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--payment-methods a:before{content:"💳"}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--edit-account a:before{content:"👤"}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--statistika a:before{content:"📊"}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:before{content:"🚪"}
@media (max-width:1100px){
.woocommerce-MyAccount-navigation li a{padding:9px 12px;font-size:.85em}
}
/* ---------- 36. Окно отмены: состояние классом ---------- */
/* Атрибут hidden внутри вкладки кабинета вырезает wp_kses, поэтому
закрытое состояние держим классом. */
.aliviy-modal.is-closed{display:none !important}
.aliviy-sub__cancel{
display:inline-block;
text-decoration:none !important;
line-height:1.2;
}
.aliviy-modal__x{
display:flex;
align-items:center;
justify-content:center;
text-decoration:none !important;
color:var(--al-ink-soft) !important;
}
.aliviy-modal__btn.is-ghost{
display:flex;
align-items:center;
justify-content:center;
text-decoration:none !important;
}
/* Заливка полосы остатка. Отдельный класс и !important: внутри вкладки
кабинета содержимое проходит через wpautop, и он ломал блочность span. */
.aliviy-sub__bar .aliviy-sub__fill{
display:block !important;
height:8px !important;
background:var(--al-grad-btn) !important;
border-radius:999px;
}
.aliviy-sub__bar br{display:none}
/* ---------- 37. Тарифы: цена в строке с названием ---------- */
/* Название карточки — h3, и общее правило типографики .entry-content h3
давало ему верхний отступ в 1,55em: цена оставалась вверху, а название
уезжало вниз, и слева от цены зияла пустота. */
.aliviy-plan h3.aliviy-plan__name,
.aliviy-plan .aliviy-plan__name{
margin:0 !important;
padding:0;
flex:1 1 auto;
}
.aliviy-plan__top{
align-items:baseline;
gap:8px;
margin-bottom:2px;
}
.aliviy-plan__price{
flex:0 0 auto;
align-items:flex-end;
}
.aliviy-plan__sum{white-space:nowrap}
/* Пунктов в списке стало больше — сжимаем интервалы, чтобы карточки
по-прежнему помещались на экран */
.aliviy-plan__list{gap:5px;font-size:.83em}
.aliviy-plan__tagline{min-height:2.4em;margin-bottom:2px}
.aliviy-plan__volume{padding-top:9px}
/* ---------- 38. Меню кабинета: единая панель ---------- */
/* Отдельные кнопки в ряд читались как набор действий. Панель с сегментами
внутри — привычная навигация: видно, что это один блок, а активный
раздел выделен, а не «нажат». */
.woocommerce-MyAccount-navigation{
margin:0 0 24px;
padding:5px;
background:var(--al-tint-50);
border:1px solid var(--al-line-soft);
border-radius:16px;
}
.woocommerce-MyAccount-navigation ul{
gap:2px;
padding:0;
background:none;
border:0;
}
.woocommerce-MyAccount-navigation li a{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 14px;
background:none !important;
border:0;
border-radius:11px;
color:var(--al-ink-soft) !important;
font-size:.88em;
font-weight:600;
line-height:1.2;
white-space:nowrap;
box-shadow:none;
transition:background .16s ease,color .16s ease;
}
.woocommerce-MyAccount-navigation li a:hover{
background:#fff !important;
border:0;
color:var(--al-primary) !important;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a{
background:var(--al-grad-btn) !important;
color:#fff !important;
box-shadow:0 6px 16px rgba(76,53,222,.24);
}
/* Эмодзи-значки из предыдущей версии больше не нужны */
.woocommerce-MyAccount-navigation li a:before{content:none !important;display:none !important}
.aliviy-nav__icon{
flex:0 0 auto;
opacity:.75;
transition:opacity .16s ease;
}
.woocommerce-MyAccount-navigation li a:hover .aliviy-nav__icon{opacity:1}
.woocommerce-MyAccount-navigation li.is-active .aliviy-nav__icon{opacity:1}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{
color:var(--al-ink-muted) !important;
}
@media (max-width:1100px){
.woocommerce-MyAccount-navigation li a{padding:10px 12px;font-size:.85em;gap:7px}
}
@media (max-width:820px){
.woocommerce-MyAccount-navigation{margin-left:0;margin-right:0;padding:5px}
}
/* ---------- 39. Кабинет: доводка карточки подписки ---------- */
/* Название тарифа — h2, и общая типографика давала ему верхний отступ
и «искру» перед текстом. В карточке ни то, ни другое не нужно. */
.aliviy-sub__card h2.aliviy-sub__plan{
margin:0 0 4px !important;
padding:0;
font-size:1.3em;
}
.aliviy-sub__card h2.aliviy-sub__plan:before,
.aliviy-sub__card h2.aliviy-sub__plan:after{
content:none !important;
display:none !important;
}
/* Значок состояния: сбрасываем чужие фоны и тени, оставляем ровную пилюлю */
.aliviy-sub__status{
display:inline-block;
background-image:none;
box-shadow:none;
line-height:1.3;
}
.aliviy-sub__head{align-items:center}
/* Название тарифа на плитке длиннее числа — уменьшаем, чтобы не переносилось */
.aliviy-dash__v--text{font-size:1.1em;line-height:1.25}
/* ---------- 40. Статистика ---------- */
.aliviy-stats__grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin:0 0 16px;
}
.aliviy-stats__cell{
display:flex;
flex-direction:column;
gap:3px;
padding:14px 16px;
background:#fff;
border:1px solid var(--al-line);
border-left:3px solid var(--al-primary);
border-radius:var(--al-radius-md);
}
.aliviy-stats__k{
color:var(--al-ink-muted);
font-size:.76em;
font-weight:700;
letter-spacing:.05em;
text-transform:uppercase;
}
.aliviy-stats__v{font-size:1.15em;font-weight:700;line-height:1.25}
.aliviy-stats__note{
margin:16px 0 0;
color:var(--al-ink-muted);
font-size:.85em;
line-height:1.5;
}
/* Переключатели графика стали ссылками — снимаем оформление ссылок */
.aliviy-chart-switch a{
display:inline-block;
padding:6px 12px;
border-radius:999px;
color:var(--al-ink-soft) !important;
font-size:.82em;
font-weight:600;
line-height:1.2;
text-decoration:none !important;
cursor:pointer;
transition:background .16s ease,color .16s ease;
}
.aliviy-chart-switch a:hover{color:var(--al-primary) !important}
.aliviy-chart-switch a.is-active{
background:var(--al-grad-btn);
color:#fff !important;
box-shadow:0 4px 12px rgba(76,53,222,.22);
}
.aliviy-chart-data{display:none}
/* ---------- 41. Профиль и формы кабинета ---------- */
.woocommerce-EditAccountForm{
max-width:560px;
padding:24px 26px;
background:#fff;
border:1px solid var(--al-line);
border-radius:var(--al-radius-lg);
}
.woocommerce-EditAccountForm fieldset{
margin:22px 0 0;
padding:18px 0 0;
border:0;
border-top:1px solid var(--al-line-soft);
}
.woocommerce-EditAccountForm legend{
padding:0;
color:var(--al-ink);
font-size:1.02em;
font-weight:700;
}
.woocommerce-EditAccountForm .form-row,
.woocommerce-MyAccount-content .form-row{
display:block;
width:100%;
margin:0 0 16px;
padding:0;
float:none;
}
.woocommerce-EditAccountForm label,
.woocommerce-MyAccount-content .form-row label{
display:block;
margin:0 0 6px;
color:var(--al-ink);
font-size:.92em;
font-weight:600;
}
.woocommerce-EditAccountForm .input-text,
.woocommerce-MyAccount-content .form-row .input-text{
width:100%;
max-width:none;
padding:12px 14px;
background:#fff;
border:1px solid var(--al-line);
border-radius:var(--al-radius-sm);
color:var(--al-ink);
font:inherit;
transition:border-color .16s ease,box-shadow .16s ease;
}
.woocommerce-EditAccountForm .input-text:focus,
.woocommerce-MyAccount-content .form-row .input-text:focus{
outline:none;
border-color:var(--al-primary);
box-shadow:0 0 0 3px var(--al-tint-200);
}
.woocommerce-EditAccountForm span.description,
.woocommerce-MyAccount-content .form-row span.description{
display:block;
margin:6px 0 0;
color:var(--al-ink-muted);
font-size:.84em;
font-style:normal;
line-height:1.45;
}
.woocommerce-EditAccountForm .woocommerce-Button,
.woocommerce-MyAccount-content .button:not(.aliviy-plan__btn):not(.aliviy-modal__btn){
display:inline-block;
padding:12px 24px;
background:var(--al-grad-btn);
border:0;
border-radius:999px;
color:#fff !important;
font:inherit;
font-weight:600;
line-height:1.2;
text-decoration:none !important;
cursor:pointer;
box-shadow:0 8px 20px rgba(76,53,222,.24);
}
.woocommerce-EditAccountForm .woocommerce-Button:hover{filter:brightness(1.06)}
/* Кнопка показа пароля обратно в поле */
.woocommerce-MyAccount-content .password-input{position:relative;display:block}
.woocommerce-MyAccount-content .show-password-input{
position:absolute;
right:12px;
top:50%;
transform:translateY(-50%);
width:22px;
height:22px;
padding:0;
background:none;
border:0;
box-shadow:none;
opacity:.5;
cursor:pointer;
}
@media (max-width:760px){
.aliviy-stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
.aliviy-stats__grid{grid-template-columns:minmax(0,1fr)}
}
/* ---------- 42. Калькулятор: доводка ---------- */
/* Блок отделяем от страницы: фон и заметная рамка, иначе белая карточка
на почти белом фоне не читается как самостоятельный инструмент. */
.aliviy-calc{
background:var(--al-tint-50);
border:1px solid var(--al-line);
border-left:3px solid var(--al-primary);
box-shadow:0 14px 36px rgba(76,53,222,.10);
padding:24px 26px;
}
/* Каждая группа — своя панель: взгляд не путается между колонками */
.aliviy-calc__group{
padding:14px 16px;
background:#fff;
border:1px solid var(--al-line-soft);
border-radius:var(--al-radius-md);
}
.aliviy-calc__group h4{
margin:0 0 6px;
padding-bottom:8px;
border-bottom:1px solid var(--al-line-soft);
color:var(--al-primary);
}
.aliviy-calc__row{border-bottom:0;padding:6px 0}
/* Поле счётчика: «100» и «1000» не помещались в 42px */
.aliviy-calc__stepper{
border:1px solid var(--al-line);
background:#fff;
}
.aliviy-calc__input{
width:58px;
padding:0 2px;
font-size:.95em;
}
.aliviy-calc__stepper button{
background:var(--al-tint-100);
border:1px solid transparent;
}
.aliviy-calc__stepper button:hover{
background:var(--al-primary);
border-color:var(--al-primary);
color:#fff;
}
/* Заполненная строка подсвечивается — видно, что уже учтено */
.aliviy-calc__row:has(.aliviy-calc__input:not([value="0"])) .aliviy-calc__name{color:var(--al-ink)}
.aliviy-calc__result{
background:#fff;
border:1px solid var(--al-line);
box-shadow:0 10px 26px rgba(76,53,222,.10);
}
.aliviy-calc__chars{color:var(--al-primary)}
@media (max-width:1180px){
.aliviy-calc__groups{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------- 43. Переключатель и кнопки в кабинете ---------- */
/* Бегунок вылезал за дорожку: у темы своя ширина для span внутри ссылок,
и позиционирование через transform промахивалось. Ставим по краю. */
.aliviy-switch{
box-sizing:border-box;
overflow:hidden;
flex:0 0 52px;
}
.aliviy-switch .aliviy-switch__knob{
box-sizing:border-box;
left:3px;
right:auto;
transform:none;
transition:left .2s ease;
}
.aliviy-switch.is-on .aliviy-switch__knob{
left:25px;
transform:none;
}
.aliviy-switch .screen-reader-text{
position:absolute !important;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;
}
/* Кнопки в карточках кабинета: тень мягкая, без второго контура.
Тема добавляет собственную тень и рамку, из-за них край выглядел рваным. */
.aliviy-sub__card .aliviy-plan__btn,
.aliviy-dash__links .aliviy-plan__btn,
.aliviy-calc__result .aliviy-plan__btn{
border:0 !important;
outline:0;
box-shadow:0 6px 16px rgba(76,53,222,.22) !important;
text-shadow:none;
}
.aliviy-sub__card .aliviy-plan__btn:before,
.aliviy-sub__card .aliviy-plan__btn:after,
.aliviy-sub__status:before,
.aliviy-sub__status:after{
content:none !important;
display:none !important;
}
.aliviy-sub__status{
box-sizing:border-box;
background-clip:padding-box;
}
/* ---------- 44. Калькулятор: компактно и с подсказками ---------- */
/* Три группы вместо пяти и сжатые интервалы: калькулятор должен
помещаться на экран целиком, иначе задачи сравниваются прокруткой. */
.aliviy-calc{padding:20px 22px}
.aliviy-calc__head{margin:0 0 14px}
.aliviy-calc__title{font-size:1.12em}
.aliviy-calc__lead{font-size:.86em}
.aliviy-calc__body{gap:16px}
.aliviy-calc__groups{gap:12px 14px}
.aliviy-calc__group{padding:12px 14px}
.aliviy-calc__group h4{margin:0 0 4px;padding-bottom:6px;font-size:.72em}
.aliviy-calc__row{padding:4px 0;gap:8px}
.aliviy-calc__name{font-size:.86em;line-height:1.2}
.aliviy-calc__name span{font-size:.8em}
/* Поле счётчика: «100» и «1000» не помещались, а жирная крупная цифра
перетягивала внимание с названий задач. */
.aliviy-calc__stepper{padding:2px;gap:1px}
.aliviy-calc__stepper button{width:24px;height:24px;font-size:14px}
.aliviy-calc__input{
width:52px;
font-size:.88em;
font-weight:600;
letter-spacing:-.01em;
}
/* Подсказка при наведении — как в чате: светлая карточка с рамкой.
Появляется над строкой, чтобы не перекрывать счётчик. */
.aliviy-calc__name[data-tip]{position:relative;cursor:help}
.aliviy-calc__name[data-tip]:after{
content:attr(data-tip);
position:absolute;
left:0;
bottom:calc(100% + 9px);
z-index:20;
width:max-content;
max-width:280px;
padding:9px 12px;
background:var(--al-tint-100);
border:1px solid var(--al-line);
border-radius:var(--al-radius-sm);
box-shadow:0 10px 24px rgba(36,32,47,.14);
color:var(--al-ink-soft);
font-size:.86em;
font-weight:400;
line-height:1.45;
white-space:normal;
opacity:0;
visibility:hidden;
transform:translateY(4px);
transition:opacity .16s ease,transform .16s ease,visibility .16s;
pointer-events:none;
}
.aliviy-calc__name[data-tip]:before{
content:"";
position:absolute;
left:18px;
bottom:calc(100% + 4px);
z-index:21;
width:10px;
height:10px;
background:var(--al-tint-100);
border-right:1px solid var(--al-line);
border-bottom:1px solid var(--al-line);
transform:rotate(45deg) translateY(4px);
opacity:0;
visibility:hidden;
transition:opacity .16s ease,transform .16s ease,visibility .16s;
pointer-events:none;
}
.aliviy-calc__name[data-tip]:hover:after,
.aliviy-calc__name[data-tip]:focus-visible:after{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.aliviy-calc__name[data-tip]:hover:before,
.aliviy-calc__name[data-tip]:focus-visible:before{
opacity:1;
visibility:visible;
transform:rotate(45deg) translateY(0);
}
/* У первой строки группы подсказка не помещается сверху — показываем снизу */
.aliviy-calc__group .aliviy-calc__row:first-of-type .aliviy-calc__name[data-tip]:after{
bottom:auto;
top:calc(100% + 9px);
}
.aliviy-calc__group .aliviy-calc__row:first-of-type .aliviy-calc__name[data-tip]:before{
bottom:auto;
top:calc(100% + 4px);
border:0;
border-left:1px solid var(--al-line);
border-top:1px solid var(--al-line);
}
.aliviy-calc__group{overflow:visible}
.aliviy-calc__groups{overflow:visible}
@media (max-width:900px){
.aliviy-calc__name[data-tip]:after{max-width:220px}
}
/* ---------- 45. Калькулятор в один ряд ---------- */
/* Три группы в два столбца давали два ряда и 919px высоты — калькулятор
не помещался на экран. В один ряд по три колонки он укладывается вдвое
ниже: названия переносятся на две строки, но прокрутка не нужна. */
@media (min-width:1080px){
.aliviy-calc__body{grid-template-columns:minmax(0,1fr) 240px;gap:14px}
.aliviy-calc__groups{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.aliviy-calc__group{padding:11px 12px}
/* Название и счётчик остаются в строке: столбиком поля растягивались
на всю ширину и выглядели пустыми коробками. */
.aliviy-calc__row{
flex-direction:row;
align-items:center;
gap:8px;
padding:5px 0;
}
.aliviy-calc__name{font-size:.8em;flex:1 1 auto;min-width:0}
.aliviy-calc__stepper{flex:0 0 auto}
.aliviy-calc__input{width:40px}
.aliviy-calc__stepper button{width:22px;height:22px;font-size:13px}
/* Подсказка у крайнего правого столбца уезжала за край блока */
.aliviy-calc__group:last-child .aliviy-calc__name[data-tip]:after{left:auto;right:0}
.aliviy-calc__group:last-child .aliviy-calc__name[data-tip]:before{left:auto;right:18px}
}
/* ---------- 46. Подсказка на слове ---------- */
/* Приём взят из чата: слово подчёркнуто фирменным пунктиром, при наведении
всплывает карточка в рамке. Пунктир нужен, чтобы человек понял — здесь
есть пояснение; без него подсказку просто не находят. */
.aliviy-tip{
position:relative;
border-bottom:1px dashed var(--al-primary-soft);
cursor:help;
outline:none;
}
.aliviy-tip:hover,
.aliviy-tip:focus-visible{border-bottom-color:var(--al-primary)}
.aliviy-tip:after{
content:attr(data-tip);
position:absolute;
left:0;
bottom:calc(100% + 10px);
z-index:30;
width:max-content;
max-width:270px;
padding:10px 13px;
background:var(--al-tint-100);
border:1px solid var(--al-primary-soft);
border-radius:var(--al-radius-md);
box-shadow:0 12px 28px rgba(76,53,222,.16);
color:var(--al-ink);
font-size:.82rem;
font-weight:400;
line-height:1.45;
text-align:left;
white-space:normal;
opacity:0;
visibility:hidden;
transform:translateY(4px);
transition:opacity .16s ease,transform .16s ease,visibility .16s;
pointer-events:none;
}
.aliviy-tip:before{
content:"";
position:absolute;
left:16px;
bottom:calc(100% + 5px);
z-index:31;
width:10px;
height:10px;
background:var(--al-tint-100);
border-right:1px solid var(--al-primary-soft);
border-bottom:1px solid var(--al-primary-soft);
transform:rotate(45deg) translateY(4px);
opacity:0;
visibility:hidden;
transition:opacity .16s ease,transform .16s ease,visibility .16s;
pointer-events:none;
}
.aliviy-tip:hover:after,
.aliviy-tip:focus-visible:after{opacity:1;visibility:visible;transform:translateY(0)}
.aliviy-tip:hover:before,
.aliviy-tip:focus-visible:before{opacity:1;visibility:visible;transform:rotate(45deg) translateY(0)}
/* Старая подсказка на всей метке больше не нужна */
.aliviy-calc__name[data-tip]:after,
.aliviy-calc__name[data-tip]:before{content:none !important;display:none !important}
.aliviy-calc__name{cursor:default}
.aliviy-calc__hint{
display:block;
margin-top:1px;
color:var(--al-ink-muted);
font-size:.82em;
font-weight:400;
}
/* В первой строке группы подсказка не помещается сверху */
.aliviy-calc__row:first-of-type .aliviy-tip:after{bottom:auto;top:calc(100% + 10px)}
.aliviy-calc__row:first-of-type .aliviy-tip:before{
bottom:auto;
top:calc(100% + 5px);
border:0;
border-left:1px solid var(--al-primary-soft);
border-top:1px solid var(--al-primary-soft);
}
/* У правого столбца подсказка уезжала за край */
@media (min-width:1080px){
.aliviy-calc__group:last-child .aliviy-tip:after{left:auto;right:0}
.aliviy-calc__group:last-child .aliviy-tip:before{left:auto;right:16px}
}
/* ---------- 47. Калькулятор: возврат к двум колонкам ---------- */
/* Три узких столбца ужимали поля до неразборчивых коробок. Возвращаем два
столбца и прежние размеры: четыре группы ложатся в сетку 2×2. */
@media (min-width:1080px){
.aliviy-calc__body{grid-template-columns:minmax(0,1fr) 262px;gap:20px}
.aliviy-calc__groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.aliviy-calc__group{padding:14px 16px}
.aliviy-calc__row{
flex-direction:row;
align-items:center;
justify-content:space-between;
gap:10px;
padding:6px 0;
}
.aliviy-calc__name{font-size:.86em;flex:1 1 auto;min-width:0}
.aliviy-calc__stepper{flex:0 0 auto}
.aliviy-calc__input{width:52px}
.aliviy-calc__stepper button{width:24px;height:24px;font-size:14px}
/* Подсказки у правого столбца прижимаем к его краю */
.aliviy-calc__group:nth-child(2n) .aliviy-tip:after{left:auto;right:0}
.aliviy-calc__group:nth-child(2n) .aliviy-tip:before{left:auto;right:16px}
.aliviy-calc__group:last-child .aliviy-tip:after{left:0;right:auto}
.aliviy-calc__group:last-child .aliviy-tip:before{left:16px;right:auto}
.aliviy-calc__group:nth-child(2n):last-child .aliviy-tip:after{left:auto;right:0}
.aliviy-calc__group:nth-child(2n):last-child .aliviy-tip:before{left:auto;right:16px}
}
/* ---------- 48. Калькулятор: пунктир по слову и ширина поля ---------- */
/* Метка — колонка из названия и подписи, и подчёркивание растягивалось
на всю её ширину. Прижимаем к тексту. */
.aliviy-calc__name{display:flex;flex-direction:column;align-items:flex-start}
.aliviy-tip{
display:inline;
align-self:flex-start;
width:auto;
max-width:100%;
}
/* Поле счётчика: четырёхзначные числа обрезались */
.aliviy-calc__input{
width:62px;
padding:0 4px;
box-sizing:border-box;
}
/* Строки чуть плотнее: с четырьмя группами блок стал высоким */
.aliviy-calc__row{padding:5px 0}
.aliviy-calc__group{padding:12px 14px}
.aliviy-calc__groups{gap:12px 16px}
/* ---------- 49. Калькулятор: читаемость ---------- */
/* Подписи были набраны самым светлым серым (--al-ink-muted) на белом —
на светлом фоне итоговой панели они почти не читались. Поднимаем
контраст: служебные подписи до --al-ink-soft, значимые — до --al-ink. */
.aliviy-calc__label{color:var(--al-ink-soft)}
.aliviy-calc__pages{color:var(--al-ink);font-weight:600}
.aliviy-calc__note{color:var(--al-ink-soft);font-size:.86em}
.aliviy-calc__foot{color:var(--al-ink-soft);font-size:.8em}
.aliviy-calc__hint{color:var(--al-ink-soft)}
.aliviy-calc__lead{color:var(--al-ink-soft)}
.aliviy-calc__group h4{color:var(--al-primary);font-weight:800}
/* Название задачи — основной текст, а не подпись */
.aliviy-tip{color:var(--al-ink);font-weight:600}
/* Итоговая панель: чуть плотнее и с более заметной границей */
.aliviy-calc__result{
gap:12px;
padding:16px 18px;
border-color:var(--al-line);
}
.aliviy-calc__chars{font-size:1.55em}
.aliviy-calc__plan{font-size:1.18em}
/* Четырёхзначные числа всё ещё обрезались: даём полю запас */
.aliviy-calc__input{width:74px;padding:0 6px}
/* ==========================================================================
50. Калькулятор — итоговые размеры
Правки копились слоями и начали спорить друг с другом, поэтому геометрия
собрана здесь одним куском: этот раздел идёт последним и задаёт финальные
значения. Ниже по файлу калькулятор больше не трогаем.
========================================================================== */
.aliviy-calc{
margin:22px 0 0;
padding:18px 20px;
}
.aliviy-calc__head{margin:0 0 12px}
.aliviy-calc__title{margin:0 0 3px;font-size:1.15em}
.aliviy-calc__lead{font-size:.9em;line-height:1.4}
.aliviy-calc__body{
display:grid;
grid-template-columns:minmax(0,1fr) 250px;
gap:16px;
align-items:start;
}
/* Три раздела в один ряд: так все задачи видны разом, без прокрутки */
.aliviy-calc__groups{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px 12px;
}
.aliviy-calc__group{padding:10px 13px}
.aliviy-calc__group h4{
margin:0 0 5px;
padding-bottom:6px;
font-size:.74em;
letter-spacing:.05em;
}
/* Строка задачи: текст крупнее, счётчик ниже — раньше поле спорило
по величине с названием и перетягивало на себя внимание. */
.aliviy-calc__row{
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
gap:10px;
padding:4px 0;
border-bottom:0;
}
.aliviy-calc__name{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:0;
flex:1 1 auto;
min-width:0;
font-size:.92em;
font-weight:600;
line-height:1.25;
}
.aliviy-calc__hint{
margin-top:1px;
font-size:.78em;
font-weight:400;
line-height:1.2;
color:var(--al-ink-soft);
}
/* Счётчик — одна невысокая пилюля: кнопка, число, кнопка */
.aliviy-calc__stepper{
display:flex;
align-items:center;
gap:0;
flex:0 0 auto;
height:28px;
padding:0;
background:#fff;
border:1px solid var(--al-line);
border-radius:999px;
overflow:hidden;
}
.aliviy-calc__stepper button{
width:26px;
height:26px;
flex:0 0 26px;
padding:0;
border:0;
border-radius:0;
background:none;
color:var(--al-primary);
font-size:15px;
font-weight:700;
line-height:1;
cursor:pointer;
transition:background .16s ease,color .16s ease;
}
.aliviy-calc__stepper button:hover{background:var(--al-primary);color:#fff}
.aliviy-calc__input{
/* четыре знака должны помещаться: 1000 обрезалось при меньшей ширине */
width:58px;
height:26px;
padding:0 2px;
box-sizing:border-box;
border:0;
border-left:1px solid var(--al-line-soft);
border-right:1px solid var(--al-line-soft);
background:none;
color:var(--al-ink);
font:inherit;
font-size:.9em;
font-weight:700;
text-align:center;
line-height:26px;
font-variant-numeric:tabular-nums;
}
/* Итоговая панель */
.aliviy-calc__result{padding:15px 17px;gap:11px}
.aliviy-calc__chars{font-size:1.5em;margin:3px 0 1px}
.aliviy-calc__plan{font-size:1.15em}
.aliviy-calc__pick{padding-top:11px}
.aliviy-calc__foot{font-size:.78em;line-height:1.35}
.aliviy-calc__result .aliviy-plan__btn{padding:11px 16px;font-size:.92em}
/* Подсказка у правого столбца уезжала за край блока */
.aliviy-calc__group:last-child .aliviy-tip:after{left:auto;right:0}
.aliviy-calc__group:last-child .aliviy-tip:before{left:auto;right:16px}
/* --- телефоны и планшеты --- */
@media (max-width:1079px){
.aliviy-calc__body{grid-template-columns:minmax(0,1fr);gap:14px}
.aliviy-calc__result{position:static}
.aliviy-calc__groups{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
.aliviy-calc__groups{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
.aliviy-calc__groups{grid-template-columns:minmax(0,1fr);gap:10px}
}
@media (max-width:620px){
.aliviy-calc{padding:16px 14px;margin-top:18px}
.aliviy-calc__title{font-size:1.08em}
.aliviy-calc__lead{font-size:.86em}
.aliviy-calc__name{font-size:.9em}
/* Подсказку на телефоне показывать негде — прячем, пояснение и так
есть в подписи под названием */
.aliviy-tip{border-bottom:0}
.aliviy-tip:after,
.aliviy-tip:before{content:none !important;display:none !important}
}
/* ---------- 51. Калькулятор: подчёркивание, размер, поле ---------- */
/* Пунктир на border-bottom рвался: внутри флекс-контейнера строчный span
становится блоком, и рамка рисуется одной чертой под блоком, а не под
каждой строкой текста. text-decoration идёт за текстом на всех строках. */
.aliviy-tip{
display:inline;
border-bottom:0;
text-decoration:underline;
text-decoration-style:dashed;
text-decoration-color:var(--al-primary-soft);
text-decoration-thickness:1px;
text-underline-offset:3px;
color:var(--al-ink);
}
.aliviy-tip:hover,
.aliviy-tip:focus-visible{
text-decoration-color:var(--al-primary);
border-bottom:0;
}
/* Текст чуть крупнее и контрастнее */
.aliviy-calc__name{font-size:.96em;color:var(--al-ink)}
.aliviy-calc__hint{font-size:.8em;color:var(--al-ink-soft)}
.aliviy-calc__group h4{font-size:.78em}
/* Поле счётчика сжималось как флекс-элемент, и «10» или «100» обрезались.
Запрещаем сжатие и задаём точный размер. */
.aliviy-calc__stepper{flex:0 0 auto}
.aliviy-calc__input{
flex:0 0 56px;
width:56px;
min-width:56px;
font-size:.95em;
}
.aliviy-calc__stepper button{flex:0 0 26px}
/* ==========================================================================
52. Калькулятор — контраст названий и сброс
Названия задач («Статья или пост») набирались тем же серым, что и объём
под ними, и строка читалась одним пятном. Разводим их по весу и цвету.
========================================================================== */
.aliviy-calc__name{
font-size:.97em;
color:var(--al-ink);
}
.aliviy-calc__hint{
font-size:.76em;
color:var(--al-ink-muted);
}
.aliviy-tip{color:var(--al-ink)}
/* Сброс — рядом с пояснением, без веса кнопки: это не действие страницы */
.aliviy-calc__head{
display:flex;
flex-wrap:wrap;
align-items:baseline;
justify-content:space-between;
gap:4px 14px;
}
.aliviy-calc__head .aliviy-calc__title{flex:1 1 100%}
.aliviy-calc__head .aliviy-calc__lead{flex:1 1 auto;margin:0}
.aliviy-calc__clear{
flex:0 0 auto;
padding:0;
background:none;
border:0;
color:var(--al-ink-muted);
font:inherit;
font-size:.84em;
text-decoration:underline;
text-underline-offset:3px;
cursor:pointer;
transition:color .16s ease;
}
.aliviy-calc__clear:hover{color:var(--al-primary)}
/* ==========================================================================
53. Оформление заказа — фирменный вид
Здесь же снимаем следы старого инлайнового стиля темы: он удалён из
wp_head, но правила ниже остаются страховкой, если его вернут.
========================================================================== */
.woocommerce-checkout form.checkout,
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.login{
max-width:none;
margin:0;
padding:0;
background:none !important;
border:0 !important;
border-radius:0;
box-shadow:none;
}
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.login{
margin:0 0 16px;
padding:16px 18px !important;
background:#fff !important;
border:1px solid var(--al-line) !important;
border-radius:var(--al-radius-md);
}
/* «Заказ» дублирует карточку с тарифом наверху страницы */
.woocommerce-checkout #order_review_heading{display:none !important}
/* Что покупаем: тариф слева, цена справа — цену видно до формы */
.aliviy-order__head{
flex-direction:row;
align-items:baseline;
justify-content:space-between;
gap:12px;
}
.aliviy-order__title{display:flex;flex-direction:column;gap:2px;min-width:0}
.aliviy-order__price{
flex:0 0 auto;
color:var(--al-primary);
font-size:1.25em;
font-weight:700;
white-space:nowrap;
}
.aliviy-order__price .amount{color:inherit;font-weight:inherit}
.aliviy-order__price small{display:none}
/* Таблица заказа: состав уже описан карточкой выше, оставляем только итог.
Строки не удаляем, а прячем — WooCommerce обновляет их при промокоде. */
.woocommerce-checkout .shop_table thead,
.woocommerce-checkout .shop_table .cart_item,
.woocommerce-checkout .shop_table .cart-subtotal{display:none}
.woocommerce-checkout .shop_table{margin:0 0 14px}
.woocommerce-checkout .shop_table .order-total th,
.woocommerce-checkout .shop_table .order-total td{
padding:0 0 14px;
border-bottom:1px solid var(--al-line-soft);
font-size:1.1em;
}
/* Уведомления: старый стиль красил текст белым по белому фону */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message{
display:block;
max-width:none;
margin:0 0 14px;
padding:12px 16px;
background:var(--al-tint-100);
border:1px solid var(--al-line);
border-left:3px solid var(--al-primary);
border-radius:var(--al-radius-md);
color:var(--al-ink) !important;
font-size:.92em;
text-align:left;
}
.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .woocommerce-message a{
color:var(--al-primary);
font-weight:600;
}
.woocommerce-checkout .woocommerce-info:before,
.woocommerce-checkout .woocommerce-message:before{display:none}
.woocommerce-checkout .woocommerce-form-login-toggle{
display:block;
max-width:none;
margin:0 0 14px;
}
.woocommerce-checkout .woocommerce-error{
max-width:none;
margin:0 0 14px;
text-align:left;
}
/* Галочка «запомнить карту» и согласие с правилами */
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew,
.woocommerce-checkout .validate-required.terms{
display:flex;
align-items:flex-start;
gap:8px;
margin:12px 0 0;
font-size:.88em;
line-height:1.4;
}
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew label,
.woocommerce-checkout .validate-required.terms label{
margin:0;
font-weight:400;
color:var(--al-ink-soft);
}
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew input[type="checkbox"],
.woocommerce-checkout .validate-required.terms input[type="checkbox"]{
flex:0 0 auto;
width:16px;
height:16px;
margin:2px 0 0;
accent-color:var(--al-primary);
}
.woocommerce-checkout .woocommerce-privacy-policy-text{
margin:14px 0 0;
color:var(--al-ink-muted);
font-size:.8em;
line-height:1.45;
}
.woocommerce-checkout .woocommerce-privacy-policy-text p{margin:0}
/* Подсветку заполненных полей темой убираем: зелёная заливка внутрь поля
перекрывала введённый текст */
.woocommerce-checkout .form-row.woocommerce-validated input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text{box-shadow:none}
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text{border-color:#e2506b}
/* Что снимает тревогу перед оплатой */
.aliviy-trust{
list-style:none;
margin:14px 0 0;
padding:0;
display:flex;
flex-direction:column;
gap:6px;
color:var(--al-ink-muted);
font-size:.84em;
}
.aliviy-trust li{position:relative;padding-left:20px}
.aliviy-trust li:before{
content:"";
position:absolute;
left:2px;
top:.35em;
width:8px;
height:4px;
border-left:2px solid var(--al-ok,#2f9e6b);
border-bottom:2px solid var(--al-ok,#2f9e6b);
transform:rotate(-45deg);
}
@media (max-width:600px){
.aliviy-order__head{flex-direction:column;align-items:flex-start;gap:6px}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout #order_review{padding:16px 16px}
}
/* ==========================================================================
54. Оформление — вторая правка по замерам
========================================================================== */
/* Хлебные крошки уводят обратно в каталог с полпути к оплате */
.woocommerce-checkout .breadcrumb{display:none}
/* Поля стояли на float: обёртка схлопывалась в ноль, и белая карточка
заканчивалась сразу под заголовком, а поля висели на сером фоне */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 16px;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row{
float:none !important;
width:auto !important;
margin:0 0 14px;
padding:0;
}
.woocommerce-checkout .woocommerce-account-fields{
margin:0;
padding:0 24px 22px;
background:#fff;
border:1px solid var(--al-line);
border-top:0;
border-radius:0 0 var(--al-radius-lg) var(--al-radius-lg);
box-shadow:0 10px 30px rgba(76,53,222,.07);
}
.woocommerce-checkout .woocommerce-billing-fields{
margin-bottom:0;
border-bottom:0;
border-radius:var(--al-radius-lg) var(--al-radius-lg) 0 0;
box-shadow:none;
}
.woocommerce-checkout #customer_details{margin:0 0 16px}
/* Глазок «показать пароль» вылезал из поля серым прямоугольником:
у обёртки не было точки отсчёта для абсолютного позиционирования */
.woocommerce-checkout .password-input{position:relative;display:block}
.woocommerce-checkout .password-input .input-text{padding-right:46px}
.woocommerce-checkout .show-password-input{
position:absolute;
right:12px;
top:50%;
width:24px;
height:24px;
margin-top:-12px;
padding:0;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324202f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E") center/20px no-repeat;
border:0;
opacity:.5;
cursor:pointer;
transition:opacity .16s ease;
}
.woocommerce-checkout .show-password-input:after{display:none}
.woocommerce-checkout .show-password-input:hover,
.woocommerce-checkout .show-password-input.display-password{opacity:1}
/* Переключатели «войти» и «промокод» — одна строка, не блок-уведомление */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{
margin:0 0 12px;
padding:10px 14px;
background:none;
border:0;
border-left:0;
color:var(--al-ink-muted) !important;
font-size:.86em;
text-align:right;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle{margin:0}
/* Описание способа оплаты повторяет его название; шлюз печатает его сам,
мимо фильтра woocommerce_gateway_description, поэтому прячем здесь */
.woocommerce-checkout .payment_box > p:first-child:not(.form-row){display:none}
/* Список сохранённых карт: пока карта одна-единственная строка
«Используйте новый способ оплаты» — выбор из одного варианта */
.woocommerce-checkout ul.woocommerce-SavedPaymentMethods > li.woocommerce-SavedPaymentMethods-new:only-child{
display:none;
}
.woocommerce-checkout ul.woocommerce-SavedPaymentMethods{
margin:0;
padding:0;
list-style:none;
}
/* Рамка таблицы заказа осталась от стилей WooCommerce */
.woocommerce-checkout .shop_table,
.woocommerce-checkout .shop_table td,
.woocommerce-checkout .shop_table th{border-left:0;border-right:0;border-top:0}
.woocommerce-checkout .shop_table{border:0}
@media (max-width:600px){
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr}
.woocommerce-checkout .woocommerce-account-fields{padding:0 16px 16px}
}
/* Таблицы в контенте мы оборачиваем в карточку .aliviy-table — на
оформлении она рисовала лишнюю рамку вокруг одной строки «Итого» */
.woocommerce-checkout #order_review .aliviy-table{
padding:0;
background:none;
border:0;
border-radius:0;
box-shadow:none;
overflow:visible;
}
/* На узком экране ячейки строки «Итого» смыкались вплотную и цена
слипалась со словом: раскладываем строку по краям */
.woocommerce-checkout .shop_table .order-total{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
}
.woocommerce-checkout .shop_table .order-total th,
.woocommerce-checkout .shop_table .order-total td{display:block}
/* ==========================================================================
55. Калькулятор — убираем пустую полосу сверху и поджимаем блок
Заголовок получал от темы (.entry-content h3) отступ сверху в 35px:
мой прежний селектор был слабее и проигрывал, а после перевода шапки
на flex отступ перестал схлопываться и стал видимой пустой полосой.
========================================================================== */
.aliviy-calc .aliviy-calc__head .aliviy-calc__title{
margin:0 0 4px;
font-size:1.08em;
}
.aliviy-calc .aliviy-calc__head{margin:0 0 10px}
.aliviy-calc .aliviy-calc__head .aliviy-calc__lead{line-height:1.35}
.aliviy-calc{padding:14px 18px}
.aliviy-calc .aliviy-calc__body{gap:14px}
.aliviy-calc .aliviy-calc__groups{gap:8px 10px}
.aliviy-calc .aliviy-calc__group{padding:9px 12px}
.aliviy-calc .aliviy-calc__group h4{margin:0 0 4px;padding-bottom:5px}
.aliviy-calc .aliviy-calc__row{padding:3px 0}
@media (max-width:900px){
.aliviy-calc .aliviy-calc__head .aliviy-calc__title{font-size:1.05em}
}
/* ==========================================================================
56. Оформление — блок оплаты и согласия
========================================================================== */
/* Единственный способ оплаты: радиокнопку оставляем в разметке, иначе
заказ уйдёт без payment_method, но с глаз убираем */
.aliviy-one-gateway #payment ul.payment_methods{
position:absolute;
width:1px;
height:1px;
margin:-1px;
padding:0;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;
border:0;
}
/* Что произойдёт при продлении — рядом с кнопкой, до её нажатия */
.aliviy-autopay{
margin:0 0 12px;
padding:12px 14px;
background:var(--al-tint-50);
border:1px solid var(--al-line);
border-radius:var(--al-radius-md);
color:var(--al-ink-soft);
font-size:.84em;
line-height:1.45;
}
/* Согласие и политика: одна строка, без казённого абзаца */
.woocommerce-checkout .woocommerce-privacy-policy-text{
margin:0 0 8px;
font-size:.84em;
}
.woocommerce-checkout .validate-required.terms{margin:0 0 14px}
/* Карточкой делаем сам #customer_details, а не два блока внутри.
Раньше верх карточки рисовали поля покупателя, а низ — блок с паролем;
у залогиненного блока с паролем нет, и карточка оставалась без дна:
между ней и заказом висела пустая полоса с открытым краем. */
.woocommerce-checkout #customer_details{
margin:0 0 16px;
padding:22px 24px;
background:#fff;
border:1px solid var(--al-line);
border-radius:var(--al-radius-lg);
box-shadow:0 10px 30px rgba(76,53,222,.07);
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-account-fields{
margin:0;
padding:0;
background:none;
border:0;
border-radius:0;
box-shadow:none;
}
.woocommerce-checkout .woocommerce-account-fields:empty{display:none}
.woocommerce-checkout #customer_details > .clear{display:none}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row:last-child{margin-bottom:0}
.woocommerce-checkout .woocommerce-account-fields .form-row{margin:14px 0 0}
/* Строка «Итого» стала flex-раскладкой, и подчёркивание осталось только
под словом «Итого» — шириной в 52 пикселя. Линию переносим на строку */
.woocommerce-checkout .shop_table .order-total{
padding-bottom:14px;
border-bottom:1px solid var(--al-line-soft);
}
.woocommerce-checkout .shop_table .order-total th,
.woocommerce-checkout .shop_table .order-total td{padding:0;border-bottom:0}
/* Согласие с правилами: WooCommerce печатает его как обычную .form-row,
без класса terms — селектор был холостым */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{margin:0 0 14px}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row{
display:flex;
align-items:flex-start;
gap:8px;
margin:0;
padding:0;
font-size:.88em;
line-height:1.4;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label{
margin:0;
font-weight:400;
color:var(--al-ink-soft);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"]{
flex:0 0 auto;
width:16px;
height:16px;
margin:2px 0 0;
accent-color:var(--al-primary);
}
/* Тема печатает у .form-row декоративный ::before. В обычной строке он
невидим, но как только строка становится flex-контейнером, псевдоэлемент
превращается в полноценный элемент шириной 118 пикселей и отжимает
содержимое вправо — галочка согласия уезжала к середине строки. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row:before,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row:after,
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew:before,
.woocommerce-checkout .woocommerce-SavedPaymentMethods-saveNew:after{
content:none;
display:none;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row{
justify-content:flex-start;
}
/* ==========================================================================
57. Оформление — одна карточка вместо двух
Данные покупателя и заказ разделяла полоса серого фона: два блока об
одном и том же действии. Карточкой делаем саму форму, а внутренние
блоки разделяем тонкой линией.
========================================================================== */
.woocommerce-checkout form.checkout{
padding:22px 24px !important;
background:#fff !important;
border:1px solid var(--al-line) !important;
border-radius:var(--al-radius-lg);
box-shadow:0 10px 30px rgba(76,53,222,.07);
}
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-account-fields{
margin:0;
padding:0;
background:none;
border:0;
border-radius:0;
box-shadow:none;
}
.woocommerce-checkout #order_review{
margin-top:18px;
padding-top:18px;
border-top:1px solid var(--al-line-soft);
}
.woocommerce-checkout .shop_table{margin:0 0 16px}
/* Врезка про автопродление снята — условия описаны в соглашении */
.aliviy-autopay{display:none}
/* Галочка согласия: flex-контейнером делаем сам label — квадратик и
текст лежат в одной строке. Раньше flex стоял на строке формы, а
input сидел внутри label, и отступ между ними не работал: квадратик
прижимался к тексту и висел выше строки. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row{
display:block;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label{
display:flex;
align-items:center;
gap:9px;
margin:0;
font-weight:400;
line-height:1.4;
color:var(--al-ink-soft);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label input[type="checkbox"]{
flex:0 0 auto;
width:17px;
height:17px;
margin:0;
accent-color:var(--al-primary);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .required{
margin-left:-5px;
}
/* ==========================================================================
58. Оформление — согласия читаемее, звёздочка на месте
Промежуток flex-контейнера доставался и звёздочке обязательного поля:
она отрывалась от слова «сайта» на девять пикселей. Отступ переносим
на сам квадратик, а строку набираем чуть крупнее — это единственный
мелкий текст, который человек обязан прочитать.
========================================================================== */
.woocommerce-checkout .woocommerce-privacy-policy-text{
margin:0 0 10px;
font-size:.9em;
line-height:1.5;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label{
gap:0;
font-size:1.02em;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label input[type="checkbox"]{
margin:0 9px 0 0;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .required{
margin-left:3px;
text-decoration:none;
}
/* Левый край текста в карточке тарифа и в форме должен совпадать:
22 против 24 пикселей давали заметный уступ между блоками */
.aliviy-order{padding:18px 24px}
@media (max-width:600px){
.woocommerce-checkout form.checkout{padding:16px !important}
.aliviy-order{padding:16px}
.woocommerce-checkout #order_review{margin-top:16px;padding-top:16px}
}
/* Колонки калькулятора заканчивались на разной высоте: группы задач
на 1560, панель с итогом на 1577 — под группами оставалась полоса
пустого фона. Растягиваем всё до общего низа. */
.aliviy-calc .aliviy-calc__body{align-items:stretch}
.aliviy-calc .aliviy-calc__groups{align-items:stretch}
.aliviy-calc .aliviy-calc__group{height:100%}
/* Образец строки сохранённой карты — показываем сценарий отвязки, пока
настоящей карты ещё нет. Подписан как образец, чтобы его не приняли
за чужие данные. */
.aliviy-pay__demo{margin:12px 0 0}
.aliviy-pay__demo-label{
display:block;
margin:0 0 6px;
color:var(--al-ink-muted);
font-size:.8em;
letter-spacing:.03em;
text-transform:uppercase;
}
.aliviy-pay__card.is-demo{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 16px;
background:var(--al-tint-50);
border:1px dashed var(--al-line);
border-radius:var(--al-radius-md);
}
.aliviy-pay__card.is-demo .aliviy-pay__num{
color:var(--al-ink-soft);
font-weight:600;
letter-spacing:.06em;
}
.aliviy-pay__demo-btn{
flex:0 0 auto;
padding:8px 16px;
background:#fff;
border:1px solid var(--al-line);
border-radius:999px;
color:var(--al-ink-soft);
font-size:.86em;
font-weight:600;
}
@media (max-width:600px){
.aliviy-pay__card.is-demo{flex-direction:column;align-items:flex-start;gap:10px}
}
/* Бейдж состояния сделан блочным (иначе wpautop заворачивал его в
собственный абзац во всю оставшуюся ширину) — задаём ему размер по
содержимому, чтобы он остался пилюлей, а не полосой */
.aliviy-sub__status{
flex:0 0 auto;
align-self:center;
width:auto;
margin:0;
text-align:center;
}
/* Две кнопки в карточке подписки набирались по-разному: 14,7 px против
16 и поля 11/16 против 13/20. Высота совпадала, но надписи выглядели
разнокалиберно. Приводим к одной геометрии и одному кеглю. */
.aliviy-sub__actions > a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 22px;
font-size:.92em;
font-weight:700;
line-height:1.2;
white-space:nowrap;
}
/* Кнопки в окне подтверждения переносились на две строки и вырастали до
64 пикселей. Запрещаем перенос и держим одну высоту. */
.aliviy-modal__actions{display:flex;gap:10px;flex-wrap:wrap}
.aliviy-modal__btn{
display:inline-flex;
align-items:center;
justify-content:center;
flex:1 1 auto;
min-height:48px;
padding:0 18px;
white-space:nowrap;
line-height:1.2;
}
/* Прежний селектор .aliviy-sub__actions > a (0,1,1) проигрывал более
раннему .aliviy-sub__actions .aliviy-plan__btn (0,2,0), и первая
кнопка оставалась display:block — надпись прижималась к верху пилюли.
Перечисляем оба класса явно. */
.aliviy-sub__actions .aliviy-plan__btn,
.aliviy-sub__actions .aliviy-sub__cancel{
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
min-height:46px;
margin:0;
padding:0 22px;
font-size:.92em;
font-weight:700;
line-height:1.2;
white-space:nowrap;
}
/* Кнопка «Добавление способа оплаты» ведёт в шлюз, который без включённых
рекуррентов отвечает отказом. Прячем её вместе с уведомлением
«Сохранённых методов не обнаружено» — о том же сказано в карточке выше. */
.aliviy-no-autopay .woocommerce-MyAccount-content a.button[href*="add-payment-method"],
.aliviy-no-autopay .woocommerce-MyAccount-content .woocommerce-Message--info,
.aliviy-no-autopay .woocommerce-MyAccount-content > .woocommerce-info{
display:none !important;
}
/* Бегунок переключателя прилипал к нижнему краю дорожки: у неё есть
рамка, и top:3px отсчитывался от внутреннего края. Считаем от
середины — и селектором не слабее прежнего (.aliviy-switch .knob),
иначе правило проигрывает по специфичности. */
.aliviy-switch .aliviy-switch__knob{
top:50%;
margin-top:-12px;
bottom:auto;
}
/* Кнопки действий в списке заказов были размером с основную кнопку сайта
и втроём занимали половину строки. Делаем компактными, главной
оставляем только «Оплатить». */
.woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions{white-space:normal}
.woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions a.woocommerce-button.button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:32px;
margin:2px 4px 2px 0;
padding:0 14px;
border-radius:999px;
font-size:.8em;
font-weight:600;
line-height:1.2;
white-space:nowrap;
box-shadow:none;
}
.woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions a.woocommerce-button.button.view,
.woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions a.woocommerce-button.button.cancel{
background:#fff !important;
border:1px solid var(--al-line);
color:var(--al-ink-soft) !important;
}
.woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions a.woocommerce-button.button.view:hover,
.woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-actions a.woocommerce-button.button.cancel:hover{
border-color:var(--al-primary);
color:var(--al-primary) !important;
}
/* ==========================================================================
59. Профиль — фирменная карточка в две колонки
Форма занимала 560 пикселей из 1100 и стояла узким столбиком: справа
висела пустота во весь экран, а поля шли одно под другим. Раскладываем
по две колонки, смену пароля выносим в отдельный блок под чертой.
========================================================================== */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 22px;
max-width:none;
margin:0;
padding:26px 28px;
background:#fff;
border:1px solid var(--al-line);
border-radius:var(--al-radius-lg);
box-shadow:0 10px 30px rgba(76,53,222,.07);
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm > .clear{display:none}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm > .form-row{
float:none;
width:auto;
margin:0 0 18px;
padding:0;
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row label{
display:block;
margin:0 0 6px;
color:var(--al-ink);
font-size:.92em;
font-weight:600;
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row span.description,
.woocommerce-MyAccount-content .woocommerce-EditAccountForm .form-row em{
display:block;
margin-top:6px;
color:var(--al-ink-muted);
font-size:.8em;
font-style:normal;
line-height:1.4;
}
/* Смена пароля — отдельным блоком во всю ширину, поля в три колонки */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:0 22px;
grid-column:1 / -1;
margin:4px 0 0;
padding:22px 0 0;
border:0;
border-top:1px solid var(--al-line-soft);
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset > legend{
grid-column:1 / -1;
float:none;
width:auto;
margin:0 0 16px;
padding:0;
color:var(--al-ink);
font-size:1.05em;
font-weight:700;
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset > .form-row{
float:none;
width:auto;
margin:0 0 18px;
padding:0;
}
/* Кнопка сохранения — во всю ширину строки, но не растянутая на карточку */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm > p:last-child{
grid-column:1 / -1;
margin:6px 0 0;
padding:18px 0 0;
border-top:1px solid var(--al-line-soft);
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm button[type="submit"]{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 28px;
background:var(--al-grad-btn);
border:0;
border-radius:999px;
color:#fff;
font:inherit;
font-size:.95em;
font-weight:700;
cursor:pointer;
box-shadow:0 10px 26px rgba(76,53,222,.24);
transition:filter .16s ease,transform .16s ease;
}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm button[type="submit"]:hover{filter:brightness(1.06)}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm button[type="submit"]:active{transform:translateY(1px)}
@media (max-width:900px){
.woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
.woocommerce-MyAccount-content .woocommerce-EditAccountForm{grid-template-columns:1fr;padding:18px}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset{grid-template-columns:1fr}
.woocommerce-MyAccount-content .woocommerce-EditAccountForm button[type="submit"]{width:100%}
}
/* Пояснение к паролю — во всю ширину, перед кнопкой */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm .aliviy-profile__note{
grid-column:1 / -1;
margin:0 0 4px;
color:var(--al-ink-muted);
font-size:.84em;
}
/* Поля пароля выравниваем по верхнему краю ввода, а не по подписи */
.woocommerce-MyAccount-content .woocommerce-EditAccountForm > fieldset > .form-row{
display:flex;
flex-direction:column;
justify-content:flex-end;
}
/* Подпись под названием тарифа резервировала две строки (min-height 2.4em)
даже под однострочный текст — под ней зияла пустая полоса, а карточки
из-за этого тянулись. Подписи сокращены до одной строки, высоту
резервируем ровно под неё, чтобы карточки остались выровненными. */
.aliviy-plan__tagline{
min-height:1.35em;
margin-bottom:14px;
}
/* Общее для платных тарифов — одной строкой под сеткой, вместо повтора
четырёх одинаковых пунктов в каждой карточке */
.aliviy-tariffs__common{
margin:16px 0 0;
padding:12px 16px;
background:var(--al-tint-50);
border:1px solid var(--al-line);
border-radius:var(--al-radius-md);
color:var(--al-ink-soft);
font-size:.9em;
line-height:1.5;
text-align:center;
}
/* ==========================================================================
60. Общее для платных тарифов — заметной плашкой
Раньше это была бледная строка петитом, её принимали за сноску. Делаем
подписанную плашку в фирменном тоне: слева ярлык, справа пункты с
галочками — тот же язык, что и в карточках.
========================================================================== */
.aliviy-common{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px 22px;
margin:16px 0 0;
padding:14px 18px;
background:var(--al-tint-100);
border:1px solid var(--al-primary-soft);
border-left:3px solid var(--al-primary);
border-radius:var(--al-radius-lg);
}
.aliviy-common__label{
flex:0 0 auto;
color:var(--al-primary);
font-size:.78em;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
}
.aliviy-common__list{
display:flex;
flex-wrap:wrap;
gap:8px 22px;
margin:0;
padding:0;
list-style:none;
}
.aliviy-common__list li{
position:relative;
padding-left:22px;
color:var(--al-ink);
font-size:.92em;
line-height:1.35;
}
.aliviy-common__list li:before{
content:"";
position:absolute;
left:2px;
top:.36em;
width:9px;
height:5px;
border-left:2px solid var(--al-primary);
border-bottom:2px solid var(--al-primary);
transform:rotate(-45deg);
}
@media (max-width:900px){
.aliviy-common{flex-direction:column;align-items:flex-start;gap:8px}
.aliviy-common__list{flex-direction:column;gap:6px}
}
/* Годовая цена: сумма отдельной строкой, выгода — цветной пилюлей.
Слитной строкой она переносилась в каждой карточке по-своему и
терялась среди обычного текста. */
.aliviy-plan__year{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:5px;
margin:0 0 14px;
padding:0;
background:none;
border:0;
}
.aliviy-plan__year-sum{
color:var(--al-ink-soft);
font-size:.88em;
font-weight:600;
}
.aliviy-plan__year-save{
padding:3px 11px;
background:var(--al-accent);
border-radius:999px;
color:#fff;
font-size:.8em;
font-weight:700;
letter-spacing:.01em;
white-space:nowrap;
}
/* Подсказка в плашке общего: тот же приём, что в калькуляторе */
.aliviy-common__list .aliviy-tip{
color:inherit;
font-size:inherit;
}
/* Плашка общего должна вставать в одну строку: ярлык слева, пять пунктов
справа. Промежутки сжимаем, перенос разрешаем только если не влезло. */
.aliviy-common{gap:8px 18px;padding:12px 18px}
.aliviy-common__list{gap:6px 18px;flex:1 1 auto}
.aliviy-common__list li{font-size:.88em;padding-left:20px}
/* На широком экране ярлык и пункты помещаются в одну строку целиком */
@media (min-width:1100px){
.aliviy-common{flex-wrap:nowrap}
.aliviy-common__list{flex-wrap:nowrap;justify-content:space-between}
}
/* Ярлык возвращаем на отдельную строку над пунктами: так плашка читается
как подписанный список, а не как строка с заголовком сбоку.
Пункты после сокращения формулировок и так встают в один ряд. */
@media (min-width:1100px){
.aliviy-common{flex-wrap:wrap}
.aliviy-common__label{flex:1 1 100%}
.aliviy-common__list{flex-wrap:wrap;justify-content:flex-start}
}
/* Абзац после калькулятора прилипал к его нижней рамке */
.aliviy-calc{margin-bottom:22px}
/* Четыре колонки держались до 1000 пикселей, и в диапазоне 1000–1200
карточки становились уже 210 пикселей: подписи ломались на две строки,
а списки — на три. Раскладываем в две колонки раньше, а в узкой полосе
перед этим чуть уменьшаем кегль подписи. */
@media (max-width:1200px){
.aliviy-tariffs__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1320px) and (min-width:1201px){
.aliviy-plan__tagline{font-size:.9em}
}
/* Годовая строка: сумма и выгода в один ряд и крупнее — раньше они шли
двумя строками мелким кеглем и терялись между подписью и объёмом. */
.aliviy-plan__year{
flex-direction:row;
align-items:center;
flex-wrap:nowrap;
gap:10px;
min-height:30px;
margin:0 0 14px;
}
.aliviy-plan__year-sum{
font-size:1em;
font-weight:700;
color:var(--al-ink);
white-space:nowrap;
}
.aliviy-plan__year-save{
padding:3px 10px;
font-size:.82em;
}
/* Пустышка в бесплатной карточке держит ту же высоту, чтобы строки
«N символов» стояли на одном уровне во всех тарифах */
.aliviy-plan__year--empty{margin:0 0 14px;min-height:30px}
/* Кегль годовой строки задавался от уменьшенного родителя и выходил
12 пикселей — мельче подписи тарифа. Считаем от размера карточки. */
.aliviy-plan__year{font-size:.95em;min-height:32px}
.aliviy-plan__year--empty{min-height:32px}
.aliviy-plan__year-sum{font-size:1em}
.aliviy-plan__year-save{font-size:.82em}
/* Колонки были заданы как 1fr, то есть minmax(auto,1fr): неразрывная
годовая строка растягивала колонку по своему содержимому, и сетка
вылезала за экран. Разрешаем колонкам сжиматься, а строке — при
нехватке места переноситься. */
.aliviy-tariffs__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.aliviy-plan{min-width:0}
.aliviy-plan__year{flex-wrap:wrap;row-gap:6px}
@media (max-width:1200px){
.aliviy-tariffs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
.aliviy-tariffs__grid{grid-template-columns:minmax(0,1fr)}
}
/* Годовая строка переехала под цену, до подписи тарифа. Там она стоит
вплотную к сумме, поэтому делаем её компактнее: меньше кегль, меньше
высота и отступ. */
.aliviy-plan__year{
margin:6px 0 12px;
min-height:24px;
font-size:.86em;
gap:8px;
}
.aliviy-plan__year--empty{margin:6px 0 12px;min-height:24px}
.aliviy-plan__year-sum{font-size:1em;font-weight:700}
.aliviy-plan__year-save{padding:2px 9px;font-size:.86em}
/* Пустышка была на 4 пикселя ниже настоящей строки (её высоту задаёт
пилюля с отступами), и карточка бесплатного тарифа съезжала вверх */
.aliviy-plan__year,
.aliviy-plan__year--empty{min-height:28px}
/* ==========================================================================
62. Шапка карточки тарифа — подпись на своей строке
«в месяц при оплате за год» стояла в одной строке с названием тарифа и
занимала 147 пикселей из 227 доступных: запаса не оставалось совсем, а
при подстановке запасного шрифта строка вылезала за край карточки —
у «Макса» за рамку уезжал знак рубля.
Разворачиваем блок цены в display:contents, чтобы сумма и подпись стали
прямыми детьми шапки: сумма остаётся справа от названия, подпись уходит
на свою строку во всю ширину карточки и переносится, если не влезла.
========================================================================== */
.aliviy-plan__top{flex-wrap:wrap;row-gap:2px}
.aliviy-plan__price{display:contents}
.aliviy-plan__sum{margin-left:auto;text-align:right}
.aliviy-plan__unit{
flex:1 1 100%;
text-align:right;
white-space:normal;
line-height:1.25;
}
/* ==========================================================================
63. Карточка тарифа — единый вертикальный ритм
Отступы копились разными правилами и вышли вразнобой: 18 пикселей под
ценой, по 33 между подписью, объёмом и списком. Годовая строка при этом
висела ровно посередине между ценой и подписью, хотя относится к цене.
Задаём шаг явно: цена → год 6, год → подпись 12, дальше по 14.
========================================================================== */
.aliviy-plan__top{margin-bottom:0}
.aliviy-plan__year,
.aliviy-plan__year--empty{margin:6px 0 12px}
.aliviy-plan__tagline{margin:0 0 14px;min-height:1.35em}
.aliviy-plan__volume{margin:0 0 14px;padding-top:12px}
.aliviy-plan__list{margin:0}
.aliviy-plan__btn{margin-top:14px}
/* Годовая строка, подпись и объём — это , и тема задаёт им отступ
правилом .entry-content p (0-1-1), которое било мой селектор с одним
классом. Добавляем класс карточки — становится 0-2-0 и выигрывает. */
.aliviy-plan .aliviy-plan__year,
.aliviy-plan .aliviy-plan__year--empty{margin:6px 0 12px}
.aliviy-plan .aliviy-plan__tagline{margin:0 0 14px}
.aliviy-plan .aliviy-plan__volume{margin:0 0 14px;padding-top:12px}
.aliviy-plan .aliviy-plan__list{margin:0}
.aliviy-plan .aliviy-plan__btn{margin-top:14px}
/* ==========================================================================
64. Выгрузка истории диалогов
========================================================================== */
.aliviy-history__tools{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:0 0 16px;
}
.aliviy-history__btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:0 18px;
background:var(--al-grad-btn);
border:0;
border-radius:999px;
color:#fff !important;
font-size:.9em;
font-weight:700;
line-height:1.2;
text-decoration:none;
white-space:nowrap;
box-shadow:0 8px 20px rgba(76,53,222,.22);
transition:filter .16s ease,transform .16s ease;
}
.aliviy-history__btn:hover{filter:brightness(1.06)}
.aliviy-history__btn:active{transform:translateY(1px)}
.aliviy-history__btn.is-ghost{
background:#fff;
border:1px solid var(--al-line);
color:var(--al-primary) !important;
box-shadow:none;
}
.aliviy-history__btn.is-ghost:hover{border-color:var(--al-primary)}
/* Пустой список возможностей не должен оставлять зазор */
.aliviy-plan__list:empty{display:none}
/* Главное отличие тарифа выделяем в списке: фирменный цвет и полужирный.
Так глаз цепляется за него раньше, чем начинает читать весь столбец. */
.aliviy-plan__list li.is-mark{
color:var(--al-primary);
font-weight:700;
}
.aliviy-plan__list li.is-mark:before{
border-left-color:var(--al-primary);
border-bottom-color:var(--al-primary);
}
/* Подсказки внутри карточки набраны тем же кеглем, что и пункт */
.aliviy-plan__list .aliviy-tip{color:inherit;font-size:inherit;font-weight:inherit}
/* ==========================================================================
65. Подсказки в карточках тарифов
Всплывающую подсказку закрывала соседняя карточка: она идёт следующей в
разметке, тоже position:relative, и рисуется поверх. Поднимаем карточку
с наведением над соседями и саму подсказку — над всем внутри.
========================================================================== */
.aliviy-plan:hover,
.aliviy-plan:focus-within{z-index:5}
.aliviy-plan .aliviy-tip:after,
.aliviy-plan .aliviy-tip:before{z-index:30}
/* На узком экране подсказка не должна уходить за край: ширину ограничиваем
шириной окна, а у последней колонки прижимаем её к правому краю пункта. */
@media (max-width:620px){
.aliviy-plan .aliviy-tip:after{
max-width:calc(100vw - 48px);
width:max-content;
}
}
/* ==========================================================================
66. Подсказки на телефоне — в тарифах они нужны
Правило «прячем подсказки на телефоне» писалось для калькулятора: там под
каждым названием и так стоит подпись с объёмом. В карточках тарифов такой
подписи нет, и без подсказки пункт «Пакетная загрузка» ничего не значит.
Возвращаем их и открываем по касанию: у пунктов есть tabindex, а тап по
такому элементу даёт :focus — на сенсорном экране это единственный способ.
========================================================================== */
@media (max-width:620px){
.aliviy-plan__list .aliviy-tip,
.aliviy-common__list .aliviy-tip{
border-bottom:0;
text-decoration:underline;
text-decoration-style:dashed;
text-decoration-color:var(--al-primary-soft);
text-underline-offset:3px;
}
.aliviy-plan__list .aliviy-tip:after,
.aliviy-plan__list .aliviy-tip:before,
.aliviy-common__list .aliviy-tip:after,
.aliviy-common__list .aliviy-tip:before{
content:attr(data-tip) !important;
display:block !important;
}
.aliviy-plan__list .aliviy-tip:before,
.aliviy-common__list .aliviy-tip:before{content:"" !important}
/* Ширина по экрану, а не по содержимому: иначе длинный список форматов
уезжает за правый край */
.aliviy-plan__list .aliviy-tip:after,
.aliviy-common__list .aliviy-tip:after{
left:0;
right:auto;
width:auto;
min-width:200px;
max-width:calc(100vw - 56px);
white-space:normal;
}
}
/* Касание вместо наведения: на телефоне :hover не наступает никогда */
.aliviy-tip:focus:after,
.aliviy-tip:focus:before{opacity:1;visibility:visible;transform:translateY(0)}
.aliviy-tip:focus:before{transform:rotate(45deg) translateY(0)}
.aliviy-tip:focus{outline:none}
/* ==========================================================================
Строка про автопродление на оформлении заказа
Появилась вместе с включённым автоплатежом: человек должен видеть сумму
и срок до оплаты, а не искать их в соглашении. Держим её спокойной —
это пояснение, а не предупреждение об опасности.
========================================================================== */
.aliviy-autopay-note{
margin:0 0 12px;
padding:10px 14px;
background:var(--al-tint-50);
border:1px solid var(--al-line);
border-radius:12px;
color:var(--al-ink-muted);
font-size:13px;
line-height:1.45;
}
.aliviy-autopay-note a{
color:var(--al-primary);
text-decoration:underline;
text-underline-offset:2px;
}
.aliviy-autopay-note a:hover{
color:var(--al-primary-deep);
}
/* ==========================================================================
Таблица сохранённых карт на телефоне
Шаблон WooCommerce на узком экране подписывает каждую ячейку значением
data-title. У колонки с кнопкой «Удалить» подписи нет, и над кнопкой
печаталось голое двоеточие.
========================================================================== */
@media (max-width:768px){
.woocommerce-MyAccount-content .woocommerce-MyAccount-paymentMethods td[data-title=""]:before,
.woocommerce-MyAccount-content .payment-method-actions:before,
.woocommerce-MyAccount-content td.woocommerce-PaymentMethod--actions:before{
content:"" !important;
display:none !important;
}
}
/* Safari до 18-й версии знает размытие фона только с вебкитовским
префиксом — без него у окна отмены подписки оставалась просто заливка. */
.aliviy-modal__back{
-webkit-backdrop-filter:blur(2px);
}
/* ==========================================================================
Вкладка «Оплата», когда сохранённых карт нет
Раньше здесь показывался образец карты с номером 4242 и кнопкой
«Отвязать карту» — человек принимал его за свою карту, а кнопка ничего
не делала. Образец убран, вместо него объяснение и ссылка на тарифы.
Заодно прячем штатные «Сохранённых методов не обнаружено» и кнопку
«Добавление способа оплаты»: карта запоминается при обычной оплате,
отдельная привязка только запутывает. Класс aliviy-no-cards ставится
только на этой вкладке и только при отсутствии карт.
========================================================================== */
.aliviy-no-cards .woocommerce-MyAccount-content > .woocommerce-info,
.aliviy-no-cards .woocommerce-MyAccount-content > .woocommerce-notice,
.aliviy-no-cards .woocommerce-MyAccount-content a.button[href*="add-payment-method"]{
display:none !important;
}
.aliviy-pay__actions{
margin:14px 0 0;
}
.aliviy-pay__btn{
display:inline-block;
padding:11px 20px;
border-radius:999px;
background:var(--al-grad-btn);
color:#fff !important;
font-weight:600;
font-size:14px;
text-decoration:none;
transition:filter .16s ease;
}
.aliviy-pay__btn:hover{
filter:brightness(1.06);
color:#fff !important;
}
/* ==========================================================================
Вкладки кабинета: показываем все, включая «Выйти»
Список вкладок был flex с nowrap и overflow:hidden — восемь пунктов в
строку не помещались, и лишние просто обрезались: на десктопе за краем
оставался «Выйти», на телефоне — пять вкладок подряд. Разрешаем перенос
на вторую строку: так все пункты доступны на любой ширине, и не нужна
горизонтальная прокрутка, о которой ещё надо догадаться.
========================================================================== */
.woocommerce-MyAccount-navigation ul{
flex-wrap:wrap;
overflow:visible;
row-gap:6px;
justify-content:center;
}
/* «Выйти» — действие, а не раздел: отделяем его от вкладок тонкой чертой
слева, когда он стоит в одном ряду с ними. */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{
margin-left:6px;
}
@media (max-width:520px){
.woocommerce-MyAccount-navigation li a{
padding:8px 10px;
font-size:.82em;
}
}
/* Тема добавляет спискам в тексте декоративный псевдоэлемент. В панели
вкладок он невидим, но остаётся полноценным flex-элементом шириной
160 px: занимал место в первом ряду и выталкивал «Подписку» на вторую
строку, оставляя «Обзор» в одиночестве у правого края. */
.woocommerce-MyAccount-navigation ul::before,
.woocommerce-MyAccount-navigation ul::after{
content:none !important;
display:none !important;
}
/* ==========================================================================
Меню кабинета: все восемь пунктов в одну строку
При прежних отступах восемь вкладок занимали 1217 px против 1088 px
доступных, и «Выйти» переносился на вторую строку. Ужимаем отступы,
промежуток между значком и подписью, размер значка и шрифт — этого
хватает, чтобы строка сомкнулась.
Перенос при этом не запрещаем: если у человека крупнее системный шрифт
или уже контейнер, пункты аккуратно перейдут на вторую строку, а не
обрежутся, как было раньше.
========================================================================== */
@media (min-width:1100px){
.woocommerce-MyAccount-navigation li a{
padding:9px 9px;
font-size:13.4px;
gap:6px;
}
.woocommerce-MyAccount-navigation li a svg{
width:17px;
height:17px;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{
margin-left:2px;
}
}
/* Запас на другие браузеры: в Chrome строка смыкалась впритык (1080 из
1088), а в Firefox и Safari текст меряется чуть иначе. Ужимаем ещё —
получается около 40 px свободного места. */
@media (min-width:1100px){
.woocommerce-MyAccount-navigation li a{
padding:9px 8px;
gap:5px;
}
}
/* ==========================================================================
Кабинет: плотнее и без пустот
Три места съедали экран впустую:
1) внутри панели вкладок список имел отступы 24 px сверху и 32 px снизу —
панель занимала 125 px при содержимом в 57 px;
2) справа от «Здравствуйте, имя» пустовала половина строки, а кнопки
«Открыть чат» и «Тарифы» стояли в самом низу, под графиком;
3) плитки со сводкой были выше, чем требует их содержимое.
========================================================================== */
/* 1. Панель вкладок */
.woocommerce-MyAccount-navigation ul{
margin:6px 0;
}
/* 2. Приветствие и действия в одной строке */
.aliviy-dash__top{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
flex-wrap:wrap;
margin:0 0 18px;
}
.aliviy-dash__top .aliviy-dash__hi{
margin:0;
}
.aliviy-dash__top .aliviy-dash__links{
display:flex;
align-items:center;
gap:10px;
margin:0;
}
@media (max-width:600px){
.aliviy-dash__top{
align-items:stretch;
gap:12px;
}
.aliviy-dash__top .aliviy-dash__links{
width:100%;
}
.aliviy-dash__top .aliviy-dash__links .aliviy-plan__btn{
flex:1 1 0;
text-align:center;
}
}
/* 3. Плитки сводки */
.aliviy-dash__tile{
padding:13px 16px;
}
/* Пустой список заказов: текст и кнопка расходились по горизонтали и
налезали друг на друга. Ставим их в строку с нормальным промежутком. */
.woocommerce-MyAccount-content .woocommerce-info{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:14px;
}
.woocommerce-MyAccount-content .woocommerce-info .button{
margin:0;
float:none;
}
/* Отступы списка задаёт тема (правила для списков внутри текста статьи), и
обычным правилом их не перебить — панель вкладок оставалась 125 px при
содержимом 57 px. Здесь это не текст статьи, а панель навигации. */
.woocommerce-account .woocommerce-MyAccount-navigation ul{
margin:6px 0 !important;
padding-left:0 !important;
}
/* Между панелью вкладок и приветствием оставалось около 85 px пустоты:
24 px давала сама панель, остальное — верхний отступ блока сводки. */
.woocommerce-MyAccount-content .aliviy-dash{
margin-top:0;
}
.woocommerce-account .woocommerce-MyAccount-navigation{
margin-bottom:16px;
}
/* ==========================================================================
Кабинет: убираем пустоту сверху
Хлебные крошки «Главная » Личный кабинет» здесь не нужны: кабинет — не
раздел каталога, а рабочий экран, и путь в нём один. Плюс контейнер
отступал 30 px сверху, а пустой блок уведомлений добавлял ещё полсотни.
========================================================================== */
.woocommerce-account .breadcrumb{
display:none;
}
.woocommerce-account .site-content{
padding-top:14px;
}
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:empty{
display:none;
}
.woocommerce-account .woocommerce-MyAccount-content > *:first-child{
margin-top:0;
}
.woocommerce-account .woocommerce-MyAccount-content .aliviy-dash{
margin-top:0;
}
/* Блок уведомлений WooCommerce остаётся в разметке всегда, даже когда
сообщений нет: сам он нулевой высоты, но его отступ снизу добавлял
полсотни пикселей пустоты между вкладками и содержимым. Псевдокласс
:empty тут не срабатывает — внутри пробелы и перевод строки. */
.woocommerce-account .woocommerce-MyAccount-content > .woocommerce-notices-wrapper{
margin:0;
padding:0;
}
/* ==========================================================================
Кабинет: пустые абзацы и отступы заголовка
Между вкладками и сводкой стояли два пустых
по 27 px — их создаёт
wpautop из переносов строк в выводе шорткодов. Высоты у них нет, но
отступы есть, и вместе они давали 54 px пустоты.
Заодно выравниваем поля вокруг заголовка «Мой кабинет»: сверху было
14 px, снизу 18 — разница бросалась в глаза.
========================================================================== */
.woocommerce-account .woocommerce-MyAccount-content > p:empty{
display:none;
}
.woocommerce-account .site-content{
padding-top:10px;
}
.woocommerce-account .entry-title{
margin-bottom:10px;
}
/* Пустые абзацы от wpautop содержат перевод строки и табуляцию, поэтому
:empty их не ловит. Берём прямых детей контента без класса — своих
абзацев мы там не выводим, всё наше идёт блоками с классами. */
.woocommerce-account .woocommerce-MyAccount-content > p:not([class]){
margin:0;
line-height:0;
}
/* Заголовок страницы: у темы правило сильнее, поэтому повторяем с тегом. */
.woocommerce-account h1.entry-title{
margin-bottom:10px;
}
/* ==========================================================================
Оформление заказа: кнопка оплаты ближе к первому экрану
Замер на окне 950 px: кнопка «Оплатить» оказывалась на 327 px ниже
границы экрана. Складывалось из множества щедрых отступов — по 20–30 px
вокруг каждого блока. Уплотняем их, ничего не убирая: состав страницы
остаётся прежним, просто перестаёт быть разреженным.
========================================================================== */
.woocommerce-checkout .site-content{
padding-top:10px;
}
.woocommerce-checkout h1.entry-title{
margin-bottom:12px;
}
/* Сводка «Итого» */
.woocommerce-checkout .aliviy-table{
margin-top:14px;
margin-bottom:14px;
}
.woocommerce-checkout .woocommerce-checkout-review-order{
margin-top:10px;
padding-top:12px;
}
/* Способ оплаты: логотип, рамка и список сохранённых карт */
.woocommerce-checkout li.wc_payment_method{
padding:10px 14px;
}
.woocommerce-checkout li.wc_payment_method > label img{
max-height:30px;
}
.woocommerce-checkout .payment_box{
margin-top:8px;
padding:10px 12px;
}
.woocommerce-checkout .woocommerce-SavedPaymentMethods li{
padding:9px 14px;
margin-bottom:6px;
}
/* Примечание об автопродлении и кнопка */
.woocommerce-checkout .aliviy-autopay-note{
margin-bottom:12px;
padding:8px 12px;
}
.woocommerce-checkout .form-row.place-order{
margin-bottom:8px;
}
/* ==========================================================================
Страница заказа: фирменный вид вместо розовых плашек
Номер, дату и статус WooCommerce оборачивает в , а браузер красит
их жёлто-розовым по умолчанию. На фиолетовой гамме сайта это выглядело
чужеродно, будто текст выделен маркером по ошибке.
========================================================================== */
.woocommerce-order-details mark,
.woocommerce-order-details__title + p mark,
.woocommerce-MyAccount-content mark,
.woocommerce-order mark{
background:transparent;
color:var(--al-primary-deep);
font-weight:600;
padding:0;
}
/* Строка «Заказ № … находится в статусе …» — это подпись к таблице ниже,
а не абзац текста: делаем её спокойнее и ближе к таблице. */
.woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-MyAccount-content p.order-again + p,
.woocommerce-MyAccount-content > p:first-of-type{
color:var(--al-ink-muted);
}
/* ==========================================================================
История: диалоги и сгенерированные изображения
Просмотр картинки в полном размере сделан на :target — содержимое вкладок
кабинета проходит через wp_kses, и со